インストール不要。2分以内に動きます。
cloud.anythingmcp.com で無料トライアルを開始し、Figma をワンクリックで追加して、AI クライアント（Claude、ChatGPT、Copilot、Cursor）を生成された MCP エンドポイントに向けるだけ。Docker も git clone も、開発経験も不要です。
概要
AI に Figma のデザインを読ませます。チームのフォルダーとファイルの閲覧、ページ、フレーム、レイヤーの確認、画像の書き出し、コンポーネントとスタイルの参照、バージョン履歴の確認、コメントの閲覧と投稿、Dev Mode リンクの管理ができます。個人用アクセストークンで接続します。
こう聞いてみよう
Figma のサンプルプロンプト
プロンプトをクリックでコピー。Claude / ChatGPT / Cursor / Gemini / Copilot / OpenClaw に貼り付けて、このコネクターで実行できます。
Claude は AI のため誤ることがあります。回答をご確認ください。
💡 インストール不要? cloud.anythingmcp.com を直接利用してください。 サインインし、Connectors → Figma をクリック、認証情報を貼り付け、MCP API キーを発行すれば完了です。Docker も
git cloneもローカルサーバーも不要。
Figma + ChatGPT
AI に Figma のデザインを読ませます。チームのフォルダーとファイルの閲覧、ページ、フレーム、レイヤーの確認、画像の書き出し、コンポーネントとスタイルの参照、バージョン履歴の確認、コメントの閲覧と投稿、Dev Mode リンクの管理ができます。個人用アクセストークンで接続します。
前提条件
完全なセットアップ手順はコネクタ自体に組み込まれています (ストアでコネクタを選択すると表示)。必要な環境変数:
FIGMA_ACCESS_TOKEN
ステップ 1 — 認証情報を取得
- Figma でアカウントメニュー（ファイルブラウザーの左上）を開き、Settings → Security → Personal access tokens → Generate new token の順に進みます。
- トークンに名前を付け（例: 「AnythingMCP」）、有効期限を選びます。最長 90 日で、Figma は無期限のトークンをもう発行していません。次のスコープを設定します。
current_user:read,file_content:read,file_metadata:read,file_versions:readfile_comments:read,file_comments:writelibrary_content:read,library_assets:read,team_library_content:readfolders:readfile_dev_resources:read,file_dev_resources:write
- Generate token をクリックし、すぐにトークンをコピーします。Figma が表示するのは一度だけです。通常は
figd_で始まります。 - トークンを、Bearer という語を付けずに
FIGMA_ACCESS_TOKENに貼り付けて、コネクターをインストールします。 - まず
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 — ChatGPT にコネクタを追加
サーバーURL: AnythingMCP で MCP Servers を開き、このコネクタがあるサーバーを選んで URL（
https://cloud.anythingmcp.com/mcp/…）をコピーします。このガイドでYOUR_SERVER_IDと表示されている箇所に使ってください。
ChatGPT は開発者モード（Developer mode）で MCP サーバーをカスタムアプリとして接続します。有料プランで利用でき、無料プランでは使えません。Business・Enterprise のワークスペースでは、先に管理者が許可する必要がある場合があります。
- ChatGPT で Settings → Security and login を開き、Developer mode をオンにします。
- chatgpt.com/plugins を開き、+ をクリックします。
- 名前と短い説明を入力します（例: Name:
Figma）。 - Connection に MCP サーバー URL
https://cloud.anythingmcp.com/mcp/YOUR_SERVER_IDを入力し、接続を作成します。 - ChatGPT に求められたら AnythingMCP にサインイン（OAuth）し、アクセスを許可します。
利用可能なツール
| Tool | What it does |
|---|---|
figma_get_me | Get the Figma user the token belongs to: id, handle, email and avatar URL |
figma_get_file_meta | Get a file's metadata without its content: name, folder name, editor type (figma, figjam, slides ...), creator, last_touched_at and by… |
figma_get_file | Read a file's document tree: pages, frames and layers with their ids, names, types, sizes, fills, text and layout, plus the components and… |
figma_get_file_nodes | Read specific nodes (frames, components, layers) of a file with everything below them: type, name, absolute bounding box, fills, strokes… |
figma_render_images | Render nodes of a file as PNG, JPG, SVG or PDF and get a download URL per node id (null when a node could not be rendered) |
figma_get_image_fills | Get download URLs for every image used as a fill in a file, keyed by imageRef (the imageRef in a node's fills) |
figma_list_versions | List a file's version history, newest first: id, label and description of named versions, created_at, the user and thumbnail |
figma_list_comments | List all comments on a file: id, message, user, created_at, resolved_at, parent_id (for replies), client_meta (where it is pinned: node_id… |
figma_post_comment | Post a comment on a file as the token's user, optionally pinned to a node or a point, or as a reply to a top-level comment (comment_id) |
figma_delete_comment | Delete a comment |
figma_list_comment_reactions | List the emoji reactions on a comment: emoji, user and created_at |
figma_add_comment_reaction | React to a comment with an emoji shortcode, as the token's user; it shows next to the comment |
figma_list_team_folders | List the top-level folders (formerly called projects) of a team that the token's user can see: id, name, parent_folder_id (null at the… |
figma_list_subfolders | List the folders directly inside a folder (folders can be nested): id, name, parent_folder_id and created_at, plus the parent folder's name |
figma_list_folder_files | List the files directly in a folder (not in its subfolders): key, name, thumbnail_url and last_modified, plus the folder's name |
figma_list_team_components | List the published components of a team library: key, name, description, the file and node they live in, thumbnail and who last updated them |
figma_list_team_component_sets | List the published component sets (components with variants) of a team library: key, name, description, the file and node they live in… |
figma_list_team_styles | List the published styles (colors, text, effects, grids) of a team library: key, name, description, the file and node they live in… |
figma_list_file_components | List the published components of a library file: key, name, description, node_id and thumbnail |
figma_list_file_component_sets | List the published component sets of a library file: key, name, description, node_id and thumbnail |
figma_list_file_styles | List the published styles of a library file: key, name, description, node_id and thumbnail |
figma_get_component | Get one published component by its key: name, description, the file and node it lives in, its containing frame and component set, thumbnail… |
figma_get_component_set | Get one published component set (a component with variants) by its key: name, description, file, node and thumbnail |
figma_get_style | Get one published style by its key: name, description, style_type (FILL, TEXT, EFFECT, GRID), the file and node it lives in and thumbnail |
figma_list_dev_resources | List the dev resources of a file: links that developers attached to nodes in Dev Mode (tickets, docs, code), each with id, name, url and… |
figma_create_dev_resource | Attach a link (a ticket, a doc, a code file) to a node as a dev resource, visible to everyone in Dev Mode |
figma_update_dev_resource | Change the name or URL of a dev resource |
figma_delete_dev_resource | Remove a dev resource link from a node, for everyone |
プロンプトの例
- 「Checkout redesign ファイルのページと主なフレーム、最後に編集した人を教えてください。」
- 「Checkout redesign ファイルのコメントのうち、まだ解決されていないものと、その投稿者を教えてください。」
- 「Acme ウェブサイトのファイルにある料金ページのフレームを PNG で書き出して、リンクをください。」
- 「Checkout redesign ファイルの Lena さんのコメントに返信して、ボタンの色を更新したと伝えてください。」
FAQ
ChatGPT の無料プランでカスタム MCP コネクタは使えますか? いいえ。カスタム MCP 接続には開発者モードが必要で、有料プランでのみ利用できます。
次のステップ
このガイドは役に立ちましたか?
