Having a design system is a big step, but knowing how to organize it well is what makes the difference.
What's the key? There is no one right way, nothing is set in stone. Each team has different needs, workflows, and unique ways of collaborating. And that's okay. The important thing is to choose a structure that helps, not complicates. This makes a design system also a product, and like any other product, it has users (designers, developers, even business people) who need a good experience. They need to understand how to use it, find what they’re looking for, and feel comfortable doing so.
Let me talk to you about three approaches that can help you organize it:
- By Type: Classification based on its purpose within the design system.
- By Level of Abstraction: Components are organized into hierarchical levels based on their complexity and reusability.
- By Function in the Interface: Based on their functional purpose in the interface.
By Purpose
Organizing by purpose is key to ensuring your system grows without losing control or quality.
- Base: These are the fundamental building blocks of the system. Reusable, atomic components that don’t depend on context (you can use them anywhere). They ensure consistency and adaptability.
- Layout: The components responsible for structure. They help you distribute elements, create visual hierarchies, and adapt everything to different screen sizes.
- Data Display: This includes components that present information and make it readable and understandable. They don't just display data; they make it clear.
- Feedback: Essential for interaction. They inform the user that something is happening, what has changed, or if something requires their attention.
- Navigation: Everything that allows navigation and orientation in the interface. It helps the user know where they are, where they can go, and how to get there.
By Level of Abstraction
Components are grouped based on their complexity and reusability.
This structure not only brings clarity (each level has its place), but also supports consistency and scalability. Stories become predictable, and adding new pieces to the system becomes much easier.
- Primitives/Atomics: These are the basic building blocks of the system. They live on their own, don’t depend on others, and represent a single function. They have minimal or no logic.
- Basics / Molecules: Here we start combining components. These group several atomic components to solve something specific. They start to have configurable properties and more context.
- Modules / Complex: Large blocks that combine multiple components. They often include logic or states and solve more complete tasks.
- Layout: The components responsible for structure. They help you distribute elements, create visual hierarchies, and adapt everything to different screen sizes.
By Function in the Interface
Another effective (and very practical) way to organize your design system is to classify components based on their functional purpose within the interface. In other words, think about what each element does when it is in use, beyond its shape or level of abstraction.
This approach helps teams quickly find what they need and understand the purpose of each component without having to guess by name.
This organization and the one based on purpose are very similar.
- Inputs: Allow users to input data. They are the foundation of any editable interaction.
- Interaction: Includes all elements that allow performing actions within the interface. From buttons to more complex elements like clickable avatars or tooltips.
- Data Display: This includes components that present information and make it readable and understandable. They don’t just display data; they make it clear.
- Navigation: Everything that allows movement through the interface and orientation. It helps the user know where they are, where they can go, and how to get there.
- Feedback: Essential for interaction. They inform the user that something is happening, what has changed, or if something requires their attention.
- Layout: The components responsible for structure. They help you distribute elements, create visual hierarchies, and adapt everything to different screen sizes.
And you, how would you structure your design system?
