localfig

The Figma desktop app as an MCP server. localfig gives an AI agent the full Figma Plugin API on the file you have open — through a tiny dev plugin and a loopback HTTP bridge, entirely on your machine.

• Reads and writes. Frames, text, auto-layout, variables, components, image fills, exports, undo — anything the Plugin API can do, the agent can do.
• No Figma cloud API, no personal access token, no per-account quota.
• Zero dependencies. Node built-ins only. Nothing leaves your machine.
• Works with any MCP client that can launch a stdio server: Claude Code, Cursor, Windsurf, Cline, Claude Desktop and more.

MCP client  --stdio JSON-RPC-->  localfig  --http localhost:8765-->  Figma plugin  -->  Plugin API

Why localfig

Requirements

• Node.js 18 or newer
• The Figma desktop app — dev plugins cannot be imported in the browser
• An MCP client: Claude Code, Cursor, Windsurf, Cline, Claude Desktop, …

Install (once)

npx -y localfig --setup

That generates your local secret, writes the plugin to ~/.localfig/plugin/, registers localfig with every MCP client it finds on your machine, and prints the manifest path for the next step. --dry-run shows what it would do without touching anything, and --clients=cursor,vscode limits it to the clients you name. Prefer a clone? git clone https://github.com/LucasGorgal/localfig.git && cd localfig && node server.mjs --setup does the same.

A client counts as installed when its config folder exists. Setup merges into existing files instead of replacing them: other servers and settings stay, an existing localfig entry keeps its env, and a .localfig.bak copy is written before any change. Files it cannot safely rewrite, such as a settings.json with comments, are left untouched and reported with the entry to paste. Restart any client that was already open.

For a client that is not in the list, add this to its MCP configuration:

{ "mcpServers": { "localfig": { "command": "npx", "args": ["-y", "localfig"] } } }

On Windows, use "command": "cmd", "args": ["/c", "npx", "-y", "localfig"] instead: most clients start servers without a shell, and npx is a .cmd script there.

Then import the plugin into Figma (once):

1. Open any design file in the desktop app. The Plugins menu only exists inside a file, not on the home screen.
2. Figma menu (the logo, top-left) → Plugins → Development → Import plugin from manifest… — or press Ctrl / (Cmd /) and type import plugin from manifest.
3. Pick ~/.localfig/plugin/manifest.json (the setup output prints the full path).

The manifest asks for two permissions — teamlibrary (library components and tokens) and currentuser (who is driving) — and registers a relaunch button.

Use (every session)

1. Open the file you want to work on.
2. Run the plugin: Ctrl / → localfig — or Ctrl Alt P (Cmd Opt P) to re-run the last plugin, or the Reconnect localfig button in the properties panel of a file it has run in. A small panel appears and says Connected to localfig once the MCP server is up. Leave it open.
3. Ask your agent to do Figma work. Every tool acts on the file where the plugin is running — there is no file key, which is why nothing touches the cloud.

Closing the panel (or the file) disconnects; re-run the plugin to reconnect. This is the one manual step: Figma provides no way to launch a plugin from outside.

Tools

figma_eval environment

Code runs inside the plugin sandbox, wrapped in an async function: top-level await and return both work.

const n = await figma.getNodeByIdAsync('10:59');   // sync getNodeById is unavailable (dynamic-page access)
await helpers.setText(n.findOne(x => x.type === 'TEXT'), 'new copy');
helpers.reveal(n);                                  // put it on the person's screen
return { id: n.id, w: n.width };                   // JSON-serialized back to the agent

Globals: figma and helpers.

• helpers.createText({characters, font: {family, style}, fontSize, color: '#hex', width, lineHeight, letterSpacing, textCase, textAlign, name, parent, x, y}) — loads the font and orders resize() before textAutoResize.
• helpers.setText(node, chars) — loads the node's real fonts, then sets characters. helpers.loadNodeFonts(node).
• helpers.set(node, props) — batch assign; layoutMode first, width/height via resize, sizing modes after.
• helpers.rgb('#rrggbb'), helpers.rgba('#rrggbbaa') — hex to the {r, g, b[, a]} fills want.
• helpers.reveal(nodes) — scroll and zoom the viewport to what you just made. helpers.notify(msg) — a toast.
• helpers.collection(name, [modes]), helpers.token(collection, name, type, value | {mode: value}), helpers.bind(node, 'fills' | 'strokes' | prop, variable) — create design tokens and bind properties to them, one line each.
• helpers.importComponent(key), helpers.instance(key, parent, props) — team-library components.
• helpers.query(root, sel) — minimal selectors: TEXT, [name=X], [name*=X], A B, a, b. helpers.createAutoLayout(dir, props).
• helpers.command(kind, payload) — run any typed command (tokens, metadata, find, changes, export…) from inside a script: (await helpers.command('tokens', { collection: 'Brand' })).result.

Plugin API gotchas the helpers protect you from

• resize() on a TEXT node resets textAutoResize to NONE; on an auto-layout frame it sets both sizing modes to FIXED. Resize first, then set the sizing.
• Return plain data from figma_eval. Real Figma nodes are collapsed to {id, name, type} so a stray node reference cannot flood the result — use figma_metadata to inspect a subtree.
• Load fonts before any text mutation.
• figma.notify() works here (the cloud MCP blocks it).

Design-system awareness

figma_tokens returns the file's variables the way a design system thinks about them:

{ "collections": [{ "name": "Brand", "modes": ["Light", "Dark"], "defaultMode": "Light",
    "variables": [{ "name": "color/bg", "type": "COLOR", "values": { "Light": "#ffffff", "Dark": "#04060c" } },
                  { "name": "space/md", "type": "FLOAT", "values": { "Light": 16, "Dark": 16 } },
                  { "name": "color/accent", "type": "COLOR", "values": { "Light": "{color/blue-500}", "Dark": "{color/blue-300}" } }] }],
  "styles": { "paint": [...], "text": [...], "effect": [...] } }