In any complex design project, organization is the bridge between creativity and efficiency. Defining clear naming conventions for layer states is not just about neatness; it is about creating a scalable system that team members and developers can understand at a glance.
Why Layer State Naming Matters
Without a standardized system, "Final_v2_new" becomes the norm, leading to confusion and lost time. A robust naming convention improves searchability, simplifies handovers, and enhances design system consistency.
The "Category / Component / State" Framework
One of the most effective methods is the hierarchical approach. By using forward slashes, you create a natural folder structure in most design tools:
[Type] / [Component] / [Size] / [State]
Example:
Btn / Primary / Large / Hover
Icon / Sidebar / Small / Active
Key Elements of a Good Name:
- Consistency: Use the same casing (e.g., PascalCase or kebab-case) throughout the project.
- Clarity: Avoid vague terms like "Object 1" or "Copy."
- Brevity: Keep it short but descriptive enough to distinguish it from others.
Standardizing States for Interaction
When defining UI states, stick to a common vocabulary that developers recognize:
| State | Description |
|---|---|
| Default / Normal | The initial view of the component. |
| Hover | When a user moves a pointer over the element. |
| Active / Pressed | During the click or touch interaction. |
| Disabled | When the element is visible but non-interactive. |
By implementing these naming conventions for layer states, you ensure that your design file remains a "source of truth" that is easy to navigate and even easier to scale.
