Title: Introduction | Developer Docs
URL Source: https://developers.figma.com/docs/figma-mcp-server/
Markdown Content:
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.
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.
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.
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).