この投稿は、JINS Advent Calendar 2025 の 4日目 の記事です。
自己紹介
JINSのITデジタル部に所属しているOnamiです。
私は新卒でJINSに入社し、数年間は店舗スタッフとして現場で働いていましたが、
その後デジタル領域に興味を持ち、今の部署に異動しました。
現在は、フロントエンドからバックエンドまで一貫して見れるUI/UXデザイナーを目指し、日々デザイン制作とアプリケーション開発に取り組んでいます。
はじめに
本記事では、Figma MCPを活用しAIコード生成の品質を高めた実践レポートになります。
それと合わせて見えてきた課題とAIに意図を正確に伝えるためのデザイン制作のコツを紹介します。
Figma MCPとは
-
Model Context Protocol (MCP) は、大規模言語モデル（LLM）が外部のデジタルサービス（Figma、Notion、Jiraなど）と連携するためのプロトコルです。
-
Figma MCP は、AIがFigma MCPサーバーを通じて構造化されたデザインデータを取得し、単なる画像情報ではなく、レイヤー構造、スタイル、コンポーネント定義といった意味情報を読み取れるようにする架け橋です。
これまでのAI実装のやり方と課題
従来のフロー
FigmaのデザインをスクリーンショットとしてAIチャットツールに貼り付け、
「この画像をもとに画面実装して」と依頼していました。
試しに簡易的に作成したログイン画面のデザインをもとに従来の方法で実装してみます。
Figmaのデザイン
AIが実装した画面
見た目の雰囲気は近いですが、よくみるとカラーやマージン、角丸、エフェクトなどFigmaのデザインデータと乖離があることが分かります。
当たり前ですが、メールアドレス・パスワードの入力欄のバリアントもAI側がよしなに実装しており、デザイン側で設定されているものは反映されません。
この方法の課題
情報の欠落と解釈のブレ
スクショの画像だけでは、マージン・パディング・角丸などの正確な値や、コンポーネントの構造、バリアントの設定などの情報がAIに伝わりません。結果、AIは推測で実装するため、再現度が低くなりがちです。
非効率な手戻り
生成されたコードとデザインの整合性が合わないため、結局エンジニアがFigmaのDev Modeで数値を確認しながら修正する必要があり、真の効率化にはつながりませんでした。
Figma MCPを使ってみた実践レポート
Figma MCPの繋ぎ方は以下公式サイトをご参考ください。
今回利用したツール
- Figma公式Dev Mode MCPサーバー
- VSCodeエージェントモード（GPT-4.1）
まずはメールアドレス・パスワードの入力欄InputFieldのコンポーネントから実装してみます。
コンポーネントの作成
プロンプト
Figmaにアクセスして、以下のURLから情報をデザイン情報を取得し、
Input Fieldコンポーネントを作成して。
(Figmaから取得した対象コンポーネントのURLをペースト)
すると、このようにFigma MCPサーバーを経由してデザイン情報を取得してくれます。
VSCode（エージェントモード）
Figma（インスペクトタブ）
取得したデザイン情報をもとにAIが実装を開始します。
実装されたコンポーネント
マージンや角丸などデザインに忠実に実装することができました。
キャプチャでは伝わりづらいですが、このときデザインコンポーネントに設定していたバリアントもデザインに準拠したもので実装してくれました。
コンポーネントのバリアント設定
ある程度のバリアントは実装してくれたもののFocus時のバリアントがうまく反映されていなかったので、対象の部分だけURLを取得して再度プロンプトで指示してみます。
プロンプト
上記で作成したコンポーネントのfocus時のバリアントを設定してください。
以下のURLから情報を取得しデザインに準拠してください。
（Figmaから取得した対象コンポーネントのURLをペースト）
修正後のコンポーネント
Focus時もデザイン通りに修正が反映されました。
詳細なバリアントを実装する際は、細かい単位でデザインパーツのURLを取得して指示を出すと良いようです。
画面実装
今度はこれらを用いて画面自体を実装してみます。
プロンプト
上記で作成したコンポーネントを用いてログイン画面を実装してください。
デザインは以下です
（Figmaから取得したデザインフレームのURLをペースト）
実装された画面
だいぶFigmaのデザインに近いものが出来上がりました。
しかし左右のレイアウトがうまく実装されていません。
そこでFigma側で左ペインと右ペインにAutoLayoutを設定し、この状態のデザインフレームのURLで指示してみます。
AutoLayout設定前（Figma）
AutoLayout設定後（Figma）
プロンプト
左ペインと右ペインのレイアウトが違うようです。
以下のFigmaを参考に修正してください。
（AutoLayout化したデザインフレームのURLをペースト）
実装された画面
左右のレイアウトもデザインデータに近くなりました！
（右側の余白はおそらく画像サイズのせい）
そして従来の方法（スクショ画像）でも再現できていなかった、右ペイン画像につけていた角丸が今回のプロンプトで、はじめて実装されていました。
🚀 良かった点：高いデザイン再現度
Figma MCPを導入した結果、デザインの正確な構造がAIに伝わるようになり、コード品質は大幅に向上し、開発時間も削減することができました。特に良かったのは以下の2点です。
正確な情報の読み取り
画像では伝わりづらかった角丸の半径、パディング、カラーコード、テキストスタイルといったコンポーネントのスタイル情報が正確に読み取られ、コードに反映されました。
バリアント設定の効率化
従来の方法では難しかったコンポーネントのバリアント設定（hover, disabledなど）も、Figmaの構造情報として正確に伝達されました。これにより、手動で状態を記述する手間が大幅に削減され、コンポーネントの初期構築がスピーディーに完了しました。
⚠️ 課題と対応策
処理の遅延とエラー
課題
今回のデモ用デザインは問題なかったのですが、ある画面で一気に画面実装を行おうとして、デザインフレーム全体を選択して処理させようとした際に、この問題が発生しました。情報量の多いコンテキストを一度にAIに送信すると、ツールの動作が遅くなったり、エラーや途中で出力が停止する現象が発生しやすくなるようです。
対応策：細かいパーツごとに分解する
画面全体を一度に処理すると、モデルが一度に処理できるコンテキストの限界を超えてしまうようです。「コンポーネント」や「意味のあるかたまり（例：ヘッダー、カードリスト、フッターなど）」に分けて扱い段階的に処理させることで、より安定的な結果が得られるようになりました。
コンポーネントを再利用してほしいのに、うまく伝わらない
課題
ある画面では正しく既存コンポーネントを使って実装してくれるのですが、別の画面を実装すると、同じコンポーネントを使ってデザインしているはずなのに単なるパーツの集まりとして扱われてしまい、既に作ってあるコンポーネントとして認識してもらえないことがありました。その結果、せっかく作成したコンポーネントを再利用してもらえない、という状況が発生しました。
対応策：Figma Code Connectの活用
Figma Code Connectは、Figmaで作ったデザイン上のコンポーネントを、コード側のコンポーネントと対応づけ（マッピング）できる機能です。
これを活用することで、AI は「このデザインのボタンは、コード上では xxxButton を使うべきだ」という情報を理解し、既存のコードコンポーネントを優先して再利用してくれるようになります。
次回はこの機能を利用してみようと思います。
💡 Tips：AI実装のためのデザイン制作ポイント
AIがデザインのコンテキストを正確に読み取るためには、デザインデータそのものの質が不可欠です。
AIが読み取りやすいようにデザインを作成することで、実装の意図を正確に把握し、精度の高いコード生成の基盤を整えることができます。
ここではデザイン側の工夫点を３つ紹介します。
レイヤー名を意味のある名前にする
レイヤー名は「Frame1」とかではなく、「CardContainer」「RoundButton」など、意味のある名前をつけておくと、 AIがクラス名やコンポーネント名を適切に理解してくれます。
Figma内に自動でレイヤー名を修正してくれる機能があるので、こちらを利用するのがおすすめです。
Auto Layoutの徹底
Auto Layoutを使用し、パディング、ギャップ、リサイズ挙動を設定しておくことで、AIがレイアウトのレスポンシブ対応の意図を正確に読み取ることができます。
アノテーションの活用
見た目だけでは伝わりづらい挙動（例：ホバー時のアニメーション）や、非表示要素の表示ルールをDev Modeのアノテーション機能で共有しましょう。
AIがインタラクションや状態変化に関する詳細な指示を得て、より精度の高い実装になります。
まとめ
今回、Figma MCP を用いてAI実装を試したことで、AIが“画像としての見た目”だけでなく、デザインの構造まで理解して実装できることが分かりました。
同時に、デザインの真の意図や再利用の意図は、私たちが意識して与えないと伝わらないという気づきも得ることができました。
デザイナーはAI実装を意識してデザインを制作すること、エンジニアはFigmaの機能を理解し活用すること、この両者の連携がより重要になっていきそうです。
この知見を活かし、今後もAIを上手く活用することで、よりスピーディーに質の高いプロダクト開発に貢献し続けていきたいと思います。
明日はakihiro_yoshidaさんの記事です。
Discussion