Claude Code×Figma連携｜デザインをコード変換する実践ガイド

Claude CodeとFigma MCPサーバーを連携すると、デザインファイルの情報を構造化データとして読み取り、プロジェクトの技術スタックに合わせたコードを直接生成できます。デザインからコードへの変換を、AIで一気通貫の仕組みに変えることが本記事の核心です。

「デザイナーからFigmaのリンクをもらっても、結局は自分の目で見てCSSの値を1つずつ読み取っている」「コンポーネントの対応関係が担当者の頭の中にしかなく、担当が変わるたびに聞き直している」「デザインの修正が入るたびに、コード側の反映を手作業でやり直している」——こうした声は、Figmaとコーディングツールを行き来しながら実装を進めているチームでよく聞かれます。

Figma MCPサーバーとは、FigmaがModel Context Protocol（MCP）に対応する形で公式に提供しているサーバーで、Claude CodeがFigmaのデザインデータを構造化された情報として直接取得できるようにする仕組みです。画像として見るのではなく、コンポーネント構造やデザイントークンをそのままコードに変換できる点が特徴です。

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

この記事でわかること

本セクションでは、Figma MCPサーバーの仕組みから実際の設定手順、そして自社のチームに合わせた運用設計までを順を追って解説します。デザイン→コード変換を初めて仕組み化する方にも、既に一部導入しているが運用を見直したい方にも役立つ内容です。

• Figma MCPサーバーの役割 — FigmaのデザインデータをClaude Codeが構造化情報として取得できる仕組みと、主要なツールの機能を整理します。
• セットアップと接続確認の手順 — 設定ファイルへの追記からトークン発行、接続確認までの流れを具体的に解説します。
• デザイン→コード変換のワークフロー — FigmaのURLを共有してからコードが生成されるまでの3ステップを、実際のやり取りのイメージとともに紹介します。
• Code Connectによる仕組み化 — コンポーネントの再利用を属人化させず、チームの資産として運用する考え方を解説します。
• 導入時の注意点と向かないケース — セキュリティ上の留意点や、AIに任せるべきでない判断について正直にまとめます。

Figmaでデザインを受け取りコード実装を行うフロントエンドエンジニアや、デザイン→実装の効率化を図りたいチームに向けて書いています。最後まで読むと、自社のチームでFigma MCPサーバーを導入し、スモールスタートで運用を広げていくための具体的な手順がわかるようになります。

Figma MCPサーバーとは何か

Figma MCPサーバーは、Claude CodeのMCP連携機能を通じてFigmaのデザインデータにアクセスするための公式サーバーです。デザイン→コード変換の全体フローの中では、最初の「デザイン情報を取り込む入口」にあたる部分で、この後のコード生成・レビュー・実装というプロセス全体の精度を左右します。

MCP（Model Context Protocol）とFigma連携の位置づけ

MCPは、AIモデルが外部のツールやデータソースに接続するための共通規格です。Claude CodeのMCP連携機能の一つとしてFigma MCPサーバーを組み込むことで、Claude Codeは他のMCPサーバー（データベース、社内ドキュメント等）と同じ枠組みでFigmaのデザインにアクセスできるようになります。デザインツールとコーディングツールを別々に往復する必要がなくなる点が、このサーバーを導入する最大の理由です。

取得できる情報の種類

Figma MCPサーバーには複数のツールが用意されており、それぞれ異なる情報を取得します。

これらのツールは単独で使うのではなく、実装の局面ごとに組み合わせて使うのが基本です。例えば実装の初期段階ではget_metadataでファイル全体の構造をざっくり把握し、実際にコードを書く段階でget_design_contextを呼び出して詳細を取得する、といった使い分けをすることで、毎回すべての情報を取りにいくよりも効率的にやり取りを進められます。

「画像」ではなく「構造化データ」を渡す意味

Figma MCPの価値は、デザインデータを画像としてではなく構造化された情報としてClaude Codeに渡せる点にあります。デザイントークン（カラー・フォント・スペーシング）、コンポーネントの階層構造、デザイナーが残したアノテーションがすべて機械可読な形で取得されるため、Claude Codeは「見た目を推測してコードを書く」のではなく、「定義された値をそのままコードに反映する」ことができます。これが、手作業でのコード化に比べて再現性の高い実装につながる理由です。

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"
      }
    }
  }
}

Figmaパーソナルアクセストークンの発行と管理

