目次
Claude Code to Figmaでコード→デザインへの変換が可能に
「コード → デザイン」へ変換し、Figma上でブラッシュアップ→コードへ反映する相互連携フローを試してみました。
この記事では、Claude CodeとFigma MCPサーバーを組み合わせて、
- コード生成
- Figmaへのインポート
- 実務で使えるかの検証
までを一通り試した結果を備忘録も兼ねて整理します。
今までできたこと（前提）
Figmaデザイン → Claude Codeへ読み込み
- MCPサーバー経由でFigmaデザインを取得
- デザインを元にコード生成
新しくできること
2026年2月17日にClaude Code to Figmaがリリースされ、コード → Figmaデザインへの書き出しが可能になりました。（今回の主題）
- HTMLを元にFigmaへレイアウトを生成
- デザインツール上でUIを調整可能
Figma MCP、Claude Code to Figmaとは
Figma MCP公式ページの解説を一部引用します。
Figma MCPサーバーは、Figmaデザインファイルからコードを生成するAIエージェントに重要なデザイン情報とコンテキストを提供し、エージェントがネイティブなFigmaコンテンツをキャンバスに書き戻せるようにすることで、Figmaをワークフローに直接統合します。
MCPサーバーは、AIエージェントがモデルコンテキストプロトコルを使用してデータソースとやり取りするための標準化されたインターフェースの一部です。
サーバーを有効にすると、以下のことが可能になります。
キャンバスへの書き込み：MCPクライアントから直接、Figmaネイティブコンテンツを作成および変更できます。適切なスキルを持つエージェントは、デザインシステムを情報源として使用し、Figmaファイル内のフレーム、コンポーネント、変数、および自動レイアウトを構築および更新できます。
選択したフレームからコードを生成：Figmaのフレームを選択してコードに変換します。新しいフローを構築したり、アプリの機能を反復的に改善したりする製品チームに最適です。
デザインコンテキストの抽出：変数、コンポーネント、レイアウトデータをIDEに直接取り込むことができます。これは、デザインシステムやコンポーネントベースのワークフローにおいて特に役立ちます。
https://developers.figma.com/docs/figma-mcp-server/
さらにFigma MCPの機能を拡張し、コードからFigmaへのデータ送信が可能になる「Claude Code to Figma」がリリースされました。
https://www.figma.com/blog/introducing-claude-code-to-figma
この仕組みにより、単なるコード生成ではなく「デザインとコードの相互連携」が可能になるようです。
今回作業する環境の紹介
- Anthropic（Claude Codeが使えるProプラン）
- Figma（Professionalプラン + Devモード）
- VSCode（最新版）
- Node.js 18以上
作業の目標
以下のプロセスを一通り体験すること
- Claude Codeでページ生成
- Figmaにインポート
- UIを確認・ブラッシュアップ
- 実務でどう生かしていくかの確認
VSCodeにClaude Code拡張機能の導入
- VSCodeに拡張機能「Claude Code for VS Code」をインストール。
- サイドバーから起動
- サインインを実行（ブラウザ認証）
Figma MCPサーバーを接続する
VSCodeターミナルで以下を実行
claude mcp add --transport http figma https://mcp.figma.com/mcpその後Claude Codeを再起動し、Claude Codeのスレッド上で以下
/mcpを入力し、「Manage MCP server」を選択。
「figma」を選択して認証
コードを生成してみる
以下のような構成で指示します。
- 作りたいページの構成
- ワイヤーフレーム（テキストベース）
- コーディングルール
実際のプロンプト
sampleディレクトリーを作成し、シンプルなポートフォリオページを作ってください。
- ヘッダー（名前・ナビゲーション）
- ヒーローセクション（キャッチコピー・CTA ボタン）
- 実績カードが並ぶセクション（3列グリッド）
- フッター
スタイルはモダンなデザインで、HTML + SCSS を使用してください。
class属性はBEMベース。ただしモディファイアは「-」始まりの別クラスで表現してください。実行中の挙動
コマンド実行の許可確認やファイル変更の確認がありつつ、約5分程度で一式が生成されました。
sample
├── common
│ ├── css
│ │ ├── style.css
│ │ ├── style.css.map
│ │ └── style.scss
│ └── js
│ └── main.js
└── index.html成果物
グラデーション・ジャンプ率高めのモダンなデザインのポートフォリオサイトが生成されました。
コードは指示した通りのHTML + SCSS構成で、見た目だけでなく、そのままWebページとしてしっかり動くことも確認できました。
Figmaへのインポート
Figmaへのインポートに必要なプロンプトは簡単です。
実際のプロンプト
/sample/index.htmlのデザインをFigmaに送ってください。実行中の挙動
初回のインポートでは新規 or 既存ファイルの選択ができます。FigmaMCPと接続しているので、自分の所有しているプロジェクトを選択肢にサジェストしてくれます。
その後、制作したページにインポート専用のスクリプトをインストールして良いかを許可すると、プレビューが立ち上がり、「Figmaを開く」ボタンが表示されます。
Figmaファイルの内容
Figmaにインポートされたファイルがどうなっているか見ていきます。
良かった点
- セクション構造が正しく再現され、フレームにBodyやContainerなど適切な名前が割り振られていて見やすい
- UIの骨格はほぼそのまま使えそう
気になった点
- 色・余白など細部の再現精度はやや低い
- タイポグラフィが微妙にズレている
- オートレイアウトが反映されていない
ただし、ここら辺もプロンプト次第で改善する可能性は大いに感じました。
Figmaでの変更をコードへ再反映
まずはテキストの変更をしてみます。
Figmaでメインコピーのテキストを変更し、テキスト箇所で右クリックし「選択箇所へのリンクをコピー」
そして次のプロンプトを実行します。
次のリンク先の変更点をindex.htmlに反映してください。
https://www.figma.com/design/[タイトルテキストへのURL]
結果、正常にテキストが変更されました。
では、全体的に変更を加えて、大まかに指示を出すプロンプトを試します。
ボタンの色や、サブテキストの色、実績のレイアウトに変更を加えました。
またFigmaデータ構造には、オートレイアウトの適用や、変更したカラーをバリアブルへ追加しています。
先ほどと違い、プロンプトのリンク先はページ全体のリンクを指定します。
次のリンク先の変更点をindex.htmlに反映してください。
https://www.figma.com/design/[ページ全体のURL]一度目は、実績の並びが変わっていることだけを検知し変更されただけでした。
次のようにプロンプトを修正します。
次のリンク先の変更点をページ全体に反映してください。
https://www.figma.com/design/[ページ全体のURL]バリアブルに追加したカラーが反映されましたが、レイアウトの変更はまだ反映されていません。
そこで、Figmaリンク先を実績セクションのオートレイアウト箇所へのURLに変更し、プロンプトを次のように修正します。
次のリンク先の変更点を実績セクションに反映してください。
https://www.figma.com/design/[実績三件のレイアウト箇所へのURL]
今度はうまくいきました。また、特に指示していない、「モバイルではカード内のレイアウトを縦積みに戻す」レスポンシブが実装されています。
ざっくり指示を出すと再現性が低下して効率が悪いので、
- Figma上の設計を丁寧に
- 選択範囲へのリンクを指定し、コンポーネント単位で指示を出す
という箇所に気をつける必要がありそうです。
まとめ
使ってみた所感として次のようにまとめます。
- Claude Codeにはデザインの叩き台や、仮要素の生成、全体の方向性のヒントが欲しい場面で役立つ
- Figmaデータのバリアブル、コンポーネント、オートレイアウトの管理はプロンプト次第ではあるものの、おそらく人間が設計を担当する
- コードを触らずにレイアウトを変更することができるので、デザイナーとコーダーの連携がよりスムーズになりそう
デザインの方向性決定やプロジェクトファイル構築の時間が短縮され、フィードバックをベースに手作業を始められるのは、個人的に好ましく感じました。
