Zenn
mentoテックブログ
📝

Figma × AI × MCP: プロトタイプ実装の現在地と課題

h-takesue
に公開
AI
Figma
LLM
Claude
tech

はじめに

こんにちは。mento のフロントエンドエンジニアの@Takesue です。

先日、弊社の @kadoppe より@Cursor x Figma を使って、チームでプロトタイプを高速開発して得た学び"を公開しました。その中で触れられていた

結果としてプロトタイプ開発終盤で、デザインや UI の最終調整の工数が嵩み、途中から協力いただいたフロントエンドエンジニアの方の負担を大きくしてしまうことになりました。

こちらの課題について、記事中ではデザインの情報についてもプロンプトに加えることが重要との結論となっておりました。
それ以外にもプロトタイプ開発で AI や MCP の活用方法があるのではないかと思いました。

本記事では、AI と MCP を活用した Figma 連携の現状と、プロトタイプ実装におけるエンジニア・デザイナーの作業をどうブーストできるのか、実際に手を動かして得られた知見を共有します。

1. Figma → コード変換の現状

Figma Dev Mode MCP
現在、Figma 公式から Dev Mode 用の MCP が提供されています。これを使えば、デザイン情報を MCP 経由で取得できるということで、早速 Claude Code で試してみました。

MCP 設定

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

dev モードでこのような選択状態で、モーダルを実装させました


実装の結果

  • テキスト、色、コンポーネントの順番は再現されている
  • レイアウトについて再現されていない
    • Figma 上だと Auto Layout の gap で要素間をとっているが、実装では margin を用いている
    • またそれにより、真ん中寄せを表現する内容が抜けている

基本的にはほとんどの情報を取れるはずですが、対象が Component Instance だった場合基本的な変数情報しか取れません。

// 取得できるデータの例
⏺ figma-dev-mode-mcp-server:get_code (MCP)(clientFrameworks: "react", clientLanguages:
 "javascript,typescript,html,css", clientName: "claude code")
  ⎿  export default function Frame69351() {
       return (
         <div className style={{ display: "none" }}>
           <div className="size-full" data-name="missing" id="node-missing" />
         </div>
       );
     }
  ⎿ Convert the Tailwind to vanilla CSS if not already used in the codebase. Do not install any dependencies.

  ⎿ These variables are contained in the design: Black/100: #222222, Main Headlines/24px/JP: Font(family:
    "Noto Sans JP", style: ExtraBold, size: 24, weight: 800, lineHeight: 1.600000023841858), Body/14px/JP:
    Font(family: "Noto Sans JP", style: Regular, size: 14, weight: 400, lineHeight: 1.600000023841858),
    White/100: #FFFFFF, Black/5: #F7F7F7, Attention Red/100: #FF5A5A.

Component Instance のレイアウト情報が現状取得できないため、実際の UI 実装に必要な情報が不足してしまいます。
この辺りの挙動は今後改善されていると思われます。

現実的な用途

とはいえ、全く使えないわけではありません。以下のような用途では活用できそうです：

  1. デザイントークンの取得
    取得した情報をコードに変換することは実用レベルかと思います。
> 選択されているFigmaコンポーネントがあるプロジェクトで使用している色をデザイントークンとしてtailwindの設定フ
  ァイルとして出力して欲しい

