Figma MCP について
Figma MCPは、デザインや開発のワークフローからFigma REST APIのデータを利用できるようにします。ファイル内のトップレベルフレームを一覧表示し、選択したフレームのPNG、ノードJSON、画像塗りつぶしマップをローカルに保存します。
主な機能
- 01トップレベルフレームの一覧表示と絞り込み
- 02フレーム名、ID、サイズ、ページの確認
- 03フレームのレンダリング済みPNG取得
- 04ノードJSONと正規化した画像塗りつぶしデータの保存
- 05取得ファイルを設定済み出力ルート内に保持
活用シーン
- 01Figmaファイル内のフレームを確認
- 02フレーム画像と構造化ノードデータを取得
- 03後続の確認に向けてフレーム素材をローカル保存
MCP 対応
MCPクライアントに2つのツールを提供します。1つはトップレベルフレームの一覧表示、もう1つはフレームを取得してPNGとJSONデータをローカル出力ディレクトリに書き込みます。Figmaの個人アクセストークンを使用します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。
ツール
2掲載時のツール一覧 · 2 週間前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| query | string | いいえ | 省略可能。大文字と小文字を区別しないページ名またはフレーム名の部分文字列。 |
| file_key | string | はい | Figma URL から解析されたファイル key。 |
詳細
Figma MCP
Figma REST API MCP サーバーです。ファイル内の最上位フレームを一覧表示するツールと、1 つのフレームのレンダリング済み PNG、そのノード JSON、画像塗りつぶしマップをローカルの出力ディレクトリに取得するツールの、2 つのツールを提供します。
インストール
Claude Code:
claude mcp add figma -e FIGMA_TOKEN=your-token -- npx -y @scalably-io/figma-mcp
Codex:
codex mcp add figma --env FIGMA_TOKEN=your-token -- npx -y @scalably-io/figma-mcp
Claude Desktop:最新の GitHub リリースから figma-mcp.mcpb をダウンロードして開きます。
セットアップ
- figma.com のアカウント設定で、
file_content:readスコープを持つ個人用アクセストークンを作成します。 - Figma ファイルの URL からファイルキーを確認します。
/design/または/file/の後に続く部分です。たとえば、https://www.figma.com/design/AbC123xyz/My-fileの場合はAbC123xyzです。どちらのツールでも、これをfile_keyとして指定します。 FIGMA_TOKENが設定されていなくてもサーバーは起動してツールを一覧表示しますが、トークンが設定されるまでは呼び出しがすべてFIGMA_NOT_CONFIGUREDで失敗します。- ファイルを書き込むツールは
fetch_frameのみです(そのため読み取り専用としてマークされていません)。設定された出力ルートの下のディレクトリ(デフォルトは./figma-output)にframe.png、node.json、fills.jsonを書き込みます。もう一方のツールは完全な読み取り専用です。
ツール(2)
| ツール | 機能 |
|---|---|
list_frames | Figma ファイル内のすべての最上位 FRAME ノードを一覧表示し、必要に応じてフィルタリングします。ページ名、名前、ノード ID の正確なデータ、寸法、ファイルメタデータも返します |
fetch_frame | Figma フレームを 1 つ取得し、トランザクション処理で frame.png、node.json、正規化された画像塗りつぶしマップを出力ルートの下のディレクトリに書き込みます |
設定
| 変数 | 必須 | 用途 |
|---|---|---|
FIGMA_TOKEN | はい | file_content:read を持つ Figma 個人用アクセストークン |
FIGMA_API_BASE_URL | いいえ | Figma REST API のベース URL を上書きします(デフォルトは https://api.figma.com/v1) |
FIGMA_REQUEST_TIMEOUT_MS | いいえ | リクエストごとのタイムアウト(ミリ秒、デフォルトは 60000) |
FIGMA_MAX_JSON_BYTES | いいえ | Figma JSON レスポンスの上限サイズ(バイト、デフォルトは 104857600) |
FIGMA_MAX_FRAME_BYTES | いいえ | ダウンロードするフレーム PNG の上限サイズ(バイト、デフォルトは 104857600) |
FIGMA_OUTPUT_ROOT | いいえ | すべての fetch_frame 出力ディレクトリがその下に収まるディレクトリ(デフォルトは ./figma-output。初回使用時に作成されます) |
FIGMA_ALLOW_HTTP_FOR_TESTS | いいえ | テストスイート専用:1 を指定すると、ループバック API ベース URL で平文 HTTP が許可されます。通常の使用では絶対に設定しないでください |
返信形式
各ツールは、status(succeeded、partial、no_op)、summary、target、result、proof、warnings、recovery を含むプレーンな JSON を返します。失敗すると、<code>: <message> <hint> 形式のプレーンなエラー文字列をスローします。
制限事項
fetch_frame は Figma の画像 API 経由でレンダリングするため、非常に大きなフレームや極端なスケール値は、設定された JSON またはフレームのバイト数上限を超えることがあります。その場合は scale を下げるか、フレームを分割してください。fills.json の URL は一時的なもので、14 日以内に期限切れになります。
検証
各リリースでは、パッケージのバージョン、.mcpb の sha256、本番用コミットの派生元を CHANGELOG.md に記載しています。CI では、プッシュのたびにテストと、パッケージ化された tarball のクリーンインストールを実行します。
プライバシーポリシー
このサーバーは、ユーザー自身の認証情報を使って、ユーザーのマシン上でローカルに実行されます。個人データを収集せず、テレメトリーも含まず、明示的に取得したフレームバンドル以外のデータを永続的に保存せず、ラップするベンダー API のみと通信します。Scalably を含む第三者がユーザーのデータを受け取ることはありません。お問い合わせ先:[email protected]。正式版:https://scalably.io/connector-privacy.html
ライセンス
MIT。Copyright Scalably.
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。