理想とのギャップをどう埋める？Figma MCPの実装を期待通りに着地させる調整術
理想とのギャップをどう埋める？AIエディタとFigma MCPの実装を期待通りに着地させる調整術
最近、Figmaのデザインをコードに変換する「Figma MCP（Model Context Protocol）」の活用が進んでいます。しかし、実際に業務で使ってみると、URLを貼るだけで完成とはいかず、細かな修正に意外と工数を取られているケースも多いのではないでしょうか。
先日、社内のエンジニアでFigma MCPやCursorなどのAIエディタを使った実装の知見共有会を行いました。今回は、実装の精度を高めるための実践的なステップと調整のコツを共有させていただきます。
※本記事の内容は2026年4月時点の情報に基づいています。AIツールの進化は非常に早いため、ご覧いただくタイミングによっては仕様が異なる可能性があります。あらかじめご了承ください。
今回使用しているツールについて
本記事の解説では、以下のツールを使用しています。
- Cursor:
AIがファイルを直接書き換えるためのインターフェースです。今回はCursorを使用しています。
Cursorは、Microsoftが開発するオープンソースの「Visual Studio Code（VS Code）」をベースに、AI機能をネイティブに統合して作られた次世代のコードエディタです。VS Codeの拡張機能や設定を引き継ぎつつ、AIによる高機能なコード生成・修正が可能です。
- Figma MCP:
FigmaのデータをAI（LLM）が直接読み取れるようにするための共通規格（プロトコル）です。 これを利用することで、AIがデザインのレイヤー構造やCSSプロパティをリアルタイムに解析できるようになります。
1. 【前準備】AIが掃除しやすいように「床」を片付ける
SNSなどでよく見かけるAIコーディングでは「一発でプロレベル」という夢のある事例が多いですが、現場の実務ではそこまで簡単ではありません。
例えるなら、これは「ロボット掃除機」に似ています。ロボット掃除機に掃除をさせるには、まず人間が床にある障害物を取り除き、「掃除しやすい環境」を整えないと、床はきれいにならないですよね。AIコーディングも全く同じで、AIが実装しやすいデザインデータを作ることが、精度向上につながります。
AIは「目隠しをした実装者」
Figma MCPを経由しても、AIが見ているのはデザインそのものではなく、裏側にある「CSSプロパティ」や「階層構造のデータ」です。言わば「目隠しをしている人に、レイアウトを言葉（数値）だけで説明している」ような状態です。
Figmaの「オートレイアウト」を整える（必須）
AIにとって、Figmaの「オートレイアウト」設定はHTMLの構造（FlexboxやGrid）を理解するための重要な手がかりです。ここが整っていないと、AIは要素同士の関係性を推測できず、すべての要素を position: absolute; で配置しようとするなど、レスポンシブ対応が難しい脆弱なコードを生成してしまいます。
不要な「ノイズ」を取り除く
非表示のレイヤーや実装に関係のないマスクが残っていると、AIはそれらを「必要な情報」として解釈し、複雑すぎるCSSを出力してしまいます。AIに渡す情報を最小限に絞り込むことが、精度の高いコードへの近道です。
2. 【実装】全体を一気に作らせず「セクション単位」で進める
ページ全体を一気に依頼すると、AIの記憶容量（コンテキスト）の制限により、細部のスタイルが抜け落ちやすくなります。
タスクを切り分けて確実に進める
「ヘッダー」「ヒーローセクション」「各コンテンツブロック」というように、物理的に分割して依頼しましょう。一つのセクションを確定させてから次へ進むのが、結果として手戻りを防ぎます。
「コンポーネントURL」を活用する
FigmaのページURLではなく、開発モードで対象要素を選択した状態のURLを渡してください。参照範囲を絞り込むことで、ノイズの混入を防ぎ、意図に近いコードが返ってきやすくなります。
3. 【仕上げ】修正の精度を高める「比較」と「ブラウザ機能」
AIに「セルフチェック（比較分析）」させる
人間が目視ですべてのズレを指摘する前に、まずはAI自身に差分を解析させます。CursorなどのAIエディタに「Figmaのデザインと現状の実装を比較し、マージン、フォント、色の差分をリストアップせよ」と指示します。AI自身に分析させることで、無駄な指示出しの時間を削れます。
Cursorの「ブラウザ機能」でインタラクティブに修正する
数ピクセルの微調整をプロンプト（言葉）だけで完結させるのは非効率です。ここで強力なのが、Cursorに搭載されているブラウザプレビュー機能です。
エディタ内でブラウザを立ち上げ、デベロッパーツールのように直接プレビュー上でスタイルをいじることができます。納得のいく数値が決まったら、そのままAIに対して「今のブラウザでの変更内容をコードに反映して」と指示を出すことで、視覚的な微調整とコードへの反映がシームレスに完結します。
複雑な要素は無理に「コード化」しない
複雑なSVGや吹き出しをAIにコードで再現させようとすると、出力が不安定になります。AIが苦手とする図形は、Figmaから画像として書き出して貼り付けるのが正解です。
Tips：Figmaで Cmd(Ctrl) + Shift + C を押せば「PNGとしてコピー」が可能です。そのままエディタにペーストして参照させましょう。
まとめ
Figma MCPとAIエディタを使いこなす流れは以下の通りです。
- オートレイアウトで「実装しやすい」Figmaデザインを作る（障害物の除去）
- セクション単位で依頼し、コンテキストを絞って確実に実装する
- 比較分析をAIにさせ、差異をリストアップさせる
- Cursorのブラウザ機能で、手動で細部をしあげる
AIが得意な「構造作り」と、人間が得意な「微調整と判断」をうまく組み合わせて、効率的な開発を進めていきましょう。