Figma MCPは無料で使えますか？

Figma MCPサーバー自体に追加料金はなく、リモートサーバーは全プラン・全シートで利用できます。ただしStarterプランやView・Collabシートはツールの呼び出しが月20回までです。ProfessionalプランのDev・Fullシートなら1日200回まで使えます（2026年11月時点）。

Dev Mode MCPサーバーとFigma MCPサーバーは違うものですか？

同じものです。2025年にベータ版として公開されたときは「Dev Mode MCPサーバー」という名前で、Figmaデスクトップアプリから起動するローカルサーバーでした。現在はクラウドのリモートサーバーが追加され、「Figma MCPサーバー」と呼ばれています。

Claude CodeでFigma MCPを設定するには？

公式プラグインを使う場合は「claude plugin install figma@claude-plugins-official」を実行し、再起動後に /plugin から認証します。MCPサーバーだけを追加する場合は「claude mcp add --transport http figma https://mcp.figma.com/mcp」を実行し、/mcp からログインします。

Figmaのデスクトップアプリは必要ですか？

推奨のリモートサーバーを使う場合は不要です。デスクトップサーバーを使う場合のみ、Figmaデスクトップアプリを起動し、Dev Modeから「Enable desktop MCP server」を有効にする必要があります。デスクトップサーバーはキャンバスへの書き込みに対応していません。

Figma MCPで生成したコードはそのまま使えますか？

レイアウトや色・余白の再現度は高いものの、そのまま本番に出せる品質にはなりません。既存コンポーネントの利用、アクセシビリティ、状態管理、レスポンシブの細部は人が確認して仕上げる前提で使うのがおすすめです。

Figma MCPの使い方【2026年】設定方法と制限

Figma MCPとは

Figma MCP（正式名称は「Figma MCPサーバー」）は、FigmaのデザインデータをAIのコーディングツールから直接読み取れるようにする、Figma公式のMCPサーバーです。Claude Code、Cursor、VS Code（GitHub Copilot）などから、フレームのレイアウト、コンポーネント、変数（色・余白・フォントなどのデザイントークン）を取得して、それをもとにコードを書かせることができます。

MCP（Model Context Protocol）は、AIツールと外部サービスをつなぐ共通規格です。仕組みそのものはMCPの用語解説、ほかのMCPサーバーも含めた全体像は「MCPサーバーとは？仕組み・おすすめ・作り方」で解説しています。この記事ではFigma MCPに絞って、設定方法と実務での使い方を書きます。

「Dev Mode MCPサーバー」との関係

2025年6月にベータ版として登場したときの名前は「Dev Mode MCPサーバー」でした。当時はFigmaデスクトップアプリのDev Modeから起動するローカルサーバーだけでしたが、その後クラウド上で動くリモートサーバーが追加され、名称も「Figma MCPサーバー」になっています。古い記事で「Dev Mode MCP」と書かれているのは同じものの旧称です。

スクリーンショットを渡すのと何が違うのか

デザインのスクリーンショットをAIに貼り付けても、それっぽいコードは出てきます。ただ、余白が14pxなのか16pxなのか、色が #10b981 なのか近い別の色なのかは、画像からは正確に読み取れません。

Figma MCPを使うと、AIは画像ではなくFigmaが持っている構造データを受け取ります。Auto Layoutの方向や間隔、使われている変数名、コンポーネントのインスタンス情報まで取れるので、「見た目が近いコード」ではなく「デザインシステムに沿ったコード」に近づけやすくなります。

---

リモートサーバーとデスクトップサーバーの違い

Figma MCPサーバーには2種類あります。2026年11月時点で、Figma公式が推奨しているのはリモートサーバーです。

