figwright

Purpose

Figwright is a free, bidirectional Figma MCP server for AI coding agents. It connects the MCP server and the Figma plugin through a local WebSocket relay, enabling Claude Code, Cursor, Codex, or any other MCP client to actually operate the Figma canvas, not just view designs. The design data, server, relay, and plugin all run locally and are not sent externally.

It is not a read-only tool: the read direction can convert Figma selections into code that fits the project's framework; the write direction can directly create and edit content on the canvas, from frames and text to auto layout, styles, variables, components, and even complete pages.

Main capabilities

Figwright exposes 121 MCP tools, divided into three groups:

• Read: selections, document and node inspection, styles, variables, components, fonts, prototype interactions and flows, motion (animation) state, screenshots, raw image fill assets, PDF export, and video export of dynamic frames (MP4 / GIF / WebM); there is also list_files / use_file, used to switch work between multiple open Figma files.
• Write: create and edit frames, text, shapes, auto layout, effects, images (as new layers or written into existing layer fills), styles, variables (including importing variables and styles from team libraries, and switching frames to modes such as Dark), components (including authoring their boolean/text/instance swap properties), pages, prototype interactions and flows, and Motion animations (keyframes, animation style presets, timeline); there is also a batch tool that can apply multiple edits at once.
• Grounding:get_design_context provides faithful, deduplicated design context;component_map / token_map / icon_map connects Figma data with your codebase so code generation reuses existing content;design_diff reports changes in the design relative to a saved baseline, making it easy to update only the affected code.

Code generation is "provider-first": Figwright detects your real project stack (framework + styling system) and reuses your existing components, tokens, and icons instead of outputting generic markup that needs to be rewritten.

How to use

Prerequisites: an MCP client (Claude Code, Cursor, etc.), Node.js 20.19+ or 22.12+, and Figma. The free Figma version is sufficient, but importing the plugin requires the desktop app. The server runs as a standalone process via npx, and its Node version is independent of the version used to build the project; Node 18/21 and 22.0–22.11 are not supported.

1. Add the server to the MCP client. For example, in Claude Code, add it in .mcp.json (other clients have the same structure):

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": ["-y", "@figwright/mcp@latest"]
    }
  }
}

npx will pull and run the published server, with no global installation required.

1. Install the Figma plugin. The plugin is not yet listed in the Figma Community, so it must be installed manually from the latest Release: download the plugin zip from the latest GitHub Release and unzip it; in the Figma desktop app, go to Menu → Plugins → Development → Import plugin from manifest… and select the unzipped manifest.json; open the Figwright plugin in Figma (Plugins → Development → Figwright), and it will automatically connect to the local server and show Connected. You can have the agent run ping to confirm the connection.

2. (Optional) Install skills. Skills let the agent use Figwright at the right times and follow context-based workflows. After selecting a frame in Figma, you can prompt the agent:

• “Code this Figma selection as a React component.”
• Or in the opposite direction: “Build a pricing section in Figma from this spec.”

They can be installed to any supported agent via the skills CLI. Skills require @figwright/mcp The server is connected; using it alone without tools cannot drive anything.

Common Questions and Limitations

• Relationship with Dev Mode: Figwright communicates with Figma through a plugin, and the free version is sufficient; no Dev Mode seat or paid tier is required.
• Capabilities in different editors: In Figma Design, functionality is complete; in Dev Mode (Inspect panel), Figma only allows plugins to read, so screenshots, PDF export, and all inspection tools are available, but all write operations (nodes, pages, variables, styles) will fail, making it suitable for code-generation directions; use Design mode for building; in FigJam, frames, sections, shapes, and text are available, but components, variables, styles, and Motion do not exist in that editor.get_metadata It reports the editor type, and tools that fail because of the editor will state this in the error.
• Security and boundaries: All components run locally, and the relay uses 127.0.0.1:3055. The relay validates the Host and Origin headers for each request to prevent DNS rebinding and rejects browser origins; the leader's HTTP endpoint also requires media types that cannot be sent without a CORS preflight. Write tools modify the Figma file, and export tools write to the path chosen by the agent, which may be abused by malicious designs or prompt injection; the MCP client's tool approval control is an important boundary.
• Connection issues: If the client cannot find npx/node, use an absolute path or pass PATH through env; if at startup @latest parsing fails causing the connection to close, you can install the package as a project dependency and remove @latest, or install it globally and point directly to the figwright-mcp binary path. The server is started by the MCP client and runs only while that client is open.
• Multiple files and multiple agents: Multiple MCP servers can share the same plugin through leader/follower election. By default, calls follow the file touched last; when multiple files are open and the agent has not claimed a file, the result will indicate this.list_files Lists the files opened by the plugin,use_file claims a file for a certain agent; the claim belongs to that agent's server process and does not affect other agents, and can be released with use_file({ release: true }) . One MCP client corresponds to one server process, so multiple agents require separate clients (two editors or two terminals).
• Version matching: The server is re-resolved via npx on every startup, while the plugin is a manually imported zip; the two may have inconsistent versions without reporting an error, and the panel will indicate an old plugin and provide an update method, while tool results will be marked as unverified.
• Clear limitations: Figwright cannot replace review of agent behavior; write and export tools carry risk.