Figma MCPでデザインを直接コード化する

Figma MCPでできること

Figma MCPをClaude Codeに接続すると、FigmaのデザインファイルをClaude Codeが直接読み込めるようになります。

デザインのコンポーネント構造をそのままコードに変換
カラー・フォント・スペーシングなどのデザイントークンを自動取得
コンポーネントの仕様（サイズ・padding・border等）を正確に把握
デザインと実装の乖離を検出

「このデザインをコードにして」と一言言うだけで、Figmaのデザインファイルを直接読みながらReactコンポーネントを生成してくれます。

※トークン: AIがテキストを処理する最小単位。日本語は1文字あたり約1〜2トークン。使用量に応じてAPIコストが変わる。※MCP: Model Context Protocol の略。Claude Codeと外部ツール（GitHub・Supabaseなど）を接続するための標準プロトコル。

セットアップ手順

1. Figma APIキーを取得する

Figmaにログイン → アカウント設定（右上のアバター → Settings）
「Personal access tokens」セクション
「Generate new token」
トークン名（例: claude-code）を入力して生成
トークンをコピー（一度しか表示されません）

2. settings.json に設定を追加する

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/code-connect@latest", "mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-access-token-here"
      }
    }
  }
}

APIキーは環境変数で管理するほうが安全です：

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/code-connect@latest", "mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}

# .bashrc または .zshrc に追加
export FIGMA_ACCESS_TOKEN="your-token-here"

3. Claude Code を再起動する

設定後、Claude Codeを再起動してMCPサーバーが接続されることを確認します。

claude
# /mcp でMCPサーバーの接続状態を確認
/mcp

※APIキー: APIを利用するための認証情報。外部に漏れると不正利用されるため厳重に管理が必要。※環境変数: APIキーやデータベース接続情報など、コードに直接書きたくない値をOSやサーバーに設定する仕組み。※API: Application Programming Interface の略。外部サービスとプログラム間でデータをやりとりするための接続口。

実際の使用例

FigmaのURLからコンポーネントを生成する

「このFigmaのURLのコンポーネントをReactで実装してください。
https://www.figma.com/file/xxxxxxxx/design?node-id=xxx

使用技術:
- React + TypeScript
- Tailwind CSS
- 既存のshadcn/uiコンポーネントがあれば使ってOK」

Claudeの動作:

Figma MCPを使ってURLからデザインデータを取得
コンポーネントの構造・スタイルを解析
TypeScript + Tailwind CSSでコンポーネントを生成

デザイントークンを自動取得する

「このFigmaファイルのカラーパレットとタイポグラフィを
Tailwind CSSの設定ファイルに変換してください。
https://www.figma.com/file/xxxxxxxx/design-tokens」

デザインと実装の乖離チェック

「このFigmaコンポーネントと既存のReactコンポーネント（src/components/Button.tsx）を
比較して、デザインと実装の差異を教えてください。
Figma URL: https://www.figma.com/file/xxxxxxxx/components?node-id=xxx」

※TypeScript: JavaScriptに型定義を追加した言語。型チェックによりバグを事前に発見しやすくなる。

注意点・制限事項

コンポーネントの複雑さによって精度が変わる

シンプルなボタンやカードは非常に正確に変換されますが、複雑なインタラクション（ホバーステート・アニメーション）は追加の指示が必要です。

アニメーションは取得できない

Figmaのプロトタイプに設定されたアニメーション情報は取得できません。アニメーションは別途指示する必要があります。

フォントの利用権

Figmaで使用されているフォントが、コードプロジェクトでも使えるライセンスか確認してください。

レスポンシブ設定

Figmaのレスポンシブ制約（Constraints）は取得できますが、CSSに完全に変換されるわけではありません。レスポンシブの細かい調整は手動で行ってください。