UX/UI design can get incredibly messy with even small projects. To help keep things organized, I utilize a design system called Atomic Design which was invented by Brad Frost.
As with many other designers, I’ve made my own modifications to Atomic Design. In the content below, I’ll talk about how I work with this design system.
In traditional Atomic Design the element types are Atoms, Molecules, Organisms, Templates, and Pages.
Having a standard naming convention is incredibly important to keep things organized in your Sketch, Figma, etc file. I subscribe to the idea that this naming system should be simple, yet flexible to meet any situation.
My naming system typically follows this structure:
(type: atom, molecule, etc) / (class: button, input, etc) / (subclass A: state, color, size, etc) / (subclass B: state, color, size, etc)
As a general rule, I don’t like to drill down more than 4 times in an element’s “name” (type / class / subclass A / subclass B). This helps reduce the amount of time to find a certain symbol when you are looking for it. To help keep elements within this framework, I use dashes for very similar classes instead of breaking them into subclasses.
If you have any questions or are looking for a designer, feel free to reach out: https://www.danstrangfeld.com/contact