BROWSER VIEW

MCP server — manage tokens from Claude

The winden-tokens package also installs an MCP server, so Claude can read and edit the variables in the Figma file you have open.

Setup

Install the package if you have not already:

npm install -g winden-tokens

Register the server with Claude:

claude mcp add winden-tokens -- winden-tokens-mcp

Then start the relay and open the plugin in Figma, exactly as for the browser view:

winden-tokens

The server needs both. If the relay is not running, or the Figma plugin window is closed, a tool call fails immediately and says which is missing — it does not hang.

How to use it

Once it is registered, you talk to Claude normally — it decides which tools to call.

Ask it to read before you ask it to write. A few that work well:

What collections are in this file, and how many variables does each hold?

Show me everything that references color/brand/500.

Which of my semantic colours point at a raw hex instead of a primitive?

That last one is the kind of question the graph makes visible and a variables table does not.

Then writes:

Create a color/surface/raised in the color collection that references color/neutral/50.

Add spacing/2xl to _global with a value of 48.

Rename color/brand/primary to color/brand/500.

Claude reports what it changed. The change lands in Figma immediately — you will see it in the plugin and in the variables panel.

A good first session

  1. Start the relay: winden-tokens
  2. Open the plugin in Figma.
  3. Ask Claude to list your collections. If that comes back correct, the whole chain works.
  4. Ask it to create one variable in a scratch collection.
  5. Check it in Figma, then undo it there.

If step 3 fails, the error says whether the relay or the plugin is the missing half.

What Claude can do

Read

  • list_collections — every collection, its modes and how many variables it holds.
  • list_variables — filter by collection, group prefix or type.
  • get_variable — one variable: its value per mode, what it references, and what references it.

Write

  • create_collection, create_variable, create_group
  • set_variable_value — a raw value, or a reference to another variable
  • rename_variable, delete_variable

What it deliberately cannot do

Bind a variable to a layer property. That depends on what is selected in Figma, which Claude cannot see. It would be acting on whatever you last clicked.

Rename a whole group. One call rewires every variable that references it. Renaming a semantic group can quietly change dozens of components.

Both are available in the plugin UI, where you can see what you are about to change.

Before you let it write

Renaming and deleting are not reversible from Claude's side. Figma's own undo is the only way back, and only while the file is open. Ask for reads first and check that what Claude describes matches what you see.

Claude also cannot tell which of several concurrent writes succeeded — if you are editing in Figma at the same time, a reported success may belong to your edit rather than its own. Fine for one person working alone; worth knowing before you trust a long unattended sequence.