MetaSkill + Submit
⇄ MCP SERVER ★

Figma MCP

Bring Figma design context — components, variables, layout — into code generation.

Open ↗

Install

# Claude Code
claude mcp add --transport http figma https://mcp.figma.com/mcp

# Claude apps / ChatGPT: add a custom connector with this URL
https://mcp.figma.com/mcp

# Cursor / VS Code (mcp.json)
"figma": { "url": "https://mcp.figma.com/mcp" }

# Desktop app server: http://127.0.0.1:3845/mcp

Commands change between releases — if something fails, check the official README.

About Figma MCP

Figma's MCP server gives agents structured design context from your files so generated code matches components, tokens and layout. Use the remote server, or the desktop server while Figma is open in Dev Mode.

FAQ

What is Figma MCP?

Bring Figma design context — components, variables, layout — into code generation.

How do I install Figma MCP?

Run: claude mcp add --transport http figma https://mcp.figma.com/mcp. Full steps are in the Install section on this page.

Which agents does Figma MCP work with?

Claude Code, Claude apps, Cursor, VS Code & Copilot, OpenAI Codex, Windsurf.

Is Figma MCP free?

It is free to start; the connected service has paid plans.

Alternatives to Figma MCP?

Framelink Figma MCP, frontend-design, UI UX Pro Max.

Similar to Figma MCP

More design & frontend →
⇄ MCP SERVER

Framelink Figma MCP

Community Figma server that simplifies design data for coding agents.

claude mcp add figma-framelink -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio
Claude CodeClaude appsCursor +4
◆ SKILL

frontend-design

Pushes agents toward distinctive, production-grade UI instead of generic layouts.

/plugin marketplace add anthropics/skills
Claude CodeClaude appsOpenAI Codex +3
◆ SKILL

UI UX Pro Max

Design-intelligence skill for building professional UI/UX across platforms.

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Claude CodeClaude appsOpenAI Codex +3