Figwright

Name: Figwright
Author: Roya

Two-way Figma bridge: read selections for codegen and build or edit designs on the canvas

By Roya (individual) JavaScript Local · stdio Design Developer tools

GitHub npm Website

62 popularity score ★ 1.3k ↓ 1.7k/wk

Connect your client

Local (npm)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio Add to Goose

Opens the app, which asks before it adds the server.

Or add it by command or config

Claude CodeTerminal

claude mcp add figwright -- npx -y @figwright/mcp@latest

Claude Desktopclaude_desktop_config.json

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

Cursor~/.cursor/mcp.json

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

VS Code.vscode/mcp.json

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

Codex~/.codex/config.toml

[mcp_servers.figwright]
command = "npx"
args = ["-y", "@figwright/mcp@latest"]

Gemini CLITerminal

gemini mcp add --scope user figwright npx -- -y @figwright/mcp@latest

Settings 1

`FIGWRIGHT_ALLOW_ANY_ORIGIN`	Optional: Set to 1 to lift the relay's Origin check if Figma's plugin host is refused. The Host check stays. Meant as a stopgap to report, not to leave set. For WebSocket relay.

What it does

Figwright links an MCP client to a Figma plugin you import yourself. The npm package @figwright/mcp is the server: your client starts it over stdio, and it passes tool calls over a WebSocket on 127.0.0.1:3055 to the plugin running inside Figma. Because the plugin goes through Figma's public Plugin API, you need neither a Dev Mode seat nor a Figma API token.

Calls go both ways. Read tools inspect the selection and any node, along with styles, variables, components, fonts, prototype reactions and Motion state. They also render screenshots. Export tools save screenshots, image fills, PDFs and videos (MP4, GIF, WebM) to disk. The grounding tools scan your local codebase and match Figma data against what your code already defines, and design_diff compares a design with a saved baseline so only the affected code needs to change. On the write side you can build and edit almost anything on the canvas, from frames and auto-layout to variables, components, prototype flows and Motion keyframes. Version 0.7.0 added Figma Draw (vector paths, repeat groups, text on a path, brush strokes, pattern fills and more), plus importing team library variables and styles by key, switching a frame's variable mode, and putting an image into an existing layer's fill. A batch tool applies a group of writes together or rolls them all back.

When several clients run at once, their server processes elect a leader that holds the plugin connection and the rest forward calls to it. list_files and use_file let each agent claim its own open file. Without a claim, calls go to whichever file you touched last.

At the v0.7.0 tag the tool registry holds 135 tools, the same count the README now gives. It wraps every tool's input in a strict schema, so an argument a tool does not declare is refused rather than silently dropped. The server also serves two prompts, figma_to_code and code_to_figma, for clients that lack the project's skills.

What it needs

Runtime	Node.js 20.19+
Runs on	macOS, Windows, Linux
Figma	FreeFree plan is enough. The desktop app is needed once to import the plugin.
Also	Figwright plugin imported from the GitHub release zip and open in Figma

Node.js 20.19+ or 22.12+ (package engines: ^20.19.0 || >=22.12.0). Node 18, 21 and 22.0 to 22.11 are not supported. The plugin is not on the Figma Community: download the zip from the latest GitHub release and import its manifest.json in the Figma desktop app (Plugins > Development > Import plugin from manifest). Open the plugin in each session so it can connect. To update, restart the server and copy the new release's manifest.json and dist over the old plugin folder.

Limits

Read only In Dev Mode Figma makes plugins read-only, so only reads and exports work. Write tools need Figma Design.
Not covered In FigJam there are no components, variables, styles or Motion, so those tools fail.
Early release Motion tools are marked beta and work only in Figma Design.
Not covered Agents in one client process share a single file claim. Separate files need separate client processes, each calling use_file.
Limit Server and plugin update separately (npx @latest versus a zip copied by hand) and can drift apart. The plugin's Debug tab shows both versions.
Limit An open client session keeps the server it started with. New tools appear only after reconnecting or restarting the client.
Limit Only the latest release gets security fixes (SECURITY.md).

Who it suits

Suits developers on a free Figma plan who want an assistant to turn frames into code that reuses their own components and tokens, or to build and edit screens in Figma from a spec. Everything runs on your machine, and you need the desktop app once to import the plugin. It is a one-person, non-official project, and it has to keep a plugin window open in Figma. If you would rather not import a plugin by hand or keep a plugin window open, choose a server that reads Figma through its REST API instead.

Tools 60 of 135

25 only read, 34 change things, 1 can delete or overwrite.

