Repolode
Submit
awdr74100

awdr74100/figwright

A free, two-way Figma MCP server that lets coding agents turn Figma designs into code and write designs back to the canvas.

Open-source alternative to:Figma Dev Mode MCP

View on GitHub
Stars
1,103
Forks
63
Open issues
5
Last commit
13 hours ago

What is it?

Figwright connects an MCP server to a Figma plugin over a local WebSocket relay, so AI agents such as Claude Code, Cursor, and Codex can read from and write to a Figma file. On the read side, it turns a Figma selection into framework-aware code using design context such as layout, typography, variables, and components. On the write side, it can create and edit frames, text, auto-layout, styles, variables, components, and whole screens directly on the canvas.

The server runs locally alongside the plugin, and it works on the free Figma tier because it uses the plugin API rather than Dev Mode. It detects the project's framework and styling system and reuses existing components, tokens, and icons where possible. Several agents can connect at once, and each can claim its own open Figma file.

The project is set up with an npx command in an MCP client config and a plugin imported from a release zip. It also ships two installable agent skills, figma-codegen and figma-build, that guide the read and write workflows.

Key features

  • 01Converts a Figma selection into code grounded on your framework, styling system, and existing components.
  • 02Exposes 121 MCP tools for reading and writing the Figma canvas.
  • 03Creates and edits frames, text, auto-layout, styles, variables, and components.
  • 04Runs locally, with the plugin using only Figma's public Plugin API.
  • 05Lets several agents work on different open Figma files at the same time.
  • 06Includes a plugin panel that logs every tool call and shows the payload sent to the model.

Use cases

  • Implementing a Figma design as React or another framework component without a paid Dev Mode seat.
  • Having an AI agent build a screen or section on the Figma canvas from a written spec.
  • Keeping generated code aligned with existing design tokens and component libraries.
  • Running several coding agents against different Figma files in parallel.

Topics

#figma#mcp#design-to-code#code-generation#ai-agents#typescript#ai#claude-code#codegen#codex

FAQ

What is figwright?
A free, two-way Figma MCP server that lets coding agents turn Figma designs into code and write designs back to the canvas. Figwright connects an MCP server to a Figma plugin over a local WebSocket relay, so AI agents such as Claude Code, Cursor, and Codex can read from and write to a Figma file. On the read side, it turns a Figma selection into framework-aware code using design context such as layout, typography, variables, and components. On the write side, it can create and edit frames, text, auto-layout, styles, variables, components, and whole screens directly on the canvas.
Is figwright free to use? What license does it have?
figwright is open source under the MIT license. Check the license terms before using it in commercial products.
Is figwright still maintained?
Actively maintained. The last commit to figwright was on Oct 19, 2026.
What can I use figwright for?
Implementing a Figma design as React or another framework component without a paid Dev Mode seat. Having an AI agent build a screen or section on the Figma canvas from a written spec. Keeping generated code aligned with existing design tokens and component libraries. Running several coding agents against different Figma files in parallel.
Where can I get figwright?
The source code and installation instructions are on GitHub: https://github.com/awdr74100/figwright

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects