Introduction

The Figma MCP server brings Figma into your AI workflow. It gives AI agents the design context they need to generate code from your Figma files, and lets agents write native Figma content back to the canvas.

MCP servers use the Model Context Protocol, a standard interface that lets AI agents interact with data sources.

What you can do with the Figma MCP server

• Let your agent write directly to the canvas in Figma Design, FigJam, and Figma Slides

  Create and modify native Figma content from your MCP client. With the right skills, agents can build and update frames, components, variables, and auto layout in your files, using your design system as the source of truth.

  note

  Note: This feature requires the remote Figma MCP server and a Full seat to write outside your drafts. It's free during the beta period and will eventually become a usage-based paid feature.

  Learn more about writing to the canvas

• Generate designs from the live UI of your web apps and sites

  Turn live UI from your browser (production, staging, or localhost) into editable design layers. Send pages, elements, or whole flows to Figma Design for exploration, alignment, and refinement.

  note

  Note: This feature requires the remote Figma MCP server and is supported by select clients.

  Learn more about generating designs from your interfaces

• Generate code from selected frames

  Select a Figma frame and turn it into code. This is useful for product teams building new flows or iterating on app features.

• Extract design context

  Pull variables, components, and layout data into your IDE. This is especially useful for design systems and component-based workflows.

• Retrieve FigJam resources

  Use content from your FigJam diagrams in your code generation workflow, so early-stage ideas, flows, and architecture maps carry into development.

• Retrieve Make resources

  Gather code resources from Make files and provide them to your agent as context. This helps as you move from prototype to production.

• Keep generated code consistent with Code Connect

  Improve output quality by reusing your actual components. Code Connect keeps generated code consistent with your codebase.

  Learn more about Code Connect

• Give your agent project context with Figma Specs

  Use the figma-spec skill to let your agent read, create, and update your team's specs. Share requirements before your agent starts building, and have it capture decisions and discoveries back in the spec as it works.

  Note: Figma Specs is in open beta. Writing to a spec requires the remote Figma MCP server and edit access to the file.

  Learn more about the figma-spec skill

Write to canvas and code to canvas are continuously being improved. If you run into issues, report them using Fig, our support chatbot, or by emailing support (paid plans).

note

The MCP server and Figma Agent can access fonts uploaded to your account. Learn how to add a font to Figma.

Set up the MCP server

You can connect to the Figma MCP server in two ways:

• Remote MCP server (recommended): Connects directly to Figma’s hosted endpoint at https://mcp.figma.com/mcp, without the Figma desktop app. The remote server offers the broadest set of features and is the best choice for most users. Learn how to install the remote MCP server.
• Desktop MCP server: Runs locally through the Figma desktop app. The desktop server is intended for specific organization and enterprise needs. It requires a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan. Learn how to install the desktop MCP server.

For information about usage and rate limits, see Plans, access, and permissions.

note

Figma for Government supports the desktop server only. See Figma for Government for available tools and current limitations.

If you plan to write to the canvas, also install Figma’s skills for your MCP client. Skills help your agent use the write tools more reliably and follow the right workflow when creating or updating content in Figma.

Connect the MCP server to your editor

Follow the instructions for your editor to connect to the remote or desktop server. Some clients also support skills, which add agent-level instructions that help AI tools work more effectively with Figma designs.

Client	Desktop server support	Remote server support	Write to canvas (remote only)	Plugin/skills support
Amazon Q	✓
Android Studio	✓	✓
Augment Code	✓	✓	✓
Claude Code	✓	✓	✓	Figma plugin
Claude Desktop	✓	✓	✓	Figma connector
Codex by OpenAI	✓	✓	✓	Codex Skills
Copilot CLI	✓	✓	✓	Figma plugin
Cursor	✓	✓	✓	Figma plugin
Dia		✓	✓
Factory	✓	✓	✓
Firebender	✓	✓	✓
Gemini CLI	✓	✓		Extension
Kiro	✓	✓	✓	Kiro Powers
Linear		✓	✓
Meta Muse		✓	✓
Openhands	✓
OpenCode	✓	✓	✓
Replit		✓
VS Code	✓	✓	✓	Figma plugin
Warp	✓	✓	✓
Xcode (beta)		✓	✓	Figma plugin

tip

For the latest list of supported clients, see the Figma MCP catalog. If you're a developer who wants to connect a new MCP client, join the waitlist.

About skills

Skills tell an agent how to complete specific tasks, combining MCP tool calls with detailed instructions. The Figma MCP server exposes individual tools; skills help agents understand which tools to use, in what order, and how to apply the results.

Skills can guide agents through workflows like:

• Connecting Figma design components to code components with Code Connect
• Generating design system rules aligned to your codebase
• Translating designs into production-ready code
• Reading and updating Figma Specs, so your agent works from your team's requirements

Skills don’t replace the MCP connection or add new capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions.

To learn more about skills:

• Use skills with the Figma MCP server
• Figma skills for MCP

note

Skills are also available from the Figma Community and through community contributions in the Figma community-resources repo on GitHub.