grafta

[grafta]

Talk to your Figma files.
Get a Figma file, and talk to it. Ask your AI what's in it, change it, or turn it into code, in whatever language you work in.
No Figma account, no Figma app running, no API limits.

[Three requests to an AI about one Figma file. What's in this file: it answers an order tracking card with 9 colour variables. Make it light and check the contrast: the card in its light theme, 9 of 9 texts passing WCAG AA, saved as a new file. Now turn it into code: CSS, and the same card drawn from it.]

Try it · Install · What to ask · Tools · Limits · FAQ · Website

[CI] [MIT licence] [Prebuilt for macOS, Linux and Windows]

What is it? A free, open-source tool your AI app uses: Claude, Cursor, Codex and others. It connects through MCP, the way AI apps connect to tools. It reads a Figma file on your computer exactly, so your AI works from the real values and never guesses.

What is a .fig? A Figma file. In Figma: File → Save local copy… Somebody may also just send you one. Slides, FigJam and Sites files work too.

Is it for me? If you have a Figma file and an AI app. A designer changes it, a developer turns it into code, and someone who was sent it asks what it is.

Try it

1. Install grafta in your AI app.

2. Get a file: yours, or this sample, the card above.

3. Ask, in words:

   Open order.fig with grafta. What's in it?

   Make it light, check the contrast, and save a new file.

   Now turn it into code.

grafta never writes over your file: it saves a new one, and reads it back before it says it is done. Open it in Figma to see it. How good the code is depends on your AI: grafta gives it exact values, and writes no code itself.

Install

Claude Desktop installs the bundle from Settings → Extensions when you open it; no terminal and no Node.js. The binaries are not signed: if macOS says it cannot check grafta the first time it runs, allow it in System Settings → Privacy & Security. If something does not work, Troubleshooting goes by what you see.

The Claude Code plugin registers the server and teaches the model how to use it. Anywhere else, register it once:

claude mcp add grafta -- grafta mcp

Or, in a client configured with JSON:

With grafta installed by the script, Homebrew or Cargo, "command": "grafta", "args": ["mcp"] does the same without npm.

Prebuilt for macOS (Apple silicon and Intel), Linux (x86_64 and arm64) and Windows (x86_64). One self-contained binary. We have run it by hand on a Mac with Apple silicon; the tests also pass on Linux and Windows in CI. Claude Code, Cursor, VS Code, Windsurf, Codex and the ChatGPT desktop app start it with npx, which needs Node.js 18 or newer. We have tried Claude Code and Claude Desktop; the others use the same setup. ChatGPT on the web reads no local server, so it cannot use grafta yet.

Why

A model is good at reading intent into a design and deciding what to build. It is bad at binary formats, and it guesses numbers. grafta is the opposite. It gives your model 43 tools to open a .fig, read every node, colour, variable and component in it, change it, draw it to check, and save a new file that Figma opens.

Four products

The same tools open, read, draw and save every file Figma saves, and each product's files were opened in that product to prove it.

See it

The same frame, three times. Each picture is grafta's own render_node; every change between them is a tool call a model would make (58 of them).

How a model works with it

Results are bounded: when something is left out, the result says so under omitted and how to get it. Nothing is truncated silently.

What to ask

Prompts that work as written. The model chooses the tools.

What it can do

Every tool, with its arguments, is in the tool reference, generated from the server's own tool list (on the website); grafta tool lists them in a terminal.

Why it can be trusted

Limits

• It does not interpret designs. Your model does. grafta answers what is in the file, and writes what it is told.
• It is not live, and not collaborative. You work on a saved copy, and open the new file it gives back. For the live file, use Figma's own server.
• How good the code is depends on your model. grafta gives it exact values, and writes no code itself. Figma's server and Framelink also serve design to code, from a Figma link, with an account.
• It is not affiliated with Figma, and reads and writes its format with no help from it.
• It works on files, not Figma's cloud: .fig from Figma Design, .deck from Figma Slides, .jam from FigJam and .site from Figma Sites. Save a local copy, and open the result in Figma. new_file takes Figma's format from a .fig you have; grafta does not ship it.
• Pictures are close, not Figma's. They use the fonts installed on your machine: with the design's font installed, most lines lay out within 2% of Figma's width; without it, a stand-in is used and the caption says so. Install the font and restart the server.
• An open file costs memory, far more than its size: on one Mac, a 57 MB file took 1.3 GB while open and an 86 MB one 5.5 GB. Close what you are done with.
• Not yet: auto-layout grids, component slots, boolean operations, prototyping, Dev Mode annotations, and component properties on variants.
• Only grafta's own variables and styles can be changed. The file's existing ones are read and bound to, not edited.

From a web page

import_layout turns HTML into an editable design: flexbox becomes auto-layout, sized fill, hug or fixed as the browser measured it. grafta runs no browser; a browser takes a snapshot of what it laid out, and grafta reads that.

curl -fsSLO https://n0ss4.github.io/grafta/snapshot.sh && curl -fsSLO https://n0ss4.github.io/grafta/snapshot.jssh snapshot.sh page.html page.json 'main'     # headless Chrome; a CSS selector picks the part

Or, in any browser console or a model's browser tool, paste snapshot.js and run copy(JSON.stringify(graftaSnapshot('main'))). Then ask the model to import page.json. What does not map (a gradient, a transform, an inline SVG, a remote image) is listed, not guessed.

From a terminal

The same tools, without a model:

grafta tool                                     # list the toolsgrafta tool read_node                           # what one takes, with an examplegrafta tool open_file '{"path":"design.fig"}'   # call one: each call starts afreshgrafta tool --batch calls.json                  # a sequence on one open file

A batch is a JSON array of { "tool", "args", "out"? }; "$0.handle" in an argument is call 0's result field, and "out" writes a picture to a file. The showcase is one.

FAQ

Do I need a Figma account or an API key? No. grafta works on the file on your disk. You need Figma only to save a local copy and to open the result.

Does my file leave my machine? grafta makes no network call. What your model reads through it is a tool result like any other, sent wherever your MCP client sends the conversation.

Can it break my file? It does not write over one: save_as refuses a path that exists and reads back what it wrote. It refuses what Figma would have to repair, and unsaved edits survive a restart.

Which clients and models? Any MCP client over stdio (Claude Desktop, Claude Code, Cursor, VS Code, Windsurf…) with any model it runs.

Is it affiliated with Figma? No. It is free and open source, under the MIT licence.

Contributing

How it is built (ARCHITECTURE), where it is going (ROADMAP) and how to work on it (CONTRIBUTING). What changed is in the CHANGELOG; report a vulnerability as SECURITY says.

MIT licence. Not affiliated with Figma.