MCP Server
Figma MCP
The official remote Figma server for design context, code generation, canvas actions, FigJam, variables, and components.
What is Figma MCP?
Figma MCP lets a supported agent work from the actual structure of a Figma file instead of a screenshot alone. After OAuth authorization, the server can expose frames, components, variables, layout, and Code Connect context for implementation, while supported workflows can also create designs, generate diagrams, and move live UI back into the canvas. Access remains bounded by the user's Figma permissions.
Key capabilities
Structured design context
Uses editable design structure and variables rather than only rendered pixels.
Design-to-code support
Supplies component and layout evidence that can be reconciled with an existing repository.
Official OAuth flow
Keeps access tied to the user's Figma account and file permissions.
Use cases
Implement an approved frame
Bring a selected design into a production codebase with design-system context.
Inspect design tokens
Read variables, typography, and component relationships before coding.
Create a FigJam diagram
Turn a described flow or architecture into a collaborative diagram.
MCP capabilities
Tools
Read design context
Extract frames, components, variables, layout, and design-system metadata.
Generate implementation
Provide structured context for code generation from selected Figma designs.
Canvas workflows
Use supported design creation, live-UI capture, and editing workflows.
FigJam diagrams
Create and work with supported diagram content.
Connection and auth
- A supported MCP client
- A Figma account
- Access to the relevant Figma file or team resources
Client configuration
Codex CLI
codex mcp add figma --url https://mcp.figma.com/mcpClaude Code
claude mcp add --transport http figma https://mcp.figma.com/mcp