Best for
- AI developers who want rapid prototyping in Figma
- Teams needing to convert designs to React/Vue/Swift code
- Designers using AI IDEs like Claude Code or Cursor
F
Figma UI MCP
Community
Bidirectional Figma MCP bridge — AI draws UI on Figma canvas and reads designs back
GitHub source repository ↗
59FMRS · C
Figma UI MCP is a feature-rich bidirectional bridge, offering a strong toolset for AI-driven design, but requires Figma Desktop and local configuration.
Figma UI MCP is a bidirectional MCP server that lets AI assistants (e.g., Claude Code, Cursor, Windsurf, VS Code Copilot, etc.) draw UI directly on the Figma canvas and read existing designs back as structured data, screenshots, or code-ready tokens. No Figma API key required — works entirely over localhost. Requires Figma Desktop; the plugin communicates with the MCP server over localhost:38451 via HTTP long polling.
Tools
figma_status
Check plugin connection status and active sessions
figma_write
Draw or modify UI on the Figma canvas
figma_read
Extract design data, screenshots, and SVG
figma_docs
Get full API reference and examples
figma_rules
Generate a design system rule sheet — tokens, typography, components
Setup
- Add the MCP server to your AI client, e.g., in Claude Desktop config: npx -y figma-ui-mcp. 2. Download and unzip plugin.zip, import manifest.json in Figma Desktop via Plugins → Development → Import plugin from manifest... 3. Restart your AI client and re-link the plugin. 4. Run the plugin and wait for the green dot to confirm connection.
Fit and risk
Not for
- Users on Figma web only (localhost not supported)
- Distributed teams needing cloud API access
- Scenarios with strict design confidentiality (consider running locally)
Required permissions
- Communicate with the Figma plugin via local HTTP
- Access the file system and execute node scripts
- May need network access to load icon libraries
- Create, modify, and delete nodes in Figma
Risks and side effects
- Local HTTP service could be exploited, though it binds localhost and uses an allowlist
- VM sandbox is not bulletproof; run in trusted environments
- Plugin updates require manual re-linking; may be missed
Troubleshooting
- Ensure you use Figma Desktop, not the web app
- Check that the plugin is running and the green dot is lit
- Restart your AI client and the Figma plugin
- Check that the npm package is up to date
Use cases
Generate UI screens in Figma using natural language prompts
Read existing designs and convert them to code
Iteratively modify nodes during the design process
Generate design system tokens and component specs
Supported clients
Claude DesktopFull support
Claude CodeFull support
CursorFull support
VS CodeFull support
WindsurfFull support
AntigravityFull support