Figwright
A free, two-way Figma MCP server: turns designs into framework-aware code and pushes code back to the canvas
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Reads Figma designs and generates code into the project
- Pushes changes back to the Figma canvas via the plugin
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/figwrightDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal
claude mcp add --transport stdio figwright -- npx -y @figwright/mcp@latestOr add to the file .mcp.json, in the project
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the mcpServers key.
The button opens the agent and offers to add the server. If nothing happens, copy the config below.
Add to the file ~/.cursor/mcp.json, for all projects
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the mcpServers key. For a single project, put the same block into .cursor/mcp.json.
The button opens the agent and offers to add the server. If nothing happens, copy the config below.
Run in a terminal
code --add-mcp '{"name":"figwright","type":"stdio","command":"npx","args":["-y","@figwright/mcp@latest"]}'Or add to the file .vscode/mcp.json, in the project
{
"servers": {
"figwright": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the servers key.
Run in a terminal
codex mcp add figwright -- npx -y @figwright/mcp@latestOr add to the file ~/.codex/config.toml, for all projects
[mcp_servers.figwright]
command = "npx"
args = ["-y", "@figwright/mcp@latest"]If the file already exists, append the block to the end.
Add to the file ~/.gemini/settings.json, for all projects
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the mcpServers key.
Add to the file ~/.config/devin/mcp_config.json, for all projects
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the mcpServers key. Legacy Cascade keeps the MCP config in ~/.codeium/windsurf/mcp_config.json.
Formerly Windsurf.
Add to the file cline_mcp_settings.json, for all projects
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the mcpServers key. Open the settings file in Cline: MCP Servers tab, Configure MCP Servers.
Add to the file .roo/mcp.json, in the project
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the mcpServers key.
A fork of Roo Code, same .roo folders.
Add to the file opencode.json, in the project
{
"mcp": {
"figwright": {
"type": "local",
"command": [
"npx",
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the mcp key.
Add to the file ~/.config/zed/settings.json, for all projects
{
"context_servers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the context_servers key.
Add to the file .codeassistant/mcp.json, in the project
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": [
"-y",
"@figwright/mcp@latest"
]
}
}
}If the file already exists, add the server inside the mcpServers key.
Add the MCP server: npx -y @figwright/mcp@latest. Then install the Figma plugin from the latest GitHub release and open it in the Figma desktop app.
Other ways from the author
{
"mcpServers": {
"figwright": {
"command": "npx",
"args": ["-y", "@figwright/mcp@latest"]
}
}
}Then install the Figma plugin from the latest GitHub release.
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 mindLimitations
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.
MCP
- Transport
- stdio
- Authentication
- not required
Security check
- Reads Figma designs and generates code into the project
- Pushes changes back to the Figma canvas via the plugin
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.
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.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys