Pixelwright GitHub

MCP Free, code public, for Figma Desktop

Let your agent work in the Figma file you have open.

Pixelwright connects Claude Code, Cursor and Codex to Figma Desktop through a plugin. Your agent reads designs as code-ready XML and edits the file when you allow it. No token, no rate limits, any plan.

npx -y pixelwright@latest

Needs Node.js 24.11 or newer and Figma Desktop. Read the docs or try it on the demo file

An agent works in a Figma file through Pixelwright, one task after another: it reads a pricing card as XML and changes its button, gives a sign-in screen's tokens a dark mode, adds a card to a dashboard row, and turns a button instance into code with a Code Connect template.

Your agent reads the design as code-ready XML.

design_read gives a section as XML an agent already knows how to read: Figma's layer types as tags, CSS as attributes, your variables as var(--name), components with their variants. Sent back with a change, only that change lands in the file, in one undo step.

design_read · Pricing / Pro
<Frame id="12:40" name="Pro" display="flex" flex-direction="column"
       gap="12px" padding="20px" border-radius="16px" background="var(--surface)">  <Frame name="Header" display="flex" justify-content="space-between">    <Text name="Plan" textStyle="Title">Pro</Text>    <Instance name="Badge" component="Badge" variant="Tone=Violet">Popular</Instance>  </Frame>  <Text name="Price" textStyle="Display">$12 <Span color="var(--muted)">per month</Span></Text>  <Frame name="Features" display="flex" flex-direction="column" gap="5px">…</Frame>  <Instance name="Button / Primary" component="Button" variant="Type=Primary"
            $code="Button">Get started</Instance></Frame>

Your agentstdiopixelwrightlocalhostthe pluginPlugin APIyour file

No REST API, no token, no rate limits: every read and write goes through Figma's Plugin API, in the file, on your computer, on any plan.

Set it up once, in a terminal and in Figma.

  1. Run the setup

    It connects Claude Code and Cursor, shows the config for Codex and other clients, and puts the plugin in ~/.pixelwright/plugin.

    $ npx -y pixelwright@latest

  2. Import the plugin

    Once, in Figma Desktop: Plugins → Development → Import plugin from manifest…, then pick the manifest. The setup keeps that copy current.

    ~/.pixelwright/plugin/manifest.json

  3. Pair it, once

    Run Pixelwright in your file. The first time, type in the code your agent shows you.

  4. Ask your agent

    Read a section and build it, check a screen against the code, or allow edits and change the file.

    “Build the hero from Figma”

What your agent can do with a file.

Read the design

design_read
A section as XML: layer types as tags, CSS as attributes, tokens as var(--name), icons and images as files; Dev Mode notes, pins and measurements; Figma Motion as CSS keyframes; what an instance changed outside its component; what is ready for dev.
file_map, outline, nodes_find
Every page with its frames; a frame's layer tree; layers by name, type, text or component.
selection_get, selection_wait, viewport_get
What you picked, or waiting for you to pick; what you are looking at.
node_show, changes_since
Showing you layers at a zoom; what you changed since the agent last looked.
inspect
Layers as Figma has them: painted boxes, fills with their styles, how strokes paint, every effect, line heights and breaks, interactions.
measure, nodes_diff
The distances between layers; how one variant differs from another.
variants_read, breakpoints_find, flow_read
A component's states; a screen at its other widths; the prototype's screens and links.
screenshot, image_compare
A layer, or a region of it, as an image, dark mode included; the same render compared with a screenshot of your build.

Know the system

tokens_read, tokens_usage
Variables with every mode, and styles, as CSS, JSON or DTCG token files; where each is used.
design_audit, contrast_check, fonts_check
The scale in use and what is off it; text contrast; where each font comes from.
components_read
The components a page uses or the file defines, with variants and properties.
assets_export
Icons and images as SVG, PNG, JPG, WebP or PDF, sized by a CSS width, originals included.

Change the file

design_apply
The same XML back: change layers by id, add frames, instances, components and variants, place images; a named version in Figma's history first, when asked.
tokens_apply
Variable collections, modes and aliases, and styles.
nodes_delete, execute
Delete layers; run plugin code for what XML cannot say.

Connect your code

code_connect_read
Your Code Connect templates and what each connects.
status, guide
The connected files; the formats, for the agent to read.

A read sent back changes nothing; one attribute changed changes exactly that, in one undo step.

Instances arrive as your components.

Write Figma Code Connect templates the way Figma documents them. Pixelwright runs them on your computer, on any plan, without publishing anything, and gives every connected instance as your code with its imports.

Button.figma.ts
// url=https://www.figma.com/design/…?node-id=12-40
// component=Button
import figma from "figma";

const button = figma.selectedInstance;

export default {
  example: figma.tsx`<Button variant="${button.getEnum("Type", {
    Primary: "primary", Ghost: "ghost",
  })}">${button.getString("Label")}</Button>`,
  imports: ['import { Button } from "@/ui/Button"'],
};
In design_read
<Instance id="12:44" component="Button"
  variant="Type=Primary" $code="Button"/>

codeComponents
import { Button } from "@/ui/Button"
<Button variant="primary">Get started</Button>

Nothing in the file changes until you allow it.

Pixelwright Orbit — Pricing

Off: the plugin refuses every write. Try the switch.

  1. design_apply refused: Allow edits is off
  2. design_read Pricing / Pro

Off until you turn it on

Allow edits is a switch in the plugin's window, remembered per file on your computer. While it is off, the plugin refuses every write, whatever the agent asks.

One undo step per call

Each call that writes is one step of Figma's own undo. dryRun checks a change without making it.

On your computer

The server listens on localhost. A plugin window pairs once with a code you type in; before that it gets nothing.

Code you trust

execute runs plugin code the agent writes, and templates run as your project's code: use them where you would run the project's scripts.

Questions

Does it need a paid Figma plan?

No. The plugin runs in Figma Desktop on any plan. Writing needs edit access to the file, as it would for you.

Which agents does it work with?

Any MCP client. The setup connects Claude Code and Cursor for you and shows the config for Codex and others.

What does the file have to be?

Open in Figma Desktop with the Pixelwright window open. Several files can be connected at once; the agent uses the one you looked at last, or the one it names.

What does it cost?

Nothing. Pixelwright is free, with no paid tier, and its code is public under the FSL-1.1-MIT license (each version becomes MIT two years after its release). If it saves you time, you can donate on Ko-fi or to a monobank jar.

Is it made by Figma?

No. Pixelwright is an independent project, not affiliated with or endorsed by Figma.

Open a file. Ask your agent.

npx -y pixelwright@latest
Read the docs

Free to use. If it saves you time, support it on Ko-fi or with a monobank jar.