シナプス技術者ブログ

シナプスの技術者公式ブログ。インターネットで、鹿児島の毎日を笑顔にします。

Figma公式のDev Mode MCPサーバーについて

Figma 生成AI MCP デザイン 技術

こんにちは、WEBソリューション課の今門です。

2025年6月に、Figma公式の MCPサーバーがリリースされました。
＃ただし、まだオープンベータ版です
正式な名称は、Dev Mode MCPサーバーという名称のようです。

FigmaのMCPサーバーとしては、これまでオープンソースのFigma-Context-MCPなどが存在していましたが、やはり公式版となると、他のFigma製品との連携など、さまざまな面で期待が高まります。

ということで早速使ってみることにしました。

Dev Mode MCPサーバーとは

MCP(Model Context Protocol)とは、AIエージェントがデータソースとやり取りするための標準化されたインターフェースのことです。

Dev Mode MCPサーバーは、Figmaのデザインファイルからデザイン情報とコンテキストを抜き出し、コードを生成するAIエージェントに渡します。
そうすることで、Figmaを開発のワークフローに組み込むことになります。

次のようなことができるようになります。

  • デザインの背景を抽出する
    • 変数、コンポーネント、レイアウトデータをIDEに直接取り込みます
  • 選択したフレームからコードを生成する
    • Figmaのフレームを選択してコードに変換します

以下、さっそく手順を説明します。

（１）MCPサーバーを有効にする

まず注意点として、Dev Mode MCPサーバーは、Figma デスクトップアプリから利用します。
ブラウザでFigmaを使っている方も多いと思いますが、ブラウザからは利用できません。
必ずFigmaデスクトップアプリをダウンロード/インストールしてください。

Figmaデスクトップアプリを開きます。
左上のメニューから「基本設定」を選び、「ローカルMCPサーバーを有効化」にチェックを入れます。

これだけで、MCPサーバーが起動します。

正常に起動した場合、Figmaデスクトップアプリの下部に、次のようなメッセージが出力されます。

MCPサーバーが有効になりました

（２）MCPクライアントを設定する

MCPサーバーに接続するよう、MCPクライアントを設定します。

MCPクライアントは、SSE (Server-Sent Events)をサポートしていることが条件です。
私は、普段使い慣れているVisual Studio Code上のCopilotで利用することにしました。

設定する内容は下記になります。

{
    "servers": {
        "Figma Dev Mode MCP": {
            "type": "sse",
            "url": "http://127.0.0.1:3845/sse"
        }
    }
}

公式サイトなどでは、setting.jsonに追記するように記載されていますが、私が試した限りではうまくいかず、単独で設定するよう注意されました。
いろいろ調べたところ、mcp.jsonというファイルに上記の設定を記載し、~/.vscode/の直下に配置するとうまくいくようです。

CopilotのAgentモードに切り替え、いくつか用されたモデルを選択するだけで、準備完了です。

Visual Studio Code Agentモード

（３）指示を出す

Dev Mode MCPサーバーは、Fimgaファイルから情報を取得し、その情報をLLMに受け渡します。
受け取ったLLMはその情報を元にコーディングします。
対象となるFigmaファイルのデザインノードは、ページ全体でも、より細かなコンポーネント単位でも問題ありません。

対象の選択

対象となるFigmaファイルのデザインノードの範囲は、次の２つのいずれかで決めることができます。

  • 選択ベース：Figmaのデスクトップアプリを使用して、Figma内のフレームまたはレイヤーを選択
  • リンクベース：Figmaのフレームまたはレイヤーへのリンクをコピー

このブログでは、以下、「リンクベース」を前提に説明します。

色やフォントなどの情報を取得する

MCPサーバーが機能するかどうかを試す意味もこめて、色情報を取得したいと思います。
上記のリンクベースの方法で取得したリンクについて、CopilotのChat欄で次のように指示を出します。

下記のリンクについて、色やフォントの情報を取得してください。

https://www.figma.com/design/XXXXXXX/yy?node-id=4024-105&t=zzzz-4

結果、エディタ内で次のような情報が取得できていれば、MCPサーバーが正常に機能しています。

アウトプットされた色やフォントの情報

色やフォントを取得するのに自然言語を使いましたが、内部的にはget_variable_defsというDev Mode MCPサーバーが備えているツールを呼び出していることになります。
よって、次のような指定方法でも同様の結果が得られます。

get_variable_defs https://www.figma.com/design/XXXXXXX/yy?node-id=4024-105&t=zzzz-4

コードを生成

コードを生成します。
デフォルトではReact/Tailwind.cssにてコーディングしますが、指定することで言語を変えることもできます。Vue.jsと、BEMベースのCSSを独自に生成し、外部ファイルとして保存してください、など自然言語での指定が可能です。

ここではデフォルトのまま、次のとおり指定してみます。

下記のリンクについて、コーディングしてください。

https://www.figma.com/design/XXXXXXX/yy?node-id=4024-105&t=zzzz-4

結果、次のようなReactコンポーネントが返ってきます。

export default function Component() {
  return (
    <div className="contents relative size-full" data-name="赤色ボタン" data-node-id="4024:105">
      <div className="absolute bg-[red] h-[76px] left-[62px] rounded-[10px] top-[2301px] w-[669px]" data-name="赤背景" data-node-id="4024:106" />
      <p className="absolute font-['Inter:Bold_Italic',_'Noto_Sans_JP:Bold',_sans-serif] font-bold h-[33px] italic leading-[normal] left-[394px] text-[32px] text-center text-white top-[2322px] translate-x-[-50%] w-[660px]" data-node-id="4024:107">
        まずはサポートに確認
      </p>
    </div>
  );
}

コーディングするのに自然言語を使いましたが、内部的にはget_codeというDev Mode MCPサーバーが備えているツールを呼び出していることになります。
よって、次のような指定方法でも同様の結果が得られます。

get_code https://www.figma.com/design/XXXXXXX/yy?node-id=4024-105&t=zzzz-4

アウトプットの精度をあげるために

実際にいくつかのWebサイト/アプリを作成してみたのですが、思い通りの結果にならないこともあります。
解決方法としては、プロンプトの見直しや仕様の具体化などももちろん有効なのですが、Figmaのデザインファイルを丁寧につくることで、かなりアウトプットの精度をあげることができると実感しています。

試行錯誤の結果、下記のような点が有効だとわかりました。

  • デザイン要素を極力コンポーネント化する。
  • ページ/コンポーネントのレイヤー構造は、できる限りHTMLでマークアップされた際の構造に近づける。
  • レイヤー/フレームの名称に意味を持たせる。CSSのクラス名と合わせることができたらベスト。
  • 色やフォントなどCSSで指定できる要素には、極力バリアブルを使用する。
  • オートレイアウトや制約などは、レスポンシブ対応を前提に正確に指定する。
  • プロトタイプの動作に一貫性を持たせる。
  • LLMへ引き渡すコンポーネントは、極力小さい範囲にする。

まとめ

オープンベータ版ということもあり、まだまだ改善の余地があります。
しかし、上記の「アウトプットの精度をあげるために」の各項目を守ることで、実用レベルに近づけることは可能ではないかと思います。
今後も精度はあがっていくでしょうし、Figmaの他機能「Figma Make」や「Figma Sites」との連携や統合などがなされていけば、Webサイト/アプリを構築する手段として、強力な味方になってくれそうです。

自らコーディングせずにWebサイト/アプリを構築できる時代は、すぐそこまで来ていると思います。

参考サイト

help.figma.com