Claude CodeとFigmaを連携させる方法【2026年最新】：Figma MCPの設定から実践的なデザイン→コード変換まで完全解説

室谷

今回はClaude CodeとFigmaの連携について話しましょう。.AI（ドットエーアイ）のコミュニティでも「FigmaのデザインをそのままClaude Codeでコードにできるの？」という質問が増えてきてて・・・

テキトー教師

ですね。実は2025年からFigmaが公式のMCPサーバーを出していて、Claude Codeとの連携がかなり本格的になってきているんですよ。

コミュニティのメンバーさんからも「試してみたら一気にデザイン→コードの速度が上がった」という声をよく聞きます。

室谷

そう、ここが本質なんですよ。AIコーディングツールってずっと「コードの世界で完結してしまう」という弱点があったじゃないですか。

プロダクト開発の現実は「デザイン↔コード」の往復なのに、AIはコードしか触れなかった。Figma MCPはその壁を正面から取り除こうとしてるんですよね・・・

テキトー教師

AIによって「デザイナーとエンジニアの職能境界が溶ける」ということですね。Figma上でデザインした内容が、Claude Codeに直接渡って、コードになる。

スケッチさえ描ければ、コードまで持っていけるという世界が来た。

室谷

まさに。MYUUUでも最近フロントエンド開発にFigma MCPを使い始めてるんですが、デザインカンプを見ながらClaude Codeに「このフレームを実装して」と伝えるだけで、かなり精度の高いコードが出てきます。

前はスクリーンショットを貼るか、手でデザインを説明するかしかなかったので・・・

テキトー教師

講座でも最近「Claude CodeでFigmaのデザインをそのまま実装できる」というデモをやると、受講生さんの反応が全然違うんですよ。特にデザイン経験はあるけどコーディングは苦手、という方たちには刺さりますね。

室谷

この記事では、Claude CodeとFigmaを連携させるための方法を全部解説していきます。設定手順から実際の使い方、よくあるエラーの対処法まで一通り触れますね。

FigmaとClaude Codeを連携させる2つの方法

Figma MCPとClaude Codeの連携フロー（Framelink経由）

室谷

まず整理しておきたいのが、Claude CodeとFigmaを繋ぐ方法が実は2種類あるということです。

テキトー教師

Figma公式のMCPサーバーと、「Framelink（フレームリンク）」というサードパーティのMCPサーバーですね。どちらもMCP（Model Context Protocol）を使ってClaude CodeにFigmaのデザインデータを渡すという仕組みは同じです。

室谷

ざっくりまとめるとこうなります。

方法	名称	種別	特徴
Figma公式	Figma Dev Mode MCP	Remote HTTP MCP	Figmaのデスクトップアプリが必要（ベータ版）。Dev・Fullシートが必要
サードパーティ	Framelink MCP（figma-developer-mcp）	stdio MCP	npmで動作。Figma APIキーが必要。スター数14,000超えの実績あり

テキトー教師

2026年4月時点では、Figma公式のMCPはまだベータ版で、「Dev Mode」が使えるプラン（有料のDev・Fullシート）が必要です。一方のFramelinkはFigmaの個人アクセストークンさえあれば無料プランでも動かせます。

室谷

Anthropicの公式ドキュメントには、Figmaのリモートサーバー（https://mcp.figma.com/mcp）が掲載されていますが、Framelink経由の方が現時点では情報が多くて、コミュニティでも実績があります。どちらを使うかは目的次第ですね。

テキトー教師

まずはFramelinkから試すのがおすすめです。設定がシンプルで、エラーが出てもトラブルシューティングの情報が多いので。

Framelink MCPの設定方法（Claude Code用）

Framelink公式サイトのクイックスタートページ（framelink.ai/docs/quickstartより）

室谷

じゃあFramelinkの設定手順を見ていきましょう。まずFigmaのAPIキーの取得から。

テキトー教師

ここでつまずく人が多いんですよね。APIキーの権限設定を間違えると後で403エラーが出るので、最初からちゃんとやっておく必要があります。

ステップ1: FigmaのAPIキーを取得する

テキトー教師

