@bromso/figma-mcp
v1.6.0
Published
Bridge between AI MCP clients and Figma. Stdio shim + daemon + bundled bridge plugin.
Maintainers
Readme
@bromso/figma-mcp
MCP server that lets your AI design in Figma.
figma-mcp is a Model Context Protocol server that bridges any MCP-aware AI client — Claude Code, Claude Desktop, Cursor, Windsurf, VS Code Copilot — to a running Figma instance. Through a bundled Figma plugin it exposes ~25 tools across selection extraction, variable read/write, console capture, and canvas mutation. Designed for developers who use AI coding agents and design in Figma.
Quick start
npx @bromso/figma-mcp setup # detect AI clients, write MCP configs
# Open Figma desktop and drag-import the bundled plugin
figma-mcp doctor # verify daemon liveness, plugin pairing, configsFor a step-by-step walkthrough with screenshots, see the quickstart guide. For per-client install instructions, see the client matrix.
Supported AI clients
| Client | Config path | Setup writes |
|-------------------|--------------------------------------------------------------------------|-----------------------------|
| Claude Code | ~/.claude.json | mcpServers.figma |
| Claude Desktop | ~/Library/Application Support/Claude/claude_desktop_config.json* | mcpServers.figma |
| Cursor | ~/.cursor/mcp.json | mcpServers.figma |
| Windsurf | ~/.codeium/windsurf/mcp_config.json | mcpServers.figma |
| VS Code Copilot | ~/Library/Application Support/Code/User/mcp.json* | mcpServers.figma |
* macOS path; Linux uses ~/.config/..., Windows uses %APPDATA%.
figma-mcp setup --client <id> configures one client only. figma-mcp setup --dry-run previews actions without writing. figma-mcp setup --cloud pairs through the optional cloud relay for environments without local IPC.
What's in the box
- Stdio shim + per-user daemon. First invocation forks a daemon; subsequent AI clients reuse it via Unix socket / named pipe.
- Bundled bridge plugin. Drag-imported once; pairs over loopback WebSocket.
figma-mcp --print-pathprints the manifest location for--open-figmato reveal in Finder/Explorer. - Optional cloud relay. Cloudflare Worker + Durable Objects + WebSocket Hibernation. Used when the AI client and the Figma user aren't on the same machine.
- Tool packs.
extract(selection, components, variables, styles),variables(read/write/streamed import),console(plugin-sandbox log capture + query),design(canvas mutation: shapes, text, fills, components). figma-mcp doctor. Parallel checks: daemon liveness, plugin pairing, AI-client config drift, recent errors, socket conflicts.--jsonfor machine consumption.
Architecture
AI client (Claude/Cursor/etc.)
│
│ stdio MCP
▼
figma-mcp shim ──────► daemon ◄──── shim ◄── another AI client
│
WebSocket │ (loopback or cloud relay)
▼
Bridge plugin (Figma sandbox)
│
figma.* API calls
▼
Figma fileA single daemon multiplexes multiple AI clients onto one bridge-plugin connection. See Architecture for depth.
Project layout
The published artifact is @bromso/figma-mcp from apps/mcp-server. The repo is a Turborepo monorepo with internal packages for protocol, transport, figma-adapter, and tool packs. See CONTRIBUTING.md for the full layout.
Versioning
Releases are managed by Changesets. Every user-facing change adds a changeset; merging to master triggers the release workflow which version-bumps and publishes to npm. See CONTRIBUTING.md.
Links
License
MIT — see LICENSE.
