はにわまんのブログ
お問い合わせ

Figma公式のDev Mode MCPサーバーで何ができる？

はにわまん

目次
  1. Figma MCPサーバーとは
  2. 公式のFigma MCPサーバーを使ってみる
    1. Figma MCPを有効化
    2. MCPクライアントの設定
  3. Figmaファイルから情報を取得できるか確認してみる
    1. 選択範囲へのリンクのパターン
    2. 選択部分を参照するパターン
  4. Figmaファイルからコーディングしてもらう
  5. 各ツールが何を取得しているか確認する
    1. 変数、スタイル
    2. フレーム構造
  6. できなさそうなこと
    1. 画像のダウンロード
  7. まとめ

Figma公式のMCPサーバーがリリースされました！名前としては「Dev Mode MCP Server」ですかね。フレームからのコード生成はこれまでのFigma MCPサーバーからイメージできますが、バリアブルやスタイル、バリアントの取り込みは、これまでなかったように思うので、特に確認しながら見ていけたらと思います。

  • Generate code from selected frames
    Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.
  • Extract design context
    Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.
  • Code smarter with Code Connect
    Boost output quality by reusing your ac

↓（Google翻訳）

  • 選択したフレームからコードを生成
    Figma のフレームを選択して、コードに変換します。新しいフローを構築したり、アプリの機能を反復したりする製品チームに最適です。
  • デザインコンテキストの抽出
    変数、コンポーネント、レイアウトデータを IDE に直接取り込むことができます。これは、設計システムやコンポーネントベースのワークフローで特に役立ちます。
  • Code Connectでよりスマートなコードを
  • 実際のコンポーネントを再利用することで、出力品質を向上させます。Code Connectは、生成されたコードとコードベースの一貫性を保ちます。
https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server

Guide to the Figma MCP server – Figma Learn – Help Center

Figma MCPサーバーとは

Figma MCPサーバーの前にそもそもMCPサーバーについてですが、Model Context Protocolの略で、AIとツールを繋ぐためのルール（プロトコル）と捉えていただくといいかと思います。

自分だけがアクセスしていた身の回りのツールのアクセス権限をAIに渡すことで秘書的な役割になるイメージで、例えば、Googleカレンダーへのアクセス権限をAIに渡せば「今日の予定を教えて」とAIに聞けば、Googleカレンダーの正確な情報をもとにして回答してくれるようになります。

Googleカレンダーの他にもSlack、LINE、Github、Backlogなど様々なMCPサーバーが存在します。今後も増えていくはずです。これまで人間が間に入らないと動かせなかったことも、MCPの仕組みによってAIに任せることが可能になりました。

そして、Figma MCPサーバーの登場により、AIがFigmaの実際の情報を見にいけるようになりました。Figmaのデータを見ながら実装するといった作業は、まさに人間が行なってきた領域ですが、ここが代替（まではいかなくても工数削減）できる可能性が出てきたということです。

実際の用途としては、CursorやWindsurf、VS Code（Github Copilotなど）といったエディタ（の中にいるAI？）と、Figma MCPサーバーを繋ぐことで、AIがFigmaファイルを確認してコードを生成する、といった一連の流れが自動化できるようになります。

公式のFigma MCPサーバーを使ってみる

では、早速Figma MCPサーバーを使っていきましょう。公式のドキュメントを参考に進めてみます。

Guide to the Figma MCP server – Figma Learn – Help Center

Figma MCPを有効化

まずは、対象となるFigmaファイルを開いて、左上のFigmaアイコン→基本設定→Dev Mode MCPサーバーを有効にする、を選択します。
※ もし該当の選択肢がない場合は、Figma Desktopでない、あるいは、Figma Desktopのバージョンが古い可能性があるので、いずれかを確認しましょう。

有効化されると、左にチェックがつきます。またローカルサーバーとして起動されるようです。

サーバーは でローカルに実行されます。
http://127.0.0.1:3845/sse
次の手順で設定ファイルに使用するため、このアドレスを手元に用意しておいてください。

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server

MCPクライアントの設定

CursorやWindsurf、VS Codeで設定場所は少し異なりますが、MCPサーバーと繋ぐための仕組みは備わっているので、各エディタに応じて設定していきましょう。今回はVS Codeで試してみます。

プロジェクトフォルダの作成

今回の検証用のプロジェクトフォルダを作成します。dev-mode-mcp-demoという名前で作成しました。

フォルダの中身は空です。

GitHub Copilotの有効化確認

