Claude Code（クロードコード）を使えば、FigmaからCodeに、CodeからFigmaへの流れがあっという間にできてしまいます🤯❗️
Claude Codeはターミナル上で動くので、慣れていない人は少しハードルが高いかもしれません...💦
この動画を参考にセットアップいただければ幸いです🥳♪
📋 コピー用：Claude Code セットアップコマンド
1. Node.js インストーラー（公式サイト）
https://nodejs.org/ja/download
2. Claude Code インストール
sudo npm install -g @anthropic-ai/claude-code
3. Figma MCP サーバー登録
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
🎥 この動画の構成 🎥
00:00 オープニング｜Claude Code × Figmaでデザインとコードを行き来する
00:17 Claude Code とは？
00:58 今回やること（Figma→コード／コード→Figma）
01:07 Figma MCPの仕組み
01:46 必要なプラン（Claude Pro / Figma Professional）
02:06 セットアップ①：Node.jsの確認とClaude Codeのインストール
02:48 セットアップ②：Figma側のMCP設定
03:08 セットアップ③：ターミナルでMCPを登録
03:36 セットアップ④：プロジェクト作成とClaude Code起動
04:26 セットアップ⑤：MCPの接続確認
04:58 【実演】Figmaのデザイン → コードに変換
05:49 生成結果の確認・Figmaデザインとの比較
06:31 【実演】コード → Figmaに取り込む（Code to Figma）
07:41 取り込み結果の確認・コードとの比較
08:05 この双方向連携で何が変わるのか
08:29 まとめ・おわりに
✏️✏️✏️ヒロコードが直接指導のWebデザインスクール 🥳✨
「ヒロコードアカデミー」はこちら👇
https://lp.hirocodeweb.com/
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
http://www.youtube.com/hirocode?sub_confirmation=1
#claudecode #Figma #webデザイン
