What you can do with Figma

Built for

Design Systems, Product Design, Design Engineering, Design QA

Example workflows

Audit a design system

Connects file-local and published library design-system objects.

Try this

Read this Figma file's components, component sets, styles, and variables, then summarize inconsistencies that could break a design system rollout.

Extract implementation context

Uses node reads and render exports for design-to-code work.

Try this

Read selected Figma nodes, render screenshots, and summarize layout, copy, colors, and component structure for engineering handoff.

Review comments and feedback

Turns file comments into a structured review queue.

Try this

List comments on this Figma file, group unresolved feedback by page or frame, and suggest what needs product or design follow-up.

Plan webhook or dev-resource updates

Covers collaboration automation beyond static file reads.

Try this

Inspect Figma webhooks and dev resources for the team, then recommend which resources should be added or paused for the current project.

Context to know first

What can MCPBundles do with Figma?

It can inspect files, nodes, images, components, component sets, styles, variables, comments, projects, webhooks, dev resources, and selected library analytics depending on account plan and credential scope.

What identifiers do Figma workflows need?

Most workflows need a file key, team id, node id, or global library key. File keys come from Figma design or file URLs, and node ids identify specific frames or elements.

Can agents render Figma designs?

Yes. The render workflow can export selected nodes as PNG, JPG, SVG, or PDF, which helps agents inspect visuals and produce engineering notes.

Related editorial

Figma Workflows with AI

How AI agents can read files, browse components and styles, edit variables, post review comments, and pull library analytics for design ops.

Read article

AI Skill
SKILL.md

Domain knowledge for Figma — workflow patterns, data models, and gotchas for your AI agent.

Figma

Figma's REST API addresses everything by file, team, or global key.

Identifiers

  • 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; pass file_key explicitly to target a different file.
  • team_id — the segment after /team/ in a team URL: figma.com/files/team/<TEAM_ID>/. The credential carries an optional 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.

Hierarchy

Team → Project → File → Page → Frame → Node. Components, component sets, styles, and variables are scoped to a file (the local view) and may also be published to the team library, which is what other files consume.

Operational order

  1. Validate the credential with the current-user read.
  2. List team styles to discover library file_keys when you don't already have one.
  3. Read a file's metadata to confirm access cheaply before pulling the full document tree (which can be many MB).
  4. Read the file (full tree) or pass ids= to read only those nodes — same response shape, partial reads are dramatically cheaper for large design systems.
  5. Render images for specific node ids when you need raster / vector exports.

Read consolidation

  • Components / component sets / styles: one read tool per family. Pass the global key (component_key / component_set_key / style_key) for single fetch; otherwise scope to file_key (file-local) or team_id (published library). file_key wins when both are supplied. Team scope supports cursor pagination via page_size + before / after.
  • Files: pass ids= (comma-separated node ids) to switch from "full file tree" to "deep node read" — the response shape matches.
  • Library analytics: a single read tool dispatches on kind (component / style / variable) and mode (actions time series / usages current map).
  • Webhooks: pass webhook_id for single, otherwise list scoped to team_id.
  • Dev resources: list scoped to a file_key, optionally narrowed to one node_id.

Write consolidation

  • upsert_* tools dispatch on whether an id-like argument is present:
    • Webhooks: omit webhook_id to create (POST), pass it to update (PUT). Use status='PAUSED' to temporarily stop delivery without deleting.
    • Dev resources: bulk-only (max 100 per call). Items without id go in the create batch (POST), items with id go in the update batch (PUT). The response merges both branches and surfaces per-item errors.
    • Variables: a single bulk envelope mutates variableCollections, variableModes, variables, and variableModeValues in one transaction with per-item action of CREATE / UPDATE / DELETE. Temporary client ids (tmp_…) round-trip in the response.
  • Comments and comment reactions only support create + delete (no update on the API), so the write tools are named create_* / delete_* rather than upsert_*. To "edit" a comment, delete and recreate.

Rendering

  • The render tool exports nodes as PNG (default), JPG, SVG, or PDF; scale runs 0.01–4 (retina = 2).
  • SVG-specific knobs: svg_outline_text=true (default) converts text to vector paths for pixel parity; svg_include_id / svg_include_node_id emit attributes for round-tripping.
  • The image-fills read returns the original bitmap fills baked into a file (S3 URLs valid ~30 days). The render tool produces fresh exports — distinct surfaces.

