In the world of professional design, organization is just as important as creativity. Adopting readable layer naming conventions is the secret to a seamless workflow, especially when collaborating in teams or handing off files to developers.
Why Layer Naming Conventions Matter
Messy layers like "Group 1," "Vector 5," or "Rectangle 2" slow down production and increase cognitive load. A structured naming system ensures that anyone opening your file can understand the hierarchy and purpose of every element instantly.
Top Techniques for Better Layer Organization
1. Use the "Component/Type - State - Value" Pattern
One of the most effective design system naming techniques is a hierarchical structure. For example: Btn - Primary - Hover. This makes searching for specific layers much faster.
2. Implement BEM Logic
Borrowing from the Block-Element-Modifier (BEM) methodology used in coding helps in creating a bridge between design and development.
- Block: Button
- Element: Icon
- Modifier: Active
3. Use Lowercase and Hyphens
For web-friendly handoffs, many designers prefer using kebab-case (e.g., main-nav-background). It’s clean, readable, and prevents errors during the export process.
4. Group and Frame Logically
Naming isn't just about individual layers; it’s about the containers. Always rename your Groups and Frames to reflect their content, such as Card / Product / Thumbnail.
