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つのエージェント内で完結させやすくなります。なお、キャンバスへの書き込みにはFullシートと対象ファイルの編集権限が必要です。Figmaは、この機能をベータ期間中は無料とし、将来は有料APIにすると案内しています（出典: Figma公式の書き込み条件、Figma公式ブログ）。
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自身もリモート版の利用を推奨しており、まずはリモート版でつなぎ、必要に応じてローカル版を検討する進め方が現実的です。
AIエージェントを「どう作り、どう育てるか」を、GiftX記事制作エージェントの実物で解説。
Claude Code・CodexにFigma MCPを設定する手順
ここからは、AIコーディングエージェントへFigma MCPをつなぐ流れを整理します。Claude Code（Anthropicが提供するCLI型のAIコーディングエージェント）とCodex（OpenAIが提供するAIコーディングエージェント）は、いずれも公式に対応クライアントとして挙げられており、Figma MCPを組み込めます（出典: figma.com）。
接続前の準備｜Figmaアカウントと認可
リモート版はFigmaアカウントでログインし、クライアントにMCPサーバーを登録した後、FigmaのOAuth認可（利用者が許可した範囲だけ外部アプリにアクセス権を渡す認証の仕組み）を行います。ローカル版はFigmaデスクトップアプリの有料プラン（DevまたはFullシート）でサーバーを有効化してから、クライアントへローカルURLを登録します。図の2つの経路を混ぜず、まずはFigmaが推奨するリモート版から試すと手順を追いやすくなります。
Claude Codeへの登録
Claude Codeでは、Figma公式が案内する claude plugin install figma@claude-plugins-official でプラグインを導入できます。手動でリモート版を登録するなら claude mcp add --transport http figma https://mcp.figma.com/mcp を実行します。すべてのプロジェクトで使う場合は claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp です。登録後に新しいセッションを開き、/mcp からfigmaを選んでOAuth認可し、接続状態を確認します。ローカル版は、先にFigmaデスクトップアプリでサーバーを有効化し、claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp で登録します（出典: Figma公式のリモート版手順、デスクトップ版手順）。
Codexへの登録
Codexアプリでは、プラグイン画面からFigmaをインストールして認証する方法をFigma公式が案内しています。CLIで手動登録する場合は codex mcp add figma --url https://mcp.figma.com/mcp を実行し、表示された認証手順に従ってOAuth認可します。登録コマンドにはサーバー名だけでなく --url と接続先の指定が必要です。VS CodeやCursorなど他の対応クライアントでも、FigmaのリモートURLを登録して認証します（出典: Figma公式のリモート版手順）。
ローカル版を有効化する手順
ローカル版を使う場合は、Figmaデスクトップアプリの画面下部のツールバーからDev Modeに切り替えるか、ショートカット（Shift+D）でDev Modeに入り、インスペクトパネルのMCPサーバーの項目で「Enable desktop MCP server」をクリックします。これで http://127.0.0.1:3845/mcp でローカルサーバーが立ち上がり、各クライアントから接続できます（出典: figma.com）。
Figma MCPの料金とプラン要件
Figma MCPそのものに固有の追加料金は、公式ドキュメント上は明示されていません。Figma MCPはあくまでFigmaのデザインへの接続層であり、費用はFigmaのプランとシートの契約に従う構造です。とはいえ、どのサーバーがどの条件で使えるかは明確に整理されています。下表は、2系統のサーバーと利用条件を整理したものです（2026年7月時点、出典: figma.com）。
| サーバー | 利用条件 | 追加料金の考え方 |
|---|---|---|
| リモート版 | 全シート・全プランで利用可（無料プランを含む） | サーバー自体は追加料金なし |
| ローカル版（デスクトップ） | 有料プランのDevまたはFullシートが必要 | Figmaの有料プラン費用に含まれる |
| キャンバス書き込み | Fullシートと対象ファイルの編集権限が必要 | ベータ期間中は無料。将来は有料APIになる予定 |
上表のとおり、まず試すだけならリモート版を無料プランのまま利用できます。一方で、ローカル版を使う場合や、チームで本格的にデザインシステムと連携させる場合は、FigmaのDevまたはFullシートを含む有料プランが前提になります。シートやプランの具体的な金額は改定の影響を受けるため、契約前には公式の料金ページで最新値を確認してください。
ただし「利用できる」と「十分な回数を呼び出せる」は別です。Figma公式は、データを読み取るMCPツールの上限をプランとシート種別ごとに定めています。リモート版とデスクトップ版のどちらでも、使うアカウントの条件を確認してください。
| プランとシート | 読み取りツールの上限 | 補足 |
|---|---|---|
| Starter | 20回/月 | 無料プランでも利用できるが、継続的な実装には回数を確認 |
| Professional・Organization・EnterpriseのView / Collab | 6回/月 | 有料プランでもView / Collabシートは上限が低い |
| Professional・OrganizationのDev / Full | 200回/日 | 分あたりの上限はProfessionalが10回、Organizationが15回 |
| EnterpriseのDev / Full | 600回/日 | 分あたり20回まで |
（2026年10月1日時点、出典: Figma公式のレート制限とアクセス条件）。上限はFigmaのデータを読むツールに適用され、書き込みツールなど一部は対象外です。実際の操作権限は対象ファイルへのアクセス権にも依存します。
Figma MCPのメリット・デメリットと注意点
Figma MCPを使うかどうかを判断するうえで、利点と注意点を整理しておきます。最大の利点は、これまで人が目視でデザインを読み取ってコード化していた工程を、公式の安定した接続層としてAIに任せられる点です。変数やコンポーネントに基づく文脈を渡せるため、デザインシステムと整合しやすいコードを引き出しやすくなります。一方で、見落とせない注意点も次の3つがあります。
注意点1：AI生成コードの精度
第一に、AIが生成するコードの精度です。レスポンシブ対応や複雑なUIでは、生成コードをそのまま使えるとは限らず、人によるレビューと調整が前提になります。デザインの作り方（命名やコンポーネント化の徹底）によって、生成品質が大きく変わる点も押さえておく必要があります。
注意点2：プランと権限の扱い
第二は、プランと権限の扱いです。ローカル版は有料プランのシートが前提であり、リモート版でもキャンバスへの書き込みなど強い操作を許可する際は、AIにどこまでの権限を渡すかを意識する必要があります。まずは読み取り中心のコード生成から始め、書き込みは必要になった時点で慎重に広げるのが安全です。
注意点3：レート制限とセキュリティ
第三はレート制限とセキュリティです。Starterは読み取りツールが20回/月、View / Collabシートは有料プランでも6回/月のため、複数画面を扱う前に上限を確認してください。認可情報や設定ファイルの扱いにも注意し、共有リポジトリに機密を直書きしない配慮が欠かせません。
オフィス系7職種のAI利用者669人の調査では、生産性向上を明確に実感した割合が、チャット中心の利用層14.3%に対しAIエージェント利用層54.3%。約3.8倍の差が見られました。
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そのものに固有の追加料金は明示されていません。ただし、無料のStarterではデータ読み取りツールが20回/月までです。ローカル版には有料プランのDevまたはFullシートが必要で、リモート版からキャンバスへ書き込むにはFullシートと対象ファイルの編集権限が必要です。書き込み機能はベータ期間中は無料ですが、Figmaは将来の有料API化を案内しています（条件は公式の書き込み手順とレート制限、ベータ料金は公式ブログを参照。2026年10月1日時点）。
リモート版とローカル版はどちらを使うべきですか？
まず手早く試したい場合は、リモート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エージェント構築支援の詳細・お問い合わせはこちら
