Framelink MCP for Figma

{
  "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": {}
    }
  }
}

Framelink MCP for Figma とは

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

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

Framelink MCP for Figma は、その Figma のデザインデータを、AI のコーディングツールが読める形で渡すための仕組みです。

これは公式提供ではなく、有志が作った非公式ツールです。Figma 社が公式に提供する MCP サーバーは Figma MCP Server のページで紹介しています。

Framelink MCP for Figma × AI でできること

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

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

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

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

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

🏗️ レイアウトを実装

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

📐 構造を把握

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

提供される主なツール

Framelink MCP for Figma（figma-developer-mcp）は、Figma API を経由してデザインファイルの読み取りを提供します。ツールは次の2つです:

ツール名	内容
get_figma_data	レイアウト・テキスト・見た目・コンポーネント情報を含むデザインデータを取得（AI が読みやすいよう要点に絞って返す）
download_figma_images	画像やアイコンのノードを SVG / PNG で保存

download_figma_images は、環境変数 SKIP_IMAGE_DOWNLOADS で画像の保存を無効にして起動すると使えなくなります。保存先は --image-dir（または環境変数 IMAGE_DIR）で決まり、指定しない場合は起動したフォルダです。

Framelink MCP for Figma について

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

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

スペック

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

公式版との違い: Figma 社も公式の MCP サーバーを提供しています（接続先 mcp.figma.com・Figma アカウントでログインして使う）。公式版は Figma ファイルへの書き込みなどにも対応し、利用回数の上限はプランとシートで決まります。本サーバーは個人用アクセストークン（または OAuth トークン）を使い、Figma の API から読み取る方式です。詳しくは Figma MCP Server のページをご覧ください。

導入手順

前提条件

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

ステップ

1. Figma にログインし、ファイル一覧画面の左上のアカウントメニュー →「Settings」を開く
2. 「Security」タブの「Personal access tokens」セクションで「Generate new token」を押し、トークン名と権限の範囲（スコープ）を指定して作成
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 の仕様変更により動作が変わる場合があります。
• 利用状況の送信（テレメトリ）が既定で有効です。止めたい場合は、環境変数 FRAMELINK_TELEMETRY=off または DO_NOT_TRACK=1 を設定してください。
• 大きな Figma ファイルの取得は API レスポンスが遅くなる場合があります。特定のフレームやコンポーネントを指定して取得することを推奨します。