| 項目 | リモートサーバー（推奨） | デスクトップサーバー | |---|---|---| | 接続先 | https://mcp.figma.com/mcp | http://127.0.0.1:3845/mcp | | Figmaデスクトップアプリ | 不要 | 必要（起動しておく） | | 認証 | Figmaアカウントでブラウザログイン（OAuth） | デスクトップアプリのログイン状態を利用 | | 使えるプラン・シート | 全プラン・全シート（回数制限あり） | Professional・Education・Organization・Government・EnterpriseプランのDevまたはFullシート | | キャンバスへの書き込み | 可能 | 不可 | | 機能の幅 | 最も広い | 一部のツールのみ |

リモートサーバーはログインしたユーザー本人として動くので、アクセスできるのは自分が閲覧権限を持っているファイルだけです。社内のセキュリティ方針でクラウド接続が難しい、といった事情がなければリモートサーバーを選べば問題ありません。

---

Figma MCPの設定方法

ここからは各ツールでの設定手順です。手順はFigma公式の開発者ドキュメント（developers.figma.com）で2026年11月時点に確認したものです。

Claude Codeで使う

Claude Codeでは、FigmaのMCPサーバーと使い方の指示（スキル）がセットになった公式プラグインが推奨されています。

claude plugin install figma@claude-plugins-official

インストールしたらClaude Codeを再起動し、/plugin と入力します。「Installed」タブで figma を選んでEnterを押すと、ブラウザが開いてFigmaへのログインを求められるので許可してください。

社内ポリシーなどでプラグインが使えない場合は、MCPサーバーだけを手動で追加します。

claude mcp add --transport http figma https://mcp.figma.com/mcp

新しいセッションを開いて /mcp を入力し、figma を選んで「Authenticate」からログインすれば完了です。Claude CodeでのMCPの追加方法やスコープ（自分だけ／チーム共有）の考え方は「Claude Code×MCPサーバー活用ガイド」で詳しく書いています。

Cursorで使う

Cursorもプラグインからの追加が推奨です。コマンドパレット（Mac：Cmd+Shift+P／Windows：Ctrl+Shift+P）で「Open chat」を開き、チャット欄に /add-plugin figma と入力して「Add Plugin」をクリックします。そのあと設定画面の「Tools & MCP」でFigmaの横にある「Connect」を押し、ログインを許可します。

プラグインが使えない環境では、「Tools & MCP」の設定に次のJSONを追加します。

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

VS Code（GitHub Copilot）で使う

コマンドパレットから「MCP: Open User Configuration」を選び、次の設定を貼り付けて保存します。

