Figma MCP Server

Figma とは

Figma は、Web デザインや UI 設計を複数人でリアルタイム共同編集できるツールです。デザイナーがアプリ画面・Web サイト・バナーなどを描き、エンジニア・PM・経営層が同じファイルを開いてコメントやレビューできる「みんなの設計図」です。

最近はデザイナーだけでなく、エンジニアが実装時にデザインの色・サイズ・余白を確認したり、プロダクトマネージャーがプロトタイプを共有したりと、プロダクト開発に関わるあらゆる職種の共通言語になっています。

これは公式提供ではなく、有志が作った非公式ツールです。

Figma × AI でできること

この MCP サーバーを導入すると、Figma のデザインを AI への一言で読み取って実装できます。

🎨 デザインをコードに変換

「このボタンコンポーネントを Tailwind CSS で実装して」
→ Figma の色・サイズ・余白を読み取ってコード化

🎭 デザイントークンを抽出

「カラーパレットを CSS 変数として出力して」
→ デザインシステムを実装に取り込む

🏗️ レイアウトを実装

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

📐 構造を把握

「このデザインのコンポーネント構造を教えて」
→ オブジェクトツリーを整理して説明

提供される主なツール

Figma MCP（figma-developer-mcp）は、Figma API を経由してデザインファイルの読み取りを提供します:

機能カテゴリ	内容
ファイル情報取得	Figma ファイルのメタ情報・ページ一覧・最終更新日時
ノード情報取得	フレーム / コンポーネント / インスタンスなどのオブジェクト情報
スタイル情報	色・タイポグラフィ・エフェクトなどのデザインスタイル定義
コンポーネント情報	デザインシステム内のコンポーネントとバリアントの一覧
画像エクスポート	ノードを PNG / SVG / GIF でエクスポート

API 実装名について: 本 MCP は Figma の REST API をラップしています。個別のツール名（registerTool 単位）は公式リポジトリ でご確認ください。

Figma MCP Server について

Figma MCP Server（figma-developer-mcp）は、コミュニティメンバー GLips 氏が公開している MCP サーバーです。Figma の公式 REST API を経由して、デザインファイルの構造・スタイル・コンポーネント情報を AI から取得できる構成です。

「Figma を都度開いて色やサイズを確認する」「デザインから手作業でコードを書き起こす」といった往復作業を、AI に直接デザインを参照させることで省きます。デザイナーとエンジニアの認識齟齬による手戻り削減にも有効です。

スペック

• 配布形態: npm パッケージ（figma-developer-mcp）+ Node.js 20+
• 認証: Personal Access Token（コマンドライン引数または環境変数）
• 提供元: コミュニティ実装（GLips/Figma-Context-MCP）/ MIT
• 対応範囲: Figma ファイルの読み取り（書き込み非対応）
• 公式リポジトリ: github.com/GLips/Figma-Context-MCP

参考: Figma 社からも公式の「Dev Mode MCP Server」（Beta）が提供されています（リモートサーバー版は全プラン・全シートで利用可、デスクトップアプリ版は有料プランの Dev / Full シートが必要）。デザイン書き込みや高度なネイティブ統合が必要な場合は、Figma 公式版の利用を検討してください。詳細は Figma 公式ドキュメント を参照。

導入手順

前提条件

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

ステップ

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

注意事項

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

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

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

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

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

[mcp_servers.figma]
command = "npx"
args = ["-y", "figma-developer-mcp", "--figma-api-key=<YOUR_FIGMA_API_KEY>", "--stdio"]

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