デザインとコードを、
同じコンテキストでつなぐ。
Figma MCPを接続するとClaude Codeは、 Figmaのフレーム・Components・Variables・Auto Layout・Design Systemなどを 構造化されたデザイン情報として取得できます。 さらに2026年現在は、コードからFigmaへ戻す、FigmaキャンバスをAIから編集するところまで対応しています。
Components、Variables、Layout、Styles、Code Connectなど、 デザインの意味と構造をClaude Codeへ渡すことができます。 そのため、画像だけを見せてUIを再現させる方法より、設計意図をコードへ反映しやすくなります。
Figma MCPとは？
Figma MCP Serverは、FigmaとAIエージェントを接続するためにFigmaが公式提供しているMCPサーバーです。
もともとは「Figmaのデザイン情報をCoding Agentへ渡す」用途から始まりました。
しかし2026年現在は、読み取りだけではありません。
フレーム・レイアウト・Variables・ComponentsなどをClaude Codeへ渡します。
実際に動くWeb UIをFigma Designの編集可能なレイヤーへキャプチャできます。
対応クライアントからFigma上にFrames・Components・Variablesなどを直接作成・更新できます。
Code ConnectやDesign System検索を使って既存Components・Tokensを活用できます。
Remote MCPとDesktop MCPの違い
現在Figmaは、ほとんどのユーザーにRemote MCP Serverを推奨しています。
Figma Desktopを起動していなくても利用可能。 Figma公式のホスト型エンドポイントへ接続し、現在最も広い機能セットを利用できます。
Figma Desktopアプリ内で動作。 一部Organization / Enterprise用途や選択ベースの操作などで利用されます。
Remote MCPのURLは次の通りです。
https://mcp.figma.com/mcpClaude CodeへFigma MCPを接続する
Figma公式Developer Docsでは、Claude Code向けに次のコマンドが案内されています。
claude mcp add --transport http figma \
https://mcp.figma.com/mcpすべてのClaude Codeプロジェクトで利用する場合は、user scopeも利用できます。
claude mcp add --scope user --transport http figma \
https://mcp.figma.com/mcpその後Claude Codeを新しく起動し、
/mcpからFigmaを選択し、Authenticate → Allow AccessでOAuth認証します。
接続に成功すると、Figma側で認証されたユーザー権限を使ってファイルへアクセスできます。
Remote MCPでFigmaデザインを渡す方法
Remote MCPでは基本的にリンクベースで対象を指定します。
Figmaで対象FrameやLayerを選び、「Copy link to selection」でURLを取得します。
> このFigmaデザインを実装してください。
https://www.figma.com/design/xxxxx/App?node-id=123-456
要件:
- 既存コンポーネントを優先
- 現在のデザイントークンを使用
- レスポンシブ対応
- 既存コード規約を変更しない
- 実装後に見た目を比較するClaude CodeはURLから対象Nodeを特定し、MCPを使ってデザイン情報を取得します。
Desktop MCPではFigmaで現在選択中の要素をそのままコンテキストとして利用できます。 Remote MCPでは対象Frame・LayerへのリンクをClaude Codeへ渡すのが基本です。
重要なFigma MCPツール
2026年現在のFigma MCPには多数のツールがあります。その中でもClaude Code開発で特に重要なのが以下です。
get_design_context
Design Context
対象デザインの構造・スタイル・レイアウトなどをCoding Agent向けに取得。
get_screenshot
Screenshot
対象デザインの視覚参照を取得し、最終的な見た目の再現精度を上げます。
get_variable_defs
Variables / Tokens
Color・Spacing・Typographyなど、選択範囲で使われるVariablesとStylesを取得。
get_metadata
Metadata
大きなFrameのLayer構造・Node ID・位置・サイズなどを軽量XMLとして取得。
search_design_system
Design System Search
接続されたLibraryからComponents・Variables・Stylesを検索。
use_figma
Write to Canvas
Figma Design・FigJam・SlidesのオブジェクトをAIから作成・変更・削除・検査。
generate_figma_design
Code to Canvas
実際に動いているWeb UIをFigma Designの編集可能なレイヤーとして取り込みます。
download_assets
Assets
PNG・JPG・SVG・PDFなどのExportや元画像を取得できます。
get_design_contextは何を返す？
get_design_contextはFigma MCPの中核となるツールです。
対象FrameやLayerを、LLMが理解しやすい構造へ変換します。
デフォルトではReact + Tailwindに似た形式で返されますが、これは最終成果物として使うProduction Codeではありません。
MCPは構造化されたDesign ContextをClaude Codeへ渡します。 実際にNext.js、React、Vue、SwiftUIなど自分のコードベースに合わせてProduction Codeへ変換する役割はClaude Code側です。
そのため、Figma公式もMCP出力をそのまま貼り付けるのではなく、既存コード規約・Components・Design Tokensへ変換するよう推奨しています。
React以外にも使える？
利用できます。
Figma MCPそのものは特定Framework専用ではありません。
例えばClaude Codeへ、
> このFigma Frameを
Vue 3 + TypeScriptで実装してください。
> Tailwindは使わず、
既存のCSS Modulesへ合わせてください。のように指示できます。
Figma公式ドキュメントにもVue、Plain HTML + CSS、iOSなどへの変換例があります。
VariablesをClaude Codeへ渡す
get_variable_defsを使うと、選択範囲で利用されているVariablesやStylesを取得できます。
例えば、
> このFrameで使われている
Color・Spacing・Typographyの
Variable名と値を取得してください。と明示すると、Variables取得ツールを使いやすくなります。
MCPには複数ツールがあるため、AIが意図したツールを選ばない場合があります。 Variablesが欲しいならVariables、Screenshotが欲しいならScreenshotと明確に指定するのが有効です。
Code Connectが重要な理由
見た目が同じ新しいButtonをAIに作らせるのではなく、 既存コードベースにある本物のComponentを再利用させるための橋渡しです。
例えばFigma上のButton Componentと、
src/components/ui/Button.tsxをCode Connectで紐付けます。
Figma MCPがそのComponentを含むデザインを処理すると、Claude Codeへ、
Component名 / Import / Props / Variant / 実装例 / ファイル位置 / Custom Instructions
などを提供できます。
これによって、Claude Codeが既存Componentを無視して似たUIを新規実装する問題を減らせます。
Figmaファイル側の作り方でも精度が変わる
Figma公式は、AIによるDesign-to-Code品質を上げるために、Figmaファイル自体を構造化することを推奨しています。
Button・Card・Inputなど繰り返すUIをComponent化。
Color・Spacing・Radius・TypographyをDesign Tokensとして定義。
レスポンシブなLayout意図を構造としてAIへ伝えやすくします。
Frame1268ではなくCardContainerやCTA_Buttonのように命名。
Design Componentと実際のCode Componentを対応付け。
見た目だけでは伝わらない挙動や意図を補足。
Figma公式に近い実装フロー
対象Nodeの構造化Design Contextを取得。
巨大なFrameの場合は先にLayer構造を取得して対象Nodeを絞ります。
構造情報とは別に視覚的なReferenceを取得。
Code Connectやコード検索を使って再利用可能なUIを探します。
Figma出力をそのままコピーせず、既存Project規約へ翻訳します。
Figmaと実装結果を比較し、1:1に近づけます。
2026年はClaude CodeからFigmaを直接編集できる
ここが現在のFigma MCPで非常に大きな変化です。
Remote MCPのuse_figmaを使うと、Claude CodeからFigmaファイルへNativeなFigmaコンテンツを書き込めます。
例えば、
> このFigmaファイルに新しいSettings Pageを作ってください。
- Auto Layoutを使用
- 既存Design Systemを検索
- 既存Button / Inputを再利用
- 新しい独自Buttonを作らない
- Color Variablesを使用
- Desktop 1440px
- Settings / Profile / Securityを配置と指示できます。
AIが作るのは単なる画像ではなく、Frames・Components・Variants・Variables・Auto Layoutなどを含む編集可能なFigma-native構造です。
Dev seatではDesign Context・Variables・Screenshotなどの読み取りワークフローを利用できます。 AIから既存Figmaファイルを編集する場合はFull seatに加えて、そのファイルのEdit権限が必要です。
逆方向：実装したUIをFigmaへ戻せる
Figma MCPにはCode to Canvasのワークフローもあります。
generate_figma_designを使うことで、実際に動いているWebアプリ・WebサイトをFigma Designへキャプチャできます。
React・Next.jsなどで実際の画面を作成。
ブラウザで実際のUIを表示します。
表示中のUIを取得。
編集可能なDesign Layersとして配置します。
例えば、
> このアプリを起動して、
現在のDashboard UIを
新しいFigma Designファイルへキャプチャしてください。というワークフローが可能です。
FigmaでDesign → Claude Codeで実装 → 動いているUIをFigmaへ戻す → Designerが再調整、 という往復が可能になっています。 これはDesignerとDeveloperの境界をかなり変える機能です。
Design SystemをAIが検索できる
Remote MCPにはsearch_design_systemがあります。
接続中のDesign Librariesから、Components・Variables・Stylesをテキスト検索できます。
> Design Systemから
Primary Buttonを探してください。
> Settings画面で使えるCardを探してください。
> Primary Color Variableと
Spacing Tokensを確認してください。そのため、AIがすべてのUIをゼロから生成する必要がなくなります。
Motionも取得できる
現在のFigma MCPにはget_motion_contextもあります。
Animationが設定されたNodeについて、
Keyframes / Easing / Animation Tracks / CSS @keyframes / motion.dev向けSnippet
などを取得できます。
静的デザインだけでなく、「どう動くのか」というMotion ContextまでClaude Codeへ渡せるようになっています。
FigJamもClaude Codeから扱える
Figma MCPはFigma Designだけではありません。
get_figjamやgenerate_diagramを使うことで、Architecture DiagramやFlowchartなども扱えます。
generate_diagramが対応する主な図には、Flowchart、Gantt、State Diagram、Sequence Diagram、Architecture Diagram、ERDがあります。
> このRepositoryを分析して、
Login → API → Databaseまでの
Architecture DiagramをFigJamに作ってください。画像・SVGなどのAssetsも取得できる
download_assetsを使うと、FigmaのNodeからAssetを取得できます。
Export形式はPNG・JPG・SVG・PDFに対応し、元画像がFigmaに配置されている場合はRaw Source Imageも取得できます。
単にUIを再現するだけでなく、実際のIconやHero ImageをProjectへ持ってくる用途にも使えます。
大きなFigma Frameを一気に渡さない
複雑なDashboardなどを丸ごとget_design_contextへ渡すと、取得情報が大きくなります。
その場合は、
get_metadata → 必要Nodeを特定 → get_design_context
の順番がおすすめです。
Figma公式も、大きなDesignではMetadataで構造を把握してから必要な部分だけDesign Contextを取得する方法を案内しています。
Figma MCPの利用制限
Figma MCPの読み取りツールには、Plan・SeatによってTool Call制限があります。
Starter・Professional・Organization・EnterpriseのView / Collab seat。
加えて1分あたり15回の制限。
加えて1分あたり20回の制限。
Figmaは利用制限を変更する可能性があるため、最新値は公式Developer Docsで確認してください。
なお、書き込み系など一部ツールは通常の読み取りRate Limitの対象外です。
権限はどうなる？
Figmaの権限を飛び越えることはできない。
認証したユーザーが閲覧・編集できるFigmaコンテンツだけが対象です。 File permissionとSeat typeがそのままMCP利用にも影響します。
アクセスエラーが出た場合、Figma公式はwhoamiを使って、
認証Email / 所属Plan / Seat Type
を確認する方法を案内しています。
Write to Canvasの利用条件
AIからFigma Designを編集する場合は、読み取りだけの場合より条件が厳しくなります。
現在の公式仕様では、
Full seat + 対象FileのEdit権限
が必要です。
Dev seatはDesign Context・Variables・Screenshot取得などのRead-only Workflowに利用できます。
Write to Canvasは現在Beta
FigmaはAI AgentによるCanvas書き込みについて、将来的にはUsage-basedの有料機能にする予定と案内しています。
一方、2026年9月現在はBeta期間中で、対象機能は無料で提供されています。
料金モデルは今後変更される可能性があるため、公開時点で公式情報を再確認するのがおすすめです。
実際にClaude Codeへ渡すプロンプト例
Figma MCPを使って以下のFrameを実装してください。
[Figma URL]
必須手順:
1. get_design_contextで構造を取得
2. get_screenshotで見た目を確認
3. Variables / Tokensを取得
4. 既存RepositoryのComponentsを検索
5. Code Connectがあれば既存Componentを優先
6. 新しいUI Componentを不要に複製しない
7. Projectの既存CSS / Design Tokenへ変換
8. Responsive Behaviorを維持
9. TypeScript / Lint / Testを実行
10. Browserで実装結果を確認
11. Figmaと比較して視覚差分を修正
12. 最後に変更ファイル・検証結果を報告
Figma MCPのReact/Tailwind形式は
最終コードとしてコピーせず、
このProjectの規約へ変換してください。Notion・Figma・GitHubをつなぐとどうなる？
仕様・PRD・Acceptance Criteriaを取得。
Design・Variables・Components・Interactionを取得。
Issue・Repository・PR Contextを確認。
仕様・Design・Codeを統合して実装。
Preview Deploymentへ反映。
実ブラウザでE2E QA。
必要なら完成UIをCode to CanvasでDesignへ戻します。
Notionが何を作るか、Figmaがどう見せるか、GitHubが現在何を実装しているかを持ち、 Claude CodeがそれらをMCP経由で同時に理解する。 ここまで接続すると、AI開発は単なるコーディング支援からProduct Development全体の支援へ変わります。
Figma MCPでデザイナーと開発者の仕事はどう変わる？
双方向になる。
FigmaからCodeへ渡すだけではなく、 CodeからFigmaへ戻し、AIからCanvasを編集することも可能になっています。 今後はデザイナーとDeveloperの間でAI Agentが共通の作業者になる可能性があります。
これまでのProduct Developmentでは、
DesignerがFigmaを作る → Developerが実装 → 実装差分を人間が見て修正
という受け渡しが中心でした。
今後は、
Design System → AI Agent → Figma → Code → Running UI → Figma
という循環型のWorkflowへ変わっていく可能性があります。
Design System・Variables・Code ConnectというSource of Truthを、 AIがDesignとCodeの両側で共有できることが本質です。 それによって「AIが速くコードを書く」から「Designと実装のズレを減らす」段階へ進みます。
関連記事
出典：Figma公式Developer Docs「Figma MCP Server」「Remote server installation」「Tools and prompts」「Write to canvas」「Code to canvas」「Code Connect integration」「Rate limits & access」ほか。機能・利用条件・制限は記事執筆時点の情報です。
