Figma × Claude Code 連携ガイド — MCP でデザインとコードを双方向に橋渡し

Figma × Claude Code 連携とは

2026年2月、Figma は Claude Code との双方向連携を正式に発表しました。Figma の MCP（Model Context Protocol）サーバーを利用することで、Claude Code からデザインデータを読み取ってコードを生成したり、逆に Claude Code で構築した UI を Figma に書き戻したりできるようになりました。

この連携により、デザイナーと開発者の間のハンドオフが大幅に効率化されます。従来はデザインを目視で確認しながらコードを書いていた工程を、AI が自動的にデザインの構造（レイヤー、コンポーネント、Auto Layout、デザイントークン）を理解してコードに変換します。

ℹ️

**Figma MCP 連携の主な機能：** - Figma デザインからコンテキストを取得してコード生成（Design to Code） - Claude Code で構築した UI を Figma に書き戻す（Code to Canvas） - FigJam ダイアグラムの AI 生成 - デザインシステム／コンポーネントの理解と一貫したコード出力 - Code Connect によるコンポーネントマッピング

前提条件

Figma × Claude Code 連携を始めるには、以下が必要です。

Claude Code がインストール済みであること（セットアップガイドを参照）
Figma アカウント（無料プランでも基本機能は利用可能）
Figma デスクトップアプリ（デスクトップ MCP サーバーを使う場合）

⚠️

**プランに関する注意：** 無料プランでもリモート MCP サーバー経由で Code to Canvas 機能を試せますが、月6回のツールコール制限があります。実用的に利用するには Professional 以上のプランで Dev/Full シートが推奨されます。

セットアップ方法

Figma MCP サーバーには 2つの接続方式があります。用途に応じて選択してください。

方式1: リモート MCP サーバー（推奨）

Figma が提供するクラウド上の MCP サーバーに接続する方式です。デスクトップアプリ不要で手軽に始められます。

# Claude Code にリモート MCP サーバーを追加
claude mcp add --transport http figma https://mcp.figma.com/mcp

実行すると、ブラウザで Figma の認証画面が開きます。ログインしてアクセスを許可すれば完了です。

方式2: デスクトップ MCP サーバー

Figma デスクトップアプリのローカルサーバーを利用する方式です。より高速なレスポンスが期待でき、オフラインでも一部機能が利用できます。

Step 1: Figma デスクトップアプリで MCP を有効化

Figma デスクトップアプリを開く
メニューから Figma → Settings（設定） を選択
Enable desktop MCP server をオンにする

Step 2: Claude Code にローカルサーバーを登録

# デスクトップ MCP サーバーを追加
claude mcp add --transport sse figma-desktop http://127.0.0.1:3845/sse

Step 3: 接続を確認

# Claude Code を再起動して MCP 接続を確認
claude
/mcp

figma または figma-desktop が一覧に表示されていれば、接続は成功です。

Figma プラグイン経由のセットアップ

Figma は Claude Code 向けのプラグインも提供しています。プラグインをインストールすると、MCP サーバー設定に加えて、一般的なワークフロー向けのエージェントスキルも自動的に追加されます。

# Figma プラグインをインストール（MCP 設定 + スキルを含む）
claude plugin add figma

デザインからコードへ（Design to Code）

基本的な使い方

Figma のデザインを Claude Code でコード化するには、Figma でフレームやレイヤーを選択し、リンクをコピーして Claude Code に渡します。

Step 1: Figma でリンクを取得

Figma でコード化したいフレームやコンポーネントを選択
右クリック → 選択範囲へのリンクをコピー（または Ctrl/Cmd + L）

Step 2: Claude Code に依頼

このFigmaデザインをReactコンポーネントとして実装してください。
Tailwind CSSを使い、レスポンシブ対応もお願いします。

https://www.figma.com/design/xxxxx/MyProject?node-id=123-456

Claude Code は MCP を通じて Figma のデザインデータ（レイヤー構造、色、フォント、間隔、Auto Layout 設定）を読み取り、それに忠実なコードを生成します。

デザインシステムとの連携

Figma のデザインシステム（コンポーネントライブラリ）と連携することで、AI が既存のコンポーネントを理解し、一貫したコードを出力できます。

