Figma MCP × Claude Code実践ガイド——デザインからフロントエンド実装を爆速で自動化する

はじめに

「デザインカンプを見ながらCSSを書く」——フロントエンド開発者なら誰もが経験する作業です。Figmaからカラーコード、フォントサイズ、余白の値を1つずつ拾い、レスポンシブ対応を考え、コンポーネントを組み立てていく。正確さが求められる割に、創造性を発揮できる場面は少ない地道な工程です。

2026年2月、この状況を一変させるツールが揃いました。Figma公式MCP Serverです。

MCPとはModel Context Protocol——AIエージェントが外部ツールと連携するための標準プロトコルです。Figmaが公式にMCP Serverを提供したことで、Claude CodeなどのAIエージェントがFigmaのデザインデータに直接アクセスし、コードを自動生成できるようになりました。

実際に、あるWebサイトリニューアルプロジェクトでは1ページあたり8時間かかっていた作業が20分に短縮されたという報告もあります。

この記事を読み終わると、以下ができるようになります：

• Figma MCP ServerをClaude Codeにセットアップできる
• デザイントークン（カラー・タイポグラフィ・スペーシング）をTailwind CSS設定に変換できる
• Figmaフレームから直接Reactコンポーネントを生成できる
• デザイン→実装の一連のワークフローを構築できる

Figma MCP Serverの全体像

何ができるのか

Figma MCP Serverは、AIエージェントに以下の機能を提供します。

アーキテクチャ

ポイントは、Figma公式がホストするリモートMCP Serverであること。ローカルでサーバーを立てる必要がなく、https://mcp.figma.com/mcp に接続するだけで使えます。

2つの接続方式

本記事では、セットアップが簡単なリモートサーバー方式を使います。

事前準備

必要なもの

Step 1: Claude CodeにFigma MCP Serverを追加する

ターミナルで以下のコマンドを実行します。

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

プロジェクト単位で設定する場合は -s project を付けます。

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

全プロジェクト共通で使いたい場合は --scope user を指定します。

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

初回実行時にブラウザが開き、FigmaのOAuth認証画面が表示されます。「Allow」をクリックして接続を許可してください。

Step 2: 接続の確認

Claude Codeを起動し、Figma MCPが使えることを確認します。

claude

Claude Code内で以下のように聞いてみましょう。

Figma MCPのツール一覧を表示して

get_design_context、get_variable_defs、get_node_image などのツールが表示されれば成功です。

ハンズオン1: デザイントークンの抽出

最初のハンズオンでは、Figmaで定義されたデザイントークン（カラー、タイポグラフィ、スペーシング）をTailwind CSSの設定ファイルに変換します。

Figma側の準備

デザインシステムとして、Figma Variablesにカラーやスペーシングの変数が定義されているファイルを用意してください。たとえば以下のような構成です。

Claude Codeで実行する

Figmaファイルのカラー変数が定義されたレイヤーのリンクをコピーし、以下のようにClaude Codeに指示します。

このFigmaファイルからカラー、タイポグラフィ、スペーシングのデザイントークンを抽出し、
Tailwind CSS v4のCSS-first configuration形式に変換してください。

Figmaリンク: https://www.figma.com/design/xxxxx/Design-System?node-id=xxx

Claude Codeは get_variable_defs ツールを使い、Figma Variablesの定義をCSS変数形式で取得します。

出力例

/* app/globals.css */
@import "tailwindcss";

@theme {
  --color-primary: #2563EB;
  --color-secondary: #7C3AED;
  --color-text-primary: #1E293B;
  --color-text-secondary: #64748B;
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F8FAFC;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --font-size-heading-1: 32px;
  --font-size-heading-2: 24px;
  --font-size-body: 16px;
  --font-size-caption: 12px;
}

これだけで、FigmaとTailwind CSSの値が同期されます。 デザイナーがFigmaのVariablesを更新したら、同じ手順でCSSを再生成するだけです。

ハンズオン2: コンポーネントの自動生成

次に、Figmaのコンポーネントフレームから直接Reactコンポーネントを生成します。

架空プロジェクト: 「TaskFlow」

ここでは架空のタスク管理アプリ「TaskFlow」を使って説明します。Figmaに以下のようなカードコンポーネントがデザインされているとします。

• タスク名（テキスト）
• ステータスバッジ（進行中 / 完了 / 未着手）
• 担当者アバター
• 期日

Claude Codeで実行する

Figma上で対象のコンポーネントフレームを選択し、リンクをコピーします。

このFigmaフレームを元に、Reactコンポーネント（TypeScript + Tailwind CSS）を実装してください。
src/components/TaskCard.tsx に配置してください。

Figmaリンク: https://www.figma.com/design/xxxxx/TaskFlow?node-id=xxx

注意点:
- デザインのカラーはglobals.cssのCSS変数を使う
- レスポンシブ対応を含める
- Variantsがある場合はpropsで切り替えられるようにする

Claude Codeは以下のツールを順番に実行します。

生成されるコード例

// src/components/TaskCard.tsx
import type { FC } from 'react';

interface TaskCardProps {
  title: string;
  status: 'todo' | 'in_progress' | 'done';
  assignee: {
    name: string;
    avatarUrl: string;
  };
  dueDate: string;
}

const statusConfig = {
  todo: { label: '未着手', className: 'bg-gray-100 text-gray-600' },
  in_progress: { label: '進行中', className: 'bg-blue-100 text-blue-600' },
  done: { label: '完了', className: 'bg-green-100 text-green-600' },
} as const;

