By the end of this lesson you can
- Name layers, frames, components and variables consistently.
- Keep files tidy with regular clean-up habits.
- Use naming conventions that match code.
The idea
Good names make files searchable and handoff smoother. Bad names ("Frame 2381", "Rectangle copy 4", "final_FINAL_v3") make files hard to use and hide meaning.
Conventions
- Screens: include flow and step, for example "Checkout / 02 Delivery / Error".
- Components: use slashes for grouping ("Input / Text field") and property names that match code ("size", "variant", "state").
- Layers: name meaningful containers ("Header", "Price row"), not every rectangle.
- Variables: use a consistent pattern such as category/role/variant ("color/text/secondary").
Hygiene habits
Delete hidden and unused layers, detach nothing without reason, archive old explorations, keep a consistent page structure and resolve comments. Many teams do a short clean-up before every handoff or review.
Why it matters in real projects
Files are read far more often than they are written. Clear names help teammates and developers find things, help you return to your own work months later, and signal professionalism to anyone reviewing your files, including hiring managers who sometimes ask to see real working files.
A realistic example
A developer inspecting a screen sees layers named "Group 14", "Rectangle 7" and "Frame 2381". They cannot tell what a container represents and build the structure from scratch.
After a 20-minute clean-up, the same screen has "Order summary", "Line item", "Delivery estimate" and "Primary action", and components named "Button / Primary". The developer maps containers to their components directly, and later searches for "Line item" find every use in the file.
Step by step
Agree conventions
Write naming rules for screens, components, layers and variables.
Rename screens
Apply the flow / step / state pattern.
Rename key layers
Name meaningful containers; leave tiny decorative layers alone.
Remove clutter
Delete hidden and unused layers and stray frames.
Archive
Move old explorations to an archive page.
Schedule clean-ups
Add a clean-up step before every handoff.
Common mistakes
Mistake Version numbers in file names ("final_v7").
Instead Use version history and named versions instead.
Mistake Naming by appearance ("Blue box").
Instead Name by purpose ("Promo banner").
Mistake Renaming every layer obsessively.
Instead Focus on meaningful containers and components.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 30 min
File clean-up
Clean up a file you made earlier in this stage.
Steps
- Write a short naming convention.
- Rename screens, containers and components.
- Remove hidden and unused layers.
- Archive old explorations and take before and after screenshots of the layers panel.
Deliverable
A cleaned-up file with before and after screenshots.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Consistent names make files searchable and handoff smoother.
- Name by purpose and match code conventions.
- Clean up regularly, especially before handoff.
- Tidy files show professionalism.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.