Figma MCP Server
FigmaデザインデータをClaudeが直接読み取りコード化できるMCPサーバー
npx figma-developer-mcp --figma-api-key=<YOUR_API_KEY> --stdio概要
FigmaのデザインファイルをMCP経由でClaudeが直接読み取り、デザインからのコード生成を大幅に精度向上させるMCPサーバー。
FigmaのURL（ノードIDを含む）を渡すだけで、レイアウト情報・スタイル・コンポーネント構造をAIが取得し、ピクセルパーフェクトなHTMLやReactコードを生成できる。
デザイナーと開発者の連携を自動化し、デザインの仕様確認やコンポーネント抽出にも活用できる。
CursorやWindsurfなどAIコーディングツール全般に対応している。
設定方法はconfig JSONをClaude DesktopまたはClaude Codeの設定ファイルに追記するだけで完了する。
料金・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）も別途存在する。