Design Systems: Designing at Scale
Once a product grows beyond a handful of screens, manually updating UI elements becomes a nightmare. UX teams don't just design screens; they build scalable Design Systems that could be use across multiple applications in the organization.
What is a Design System?
A design system is a comprehensive, centralized collection of reusable components, guided by clear standards. It serves as the single source of truth for both designers (in Figma) and developers (in React, Vue, etc.). As I mentioned before, this allow you to create components that can be used across of the entire organization's applications. Therefore, there is a faster development because designers are not reiventing the wheel, developers are not creating those components from scratch, and final users don't have to relearn different functionality across applications.
Atomic Design Methodology
Created by Brad Frost, this is the industry-standard mental model for structuring design systems, inspired by chemistry:
- Atoms: The foundational building blocks that cannot be broken down further (e.g., color hex codes, typography scale, a single button, an input field).
- Molecules: Groups of atoms bonded together to form a functional unit (e.g., a search form consisting of a label, an input field, and a submit button).
- Organisms: Relatively complex, distinct sections of an interface made from groups of molecules (e.g., a website header or a product grid).
- Templates: Page-level objects that place components into a layout and articulate the design's underlying content structure.
- Pages: Specific instances of templates filled with real representative content.
Design Tokens
Tokens are the absolute core of a modern design system. Instead of hardcoding #0056b3 into your CSS, you map that hex code to a semantic token like color-brand-primary. This allows a team to instantly rebrand an entire app across iOS, Android, and Web by simply updating the token JSON file.