Log inSubmit server
Figwright logo

Figwright

by awdr74100

Connects AI coding agents to Figma for grounded code generation and direct canvas editing through a local plugin relay.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Figwright

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "awdr74100-figwright": {
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Install not yet sandbox-tested— we haven't run this command through our automated sandbox yet. Not a red flag; we're working through the catalog.

Overview

awdr74100/figwright connects an MCP client to Figma through a local WebSocket relay and a companion plugin. It reads selections, document structure, styles, variables, components, assets, prototypes, and motion, then can generate framework-aware code grounded in an existing codebase. Agents can also create and edit Figma content, including screens, components, layouts, variables, styles, and animations. Reach for it when an agent needs to move designs into code or build and update designs directly on the canvas without a Dev Mode seat.

Use cases

  • Generate framework-aware code from a selected Figma frame
  • Build a Figma screen from a code description
  • Reuse existing components, tokens, and icons during code generation
  • Compare a design with a saved baseline before updating code

Key features

  • Bidirectional Figma read and write workflows
  • Local WebSocket relay with a companion Figma plugin
  • Grounded code generation with component, token, and icon mappings
  • Design inspection, asset export, and motion support
  • Batch canvas editing and multi-file workflows

Tools3

What Figwright lets your agent do. Expand a tool for its parameters.

Self-reported~230 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

18/19 checks healthy over the last 78d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 14d ago via OSV.dev · @figwright/mcp@latest (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars1.2kStargazers on the source repository.
npm downloads4.6kPackage downloads in the last 30 days.
Last commit1d agoMost recent push to the default branch.
Tools exposed3Callable tools this server registers over MCP.
Directory activity6 viewsConfig copies, upvotes, and views on AllMCPs.

How Figwright works

What awdr74100/figwright MCP server does

awdr74100/figwright MCP server gives coding agents two-way access to Figma. It can inspect a selected design and produce code based on the file’s layout, typography, variables, components, and other design context. Its grounding tools can connect Figma components, tokens, and icons to corresponding items in a codebase, helping code generation reuse an existing stack instead of producing unrelated generic markup.

The reverse workflow is also supported. An agent can create or modify frames, text, shapes, styles, variables, components, pages, prototypes, and animated content in Figma. A design diff operation compares a design with a saved baseline so an agent can focus updates on changed areas.

How it works

The MCP process runs locally and communicates with a Figma plugin over a local WebSocket relay. The server, relay, and plugin operate on the user’s machine, and designs are not sent elsewhere by the workflow. The plugin is responsible for the connection to the open Figma file; agents can use list_files and use_file when working with more than one open file.

Installable skills provide two guided workflows: figma-codegen for turning a selection into code and figma-build for creating a Figma design from code or a description. These skills are optional and require the MCP server to be connected.

Setup and configuration

Use an MCP client such as Claude Code, Cursor, Codex, or another MCP-compatible client. The server can be launched with npx using the @figwright/mcp@latest package, so a global installation is not required. It requires Node.js 20.19 or newer in the 20.x line, or Node.js 22.12 or newer; Node.js 18, 21, and Node.js 22.0 through 22.11 are unsupported.

The Figma plugin must be installed separately from a GitHub release. Download and unzip the release archive, then import its manifest.json through the Figma desktop app’s development-plugin menu. After opening the plugin, ask the agent to run ping to verify the connection. The free Figma tier is sufficient, although the desktop app is needed to import the development plugin.

Tools and capabilities

Capabilities cover:

  • Reading selections, nodes, documents, styles, variables, components, fonts, prototype flows, reactions, motion state, screenshots, image-fill assets, PDF exports, and video exports in MP4, GIF, or WebM.
  • Creating and editing frames, text, shapes, boolean operations, auto-layout, alignment, effects, images, styles, variables, components, pages, prototype flows, and Motion animations.
  • Importing team-library variables and styles, changing variable modes, and applying batch edits.
  • Working with Figma Draw paths, outlined strokes, repeat groups, text on a path, brush strokes, variable-width strokes, and pattern fills.
  • Producing grounded design context, component/token/icon mappings, and design diffs.

Limitations and notes

The plugin is a development plugin rather than a Figma Community marketplace installation. Server and plugin releases should be updated together. A client session keeps the server process it started until the client is restarted or reconnected, so newly released tools may require a fresh session. Each open Figma file is intended to be claimed by one agent at a time; multiple agents can work concurrently when they use separate files.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Figwright

awdr74100/figwright is an MCP server that connects AI clients to Figma through a local WebSocket relay and companion plugin. Its main tools read designs, generate grounded code, inspect assets and document data, and write frames, components, styles, variables, prototypes, and animations back to the Figma canvas.

Install it by adding an MCP entry that runs `npx -y @figwright/mcp@latest`, then import the plugin’s `manifest.json` into the Figma desktop app as a development plugin. Open Figwright in Figma and use `ping` from the agent to verify the local connection.

Yes, awdr74100/figwright works with Cursor. Add the server to Cursor’s MCP configuration using the same `npx` command shape, then install and open the Figwright development plugin in Figma.

No, awdr74100/figwright does not require a paid Dev Mode seat. It pairs an MCP client with a locally installed Figma plugin, and the free Figma tier is sufficient.

awdr74100/figwright supports Node.js 20.19 or newer in the 20.x line and Node.js 22.12 or newer. Node.js 18, 21, and Node.js 22.0 through 22.11 are unsupported.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFigwright AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/awdr74100-figwright?style=directory)](https://allmcps.com/mcp/awdr74100-figwright)
HTML Embed
<a href="https://allmcps.com/mcp/awdr74100-figwright"><img src="https://allmcps.com/api/badge/awdr74100-figwright?style=directory" alt="Figwright on AllMCPs" /></a>