What is the Figma MCP server?
The Figma MCP server is Figma's official Model Context Protocol server. An AI agent connects to it, reads frames, variables and components from your files to generate code, and with the remote server can write content back to the canvas. Figma recommends the hosted remote server over the desktop one.
The Figma MCP server gives AI agents design information from your Figma files so they can generate code from it. Its docs also describe the other direction: agents writing native content back to the canvas.
There are two versions. The remote server runs at Figma's hosted endpoint and needs no desktop app. The desktop server runs locally from the Figma desktop app. Figma strongly recommends the remote one.
What it changes in your workflow
- Generate code from a frame. The agent pulls design context for a selected frame or layer instead of working from a screenshot alone.
- Extract design context. Variables, components and layout data come straight into your editor, which helps with design systems.
- Write to the canvas. With the right skills, an agent can build and update frames, components, variables and auto layout in your files.
- Reuse your components. Code Connect keeps generated code consistent with the components in your codebase.
- Retrieve Make resources. Code resources from Figma Make files can be passed to the agent as context.
Who it is for
Best for
- Teams that keep a design system in Figma and want generated code to follow it.
- Developers who want exact variables and layout data instead of guessing from a picture.
- Designers who want an agent to build or edit Figma content, using the remote server.
Not for
- Anyone expecting a Figma to WordPress export. The server returns design context and code, not a published page.
- Clients missing from the Figma MCP catalog. Only catalog clients can connect.
- Figma for Government users who need the remote server or write tools. Those are not available there.
Remote or desktop Figma MCP
| Remote | Desktop | |
|---|---|---|
| Where it runs | Figma's hosted endpoint | Locally, in the Figma desktop app |
| Needs the desktop app | No | Yes, with Dev Mode on a Design file |
| Auth | OAuth sign-in to Figma | Enabled inside the app, no sign-in step in the client |
| Design context | Link to a frame or layer | Current selection or a link |
| Write to canvas and code to canvas | Yes | No |
| Figma's advice | Recommended for most users | For specific organization and enterprise needs |
Use it with UiChemy
The Figma MCP server stops at design context and code. If you want the Figma file to become an editable WordPress page, UiChemy Figma to WordPress converts Figma frames directly. For the code route, see also Framelink MCP for Figma. Click Get Started on uichemy.com.
Connect Figma MCP Server: Connect an AI Agent to Figma to your AI client
claude mcp add --transport http figma https://mcp.figma.com/mcpPick a server
Use the remote server unless your organization needs the desktop one. Only clients in the Figma MCP catalog can connect to either.
Remote: Claude Code
Figma's preferred route is the plugin,
claude plugin install figma@claude-plugins-official, which bundles MCP settings and Agent Skills. The manual route isclaude mcp add --transport http figma https://mcp.figma.com/mcp. Add--scope userto use it in every project.Remote: Codex
The docs prefer the Codex app plugin. The command route is
codex mcp add figma --url https://mcp.figma.com/mcp.Remote: Cursor and VS Code
In Cursor, run
/add-plugin figma. In VS Code, add the server to mcp.json with the URL and type http, as in the config shown here.Sign in
Authenticate with OAuth when your client asks. In Claude Code, run /mcp, select figma, choose Authenticate, then Allow Access. A success message reads: Authentication successful. Connected to figma.
Desktop: enable the server
Open the Figma desktop app and a Design file, switch to Dev Mode with Shift+D, and click Enable desktop MCP server in the inspect panel. It runs at http://127.0.0.1:3845/mcp.
Desktop: connect your client
In Claude Code, run
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp. Other editors take the same URL in an mcpServers entry named figma-desktop.Prompt with a link
On the remote server, copy a link to a frame or layer and paste it into your prompt. The client extracts the node id from the link.
Client configuration
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}Endpoints and ports
https://mcp.figma.com/mcpHosted by Figma. OAuth sign-in required.http://127.0.0.1:3845/mcpLocal, served by the Figma desktop app when enabled in Dev Mode.https://developers.figma.com/docs/figma-mcp-server/Figma's developer documentation for the server.https://www.figma.com/mcp-catalog/The list of clients allowed to connect.What you can do with it
- Remote and desktop serversOne hosted server needs no desktop app, and a local desktop server serves organizations with specific needs. Figma recommends the remote server for most users.
- Design to codeget_design_context returns React and Tailwind by default, and the prompt can ask for Vue, plain HTML and CSS or another target.
- Design system awarenessVariables, components and layout come through, and Code Connect maps Figma components to your real code so output reuses them.
- Write to canvasRemote only: agents can create and edit frames, components, variables and auto layout in Design, FigJam and Slides files.
- Code to canvasgenerate_figma_design sends live UI from your running app into Figma as editable layers, in select clients.
- Make and FigJam supportCode resources from Figma Make files can be retrieved, and FigJam diagrams can be generated from Mermaid or read as XML.
- Motion dataget_motion_context returns keyframe animation data plus CSS keyframes and motion.dev snippets for a design with motion.
- Figma for GovernmentSupported through the desktop server only, with eight listed tools, and no write to canvas or agent skills.
Tools it exposes
get_design_context
Returns design context for a layer or selection. Default output is React and Tailwind, and you can ask for another framework or your own components in the prompt.
get_metadata
Returns a sparse XML outline of a selection with layer ids, names, types, positions and sizes. Useful for very large designs.
get_screenshot
Takes a screenshot of a selection in Design, FigJam or Slides files to help preserve layout fidelity.
get_variable_defs
Returns the variables and styles used in a selection.
download_assets
Downloads exports and original source images from up to 20 nodes per call. Remote server only.
use_figma
General-purpose tool to create, edit, delete and inspect content in Design, FigJam and Slides files. Remote server only, and it works best with Figma's skills.
generate_figma_design
Sends live UI from a web app or site into Figma as design layers. Remote only, for select clients.
generate_diagram
Generates a FigJam diagram from Mermaid. Remote server only.
search_design_system
Searches your libraries for components, variables and styles. Remote server only.
get_code_connect_map
Returns mappings from Figma node ids to code components. add_code_connect_map creates them.
get_motion_context
Returns keyframe animation data with CSS keyframes and motion.dev snippets.
whoami
Returns the signed-in user's identity, plans and seat type on each plan. Remote server only.
Frequently asked questions
What is the Figma MCP server?
It is Figma's official Model Context Protocol server. An AI agent connects to it, reads design context from your Figma files such as frames, variables and components, generates code from it, and with the remote server can write content back to the canvas. It is documented on Figma's developer site.
Should I use the remote or the desktop server?
Figma strongly recommends the remote server. It connects to Figma's hosted endpoint without the desktop app and has the broadest feature set. The desktop server is described for specific organization and enterprise needs, and it requires the desktop app with Dev Mode on a Design file.
Which clients can connect?
Only clients listed in the Figma MCP catalog can connect. The docs give setup steps for Claude Code, Codex, Cursor and VS Code, and Xcode 27 beta through a plugin. If your client is not in the catalog, Figma points developers to a waitlist.
Does it need a paid Figma plan?
The docs pages used for this entry do not state plan or seat requirements beyond noting that some tools respect your seat type, and that generate_figma_design is exempt from the standard rate limits. Check Figma's current plan and seat details first. The whoami tool returns the plans and seat type on your account.
How is it different from Framelink MCP for Figma?
Figma's server is first-party, with remote and desktop options, Code Connect and write tools. Framelink MCP for Figma is an open-source community server that reads Figma data with a personal access token. Both return design data to an agent, and they differ in setup and extra features.
Can I design with it, not just read?
Yes, on the remote server. use_figma creates and edits content in Design, FigJam and Slides files, and the docs say it works best with Figma's skills. Penpot offers a comparable route for an open-source design tool, see Penpot MCP.
Does it produce a WordPress page?
No. It returns design context and code. To turn Figma frames into editable WordPress pages, UiChemy Figma to WordPress does that directly. Click Get Started on uichemy.com to begin. For a code-first route from a generated design, see image-to-code.