Claude CodeでFigmaを使うには？連携方法や活用法をやさしく解説

「Claude CodeでFigmaが使える」そんな情報を耳にし、実際どうなのか気になっている人も多いですよね。

ただ、連携することでどんなことができるのか、使い勝手が良いのかなど、詳細が気になっている人もいるはず。

そこでこの記事では、実際の導入手順をもとにClaude CodeでFigmaを使う方法を解説します。活用のコツも紹介するので、ぜひ参考にしてください。

Claude Codeの特徴をおさらいしておきたい人は、次の記事を参考にしてください。

Claude CodeでFigmaを使うと何ができる？

Claude CodeとFigmaを連携させると、デザインデータを読み取ってコードに変換する作業を自動化できます。デザイナーと開発者の間で発生しがちなギャップも大幅に縮まります。ここからは、連携で実現できる3つのことを説明します。

デザインデータの読み取り・コード生成

Claude CodeはFigmaのデザインデータを直接読み取り、HTMLやCSS、Reactなどのコードを生成できます。

Figmaには各コンポーネントの色・フォント・サイズ・余白などの情報が構造的に格納されています。Claude Codeはその構造を解析し、再現性の高いコードとして出力します。

たとえばFigmaで作成したボタンコンポーネントを指定すると、背景色や角丸、フォントサイズを反映したCSSとHTMLを自動生成します。手作業でのスタイル書き起こしが不要になります。

レイアウト・スタイルの自動反映

FigmaのAuto LayoutやConstraintsといったレスポンシブ設定も、コードへ反映できます。

Figmaのレイアウト情報にはflexboxやgridに相当する構造が含まれています。Claude Codeはその構造を読み解き、CSSのflexboxプロパティとして出力します。

カード一覧のレイアウトであれば、カラム数・間隔・整列方向まで含めたスタイルを自動で生成できます。手動でのCSS調整の工数を削減できます。

デザインと実装のギャップ解消

デザインと実装のズレを最小化できるのが、連携の最大のメリットです。

従来のワークフローでは、デザイナーが作ったFigmaデータを開発者が目視で確認しながら実装するため、色や余白のズレが生じやすい状況でした。Claude Codeを介することで、デザインデータを直接コードに変換するため、解釈のズレが発生しません。

修正サイクルが減り、デザインレビューにかかる時間を短縮できます。

Claude CodeからFigmaを使うべき？

Claude CodeとFigmaの連携は、すべての人に必要というわけではありません。自分の目的に合っているかどうかを確認したうえで導入を検討してください。ここからは、連携が向いている人と、準備として必要な考え方を説明します。

デザイン実装までしたい人におすすめ

Claude CodeとFigmaの連携は、デザインから実装まで一人でこなしたい人に向いています。

デザイナーがコーディングを担当する場面や、個人開発者がUIをゼロから作る場面では、ツール間の行き来が大きな手間になります。連携することで、Figmaで作ったデザインをそのままコードに変換できるため、工程をまとめて進められます。

一方、コードを書かずFigmaでのデザイン作業のみを行う人には、連携の恩恵は少ないです。自分がコードの出力を使う立場かどうかを判断基準にしてください。

デザインの構造整理は不可欠

Claude Codeの精度を上げるには、Figmaのデータを整理しておく必要があります。

レイヤー名が「Rectangle 1」や「Group 5」のままでは、Claude Codeが構造を正しく解釈できません。コンポーネント名や変数名を意味のある名称にしておくことが重要です。

たとえば「PrimaryButton」「CardContainer」のように、役割がわかる名称をつけておくと、生成されるコードの変数名や関数名にも反映されます。Figmaデータの整備が、コード品質に直結します。

Claude CodeでFigmaを使う2つの方法

Claude CodeとFigmaを連携する方法は、大きく2つあります。目的によって使い分けることが重要です。ここからは、それぞれの概要を説明します。

1.Figmaからコードを作る（MCP連携）

MCP（Model Context Protocol）連携は、FigmaのデータをClaude Codeに読み込ませ、コードを生成する方法です。

