by awdr74100
Free, bidirectional Figma MCP server — turn designs into framework-aware code and write back to the canvas, for Claude Code, Cursor, and any MCP client.
# Add to your Claude Code skills
git clone https://github.com/awdr74100/figwrightfigwright is an open-source code generation skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by awdr74100. Free, bidirectional Figma MCP server — turn designs into framework-aware code and write back to the canvas, for Claude Code, Cursor, and any MCP client. It has 55 GitHub stars.
figwright's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/awdr74100/figwright" and add it to your Claude Code skills directory (see the Installation section above).
figwright is primarily written in TypeScript. It is open-source under awdr74100 on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other Code Generation skills you can browse and compare side by side. Open the Code Generation category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh figwright against similar tools.
No comments yet. Be the first to share your thoughts!
Top skills in this category by stars
Unlocks once the catalog security scan passes (runs nightly).
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Where Playwright drives the browser, Figwright drives Figma.
Figwright connects an MCP server to a Figma plugin over a local WebSocket relay, so an AI agent — Claude Code, Cursor, or any other MCP client — can work with Figma instead of just looking at it.
It works in both directions:
Read — turn a Figma selection into framework-aware code, grounded on faithful, de-duplicated design context (layout, typography, variables, components).
Write — author and edit the canvas directly: frames, text, auto-layout, styles, variables, components, whole screens.
Everything runs on your machine and talks to Figma through a plugin, so it needs no Figma Dev Mode seat and no paid tier.
Your MCP client talks to the @figwright/mcp server over stdio; the server relays to the Figma plugin over a local WebSocket. Several clients can share one plugin — they elect a leader that owns the connection — and the transport is built to ride out dropped sockets:
┌─────────────────────────────────────────────────────────────────────┐
│ MCP CLIENTS — one per agent │
│ Claude Code · Cursor · Claude · any MCP-capable client │
└─────────────────────────────────────────────────────────────────────┘
│ MCP protocol over stdio
▼
┌─────────────────────────────────────────────────────────────────────┐
│ @figwright/mcp — your client launches one; they elect a leader │
│ │
│ LEADER (owns the single plugin connection) │
│ • WebSocket relay · request idempotency │
│ • routes to the most-recently-active file │
│ • session resume · "busy ≠ dead" heartbeat │
│ • endpoints: /ws (plugin) · /ping (health) · /rpc (followers) │
│ │
│ FOLLOWERS │
│ • forward tool calls to the leader over HTTP /rpc │
│ • take over automatically if the leader exits │
└─────────────────────────────────────────────────────────────────────┘
│ local WebSocket · msgpack (binary)
▼
┌─────────────────────────────────────────────────────────────────────┐
│ FIGMA (desktop or browser) │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Figwright plugin │ │
│ │ • UI (Vue 3 iframe): WebSocket client + heartbeat │ │
│ │ • sandbox: executes Figma Plugin API calls │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ │ Figma Plugin API │
│ ▼ │
│ Canvas │
└─────────────────────────────────────────────────────────────────────┘
By design Figwright is provider-first: rather than a fixed compiler pipeline, the tools surface honest design context and let the model generate code that matches your codebase. The figma-codegen skill encodes this approach.
The Figma-side plugin isn't a black box. It shows every call as it happens, lets you inspect the exact payload sent to the model, and surfaces its own connection health.
For Claude Code, add this to your .mcp.json (other clients use the same shape):
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": ["-y", "@figwright/mcp@latest"]
}
}
}
npx fetches and runs the published server — no global install needed.
The plugin isn't on the Figma Community marketplace yet, so install it from the latest release:
manifest.json.Open the Figwright plugin in Figma (Plugins → Development → Figwright). It connects to the local server automatically and shows Connected. Ask your agent to run ping to confirm the link.
The skills make agents reach for Figwright at the right moment and follow the grounded workflows:
npx skills add awdr74100/figwright/skills
With a frame selected in Figma, prompt your agent:
Code this Figma selection as a React component.
or, the other direction:
Build a pricing section in Figma from this spec.
Agent skills orchestrate Figwright's tools. They're model-invoked — your agent loads one automatically when the task matches its description.
| Skill | What it does |
|---|---|
figma‑codegen |
Turn a Figma selection into framework-aware code, grounded on your stack and existing components. |
figma‑build |
Build a Figma design from code or a description, reusing the file's existing components and styles. |
Install across any supported agent with the skills CLI:
npx skills add awdr74100/figwright/skills # both
npx skills add https://github.com/awdr74100/figwright/tree/main/skills/figma-codegen # one
[!NOTE] Skills need the
@figwright/mcpserver connected — on their own they have no tools to drive.
Figwright exposes 93 MCP tools in three groups:
batch tool to