M
MCP Directory CURATED DIRECTORY
911 MCP servers indexed
中文
← Back to directory
F

Figma UI MCP

Community
Bidirectional Figma MCP bridge — AI draws UI on Figma canvas and reads designs back
How to install ↓ Compare GitHub source repository ↗
Category
Collaboration #12 of 55
Stars
★ 264 Popular
Transport
stdio (local process)
Runtime
Node.js
Credentials
No credential needed
License
MIT
Last commit
Tools
5
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.

Strongest · Documentation 13/20 Weakest · Reliability 10/20

Reliability
10/20
Security and permissions
12/20
Maintenance
12/20
Documentation
13/20
Setup experience
12/20
Why each score
Reliability 10/20
Evidence is only from README and manifest; credibility is limited. The docs describe a complex bidirectional bridge architecture (stdio MCP server + localhost HTTP polling + Figma plugin) but no tests, CI config, or verifiable execution evidence. Tool lists and operation definitions appear thorough, but no source-level verification. Since nothing is executed, reliability is plausible but not solid; deduction for lack of test evidence and potential edge cases.
Security and permissions 12/20
Evidence shows server binds to localhost, not exposed to network, VM sandbox restricts require/process/fs/fetch, and operation allowlist and timeouts exist. These are positive security designs. Install examples contain real npx commands, no tokens, no red line triggered. However, permissions and confirmation mechanisms (e.g., deletes) are not clearly documented, and network boundaries and external dependencies (icon libraries) are not fully disclosed, so deduction.
Maintenance 12/20
Repo is active, high stars, MIT license, frequent version updates. But issue response, dependency update frequency, or security response channel cannot be verifiably confirmed. No specific evidence of vulnerability handling. Deduction for limited governance visibility.
Documentation 13/20
README is detailed, including install, config examples, use cases, architecture, and update steps, covering multiple clients. But troubleshooting section is missing, relies on manual plugin linking, and does not state limitations (e.g., desktop-only). Docs are deep but assumptions and limitations not fully disclosed.
Setup experience 12/20
Config examples for multiple clients provided, but installation requires downloading and manually importing the Figma plugin and requires Figma Desktop, adding complexity and fragility. No automated tests to verify installation steps, so deduction.

Static review · not runListed 2026-08-07

Read the FMRS scoring method →

Fit and risk

What it can accessRuns commands or codeUses the network

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

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

Setup

Before you start

Runtime：Node.js

  1. 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.

Check that it works

Tell your AI client "Connect to figma-ui-mcp" so it calls figma_status; a response showing the connected file name and plugin version confirms the setup. The Figma UI MCP Bridge plugin must be running in Figma Desktop (green dot = connected).

Troubleshooting

  1. Ensure you use Figma Desktop, not the web app
  2. Check that the plugin is running and the green dot is lit
  3. Restart your AI client and the Figma plugin
  4. Check that the npm package is up to date

Things to try

Once connected, you can ask your AI assistant things like:

  • Connect to figma-ui-mcp
  • Draw a mobile login screen with social login buttons
  • Read the selected frame and convert it to Tailwind CSS
  • Take a screenshot of the current frame and describe the design

Tools 5

figma_status read-only
Check plugin connection status and active sessions
figma_write writes
Draw or modify UI on the Figma canvas
figma_read read-only
Extract design data, screenshots, and SVG
figma_docs read-only
Get full API reference and examples
figma_rules read-only
Generate a design system rule sheet — tokens, typography, components

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 Desktop
Claude Code
Cursor
VS Code
Windsurf
Antigravity

Listed from the project's documentation, not tested by this site.

Overview

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.

Similar servers

Compare with other MCP servers

Source revision 2c8644ba178c Data synced 2026-10-19 Read the FMRS scoring method