Token Naming Conventions and Best Practices
1. Definition of Design Tokens
Design tokens are a methodology for storing design-related information in a format that is easily consumable by both design and development teams. They facilitate consistency and scalability within design systems.
2. Importance of Naming Conventions
Consistent naming conventions for design tokens improve clarity, maintainability, and collaboration across teams. They help developers and designers understand the purpose of each token at a glance.
3. Token Naming Conventions
Here are some common conventions for naming tokens:
Categories of Tokens
- Color Tokens
- Spacing Tokens
- Typography Tokens
- Shadow Tokens
- Border Tokens
General Naming Structure
Use a structured format for naming, such as:
category--property--stateFor example:
color--primary--default4. Best Practices
Follow these best practices to maintain an effective naming system:
- Be descriptive and concise.
- Use lowercase letters and hyphens for separation.
- Avoid abbreviations unless widely understood.
- Group related tokens together.
- Review and update token names as design evolves.
5. FAQ
What are design tokens?
Design tokens are the visual design atoms of the product’s UI, such as colors, spacing, and typography, stored in a format that is easily used across platforms.
Why are naming conventions important?
They ensure that everyone on the team can easily understand and utilize design tokens, which promotes collaboration and reduces errors.
Can I change token names later?
Yes, but it's important to document changes clearly to avoid confusion among team members.