MCP 経由で Figma を Gemini に接続する方法

💡 インストール不要? cloud.anythingmcp.com を直接利用してください。 サインインし、Connectors → Figma をクリック、認証情報を貼り付け、MCP API キーを発行すれば完了です。Docker も git clone もローカルサーバーも不要。

Figma + Gemini

AI に Figma のデザインを読ませます。チームのフォルダーとファイルの閲覧、ページ、フレーム、レイヤーの確認、画像の書き出し、コンポーネントとスタイルの参照、バージョン履歴の確認、コメントの閲覧と投稿、Dev Mode リンクの管理ができます。個人用アクセストークンで接続します。

前提条件

完全なセットアップ手順はコネクタ自体に組み込まれています (ストアでコネクタを選択すると表示)。必要な環境変数:

FIGMA_ACCESS_TOKEN

ステップ 1 — 認証情報を取得

1. Figma でアカウントメニュー（ファイルブラウザーの左上）を開き、Settings → Security → Personal access tokens → Generate new token の順に進みます。
2. トークンに名前を付け（例: 「AnythingMCP」）、有効期限を選びます。最長 90 日で、Figma は無期限のトークンをもう発行していません。次のスコープを設定します。
   • current_user:read, file_content:read, file_metadata:read, file_versions:read
   • file_comments:read, file_comments:write
   • library_content:read, library_assets:read, team_library_content:read
   • folders:read
   • file_dev_resources:read, file_dev_resources:write
3. Generate token をクリックし、すぐにトークンをコピーします。Figma が表示するのは一度だけです。通常は figd_ で始まります。
4. トークンを、Bearer という語を付けずに FIGMA_ACCESS_TOKEN に貼り付けて、コネクターをインストールします。
5. まず figma_get_me を実行します。トークンがどの Figma ユーザーのものかを確認できます。その後、AI にファイルのリンクを渡してください。ファイルキーは URL の /design/ の後ろの部分です。

トークンの有効期限: トークンの有効期限は最長 90 日です。期限が切れたら、同じスコープで新しいトークンを作成し、もう一度 FIGMA_ACCESS_TOKEN に貼り付けてください。コネクターから見えるのは、トークンのユーザーが開けるファイルとチームだけです。Figma がプロジェクトをフォルダー（folders）に名称変更する前に作られたトークンには projects:read しか付いていないことがありますが、フォルダー系のツールには folders:read が必要です。スコープ名を含む 403 が返ってきたら、新しいトークンを作成してください。

チームとフォルダーの見つけ方: Figma の API ではチームの一覧を取得できません。ファイルブラウザーからチームページのリンクを AI に渡してください（チーム ID は /team/ の後ろの数字です）。そこから figma_list_team_folders, figma_list_subfolders、figma_list_folder_files を使ってファイルにたどり着きます。

権限と読み取り専用の設定: file_comments:write と file_dev_resources:write を外し、figma_post_comment, figma_delete_comment, figma_add_comment_reaction, figma_create_dev_resource、figma_update_dev_resource をオフにします。AI が投稿したコメントはトークンのユーザー名で表示され、ファイルにアクセスできる全員に見えます。

インストール時はオフ: figma_delete_dev_resource。ノードから Dev Mode のリンクを全員分削除するツールです。AI に dev resource を削除させる場合だけオンにしてください。

レート制限と Starter プラン: Figma はユーザーごと、そしてファイルが属するプランごとにリクエストを制限します。ファイル内容、ノードの読み取り、画像のレンダリング（figma_get_file, figma_get_file_nodes, figma_render_images）は最も制限が厳しく、Full または Dev シートのある有料プランでは 1 分あたり 10 から 20 回ですが、無料の Starter プランのファイルや、View または Collab シートでは 1 か月に数回しか使えません。メタデータ、コメント、バージョン、コンポーネント、スタイルはずっと多く使えます。ファイル全体ではなく個別のフレームを見るよう AI に頼んでください。非常に大きな応答は 200 KB で切り詰められます。レンダリングした画像のリンクは 30 日間有効です。