ping: Checks that the server can reach the Figma plugin and reports both versions
get_selection: Reads the nodes currently selected in Figma
get_document: Reads the structure of the open document
get_node: Reads one node's properties
get_nodes_info: Reads properties for several nodes at once
get_metadata: Reports file details, including which editor and mode the plugin runs in
get_pages: Lists the pages in the file
search_nodes: Finds nodes in the file by name or other criteria
get_styles: Lists the file's paint, text, effect and grid styles
get_variable_defs: Reads variable collections, modes and values
get_local_components: Lists the components defined in the open file
get_component_api: Shows a component's properties and variants
get_fonts: Lists the fonts the file uses
get_reactions: Reads prototype interactions on a node
get_node_motion: Reads the Motion animation state of a node
list_files: Lists every open Figma file that has the plugin running
use_file: Claims one open file for this agent so its calls go there
get_design_context: Returns de-duplicated layout, type, variable and component context for writing code
get_screenshot: Renders an image of a node
save_screenshots changes: Writes node screenshots to paths the agent gives
save_image_fills changes: Saves the original image assets behind image fills to disk
export_pdf changes: Exports nodes as a PDF file to a given path
export_video changes: Renders an animated frame to MP4, GIF or WebM on disk
analyze_project: Detects the local project's framework and styling system
scan_components: Scans the local codebase for existing components
component_map: Matches Figma components to components in your code
token_map: Matches Figma variables and styles to your code's design tokens
icon_map: Matches Figma icons to icons in your repository
design_diff: Reports what changed in a design since a saved baseline
create_frame changes: Adds a frame, optionally styled in the same call
create_text changes: Adds a text layer
set_text changes: Replaces a text layer's content
set_fills changes: Sets fill paints on layers
set_strokes changes: Sets stroke paints and weight on layers
create_shape changes: Adds a line, polygon or star
boolean_nodes changes: Combines shapes with union, subtract, intersect or exclude
create_vector changes: Draws a vector from SVG path data
set_vector changes: Edits the path points of an existing vector
repeat_nodes changes: Wraps layers in a Figma Draw repeat group
create_text_path changes: Places text along a path
set_complex_stroke changes: Applies brush, dynamic or variable-width strokes
set_auto_layout changes: Applies or edits auto-layout on a frame
align_nodes changes: Aligns or distributes layers
set_effects changes: Sets shadows, blurs and other effects
create_paint_style changes: Creates a colour style
apply_style_to_node changes: Applies a style to a layer
import_style changes: Imports a team library style by its key
create_variable changes: Creates a variable in a collection
set_variable_value changes: Sets a variable's value for a mode
bind_variable_to_node changes: Binds a variable to a node property
import_variable changes: Imports a team library variable by its key
set_node_variable_mode changes: Switches which variable mode a frame renders in, such as Dark
create_component changes: Creates a component
create_instance changes: Places an instance of a component
set_reactions changes: Sets prototype interactions on a node
import_image changes: Places an image as a new layer from a URL or local file path
set_image_fill changes: Puts an image into an existing layer's fill
apply_animation_style changes: Applies a Motion animation preset to a node (beta)
delete_nodes deletes: Deletes layers
batch changes: Runs several writes as one step that rolls back as a whole

Prompts 2

figma_to_code: Guided workflow to write code from a Figma node or the current selection, reusing your components and tokens
code_to_figma: Guided workflow to build a design in the open file from code or a description, reusing its components, variables and styles

Popularity

62 popularity score, on our list (the bar is 36)

★ 1.3k ↓ 1.7k/wk

GitHub stars, whole repository	1,332	25.9 points
Stars in 30 days	+344	10 points
npm downloads, last week	1,709	25.9 points

It lives in the folder packages/mcp of awdr74100/figwright, which holds more than this server. Its stars are the whole repository's, so in the score they never count for more than its own downloads.

Measured 2026-11-07. How the score works.

Where it is published

Code	awdr74100/figwright/packages/mcp ★ 1.3k, the whole repository
npm	@figwright/mcp 0.7.0, 2026-10-26

What it can reach

Runs	On your machine
Reaches	Files on your machine, The internet
Changes things	Yes: it can write, send, create or delete
Sign-in	None
Licence	MIT (npm)
Usage data	Sends none SECURITY.md states it sends no telemetry and contacts no outside service.
Last code change	2026-11-07

Runs on your machine. The server opens a WebSocket relay on 127.0.0.1:3055 and accepts only requests whose Host header names loopback and whose Origin is missing or the plugin's sandbox. FIGWRIGHT_ALLOW_ANY_ORIGIN=1 lifts the Origin check. SECURITY.md says it sends no telemetry. The plugin works through Figma's Plugin API, so it reaches only the file open in Figma, not your account. Write tools change and delete content in that file. Export tools write files to paths the agent passes. import_image and set_image_fill read a local file by path and accept only PNG, JPEG or GIF. The grounding tools read your project's source files. No sign-in or token is needed. The maintainers point to your client's tool-approval prompts as the guard against prompt-injected designs.

Over time

GitHub stars, whole repository 1.3k +344 (+35 %)

1.3k988

8 Oct 20267 Nov 2026

npm downloads a week 1.7k +1.5k (+718 %)

3.6k142

29 Jun 20267 Nov 2026

Before the site measured it, read from npm's daily download counts.

Popularity score 62 −1 (−1 %)

6739

8 Oct 20267 Nov 2026

What is rising across the directory

Sources

Page checked 2026-10-28.

Badge for your README

Shows this server's rank in its category, and stars for a server that runs on your machine. It updates every hour.

MarkdownREADME.md

[![Figwright on EveryMCPServer](https://everymcpserver.com/badge/figwright.svg)](https://everymcpserver.com/servers/figwright)

Connect your client

Add in one click

Or add it by command or config

Settings 1

What it does

What it needs

Limits

Who it suits

Tools 60 of 135

Prompts 2

Similar servers

Figma Console MCP

Figma MCP Bridge

Claude Talk to Figma MCP

Inspo

sideshow

Canvas Kit MCP