export const TaskCard: FC<TaskCardProps> = ({
  title,
  status,
  assignee,
  dueDate,
}) => {
  const { label, className } = statusConfig[status];

  return (
    <div className="rounded-xl border border-gray-200 bg-white p-md shadow-sm
                    hover:shadow-md transition-shadow">
      <div className="flex items-start justify-between gap-sm">
        <h3 className="text-body font-semibold text-text-primary">
          {title}
        </h3>
        <span className={`rounded-full px-sm py-xs text-caption font-medium ${className}`}>
          {label}
        </span>
      </div>
      <div className="mt-md flex items-center justify-between">
        <div className="flex items-center gap-xs">
          <img
            src={assignee.avatarUrl}
            alt={assignee.name}
            className="h-6 w-6 rounded-full"
          />
          <span className="text-caption text-text-secondary">
            {assignee.name}
          </span>
        </div>
        <time className="text-caption text-text-secondary">{dueDate}</time>
      </div>
    </div>
  );
};

ポイント: p-md、gap-sm などのクラス名が、ハンズオン1で定義したデザイントークンのCSS変数に対応しています。Figmaの値とコードが自動的に一致するため、「Figmaでは16pxなのにコードでは14pxになっている」といったズレが起きません。

ハンズオン3: ページ全体の実装

コンポーネント単体ではなく、ページ全体をFigmaから実装するケースを見ていきます。

大きなフレームを分割して処理する

ページ全体のフレームを一度にMCPへ送ると、コンテキストが大きすぎてエラーになる場合があります。セクション単位で分割するのがコツです。

効率的なプロンプトの書き方

ページ実装では、以下の情報をClaude Codeに渡すと精度が上がります。

以下のFigmaフレームからページを実装してください。
セクションごとに分割してコンポーネントを作成し、
最後にページファイルで組み合わせてください。

■ ページ: TaskFlowのダッシュボード画面
■ Figmaリンク: https://www.figma.com/design/xxxxx/TaskFlow?node-id=xxx

■ セクション構成:
1. ヘッダー（ロゴ + ナビゲーション + ユーザーアイコン）
2. サマリーカード（タスク数の統計）
3. タスクリスト（TaskCardコンポーネントを使う）
4. サイドバー（フィルター + カレンダー）

■ 制約:
- Next.js App Router (Server Components)
- 既存のデザイントークン（globals.css）を使う
- モバイル対応: sm/md/lgのブレークポイント
- TaskCardコンポーネントは既に実装済み（src/components/TaskCard.tsx）

get_design_context と get_node_image を併用する

実装精度を上げるための重要なテクニックがあります。Claude Codeに対して、デザインコンテキスト（構造データ）とスクリーンショット（ビジュアル）の両方を取得するよう明示的に指示しましょう。

Figmaフレームの情報を取得する際は、
get_design_contextとget_node_imageの両方を使って、
構造データとビジュアルを照合した上でコードを生成してください。

構造データだけでは「余白の微妙なニュアンス」が伝わらず、スクリーンショットだけでは「正確なCSS値」が拾えません。両方を組み合わせることで、デザインの再現度が大きく向上します。

実務ワークフロー: 大量ページを効率的にさばく

ここまでのハンズオンは1ページの話でしたが、実務では10ページ、20ページを一気にこなす必要があります。効率的なワークフローを紹介します。

ページリストを事前に準備する

まず、対象ページとFigmaのnode-idを一覧にまとめます。

2フェーズアプローチ

効率的に進めるには、モック作成フェーズとアプリ組み込みフェーズを分けるのがおすすめです。

フェーズ1（モック作成） では、デザインの細かい調整をこの段階で潰します。フェーズ2でアプリに組み込んだ後に「余白が違う」「色が微妙に異なる」と手戻りするのを防ぐためです。

フェーズ2（アプリ組み込み） では、確定したモックをReactコンポーネント化し、データバインディングやルーティングを追加します。

時間短縮の内訳

実際にこのワークフローを適用した場合の時間比較です。

Tips・注意点

Figma側のデザインが重要

Figma MCP の出力品質は、Figmaデザインの構造品質に比例します。以下を意識してデザインを作りましょう。

よくあるトラブルと対処法

Claude Code側のベストプラクティス

• 既存コンポーネントを伝える: 「TaskCardは実装済み」のように既存資産を明示する
• 制約を明確にする: 「Server Componentsで」「Tailwindのみ」など技術制約を書く
• 1セクションずつ確認する: 全ページを一気に生成せず、セクション単位で確認しながら進める

まとめ

Figma MCP × Claude Codeの組み合わせは、デザインから実装への変換作業を根本的に変えます。

要点の整理:

1. Figma MCP Serverは公式のリモートサーバー——claude mcp add コマンド1つで接続できる
2. デザイントークンの自動変換——Figma VariablesからTailwind CSS設定を直接生成
3. コンポーネントの自動生成——get_design_context + get_node_image の併用で再現度を上げる
4. 大量ページは2フェーズアプローチ——モック作成→アプリ組み込みの順で手戻りを防ぐ

次のアクション:

• Figma MCP ServerをClaude Codeに追加する（claude mcp add --transport http figma https://mcp.figma.com/mcp）
• 小さなコンポーネント1つで試してみる
• デザインシステムのFigma VariablesをTailwind CSSに変換してみる

AIが実装を担える時代だからこそ、デザインの質がアウトプットの質を決める時代でもあります。Figmaでの設計力が、開発スピードを大きく左右するようになりました。