はじめに
FigmaのデザインをFlutterで実装する際、デザインを見ながらコードを書く作業は時間がかかります。最近ではAIを活用してこの作業を効率化する方法が注目されています。
この記事では、Figma MCP（Model Context Protocol） と Claude Code を組み合わせてFlutterのUI実装を効率化する方法を紹介します。特に、Figmaリンクの渡し方によって出力精度に違いがあることがわかったので、その知見を共有します。
Figma MCPとは
MCP（Model Context Protocol）は、Anthropicが策定したAIとデータソース間の通信プロトコルです。Figma社が提供する公式のFigma MCPサーバーを使用することで、Claude CodeなどのAIツールがFigmaのデザイン情報を直接読み取り、コード生成に活用できます。
セットアップ
Claude Codeでは、ターミナルからコマンドを実行してFigma MCPサーバーを追加します。
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
次に、Claude Code内で認証を行います。
/mcp
/mcpコマンドを実行し、figmaを選択して認証処理を開始します。ブラウザが開いてFigmaアカウントとの連携を求められるので、承認してください。
3つのアプローチの比較
下図のようなシンプルなコンポーネント（Text、Toggle、Imageが並ぶ構成）を題材に、3つのアプローチを検証しました。
検証に使用したコンポーネント
パターン1: スクリーンショットを渡す
この画面のUIを実装して。
[Image #1]
Figmaからスクリーンショットを撮影し、画像としてAIに渡すアプローチです。MCPは使用しません。
パターン2: Figmaリンクを直接渡す
Figma MCPを使ってこの画面のプロフィールセクションを実装して。
https://www.figma.com/design/xxxxx/yyyyy
Figma MCPでデザイン情報を取得し、そのまま実装を依頼するアプローチです。
パターン3: 一度プロンプト化してから渡す
Figma MCPを使ってこのFigmaデザインの内容を取得し、
Flutter実装用のプロンプトとして整理してください。
https://www.figma.com/design/xxxxx/yyyyy
AIにデザインを分析させ、構造化されたプロンプトを生成してもらい、そのプロンプトを使って実装を依頼する2段階のアプローチです。
検証結果
今回の検証では、パターン3（プロンプト化してから渡す）が最も出力精度が高いという結果になりました。
| 順位 | パターン | 精度 |
|---|---|---|
| 1 | パターン3: プロンプト化してから渡す | ◎ |
| 2 | パターン2: Figmaリンクを直接渡す | ○ |
| 3 | パターン1: スクリーンショットを渡す | △ |
パターン1（スクリーンショット）の問題点
- デザイン情報が画像のみのため、余白やフォントサイズなどの数値が推測になる
- デザイントークンやデザインシステムの情報が一切得られない
- 色の指定が目視ベースになり、微妙にずれることがある
- コンポーネント構造が不明なため、適切な分割ができない
パターン2（Figmaリンク直接）の問題点
- デザインの細部が見落とされることがある
- コンポーネントの階層構造が正確に再現されない場合がある
- 余白やフォントサイズの指定が曖昧になりがち
- デザイントークンやデザインシステムのコンポーネントが使われないことがある（ハードコードされた値になりがち）
パターン3が優れている理由
- 情報の構造化: AIがデザインを一度分析することで、重要な要素が整理される
- 明示的な仕様: プロンプトとして出力されることで、実装すべき内容が明確になる
- デザインシステムの活用: プロンプトにデザイントークンの使用を明記することで、プロジェクトのデザインシステムに沿った実装になる
- レビュー可能: 生成されたプロンプトを確認・修正してから実装に進める
- 再利用性: 生成されたプロンプトは他のAIツールでも使い回せる
具体例
実際に試した際のワークフローを紹介します（一部情報はマスクしています）。
Step 1: Figma MCPでデザイン情報を取得しつつプロンプト生成を依頼
以下のようにClaude Codeに依頼します。
Figma MCPで以下のUIの情報を取得して。
実装したい箇所は「プロフィール」のセクションです。
また、取得した情報からUIの実装をしたいので
Claude Codeに実装を依頼するプロンプトを作成して。
https://www.figma.com/design/xxxxx/yyyyy
Step 2: Figma MCPが情報を取得
Claude CodeがFigma MCPを呼び出し、以下のような情報を取得します。
⏺ figma-mcp - get_design_context (MCP)
(nodeId: "9998:16455", clientLanguages: "dart", clientFrameworks: "flutter")
⏺ figma-mcp - get_screenshot (MCP)
(nodeId: "9998:16455", clientLanguages: "dart", clientFrameworks: "flutter")
Figma MCPは以下の情報を返します：
- デザインシステムのスタイル定義（色、フォントなど）
- コンポーネントの構造とサイズ
- 画像アセットのURL
- スクリーンショット
Step 3: 構造化されたプロンプトが生成される
Claude Codeが取得した情報を分析し、以下のような構造化されたプロンプトを生成してくれます。
生成されたプロンプト例（クリックで展開）
## 実装場所
lib/src/component/hogehoge/
ディレクトリ内に `profile_section.dart` として作成
## UI仕様
### コンテナ
- 背景色: Surface/Secondary (デザインシステムから取得)
- 角丸: 8px
- パディング: 上下左右16px
### タイトル行
- 横並びレイアウト (Row)
- 左側: 「プロフィール」テキスト
- フォント: Hiragino Sans W6相当、12px、行高1.5
- 色: Text/Primary (#2D2D2D)
- 右側: トグルスイッチ (iOS形式)
- ON時の色: #34C759 (緑)
- サイズ: 51px × 31px
### 写真リスト
- タイトル行の下に配置 (16px程度の余白)
- 横スクロール可能なリスト
- 各写真:
- サイズ: 49.5px × 66px (3:4の比率)
- 角丸: 8px
- 写真間の余白: 4px
- objectFit: cover
## プロパティ
- `isEnabled`: bool - トグルスイッチのON/OFF状態
- `onToggleChanged`: void Function(bool) - トグル変更時のコールバック
- `photoUrls`: List<String> - 表示する写真のURLリスト
## 実装時の注意点
1. デザインシステムの色・スタイルを使用すること
2. StatelessWidget として実装
3. トグルスイッチはCupertinoSwitchを使用
4. 写真リストは ListView.builder で横スクロール実装
Step 4: プロンプトを使って実装を依頼
生成されたプロンプトを確認・修正した上で、同じClaude Codeセッションまたは新しいセッションで実装を依頼します。
以下の仕様でFlutterウィジェットを実装してください。
[上記のプロンプトを貼り付け]
なぜこの方法が効果的なのか
パターン3（プロンプト自動生成 → 実装）の方が精度が高い理由を、LLMの研究知見を交えながら考察します。
1. MCPの生データは情報過多でノイズになりやすい
Figma MCP経由で取得できる情報は、色・サイズ・フォント・スペーシング・コンポーネント構造・デザイントークン・コメントなど多岐にわたります。しかし、これらの情報量は膨大で、AIが優先順位をつけることが困難になります。
その結果、「デザイントークンを活用する」という高度な設計判断よりも、目の前の生データをそのままコード化する方向に流れやすくなります。
2. 中間の抽象化レイヤーが思考を整理する（段階的プロンプティング）
パターン3では以下のような処理フローになります。
Figma生データ → 要点の抽出 → プロンプト化 → コード生成
この中間の抽象化レイヤーにより、AIは以下の点を明確化するプロセスを踏みます。
- どの情報が実装に必要か
- どの情報は省略してよいか
- どのような構造で伝えると正確な実装につながるか
この整理のステップがあることで、デザイントークンの使用といった設計原則にも意識が向くようになります。
3. AIはプロンプト生成タスクが得意
Claudeは「良い指示を書く」タスクに強みを持っています。Anthropicの開発者コンソールにはPrompt Generatorという機能があり、簡潔なタスク説明から包括的なプロンプトを生成できます。これは、Claudeが最適な出力を生成するための条件を理解し、指示文を再構築する能力を持っていることを示しています。
その結果、プロンプト生成時に以下のような前提条件が自然に盛り込まれます。
- 「デザイントークンを優先して使用する」
- 「SpacingはSpacing.xxxを使用する」
- 「Colorはtheme.colorSchemeから取得する」
パターン1・2ではこれらを明示的に指示しない限り、AIがこうした前提を自発的に考慮しにくい傾向があります。
4. プロンプト生成により文脈と目的が明示される
パターン1・2では、以下の情報がプロンプトに明示されていないとAIは理解できません。
- 目的（既存の Design System を使用する）
- 方針（Spacing / Colorなどの規約）
- 制約（Widget 構造のルール）
パターン3のプロンプト生成では、Figmaの情報を言語化する過程で「何のための実装か」という文脈が自動的に明確になります。これにより、AIが目的に沿った実装を生成しやすくなります。
まとめ
Figma MCPとClaude Codeを使ったFlutter UI実装において、Figmaリンクを直接渡すよりも、一度プロンプト化してから渡す方が精度が高いと感じました。
ひと手間かかりますが、以下のメリットがあります：
- より正確なUI実装
- デザイントークンやデザインシステムのコンポーネントが適切に使用される
- 実装前にプロンプトをレビューできる
- プロンプトの再利用が可能
AIを活用したUI実装のワークフローとして、ぜひ試してみてください。
Discussion