Claude×Figma の使い方｜Dev Mode MCP でデザイン→コード

Claude×Figma 連携で何ができるのか

これまで「Figma で UI を作る」→「人が手で React/Tailwind に書き起こす」という二段運用が当たり前だった。MCP 連携が入ると、Claude のチャット欄に Figma の URL を貼って「このフレームを React で実装して」と書くだけで、選択範囲のメタデータ・スクリーンショット・コンポーネント情報を Claude が取得し、デザイントークン込みのコードが返ってくる。さらに Code to Canvas 機能では、Claude が生成したコンポーネントを Figma の編集レイヤーとして書き戻すこともできるため、デザイナーとエンジニアの往復コストが大きく下がる。逆に「ブランドガイドの厳密な踏襲」「複雑なアニメーション」は依然として人手の調整が必要で、現状は「下書き 8 割を自動・残り 2 割を人」が現実的な落とし所になっている。

3 通りの連携方式と使い分け

Claude から Figma にアクセスする経路は大きく 3 つあり、それぞれ得意分野と必要プランが異なる。

1. Remote MCP サーバー(https://mcp.figma.com/mcp を MCP クライアントに登録)。すべてのシート・プランで利用可能で、最も導入が早い。
2. Desktop MCP サーバー(Figma デスクトップアプリ経由のローカル接続)。Dev seat または Full seat が必須で、有料プラン限定。書き込み系の機能が安定する。
3. Code to Canvas(Claude が生成したコードを Figma レイヤーに書き戻す)。ベータ期間中は無料、将来は従量課金へ移行予定。

「まず試したいなら Remote」「業務で常用するなら Desktop」「コード→デザイン書き戻しを使うなら Code to Canvas」というのが、現時点の素直な使い分け判断軸である(Figma 公式ヘルプより)。

Remote MCP サーバーをセットアップする手順

最も簡単な経路。Figma の有料プランがなくても試せる。

1. Figma 上で対象ファイルを開き、共有権限が「View 以上」になっていることを確認する。
2. Claude Code または Claude Desktop の MCP 設定を開く(後述)。
3. MCP サーバー URL に https://mcp.figma.com/mcp を登録する。
4. ブラウザが立ち上がり、Figma アカウントで OAuth 認証を求められるので承認する。
5. Claude のチャット欄に Figma のファイル URL またはフレーム URL を貼り、「このフレームを React + Tailwind で実装して」と指示する。

Remote 版はネット越しの呼び出しになるため、巨大なフレームを一度に渡すとレスポンスが遅くなりやすい。実装したい単位(ヘッダー / カード / モーダル)に絞って投げるのがコツである。

Claude Code から Figma MCP を呼ぶ実装例

Claude Code(CLI / IDE 拡張)を業務エディタにしているチームなら、こちらが本命。MCP 設定ファイルに 1 ブロック追記するだけで使える。

1. ~/.claude.json の mcpServers セクションを開く(無ければ作成)。
2. 以下のように Figma MCP を追記する。

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

3. Claude Code を再起動し、/mcp コマンドで figma が connected になっているか確認する。
4. 初回アクセス時にブラウザで OAuth 承認画面が開くので、対象 Figma アカウントでログインする。
5. プロジェクトのルートで Claude Code を起動し、「@figma <URL> をもとに src/components/Card.tsx を実装して」と指示する。

Desktop 版を使う場合は url の代わりに command / args 形式でローカルプロセスを起動する記法になる。詳細は Figma 公式ヘルプの各クライアント別ガイドを参照したい。

Claude Desktop の Connectors から接続する手順

CLI を使わないデザイナー・PM 向けには Claude Desktop の Connectors UI が最短。

1. Claude Desktop を開き、設定(Settings)→ Connectors タブに進む。
2. 一覧から「Figma」を探し、「Connect」ボタンを押す。
3. ブラウザが立ち上がるので、Figma アカウントでログインし、Claude に対する読み書き権限を承認する。
4. 接続完了後、チャット欄で Figma のファイル URL を貼って「このフレームを HTML で書き出して」と指示する。
5. うまくつながらない場合は、Figma 側のシート種別(Dev / Full)と、組織アカウントなら管理者の MCP 許可設定を確認する。

Connectors 版は対話的に使いやすい反面、Claude Code 版に比べて「複数ファイルを横断する自動化」が組みづらい。用途に応じて両方併用するチームが増えている。

デザイン→コード(Dev Mode)の使いどころ

Figma 公式ブログによれば、Dev Mode MCP は「変数 / コンポーネント / スタイルなどの設計システムメタデータ」「スクリーンショットによる高レベルなコンテキスト」「インタラクティビティ(React/Tailwind の実装例)」「テキスト・SVG・画像・レイヤー名」の 4 種類を Claude に渡す。これによりトークン使用量を抑えつつ、デザイントークンに沿ったコードが生成しやすくなる。

実務では、次のような使い方が伸びている。

1. デザインシステムが整っているプロダクトで、新規画面のスケルトンを自動生成する。
2. デザイナーが作った Prototype を、エンジニアが React Component 雛形として吸い出す。
3. 既存コンポーネントとの命名衝突を Claude に検出させ、整合を取る。

逆にデザイントークンが未整備の Figma ファイルでは、Claude が独自命名のクラスを大量生成しがちなので、先に Figma 側で Variables を整理してから連携するのが結果的に近道になる。

コード→デザイン(Code to Canvas)で書き戻す

Figma 公式ヘルプは「ライブ UI を編集可能なデザインレイヤーに変換」できるとしている。これがいわゆる Code to Canvas で、Claude が生成したコンポーネントを Figma のキャンバスに書き戻せる。

1. Claude Code で @figma を使い、新規コンポーネントを書く(例: <PricingCard />)。
2. Claude に「これを <file-url> のキャンバスにレイヤーとして書き戻して」と指示する。
3. Figma 上に Frame として生成されるので、デザイナーが手で微調整する。
4. 微調整後の Frame を再び Claude に渡し、コード側を更新する(往復)。

往復するうちにデザインとコードの差分が小さくなるため、デザインレビューと PR レビューが事実上 1 つの作業として回る。ベータ期間中は無料で試せるので、まず社内の単発プロジェクトで実験する価値が高い。

つまずきやすい点・制限事項

導入で詰まりやすいポイントを 4 つに整理した。

1. Desktop MCP は Dev seat / Full seat 必須。Starter seat や閲覧のみの権限では接続できない。
2. 巨大なフレームの一括変換は精度が落ちる。ページ単位ではなくセクション・コンポーネント単位で渡す。
3. Variables(デザイントークン)未整備の Figma は出力品質が低い。先に Figma 側を整える方が結果的に速い。
4. Code to Canvas は将来有料化予定。ベータ期間中の試用で本番運用判断する設計にしておく。

特に 1 番のシート要件は事故が多い。Remote 版なら無料プランでも動くため、まずは Remote で感触を掴み、安定運用したくなったら Desktop に切り替えるのが安全である。

まとめ

Claude × Figma 連携は、Figma 公式の Dev Mode MCP Server が登場したことで「実用フェーズ」に入った。Remote / Desktop / Code to Canvas の 3 経路を用途で使い分け、デザインとコードの往復を 1 つの作業に統合できる。まずは無料の Remote MCP を https://mcp.figma.com/mcp で接続し、既存プロジェクトの 1 コンポーネントを React に書き起こすところから試したい。デザインシステムが整っているチームほど効果が大きく、逆に未整備のチームは Variables を整えてから入るのが近道になる。

WROTE — claude-to-figma