lvncerpedia

Figma MCPについて調べるね！わかった！まとめるね〜。Figma MCPはめちゃくちゃ便利だから、ちゃんと教えるよ！

Figma MCP (Dev Mode MCPサーバー) の使い方

そもそも何ができるの？

FigmaのデザインデータをCursorやVS CodeなどのAIエディタに直接連携して、デザインに基づいたコード生成ができるようになる機能だよ。デザイン→コード変換を自動化できて超便利！

⚠️ まず確認：使える条件

Dev Mode MCPサーバーは有料プラン（プロフェッショナル・ビジネス・エンタープライズ）のDevまたはフルシートでのみ利用可能。あと、VS CodeやCursorなどMCPをサポートするエディタが必要。

接続方法（デスクトップ版）

① Figmaデスクトップアプリで新規ファイルを開いてDev Modeに切り替え → 右サイドバーの「デスクトップMCPサーバーを有効にする」をクリック

② エディタ側の設定（Cursorの場合）

Cursor Settings → Tools & MCP → New MCP Server を開いて、mcp.json に以下を追加：

{
  "mcpServers": {
    "Figma Desktop": {
      "url": "http://127.0.0.1:3845/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のチャットに貼り付けて実行するだけ！

精度を上げるコツ

色・間隔・角丸・タイポグラフィにFigma variablesを使っておくと、AIがデザインの意図を正確に読み取れてコード生成の精度が上がるよ！

どのエディタ使ってる？CursorとかVS Code、GitHub Copilotとか、環境に合わせてもう少し詳しく教えられるよ〜！

わかるわかる！最初期は本当に使いにくかったよね笑　JS直接書かないといけないのとかしんどすぎる。

今どのくらい良くなったか調べてみるね！めっちゃ進化してた！！これは確かに別物になってるわ。まとめるね。

今の Figma MCP、昔と全然違う

昔の不満（わかりみ深い）

JS直書きでノード操作しないといけない
サードパーティの非公式MCPしかなかった
設定もめんどくさかった

今どうなったか

① 2025年6月 → 公式MCPサーバーがリリース

それまでは figma-context-mcp みたいなオープンソースの非公式版しかなかったけど、Figma公式のDev Mode MCPサーバーが登場して、他のFigma製品との連携も含めて一気に安定した。

② 2026年3月 → ついにキャンバスへの「書き込み」が可能に

これまでMCPはデザインファイルを「読む」だけだったけど、新たに追加された use_figma ツールで、AIエージェントがFigmaキャンバスに直接コンポーネント・フレーム・変数・オートレイアウトを作れるようになった。

つまり 読み取り専用 → 双方向編集 になったってこと！

③ use_figma ツールの正体

use_figma ツールはFigma Plugin APIを通じてFigmaファイル上でJavaScriptを直接実行する汎用ツール。

……あれ、まだ内部的にはJS実行してるんだけど、それをAIが代わりにやってくれるから自分では書かなくていい感じになった！笑

④ コード↔デザインの双方向ワークフロー

ローカルで開発したコードからFigmaデザインを生成して、さらにFigma上で編集した内容をコードに反映させるという双方向のワークフローが実現できるようになった。

要するに「昔：自分でJS書いてつらい」→「今：AIに言えばFigmaを直接操作してくれる」って感じで別物になってるね。また使ってみる価値ありそうじゃない？

いい質問！それ気になるよね。ちょっと調べてみる！わかった！整理するね〜。結論から言うと**「できる、でも使い分けが大事」**って感じ！

ワイヤーフレーム・デザイン・プロトタイプ、MCP使える？

✅ ワイヤーフレーム → かなり使える！

アプローチが2パターンある：

① Figma Make（Figma内蔵のAI）を使う方法

自然言語でプロンプトを入力するだけでワイヤーフレームを自動生成できる。さらに「デザインをコピー」機能で、生成したものを編集可能なデザインファイルとして別ファイルにペーストできる。

② MCPでClaudeやCursorと連携する方法

FigmaのデザインシステムをClaudeにMCP経由で読み込ませ → Claudeで実装 → 生成したHTMLをFigmaにデザインファイルとしてインポート、というフローでデザインシステムに沿ったワイヤーフレームが作れる。

✅ デザイン → 下地として使えるレベル

ただしAI生成だけで現場に出せるクオリティにするのはまだ難しく、「デザインの下地」として捉えて手動で調整・編集するのが現実的。

✅ プロトタイプ → Figma Makeなら動くものが作れる

Figma Makeはインタラクティブな要素、アニメーション、テキストエフェクトなどもプロンプトだけで作れる。コーディング経験がなくてもOK。

ただし見た目の再現はできても、VariantやComponentなどの構造は生成されないので、そのままデザインシステムに組み込むのは難しい。

まとめると

用途	使えるか	現実的な使い方
ワイヤーフレーム	◎	AIで下地生成→手で微調整
デザイン	△〜○	モックや下地止まり
プロトタイプ	○	Figma Makeで動くもの作れる

結局「AIが全部やってくれる」というよりは**「たたき台を秒で作ってくれる相棒」**みたいな使い方がしっくりくる感じかな。どっちかというとデザイナーよりエンジニア寄りのワークフローで輝く印象！

何か特定の用途で試したいとかある？