Figmaのパーソナルアクセストークンの取得手順はこうです。

Figmaのホームページで、左上のプロフィールアイコンをクリック
「Settings（設定）」を選択
「Security（セキュリティ）」タブを開く
「Personal access tokens（パーソナルアクセストークン）」のセクションで「Generate new token」をクリック
トークン名を入力し、権限を設定する
「Generate token」をクリック

室谷

権限の設定が重要ですね。「File content」と「Dev resources」の2つに「Read」アクセスを付けるのを忘れずに。

テキトー教師

ここを見落とすと、MCPサーバーがFigmaファイルにアクセスしようとしたときに「403 Forbidden」エラーが出ます。コミュニティのメンバーさんでも「設定したのに動かない」という場合、ほとんどがこの権限の設定ミスなんですよね。

ステップ2: Claude CodeにFramelink MCPを追加する

室谷

APIキーが取得できたら、Claude CodeにFramelinkのMCPサーバーを追加します。コマンドはこれだけです。

claude mcp add --transport stdio figma-developer-mcp -- npx -y figma-developer-mcp --figma-api-key=YOUR_FIGMA_API_KEY --stdio

テキトー教師

YOUR_FIGMA_API_KEY の部分を先ほど取得したトークンに置き換えるだけです。

室谷

もう一つの方法として、.mcp.jsonファイルに設定を書く方法もあります。プロジェクトごとに設定を管理したい場合や、チームで共有する場合はこちらが便利です。

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_FIGMA_API_KEY", "--stdio"]
    }
  }
}

テキトー教師

Windowsを使っている場合は少し書き方が違います。

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR_FIGMA_API_KEY", "--stdio"]
    }
  }
}

室谷

APIキーを設定ファイルに直接書くのが気になる場合は、環境変数で渡す方法もあります。FIGMA_API_KEYという環境変数に設定しておけば、コマンドやJSONファイルにキーを書かなくて済みます。

Figma公式MCPサーバーの設定方法

AnthropicのClaude Code公式ドキュメントに掲載されているFigma MCPのリスト（docs.anthropic.comより）

テキトー教師

Figmaが公式に出しているMCPサーバーは、Anthropicの公式ドキュメントにも掲載されている方法で、コマンド1行で追加できます。

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

室谷

こちらはリモートHTTP方式なので、ローカルでnpxを動かす必要がなく、コマンドが圧倒的にシンプルです。ただしFigmaのDev・Fullシート（有料プラン）が必要で、デスクトップアプリが必要という制約があります。

テキトー教師

Dev Modeが使えるプランでFigmaを日常的に使っているチームであれば、公式の方が認証周りがシンプルで管理しやすいと思います。一方で、個人で試してみたい、まず動かしてみたいという場合はFramelinkから始めるのが現実的ですね。

室谷

Anthropic公式ドキュメントには「Generate diagrams and better code from Figma context（Figmaのコンテキストから図解やより良いコードを生成）」という説明が書かれています。つまり、デザインをコードに変換するだけでなく、Figmaの構造から図解を生成するようなこともできるということ・・・

テキトー教師

それは面白い活用法ですね。ドキュメントの図を自動でFigmaからClaude Codeに引き込んで使うというのは、エンジニアリングのドキュメント整備でもかなり使えそうです。

Claude CodeでFigmaデザインを実装する実際の手順

Framelink MCPを通じてClaude CodeがFigmaデータを取得してコードを生成している画面（framelink.ai/docs/quickstartより）

室谷

設定ができたら、いよいよ実際に使う話をしましょう。Figma MCPを使うとき、大事なのは「ファイル全体を渡さない」ことなんですよ。

テキトー教師

そうなんですよ。Frameworkドキュメントにも書かれていますが、複雑なデザインはAIにとって情報過多になりすぎる。

セクション単位で渡すのが基本です。

室谷

具体的な流れはこうなります。

Figmaで実装したいフレームやグループを右クリック
「Copy/Paste as」→「Copy link to selection」を選択
Claude Codeのチャットにそのリンクを貼り付ける
「このFigmaフレームを実装してください」と伝える

テキトー教師

