The tool
Inputs:
- Token category (selector): color, spacing, typography, radius, shadow, size
- Naming pattern (selector): tiered (base/semantic/component), flat
- Component and property names (free text, repeatable)
Output: Generated token names following the chosen pattern, for example color-primary-500, space-inset-md, font-size-heading-lg, with a short rationale per tier. Exportable.
Behavior: Generates instantly in-browser, no login. Exportable.
Tokens rot without a naming convention
A token system starts clean and decays one shortcut at a time. Someone adds blue2, someone else primaryBlue, a third person brandColor, and now three names point at the same value and nobody trusts the system. The names are the interface to the tokens, and inconsistent names make the whole thing unsearchable.
A convention prevents that. A tiered structure in particular separates raw values from their meaning, so the system stays legible as it grows. This tool generates names to a consistent pattern. The foundations are in how to use design tokens and the structural thinking in atomic design methodology.
How it works
1. Pick the category. Color, spacing, type, and more each follow the pattern.
2. Choose tiered or flat. Tiered separates base values from semantic and component uses.
3. Enter your names. Add the components and properties you are tokenizing.
4. Generate and export. Get consistent names, then copy them out.
A worked example
Take a primary blue. A flat system stops at blue-500. A tiered system makes the intent explicit: color-blue-500 is the raw value, color-primary is the semantic alias that points at it, and button-background-primary is the component token that points at that. Change the brand color once at the base, and every semantic and component token downstream updates, instead of a find-and-replace across the codebase. That layering is what keeps a growing system maintainable, the same principle the design systems guide describes.
From naming to applied tokens, with Figr
A convention only helps if the tokens are actually used by name. Figr is an AI product designer that reads your tokens, names and all, and applies them across what it designs, so the convention is enforced in practice rather than living in a doc. Pair this with the component naming generator and the typography scale generator.
Who this is for
This is for design leaders and design system architects who own token structure across a real system.
What this tool is not
It generates names to a pattern; it does not migrate your existing tokens or decide your tiering philosophy for you. It is also a free, standalone utility, not a Figr product feature.
FAQ
Is the design token naming generator free?
Yes, free and no sign-up.
What is a tiered token structure?
Base tokens hold raw values, semantic tokens map meaning (like primary or danger), and component tokens map to specific uses. The tiers keep the system maintainable.
Can I export the names?
Yes, as a list you can bring into your token tooling.
Does it follow a standard?
It follows common industry patterns; you choose tiered or flat to match your setup.
How is this different from Figr the product?
This is a free utility. Figr the product is an AI product designer that turns product context into UX decisions and Figma-ready design.