Claude CodeとFigmaを連携する方法をお探しですね。

広告

FigmaのデザインをAIが自動でコード化！Claude CodeとMCPで開発が劇的にラクになる方法

Figmaで作ったデザインをコードに落とし込む作業って、正直めちゃくちゃ大変ですよね。

色のコードを一つひとつ確認したり、余白を定規で測ったり、画像を書き出したり…。

地味な作業の繰り返しで、気づけば何時間も経っていた、なんてことも珍しくありません。

でも実は、FigmaのMCP（Model Context Protocol）という仕組みと、Anthropic社が開発したAI「Claude Code」を組み合わせると、こうした面倒な作業がほぼ自動化できちゃうんです。

AIがデザインデータを直接読み取って、そのままコードに変換してくれる――そんな未来みたいな開発スタイルが、もう実現できるようになっています。

この記事では、Claude CodeとFigma MCPを連携させる具体的な手順から、AIに正しくデザインを理解してもらうためのFigmaファイルの作り方、さらには実際に使えるプロンプトのコツまで、わかりやすく解説していきます。

1. Claude CodeとFigma MCPを連携すると何が嬉しいの?

まず「Figma MCP」って何?という話からですが、これはAIがFigmaのデザインデータに安全にアクセスできるようにするための仕組みです。

これまでAIにデザインを理解してもらうには、画面をスクショして画像として読み込ませるか、CSSの設定を手打ちでテキストにして伝える必要がありました。

でもFigma MCPを使えば、AIはFigmaのAPIを通じて、レイヤーの構造やAuto Layoutの設定、正確なカラーコード、フォント情報、画像のパスまで、デザインの裏側にあるデータをまるごと取得できるんです。

このFigma MCPを、ターミナル上で動くAIコーディングアシスタント「Claude Code」と連携させると、開発環境から離れることなく、スムーズにUI実装ができるようになります。

たとえば、プロジェクトのフォルダでClaude Codeを起動して、「このFigmaのURLの画面をReactコンポーネントにして」って指示するだけ。

すると、デザインの意図をちゃんと汲み取ったコードが、あっという間に生成されます。

数字を写し間違えることもなくなるし、実装のスピードと正確さが段違いに上がる――これが最大のメリットです。

しかも、すべてのコードを1ファイルにまとめるんじゃなくて、プロジェクトのルールに合わせて柔軟にファイルを分けることもできます。

たとえば、色やフォントを定義するテーマファイル、共通で使うボタンなどのUIパーツ、それらを組み合わせた画面全体のレイアウトファイル…といった具合に、メンテナンスしやすい構成をAIに作らせることも可能です。

デザインとコードの橋渡しをAIに任せることで、開発者はもっと複雑なロジックやユーザー体験の改善に集中できるようになります。

2. 実際にどうやって連携するの?設定手順を詳しく解説

Claude CodeとFigma MCPを連携させる環境構築は、思ったより簡単です。

順番に見ていきましょう。

ステップ1：Figmaのアクセストークンをゲットする

まず、FigmaのAPIにアクセスするための「Personal Access Token（PAT）」を取得します。

Figmaのデスクトップアプリかブラウザ版の設定画面を開いて、トークン生成のメニューから新しいトークンを発行してください。

このトークンは超重要な情報なので、コードに直接書き込むのはNG。

OSの環境変数として安全に保存しておくのがおすすめです。

ステップ2：Claude CodeにFigma MCPサーバーを追加する

次に、Claude Code側でFigma MCPサーバーを登録します。

ターミナルでClaude Codeを起動して、専用のコマンドでFigmaのリモートMCPサーバーを追加しましょう。

登録が完了すると、Claude Codeの設定ファイルにFigmaのエンドポイントURLが書き込まれて、AIがFigmaと通信できる状態になります。

初回は、ターミナル上で連携コマンドを実行するとブラウザが開いて、Figmaアカウントへのアクセス許可を求める画面が表示されます。

ここで同意すれば、接続完了です。

ステップ3：対象のFigmaデザインのURLを取得する

連携ができたら、AIに読み込ませたいデザインの場所を正確に伝えるためのURLを取得します。

Figma上でコード化したいフレームやコンポーネントを選択して、リンクをコピーしてください。

すると、URLの末尾に固有の識別子が含まれたリンクがクリップボードに保存されます。

この識別子があることで、AIはファイル全体の中から特定の画面やパーツだけをピンポイントで解析できるようになるんです。

設定手順まとめ

* **Figmaトークンの取得と保存：** Figmaの設定画面からトークンを発行して、ターミナルの環境変数（`.zshrc`など）に保存
* **MCPサーバーの追加と認証：** Claude Codeでサーバー追加コマンドを実行し、ブラウザでFigmaのアクセス認証を完了
* **対象URLの取得：** Figmaで実装したいレイヤーを選択してリンクをコピーし、AIへの指示に使えるよう準備

