Figwright MCP
A free, two-way Figma MCP server: turns designs into framework-aware code and pushes code back to the canvas
- 1,390 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Reads Figma designs and generates code into the project
- Pushes changes back to the Figma canvas via the plugin
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/figwrightDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Reads Figma designs and generates code into the project
- Pushes changes back to the Figma canvas via the plugin
This is third-party code. Review the repository files before installing.
What it does
Figwright links an agent with Figma both ways. From a design it generates framework-aware code, and from code it assembles elements back onto the Figma canvas. The server works together with a Figma plugin and needs no Dev Mode seat. It ships skills that guide the agent: figma-codegen for generating code from a design with assets, responsiveness and styles in mind, and figma-build for assembling screens and a design system on the canvas. The server is published to npm and runs via npx with no global install, and the plugin installs from a GitHub release. It works with Claude Code, Cursor, Codex and any MCP client.
Who it is for. For frontend developers and designers who need two-way transfer between a Figma design and code.
Good fit when
- You need to build code from a Figma design in a framework
- You need to push finished code back to the Figma canvas
- You need to move a design system between code and design
Not a fit when
- You do not use Figma
- You cannot install a Figma plugin from a release
Example request
Build React components from this Figma screen with responsiveness in mindMCP
- Transport
- stdio
- Authentication
- not required
Limitations
It works together with a Figma plugin that is not yet on the Figma Community marketplace and installs from a GitHub release manually. It needs the Figma desktop app. Code quality depends on how clean the design is and the chosen settings, so the result is worth reviewing.
How to disable. Remove the figwright server from your MCP config and remove the Figwright plugin from Figma.
FAQ
Do I need paid Dev Mode?
No, Figwright works with its own plugin and needs no Dev Mode seat.
Where do I get the plugin?
The plugin is not on the marketplace yet; install it from the latest GitHub release in the Figma desktop app.
Discussion
No questions or reviews yet.
Related
MCP serversFigma's official MCP server: code from a selected frame, design system variables and components, and writing designs to the canvas
Figma MCP Server (Antonytm)
Figma MCP Server
A community MCP server with a Figma plugin: the agent creates frames, text and components in the open file, not just reads them
Figma To Code MCP: from Figma layout to code
Figma To Code MCP
Figma to code over MCP: the server gives the agent a layout as compact YAML with CSS property names, resolved variables and SVG exported to disk
MCP bridge between an agent (Cursor, Claude Code, Codex) and Figma for reading designs and editing them on the canvas
An MCP server that gives the agent simplified Figma layout data from a link so it can build the screen more accurately than from a screenshot
The MCP server of the F2C service: from a Figma node link the agent gets HTML, React or Tailwind markup and local images
README in short
The README presents Figwright as a free, two-way Figma MCP server: from a design it makes framework-aware code, and from code it returns elements to the canvas. The server works with a Figma plugin and needs no Dev Mode seat. It has figma-codegen and figma-build skills that guide the agent. The server installs via npx from npm, and the plugin from a GitHub release. It works with Claude Code, Cursor, Codex and any MCP client. MIT licensed.