Plan-gated capabilities

The Figma REST API exposes endpoints that are gated on the workspace's Figma plan, not on the credential. These will return 403 / 400 for accounts that don't have the corresponding entitlement, even when the token is otherwise valid:

  • Library analytics — Enterprise plan only. Lower plans get 403.
  • Variables read / write — Enterprise organization full membership only.
  • Webhook create — paid team plan; Starter / Free teams get 400 Upgrade to professional team to enable webhooks. Listing webhooks works on every plan.
  • Activity logs — Enterprise + the org:activity_log_read scope.
  • Dev resources — Dev Mode seat (paid).
  • Payments — only the resource owner sees rows; queries against other authors' resources return 404.

Authentication shape

Two credential shapes are supported. The framework injects whichever is bound for the workspace:

  • Personal Access Token → X-Figma-Token
  • OAuth2 → Authorization: Bearer …

Rate limit

Figma rate-limits per token (~Tier 3 endpoints are tighter — payments, activity logs). On 429, back off; rate-limit windows reset within ~60 seconds.

Tools in this Server (30)

Figma Create Comment

Create a comment on a Figma file. Required: message. Optional: comment_id (the parent comment id — when set, this becomes a threaded reply rather than...

Figma Create Comment Reaction

Add a reaction to a Figma comment. emoji must be one of the Figma-supported shortcodes: :eyes:, :heart_eyes:, :heavy_plus_sign:, :+1:, :-1:. The same ...

Figma Delete Comment

Delete a comment from a Figma file. Only the author or a team admin can delete; other callers get 403. Deleting a thread root removes all replies.

Figma Delete Comment Reaction

Remove the calling user's reaction (matching emoji) from a Figma comment. emoji is sent as a query parameter, not a body. Only the user who created th...

Figma Delete Dev Resource

Delete one dev resource by id. Permanent — there is no undo. file_key defaults to the credential.

Figma Delete Webhook

Delete a webhook. Permanent — there is no undo. To stop delivery without deleting, use figma_upsert_webhook with status='PAUSED'. Requires team admin ...

Figma Read Activity Logs

Read the org activity log. Filter on events (comma-separated list of event types — empty returns every event), start_time / end_time (Unix seconds — d...

Figma Read Comment Reactions

List reactions on a Figma comment. Each row carries the reacting user, the emoji shortcode, and created_at. Cursor pagination via cursor=. Reaction em...

Figma Read Comments

List comments on a Figma file. Each comment carries id, message, user, created_at, resolved_at, parent_id (for replies), client_meta (the canvas regio...

Figma Read Components

Read components. Pass component_key to fetch one component by its global key (the key surfaced inside the file's components map and on instances). Oth...

Figma Read Component Sets

Read component sets (the variant containers). Pass component_set_key to fetch one. Otherwise scope to a file (file_key, defaults to credential) or to ...

Figma Read Dev Resources

List the dev resources (Dev Mode code connections) attached to nodes in a Figma file. Each row carries id, file_key, node_id, name, url. Pass node_id ...

Figma Read File

Read a Figma file by file_key. Pass ids='1:2,1:3' to fetch only those nodes (and their descendants) — the response is shape-equivalent to the deep-nod...

Figma Read File Meta

Read lightweight metadata for a Figma file — name, role, last_touched_at, editor_type, link_access, creator, owner, and folder ancestry — without down...

Figma Read File Versions

Read the version history of a Figma file. Returns a list of named saves (version id, label, description, created_at, user). Pass any version id back t...

Figma Read Image Fills

Read the URL map of every image fill referenced inside a Figma file. Returns a dict keyed by image_ref (the same hash you'll see on a Paint of type=IM...

Figma Read Library Analytics

Read library analytics for a published Figma library. kind picks the entity (component / style / variable) and mode picks the metric family — 'actions...

Figma Read Local Variables

Read the variable collections, variables, modes, and resolved values defined inside one Figma file (the local-only / unpublished surface). Returns var...

Figma Read Me

Read the Figma user the credential authenticates as. Returns id, email, handle, and img_url. Use as a low-cost validation probe before exercising team...

Figma Read Payments

Read payment information for a Community resource you own (plugin / widget / file). Two query modes: (1) plugin/widget runtime — pass plugin_payment_t...

Figma Read Project Files

List files inside a Figma project. Returns each file's key, name, thumbnail_url, and last_modified. Pass branch_data=true to also receive branch metad...

Figma Read Published Variables

Read the variables a file has published to its team library (the surface other files consume). Returns variableCollections and variables keyed by thei...

Figma Read Styles

Read color, text, effect, and grid styles. Pass style_key to fetch one style by its global key. Otherwise scope to a file (file_key, defaults to crede...

Figma Read Team Projects

List the projects (folders) inside a Figma team. team_id defaults to the value stored on the credential — pass team_id to scope to a different team. R...

Figma Read Webhook Requests

Read the recent delivery attempts for a webhook. Each row includes request_info (event_type, endpoint, payload, sent_at) and response_info (status, re...

Figma Read Webhooks

Read webhooks. Pass webhook_id to fetch one webhook (returns id, team_id, event_type, endpoint, status, description, passcode, plan_api_id). Otherwise...

Figma Render Images

Render specific Figma nodes as image assets. Returns a dict keyed by node id → download URL (valid ~30 days). format=png (default, lossless+alpha) | j...

Figma Upsert Dev Resources

Create or update dev resources in bulk (max 100 per call). Items without an id are POSTed (create — node_id, name, url all required); items with an id...

Figma Upsert Variables

Bulk create / update / delete variable collections, variables, modes, and modeValues in one transactional call. The body is Figma's batch envelope — e...

Figma Upsert Webhook

Create or update a webhook. Omit webhook_id to create (POST /v2/webhooks — event_type, endpoint, passcode required; team_id defaults to credential). P...

Frequently Asked Questions

What is the Figma MCP server?

Figma REST API for design file management, components, styles, and collaboration. Access files, nodes, components, styles, variables, comments, and project data. Perfect for design systems, asset extraction, design-to-code workflows, and design automation. It provides 30 tools that AI agents can use through the Model Context Protocol (MCP).

How do I connect Figma to my AI agent?

Add the MCPBundles server URL to your MCP client configuration (Claude Desktop, Cursor, VS Code, etc.). The URL format is: https://mcp.mcpbundles.com/bundle/figma. Authentication is handled automatically.

How many tools does Figma provide?

Figma provides 30 tools that can be called by AI agents, along with a SKILL.md that gives your AI agent domain knowledge about when and how to use them.

What authentication does Figma require?

Figma uses API Key or One-click sign in. Figma requires credentials. Connect via MCPBundles and authentication is handled automatically.

What can MCPBundles do with Figma?

It can inspect files, nodes, images, components, component sets, styles, variables, comments, projects, webhooks, dev resources, and selected library analytics depending on account plan and credential scope.

What identifiers do Figma workflows need?

Most workflows need a file key, team id, node id, or global library key. File keys come from Figma design or file URLs, and node ids identify specific frames or elements.

Can agents render Figma designs?

Yes. The render workflow can export selected nodes as PNG, JPG, SVG, or PDF, which helps agents inspect visuals and produce engineering notes.

Why do some Figma features fail by plan?

Figma gates capabilities such as variables, webhooks, library analytics, activity logs, and dev resources by workspace plan, scopes, or seat type.

Setup Instructions

Connect Figma to any MCP client in minutes

MCP URL
https://mcp.mcpbundles.com/bundle/figma

One-click install:

The link prefills the Add custom connector dialog — you still review the values and click Add, then Connect to complete OAuth.

Or add manually

  1. Open claude.ai → Settings → Connectors.
  2. Click the + button and choose Add custom connector.
  3. Set Name to Figma and paste the MCP URL into Remote MCP server URL.
  4. Click Add. Figma will appear under Not connected — select it and click Connect to complete OAuth.
Name: Figma
Remote MCP server URL: https://mcp.mcpbundles.com/bundle/figma
Authentication: OAuth

Custom connectors at claude.ai require a paid Claude plan (Pro, Max, Team, or Enterprise).

Ready to use Figma?

Sign in to connect your credentials and start running tools from the chat.

Figma MCP Server & Skill — 30 Tools