{
  "inputs": [],
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

保存すると設定ファイル上のFigmaサーバー名の上に「Start」が表示されるので、クリックしてログインを許可します。CopilotのチャットをAgentモードにすると、Figmaのツールが使えるようになります。

デスクトップサーバーを使う場合

デスクトップサーバーを使うときは、Figmaデスクトップアプリ側で有効化が必要です。

Figmaデスクトップアプリを最新版にする

デザインファイルを開く

何も選択していない状態で、ツールバーの切り替えか Shift+D でDev Modeに入る

右サイドバーのMCPサーバーの欄で「Enable desktop MCP server」をクリック

有効になったら、各ツールの接続先を http://127.0.0.1:3845/mcp にします。Claude Codeなら claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp です。

---

Figma MCPでできること（主なツール）

Figma MCPサーバーには30以上のツールがあります。日常的によく使うのは次のあたりです。

| ツール名 | できること | 提供範囲 | |---|---|---| | get_design_context | 選択したレイヤーやフレームのデザイン情報とコードを取得 | リモート・デスクトップ | | get_variable_defs | 選択範囲で使われている変数・スタイルの一覧を取得 | リモート・デスクトップ | | get_screenshot | 選択範囲の画像を取得 | リモート・デスクトップ | | get_metadata | 選択範囲の構造を軽量なXMLで取得 | リモート・デスクトップ | | get_code_connect_map | Figmaのコンポーネントとコードのコンポーネントのひもづけを取得 | リモート・デスクトップ | | search_design_system | ライブラリからコンポーネント・変数・スタイルを検索 | リモートのみ | | download_assets | 書き出し画像や元画像をダウンロード | リモートのみ | | get_figjam | FigJamの図をXMLに変換して取得 | リモート・デスクトップ | | use_figma | Figmaファイル内のコンテンツを作成・編集 | リモートのみ | | generate_figma_design | 動いているWeb画面をFigmaのレイヤーに変換 | リモートのみ | | generate_diagram | 説明文やMermaid記法からFigJamの図を作成 | リモートのみ |

キャンバスへの書き込み（ベータ）

リモートサーバーでは、AIからFigmaのキャンバスに直接フレームやコンポーネント、変数、Auto Layoutを作ることもできます。「実装済みの画面をFigmaに起こしておいて」「この仕様からFigJamで画面遷移図を作って」といった、コードからデザインへの逆方向の作業ができるのが特徴です。

公式ドキュメントによると、この機能はベータ期間中は無料で、将来的には従量課金の有料機能になる予定です。下書き（Drafts）以外のファイルに書き込むにはFullシートが必要です（2026年11月時点）。

---

デザインからコードを作るワークフロー

ここからは、Claude Codeで実際にFigmaのデザインをコードにするときの流れです。うちでもWeb制作の現場でこの流れを使っています。

1. Figmaでフレームのリンクをコピーする

コードにしたいフレームを右クリックして「Copy link to selection」（選択範囲へのリンクをコピー）を選びます。URLに node-id が付いていれば、そのフレームを指すリンクになっています。ページ全体のURLより、フレーム単位のリンクを渡したほうが精度が上がります。

2. リンクと条件を添えて指示する

このFigmaのフレームを、既存のNext.js + Tailwind CSSのプロジェクトに合わせて実装して。
https://www.figma.com/design/xxxx/...?node-id=12-345

- コンポーネントは src/components/ui/ にあるものを優先して使う
- 色と余白は tailwind の設定に定義済みの値に寄せる
- 画像は public/images/ に保存する

ポイントは、プロジェクト側のルールを一緒に伝えることです。何も言わないと、Figma MCPが返すコードの書き方（ReactとTailwindがベース）をそのまま使おうとするので、既存の設計とずれやすくなります。

3. スクリーンショットと見比べて修正する

Claude Codeは get_design_context で構造を、get_screenshot で見た目を取得しながら実装します。実装後は、ブラウザで表示して元のデザインと見比べさせると仕上がりが安定します。この確認作業はPlaywright MCPと組み合わせると、AIが自分で画面を開いて差分を見つけてくれるので楽になります。

Claude CodeでのWeb制作全体の進め方は「Claude CodeでWeb制作を効率化する方法」にまとめています。

---

プラン別の回数制限と料金

Figma MCPサーバー自体に追加料金はかかりませんが、Figmaのプランとシートの種類によってツールを呼び出せる回数が決まっています。公式ドキュメントに記載されている上限は次のとおりです（2026年11月時点）。

| シート | Starter | Professional | Organization | Enterprise | |---|---|---|---|---| | View・Collab | 月20回 | 月20回 | 月20回 | 月20回 | | Full・Dev | — | 1日200回・毎分10回 | 1日200回・毎分15回 | 1日600回・毎分20回 |

Educationプランは、ProfessionalプランのFull・Devシートと同じ上限（1日200回・毎分10回）です。

回数にカウントされるもの・されないもの

回数制限の対象は、Figmaからデータを読み取るツールです。add_code_connect_map、create_new_file、generate_figma_design、whoami などの一部のツールは対象外です。また、generate_image など Figma AIのクレジットを消費する操作も、MCPの回数制限とは別枠になっています。

無料プランで使えるか

Starterプランでもリモートサーバーにはつながりますが、View・Collabシートと同じ月20回までなので、試しに触ってみる程度と考えておいたほうがいいです。1画面の実装でも、構造の取得、変数の取得、スクリーンショットと複数回ツールを呼ぶので、20回は思ったより早く使い切ります。業務で継続的に使うなら、Professional以上のプランでDevまたはFullシートを用意するのが前提になります。

上限の数字は過去にも変更されていて、Figmaは予告なく変える可能性があるとしています。導入前に公式の「Rate limits & access」ページを確認してください。

---

うまく使うためのコツ

Figma側のデータを整えておく

Figma MCPの精度は、元のデザインデータの質に大きく左右されます。

Auto Layoutを使っている（絶対配置だらけのフレームはレスポンシブなコードになりにくい）

色・余白・フォントが変数やスタイルとして定義されている

レイヤー名が「Frame 123」ではなく「Header」「CardList」など意味のある名前になっている

繰り返し使う部品がコンポーネント化されている

逆に言えば、デザイナーとエンジニアでこのあたりのルールが揃っているチームほど、Figma MCPの効果が大きく出ます。

Code Connectで既存コンポーネントにひもづける

Code Connectは、FigmaのコンポーネントとリポジトリのUIコンポーネントを対応づける機能です。設定しておくと、AIは「ボタンを一から書く」のではなく「既存の Button コンポーネントを使う」コードを出すようになります。デザインシステムを運用している会社なら、最初に手を付ける価値があります。

1回で渡す範囲を小さくする

ページ全体を一度に渡すと、取得するデータ量が増えてコンテキストを圧迫し、精度も落ちがちです。ヘッダー、ヒーロー、カード一覧のようにセクション単位で渡して、組み上げていくほうが結果的に早く終わります。

プロジェクトのルールを書いておく

Claude Codeなら CLAUDE.md、Cursorならルールファイルに「使うフレームワーク」「コンポーネントの置き場所」「デザイントークンの扱い」を書いておくと、毎回指示しなくて済みます。

---

Figma MCPの限界と注意点

便利なツールですが、万能ではありません。

そのまま本番に出せるコードにはならない。 レイアウトの再現度は高くても、状態管理、アクセシビリティ、エラー時の表示などは人が確認して仕上げる必要があります

インタラクションやアニメーションは伝わりにくい。 プロトタイプの遷移や細かい動きは、文章で補足したほうが確実です

回数制限に引っかかると作業が止まる。 上限に達すると読み取り系のツールがエラーを返すまで気づきにくいので、チームで使う場合はシートの割り当てを考えておく必要があります

社外秘のデザインを扱うときは社内ルールを確認する。 データはAIツール側に送られるので、利用するAIサービスのデータの扱いもあわせて確認してください

Figma MCPは「デザインを見ながら手で組む」作業のうち、最初の7〜8割を短縮してくれるツール、という位置づけで使うのがちょうどいいと感じています。

---

まとめ

Figma MCPは、FigmaのデザインデータをClaude Code・Cursor・VS Codeなどから読み取れるFigma公式のMCPサーバー（旧称：Dev Mode MCPサーバー）

推奨はリモートサーバー（https://mcp.figma.com/mcp）。Claude CodeとCursorは公式プラグインからの導入が簡単

フレームのリンクとプロジェクトのルールを一緒に渡すと、既存のコードに沿った実装になりやすい

Starterプランや View・Collabシートは月20回まで。業務で使うならDev・Fullシートが前提

キャンバスへの書き込みはベータ中は無料、将来は従量課金の予定

---

FigmaのデザインからWebサイトを作りたい方へ

Swaaabでは、Figma MCPやClaude Codeを使った制作フローで、Next.jsのコーポレートサイトやLPを制作しています。デザインデータはあるけれど実装できる人がいない、AIを使った制作フローを社内に取り入れたい、といったご相談も受け付けています。

制作の進め方や事例はWeb制作のサービスページをご覧ください。具体的なご相談はお問い合わせからどうぞ。