Konbanwa Smashing Friends,
Naming is hard. As designers and developers, we often struggle finding the right name — for design tokens, colors, UI components, HTML classes and variables. Sometimes names are too generic, so it’s difficult to understand what they mean. Or too specific, leaving little room for flexibility and re-use.
In this newsletter, we want to get to the bottom of this. This issue is dedicated to naming — how to choose the right names, naming conventions and with common names for UI components.
Meet Front-End & UX Online Workshops, the smashing way.
If you’d like to dive deeper into naming and design tokens, we have an upcoming design token workshop with Nathan Curtis starting on June 6–14, along with a few other online workshops for designers and front-end engineers.
And, of course, we also have our lovely SmashinConfs 2024 coming up later this year, now with more speakers and workshops announced:
Perhaps your friends and colleagues would love to join as well? Please spread the word — and of course, we’ll be absolutely delighted to welcome you to a very special Smashing experience later this year!
— Vitaly
1. Inspiration For Naming
Naming things needn’t be hard. If you’re looking for some inspiration for naming HTML classes, CSS properties, or JavaScript functions, Classnames provides you with ideas that get you thinking outside the box.
The site provides thematically grouped lists of words perfect for naming. You’ll find terms to describe different kinds of behavior, likeness between things, order, grouping, and association, but also themed collections of words that wouldn’t instantly come to one’s mind when it comes to code, among them words from nature, art, theater, music, architecture, fashion, and publishing. (cm)
2. Naming Conventions
What makes a good name? Javier Cuello summarized a set of naming best practices that help you name your layers, groups and components in a consistent and scalable way.
As Javier points out, a good name has a logical structure, is short, meaningful, and known by everyone, and not related to visual properties. He shares do’s and don’ts to illustrate how to achieve that and also takes a closer look at all the fine little details you need to consider when naming sizes, colors, groups, layers, and components. Useful tips that make naming a lot more straightforward. (cm)
3. Naming Design Tokens
So, how to build a flexible design token taxonomy that works across different products? That was the challenge that the team at Intuit faced. Intuit, the company behind popular products such as Mailchimp, Quickbooks, TurboTax, and Mint has developed a flexible token system that goes beyond the brand theme to serve as the foundational system for a wide array of products.
Nate Baldwin wrote a case study in which he shares valuable insights into the making of Intuit’s design token taxonomy. It dives deeper into the pain points of the old taxonomy system, the criteria they defined for the new system, and how it was created. Lots of takeaways for building your own robust and flexible token taxonomy are guaranteed. (cm)
From our sponsor
Streamline Your Survey And Form Management With SurveyJS
This suite of open-source JavaScript libraries provides fully customizable survey solutions and seamlessly integrate with any backend system, using JSON for survey metadata and results. Ensure data security and compliance while reducing time-to-market and resource requirements. Try our free demo or explore step-by-step guides to experience the power of SurveyJS!
4. Naming Colors
When you’re creating a color system, you need names for all its facets and uses. Names that everyone on the team can make sense of. But how to achieve that? How do you bring logic to a subjective topic like color? Jess Satell, Staff Content Designer for Adobe’s Spectrum Design System, shares how they master the challenge.
As Jess explains, the Spectrum color nomenclature uses a combination of color family classifier (e.g., blue or gray) paired with an incremental brightness value scale (50–900) to name colors in a way that is not only logical for everyone involved but also scalable and flexible as the system grows.
Another handy little helper when it comes to naming colors is Color Parrot. The Twitter bot is capable of naming and identifying the colors in any given image. Just mention the bot in a reply, and it will respond with a color palette. (cm)
5. Upcoming Front-End & UX Workshops
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.
As always, here’s a quick overview:
6. Common Names For UI Components
Looking at what other people call similar things is a great place to start when you’re struggling with naming. And what better source could there be than other design systems? Before you end up in the design system rabbit hole, Iain Bean did the research for you and created the Component Gallery.
The Component Gallery is a collection of interface components from real-world design systems. It includes plenty of examples for more than 50 UI components — from accordion to visually hidden — and also lists other names that the UI components go by. A fantastic resource — not only with regards to naming. (cm)
From our sponsor
From Design Director To Chief Design Officer
Take your career to the next level with Future London Academy’s MBA for
Design Leaders. Learn Business Strategy, Finance and Leadership from Amazon, Dropbox, Zaha Hadid Architects, AKQA, Pentagram, Google and others. A 9‑week immersion with modules in London and California. Only 30 spots. Applications closing soon. Apply today.
7. Variables Taxonomy Map
A fantastic example of naming guidelines for a complex multi-brand, multi-themed design system comes from the Vodafone UK Design System team. Their Variables Taxonomy Map breaks down the anatomy and categorization of a design token into a well-orchestrated system of collections.
The map illustrates four collections required to support the system and connections between tokens — from brand and primitives to semantics and pages. It builds on top of Nathan Curtis’ work on naming design tokens and enables everyone to gather insight about where a token is used and what it represents, just from its name.
If you want to explore more approaches to naming design tokens, Vitaly compiled a list of useful Figma kits and resources that are worth checking out. (cm)
8. Design Token Names Inventory
Romina Kavcic created a handy little resource that is bound to give your design token naming workflow a power boost. The Design Token Names Inventory spreadsheet not only makes it easy to ensure consistent naming but also syncs directly to Figma.
The spreadsheet has a simple structure with four levels to give you a bird’s-eye view of all your design tokens. You can easily add rows, themes, and modes without losing track and filter your tokens. And while the spreadsheet itself is already a great solution to keep everyone involved on the same page, it plays out its real strength in combination with the Google Spreadsheets plugin or the Kernel plugin. Once installed, the changes you make in the spreadsheet are reflected in Figma. A real timesaver! (cm)
9. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.
10. Recent Smashing Articles
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
