Figma MCP Server – Design Context and Code
Figma's official MCP server gives AI agents structured access to permitted Figma Design, FigJam, and Figma Make context. Use it to translate designs into code, inspect components and variables, work with design systems, generate diagrams, and perform supported design-to-canvas and code-to-canvas workflows.
Overview
Figma's official MCP server connects compatible AI agents to Figma Design,
FigJam, and Figma Make. It supplies structured design information such as
frames, components, layouts, variables, and metadata so an agent can produce
code and design-system-aware output from live Figma files rather than relying
only on screenshots or manually copied specifications.
What the MCP server enables
Depending on the selected server, file type, permissions, seat, and available
features, an AI agent can:
- Retrieve design context for a frame, layer, or desktop selection.
- Inspect sparse document metadata, node names, types, positions, and sizes.
- Retrieve variables, styles, components, screenshots, and image assets.
- Convert FigJam diagrams into structured context.
- Use Code Connect mappings to align generated code with real components.
- Retrieve libraries and component information from the remote server.
- Generate code in requested frameworks or languages from selected designs.
- Create or modify supported native Figma and FigJam content through remote
write-to-canvas tools. - Capture supported live web interfaces as editable Figma layers.
When to use it
Use Figma MCP when an engineering or design workflow needs accurate design
context. Common uses include implementing a selected frame, identifying design
tokens, mapping components to an existing codebase, translating FigJam
architecture diagrams, inspecting large files incrementally, creating UI
concepts on the canvas, and moving a browser-based interface into Figma for
further editing.
Connection and authentication
Figma recommends its hosted Streamable HTTP endpoint at
https://mcp.figma.com/mcp. The user signs in through Figma's OAuth flow and
grants the MCP client access. Only clients listed in Figma's MCP Catalog can
connect to the hosted server.
Figma also provides a desktop HTTP endpoint at
http://127.0.0.1:3845/mcp. It requires the current Figma desktop app, an open
Figma Design file, Dev Mode, and the desktop MCP server toggle. It does not use
a separate API key, but the app must remain running with the server enabled.
Key considerations
The remote server has the broadest capabilities and is the recommended option.
The desktop server is intended for specific organization and enterprise use
cases and supports selection-based prompting. Access follows the authenticated
user's existing file permissions. Read-tool usage is subject to per-minute and
daily or monthly limits based on plan and seat type, while specified write tools
are exempt. Some remote write capabilities are in beta and may become
usage-based paid features. Review generated code and canvas changes, avoid
exposing confidential designs, and require approval before consequential edits.
Supported Transports
streamable_http
URL: https://mcp.figma.com/mcp
streamable_http
URL: http://127.0.0.1:3845/mcp
Frequently Asked Questions
- When should an AI agent use the Figma MCP server?
- Use it when a workflow needs live design context for implementation, design-token inspection, component reuse, Code Connect mapping, FigJam diagram analysis, design-to-code generation, or supported canvas creation and editing.
- What does the Figma MCP server add to an AI agent's capabilities?
- It gives the agent structured access to permitted Figma frames, components, variables, layouts, metadata, screenshots, libraries, FigJam diagrams, and supported canvas tools instead of forcing the agent to infer everything from screenshots or static descriptions.
- What can an AI agent access or manage through Figma MCP?
- Depending on the server and permissions, the agent can retrieve design context, metadata, variables, styles, assets, libraries, Code Connect data, FigJam content, and Make resources, generate implementation code, and use supported remote tools to create or modify native Figma content.
- How is authentication configured for the Figma MCP server?
- The hosted server uses Figma's interactive OAuth flow and operates within the signed-in user's file permissions. The localhost desktop server does not require a separate API key, but it only runs while the Figma desktop app has the MCP server enabled.
- Which transport should be used for the Figma MCP server?
- Use Streamable HTTP at https://mcp.figma.com/mcp for the recommended hosted server and broadest feature set. Use the local HTTP endpoint at http://127.0.0.1:3845/mcp when the supported desktop workflow or selection-based prompting is required.