Dev Mode: dev resource（ノードに付けたチケット、ドキュメント、コードへのリンク）には、有料プランと Full または Dev シートが必要です。Dev Mode にアクセスできない場合、他のツールでは問題なく読めるファイルでも、Figma は dev resource 系のツールに「File not found」と応答します。1 つのノードに付けられる dev resource は最大 10 件で、同じ URL は 1 回だけです。

よくあるエラー: 401「Invalid token」は、トークンが間違っているか、期限切れか、取り消されたことを示します。新しいトークンを作成してください。403 は、トークンにスコープが不足している（メッセージにスコープ名が示されます）か、ユーザーがそのチームやフォルダーにアクセスできないことを示します。404 は、ファイルやノードが存在しないか、ユーザーがそのファイルを開けないことを示します。ファイルの URL からキーをコピーし直してください。400 では無効なパラメーターが示されます。たとえば、ノード ID にコロンではなくハイフンを使った場合です（リンクの node-id=12-345 は 12:345 になります）。429 はレート制限です。少し待ってからやり直してください。ライブラリ系のツールはブランチのキーを受け付けません。メインファイルのキーを使ってください。

このコネクターはデザインを編集せず、変数、Webhook、ファイルツリー以外の FigJam と Slides のコンテンツ、ライブラリ分析は扱いません。

ステップ 2 — アダプターをインストール

curl -fsSL https://raw.githubusercontent.com/HelpCode-ai/anythingmcp/main/docker-compose.quickstart.yml -o docker-compose.yml
printf 'JWT_SECRET=%s\nENCRYPTION_KEY=%s\n' "$(openssl rand -hex 32)" "$(openssl rand -hex 32)" > .env
docker compose up -d

ステップ 3 — Gemini にコネクタを追加

サーバーURL: AnythingMCP で MCP Servers を開き、このコネクタがあるサーバーを選んで URL（https://cloud.anythingmcp.com/mcp/…）をコピーします。このガイドで YOUR_SERVER_ID と表示されている箇所に使ってください。

Gemini CLI は ~/.gemini/settings.json（Windows では %USERPROFILE%\.gemini\settings.json）から MCP サーバーを読み込みます。次を追加してください:

{
  "mcpServers": {
    "anythingmcp": {
      "httpUrl": "https://cloud.anythingmcp.com/mcp/YOUR_SERVER_ID",
      "headers": { "X-API-Key": "YOUR_MCP_API_KEY" }
    }
  }
}

1. AnythingMCP の MCP Servers → 対象のサーバー → API keys で MCP API キーを作成し、YOUR_MCP_API_KEY と置き換えます。
2. ファイルを保存し、gemini を再起動します。
3. Gemini CLI で /mcp を実行します（またはシェルで gemini mcp list）。anythingmcp が接続済みとして表示されるはずです。
4. プロンプトを入力しましょう。Gemini CLI が Figma のツールを呼び出せるようになりました。

利用可能なツール

プロンプトの例

• 「Checkout redesign ファイルのページと主なフレーム、最後に編集した人を教えてください。」
• 「Checkout redesign ファイルのコメントのうち、まだ解決されていないものと、その投稿者を教えてください。」
• 「Acme ウェブサイトのファイルにある料金ページのフレームを PNG で書き出して、リンクをください。」
• 「Checkout redesign ファイルの Lena さんのコメントに返信して、ボタンの色を更新したと伝えてください。」

FAQ

Gemini CLI はどこから MCP サーバーを読み込みますか? ユーザー単位では ~/.gemini/settings.json、プロジェクト単位ではプロジェクト内の .gemini/settings.json です。gemini mcp list で各サーバーと接続状態を確認できます。

次のステップ

• コネクタのランディング
• Claude に接続
• ChatGPT に接続
• Cursor に接続
• Meta Muse に接続