FigmaのデザインデータをMCPサーバー経由でClaude Codeに渡し、指定したコンポーネントや画面のコードを生成します。デザインから実装への流れが主な用途です。

2.コードをFigmaに送る（Claude Code to Figma）

Claude Code to Figmaは、Claude Codeが生成したコードやコンポーネントをFigmaに送り込む方法です。

コードで定義したデザインシステムをFigma上で視覚確認したい場合や、実装とデザインの整合性を保ちたい場合に活用します。方向性はMCP連携と逆で、実装からデザインへのフィードバックが目的です。

【方法1】MCP連携でClaude CodeからFigmaを使う手順

MCP連携は、Figmaの公式MCPサーバーを使ってFigmaデータをClaude Codeで読み取る方法です。Figmaの公式MCPサーバーを使うため、安定性と精度が高いのが特徴です。ここからは、連携手順とコード生成の方法、エラー時の対処法を説明します。

連携手順

MCP連携の手順は次のとおりです。

1. Figmaのアクセストークンを取得する

Figmaにログインし、「アカウント設定」→「Personal access tokens」からトークンを生成します。

2. MCPサーバーの設定を行う

Claude CodeのMCP設定は、ホームディレクトリの ~/.claude/mcp.json またはプロジェクトルートの .mcp.json に追加します。なお、claude_desktop_config.json はClaude Desktopアプリ用の設定ファイルであり、Claude Code（CLIツール）とは別物です。設定の形式は次のとおりです。

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/dev-mode-mcp-server", "--figma-api-key=YOUR_TOKEN"]
    }
  }
}

YOUR_TOKEN の部分を、取得したアクセストークンに置き換えてください。パッケージ名はFigma公式ドキュメントで最新情報を確認することをおすすめします。

3. Claude Codeを再起動する

設定を保存後、Claude Codeを再起動します。ツール一覧にFigma関連のツールが表示されれば連携完了です。

デザインからコード生成する方法

連携完了後、FigmaのファイルURLをClaude Codeに渡してコードを生成します。

FigmaのファイルまたはコンポーネントURLをコピーし、Claude Codeのチャットに次のように入力します。

以下のFigmaデザインをReactコンポーネントとして実装してください。
https://www.figma.com/file/xxxxxxxxxx/...

ノードIDを指定するとより精度が高まります。 FigmaのURLに含まれる node-id パラメーターを追加することで、特定のフレームやコンポーネントを対象に絞り込めます。

連携できない時の対処法

MCP連携でよくあるエラーと対処法は次のとおりです。

設定ファイルの保存場所はOSによって異なります。macOSでは ~/.claude/mcp.json、Windowsでは %USERPROFILE%\.claude\mcp.json が対象ファイルです。

【方法2】Claude Code to Figmaでの導入手順

Claude Code to Figmaは、FigmaのMCP連携機能を通じてClaude Codeと接続する方法です。Claude Codeが生成したコードをFigmaのビジュアルに変換できるのが特徴です。ここからは、導入手順と対処法を説明します。

活用手順

Claude Code to Figmaの導入と活用手順は次のとおりです。

1. Claude CodeでFigmaサーバーを選択する

Claude Codeのチャット内で /plugin コマンドを実行し、一覧からFigmaサーバーを選択します。

2. OAuth認証を行う

FigmaのリモートMCP経由で接続する場合、OAuth認証フローが起動します。ブラウザが開くので、Figmaアカウントで認証を完了してください。Anthropic のAPIキーを入力する画面は表示されません。

3. デスクトップMCP（WebSocket）で接続する場合

Figmaデスクトップアプリを使用する場合、WebSocketを介して接続します。設定の詳細はFigmaのヘルプセンターの公式ドキュメントで確認してください。

4. コードをFigmaに反映する

接続完了後、Claude Codeで生成したコードをFigmaキャンバスに送ると、UIとして視覚化されます。

うまくいかない時の対処法

よくある問題と対処法は次のとおりです。

コードが複雑なほど変換精度が下がるため、シンプルなコンポーネント単位で送ることを意識してください。

Claude CodeでFigmaを使いこなすコツ

