Figma MCPで実現できることと全体像
Figma MCPは、Figma Designなどのファイルからデザインコンテキストやコードを取得し、MCP対応のAIクライアントで実装に活用するための仕組みです。Figma公式ガイドでは、レイアウトやデザイン情報を取得するだけでなく、対応クライアントからFigmaのキャンバスへ内容を書き戻す用途も案内されています。
ただし、MCPがデザインを無条件に完成品へ変換するわけではありません。Figmaの対象範囲、既存リポジトリ、コンポーネント規約、レスポンシブ要件などをAIへ伝え、生成されたコードを人間が確認する流れになります。CodexとFigmaの連携では、Figmaファイルのデザイン情報をコード実装へ反映するワークフローが公式に紹介されています。
sequenceDiagram
participant E as エンジニア
participant C as Codex
participant M as Figma MCP
participant F as Figma
participant R as コードリポジトリ
E->>C: 対象ノードと実装条件を指定
C->>M: デザイン情報を要求
M->>F: ノード情報を取得
F-->>M: レイアウト・テキスト・構造
M-->>C: デザインコンテキスト
C->>R: 既存コードを参照・実装
R-->>E: 差分と動作を確認図を表示できませんでした。Mermaidコードを確認してください。
基本的には、Figmaのデザイン情報、MCP連携、Codex、既存コードをつなぐ構成です。MCPはデザインと実装の間で情報を受け渡すため、対象画面やノードを絞り込むことが重要です。
利用前に確認する環境と準備項目
- Figmaファイルまたは対象ノードへの閲覧権限を確認する。
- MCPサーバーに接続できるAIクライアントと、対象リポジトリへのアクセス権を用意する。
- 実装対象のフレーム、コンポーネント、画面状態を先に決める。
- フレームワーク、既存コンポーネント、CSS、命名規則、アクセシビリティ要件を整理する。
Figma公式ガイドでは、リモートサーバーとデスクトップサーバーの接続方法が案内されています。リモートサーバーは全シート・全プランで利用可能とされる一方、デスクトップサーバーは有料プランのDevまたはフルシートが条件です。利用条件は変更される可能性があるため、導入時には公式情報とワークスペース設定を確認してください。
MCP経由でFigmaの情報を取得する流れ
Figma公式ガイドでは、対象レイヤーやフレームのリンクをコピーし、MCPクライアントへ貼り付けてデザインコンテキストの取得を依頼する手順が示されています。クライアントはリンクから対象ノードを識別し、MCPサーバーを通じて情報を取得します。
Figmaの選択ノードを参照して、既存のButtonコンポーネントを使いながら実装してください。
対象: ログイン画面のフォーム部分
条件: React、既存のCSS設計に従う、モバイル幅にも対応する
出力: 変更するファイル一覧、実装コード、Figmaとの差分、確認手順取得した情報は、そのままコードへ置き換えるのではなく、画面構造、再利用可能な要素、レスポンシブ対応、既存コンポーネントとの対応関係を確認します。特に、対象ノードに含まれていない挙動や仕様をAIが推測している場合は、実装条件として明示するか、人間が判断します。
取得したデザイン情報をUI実装へ反映する方法
まず画面をヘッダー、メイン領域、フォーム、カードなどの大きな領域に分けます。次に、ボタンや入力欄のような繰り返し要素を既存コンポーネントへ対応付けます。見た目の再現だけでなく、アクセシビリティ、状態管理、レスポンシブ設計も実装条件に含めることが大切です。
| 観点 | 確認内容 |
|---|---|
| Figmaの指定値と実装値 | 余白、色、文字サイズなどが既存のトークンやCSS規約と矛盾しないか |
| 単発実装と共通化 | 再利用される要素を既存コンポーネントへ対応付けられるか |
| 固定レイアウトとレスポンシブ対応 | 異なる画面幅やコンテンツ量でも破綻しないか |
AIが生成したコードは、デザインとの一致だけで評価せず、ビルド、表示、操作性、再利用性を確認します。必要に応じて、Figmaの対象ノードを分割して取得し、画面単位ではなくコンポーネント単位で実装を進める方法もあります。
利用制限と運用時に注意すべきポイント
- Figmaのプランやシート種別によって、リモート・デスクトップサーバーの利用条件が異なる。
- AIクライアント側の接続方式、認証方法、利用量、コンテキスト制限も別途確認する。
- 取得できる情報は、ファイル構造、権限、選択ノード、連携機能によって変わる可能性がある。
- 非公開デザインや認証情報を扱うため、ログ、共有範囲、外部送信、レビュー手順をチームのポリシーに合わせる。
Figmaは、MCPサーバーの利用状況やレート制限について、開発者向けドキュメントで確認するよう案内しています。また、MCPサーバーはベータ期間中の機能を含み、提供条件や対応クライアントが更新される可能性があります。実際の導入では、契約中のプラン、ワークスペース権限、利用するCodex環境を個別に確認してください。
開発