awdr74100/figwright

What it solves

Figwright provides a bidirectional bridge between AI coding agents (like Claude Code or Cursor) and Figma. It allows agents to not only read design data to generate code but also to actively author and edit the Figma canvas directly, bypassing the need for a paid Figma Dev Mode seat.

How it works

The project consists of an MCP (Model Context Protocol) server and a companion Figma plugin. The MCP client (the AI agent) communicates with the server via stdio, which then relays commands to the Figma plugin over a local WebSocket. This setup ensures that all data remains on the local machine. To improve the accuracy of code generation, it uses a "provider-first" approach, surfacing design context and mapping Figma data to the user's existing codebase components and tokens rather than using generic markup.

Who it’s for

Developers and designers who use AI agents to implement designs or build prototypes in Figma, specifically those looking for a free alternative to official Dev Mode MCP tools.

Highlights

• Bidirectional Capabilities: Includes 112 tools for both reading (inspecting layouts, styles, and variables) and writing (creating frames, text, and auto-layout) on the canvas.
• Provider-First Codegen: Detects the user's specific framework and styling system to reuse existing components and icons.
• Local-First Security: All communication happens via local loopback, ensuring designs are never sent to external servers.
• Extensible Skills: Ships with installable "skills" (like figma-codegen and figma-build) that orchestrate tools for specific workflows.
• Free Tier Compatible: Works on the free Figma tier without requiring a paid Dev Mode seat.