Activity: Create your naming convention guide or language glossary

In this step, you'll work together as a cross-functional team to align on your design system's naming conventions. Alignment on a shared language, is an important milestone in the design system journey and is often a formative exercise for teams.

Activity:

Start working on your shared language & Naming Conventions. Consistent naming conventions serve two main purposes:

1. They increase the ease in which designers can find the right style/component in a Sketch library
2. They create alignment between design and development

When considering naming conventions for components in a design system, it's important to prioritize consistency, clarity, and meaning. The goal is to make it easy to get a feel for what role it plays in the system, just by looking at the name

Stakeholders:

• Designer
• Developer

What you should know

• You don't need to get it all done in one session, you just need to align on the best methodology for your team so you can work on applying to your MVP components
• Whan naming:
  • Use all lowercase letters
  • separate words with hyphens, or forward slashes
  • Follow an "order of operations" type structure
  • Avoid using numbers or symbols, words that describe visual characteristics, or the specific font-family

Pro tip:

While naming, try to focus on the element’s role in the system, but not its form. Don’t name your primary action button "button/blue/default," just because it’s blue. It’s a primary button in your system, so name it something like, "button/primary/default." This sets you up for success down the road as your system continues to evolve. For example, if the color of a primary button changes, you won’t need to rename every instance of that button in your system and files. Additionally, this allows you to get a feel of what role it plays in a system just by looking at the element’s name.