I say “potato”, you say “potato” — Nomenclature in design systems

Wait, nomem-what?

Nomenclature is a system of naming within a discipline or specific field. Simply put, it’s the names we give things within a system. The result of good nomenclature is a shared language understood by everyone.

First things first

Design can’t operate in a vacuum. Good design relies on designers collaborating with others outside of their department. Who do they mainly collaborate with? Engineers.

Designers often speak a different language than engineers. For example, let’s imagine a designer wants to change the colour of a button on an interface. The company’s brand colour happens to be teal.

The engineer implements the change, it’s not to the designer’s expectations, and revisions are necessary. That whole ordeal could’ve been avoided with — you guessed it — nomenclature.

Getting to a shared common language company-wide should be one of your first considerations when building a design system since the time it saves compounds as you scale team size and components.

Had they come up with a name that was first assigned some parameters — in this case, a hex value — and then communicated throughout the company, this would’ve been avoided and this process would have taken 5 minutes rather than an hour of back and forth.

Colour is such a simple example, but the analogy can easily be carried to any component that exists in your design system; from foundational elements like headings to molecular components like inline banners.

Imagine a world where an engineer can build a screen after a designer simply draws out a napkin sketch with their component names listed. The time savings make me so giddy!

Getting to a common language

Getting to a shared common language company-wide should be one of your first considerations when building a design system since the time it saves compounds as you scale team size and components. Establishing a common language can be as simple as a few designers and engineers getting into a room and hashing things out.

Here’s a workshop you can do in one hour:

1. List out all your components. If you don’t currently have names for things, screenshots will do. Put them in a Figma file, a slideshow, or even a spreadsheet.
2. Assemble the troops. Find one or two of your design comrades and a few front-end minded engineers.
3. Name the components. Here’s where the fun begins. One-by-one, go through each component and decide a name for it. If you agree, sweet, move on to the next one! Some components will be easier to align on than others. Try to keep each debate under 3 minutes. If you’re not aligned on a name, discuss why you’ve chosen that name. It might help to have a set of naming principles to guide you.
4. Share the language. Once you’ve aligned on some common naming between design and engineering, it’s time to spread the language to the rest of the company! Document your components, change your component names in Figma and in your code, and most importantly, start speaking the language.

As with anything design system-related, getting to a common language is an ongoing process and will take some time. You may need to run this workshop a couple of times if you have a lot of components. Once you’ve established a common language, I guarantee your efforts will pay off in dividends!