Claude Codeはリンクを見ると自動的にget_figma_dataというMCPのツールを呼び出して、Figmaからデザインデータを取得します。あとはそのデータを元にコードを生成してくれます。

室谷

MYUUUでやってみて気づいたのは、フレームの命名がちゃんとされているほどコードの品質が上がるということ。「Frame 123」みたいなデフォルト名だとコードの変数名も意味不明になるし、「LoginButton」とか「HeroSection」みたいに意図のある名前をつけておくと、生成されるコードも読みやすくなるんですよね。

テキトー教師

Figmaの「Auto layout（オートレイアウト）」を使っているかどうかも大事です。Frameworkのドキュメントに「まだ絶対位置指定の要素の扱いが得意じゃない」と書いてあって・・・オートレイアウトで設計されたコンポーネントほどMCPが正確に解析できるんですよね。

室谷

「Figma AIを使ってフレームの名前を自動生成させる」というTipsもあって、これ使うとかなり楽になります。Figmaにはレイヤー名を自動でつける機能があるので、名前づけの手間を省いた上でMCPの精度も上げられます。

テキトー教師

あとはプロンプトに「Tailwindを使ってください」「Reactコンポーネントで実装してください」みたいなコンテキストを追加すると、より目的に合ったコードが出てきます。Claude Codeに「何のフレームワークを使っているか」を教えるのが重要です。

Figma MCP活用のベストプラクティス

室谷

ここからはFigma MCPを実際に使いこなすためのTipsを話していきましょう。設定はできたけど「なんか精度が低い」という場合にためしてほしいことがあります。

テキトー教師

一番多い悩みは「コードは出てきたけど、デザインと全然違う」というやつですよね。これは情報の渡し方の問題がほとんどです。

室谷

そうです。Frameworkのドキュメントにも書いてある話なんですが、FigmaのAPIから返ってくるデータは圧縮されるとはいえ、ファイル全体を渡すと情報が多すぎてAIが混乱する。

だから「1フレーム＝1プロンプト」くらいの粒度で作業を分けるのが基本です。

テキトー教師

それに加えて、Figmaのコンポーネントとデザインシステムを活用しているチームは、MCP経由でコンポーネントのメタデータも渡せるんですよ。コンポーネント名、変数名、スタイル情報がそのままClaude Codeに届くので、既存のデザインシステムに準拠したコードが生成されやすくなります。

室谷

「Code Connect」という機能もあって、これはFigmaのコンポーネントとコードベースのコンポーネントを紐づける機能なんですが、これを設定しておくと「このFigmaコンポーネントはコードではこのファイルのコンポーネントに対応する」という情報もMCPで渡せるようになる。デザインとコードの一貫性を保つ上では非常に強力です。

テキトー教師

整理すると、Figma MCPの精度を上げるための主なポイントはこういう感じです。

フレームやグループに意味のある名前をつける（FigmaのAI自動命名機能が便利）
オートレイアウトを使う（絶対位置指定より解析精度が高い）
一度に渡すのは1セクションずつ（ファイル全体は渡さない）
プロンプトに使用フレームワーク（React、Tailwindなど）を明示する
コードベースの参考ファイルも一緒に渡す（「このファイルのスタイルに合わせて」）

室谷

5番目のポイントが意外と見落としがちなんですよね。Figmaのデザインを渡すだけじゃなくて、「うちのコードはこういうスタイルで書いてます」という既存ファイルも一緒に渡すと、生成コードがプロジェクトの文体に合ってくる。

テキトー教師

まさにそこです。コンテキストの提供が命なんですよ。

Figmaのデータだけじゃなくて、コードの文脈も合わせて渡す。そうするとAIが「このプロジェクトのFigmaデザインを、このプロジェクトのコードスタイルで実装する」という精度の高い仕事をしてくれます。

よくあるエラーと解決方法

室谷

エラーの話もしておきましょう。Figma MCPはエラーのパターンがいくつか決まっているので、事前に知っておくと詰まらずに済みます。

テキトー教師

「設定したのに動かない」という相談が来るとき、原因はだいたい3つのどれかです。

403 Forbiddenエラー

テキトー教師