Github Copilotが必要になりますので、有効化しておきましょう。制限はありますが、無料プランから利用可能です。

 VS Code で MCP を使用するには、アカウントでGitHub Copilotを有効にする必要があります。

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server

MCPサーバーの設定

settings.jsonで編集します。左下の歯車アイコンから「設定」を選択。

「mcp」と検索して、「settings.json で編集」を選択。※

なお、「ユーザー」タブと「ワークスペース」タブがあります。VS Code全体で設定したい場合は「ユーザー」、プロジェクト単位で設定したい場合は「ワークスペース」を選択しましょう。今回は検証中なので、一旦はワークスペースで進めていきます。

公式の案内の通り、以下のような内容を追加します。

{
	"chat.mcp.discovery.enabled": true,
	"mcp": {
		"servers": {
			"Figma Dev Mode MCP": {
				"type": "sse",
				"url": "http://127.0.0.1:3845/sse"
			}
		}
	},
	"chat.agent.enabled": true
}

FigmaのAPIキーの発行が必要ないのは手軽で良いですね。

ツールの確認

では、AIとやりとりできるチャットを開きましょう。

モードを「Ask」から「Agent」に切り替えてください。そして、「ツールを選択する」のアイコンを選択しましょう。

すると、上部にたくさんのツールが出てくるのですが（主にGithub Copilotですかね…）、この中にMCP サーバー: Figma Dev Mode MCPがあれば設定できています。
※ 出てこない場合は、VS Codeを再起動してみてください。

ツールは以下の通りです。

  • get_design_context・・・特定のノード（Figma上のUI要素）からUIコードを生成できる。画像の保存もこのツールで可能そう。
  • get_variable_defs・・・指定されたノードIDの変数定義を取得。
  • get_screenshot・・・スクリーンショットを生成する機能。
  • get_metadata・・・メタデータ（XML形式） を取得するためのツール。ノードID、レイヤーの種類、名前、位置（x / y）、サイズ（幅・高さ）など。取得した XML の中に含まれるノードIDを使って、さらにget_design_contextを呼び出すこともできる。

Figmaファイルから情報を取得できるか確認してみる

まずはシンプルなボタンで確認してみます。※ ちなみにAIに対するルールは何も設定されていない状態で試しています。

選択された範囲のテキスト情報を取得してみましょう。

選択範囲へのリンクのパターン

Figmaファイルから対象のフレームを右クリック → コピー/貼り付けオプション → 選択範囲へのリンクをコピー

これは、公式以外のFigma MCPを活用していた時と同様のパターンかと思います。以下のようなお願いをしてみます。URLはご自身が取得したものに書き換えてください。

このFigmaのURLから取得できるテキストの情報を教えてください。

https://www.figma.com/design/xxxxxxxxxx

すると、get_imageとget_codeでテキスト情報を取得してくれました。なぜget_imageから使うのかは少し疑問ですが、、、この辺りはルールで設定していく感じかもしれません。

元のデータはこちらなので、ズレはなさそうです。

続いて、リンクを共有しない公式ならでは？の方法も確認していきます。

選択部分を参照するパターン

続いて、同じボタンですが、URLではなく選択した状態で以下の依頼をしてみます。

Figmaで現在選択中のフレームから取得できるテキストの情報を教えてください。

こちらも同様に、get_imageとget_codeでテキスト情報を取得してくれました。

このように、公式のFigma MCPだとリンクの共有することなく、対象のフレームに対しての依頼ができそうです。利点として、リンクを取得するには選択範囲へのリンクをコピーができるフレームが対象でしたが、テキスト単体を選択して依頼を出すことも可能になりそうです。

Figmaファイルからコーディングしてもらう

Figmaで選択中のボタンをHTMLとCSSで忠実に再現してください。

↓

表示内容の結果としては以下の通りです。再現度はかなり高いことが分かります。

そして、出力されるコードは以下の通りです。めちゃくちゃ複雑な入れ子の構造で出力されました。

<div class="button">
    <div class="button-container">
        <div class="button-content">
            <div class="button-text">
                <p>お問い合わせ</p>
            </div>
        </div>
    </div>
</div>
.button {
    background-color: var(--brand-main);
    border-radius: 3px;
    position: relative;
    width: fit-content;
    height: auto;
}

.button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.button-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px 16px;
    position: relative;
    width: 100%;
    height: 100%;
}

.button-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    position: relative;
    flex-shrink: 0;
    color: #FFFFFF;
    font-size: 16px;
    text-align: left;
    white-space: nowrap;
}