プロジェクトのデザインシステムに含まれるButtonコンポーネントの
バリアント（Primary、Secondary、Ghost）をすべて確認し、
既存のコードベースにマッチするReactコンポーネントを作成してください。

Code Connect が設定されている場合、Claude Code はデザインコンポーネントと実際のコードコンポーネントのマッピングを理解し、既存のコンポーネントを再利用したコードを生成します。

実践テクニック：セクション単位の実装

ページ全体を一度に実装するのではなく、セクション単位で進めると精度が向上します。

このFigmaページのヘッダーセクション（node-id=10-20）を
まず実装してください。ナビゲーションリンクはダミーデータで構いません。

https://www.figma.com/design/xxxxx/MyProject?node-id=10-20

コードからデザインへ（Code to Canvas）

ライブ UI キャプチャ

Claude Code で構築した UI を、スクリーンショットではなく 編集可能な Figma レイヤー として Figma に書き戻せます。

現在のUIをFigmaに書き戻してください。
ファイルは https://www.figma.com/design/xxxxx/MyProject です。

Claude Code はレンダリング中の UI をキャプチャし、Figma の図形、テキスト、画像レイヤーとして再構成します。これにより、デザイナーが Figma 上で直接修正や改良を加えることができます。

反復ワークフロー

Code to Canvas の真価は、反復的なワークフローにあります。

デザイナー が Figma でモックアップを作成
Claude Code がデザインを読み取りコードを実装
開発者 がコードを調整・改良
Claude Code が更新された UI を Figma に書き戻す
デザイナー が Figma 上でフィードバック・修正
2〜5 を繰り返す

この双方向フローにより、デザインと実装のズレを最小限に抑えられます。

FigJam × Claude

Figma MCP は FigJam との連携もサポートしています。Claude にテキスト、PDF、画像を渡すと、FigJam 上に構造化されたダイアグラムを自動生成できます。

以下のプロジェクト要件書から、システムアーキテクチャ図を
FigJamに作成してください。

[要件書のテキストまたはPDF]

ユースケースの例として、ユーザーフローの可視化、システム構成図の自動生成、ブレインストーミングの整理などがあります。

コミュニティ MCP サーバー

Figma 公式の MCP サーバー以外にも、コミュニティが開発したオープンソースの MCP サーバーがあります。

Claude Talk to Figma

公式 MCP が Dev Mode ライセンスを必要とする一部機能について、無料プランでも利用できるコミュニティ製の代替ツールです。Claude Desktop や Cursor などからも接続できます。

# コミュニティ製 Figma MCP（例）
git clone https://github.com/arinspunk/claude-talk-to-figma-mcp
cd claude-talk-to-figma-mcp
npm install && npm start

⚠️

コミュニティ製ツールは非公式であり、Figma のアップデートにより動作しなくなる可能性があります。本番ワークフローでは公式 MCP サーバーの利用を推奨します。

トラブルシューティング

MCP 接続ができない

# MCP サーバーの状態を確認
claude /mcp
 
# サーバーを削除して再追加
claude mcp remove figma
claude mcp add --transport http figma https://mcp.figma.com/mcp

デスクトップ MCP サーバーが応答しない

Figma デスクトップアプリが起動しているか確認
設定で MCP サーバーが有効になっているか確認
http://127.0.0.1:3845/sse にブラウザからアクセスして応答があるか確認

コード生成の精度が低い

Figma のデザインデータが整理されているか確認（レイヤー名の命名、Auto Layout の適切な使用）
フレーム単位ではなくコンポーネント単位で指示する
使用するフレームワーク（React、Vue、Svelte など）を明示的に指定する

全体を振り返って

Figma × Claude Code の MCP 連携は、デザインと開発のワークフローを根本的に変えるツールです。Design to Code でデザインの意図を正確にコードに変換し、Code to Canvas で実装結果をデザインにフィードバックする双方向のフローが実現します。

まずはリモート MCP サーバーでの接続から始め、ワークフローに慣れてきたらデスクトップ MCP サーバーやデザインシステム連携を導入することをおすすめします。