figmcp MCP server

figmcp

Design to 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, 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. Everything else gets React + Tailwind. 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

Shortened. The full README is on GitHub.