Skip to content
New Claude can now manage your tokens

Design tokens,
made manageable.

Edit Figma variables like a spreadsheet, see how they connect on a graph, and generate palettes and scales. Now you can open it full-size in a browser tab, or let Claude manage it for you.

Install free plugin Explore features

Free Open source (MIT) Figma Community plugin

Winden Tokens
The Winden Tokens plugin window in Figma, showing the table view with variables grouped by path

Tested on a real design system

  • 681 variables.
  • 513 references.
  • 6 collections.
  • One graph.
  • _global 116
  • color 118
  • typography 51
  • components 342
  • dimensions 51
  • marko 3

One plugin for every token workflow. Edit, see, generate, check — at any scale.

Spreadsheet table

Edit hundreds of variables inline. Slash paths become groups, and search narrows the list as you type.

The table view: variables grouped by slash path, with swatches and values

⌘K quick search

Jump to any token, group or collection. The graph flies straight to it.

The Command-K quick search palette open over the graph, with results for brand

JSON editor

The whole token tree in a CodeMirror editor, with folding.

The JSON tab: the token tree in a code editor with folding

Undo and redo

History for every change, so trying an idea costs nothing.

Relationships graph

Aliases drawn as connections, collections as cards. Arrange Grid lays them out by dependency tier.

The Relationships graph: collection cards in dependency tiers, joined by alias lines

Shades generator

50–950 palettes shaped with Bézier curves. Managed shades update when the base color changes.

The Shades generator: a Bézier curve editor above a strip of generated swatches

Scale generator

Spacing and type scales from ratios like Golden Ratio and Major Third.

The Steps generator: a scale ratio, T-shirt size steps and the generated values

Contrast checker

WCAG 2.1 AA and AAA results for every color pair.

Brand blue shades 10 to 100 with their contrast ratios against white and AA and AAA results

Modes, per collection

Pick a collection, then its mode. Same-named modes follow across collections.

The mode picker: collection tags, with desktop and mobile modes for the dimensions collection

Move without breaking

Move a variable or a whole group to another collection. Every mode’s value comes along, aliases are rewired, and canvas fills, strokes and effects stay bound.

Every screen, built for scale. Take the tour.

  • Table

    The table view, listing variables in groups with their values

  • Relationships

    The Relationships graph: collection cards joined by alias lines, with a sidebar

  • Quick search

    The Command-K quick search palette open over the graph

  • JSON

    The JSON tab: the token tree in a code editor with folding

  • Shades

    The Shades generator: a Bézier curve editor above a strip of generated swatches

  • Scale

    The Steps generator: a scale ratio, T-shirt size steps and the generated values

  • Contrast

    Brand blue shades with their contrast ratios against white and AA and AAA results

  • Modes

    The mode picker: collection tags, with desktop and mobile modes for the dimensions collection

Relationships graph

See how every token connects. Aliases become lines, collections become cards.

  • Arrange Grid

    Lays the cards out by dependency tier in one click.

  • Trace a path

    Click a row to light up its path, up and down the alias chain.

  • Fly to a collection

    Click a collection name and the graph flies to its card.

  • Drag to alias

    Drag between handles to point one token at another.

Winden Tokens
The Relationships graph: collection cards joined by alias lines, with a sidebar
Trace a path
A zoomed-in graph with one row’s alias path highlighted

New Browser tab and CLI

Too big for a plugin window? Open it in a browser tab.

The winden-tokens command serves the same interface full-size on your machine and drives the Figma file you have open. Edits land in Figma right away, and selecting a component in Figma shows its card in the tab.

Keep the plugin window open in Figma. It is the only thing that can reach the Figma API.

winden-tokens on npm Node.js 18+

127.0.0.1:9337
The Winden Tokens graph running full-size in a browser tab at 127.0.0.1:9337 
$ npx winden-tokens

  Winden Tokens bridge — protocol v1
  UI:    http://127.0.0.1:9337/
  Relay: ws://127.0.0.1:9337

  Now open the Winden Tokens plugin in Figma and leave that window open.
  Ctrl-C to stop.

  • Loopback only

    Listens on 127.0.0.1, so nothing on your network can reach it.

  • Origin-checked

    A web page you happen to have open cannot connect to it.

  • Stores nothing

    It forwards messages between the tab and Figma, and forgets them.

New MCP server

Let Claude manage your tokens. An MCP server for the Figma file you have open.

The same package installs an MCP server. Claude can list collections, read a variable and everything it references, create variables, groups and collections, and set values, all in the file you are working on.

Set it up in three steps

  1. 1

    Install the package

    npm install -g winden-tokens
  2. 2

    Add it to Claude Code

    claude mcp add winden-tokens -- winden-tokens-mcp
  3. 3

    Run it, then open the plugin in Figma

    winden-tokens

Claude winden-tokens

Create color/brand with 100, 500 and 900, then point button/color/primary/enabled at color/brand/500.

  • list_collections
  • create_group
  • set_variable_value

Done — 3 variables in color/brand, and button/color/primary/enabled now references {color/brand/500}.

The tools Claude gets

  • list_collections

    Collections with their modes and counts.

  • list_variables

    Filter by collection, group, type or name.

  • get_variable

    A variable, its values per mode and everything it references.

  • create_collection

    An empty collection, ready for variables.

  • create_variable

    One variable. A slash in its name puts it in a group.

  • create_group

    A group of variables in one go.

  • set_variable_value

    A value or a {reference}, per mode.

  • rename_variable

    A new name. Aliases keep working, and a new path moves it to another group.

  • delete_variable

    Reports what it would affect, then deletes.

Renaming and deleting can’t be undone from Claude’s side. Figma’s own undo is the recovery.

Figma gives you variables. Winden Tokens gives you the workflows.

Winden Tokens compared with native Figma variables
Feature Winden Tokens Native Figma
Spreadsheet-style editing Yes Limited
Visual relationship graph Yes No
Quick search that flies the graph to a token Yes No
JSON editing of the whole token tree Yes No
50–950 palette generator Bézier curves No
Number scale generator 8 presets No
WCAG contrast checking AA/AAA No
Move variables between collections Keeps references & bindings Manual copy/paste
Full-size browser view Yes No
Multi-mode support Yes Yes
Picks up changes made in Figma’s own variables panel Yes N/A

Watch it in action. Video tutorials and walkthroughs.

View all tutorials

What’s new. Recent releases and improvements.

View all releases
v1.1.0

Version 1.1.0 Released

Dark mode UI update with improved relationships view. This release includes updated UI styling, dark theme support, cleaner code organization, and enhanced visual relationships between design tokens.

v1.0.0

Version 1.0.0 Released

Major milestone with managed shade generator, step generator for numbers, multi-mode support, and preset imports. Includes collection filters, type filters, and ability to reuse existing variables for powerful design token...

v0.0.9

Version 0.0.9 Released

Deployment update and stability improvements for the Winden Tokens Figma plugin.

Start with the tokens you already have.

Install free plugin ☕ Buy me a coffee