TokenFlow
Paste a URL, get its design tokens as Figma Variables. Colour, type and spacing, straight off a live site.
Rebuilding an existing product in Figma starts with the same unpaid hour: opening dev tools and copying hex values one at a time. TokenFlow reads the page, works out which of its values were meant to be a system, and writes them into Figma Variables.
- Year
- 2026
- Role
- Design & engineering
- Type
- Figma plugin, free with no limits
- Input
- A public URL, or JSON you already have
Theproblem
The tokens are already written down. They are in the stylesheet, in the CSS variables, in the values the page is painted with. Getting them into Figma is transcription: slow, easy to get wrong by one digit, and nobody’s idea of design work.
WhatIdid
An address is the whole input
Type a domain and press one button. The plugin fetches the page, reads the stylesheet it came with, and comes back with counts: colours, spacing, font sizes, corner radii. There is no account, no extension to install first and nothing to configure, because anything else would cost more than the hour it is saving.
Everything is shown before anything is written
The result screen is a preview, not a report of work already done. Every colour with the name it is about to be given, the spacing scale the page turned out to have, the type sizes it actually uses. Close the panel here and the Figma file is exactly as you left it. Automation that writes first and shows afterwards is automation nobody lets near a real file twice.
A page mentions hundreds of colours and uses about a dozen
Every value is weighed by where it was found. A variable declared in :root counts for far more than a hex sitting in one rule, because somebody sat down and named the first one. Pure black and pure white are dropped: every page is full of both and neither is a decision. What survives is the top of that ranking, which is the difference between a token set and a list.
Names it can justify
Where the page named the value, the CSS variable keeps its own name. Where it did not, the name is hue and rank: blue_5, gray_7. Deliberately plain, because a made-up semantic name is a guess wearing a uniform. A token called blue_5 asks to be renamed; one called primary tells you it has already been decided.
It lands as Variables, not as a file to retype
The output is native Figma Variables in their own collections: colour as COLOR, spacing and type as FLOAT. Nothing is exported, nothing is downloaded, nothing has to be pasted anywhere afterwards. The moment it finishes you can bind a component to it.
The other way in, for teams that already have tokens
A second tab takes JSON straight out of whatever the team already keeps them in. It is parsed and counted before the button turns on, so a stray comma is caught in the panel rather than halfway through creating variables. This half never touches the network at all.
One screen, two ways in, one way out
The window is 600 by 750 and everything happens inside it: address, preview, import. No wizard, no settings page, no second window. The small system underneath it is two tabs, one primary button, four counters and a swatch, which is all a tool used for ninety seconds at a time can afford to teach.
Underthehood
A Figma plugin cannot open a web page
Plugin code runs inside Figma with no way to load a cross-origin document, so the request goes through a public CORS proxy and what comes back is the page as it was served. That is the honest boundary of the tool: it reads the stylesheet that was delivered, not the styles a browser computed after running the site’s JavaScript, and it can only reach pages that are public.
Where a value was found is the only evidence there is
Nothing in a stylesheet says which values are the design system. The only signal available is the shape of the declaration: a named variable in :root, a property that paints something, an inline style, a hex loose in the markup. Weighting those differently is the entire product, and it is also the part that will always be a judgement rather than a fact.
Two halves that fail differently
Extraction depends on a network, a proxy and somebody else’s markup, so it fails often and has to say so plainly. JSON import depends on nothing and either parses or does not. Keeping them as two tabs rather than one clever input means neither has to apologise for the other.
Free, with nothing held back
Unlimited extractions, unlimited imports, no account, no key to paste. A tool whose whole promise is saving an hour has no business asking for a card at the end of it.