デザインとコードの境界線が薄くなっています。
Figmaが公式に提供するMCPサーバーとClaude Codeを接続すると、FigmaのデザインデータをAIが読み取り、Reactコンポーネントなどのコードを直接生成できます。本記事では、この2ツールの仕組みと、実務で機能させるための条件を解説します。
この記事でわかること：
- Figma MCPサーバーとは何か、Claude Codeとどう連携するか
- FigmaのデザインからReactコンポーネントを生成する手順の概要
- 実務で精度を上げるために必要な準備と注意点
- このワークフローが効果を発揮しやすいプロジェクトの条件
Figma MCPサーバーとは
MCP（Model Context Protocol）は、AIエージェントが外部のツールやデータと通信するためのオープン標準です。Figmaはこの規格に準拠したMCPサーバーを公式に提供しており、Claude CodeやCursor、VS Codeなどの開発ツールからFigmaのデータに直接アクセスできます。
Figma MCPサーバーを介すことで、AIエージェントはコンポーネント・変数・レイアウト情報を開発環境の文脈に取り込めます。生成されるコードが「見た目に似ているだけ」ではなく、デザインシステムの構造と整合したものになります。
サーバーには2種類あります。リモートサーバーはFigmaがホストしており、ブラウザ版Figmaでも利用できます。デスクトップサーバーはFigmaデスクトップアプリ経由で動作し、DevシートまたはFullシートが必要な有料プラン向けです。リモートサーバーは現在ベータ期間中は無料ですが、将来的には使用量ベースの有料機能に移行する予定です。
Claude Codeとの連携でできること
Claude CodeにFigma MCPを接続すると、主に次の操作が可能になります。
フレームからコードを生成する: Figmaで任意のフレームを選択し、そのURLをClaude Codeに渡して「このデザインを実装してください」と指示します。AIがFigmaのデザインデータを参照しながら、コードを生成します。
デザインコンテキストの取り込み: コンポーネント名・変数・オートレイアウトの情報を開発環境に直接取り込めます。既存のデザインシステムを持つプロジェクトで特に有効です。
Figmaキャンバスへの書き込み（リモートサーバーのみ）: エージェントがFigma上のフレームやコンポーネントを作成・編集できます。コードからFigmaへの逆方向の連携にも対応しています。
Dev ModeとCode Connectを合わせて使うと、生成されたコードが既存のコンポーネントライブラリと対応するようになり、出力の一貫性がさらに上がります。
実際の現場での検証結果
あるデザイン会社が実際のプロジェクトでこの構成を検証しました。Figmaで設計したモジュール群をReactコンポーネント化するタスクで、ジュニア開発者への依頼の代わりにClaude Codeを使ったケースです。
生成されたコードの品質は印象的でした。ファイル構造は整理されており、コードはクリーンで、デザインの再現精度も高かったといいます。一方で、ジュニア開発者と同様に反復と修正が必要な箇所もあり、CMSとの統合などより複雑な工程はシニア開発者が担いました（参考）。
ただし、この水準に達するまでに約1日かけてClaudeにプロジェクト文脈・デザインの意図・ビルド規約を伝える作業が必要でした。同じ時間はジュニア開発者をオンボーディングするときにも必要です。「Claudeは入力された情報の質に依存する」というのが、この検証を通じて明らかになった最大の制約です。
精度を上げるために必要な準備
Figmaファイルを整理する
Figmaファイルの構成が不統一だと、AIは正確に読み取れません。フレームの命名規則・コンポーネント構造・アノテーションを統一したフォーマットで揃えることが前提です。検証を行った設計者は「ファイルが雑だとClaudeは失敗する。その失敗はプロジェクト全体のコストになる」と述べています（参考）。
markdownファイルを作り込む
Claude Codeが参照するmarkdownファイルには、Figmaファイルをどう読むか・コードをどう構築するかについての詳細な記述が必要です。デザインをエンジニア視点で読み解く知識と、Reactでの実装判断を書き記せるスキルの両方が求められます。
意思決定の速さを確保する
Claude CodeとFigma MCPが最も効果を発揮するのは、デザインと要件が固まった状態で使うときです。Zoom会議を繰り返しながら仕様を変え続けるような進め方では、修正が積み重なるだけです。関係者が少なく、意思決定が速いプロジェクトほど成果が出やすくなります。
このワークフローが向くプロジェクト
Figma MCPとClaude Codeの組み合わせが効果を発揮しやすい条件は次のとおりです。デザインシステムが整備されていて、Figmaファイルをコンポーネントベースで丁寧にアノテーションしているチームであること。FigmaとReact実装の両方を深く理解しているメンバーが一人でもいること。デザインが実装前に固まっており、意思決定が速いこと。
逆に、組織内の合意形成プロセスが長く、Figmaファイルが整理されていないチームには向きません。このワークフローに必要なのは「デザインに厳密なデザイナー」と「Claudeに適切な文脈を渡せるクリエイティブ・テクノロジスト」の2役です。どちらかが欠けると、ツールの組み合わせは期待した結果を出しません。
セットアップは公式ドキュメントを参照してください。リモートサーバーはベータ期間中は無料で利用できます。