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

2026.01.03

2025年6月にベータ版が公開された、Figmaの公式MCPサーバー(Figma Dev Mode MCPサーバー)を使ってみます。

使い方

まず注意点ですが、Dev Mode MCPサーバーは有料プラン(プロフェッショナル、ビジネスまたはエンタープライズプラン)のDevまたはフルシートでのみ利用できます。
また、MCPサーバをサポートするエディタ(VS CodeやCursorなど)を使用する必要があります。

次にDev Mode MCPサーバーの接続方法ですが、リモートMCPサーバーを使用する方法と、デスクトップMCPサーバーを使用する方法があるようです。
今回はデスクトップMCPサーバーを使用する方法を試してみます。

Figmaのデスクトップアプリから新規ファイルを作成して、Dev Modeに切り替えます。
右サイドバーにあるMCPサーバーの「デスクトップMCPサーバーを有効にする」をクリックします。

MCPクライアントの設定を行います。
今回エディタはCursorを使用するので、左側のCursorを選択して記載されている手順で設定を行います。
(追加ボタンをクリックしてもうまく追加されませんでした。)

Cursorを開いて、Cursor Settings > Tools & MCP を選択します。
New MCP Serverをクリックして、mcp.jsonを開きます。

mcp.jsonに下記を追加します。

{
  "mcpServers": {
    "Figma Desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

保存してCursor Settingsの画面に戻ると、Figma Desktopが追加されたことを確認できました。

また、Figmaの画面でも同様にMCPサーバーが有効になっていることを確認できました。

追加したFigmaのMCPサーバーを確認すると、以下のようなツールが用意されているようです。

get_design_context	レイヤーまたは選択範囲のデザインコンテキストを取得する。デフォルトではReact + Tailwindのコードを生成する。
get_variable_defs	選択範囲に含まれる変数やスタイルを返す。
get_screenshot	選択範囲のスクリーンショットを取得する。
get_metadata	選択範囲のレイヤーIDや名前、タイプ、位置、サイズなどの情報を返す。
create_design_system_rules	デザインをコードに適切に変換するためのルールファイルを作成する。
get_figjam	FigJamの図をXML形式で返す。

実際にデザインデータを使って動作を試してみます。
FigmaのDev Modeでレイヤーを選択すると、プロンプト例を提示してくれるようになります。

このプロンプトをCursorのチャットに張り付けて実行してみます。

まずget_design_contextのツールが使用されました。

次にget_screenshotのツールでスクリーンショットの取得が行われました。

今回は空のプロジェクト内で実行したので、最終的にReactの開発環境の用意が行われた上で、そのコンポーネントに指定したレイヤーが追加されました。
ただ、デザインの見た目や想定していたしようとは若干異なる内容になっていました。
初回生成のデモページ

何度かやり取りを行い、最終的に見た目的に近い状態にすることができました。
やり直し後のデモページ

参考サイト