Figma MCP × Claude Code｜デスクトップから指示するだけでFigmaにデザインが自動生成される

Figma MCPとは

Figma MCPは、Claude CodeとFigmaを直接つなぐ連携機能です。デスクトップのターミナルからテキストで指示するだけで、Figma上にデザインが自動で生成されます。デザインの知識がなくても、言葉でレイアウトやコンポーネントを作れる時代になりました。

できること

テキスト指示でデザイン生成

「ヘッダーとヒーローセクションのあるランディングページを作って」と入力するだけで、Claude CodeがFigmaのAPIを通じてフレーム・テキスト・図形を自動配置します。

既存デザインの読み取りと編集

Figma上の既存コンポーネントを読み取り、「このボタンの色を緑に変えて」「フォントサイズを16pxにして」といった指示で直接編集できます。

デザインからコードへの変換

生成したデザインをそのままHTML・CSSやReactコンポーネントに変換することも可能です。デザインと実装のギャップをゼロにできます。

セットアップ手順

1. Figma MCPサーバーをインストール

npm install -g @figma/mcp-server

2. Claude CodeのMCP設定に追加

.claude/mcp_settings.json にFigma MCPサーバーの設定を追加します。

{
  "mcpServers": {
    "figma": {
      "command": "figma-mcp-server",
      "env": {
        "FIGMA_ACCESS_TOKEN": "あなたのFigmaアクセストークン"
      }
    }
  }
}

3. FigmaのアクセストークンをFigmaで取得

Figma → アカウント設定 → アクセストークン → 新しいトークンを生成してコピーします。

4. Claude Codeを再起動して接続確認

Claude Codeを再起動するとFigma MCPが有効になります。

実際の使い方

Claude Codeのチャット欄に日本語で指示するだけです。

• 「Figmaに新しいフレームを作ってシンプルなログインフォームを配置して」
• 「ヘッダーのナビゲーションに項目を3つ追加して」
• 「このデザインのカラーパレットをグリーン系に統一して」

この連携が変えること

デザイナーとエンジニアの間にあった壁がなくなります。アイデアを言葉にするだけでビジュアルに変換され、そのままコードにもなる。Claude CodeとFigma MCPの組み合わせは、個人開発者やスタートアップにとって特に強力なツールです。

まとめ

Figma MCP × Claude Codeの連携は、デザインワークフローを根本から変える仕組みです。テキストで指示 → Figmaにデザイン生成 → コードに変換、という流れが一気通貫で実現します。