「Error fetching file: {"status":403,"err":"Forbidden"}」というエラーが出た場合、Figmaファイルへのアクセス権限の問題です。

室谷

対処方法はこうです。まずAPIキーの権限を確認する。

「File content」と「Dev resources」両方にRead権限がついているか。次に、アクセスしようとしているFigmaファイルが、APIキーのアカウントからアクセスできるか確認する。

他のチームのファイルにアクセスしようとすると403になることがあります。

テキトー教師

ファイルの共有設定も確認ポイントです。FigmaのShareボタンから、APIキーに紐づくアカウントがViewerとして追加されているか、「Viewers can copy, share, and export」がオンになっているかも確認してください。

429 Too Many Requestsエラー

室谷

Figma APIのレート制限に引っかかるエラーです。Figmaの無料プランは月6回程度しかAPIリクエストができないんですよね・・・

テキトー教師

これは実は多くの人がつまずくポイントです。「なんで急に動かなくなったの？」という場合の原因がこれだったりします。

解決方法は有料プランへのアップグレードです。Devシート以上のプランでは10リクエスト/分からスタートします。

室谷

もう一つの原因として、ファイルのオーナーが無料プランの場合も無料プランのレート制限が適用されます。この場合はファイルを自分の有料ワークスペースにコピーしてから使うと解決します。

npxのモジュールが見つからないエラー

テキトー教師

「Cannot find module 'xxxxx'」というエラーは、インストールのキャッシュが壊れているときに出ます。

npx clear-npx-cache

室谷

このコマンドでnpxのキャッシュをクリアしてから、Claude Codeを再起動すれば大抵直ります。

テキトー教師

Mac/Linuxでnvmを使ってNode.jsのバージョン管理をしている場合、Claude DesktopやClaude Code（デスクトップ版）が違うバージョンのNodeを参照してしまうことがあって・・・その場合は設定ファイルのcommandをnpxから専用スクリプトに変える方法で解決できます。詳細はを参照してください。

Figma MCPが変えるデザイン→コードのワークフロー

室谷

少し大局的な話をすると、Figma MCPが普及することで「デザイナーとエンジニアの仕事の分担」が大きく変わると思っています。

テキトー教師

Figmaのブログで、開発者アドボケイトのJake Albaugh氏が「デザイン→コードのプロセスはただの視覚情報の変換じゃない」という話をしていて、これがすごく本質的なんですよ。デザインの意図、パターン、システムを理解した上でコードに落とす必要がある、と。

室谷

そうなんですよね。今まではデザインの「見た目」はAIに渡せても、「意図」は渡せなかった。

Figmaのコンポーネント情報、変数情報、アノテーション（注記）、Code Connect情報・・・こういう「デザインの意図を記述した情報」がMCP経由でClaude Codeに渡せるようになることで、精度が桁違いに上がる。

テキトー教師

AIコーディングツールの価値は「コードを書く速さ」じゃなくて「正しいコードを書く精度」なんですよ。速さだけなら昔からコード生成ツールはあった。

でも「このデザインの意図を正確に理解してコードに落とす」という精度が上がると、レビューの工数が激減します。

室谷

MYUUUのエンジニアで試してみた感触では、シンプルなUIコンポーネントなら1回のプロンプトでほぼそのまま使えるコードが出てくるようになってきた。前はどんなにうまくスクリーンショットを渡しても、微妙にズレてて「ここもう少し右」「フォントが違う」みたいなやりとりが3往復くらい必要でしたから・・・

テキトー教師

実装の精度が上がる分、エンジニアはより「ロジック面の設計」に集中できるようになりますね。UIの見た目をなぞる作業に時間を使わなくてよくなる、ということです。

室谷

このツイートでも書きましたが、Figma MCPが意味するのは「どの職能の壁が消えたか」なんですよね。デザイナーがコードを書けなくても、スケッチさえ描けばAIがコードまで持っていく。

エンジニアがデザインできなくても、AIがFigma上で整えてくれる。この壁が1つ消えたということが大きい。

テキトー教師

