Claude Code × Figma連携｜デザインからコード実装までAIで一気通貫する方法

Figma MCPサーバーの設定方法とClaude Codeとの連携手順。デザインファイルからコードを生成する実践的なワークフロー。

本記事は「Claude Code実践ガイド｜AI開発の生産性を高める運用設計」シリーズの一部です。

Figma MCPサーバーを使えば、Claude CodeがFigmaのデザインファイルを直接読み取り、プロジェクトの技術スタックに合わせたコードを生成できます。 デザイナーとエンジニアの間にあった「デザイン→コード変換」の手作業を、AIで大幅に効率化する手法を解説します。

この記事でわかること

FigmaのデザインファイルをClaude Codeが直接読み取り、プロジェクトの技術スタックに合ったコードを自動生成する方法を解説します。デザイナーとエンジニア間の「デザイン→コード変換」を大幅に効率化できます。

• Figma MCPサーバーの設定方法とClaude Codeとの連携手順 — FigmaMCPサーバーは、Figmaが公式に提供するMCP（ModelContextProtocol）対応のサーバーです。
• デザインファイルからコードを生成する実践的なワークフロー — デザイナーが完成したデザインのFigmaURLをClaudeCodeに共有します。
• Code Connectによるコンポーネントマッピングの活用 — CodeConnectは、Figmaコンポーネントとコードベースのコンポーネントを紐づける仕組みです。

対象読者: Figmaでデザインを受け取りコード実装を行うフロントエンドエンジニア、デザイン→実装の効率化を図りたいチーム

Figma MCPサーバーとは

Figma MCPサーバーは、Figmaが公式に提供するMCP（Model Context Protocol）対応のサーバーです。Claude CodeのMCP連携機能を通じて、Figmaのデザインデータにアクセスできます。

主な機能

セットアップ手順

1. Figma MCPサーバーの設定

Claude Codeの設定ファイルにFigma MCPサーバーを追加します。

// .claude/settings.json
{
  "mcpServers": {
    "figma": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token"
      }
    }
  }
}

2. FigmaパーソナルアクセストークンをFigma側で発行

Figmaの「Settings → Personal Access Tokens」からトークンを生成し、上記の設定に反映します。

3. 接続確認

claude
> /mcp
# Figmaサーバーの接続状態を確認

デザイン→コード変換のワークフロー

Step 1: FigmaのURLを共有

デザイナーが完成したデザインのFigma URLをClaude Codeに共有します。

figma.com/design/ABC123/MyProject?node-id=1:234

URLからfileKey（ABC123）とnodeId（1:234）が抽出されます。

Step 2: デザインコンテキストの取得

Claude Codeがget_design_contextを呼び出し、デザインの構造・スクリーンショット・コードヒントを取得します。

レスポンスには以下が含まれます。

• Code Connectスニペット: 既存のコードベースコンポーネントへのマッピング
• デザイントークン: カラー・フォント・スペーシングのCSS変数
• スクリーンショット: ビジュアルの参照画像
• アノテーション: デザイナーが残した注釈

Step 3: プロジェクトに適応したコード生成

取得したデザイン情報をもとに、Claude Codeがプロジェクトの技術スタック（React、Vue、Next.jsなど）に合わせたコードを生成します。

「このFigmaデザインをNext.js + Tailwind CSSで実装してください。
既存のコンポーネント（src/components/）を優先的に再利用してください。」

Code Connectの活用

Code Connectは、Figmaコンポーネントとコードベースのコンポーネントを紐づける仕組みです。

// figma.connect.ts
import figma from "@figma/code-connect";
import { Button } from "./src/components/Button";

figma.connect(Button, "figma-node-url", {
  props: {
    label: figma.string("Label"),
    variant: figma.enum("Variant", {
      Primary: "primary",
      Secondary: "secondary"
    })
  },
  example: (props) => <Button variant={props.variant}>{props.label}</Button>
});

Figma MCPの真価は、デザインデータを「画像」としてではなく「構造化された情報」としてClaude Codeに渡せる点にあります。デザイントークン、コンポーネント構造、アノテーションがすべて機械可読な形で取得されるため、プロジェクトの技術スタックに合った精度の高いコード生成が可能になります。

Code Connectが設定されていると、Claude Codeはデザインのコンポーネントを自動的にコードベースの既存コンポーネントにマッピングします。新規にコンポーネントを作るのではなく、プロジェクトにあるものを再利用する設計です。

実務での活用パターン

パターン1: LP・マーケティングページの高速実装

Figmaで作成されたLP（ランディングページ）のデザインを、Claude Codeで一気にHTML/CSSに変換します。HubSpot CMSのテンプレートとして実装する場合にも有効です。

