figmcp

Design and code, locally.

Turn Figma frames into Flutter and React code, and let your coding agent design in Figma.

No Figma API calls. No rate limits.

Website · Docs · Installation · Tools · Changelog

---

figmcp is a local MCP server that gives your coding agent the Figma file you have open in Figma Desktop. A development plugin streams the file to a server on your machine over localhost, so reads never touch the Figma REST API: no access token, no quota, no rate limit.

• Design to code. Flutter widgets for Flutter projects, HTML + Tailwind for static sites, React + Tailwind for everything else, with the assets and a screenshot to compare against.
• Design in Figma. The agent creates and edits frames in the open file with Figma plugin API scripts, one undo step per script.
• Your components. Map design components to code components with Code Connect.
• Works offline. Read saved snapshots when the plugin is closed.
• Any plan. Works on every Figma plan, including the free Starter plan. No Dev Mode seat needed.

Works with Claude Code, Cursor, Claude Desktop and any MCP client that runs stdio servers.

Quick start

Needs Node.js 18+ and Figma Desktop on macOS or Windows.

1. Run setup

npx -y @irshad.io/figma-local-mcp@latest setup

It registers the server with Claude Code, copies the Figma plugin to your home folder, and prints your pairing code and the config for other MCP clients.

2. Import the plugin (once)

In Figma Desktop, go to Plugins › Development › Import plugin from manifest… and choose:

On macOS, press ⌘ ⇧ G in the file picker and paste the path. On Windows, paste it into the File name box.

3. Pair and ask

Restart your coding agent. In Figma Desktop, run Plugins › Development › figmcp and enter the pairing code. The dot turns green once it's connected. Then select a frame and ask:

implement the selected Figma frame

Keep the plugin window open while you work. Full guide: figmcp.web.app/docs/installation.

Usage

Design to code

Select a frame, or paste a Figma link that has a node-id:

implement this frame as a Flutter screen and match the spacing exactly

build this frame as a React component with Tailwind, using our existing Button compare your screen with the Figma screenshot and fix the differences

Projects with a pubspec.yaml get Flutter widgets, and SVGs and images are saved into the asset folders the pubspec declares. Static sites get HTML + Tailwind, and everything else gets React + Tailwind. React output uses the real font families, declares the design's variables as CSS (with a Tailwind 4 @theme), writes repeated items as data with .map() and names reused text styles, names assets after their layers with copy commands for public/figma, turns prototype taps, layer names and placeholders into buttons, links, landmarks and inputs, draws phone frames as screens that fill the viewport and desktop frames as pages whose full-width sections stretch. Its classes work in Tailwind 3.4 and 4. The code is a reference that your agent adapts to your project. More →

Design in Figma

Open the file in Figma Desktop, run the plugin and ask:

design a settings screen for a 390x844 phone in Figma

add a dark mode version of the selected frame next to it

The agent builds the design with use_figma and checks each step with a screenshot. Each script is one undo step. More →

Code Connect

map the selected button to AppButton in lib/widgets/app_button.dart

which components in this frame are not mapped yet?

Mapped instances come back as your own components. Mappings are saved in .figma-local/code-connect.json in your project. More →

MCP clients

Claude Code is registered by setup. Restart it and check with /mcp.

Cursor, Claude Desktop and other clients: add the config that setup prints. It looks like this, with paths for your machine:

{

"mcpServers": { "figma-local": { "command": "/usr/local/bin/node", "args": ["/Users/you/.figma-local-mcp/app/node_modules/@irshad.io/figma-local-mcp/bin/figma-local-mcp.js"] } } }

Step-by-step for each client, on macOS and Windows: figmcp.web.app/docs/configuration.

Tools

Arguments for each tool: figmcp.web.app/docs/tools.

How it works

Figma Desktop  ── WebSocket 127.0.0.1:3947 ──▶  figma-local-mcp  ── MCP stdio ──▶  Coding agent

(dev plugin) paired with your code (node server) (Claude Code, Cursor, …)

The plugin reads the open file with the Figma plugin API and runs the scripts your agent sends. The server turns that into code, assets, screenshots and metadata. When the plugin is closed, reads fall back to the newest saved snapshot. More →

Configuration

Set these in the env of your MCP client config.

Update

npx -y @irshad.io/figma-local-mcp@latest setup

Then restart your coding agent and run the plugin again. The plugin updates itself, so there's no need to import it again.

Troubleshooting

• The dot stays grey: start your coding agent first, then run the plugin again.
• Lost the pairing code: run setup again, or ask your agent to run whoami.
• `use_figma` can't edit the file: switch the file from Dev Mode back to Design mode.

More fixes: figmcp.web.app/docs/troubleshooting. Still stuck? Open an issue with the output of whoami.

Development

npm install

npm test

To work on the site: cd web && npm install && npm run dev. To publish it: npm run deploy.

License

MIT

Figma is a trademark of Figma, Inc. This project is not affiliated with Figma, Inc.