3. AIに正しく理解してもらうためのFigmaデザインの作り方

Claude CodeとFigma MCPの連携ができても、Figma側のデザインデータがぐちゃぐちゃだと、AIは期待通りのコードを出力してくれません。

AIは見た目の画像じゃなくて、裏側のレイヤー構造やプロパティの数値を読み取ってコードを生成します。

だから、見た目だけ整えた図形の寄せ集めみたいなデータだと、余白が固定値になっちゃったり、変な構造のコンポーネントが出力されたりしてしまうんです。

Auto Layoutをしっかり使おう

高精度なコードを生成するために一番大事なのは、Figmaのデザインを「MCPフレンドリー」な構造にすることです。

具体的には、すべての要素にAuto Layout（自動レイアウト）をきちんと適用して、要素間の余白や整列のルールを明確にしておく必要があります。

Figma上でAuto Layoutが正しく組まれていれば、AIはそれをFlexboxみたいなレイアウトシステムとして正確に解釈して、レスポンシブ対応しやすいコードに変換してくれます。

デザインシステムのルールを決めておこう

さらに、デザインシステムとしてのルールをFigma上に確立しておくことも超重要です。

AIの読み取り精度をグッと上げるための、Figmaデータ作成時のポイントをまとめました。

デザイナーとエンジニアの間でこれらのルールを事前に共有して、守ることがプロジェクト成功のカギになります。

* **レイヤー名をちゃんとつける：** レイヤー名がコードのクラス名や変数名のヒントになるので、「Rectangle 1」みたいなデフォルト名じゃなくて、機能を表す名前に変更しよう
* **カラーとフォントをスタイル登録する：** プロジェクトで使う色やフォントサイズは、バラバラの値じゃなくて「Primary Color」「Heading 1」みたいなFigmaスタイルとして登録して、コンポーネントに適用する
* **不要な非表示レイヤーを削除する：** 昔の試作で作った非表示レイヤーや、いらないグループが残ってると、AIが誤認して余計なコードを生成しちゃうので、事前にキレイにしておこう

4. 実際に使える!Claude Codeへの指示の出し方

Figmaのデザインデータが整ったら、いよいよClaude Codeでコードを生成します。

ここで大事になるのが、AIに指示を出すときの「プロンプト」の質です。

単に「このFigma URLをコードにして」って指示するだけだと、AIは一般的なHTML/CSSとか、推測ベースのライブラリ構成でコードを書いちゃう可能性があります。

実際のプロジェクトで使える「本番レベル」のコードを得るには、プロジェクト固有の開発ルールを詳しく伝える必要があるんです。

プロンプトに含めるべき情報

まず、使うフレームワーク（React、Vue、Flutterなど）と、それに合わせた状態管理ライブラリやルーティングのルールを明記しましょう。

また、画像アセットの扱い方も重要な指示項目です。

「SVG画像はベクター形式のコンポーネントに変換して、PNG画像は指定のフォルダに書き出して」みたいに、アセット管理のルールをはっきり指定すると、手作業で画像を配置する手間が省けます。

さらに、Figmaのデータにない数値をAIが勝手に推測して補完しないように、「不明な点は推測せず、Figma MCPが取得したデータだけを使って」という制約を設けるのも、デザインとのズレを防ぐ有効な手段です。

実際に使えるプロンプトの構成要素

実務でそのまま応用できる、Claude Codeへの指示の出し方をまとめました。

プロジェクトの規模や技術スタックに合わせて、これらの条件をカスタマイズして使ってみてください。

* **前提条件と使用技術の指定：** 使うフレームワーク、言語（TypeScriptなど）、スタイリング手法（Tailwind CSSやCSS Modulesなど）を正確に指定する
* **ファイル分割とアーキテクチャの指示：** デザイン全体を1ファイルにまとめるんじゃなくて、色やフォントを定義するテーマファイル、共通UIパーツ、メイン画面みたいに分割して実装するよう指定する
* **厳密なデータ準拠の制約：** Figma上で定義されているカラースタイルやフォントの名前をそのまま変数名として使って、未定義のスタイルを勝手に作らないように強く指示する

まとめ

こんな感じで、Figma MCPを活用したコード生成は、単なる自動化ツールを超えて、デザインと実装の境界線をなめらかにしてくれる強力な手段です。

デザイナーが論理的なデザイン構造を作って、エンジニアが的確なプロンプトでAIを導けば、手戻りの少ない高速な開発サイクルが実現できます。

ぜひあなたのプロジェクトにも、Claude CodeとFigma MCPの連携を取り入れて、新しい開発体験を実感してみてください!

広告