Figma MCP Server
Figma MCPサーバーでClaude連携・デザインからのコード生成を自動化
npx figma-developer-mcp --figma-api-key=<YOUR_API_KEY> --stdio概要
Figma MCP Serverの設定方法と使い方。
FigmaのデザインファイルをMCP経由でClaudeが直接読み取り、デザインからのコード生成精度を大幅に向上させるMCPサーバー。
FigmaのURL（ノードIDを含む）を渡すだけで、レイアウト・スタイル・コンポーネント構造をClaudeが取得し、ピクセルパーフェクトなHTMLやReactコードの生成・デザインシステムの文書化・CSSクラスの抽出が可能。
ClaudeとFigmaのMCPサーバー連携により、デザインから実装までの工程を自動化できる。
CursorやWindsurfなどAIコーディングツール全般に対応。
設定方法はFigma APIキーを環境変数に設定するだけでシンプルに完結する。
料金・APIキー情報
料金
無料プランありAPIキー
🔑 必要🔑 APIキーの取得方法
- 1
https://www.figma.com/settings にアクセスしてFigmaアカウントにログイン
- 2
「Personal access tokens」セクションまでスクロール
- 3
「Generate new token」をクリックしてトークン名を入力
- 4
「Generate token」をクリックして表示されたトークンをコピー（再表示不可）
- 5
コピーしたPersonal Access Tokenを保存する（再表示不可のため必ず保存すること）
こんな使い方ができます
FigmaのURLをClaudeに渡してデザイン仕様をもとにReact/HTMLコードを自動生成できる
FigmaのコンポーネントツリーをClaudeに解析させてデザインシステムを文書化できる
デザインファイル内の色・フォント・スペーシングなどスタイル情報をClaudeに抽出させられる
Figmaのモックアップを読み取りCSSやTailwindクラスをClaudeに出力させられる
セットアップ手順
- 1
Figma（figma.com）にアクセスしてアカウントを作成・ログインする
- 2
右上のプロフィールアイコン→「Settings」→「Security」タブを選択する
- 3
「Personal access tokens」セクションで「Create a new token」をクリックしてトークンを発行・コピーする
- 4
ターミナルで以下のコマンドを実行してClaude Codeに追加する：claude mcp add figma-developer-mcp -e FIGMA_API_KEY=your-figma-api-key-here -- npx -y figma-developer-mcp --stdio
設定ファイル
コピー前に確認
Figmaアカウントおよびアクセストークン必須。FigmaのAccount Settings > Security からPersonal Access Tokenを発行する。
claude mcp add figma-developer-mcp -e FIGMA_API_KEY=your-figma-api-key-here -- npx -y figma-developer-mcp --stdio注意事項
読み取り専用アクセスのトークンで動作する。大きなFigmaファイルの場合はノードIDを指定して必要な部分のみ取得することを推奨。Figma公式のMCPサーバー（developers.figma.com）も別途存在する。