.button-text p {
    margin: 0;
    line-height: 1.75;
    white-space: pre;
}

このあたりは指示の出し方やルールを調整していく形だと思います。まずは正確に情報が取得できそうなことが確認できました。

各ツールが何を取得しているか確認する

公式のFigma MCPでは、フレームのスタイル情報だけに限らず、バリアブルやスタイル、バリアントなど、取得しやすくなっているのではないかと期待しています。

実際にAIに質問してどういった情報が取得できるか確認していきましょう。ほとんど確認したままなので、分かりづらい部分あるかと思います。

変数、スタイル

バリアブルで定義した変数名、スタイルで定義した変数名を取得できそうです。ただ、今回のケースだとAIがコーディングする際にそのままの変数名を使わずに独自に変数名を定義し直しているようでした。

Figmaの変数名を必須にするには、ルールを強化する形になるのかと思います。

ページ全体のフレームを渡してCSS変数を定義してもらう。

選択した範囲で定義されている色をCSS変数としてstyle.cssに登録してください。
変数名は今のプロジェクトの名前は考慮せずにFigmaで登録されている名前でお願いします。

そのまま取得できていそうです。

Figmaの選択範囲の色。

フレーム構造

Figmaで選択しているフレーム配下の構造を教えてください。

以下の構造を確認してみます。

レイヤー構造です。

結果としては以下の通り。全部画像で恐縮です…。基本的にレイヤー通りに思います。

構造を取得できる力があるのに、なぜ先ほどのボタンはあんなに入れ子の構造になっていたのだろうか…、と思い、ボタンについても改めて構造を確認してみる。

すると、、、以下の返答でした。やはり深い…。

試しに、同様のボタンをFigma Sitesで確認したところ、同様に深くなることが確認できました。リリースの順番を考えても、フレーム構造の定義はFigma Sitesと同様のものが使われているのかなと推測します。

<div class="css-gxdil1 css-688vqn css-j9f0op">
	<div class="css-4fuwzm css-paq0kv">
		<div class="textContents css-wc1msa css-svbfcz css-xoyyvm" data-paragraph-spacing="0px" data-list-spacing="0px">
			<p class="css-8zr56v css-z93omi">お問い合わせ</p>
		</div>
	</div>
</div>

バリエーション（バリアント）

選択しいまたコンポーネントのHTML構造とバリエーション表現をCSSで用意してください。
Figmaに用意されたバリエーションのみでお願いします。

通常時のボタンとマウスホバーのボタンを渡しました。　※ と、正確には、以前読み込んでいたボタンのフレーム情報を合わせて生成していたようです。

バリエーションを認識してコーディングしてくれました。

そして、構造がシンプルでした。

<button class="contact-button">お問い合わせ</button>

この違いとして、バリアントからは構造の取得はされず、変数情報が取得されるようです。構造がないためAIがボタンの表現を考えてシンプルな構造で表現しています。また、padding等のCSSの値については、過去に取得したボタンのフレーム情報から判断したようです。

できなさそうなこと

画像のダウンロード

公式外のFigma MCPでは画像のダウンロードがサポートされていましたが、公式では画像がダウンロードできなさそうに思います。

get_imageというツールがあり、選択したnodeのレンダリングされた画像を取得します。ただ、ローカルのどこかに保存するという形ではなく、一時的にメモリ上に保持されるということでした。

個人的には、Figmaから画像をダウンロードしてくれる機能は、めちゃくちゃ便利なので、搭載されて欲しいなって思います…。

ちなみに設定を見ると、画像設定の配下に「プレースホルダー画像を使用する」しかありませんが、1つの設定のためにメニュー階層を深くしているのも変な気がするので、今後別の選択肢も追加されるのかもしれません。

まとめ

Figma Dev Mode MCPを使うことで、構造やスタイルの取得だけでなく、バリアブル、スタイル、バリアントなど取得しやすくなるのかなと思いました。ただ、画像が取得できないので、今後に期待したいところです。

とはいえ、公式から出てくれたことの安心感があるので、これからも積極的に活用していこうと思います。

WordPressでお悩みの方はお気軽にご相談ください。

ちょっとしたお困り事からサイト全体のリニューアルのようなご依頼まで、お悩みに応じて柔軟に対応いたします。

はにわまんに相談する

この記事を書いた人

はにわまん

HPcode代表。300件以上のWordPress案件を対応してきました。ちょっとしたWordPressのカスタマイズからブロックテーマでのリニューアルまで。更新できるWordPressサイトが好きです。

はにわまんについて →