Figmaの「Settings → Personal Access Tokens」からトークンを生成し、上記の設定に反映します。トークンはFigmaアカウントがアクセスできる全ファイルに対して有効になるため、チームで1つのトークンを使い回すのではなく、メンバーごとに個別発行することをお勧めします。設定ファイルに直接トークンを書き込むのではなく、環境変数経由で渡す運用にしておくと、誤ってリポジトリにコミットしてしまうリスクも避けられます。この考え方は、HubSpotでプロパティの編集権限を管理者のみに絞るような、無用な変更を仕組みで防ぐ設計思想と共通しています。

接続確認とトラブルシューティング

設定が完了したら、Claude Code上で接続状態を確認します。

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

接続がうまくいかない場合は、トークンの有効期限やスコープ、npxで取得するパッケージのバージョンを確認するのが基本的な切り分け方法です。特に、トークンを再発行したのに古い値が環境変数に残っているケースや、npxがキャッシュした古いバージョンのパッケージを参照しているケースは見落としやすいため、まずこの2点を疑うと原因の特定が早まります。

デザインからコードへの変換ワークフロー

ここからが、Figma MCPサーバーを導入する本来の目的です。デザイナーがFigmaのURLを渡すだけで、Claude Codeがデザイン情報の取得からコード生成までを一気通貫で進める流れを見ていきます。

Step1 FigmaのURLを共有

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

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

URLからfileKey（ABC123）とnodeId（1:234）が抽出され、以降の取得処理に使われます。

Step2 デザインコンテキストの取得

Claude Codeがget_design_contextを呼び出し、デザインの構造・スクリーンショット・コードヒントを取得します。レスポンスには、既存のコードベースコンポーネントへのマッピング（Code Connectスニペット）、カラー・フォント・スペーシングのCSS変数（デザイントークン）、ビジュアルの参照画像、デザイナーが残した注釈が含まれます。

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

取得したデザイン情報をもとに、Claude Codeがプロジェクトの技術スタック（React、Vue、Next.jsなど）に合わせたコードを生成します。構造の把握と実装方針の決定には推論力の高いモデル、コード生成には高速なモデルを割り当てる/model opusplanのハイブリッド運用が有効です。

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

この3ステップを通じて重要なのは、デザイナー側は「URLを渡す」だけで作業が完結し、実装側は「取得→生成」を一つの流れとして扱える点です。デザインとコードを別々のツールで管理し続ける限り、この間には人の手による転記や確認作業が挟まりやすくなりますが、MCPで直接接続することでその手間を仕組みごと減らせます。

Code Connectによるコンポーネントマッピングの仕組み化

デザイン→コード変換を一度きりの作業で終わらせず、チームの資産として続けられる仕組みにするための機能がCode Connectです。特定のメンバーだけが「このFigmaコンポーネントはこのReactコンポーネントに対応する」と知っている状態は属人化のリスクになるため、その対応関係自体をコードとして残しておく発想が重要になります。

Code Connectの設定方法

FigmaコンポーネントとコードベースのコンポーネントをCode Connectで紐づけます。

// 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>
});

属人化を防ぐコンポーネント管理

Code Connectが設定されていると、Claude Codeはデザインのコンポーネントを自動的にコードベースの既存コンポーネントにマッピングします。新しく参加したメンバーやAIが実装を担当する場合でも、「どのFigmaコンポーネントがどのコードに対応するか」を毎回人に確認する必要がなくなり、新規にコンポーネントを作るのではなくプロジェクトにあるものを再利用する設計が自然に維持されます。これは、個人の記憶や経験に頼らず仕組みで一貫性を担保する考え方で、SFAで必須入力プロパティを設定して新人でも正しい運用ができるようにする発想と根っこは同じです。

デザインシステムの一貫性チェック

search_design_systemツールを使うと、デザインシステム内のコンポーネントを検索し、実装時に正しいコンポーネントが使われているかを確認できます。デザインシステムの規模が大きくなるほど、この検索機能によるチェックの価値が増していきます。

実務での活用パターンと自社に合わせたカスタマイズ

Figma MCPの使い方は、チームの体制やプロジェクトの種類によって最適な形が変わります。ここでは代表的な3つの活用パターンを紹介しますが、企業様によって最適な形は異なりますので、まずは自社のプロジェクトに近いものから試してみることをお勧めします。

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

Figmaで作成されたLP（ランディングページ）のデザインを、Claude Codeで一気にHTML/CSSに変換するパターンです。HubSpotのContent HubでCMSテンプレートとして実装する場合にも有効で、マーケティング施策のスピードを上げたいチームに向いています。

ダッシュボードUIの実装

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

チームの技術スタックに合わせた調整