受講生さんに「デザインができないからフロント開発が怖い」という方が結構いるんですよ。でも「Figmaで見た目を設計さえすれば、コードはClaude Codeが書いてくれる」という世界になると、その壁がかなり下がります。

Figma MCPの現在の制約と今後の展望

室谷

正直なところ、2026年4月時点での制約も話しておかないといけないですね。

テキトー教師

Figma公式のMCPはまだベータ版で、デスクトップアプリが必要という制約があります。ブラウザ版のFigmaだけでは公式MCPは動きません。

Figma側も認識していて、「リモートサーバー対応（デスクトップアプリ不要）」が開発中という情報がFigmaのブログに出ています。

室谷

Frameworkの方は今はHTTP/SSEモードとstdioモードがあって、v0.8.0でHTTPトランスポートへの切り替えが進んでいます。GitHubのスター数も14,000超えでアクティブに開発が続いています。

テキトー教師

課題としては、やはり「複雑なデザインの精度」ですね。単純なレイアウトはかなりうまくいくんですが、インタラクション（状態変化）やアニメーションの実装はまだ苦手です。

あとはデザインシステムの深い部分（コンポーネントのバリアント間の関係など）は、まだ人間が補完する必要があります。

室谷

でも方向性はすごく正しいと思ってて・・・Figmaが「Code Connect」でコンポーネントとコードを紐づける機能に投資してきたこと、MCPサーバーを公式に出したこと、これは「Figmaがただのデザインツールからデザイン×コード統合プラットフォームに変わっていく」という意思表示だと思います。

テキトー教師

教育の観点で言うと、「まずFigmaでデザインを学びながら、Claude Codeでそれをコードに変換する練習をする」という学習ルートが生まれてきていて、これがデザイナーとエンジニア両方の学習速度を上げているように感じます。

まとめ：Claude CodeとFigmaを連携させる3つのポイント

室谷

今回のまとめをしましょう。Claude Code × Figma MCPの連携、要点はこの3つです。

テキトー教師

整理するとこうなります。

方法は2つ: Figma公式MCPとFramelink MCPのどちらかを選ぶ。個人ユースはFramelink（figma-developer-mcp）、チームはFigma公式MCPも選択肢
精度を上げる鍵はFigmaの設計: フレームに意味のある名前をつける、オートレイアウトを使う、コンポーネントを整理する
コンテキストが命: FigmaのリンクだけじゃなくてTailwindやReactなどフレームワーク情報、既存コードの参考ファイルも合わせて渡す

室谷

デザイン→コードの壁がどんどん下がっているのは間違いないので、今のうちに試してみることをおすすめします。一度設定してしまえば「FigmaのリンクをClaude Codeに貼るだけ」という超シンプルなワークフローになりますから。

テキトー教師

最初は「本当にこれだけで動くの？」という気持ちになるんですが、動いた瞬間の衝撃がすごいんですよw コンポーネントのコードがぴったり出てきたとき、受講生さんの反応を見ているのが一番楽しい瞬間です。

よくある質問

Claude CodeのFigma MCPは無料で使えますか？

テキトー教師

Framelinkを使う場合、MCPサーバー自体は無料です。ただしFigmaのAPIを使うため、Figmaのレート制限が適用されます。

無料プランではAPIリクエスト数が非常に少なく（月6回程度）、実用的に使うにはFigmaの有料プランが必要です。

Figma MCPとClaude Codeの組み合わせで日本語テキストが文字化けします

室谷

これはZennでも報告例が出ているエラーです。Figma上の日本語テキストがMCP経由で渡ると空白になったり文字化けしたりするケースがあるようで・・・現時点での回避策は、英語テキストで実装してから後で日本語化するか、フォントを明示してプロンプトを組み立てる方法です。

CursorやVS CodeでもFigma MCPは使えますか？

テキトー教師

はい、使えます。Frameworkのドキュメントには、Cursor、VS Code（Copilot）、Windsurf、Clineなど30以上のMCPクライアントへの設定手順が載っています。

Claude Code専用というわけではなく、MCP対応のエディタであればほぼ全て対応しています。

Claude CodeとFigmaを連携させる方法【2026年最新】：Figma MCPの設定から実践的なデザイン→コード変換まで完全解説