Provides two-way integration with Figma through its Plugin API. It lets agents read the design selection or node tree and render or patch frames, text, shapes, instances, SVGs, and images; find and select layers; manage pages; export screenshots and assets; and read or define variables, modes, and styles.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Mirra read my selected Figma frame and render a dark mode version"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Two-way MCP server for Figma: an agent reads a design or a FigJam board and renders one back through the Figma Plugin API, so it needs no REST token and has no monthly call limit.
https://github.com/user-attachments/assets/f736473e-24c4-486f-980d-e6c90bf4d63a
npx @ttsalpha/mirra initThen restart your agent.
Requires Figma Desktop (macOS or Windows) and Node 24+.
Adds Mirra to Claude Desktop, Claude Code, Cursor, VS Code and Antigravity (--no-config skips)
Figma open during init: import by hand, Plugins → Development → Import plugin from
manifest… → ~/.mirra/plugin/manifest.json
Upgrading: run init again
Related MCP server: @nvanexan/figma-mcp
Open a Figma or FigJam file
Run Plugins → Development → Mirra
Keep the panel open
The panel reads Disconnected until your agent has started Mirra. Open your agent; if the panel
still doesn't connect, run npx @ttsalpha/mirra doctor.
Tool | What it does |
| Build a whole screen, or a FigJam board, from one declarative tree |
| Read the selection, or a node, back as that same tree |
|
|
| Locate layers by name, kind or key, and select them |
| List the pages, add one, or switch to one |
| Export a layer as PNG and hand the image back |
| List variables and styles, with the |
| Create or update variables, modes, aliases and paint/text/effect styles |
| Write layers to disk as PNG or SVG |
| Check the connection and report the open file and editor |
| Run Plugin API code; off by default, see below |
mirra_render and mirra_read share one format, so an agent can write code from what it reads.
Nodes: frame, text, rect, ellipse, instance, svg, image
Flexbox-like: layout: {dir, gap, pad, …}
w / h: a number, "fill" or "hug"
"$name" binds a field to a variable
key lets mirra_patch address a node later
{
"type": "frame",
"key": "card",
"layout": { "dir": "vertical", "gap": 12, "pad": 16 },
"fill": "#ffffff",
"radius": 12,
"children": [
{ "type": "text", "text": "Welcome back", "size": 24 },
{ "type": "rect", "w": "fill", "h": 1, "fill": "#eeeeee" }
]
}Nodes: section, sticky, shape, connector, table, code, link, gif
A board is one section; FigJam has no frames, auto layout or variables
Place a node with at: {x, y}, or let the section's layout place its children
A connector joins nodes by key and routes itself
mirra_define_tokens and "$name" need a Figma Design file
Stamps, highlights, washi tape and widgets: found with mirra_find, never created or read
Variable | What it does |
| Pin one port instead of scanning 51730–51739 |
| Directory that tool file paths resolve from; paths outside it are refused |
| Register |
| Accept one more browser origin on the socket |
Unset, MIRRA_ROOT falls back to the working directory. Set it for agents that start the server
outside a project, such as Claude Desktop.
mirra_exec runs any Plugin API code the agent writes
Needs two keys: MIRRA_ALLOW_EXEC on the server, and Allow code execution ticked in the
panel (reset on every run)
claude mcp add -s user Mirra-exec -e MIRRA_ALLOW_EXEC=1 -- npx -y @ttsalpha/mirra serveAgent ⇄ stdio ⇄ MCP server ⇄ ws://localhost:51730 ⇄ plugin ⇄ FigmaThe socket listens on loopback and rejects browser origins other than Figma's
No authentication against other processes running as you while the plugin is open
packages/schema holds the tree and wire protocol, packages/plugin the Figma side,
packages/server the MCP server and CLI. Tests run against a fake of the Figma sandbox, so
they don't need Figma open. The fake doesn't reproduce FigJam's quirks: try FigJam changes in a
real FigJam file.
This server cannot be deployed
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Give your AI agents a design superpower. Generate, edit, and publish publication-grade decks, reports, landing pages, resumes, and marketing visuals directly within your agent workflow. Delivering frontier-level design quality at 3× the speed and 53× lower cost -from conversational prompt to live link or vector PDF in minutes.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
