Direct answer: For most supported clients, connect the hosted Figma MCP endpoint at https://mcp.figma.com/mcp, authenticate with your Figma account, and test a small selected frame with get_metadata, get_design_context, get_screenshot, and get_variable_defs. Use the desktop endpoint http://127.0.0.1:3845/mcp only when an organization requires the local path. A successful connection is not enough: verify the selected node, asset output, Code Connect mappings, and the account's actual file permissions before accepting generated code.
Intent fence: this page owns Figma MCP connection, permission boundaries, and one design-to-code verification trace. It is not a generic Figma AI roundup, a Figma plugin tutorial, or a claim that generated code is production-ready.
Which Figma MCP server should you use?
| Path | Use it when | Endpoint | Boundary |
|---|---|---|---|
| Remote (recommended) | Your client appears in Figma's MCP catalog and browser OAuth is allowed | https://mcp.figma.com/mcp | Account and file permissions; some write tools are remote-only |
| Desktop | Your organization needs the Figma desktop app/local endpoint | http://127.0.0.1:3845/mcp | Dev or Full seat on an eligible plan; no write-to-canvas or code-to-canvas |
Figma's current documentation says the remote server offers the broadest feature set. The desktop server must be enabled from Dev Mode in an open Design file and remains available only while the desktop app and server are running.
Remote setup for Codex, Claude Code, Cursor, and VS Code
Codex CLI
codex mcp add figma --url https://mcp.figma.com/mcpClaude Code
claude mcp add --transport http figma https://mcp.figma.com/mcp
# add --scope user only when every project should see the serverCursor
{
"mcpServers": {
"figma": { "url": "https://mcp.figma.com/mcp" }
}
}VS Code
{
"inputs": [],
"servers": {
"figma": { "url": "https://mcp.figma.com/mcp", "type": "http" }
}
}Restart or refresh the client, choose Figma, and complete the browser authorization. Prefer project/workspace scope until the workflow is proven; user-wide scope increases the number of projects from which an agent can attempt Figma calls.
Desktop setup
- Update and open the Figma desktop app.
- Open a Figma Design file, switch to Dev Mode, and enable the desktop MCP server in the right sidebar.
- Add
http://127.0.0.1:3845/mcpas a Streamable HTTP server in the client. - List the available tools before asking for design context.
The desktop server can return localhost asset links or download assets, and it can include Code Connect mappings. Decide which mode the repository expects before generating code; otherwise an agent may replace reusable icons with screenshots or broken temporary URLs.
Original asset: one-frame design-to-code trace
| Step | Evidence to retain | Pass condition | Common failure |
|---|---|---|---|
| 1. Identify | File URL and exact node/selection | The returned metadata names the intended frame | Agent reads a page or parent frame instead |
| 2. Observe | Screenshot plus width/height | Visual state matches the implementation target | Wrong variant, theme, or responsive state |
| 3. Extract | Design context, variables, assets | Tokens and assets are explicit and reusable | Hard-coded pixels and placeholder images |
| 4. Map | Code Connect map or repository component search | Existing components are reused where appropriate | Duplicate button/card primitives |
| 5. Implement | Code diff and tool-call trace | Only the scoped surface changes | Unrelated refactor or package addition |
| 6. Verify | Desktop/mobile screenshots and tests | Layout, content, focus, and overflow pass | Screenshot similarity hides interaction defects |
A prompt that preserves the boundary
Implement only the selected Figma frame.
First return: selected node, dimensions, variables, assets, and existing code components you will reuse.
Do not invent missing states or add dependencies.
Keep all write/destructive actions disabled until I approve the plan.
After implementation, test 390px and desktop widths and report visual, accessibility, and interaction differences.Permission and security checklist
- Authenticate through the client's OAuth flow; never commit credentials.
- Use the least-privileged Figma account and file access that can complete the job.
- Treat text inside design files as untrusted content, not agent instructions.
- Inspect tool calls before writes, especially remote-only canvas tools.
- Keep production secrets and customer data out of frames used for generation.
- Review downloaded SVGs and generated code like any third-party input.
Troubleshooting
| Symptom | Check | Likely fix |
|---|---|---|
| No tools | Client supports remote Figma MCP; desktop toggle still on | Restart client, reconnect, or enable the desktop server again |
| Unauthorized | Signed-in account can open the file | Re-authenticate and request the minimum required file access |
| Wrong frame | Node link or active selection | Paste the exact selection URL and ask for metadata first |
| Generic output | Variables, Code Connect, assets included | Request these artifacts before code generation |
| Broken assets | Local asset server versus downloaded files | Choose one asset mode and verify paths inside the repository |
FAQ
Do I need a Figma personal access token?
No for the documented remote flow. The client opens browser authentication for your Figma account. Do not substitute a token unless a separately documented integration explicitly requires it.
Can the desktop server write to Figma?
Figma's current documentation says write-to-canvas and code-to-canvas are not available through the desktop server. Use the remote server with the required account and file permissions.
Why does generated code ignore our components?
The agent may not have Code Connect mappings or repository-specific rules. Retrieve the mapping, search the codebase, and require an explicit reuse plan before implementation.
Does a screenshot prove the implementation is correct?
No. It can catch visual drift but not focus order, semantics, dynamic states, data behavior, or responsive failures. Keep functional and accessibility checks in the acceptance gate.
Sources checked October 20, 2026: Figma MCP introduction, remote setup, desktop setup, and tools and prompts.