Tokensmith
A Figma plugin for building a complete design system, colours with dark mode, type, spacing, radius, stroke and effects, then writing it to the file as variables and styles and exporting it as code for any stack.
Why I built it
Building a design system in Figma means hand-creating dozens of variables and styles, one at a time. Keeping them in sync, with each other, with the code, after every rename, is its own slow job. Most plugins either generate tokens or read them, but lose your edits somewhere on the way back.
I wanted one that treats the system as a single source you can edit visually and round-trip without loss, in either direction, and that exports clean tokens for whatever stack picks them up.
The whole problem was the round-trip: every token had to remember exactly where in the file it came from.
What it does
Tokensmith is a structured visual editor for a full design system, six token sections in all: colours with light and dark modes, typography, spacing, radius, stroke and multi-layer effects. You build the system, write it to Figma as named variable collections and styles, and export it as code, or you import an existing system, edit it, and write the changes back.
- Six token sections. Colours with dark mode, type, spacing, radius, stroke and multi-layer shadows, with OKLCH palette and dark-mode generators to fill gaps fast.
- Write to Figma. Generates named variable collections plus colour, text and effect styles, and a preview page that lays the whole system out.
- Lossless round-trip. Import existing collections and styles, edit them, and write changes back; every token keeps its source id, so renames and deletes propagate instead of duplicating.
- Seven-format export. CSS, W3C/DTCG JSON, Tailwind, SCSS, JS/TS, iOS Swift and Android XML, copied straight to the clipboard.
How it works
The lossless round-trip is the heart of it. Every imported token carries the id of the Figma variable or style it came from, so on write the plugin updates that exact node in place, renames when you renamed it and deletes when you removed it, instead of matching by name and missing on the edits that matter most.
Because origin-aware writes can rename and delete, every write passes through a Review Changes gate first: a pre-export diff that shows exactly what will be created, changed, renamed or deleted before anything touches your file. Import detection is confidence-rated too, so the plugin reads your file however it is actually named rather than insisting on one convention.
Tech stack
Built solo in Claude Code. The colour maths runs on Culori for OKLCH; the Figma I/O, read, write, import detection and the diff, is a set of small pure modules covered by a Vitest suite.