Figma MCP Server: 30 AI Tools for Design Files, Components, Variables & Collaboration
Figma is where product teams live — design files, component libraries, design tokens, comments, dev resources, webhook events, activity logs. But AI agents can't see inside Figma unless you give them structured access to the right surface at the right granularity.
MCP (Model Context Protocol) solves this by letting agents call Figma as a set of typed tools. Instead of pasting screenshots into ChatGPT or describing your component hierarchy by hand, the AI reads your files, inspects components, mutates variables in transactional batches, posts comments, attaches dev resources, and debugs webhook delivery — programmatically.
The MCPBundles Figma bundle exposes Figma's REST API as 30 MCP tools built around how design teams actually work. This post walks through what's there.
How the surface is shaped
Figma's REST API addresses everything by file, team, or global key. The 30 tools follow the same shape — and where Figma's API has multiple endpoints for the "same thing at different scopes" (a single component vs. a file's components vs. a team's published components), the tools collapse them into one call that dispatches on which argument you pass.
Identifiers you'll see
file_key— the segment after/design/or/file/in a Figma share URL:figma.com/design/<FILE_KEY>/Name. The credential carries an optional default; passfile_keyexplicitly to target a different file.team_id— the segment after/team/in a team URL:figma.com/files/team/<TEAM_ID>/. Also has a credential default.node_id—<page_id>:<index>(e.g.1:2); discoverable from the file tree.component_key/component_set_key/style_key— global keys used to fetch a single library entity directly.
Once the AI learns these patterns, every file/team/library tool reuses them.
What AI agents can do with Figma
Identity and team navigation (3 tools)
Cheap probes for "who am I" and "what's in front of me" — used at the start of most workflows.
Tools: figma_read_me, figma_read_team_projects, figma_read_project_files
| What you ask the AI | What happens |
|---|---|
| "Confirm this token works" | figma_read_me returns id, email, handle |
| "List the projects in our design team" | figma_read_team_projects returns project ids + names |
| "What files are in the Marketing project?" | figma_read_project_files returns key, name, thumbnail, last_modified for each file |
Plan note: figma_read_team_projects requires a Personal Access Token. Figma's /v1/teams/{id}/projects endpoint returns 404 for OAuth public apps that aren't on Figma's internal allowlist — even when scopes are correct. The OAuth-based file/team/library tools are unaffected.
Files and rendering (5 tools)
The foundation of any Figma integration: reading file structure, version history, embedded image fills, and rendering nodes as PNG/JPG/SVG/PDF.
Tools: figma_read_file, figma_read_file_meta, figma_read_file_versions, figma_read_image_fills, figma_render_images
| What you ask the AI | What happens |
|---|---|
| "Confirm I can see this file" | figma_read_file_meta returns name, role, owner, link_access — without paying for the document tree |
| "Show me the structure of this file" | figma_read_file returns the document tree (pages → frames → nodes) |
| "Just read these two frames" | figma_read_file with ids='1:2,1:3' returns only those nodes — same response shape, dramatically cheaper for large design systems |
| "What changed in the last 10 versions?" | figma_read_file_versions returns named saves with timestamps and authors |
| "Get download URLs for every embedded image" | figma_read_image_fills returns the image_ref → S3 URL map (URLs valid ~30 days) |
| "Export the hero frame as 2x PNG" | figma_render_images with format='png', scale=2 returns fresh exports |
Two image surfaces, on purpose: figma_read_image_fills returns the original bitmap fills baked into the file. figma_render_images produces fresh exports of any node at any scale, with SVG-specific knobs (svg_outline_text for pixel parity, svg_include_node_id for round-tripping). They're distinct because they answer different questions.
Components, component sets, and styles (3 tools)
Three tools, three families, same shape: pass a global key for a single fetch, a file_key for the file-local view, or a team_id for the published library. file_key wins when both are supplied. Team-scoped reads support cursor pagination.
Tools: figma_read_components, figma_read_component_sets, figma_read_styles
| What you ask the AI | What happens |
|---|---|
| "List all components in our design-system file" | figma_read_components with file_key returns every component with name, description, key |
| "Browse our team's published button variants" | figma_read_component_sets with team_id returns paginated component sets |
| "Fetch this one style by its key" | figma_read_styles with style_key returns one style row directly |
| "What text/color/effect styles are defined here?" | figma_read_styles with file_key returns all styles, classified by style_type |
This consolidation is the biggest structural change from the old surface. There used to be three separate tools per family (single / file / team). One tool per family is easier for the AI to choose correctly and easier for humans to remember.
Variables — design tokens (3 tools, Enterprise)
Figma Variables are design tokens — colors, spacing, typography values that drive your design system. Read the local-only surface, read the published surface other files consume, and mutate everything in one transactional batch.
Tools: figma_read_local_variables, figma_read_published_variables, figma_upsert_variables
| What you ask the AI | What happens |
|---|---|
| "What spacing tokens are defined here?" | figma_read_local_variables returns variableCollections, variables, modes, modeValues, codeSyntax |
| "Sync from the published library" | figma_read_published_variables returns published variables keyed by their subscription_key |
"Add a brand-accent color and bind it to light + dark modes" | figma_upsert_variables accepts a single batch envelope with variableCollections, variableModes, variables, and variableModeValues arrays — each item has its own action: CREATE | UPDATE | DELETE. Temporary client ids (tmp_…) round-trip in the response so client caches can map back. |
Plan note: Enterprise organization full members only. Lower plans get 403 Variables API is only available to full members of Enterprise organizations.
Comments and reactions (6 tools)
Design reviews happen in comments. Read threads (with anchored canvas positions), create root comments or replies, react with the five Figma-supported emojis, and remove your own reactions.
Tools: figma_read_comments, figma_create_comment, figma_delete_comment, figma_read_comment_reactions, figma_create_comment_reaction, figma_delete_comment_reaction
| What you ask the AI | What happens |
|---|---|
| "Show me unresolved comments on this file" | figma_read_comments returns each comment with client_meta (canvas anchor — node-attached or absolute coords), parent_id (for replies), resolved_at |
| "Reply to that comment" | figma_create_comment with comment_id set — that's how Figma threads replies |
| "Pin a comment to the header frame" | figma_create_comment with client_meta={'node_id':'1:2','node_offset':{'x':0,'y':0}} |
| "React with eyes to all open threads" | figma_create_comment_reaction with emoji=':eyes:' |
Reactions Figma supports: :eyes:, :heart_eyes:, :heavy_plus_sign:, :+1:, :-1: — that's the full set.
Comments are immutable once posted. To "edit," delete and recreate. Only the author or a team admin can delete a comment.
Dev resources (3 tools, Dev Mode seat)
Dev resources are the code-connections that surface in Figma Dev Mode (links from a node to a Storybook story, a GitHub PR, a component-library page). Bulk create/update with one call, delete one at a time.
Tools: figma_read_dev_resources, figma_upsert_dev_resources, figma_delete_dev_resource
figma_upsert_dev_resources accepts up to 100 items per call in a mixed batch — items without an id are POSTed (created), items with an id are PUT (updated). The response merges both branches and surfaces per-item errors so partial failures don't lose work.
Webhooks (4 tools, paid team plan)
Subscribe to file events, manage subscriptions, and debug delivery — the debug surface is what makes webhooks actually usable.
Tools: figma_read_webhooks, figma_upsert_webhook, figma_delete_webhook, figma_read_webhook_requests
| What you ask the AI | What happens |
|---|---|
| "Subscribe to FILE_UPDATE on this team" | figma_upsert_webhook (no webhook_id) → POST /v2/webhooks with event_type, endpoint, passcode |
| "Pause that webhook for an hour" | figma_upsert_webhook with webhook_id and status='PAUSED' — stops delivery without deleting |
| "Why isn't my endpoint receiving events?" | figma_read_webhook_requests returns the recent delivery attempts with the request payload, response status, and the body the receiver returned — exactly what you need to see why a 400 happened |
| "Take it down for good" | figma_delete_webhook |
Event types Figma supports: PING (fires once on creation as a probe), FILE_UPDATE (coalesced over a short window), FILE_VERSION_UPDATE, FILE_DELETE, LIBRARY_PUBLISH, FILE_COMMENT, DEV_MODE_STATUS_UPDATE.
Plan note: Webhook creation requires a paid team plan; Starter/Free teams get 400 Upgrade to professional team to enable webhooks. Listing webhooks works on every plan.
Library analytics, activity logs, payments (3 tools)
The org-level read surfaces.
Tools: figma_read_library_analytics, figma_read_activity_logs, figma_read_payments
figma_read_library_analytics is one tool that dispatches on kind (component / style / variable) and mode (actions time series / usages current attached-files map). That replaces six separate per-entity-per-mode tools with one well-typed call.
| What you ask the AI | What happens |
|---|---|
| "Which components are most used across the org this month?" | kind='component', mode='usages' |
| "Plot component insertions over the last 30 days" | kind='component', mode='actions', start_date, end_date |
| "What happened in our org's Figma activity last week?" | figma_read_activity_logs with start_time, end_time (Unix seconds), events filter |
| "Is my Community plugin paid?" | figma_read_payments with plugin_id + user_id, or plugin_payment_token from the plugin runtime |
Plan notes: Library analytics and activity logs are Enterprise-only — lower plans get 403 even when the token is valid. Activity logs additionally need the org:activity_log_read scope. Payments only returns rows for resources you own.
Operational shape
A typical workflow walks the surface in cost order:
- Validate the credential with
figma_read_me. - Cheaply confirm file access with
figma_read_file_metabefore paying for the tree. - Read the document with
figma_read_file— passids=if you only need a subset of nodes. - Render what you need with
figma_render_images(PNG by default; SVG withsvg_outline_text=truefor pixel-parity vector exports). - Mutate with the
upsert_*family — variables transactionally, dev resources in batches of 100, webhooks one at a time.
The AI doesn't need to be told this order — the descriptions on each tool surface the cost trade-offs, so it tends to pick the cheap probe first and only escalates to a full file read when it actually needs the tree.
Connecting Figma
Two credential shapes are supported. The framework injects whichever is bound for the workspace:
- Personal Access Token → injected as
X-Figma-Token. Quickest to set up; works with the team-projects endpoint. - OAuth2 → injected as
Authorization: Bearer <token>. Refreshes automatically, scoped to the permissions you grant.
Figma's API rate-limits per token (~60 calls/min as a working baseline; tighter on the Tier 3 endpoints — payments, activity logs). On 429 the framework backs off; the rate-limit window resets within ~60 seconds.
Getting started
- Enable the Figma bundle on MCPBundles
- Connect via OAuth or paste a Personal Access Token
- Ask your AI agent: "List all components in my design system file and tell me which ones are missing descriptions"
The AI has access to all 30 tools and picks the right ones from the prompt.
Frequently Asked Questions
Q: Does the AI need a paid Figma plan?
The base REST surface works on any plan. Variables (read and write) and Library Analytics require Enterprise. Activity Logs require Enterprise + the org:activity_log_read scope. Webhook creation requires a paid team plan (listing existing webhooks works on any plan). Dev Resources require a Dev Mode seat. The tools surface the relevant 403/400 message when a plan gate is hit, so the AI knows exactly which feature isn't available on this account.
Q: How do I find a file's key?
From the URL: figma.com/design/ABC123/My-Design → file key is ABC123. Older URLs use /file/ instead of /design/ — same key. The AI extracts it automatically from any URL you paste.
Q: Can AI agents modify my designs?
The current write surface covers comments (create/delete), comment reactions (create/delete), variables (create/update/delete via the transactional batch), dev resources (bulk upsert + delete), and webhooks (create/update/delete). The AI cannot directly modify shapes, text, or layers on the canvas — Figma's REST API doesn't expose that surface.
Q: How does the AI debug a webhook that isn't firing?
figma_read_webhook_requests returns the recent delivery attempts for a webhook id, including the request payload Figma sent and the response body your endpoint returned. That's almost always enough to see why deliveries are failing — wrong status code, malformed signature check, endpoint timing out. Figma keeps a rolling window; older history is dropped.
Q: What about the official mcp.figma.com server?
Figma maintains their own remote MCP server, but it currently restricts access to a hand-curated allowlist of MCP clients (Claude Code, Cursor, VS Code, Codex, Windsurf, Warp, Firebender, plus a few read-only clients). Third-party clients get 403 Forbidden from the OAuth Dynamic Client Registration endpoint, so MCPBundles can't proxy users into it today. We're on the waitlist; this post will be updated when access is granted. In the meantime the Figma bundle described above gives you full REST coverage.
Ready to connect Figma to your AI workflow? Enable the Figma bundle and start exploring your files, components, variables, and team activity with AI — no Figma UI required.