(出力結果)
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // カラーパレット
      colors: {
        // プライマリカラー
        primary: {
          DEFAULT: '#0584D2',
          '-1': '#0479BD', // darker variant
          '2': '#F2FAFF',  // lighter variant
        },

        // メントカラー
        'mento-black': '#222222',

        // セマンティックカラー（テキスト）
        text: {
          default: '#26262a',
          inactive: '#c4c4c4',
          subtler: '#7a7a7a',
          link: '#056cab',
          'primary-action': '#ffffff',
        },
        ......
  1. コンポーネントが既に整備されている環境での連携
    Figma と React 両方でコンポーネントライブラリが整備されている場合、Figma 上の名前と React 実装のコンポーネント名から同一のオブジェクトと判断するなどしての連携は可能です。
    現在、いろいろな実用例が発表されている状況です。

https://zenn.dev/ubie_dev/articles/f927aaff02d618
https://zenn.dev/bm_sms/articles/design_system_mcp_impl
https://note.shiftinc.jp/n/n741e9148f668

  1. その他の選択肢
    Anima などの figma to code 関連のプラグインの方が、作業効率やソース出力の正確さにおいて実用的な場合もあります。
    ただし、この場合でも Figma での Auto Layout などレイアウト設定は必須です。

2. Figma ← AI MCP：AI から Figma を操作する試み

Figma Make の登場
まず Figma + AI だと Figma 公式から発表された「Figma Make」ではないでしょうか。

https://www.figma.com/ja-jp/make/

プロンプト例：

  • SaaS のダッシュボードが欲しい
  • カラフルなグラフと、それっぽいものを一旦見たい

出力

Figma Make は内部的に React を使用した Web アプリケーションとしてプロトタイプを生成します。

現状として

  • 生成したプロトタイプを Figma のデザインツールにインポートすることはできない
  • 逆方向（Figma デザイン → プロトタイプ）は可能
    プロトタイプ実装においては選択肢の 1 つには十分取れます。

MCP 経由で Figma を操作する試み

では、MCP を使って AI から Figma を直接操作することは可能なのでしょうか？
コミュニティでは「Claude/Cursor Talk to Figma MCP」というプロジェクトが登場しています。
Talk to Figma MCP のアーキテクチャ

Claude/Cursor ↔ MCP ↔ WebSocket ↔ Figma Plugin
このアプローチでは、WebSocket 経由で Figma プラグインと通信し、Figma を操作します。

https://github.com/arinspunk/claude-talk-to-figma-mcp

動作例

> 手始めにsp viewのフレームを三つ作成して、名前を連番にして欲しい


> SaaSのダッシュボードページを2に構築してみて欲しい


> 全てのコンポーネントの名前に mento- をつけて欲しい

申し訳ございませんが、現在の Figma ツールには直接ノードの名前を変更する機能がありません。利用可能な機能では、新しいコンポーネントを作成する際に名前を指定することしかできません。

実用化への課題
技術的には可能ですが、実用にあたっては課題があります：

  1. 導入ハードルの高さ
    デザイナー単体では環境構築が困難です。エンジニアのサポートが必須です。
    今回の動作確認でも、mcp 実装内のモジュールで発生したエラーを直しています。

  2. UI デザインの言語化の難しさ
    これが最も本質的な課題かもしれません。

❌ 曖昧な指示：
"いい感じのヘッダーを作って"

⭕ 必要な詳細度：
"高さ 64px のヘッダー、左に 32px のロゴ、
右側に 16px 間隔でナビゲーションリンクを配置、
背景色は#FFFFFF、下部に 1px の#E0E0E0 のボーダー"

  1. Auto Layout は構築されない
    今回の構築でもそれぞれのテキスト等は絶対位置で配置されており、レスポンシブに対応したレイアウト再構築は必須です。

まだ実用へのハードルが高い理由として、UI デザインは本質的に：

  • オブジェクト同士の関係性の定義
  • 視覚的なバランスの調整
  • コンテキストに応じた微調整
    これらを一連のテキストで完全に説明することは困難で、現状はまだ人間による「鳥の目」が必要な状態と言えるでしょう。

実用的な活用シナリオ
しかし、現状でも以下のような場面では十分活用可能かと思います：

  • 基本的なフレーム構造の生成
  • 基本的なレイアウト調整
  • コンポーネントの大量配置
  • ダミーデータの挿入
  • 同じパターンの繰り返し生成
  • 命名規則に基づいた整理

3. プロトタイプ開発の現実解と今後の展望

現時点でのベストプラクティス

MCPによる完全自動化はまだ難しいものの、現状においても以下のような活用により、確実に開発効率を向上させることができるかと思います。

  • デザイントークンの自動抽出などの作業効率化
    デザインに限らず、システムは構築までではなく構築からの運用が重要です。また、規模が大きくなるについて人間の認識できる量を超えていきます。
    デザイントークンの差分検出など、人による確認だけではどうしても抜けるものも都度反映などで効率化を図れるはずです。

  • Figma の命名規則とコードの命名規則の統一による自動構築
    Figmaでの命名と、コードでの命名をデザイナーとエンジニア双方が意識することによって大規模なレイアウト変更やページ構築だったしても既存の資産を生かしながらAIのみで実装が完了する可能性があります。

  • デザインシステムの把握
    一つのサービスに閉じたデザインシステムだったとしても、そのコンポーネントの量とバリエーションは膨大になります。
    デザインシステムの概要に限らず、その経緯や実装内容などもFimgaとコードを行き来できるようになることによってエンジニアとデザイナーの情報の差を縮めることができるでしょう。
    またそこからドキュメント等を生成することも可能になり、プロジェクト規模が大きくなるほどレバレッジが効きます。

まとめ

2025 年 6 月現在の Figma × AI × MCP は、適切に活用すれば確実に開発効率を向上させることができます。重要なのは、ツールの限界を理解した上で、人間の感性と創造性を AI の効率性に掛け合わせることではないでしょうか。

私たち mento では、AI を活用しながら、エンジニアとデザイナーがより創造的な作業に集中できる環境づくりを続けていきます。

mentoテックブログ
mentoテックブログ

Discussion