StyleGuardBlog·
Figma layer naming conventions that survive a growing design system
Practical Figma naming conventions for layers and components, plus how to enforce them with regex rules that live in the file.
A file with 4,000 default names is not “messy”. It is unsearchable. Developers, writers, and other designers cannot find the CTA, the empty state, or the modal scrim if they are all called Frame.
Start with role, not geometry
Prefer btn/primary, nav/item, hero/title over Rectangle 12 and Group 3. Geometry is already in the layer type. Role is what people search for.
A convention that holds up:
- Components:
category/variant(button/primary,input/error) - Instances on a page: keep the component name; suffix only when you need a unique handle
- Groups: the job they do (
form/fields,card/media) - Hidden work: prefix
archive/or_old/so it is obvious in search
Make the rule machine-checkable
Humans will not rename 200 frames by hand before every handoff. Encode the convention as a regex and scope it by node type.
Examples:
- Buttons:
^btn-on layers whose names already look interactive - Tokens:
^[a-z][a-z0-9-]*$if you want lowercase kebab-case - Icons:
^icon-
Report expected vs actual. Do not fail the whole file on a single illustration named by a contractor last week — scope the rule to the node types you own.
Share the rule with the file
A naming standard in a Notion doc dies the first week a contractor opens the file. Store the rule set in the Figma file so every scan uses it. Import and export JSON when you promote a convention from one product file to the next.
StyleGuard ships a Default layer name check for Figma’s built-in names, plus custom naming rules with expected-vs-actual output. See features for the form-based editor.
Ready to check your file?
Try StyleGuard directly in Figma.
Get the Figma plugin