Figma

Figma MCP Connector for Claude

A+

Connect Figma to automate design workflows — inspect files, render layers as images, and manage comments directly from your AI agent.

15 tools Official Updated Jun 28, 2026 Official Vinkius Partner

Figma is the leading collaborative interface design tool. This MCP server allows your AI agent to interact with your Figma files, projects, and teams flawlessly.

Key Features

  • File & Node Inspection — Retrieve the full document tree or specific layers to analyze design structures flawlessly.
  • Image Rendering — Render Figma frames, components, or layers into PNG, SVG, or PDF images flawlessly native.
  • Team & Project Orchestration — List team projects and project files to navigate your design workspace flawlessly.
  • Design Token Access — Extract published components, styles, and local variables to sync with codebases flawlessly.
  • Collaboration Tools — Read and post comments directly on design files to keep feedback loops active synchronously.
  • Version History — Access file version history to track design evolutions flawlessy through the agent.

How it works

  1. Subscribe to this server
  2. Enter your Figma Personal Access Token (found in Account Settings)
  3. Start managing your design assets from Claude, Cursor, or any MCP-compatible client

Who is this for?

  • Product Designers — automate documentation and asset handoff without manual exports
  • Frontend Developers — extract design tokens, styles, and component metadata directly into your code workflow
  • Product Managers — monitor design progress and review comments through simple natural language queries
ui-ux-designprototypingvector-graphicsdesign-systemsfile-inspectionimage-rendering

15 tools expose this connector's capabilities to your AI agent.

delete_comment

Requires file key and comment ID. Delete a comment from a Figma file

get_component_set

Get metadata for a published component set

get_team_info

Get metadata about a Figma team

get_images

Render nodes from a Figma file as images

get_local_variables

List design tokens/variables in a Figma file

list_components

List published team components

get_me

Get details for the authorized Figma user

get_comments

Get comments on a Figma file

get_file_nodes

Get specific nodes from a Figma file

get_file

Use depth to limit node traversal (1=pages only, 2=pages+top frames). Get a Figma file

get_file_versions

List versions of a Figma file

list_project_files

List files in a project

list_styles

List published team styles

list_team_projects

List projects in a Figma team

post_comment

Post a comment on a Figma file

See how to talk to your AI agent using Figma.

List all projects in my Figma team ID 123456.

I've retrieved your team projects. You have 'Design System', 'Mobile App Redesign', and 'Marketing Assets'. Which project would you like to list the files for?

Get the document tree for file key abcDEF123.

Retrieving file tree... I've loaded the 'E-commerce App' file. It contains 5 pages: 'Onboarding', 'Checkout', 'Profile', 'Inventory', and 'Settings'. Would you like to inspect specific nodes on any page?

Render nodes 1:2 and 1:5 as PNG images.

Generating images... I've rendered the requested nodes. You can view them here: [Link to Node 1:2], [Link to Node 1:5]. These links are valid for 30 days flawlessly.

Log in to Figma, click on your name in the top-left to go to **Account Settings**, scroll down to the **Personal access tokens** section, and click **Create a new personal access token**.

Related Connectors