連携を活用するには、いくつかの工夫が精度向上につながります。既存プロジェクトへの適用方法と、精度を上げるプロンプトの書き方を押さえておくことが重要です。

既存プロジェクトへのデザイン適用

既存のプロジェクトにFigmaのデザインを適用する際は、既存コードの構造をClaude Codeに伝えることが重要です。

新規コンポーネントをゼロから生成する場合と異なり、既存プロジェクトではファイル構成・命名規則・CSSの設計方針などがすでに決まっています。それらを無視したコードが生成されると、統一感が失われます。

次のようにプロジェクトの前提をプロンプトに含めると、整合性の取れたコードが生成されます。

既存プロジェクトはNext.js + Tailwind CSSで構成されています。
以下のFigmaデザインを、プロジェクトの命名規則に合わせてコンポーネント化してください。

既存のコンポーネントファイルをClaude Codeに読み込ませると、スタイルの一貫性がさらに高まります。

精度を上げるプロンプトの書き方

プロンプトの質が、生成されるコードの質に直結します。

曖昧な指示では、Claude Codeは汎用的なコードを生成します。具体的な制約・技術スタック・出力形式を明示することで、使いやすいコードが得られます。

精度を上げるプロンプトのポイントは次のとおりです。

「FigmaデザインをHTMLにして」という指示より、「FigmaデザインをReact + TypeScriptのコンポーネントとして実装し、propsで色を変えられるようにして」と書く方が、実用的なコードが得られます。

Claude CodeでFigmaを活用する際の注意点

連携を活用するうえで、事前に把握しておくべき注意点があります。生成されたコードをそのまま本番環境に使うのはリスクがあるため、必ずレビュープロセスを設けてください。

まず、生成コードのアクセシビリティ対応は不完全な場合があります。altテキストやARIAラベルが省略されるケースが多いため、人の目でチェックする習慣が必要です。

次に、Figmaのデザインが複雑なほど、コードの再現精度は下がります。シャドウや複雑なグラデーション、アニメーションは、手動での調整が必要になることがあります。

また、MCP連携ではFigmaのアクセストークンをローカルの設定ファイルに保存します。チーム共有のリポジトリにコミットしないよう、.gitignore への追加を忘れずに行ってください。

Claude Code to FigmaはFigmaのMCP連携機能を利用するため、FigmaやClaude Codeのアップデートによって動作が変わる可能性があります。定期的に公式ドキュメントを確認することをおすすめします。

Claude CodeでFigmaを使う際によく抱く疑問

連携を検討する中で出てくる疑問をまとめました。他ツールとの互換性やデザイン経験の必要性についてよく質問が寄せられます。

他のデザインツールとも連携できる？

Claude CodeはFigma専用ではありませんが、MCP連携の公式サポートはFigmaのみです。

Adobe XDやSketchなどの他ツールは、現時点でClaude Code向けの公式MCPサーバーを提供していません。そのため、デザインファイルのエクスポート機能でSVGやPNGに書き出し、Claude Codeに画像として渡す方法が現実的な代替手段です。

ただし画像経由の場合、構造情報（レイヤー・スタイル変数など）は読み取れないため、精度はFigma連携より低くなります。

デザイン経験がなくても活用できる？

デザイン経験がなくても、Claude CodeとFigmaの連携は活用できます。

ただし、Figmaの基本操作（コンポーネントの作成・レイヤー管理・Auto Layoutの設定）を理解していないと、精度の高いコードを引き出すデータを用意できません。Figmaの無料プランで基本操作を習得してから連携を試すことをおすすめします。

既存のFigmaテンプレートを活用する方法も有効です。コミュニティで公開されている整理済みのデザインファイルをそのまま使えば、自分でデザインを作る手間を省きながら連携を体験できます。

まとめ

Claude CodeとFigmaの連携で実現できることと、2つの方法をまとめます。

MCP連携はFigmaの公式サポートがあるため、安定性を重視する人に向いています。Claude Code to FigmaはOAuth認証で手軽に導入できるため、まず試してみたい人におすすめです。

デザインから実装までを一気通貫で進めたい人は、まずMCP連携から始めてみてください。

こちらの記事もおすすめ