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 setupNeeds Node.js 18+ and Figma Desktop
Works with any MCP client
Generates code for
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.
Everything is read from Figma Desktop through the plugin. No personal access token to create.
No rate limits. Ask for the same frame a hundred times while you iterate.
The plugin talks to a server on your machine, guarded by a pairing code. No cloud relay.
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
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,
),
),
],
),
),
),
);
}
}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
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;Everything the agent needs from a design.
Full design context
Assets and SVGs
Variables and styles
Code Connect
Offline snapshots
Screenshots to verify
Design on the canvas
Paired and local
Updates itself
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.
Run setup
Registers the server with Claude Code, copies the Figma plugin to your home folder and prints your pairing code.
Import the plugin once
In Figma Desktop: Plugins › Development › Import plugin from manifest…, then pick the manifest setup copied.
Pair and ask
Run Plugins › Development › figmcp, enter the code and wait for the green dot. Then ask your agent.
Just ask.
No commands to learn. Copy one of these to get started, then talk to your agent the way you normally do.
- >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 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
- >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
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_contextReadReference code, assets and a screenshot for a node. The main tool.
get_metadataReadLayer tree as XML: ids, types, names, positions and sizes.
get_screenshotReadPNG of a node or the selection, up to 2x its size.
get_variable_defsReadVariables and styles used by a node, resolved for its mode.
download_assetsReadRenders, original image fills and vector SVGs.
verify_codeReadRender Flutter code and compare it with the design.
use_figmaWriteRun plugin API scripts to create and edit designs.
search_design_systemWriteComponents, styles and variables to reuse.
place_imageWritePut a local image or SVG into the file.
get_code_connect_mapConnectWhich instances map to which code components.
add_code_connect_mapConnectMap a design component to a code component.
remove_code_connect_mapConnectRemove a component mapping.
whoamiStatusConnection, pairing code, open file, selection, snapshots.
save_design_exportStatusWrite a full design export of a node to JSON.
import_design_exportStatusLoad an export JSON as a snapshot.
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.
| figmcp | Figma's MCP server | |
|---|---|---|
| Where reads come from | A plugin in Figma Desktop, over localhost | Figma's servers |
| Read limits | None | Daily and per-minute limits on Dev and Full seats; about 20 calls a month on Starter, View or Collab |
| Plan needed | Any plan, including free | A paid Dev or Full seat for regular use |
| Flutter | Native Flutter widgets, assets saved to your pubspec folders | React + Tailwind reference by default |
| React + Tailwind | Yes | Yes |
| Design in Figma | Yes, with use_figma | Yes |
| Reads with Figma closed | Yes, from saved snapshots | No |
| Code Connect | Local mappings file, any plan | Figma Code Connect |
Based on Figma's published rate limits and access docs, October 2026. Not affiliated with Figma, Inc.
Questions, answered.
Is it free?
Do my designs leave my machine?
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?
Does it work on Windows?
Does it work without Claude Code?
How is it different from Figma's own MCP server?
Where do I report a bug?
whoami.Open Figma. Start building.
One command sets up the server and the plugin.
npx -y @irshad.io/figma-local-mcp@latest setup