# awdr74100/figwright [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/awdr74100/figwright  
**GitHub Stars:** 734  
**npm Downloads (last month):** 39859228  
**Views:** 5  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/awdr74100-figwright

## Description
Bidirectional Figma server over a local WebSocket relay: turn a selection into framework-aware code (reusing your components and tokens), or author frames, text, styles, variables, and whole screens back onto the canvas. 92 tools, any MCP client, no Dev Mode seat or paid tier.

## Tools
Capabilities this server exposes over MCP:

- **Read** — selection, document and node inspection, styles, variables, components, fonts, reactions, motion (animation) state, screenshots, original image-fill assets, PDF export, and video export of animated frames (MP4 / GIF / WebM).
- **Write** — create and edit frames, text, shapes, auto-layout, effects, styles, variables, components (including authoring their boolean/text/instance-swap properties), pages, reactions, and Motion animations (keyframes, animation-style presets, timelines); plus a `batch` tool to apply many edits at once.
- **Grounding** — `get_design_context` for faithful, de-duplicated design context, and `component_map` / `token_map` / `icon_map`, which join Figma data to your codebase so codegen reuses what you already have; plus `design_diff`, which reports what changed in a design against a saved baseline so you update only the…

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "figwright": {
    "command": "npx",
    "args": ["-y","skills"]
  }
}
```

## Documentation

## What awdr74100/figwright MCP server does

The awdr74100/figwright MCP server gives coding agents two-way access to Figma. It can inspect a selection, document structure, nodes, styles, variables, components, fonts, reactions, motion state, screenshots, image-fill assets, and exported PDF or video files. On the writing side, it can create or modify frames, text, shapes, auto-layout settings, effects, styles, variables, components, pages, reactions, and Motion animations.

The server is intended for workflows where design and implementation need to stay connected. An agent can turn a selected Figma design into code using design context, or build a design from a description or code-oriented request. The available tools include component, token, and icon mappings so generated code can reuse structures already present in the codebase. A design-diff tool compares a design with a saved baseline and reports what changed.

## How it works

The awdr74100/figwright MCP server runs as a local Node process and communicates with an MCP client over standard input and output. A Figma plugin provides the other side of the connection, using a local WebSocket relay to pass tool calls between the client-facing server and Figma.

The server, relay, and plugin run on the local machine, and the README states that designs are not sent elsewhere. Multiple MCP clients can share one plugin; they select a leader to own the active plugin connection. The transport is designed to recover from dropped WebSocket connections. The plugin also displays tool activity, payloads, connection health, versions, and diagnostic information.

The published tool catalog contains 112 MCP tools, grouped into reading, writing, and grounding functions. The MCP client remains the authoritative source for the currently available tool list.

## Setup and configuration

Install the awdr74100/figwright MCP server in an MCP client with Node.js 20.19 or newer, or Node.js 22.12 or newer. Node 18, Node 21, and Node 22.0 through 22.11 are not supported. The documented stdio configuration runs `npx -y @figwright/mcp@latest`, so a global installation is not required.

Figma is also required. The free Figma tier is sufficient, but the Figma desktop application is needed to import the plugin. Download the plugin archive from the latest GitHub release, unpack it, and import its `manifest.json` through Figma's development-plugin menu. Open the plugin after adding the MCP server; it connects to the local server automatically. Running the `ping` tool provides a basic connection check.

Optional skills are available for code generation and design building. They can be installed with the documented `npx skills add awdr74100/figwright/skills` command, but they require the MCP server to be connected and do not provide tools independently.

## Tools and capabilities

Read operations include:

- Inspecting selections, documents, nodes, styles, variables, components, fonts, reactions, and animation state.
- Capturing screenshots and retrieving original image-fill assets.
- Exporting documents as PDF and animated frames as MP4, GIF, or WebM.

Write operations include creating and editing visual nodes, layout, effects, design tokens, components, pages, reactions, and Motion timelines. Component authoring covers boolean, text, and instance-swap properties. The `batch` tool applies multiple edits in one operation.

Grounding operations provide de-duplicated design context and mappings between Figma data and a codebase. These mappings help code generation reuse existing components, tokens, and icons rather than treating every selection as standalone markup.

## Limitations and notes

The plugin is distributed through GitHub releases rather than the Figma Community marketplace. Figma desktop is required for importing it. The project is designed for local operation and uses the plugin as part of its connection path; the MCP server alone does not provide Figma access without that plugin. Client compatibility depends on MCP support, and the client-visible tool list can change as the project evolves.

_Full upstream README: https://allmcps.com/mcp/awdr74100-figwright/readme_