Figma MCPが返すデザイン情報自体はReact + Tailwind CSSベースのヒントを含みますが、Claude Code側でプロジェクトの技術スタック（Vue、Next.js、Svelte、HubSpot CMSなど）に合わせて変換する指示を加えることで、自社の開発環境に沿ったコードを生成できます。

導入時の注意点と向かないケース

便利な仕組みである一方、正直にお伝えすると制約もあります。導入前にこの点を把握しておくと、運用でつまずきにくくなります。

セキュリティ上の注意点

Figmaパーソナルアクセストークンはアカウントの全ファイルにアクセスできるため、チームで共有せず個人ごとに発行するのが基本です。また、デザインデータがClaude APIに送信される点を踏まえ、NDA対象のクライアントデザインを扱う場合は、事前に取り扱いのルールを確認しておく必要があります。

AIに任せるべきこと・人間が判断すべきこと

デザイン→コード変換においても、AIと人間の役割分担を意識しておくと運用がぶれにくくなります。

向かないケース

デザインの意図がFigma上に十分に表現されていない場合や、アニメーション仕様・インタラクションの詳細が別ドキュメントに分散している場合は、生成されたコードをそのまま採用するのではなく、人による確認と調整が前提になります。ここを省略すると、見た目は近くても挙動が異なる実装になりやすい点は留意しておきたいところです。デザインカンプが未完成のまま実装を進めたいケースや、デザイナー不在でラフな指示だけをもとに実装したいケースも、構造化データを十分に取得できないため、Figma MCPの強みを活かしにくいケースだといえます。

スモールスタートで始める運用設計

Figma MCPとCode Connectは、最初からチーム全体・全プロジェクトに広げようとすると、Code Connectの整備コストが先に立ってしまいがちです。まずは影響範囲の小さいプロジェクトから始めて、効果を確認しながら段階的に広げていく進め方をお勧めします。

まず1つのプロジェクトで試す

最初は既存コンポーネントが比較的整理されている1つのプロジェクト、あるいはLPのような独立性の高いページから試すと、Code Connectの整備範囲を絞りながら効果を検証しやすくなります。

Code Connectを段階的に拡張する

最初のプロジェクトで得られた知見をもとに、よく使うコンポーネントから順にCode Connectのマッピングを増やしていきます。すべてのコンポーネントを一度に紐づける必要はなく、実装頻度の高いものから優先順位をつけるのが現実的です。

チーム全体への展開判断

トライアルで効果を確認できたら、他のプロジェクトやメンバーへ展開範囲を広げます。デザインのURLを渡すだけで実装が進む運用は、移動中にスマホから指示を出しておく使い方とも相性が良く、その手順はClaude Code Dispatchの使い方で解説しています。

上の画面は、StartLinkが提供するAIエージェントがWebサイト上で音声・テキストのやり取りからCRMデータの作成・検索を会話で完結させ、移動中のハンズフリー操作にも対応している様子です。対象領域はCRM操作でFigma MCPとは異なりますが、AIに指示を出す場所を選ばない運用を目指す発想は共通しています。

AI活用のさらなる事例については、経営データBI支援やコンテンツマーケティング支援のページもご覧ください。

よくある質問

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

Figma MCPサーバー自体はnpxで実行できるツールで、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パーソナルアクセストークンはアカウントの全ファイルにアクセスできるため、チームで共有せず個人ごとに発行することをお勧めします。トークンは設定ファイルに直接書くのではなく環境変数経由で渡し、NDA対象のクライアントデザインを扱う場合はデータ送信について事前に確認しておくと安心です。

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

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

まとめ

Figma MCPサーバーを使うと、Claude CodeがFigmaのデザインデータを構造化情報として直接取得し、プロジェクトの技術スタックに合わせたコードを生成できます。Code Connectでコンポーネントの対応関係を仕組み化しておけば、特定のメンバーの記憶に頼らず、チーム全体でデザインシステムの一貫性を保った実装が続けられます。一方で、トークン管理やNDA対象データの扱い、複雑なインタラクションの調整など、人が判断すべき部分も残ります。

最初の一歩としては、次の3ステップから始めることをお勧めします。

1. .claude/settings.jsonにFigma MCPサーバーを追加し、個人用のトークンで接続を確認する
2. 影響範囲の小さいLPやページを1つ選び、Figma URLを渡してコード生成を試す
3. よく使うコンポーネントからCode Connectのマッピングを整備し、範囲を段階的に広げる

CRMを活用した業務効率化やAIとの連携に関するご相談は、CRM特化型コンサルティングのHubSpotゴールドパートナーのStartLinkまでお気軽にお問い合わせください。

あわせて読みたい

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