Airsc is free for everyone. If it helps you, support it with $2–$20.

Support
VISign in
MCP serverCautionUI & designSome setup Verified live

figwright

awdr74100 · awdr74100/figwright

This free, bidirectional Figma MCP server allows AI agents to convert designs into framework-aware code and directly edit the Figma canvas.

Free, two-way Figma MCP server. Turn designs into framework-aware code, and push code back to the canvas. Works with Claude Code, Cursor, Codex, and any MCP client.

976 stars52License: MITUpdated 13 days ago0 opens

Preview

▍

What you can do with it

  • Generate frontend code directly from Figma designs.
  • Use an AI agent to make changes to Figma elements like text or auto-layout.
  • Convert existing UI components into a consistent design system within Figma.

Verified live · 60 tools

We started this MCP server in an isolated sandbox and it exposed these tools:

  • ping

    Health check. Returns server info plus, when a plugin is connected, end-to-end info from the Figma sandbox. On a follower it also reports the leader’s version and build, and warns (versionSkew / build

  • get_selection

    Return the current selection on the active Figma page: { pageId, pageName, nodes }, where each node is a full flat serialization — geometry, fills/strokes/effects, text properties, style/variable ids,

  • get_document

    Return the full node tree (recursive children) of the active Figma page, with base geometry, rotation, opacity, cornerRadius, and fills enrichment.

  • get_node

    Return one node by id with its full recursive subtree at maximum fidelity — every serialized field (geometry, paints, effects, auto-layout, text with per-run segments, style/variable ids, mainComponen

  • get_nodes_info

    Return multiple Figma nodes by id. Output preserves input order; missing ids slot null.

  • get_metadata

    Return file metadata: fileName, current page, all page references, and which editor the file is open in (editorType / mode) — "dev" is read-only and "figjam" has no components, variables or styles.

  • get_pages

    Return every page in the active Figma file as { id, name, flows }. flows lists the prototype flows Presentation view offers on that page, as { nodeId, name } in order: nodeId is the flow's starting fr

  • search_nodes

    Search the node tree by case-insensitive name substring and/or exact node type. At least one of name or type is required. Scope to a subtree with root (a node id); defaults to the current page. Return

  • scan_text_nodes

    Return every TEXT node within a subtree, each with its characters / fontSize / fontName. Scope with root (a node id); defaults to the current page.

  • scan_nodes_by_types

    Return a flat list of every node whose type is in `types`, searched recursively through a subtree scoped by `root` (a node id) or the current page by default. Use this to collect nodes by kind (e.g. a

  • get_styles

    Return the document's local styles grouped as { paints, texts, effects, grids }. Paint styles carry their paints; text styles carry fontName / fontSize / lineHeight / letterSpacing / textWrapStyle; ef

  • get_variable_defs

    Return the document's local variables as { collections, variables }. Each collection lists its modes and defaultModeId; each variable lists its resolvedType and valuesByMode (primitives, RGBA colors,

  • get_local_components

    Return the components and component sets within a node subtree (or the current selection) as { components, componentSets }. Scans a subtree, not the whole document — pass nodeId, or select the frames

  • get_component_api

    Return a component's full property API — the prop contract behind its instances. Pass a COMPONENT, COMPONENT_SET, or INSTANCE id (an instance resolves to its main component / set). Returns { id, name,

  • get_viewport

    Return the current page viewport as { center, zoom, bounds } — the on-screen center point, zoom level (1.0 = 100%), and visible bounds rect.

npx -y @figwright/mcp@latest · 08/10/2026

Safety check

Caution

Usable, but read the notes first.

  • ●npm package runs a script automatically on install.package.json

Automated scan of the repo files. Always review code you run.

From the README

A free, two-way Figma MCP server for coding agents.

Pairs with a Figma plugin, not a Dev Mode seat.

About · Setup · Skills · Tools · Plugin · FAQ · Contributing

About

Figwright connects an MCP server to a Figma plugin over a local WebSocket relay, so an AI agent (Claude Code, Cursor, Codex, or any other MCP client) can work with Figma instead of just looking at it.

It works in both directions:

Read: turn a Figma selection into framework-aware code, grounded on faithful, de-duplicated design context (layout, typography, variables, components).

Write: author and edit the canvas directly, from frames and text to auto-layout, styles, variables, components, whole screens.

Everything runs on your machine: the server, the relay, and the plugin. Your designs are never sent anywhere.

Why Figwright

  • Not gated: the official Dev Mode MCP is behind a paid Dev Mode seat. Figwright runs on the free tier.
  • Bidirectional: not read-only. 117 tools span reading and writing the canvas, so an agent can both implement designs and build them.
  • Provider-first codegen: Figwright detects your real stack (framework + styling system) and reuses your existing components, tokens, and icons, instead of emitting generic markup you have to rewrite.
  • One agent per file: several agents can work at once, each claiming its own open Figma file. Switching tabs no longer sends one agent's edits into another's design — see working across files.
  • Open & extensible: the read/write workflows ship as installable skills you can adopt or fork.

Setup

You need an MCP client (Claude Code, Cursor, …), Node.js 20.19+ or 22.12+, and Figma. The free Figma tier is enough, though the desktop app is needed to import the plugin. The server runs via npx as its own process, so its Node version is independent of the one your project builds with; Node 18/21 and 22.0–22.11 are not supported.

1. Add the server to your MCP client

For Claude Code, add this to your .mcp.json (other clients use the same shape):

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

npx fetches and runs the published server, so no global install is needed.

2. Install the Figma plugin

The plugin isn't on the Figma Community marketplace yet, so install it from the latest release:

  1. Download the plugin zip from the latest GitHub Release and unzip it.
  2. In the Figma desktop app: Menu → Plugins → Development → Import plugin from manifest… and pick the unzipped manifest.json.

3. Connect

Open the Figwright plugin in Figma (Plugins → Development → Figwright). It connects to the local server automatically and shows Connected. Ask your agent to run ping to confirm the link.

4. (Optional) Install the skills

The skills make agents reach for Figwright at the right moment and follow the grounded workflows:

npx skills add awdr74100/figwright/skills

5. Try it

With a frame selected in Figma, prompt your agent:

Code this Figma selection as a React component.

or, the other direction:

Build a pricing section in Figma from this spec.

Skills

Agent skills orchestrate Figwright's tools. They are model-invoked: your agent loads one automatically when the task matches its description.

SkillWhat it does
figma‑codegenTurn a Figma selection into framework-aware code, grounded on your stack and existing components.
figma‑buildBuild a Figma design from code or a description, reusing the file's existing components and styles.

Install across any supported agent with the skills CLI:

npx skills add awdr74100/figwright/skills      # both
npx skills add https://github.com/awdr74100/figwright/tree/main/skills/figma-codegen  # one

[!NOTE] Skills need the @figwright/mcp server connected. On their own they have no tools to drive.

Tools

Figwright exposes 117 MCP tools in three groups:

  • Read: selection, document and node inspection, styles, variables, components, fonts, prototype reactions and flows, motion (animation) state, screenshots, original image-fill assets, PDF export, and video export of animated frames (MP4 / GIF / WebM); plus list_files / use_file for working across more than one open Figma file at once.
  • Write: create and edit frames, text, shapes, auto-layout, effects, styles, variables, components (including authoring their boolean/text/instance-swap properties), pages, prototype reactions and flows, 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 affected code.

[!TIP] Your MCP client lists every tool at connect time, which is always the authoritative, up-to-date catalog.

Plugin

The Figma-side plugin isn't a black box. It shows every call as it happens, lets you inspect the exact payload sent to the model, and surfaces its own connection health.

Activity: every call, with timing and a jump to the nodes it touched · P

View source on GitHub