figmcp

Design to code,
locally.

A local MCP server that puts the Figma file you have open into your coding agent. Turn frames into Flutter and React code, or let the agent design on the canvas. No Figma API calls, no rate limits.

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

Needs Node.js 18+ and Figma Desktop

Onboarding · 390×844
coding agent
>

Generates code for

SwiftUI
Soon
Android XML
Soon
Jetpack Compose
Soon
Laravel
Soon
Why local

Your design, read straight from the canvas.

A development plugin streams the open file over localhost, so reads never touch the Figma REST API. No tokens, no quotas, no waiting.

0Figma API calls

Everything is read from Figma Desktop through the plugin. No personal access token to create.

∞requests

No rate limits. Ask for the same frame a hundred times while you iterate.

127.0.0.1only

The plugin talks to a server on your machine, guarded by a pairing code. No cloud relay.

Read

Frames in, code out.

Select a frame or paste a link with node-id. You get reference code for your stack, the assets it uses and a screenshot to check against.

  • Flutter widgets when the project has a pubspec.yaml
  • React + Tailwind for everything else
  • SVGs and images saved into the folders your project declares
  • Your own components named, through Code Connect
onboarding_screen.dart
class OnboardingScreen extends StatelessWidget {
  const OnboardingScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFFFFF),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SvgPicture.asset('assets/svg/hero.svg', height: 256),
              const SizedBox(height: 32),
              const Text(
                'Design to code, locally',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Write

Prompt in, design out.

Ask for a screen and the agent builds it in the open file with Figma plugin API scripts, then takes a screenshot to check its work. It reuses your components, styles and variables.

  • Auto layout, real text and web images
  • Each script is one undo step in Figma
  • No Dev Mode seat needed
use_figma1 undo step
const frame = figma.createFrame();
frame.name = "Login";
frame.resize(390, 844);
frame.layoutMode = "VERTICAL";
frame.itemSpacing = 20;
frame.paddingLeft = frame.paddingRight = 24;

await figma.loadFontAsync({ family: "Inter", style: "Bold" });
const title = figma.createText();
title.fontName = { family: "Inter", style: "Bold" };
title.characters = "Welcome back";
frame.appendChild(title);

figma.viewport.scrollAndZoomIntoView([frame]);
return frame;
Features

Everything the agent needs from a design.

Full design context

Layout, auto layout, paints, effects, text styles, components and interactions, turned into code that follows the structure of the frame.

Assets and SVGs

Exported renders, original image fills and SVGs of vector layers, saved where your project expects them.

Variables and styles

Design tokens resolved for the node's own mode, ready to map to your theme.

Code Connect

Map design components to your code components once. Instances come back as your own widgets.

Offline snapshots

Save a frame as a snapshot and keep reading it with the plugin closed.

Screenshots to verify

Every read can include a screenshot, so the agent compares its output with the design instead of guessing.

Design on the canvas

The agent creates and edits frames in the file you have open, one undo step per script.

Paired and local

The plugin connects only to localhost and needs your pairing code.

Updates itself

Run setup again to update. The plugin refreshes in place, no re-import.
How it works

Three steps, then just ask.

The plugin in Figma Desktop and the MCP server on your machine talk over a local WebSocket. Your agent talks to the server.

Figma Desktop
development plugin
WebSocket · 127.0.0.1:3947
figma-local-mcp
node server
MCP · stdio
Coding agent
Claude Code, Cursor, …
01

Run setup

Registers the server with Claude Code, copies the Figma plugin to your home folder and prints your pairing code.

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

Import the plugin once

In Figma Desktop: Plugins › Development › Import plugin from manifest…, then pick the manifest setup copied.

~/.figma-local-mcp/plugin/manifest.json
03

Pair and ask

Run Plugins › Development › figmcp, enter the code and wait for the green dot. Then ask your agent.

> implement the selected Figma frame
Prompts

Just ask.

No commands to learn. Copy one of these to get started, then talk to your agent the way you normally do.

Design to code
  • >implement the selected Figma frame
  • >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
Design in Figma
  • >design a settings screen for a 390x844 phone in Figma
  • >add a dark mode version of the selected frame next to it
  • >turn this list into an auto layout component with three variants
Components and tokens
  • >map the selected button to AppButton in lib/widgets/app_button.dart
  • >which components in this frame are not mapped yet?
  • >list the colour and spacing variables this frame uses and add them to our theme
Tools

Twelve tools. One local server.

Familiar names for anyone who has used a Figma MCP before, so existing prompts and skills keep working.

get_design_contextRead

Reference code, assets and a screenshot for a node. The main tool.

get_metadataRead

Layer tree as XML: ids, types, names, positions and sizes.

get_screenshotRead

PNG of a node or the selection, up to 2x its size.

get_variable_defsRead

Variables and styles used by a node, resolved for its mode.

download_assetsRead

Renders, original image fills and vector SVGs.

verify_codeRead

Render Flutter code and compare it with the design.

use_figmaWrite

Run plugin API scripts to create and edit designs.

search_design_systemWrite

Components, styles and variables to reuse.

place_imageWrite

Put a local image or SVG into the file.

get_code_connect_mapConnect

Which instances map to which code components.

add_code_connect_mapConnect

Map a design component to a code component.

remove_code_connect_mapConnect

Remove a component mapping.

whoamiStatus

Connection, pairing code, open file, selection, snapshots.

save_design_exportStatus

Write a full design export of a node to JSON.

import_design_exportStatus

Load an export JSON as a snapshot.

Compare

Local, next to Figma's own MCP.

Both connect your agent to Figma. This one reads through a plugin on your machine, so reads are never metered.

figmcpFigma's MCP server
Where reads come fromA plugin in Figma Desktop, over localhostFigma's servers
Read limitsNoneDaily and per-minute limits on Dev and Full seats; about 20 calls a month on Starter, View or Collab
Plan neededAny plan, including freeA paid Dev or Full seat for regular use
FlutterNative Flutter widgets, assets saved to your pubspec foldersReact + Tailwind reference by default
React + TailwindYesYes
Design in FigmaYes, with use_figmaYes
Reads with Figma closedYes, from saved snapshotsNo
Code ConnectLocal mappings file, any planFigma Code Connect

Based on Figma's published rate limits and access docs, October 2026. Not affiliated with Figma, Inc.

FAQ

Questions, answered.

Is it free?
Yes. The server and the plugin are free to use, with no usage limits and no account to create.
Do my designs leave my machine?
The plugin sends design data only to the server on your own computer, over 127.0.0.1, and only after you enter your pairing code. From there, your coding agent sends what it needs to its model, the same as any file it reads in your project.
Which Figma plan do I need?
Any plan, including the free Starter plan. You need Figma Desktop to run the development plugin, and designing in Figma needs edit access to the file. No Dev Mode seat is needed.
Does it work on Windows?
Yes. It works on macOS and Windows with Node.js 18 or newer and Figma Desktop. The docs switch paths and commands between the two.
Does it work without Claude Code?
Yes. Any MCP client that runs stdio servers works, including Cursor and Claude Desktop. Setup registers Claude Code automatically and prints the config for the others. See client setup.
How is it different from Figma's own MCP server?
It reads the file through a plugin on your machine instead of Figma's servers, so there are no read limits and no paid seat is needed. It also writes native Flutter code and keeps offline snapshots. See the comparison above.
Where do I report a bug?
Open an issue on GitHub with the output of whoami.

Open Figma. Start building.

One command sets up the server and the plugin.

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