パターン2: ダッシュボードUIの実装

経営ダッシュボードのFigmaモックアップから、Reactコンポーネントを生成します。チャートライブラリやデータテーブルの既存コンポーネントをCode Connectで紐づけておけば、デザインの意図に忠実な実装が可能です。

パターン3: デザインシステムの一貫性維持

search_design_systemツールでデザインシステム内のコンポーネントを検索し、実装時に正しいコンポーネントが使われているかを確認できます。

ビジネス活用の視点

デザインからコードへの変換は、従来「エンジニアの手作業」に依存していました。Figma MCPとClaude Codeの連携は、この工程を自動化し、デザイナーとエンジニアの連携コストを下げます。

少数精鋭チームでは、デザインと実装を兼務するメンバーも多いでしょう。AIがデザイン→コード変換の8割を処理し、人間が残り2割の微調整に集中する――このワークフローが、スモールチームの開発速度を飛躍的に高めます。AI活用のさらなる事例については、経営データBI支援やコンテンツマーケティング支援のページもご覧ください。

あわせて読みたい

• Claude Codeプラグイン入門｜エコシステムの活用と自作プラグインの作り方
• Claude Codeでデータ分析を自動化する｜CSV・JSON・APIデータの一気通貫ワークフロー
• Claude Codeのサンドボックス設定｜ファイルシステム・ネットワークの安全な制限方法

まとめ

本記事ではClaude CodeとFigmaを連携し、デザインからコード実装までをAIで一気通貫する方法を解説しました。

• Figma MCPサーバーを.claude/settings.jsonに設定することで、Claude CodeがFigmaのデザインデータ（構造・スクリーンショット・デザイントークン）を直接読み取れます
• デザイナーがFigma URLを共有するだけで、Claude Codeがプロジェクトの技術スタックに合わせたコードを自動生成するワークフローが構築できます
• Code Connectにより、Figmaコンポーネントとコードベースの既存コンポーネントを紐づけ、デザインシステムの一貫性を保った実装が可能です
• LP・マーケティングページの高速実装、ダッシュボードUIの生成、デザインシステムの一貫性維持が主な活用パターンです

Claude Codeの全コマンド一覧はClaude Codeチートシートをご覧ください。AI活用の全体像はAI活用完全ガイドで解説しています。

AI × デザイン実装の効率化についてのご相談は、StartLinkまでお気軽にお問い合わせください。Claude CodeやFigma連携を活用した開発ワークフローの構築を支援しています。

→ お問い合わせはこちら

よくある質問（FAQ）

Q1. Figma MCPサーバーを使うにはFigmaの有料プランが必要ですか？

Figma MCPサーバー自体はnpxで実行できるオープンソースツールですが、FigmaのパーソナルアクセストークンとAPIアクセスが必要です。Figmaの無料プランでもAPIアクセスは可能ですが、チームでの共同編集やデザインシステム機能をフル活用する場合はProfessional以上のプランが推奨されます。

Q2. Code Connectを設定するメリットは何ですか？

Code Connectを設定すると、FigmaのデザインコンポーネントとコードベースのReact/Vueコンポーネントが自動的にマッピングされます。これにより、Claude Codeはデザインを見たときに新規コンポーネントを作るのではなく、プロジェクトにある既存コンポーネントを再利用したコードを生成します。デザインシステムの一貫性を保ちながら実装速度を上げられる点が最大のメリットです。

Q3. Figma MCPで対応している技術スタックは何ですか？

Figma MCPサーバーが返すデザイン情報はReact + Tailwind CSSベースのコードヒントを含みますが、Claude Code側でプロジェクトの技術スタック（Vue、Next.js、Svelte、HubSpot CMSなど）に合わせて変換できます。プロンプトで技術スタックを明示し、既存コンポーネントの再利用を指示することで、プロジェクトに適したコードが生成されます。

Q4. Figma MCPサーバーのセキュリティ上の注意点はありますか？

FigmaパーソナルアクセストークンはFigmaアカウントの全ファイルにアクセスできるため、チームで共有せず個人ごとに発行してください。トークンは.claude/settings.jsonに直接書くのではなく、環境変数経由で渡すことが推奨されます。また、デザインデータがClaude APIに送信される点を踏まえ、NDA対象のクライアントデザインを扱う場合は事前に確認を取りましょう。

Q5. Figma MCPで生成されたコードの品質はどの程度ですか？

Code Connectが設定されている場合は、既存コンポーネントを再利用した高品質なコードが生成されます。未設定の場合でも、デザイントークン（カラー・フォント・スペーシング）に基づいた構造化されたコードが出力されますが、プロジェクト固有のコーディング規約や命名規則については、CLAUDE.mdやプロンプトで補足する必要があります。