Improving Your Naming Skills: Tips, Tricks, and Resources
Struggling with coming up with the perfect name for your design tokens, UI components, or variables? You’re not alone. Naming can be a challenging task, but with the right approach, you can make it more straightforward and effective. In this post, we’ll explore some tips, real-world examples, and resources that can help you master the art of naming.
Inspiration For Naming
If you’re looking for some inspiration for naming your HTML classes, CSS properties, or JavaScript functions, Classnames is a fantastic resource that provides thematically grouped lists of words perfect for naming. These lists cover a wide range of themes, from behavior to nature, art, theater, and more, making it easy to think outside the box when naming your components.
Naming Conventions
Javier Cuello has summarized a set of naming best practices that can help you name your layers, groups, and components in a consistent and scalable way. A good name should have a logical structure, be short, meaningful, and known by everyone. It’s important to avoid names that are related to visual properties and instead focus on clear, descriptive terms.
Design Tokens Naming Playbook
To improve your design tokens naming skills, check out the interactive Design Tokens Naming Playbook created by Romina Kavcic. This resource covers different approaches to naming structures, creating searchable databases, running naming workshops, and automation. You can even play with names in the naming playground included in the playbook.
Flexible Design Token Taxonomy
Learn how to build a flexible design token taxonomy that works across different products by exploring the case study of Intuit’s design token system. Nate Baldwin shares insights into Intuit’s approach, including pain points of the old system, criteria for the new system, and how it was created. This case study provides valuable takeaways for building your own robust and flexible token taxonomy.
Naming Colors
When creating a color system, it’s essential to have names that make sense to everyone on the team. Jess Satell from Adobe’s Spectrum Design System explains how they use a combination of color family classifiers and brightness value scales to name colors in a logical and scalable way. Color Parrot, a Twitter bot, is also a useful tool for naming and identifying colors in images.
Common Names For UI Components
Looking at examples from other design systems can be a great starting point when naming UI components. Iain Bean’s Component Gallery is a collection of interface components from real-world design systems, providing examples and alternative names for over 50 UI components. This resource can help you find the right names for your own components.
Variables Taxonomy Map
For a complex multi-brand, multi-themed design system, take inspiration from Vodafone UK’s Variables Taxonomy Map. This map breaks down the anatomy and categorization of design tokens into a well-orchestrated system of collections, enabling everyone to understand where a token is used and what it represents just from its name. Nathan Curtis’ work on naming design tokens is also referenced in this resource.
Design Token Names Inventory
Romina Kavcic has created a handy resource, the Design Token Names Inventory spreadsheet, to help streamline your design token naming workflow. This spreadsheet allows for consistent naming and syncs directly to Figma, making it easy to add, organize, and filter your design tokens. Combined with plugins like Google Spreadsheets or Kernel, this resource is a real timesaver for keeping everyone on the same page.
Want To Dive Deeper?
If you’re interested in exploring more about design tokens, components, and design systems, consider joining one of our online workshops or SmashingConfs. We offer a variety of experiences that can help you enhance your design skills and stay up-to-date with the latest trends in the industry.
We’re excited to welcome you to our Smashing experiences, whether online or in person. Join us and take your design skills to the next level!