Figma MCPとは｜Figma公式のデザイン連携用MCPサーバー
Figma MCPとは、AIエージェントがFigmaのデザインデータへ標準化された方法で直接アクセスできるようにする、Figma公式のMCPサーバーです。デザインの構造や変数、コンポーネントといった情報をAIが読み取れる形で渡し、デザインからコードへの変換や、逆にAIからキャンバスへの書き込みまでを仲介します（出典: figma.com）。
従来は、Figmaのデザインを見ながら人が寸法や色を目視で読み取り、コードに写し取る作業が発生していました。Figma MCPはこのハンドオフをAIに任せられるようにし、デザインと実装の間の手戻りを減らすことを狙った仕組みです。
関連記事：MCPとは？Model Context Protocolの仕組みとAPIとの違いを整理
MCPとは｜AIと外部ツールをつなぐ共通規格
ここで言うMCP（Model Context Protocol、AIモデルと外部ツールやデータソースを標準化された方法でつなぐオープン規格）は、AI向けの共通プラグイン規格にあたります。従来は、AIアプリと外部サービスを連携させるたびに専用のつなぎ込みを個別に開発する必要があり、組み合わせの数だけ実装が増える負担がありました。MCPはこの接続を1つの規格に置き換えることで、組み合わせごとの作り込みを不要にします。
Figma MCPは、この共通規格にFigmaが公式対応し、デザインツールをAIエージェントから直接扱える情報源にした取り組みと理解すると分かりやすいです。MCPそのものの全体像は、親テーマの解説記事もあわせて参照すると理解が深まります。
Figma MCPでできること｜コード生成からキャンバス書き込みまで
Figma MCPが提供する機能は、大きく「デザインを読み取ってコードや文脈を渡す」方向と、「AIからFigmaへ書き込む」方向の2系統に整理できます。単なる画像の受け渡しではなく、レイアウトや変数といった構造化された情報をやり取りする点が特徴です。
主な機能領域は次のとおりです。いずれもAIエージェントがツールとして呼び出して実行します。
- コード生成：選択したフレームからHTMLやReactなどのコードを生成する
- デザイン文脈の抽出：変数、コンポーネント、レイアウト情報をAIに渡す
- キャンバスへの書き込み：フレームやコンポーネント、変数をFigma上に直接生成・編集する
- 実際のUIからデザインを生成する
- Code Connectとの連携：デザインシステムのコンポーネントと実装を対応づける
- FigJamやFigma Makeのリソースを取得する
これらを組み合わせると、Figmaのデザインを起点にコードの初稿をAIに作らせたり、逆にAIが用意したUI案をFigma上に反映させたりと、デザインと実装を往復するワークフローを1つのエージェント内で完結させやすくなります。なお、キャンバスへの書き込みやコードからキャンバスへの生成は、ベータ期間中は無料で利用でき、将来的に従量課金の有料機能になる予定とされています（出典: figma.com）。
Figma MCPの仕組み｜デザイン情報をAIが読める文脈に変換
Figma MCPの根幹は、Figmaのデザインを「AIが解釈できる構造化された文脈」に変換して渡す発想にあります。画像を丸ごと渡すのではなく、フレームの階層、余白や色といったスタイル、変数、コンポーネントの対応関係を機械可読な形で取り出し、AIエージェントがコード生成の根拠にできるようにします。
通信は、MCPホスト（AIエージェント本体）、MCPクライアント（接続）、MCPサーバー（ツールとデータの提供）の三層で構成されます。Figma MCPはこのうち「サーバー」を担い、Claude CodeやCodexなどのMCPクライアントからの要求に応じて、Figmaのデザイン情報や各種ツールを提供します。
この設計により、AIは「見た目が近いだけのコード」ではなく、変数やコンポーネントに裏づけられた、デザインシステムと整合しやすいコードを出力しやすくなります。デザインシステムとの対応づけを担うのがCode Connectで、Figmaのコンポーネントと実装側のコードを結びつけることで、生成コードの一貫性を高めます。
Figma MCPのリモート版とローカル版の違い
Figma MCPには「Figmaがホストするリモート版」と「デスクトップアプリ上で動かすローカル版」の2系統があります。どちらもFigma公式ですが、接続先や利用できるプランが異なるため、自分の環境に合うほうを選ぶことが出発点になります。下表は、接続先・セットアップ・利用条件・向いている人の観点で2系統を整理したものです。
| 観点 | リモート版（推奨） | ローカル版（デスクトップ） |
|---|---|---|
| 接続先 | https://mcp.figma.com/mcp（単一URL） | http://127.0.0.1:3845/mcp（既定） |
| セットアップ | リモートURLを登録しOAuthで認可するだけ | Figmaデスクトップアプリで有効化して起動 |
| 利用できる範囲 | 全シート・全プランで利用可（無料プランを含む） | 有料プランのDevまたはFullシートが必要 |
| 機能の広さ | キャンバス書き込みを含む最も広い機能 | 主に組織・エンタープライズ向けの用途 |
| 向いている人 | まず手早く試したい人・幅広い機能を使いたい人 | ローカル完結で動かしたい組織 |
表のとおり、手早く試すなら接続点が1つのリモート版、ローカル環境で完結させたい組織向けの用途ならデスクトップ版という棲み分けになります（出典: figma.com）。Figma自身もリモート版の利用を推奨しており、まずはリモート版でつなぎ、必要に応じてローカル版を検討する進め方が現実的です。
Claude Code・CodexにFigma MCPを設定する手順
ここからは、AIコーディングエージェントへFigma MCPをつなぐ流れを整理します。Claude Code（Anthropicが提供するCLI型のAIコーディングエージェント）とCodex（OpenAIが提供するAIコーディングエージェント）は、いずれも公式に対応クライアントとして挙げられており、Figma MCPを組み込めます（出典: figma.com）。
接続前の準備｜Figmaアカウントと認可
いずれの方式でも、Figmaアカウントでのログインと、初回接続時のOAuth認可（利用者が許可した範囲だけ外部アプリにアクセス権を渡す認証の仕組み）が前提になります。リモート版はプランを問わず利用できますが、ローカル版はFigmaデスクトップアプリの有料プラン（DevまたはFullシート）で有効化する必要があります。まずは制約の少ないリモート版から試すのが無理のない始め方です。
Claude Codeへの登録
Claude Codeへは、ターミナルで claude mcp add --transport http figma https://mcp.figma.com/mcp を実行してリモート版を登録します。すべてのプロジェクトで使えるようにする場合は、--scope user を付けて claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp を実行します。登録後、新しいセッションで /mcp を実行し、一覧にfigmaが表示され認可を済ませれば接続完了です。ローカル版につなぐ場合は、Figmaデスクトップアプリで有効化したうえで claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp を使います（出典: figma.com）。
Codexへの登録
CodexへもCLIから登録できます。ターミナルで codex mcp add figma --url https://mcp.figma.com/mcp を実行してリモート版を追加します。登録後、Codex側で初回のOAuth認可を済ませれば、Figmaのデザインを読み取ってコードを生成するツールを呼び出せます。VS CodeやCursorなど他のクライアントも公式に対応しており、VS Codeでは設定ファイルに "figma": \{ "url": "https://mcp.figma.com/mcp", "type": "http" \} を追加する形で接続します（出典: figma.com）。
ローカル版を有効化する手順
ローカル版を使う場合は、Figmaデスクトップアプリの画面下部のツールバーからDev Modeに切り替えるか、ショートカット（Shift+D）でDev Modeに入り、インスペクトパネルのMCPサーバーの項目で「Enable desktop MCP server」をクリックします。これで http://127.0.0.1:3845/mcp でローカルサーバーが立ち上がり、各クライアントから接続できます（出典: figma.com）。
全国8,000人調査で、AI活用方法によって生産性向上に約3.8倍の差が生まれることが判明。
Figma MCPの料金とプラン要件
Figma MCPそのものに固有の追加料金は、公式ドキュメント上は明示されていません。Figma MCPはあくまでFigmaのデザインへの接続層であり、費用はFigmaのプランとシートの契約に従う構造です。とはいえ、どのサーバーがどの条件で使えるかは明確に整理されています。下表は、2系統のサーバーと利用条件を整理したものです（2026年7月時点、出典: figma.com）。
| サーバー | 利用条件 | 追加料金の考え方 |
|---|---|---|
| リモート版 | 全シート・全プランで利用可（無料プランを含む） | サーバー自体は追加料金なし |
| ローカル版（デスクトップ） | 有料プランのDevまたはFullシートが必要 | Figmaの有料プラン費用に含まれる |
| キャンバス書き込み・コード生成（ベータ） | ベータ期間中は無料 | 将来は従量課金の有料機能になる予定 |
上表のとおり、まず試すだけならリモート版を無料プランのまま利用できます。一方で、ローカル版を使う場合や、チームで本格的にデザインシステムと連携させる場合は、FigmaのDevまたはFullシートを含む有料プランが前提になります。シートやプランの具体的な金額は改定の影響を受けるため、契約前には公式の料金ページで最新値を確認してください。
Figma MCPのメリット・デメリットと注意点
Figma MCPを使うかどうかを判断するうえで、利点と注意点を整理しておきます。最大の利点は、これまで人が目視でデザインを読み取ってコード化していた工程を、公式の安定した接続層としてAIに任せられる点です。変数やコンポーネントに基づく文脈を渡せるため、デザインシステムと整合しやすいコードを引き出しやすくなります。一方で、見落とせない注意点も次の3つがあります。
注意点1：AI生成コードの精度
第一に、AIが生成するコードの精度です。レスポンシブ対応や複雑なUIでは、生成コードをそのまま使えるとは限らず、人によるレビューと調整が前提になります。デザインの作り方（命名やコンポーネント化の徹底）によって、生成品質が大きく変わる点も押さえておく必要があります。
注意点2：プランと権限の扱い
第二は、プランと権限の扱いです。ローカル版は有料プランのシートが前提であり、リモート版でもキャンバスへの書き込みなど強い操作を許可する際は、AIにどこまでの権限を渡すかを意識する必要があります。まずは読み取り中心のコード生成から始め、書き込みは必要になった時点で慎重に広げるのが安全です。
注意点3：レート制限とセキュリティ
第三はレート制限とセキュリティです。AIエージェントが大量にツールを呼び出す運用では、レート制限やアクセス範囲の設計が実務上の論点になります。認可情報や設定ファイルの扱いにも注意し、共有リポジトリに機密を直書きしない配慮が欠かせません。
Before/Afterで見るFigma MCP活用の業務インパクト
Figma MCPの価値は、具体的な業務の前後で比べると見えやすくなります。ここでは、デザインからコードへの実装工程を、AIエージェントに任せる前と後で並べてみます。いずれも実在の数値ではなく、無理のないレンジで置いた想定値です。
導入前：デザインを目視で読み取り手作業でコード化
たとえば、Figmaのデザインをもとに画面を実装する担当者のケースを考えます。導入前は、Figmaの画面を見ながら余白・色・フォントサイズを1つずつ確認し、HTMLやCSSに写し取っていました。1画面あたり60分ほどかかり、デザインの微修正が入るたびに読み直しと修正が発生していました。
導入後：デザイン文脈をAIが読み取りコード初稿を生成
Figma MCPを使うと、AIエージェントがフレームの構造・変数・コンポーネントを読み取り、コードの初稿まで生成します。担当者は生成コードのレビューとレスポンシブ調整に集中でき、1画面あたり25分程度に収まる見込みです。削減率はおよそ60%で、単純作業を減らして実装の質を確認する時間に振り向けられます。デザインシステムをCode Connectで対応づけておけば、微修正時の追随も進めやすくなります。
AIエージェント活用を始めるときに陥りがちな3つの落とし穴
Figma MCPのように導入のハードルが下がったツールでも、いざ自社の運用に組み込もうとするとつまずきやすいポイントがあります。ここでは、AIエージェント活用を始めるときに陥りがちな3つの落とし穴を整理します。
落とし穴1：いきなり全ての工程を任せようとする
最初からデザインの読み取りもコード生成もキャンバス書き込みも一度にAIへ任せようとすると、確認すべき挙動が増えすぎて運用が回らなくなります。まずはコード生成という1つの操作に絞り、想定どおり動くかを見極めるところから始めるのが現実的です。
落とし穴2：壮大な自動化構想から考えて手が止まる
「デザインから実装までを全自動化する」といった大きな構想から入ると、設計や合意形成に時間を取られ、着手そのものが遅れがちです。完成形を描くより、目の前の1つの画面で小さく動かして手応えを得るほうが前に進みます。
落とし穴3：既製の汎用AIツールでは運用フローに組み込みきれない
既製品の汎用的なAIツールだけでは、自社の運用フローや独自のデザインシステムに合わせた細かなカスタマイズが難しく、実務に組み込めるレベルの質に届かないことがあります。Figma MCPのような接続層を使い、自社の手順に沿ってツールを組み合わせる視点が必要になります。
こうした落とし穴を避ける鍵は、スモールスタートで1つの業務をAIエージェントに任せて自動化・効率化することです。GiftXでは、こうしたスモールスタート前提のAIエージェント構築を1業務単位から伴走支援しています。詳細はAIエージェント構築支援サービスをご覧ください。
Figma MCPに関するよくある質問（FAQ）
最後に、Figma MCPについて検討段階でよく挙がる疑問を整理します。
Figma MCPは無料で使えますか？
リモート版は全プラン（無料プランを含む）で利用でき、Figma MCPそのものに固有の追加料金はありません。一方で、ローカル版はFigmaの有料プランのDevまたはFullシートが必要です。また、キャンバス書き込みなどの機能はベータ期間中は無料ですが、将来は従量課金の有料機能になる予定とされています（2026年7月時点、出典: figma.com）。
リモート版とローカル版はどちらを使うべきですか？
まず手早く試したい場合は、リモートURLを登録するだけで使えるリモート版が向いています。Figma自身もリモート版を推奨しています。ローカル環境で完結させたい組織向けの用途では、デスクトップ版が選択肢になりますが、有料プランのシートが前提になります。
Claude CodeやCodexからFigmaのデザインをコード化できますか？
できます。Claude CodeとCodexはいずれも公式の対応クライアントで、Figma MCPを設定すればデザインの読み取りやコード生成のツールを呼び出せます。ただし初回接続時にOAuth認可が必要で、生成コードはレスポンシブ対応などで人によるレビューが前提になります。
生成されたコードはそのまま使えますか？
複雑なUIやレスポンシブ対応では、そのまま本番に使えるとは限りません。デザインの命名やコンポーネント化を整えておくほど生成品質は上がりますが、最終的には人がレビューして調整する前提で使うのが安全です。
まとめ
Figma MCPは、AIエージェントがFigmaのデザインデータへ直接つなげられる、Figma公式のMCPサーバーです。デザインからのコード生成やキャンバスへの書き込みを、変数やコンポーネントに基づく文脈とともに扱える一方、AI生成コードの精度、プランとシートの要件、レート制限やセキュリティといった注意点もあります。まずは全シート・全プランで使えるリモート版をClaude CodeやCodexにつなぎ、コード生成という小さな操作から試すのが、無理のない始め方です。
大切なのは、最初から全てを自動化しようとせず、スモールスタートで1つの業務をAIエージェントに任せて自動化・効率化することです。Figma MCPのような接続層は、その小さな一歩を支える有力な選択肢になります。
AIエージェント活用の伴走支援をご検討の方へ
本記事で紹介したFigma MCPの活用に向けて、自社の業務でも具体的に進めたい・相談したいとお考えの方は、ぜひGiftX AIエージェント構築支援までお問い合わせください。
GiftX AIエージェント構築支援では、貴社の業務に合わせて1業務単位のスモールスタートから本番運用まで、AIエージェント構築をワンストップで支援します。ユースケースの洗い出しから、PoC、本番運用、社内ナレッジ化まで伴走します。
AI活用にご関心のある方は、ぜひ一度ご相談ください。
▶ GiftX AIエージェント構築支援の詳細・お問い合わせはこちら
