I have been thinking about design tokens a lot lately. Not in the "we should have a better system" way, but in the "I am starting a new project and I am tired of rebuilding this from scratch" way. Every new Figma file starts with the same routine: colour scales, type sizes, spacing, semantic aliases. It is not hard. It is just slow and repetitive.
So I started poking around with Claude Code to see if I could speed it up.
Step 1: a rough prompt
I began with a raw prompt, nothing polished. I described what I wanted: a structured set of design tokens I could drop into a Figma file, with primitive values and semantic aliases. What came back was better than I expected. It was well organised, logically layered and usable without much cleanup.
That is the part that usually goes wrong. The output looks right, but it needs so much interpretation that you may as well have done it yourself. This did not. I ran it a few times with different brand inputs and the structure held each time.
Step 2: try it in Figma
Next I applied the tokens inside Figma using Claude's design capability. Tokens landing cleanly in a real file is a different thing from a wall of neat JSON, so I was not sure what to expect.
It worked. The tokens showed up structured and applied correctly. Colours mapped cleanly, spacing scaled as it should and the type sizes kept their ratios. It was not a polished file I could hand to a client, but as a foundation it was solid, and it showed me the system was working.
Step 3: build the plugin
Once the tokens worked, I could not stop there. Could this become a real plugin that any designer could use without touching a prompt?
I went back to Claude Code and asked it to take the prompt I had been refining and restructure it for Figma's plugin agent, so the result would be a working plugin and not just token output. That is where it clicked. The build was clean, the logic was sound and the interface was simple enough to use without reading any documentation.
What the plugin does
The Design Token Builder takes four inputs. From those it generates the whole stack: primitive colour scales, semantic colour assignments, spacing, type and the rest. Everything is named consistently and ready to use. It is not a rough start you have to restructure. It is something you can build on.
What I took from it
This was not about replacing design judgement. The decisions still matter: what a brand-500 should feel like, how hard the neutrals should shift between light and dark, whether the small end of the spacing scale needs tighter steps. Those calls are still yours.
What it removes is the grunt work, the part where you rebuild the same scales and spacing in the same structure every single time. That is now a short form and a button.
The plugin lives in a private repo for now. I am still refining the output, mostly around dark mode semantic mappings, but the core works.
Read the original on Medium, with the prompt and demo videos ↗
All writing