Figma MCP Server

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<YOUR_FIGMA_API_KEY>"],
      "env": {}
    }
  }
}

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<YOUR_FIGMA_API_KEY>"],
      "env": {}
    }
  }
}

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<YOUR_FIGMA_API_KEY>"],
      "env": {}
    }
  }
}

概要

Figma MCP Server（figma-developer-mcp）は、FigmaのデザインファイルをAIクライアントから直接参照できるコミュニティ製MCPサーバーです。FigmaのAPIを通じてデザインの構造・コンポーネント・スタイル定義を取得し、AIがコード生成や設計説明に活用できます。

「このFigmaデザインをReactコンポーネントに変換して」「このボタンのスタイル（色・サイズ・フォント）を全て教えて」—エンジニアがFigmaとIDEを行き来する手間をなくし、AIがデザインとコードの橋渡しを担います。デザイナーとエンジニアの認識齟齬による手戻りの削減にも効果的です。

導入手順

前提条件

• Node.js 18以上
• FigmaアカウントとPersonal Access Token（無料アカウントでも発行可能）

ステップ

1. Figmaにログインし、右上のプロフィールアイコン→「Settings」を開く
2. 「Personal access tokens」セクションで新しいトークンを生成
3. 生成されたトークンをメモ（再表示されないため必ず保存）
4. ページ上部のタブから使用環境（Claude Desktop / Cursor / Cline）を選択し、JSON設定をコピー
5. <YOUR_FIGMA_API_KEY> を発行したトークンに置き換え
6. コピーしたJSONを設定ファイル（claude_desktop_config.json など）に追記して保存
7. クライアントを再起動

使い方の例

「FigmaファイルURL: https://www.figma.com/file/xxxxx のメインコンポーネントの構造を教えて」

「このFigmaデザインのボタンコンポーネントをTailwind CSSで実装して」

「FigmaのデザインシステムのカラーパレットをCSS変数として出力して」

「このFigmaフレームのレイアウト構造をReactコンポーネントのJSXに変換して」

注意事項

• Personal Access Tokenはソースコードやチャット履歴に含めないよう注意してください。環境変数または .env ファイルで管理し、.gitignore に追加してください。
• アクセスできるのは自分がアクセス権を持つFigmaファイルのみです。チームファイルを操作する場合は、事前にファイルの閲覧権限が付与されていることを確認してください。
• このサーバーはコミュニティ製です（GLips/Figma-Context-MCP）。Figma公式製品ではないため、Figma APIの仕様変更により動作が変わる場合があります。
• 大きなFigmaファイルの取得はAPIレスポンスが遅くなる場合があります。特定のフレームやコンポーネントを指定して取得することを推奨します。