The tool
.png)
Inputs:
- Naming system (selector): atomic design, BEM, custom
- Component list (free text, repeatable): components and their variants
Output: Standardized names for each component and variant following the chosen system, for example Button/Primary/Large for atomic or button--primary for BEM, with a short rationale. Exportable.
Behavior: Generates instantly in-browser, no login. Exportable.
Inconsistent component names breed duplicates
When everyone names components their own way, the library becomes unsearchable, and the predictable result is duplication: a designer cannot find the existing button, so they build a new one, and now there are three. That is also how engineers end up building new components that already exist, because the naming gave them no way to find the original.
A shared convention makes components findable and keeps design and code speaking the same language. This tool generates names to atomic design or BEM. The structural background is in atomic design methodology and the operational side in design ops basics for components.
How it works
1. Pick a system. Atomic design or BEM, or define your own pattern.
2. List your components. Add components and variants.
3. Generate names. Get consistent, predictable naming.
4. Export. Copy the names into Figma or your codebase.
A worked example
You have a button with primary, secondary, and ghost variants in three sizes. Named ad hoc, you get btn, ButtonSecondary, ghost-btn-sm, and nobody can predict the next one. Run through an atomic convention and you get Button/Primary/Large, Button/Secondary/Medium, Button/Ghost/Small, a pattern so regular that anyone can guess the name of a variant they have not seen. That predictability is what makes the library searchable and keeps it aligned with your token names.
From naming to a clean library, with Figr
A convention only holds if components are used by name. Figr is an AI product designer that reads your components and applies them by name across what it designs, so the convention is enforced in practice and new screens reuse existing components instead of spawning duplicates. Pair this with the design token naming generator and the design system audit.
Who this is for
This is for design leaders and design system owners keeping a real component library findable and consistent.
What this tool is not
It generates names to a pattern; it does not reorganize your existing library or merge duplicates for you. It is also a free, standalone utility, not a Figr product feature.
FAQ
Is the component naming generator free?
Yes, free and no sign-up.
What is the difference between atomic design and BEM?
Atomic design organizes components by complexity (atoms, molecules, organisms). BEM names by block, element, and modifier. This tool supports both.
Can I export the names?
Yes, as a list for Figma or your codebase.
Can I use my own pattern?
Yes. Choose custom and the tool follows your structure.
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.