What is a Design system?
A design system is a collection of reusable components for web and mobile applications, patterns, and guidelines that together help teams design and build products more efficiently and consistently. It serves as a single source of truth that aligns design, development, and product teams around a common set of principles and rules.
Key components of a design system typically include:
- Design Tokens: These are variables that define design properties such as colors, typography, spacing, etc., ensuring consistency across all components.
- Components: These are UI elements (like buttons, cards, inputs) that are designed and coded in a standardized way, ready to be reused across different parts of an application or website.
- Patterns: These are larger combinations of components that define how different elements should be structured together for specific use cases or functionalities.
- Guidelines: These are documentation and best practices that help teams understand how to use the components and patterns effectively.
- Accessibility Guidelines: Recommendations and practices to ensure that the design and components are accessible to all users, including those with disabilities.
What is Atomic Design?
An Atomic Design is a methodology introduced by Brad Frost that breaks down interface design into smaller, reusable components. It’s based on the idea of atomic elements: atoms, molecules, organisms, templates, and pages.
Here’s how you can structure a design system based on Atomic Design principles:
Atoms
In science, an atom is the smallest unit of matter of an element. Similarly in design atoms are the most basic components. These include elements such as buttons, lines, shapes, icons, text fields, text labels, etc.
Molecules
In science a molecule is a combination of two or more atoms, Similarly in design a molecule can be created by combining two or more atomic elements. For instance an input field combines with a label which can be an input field in an interface.
Organisms
Molecules provide us with basic building blocks. Multiple molecules combine to form an organism. In design we can combine multiple molecules components to form a bigger component. For example on a login page a group of text inputs and buttons creates a organism.
Templates
Templates are formed by combining multiple organisms.Templates are very concrete and provide context to all these molecules and organisms. For example, In the login screen the login form on the right and carousel on the right are two organisms coming together to form a template. In this phase we begin as a HTML wireframe and slowly move it towards a high fidelity deliverable.
Pages
Pages is where we create the high fidelity designs, A designer spends most of the time here. Here we test the effectiveness of the design system.Pages also helps in testing variation of templates.
Why Atomic design?
Designing once and reuse
Atoms can be combined in ways to create molecules and organisms and see how it looks on the website
Easy Developer hand off
It is easy for developers to create reusable components and use it in the application.
Prototyping becomes easy
Since we have a list of atoms it is easy to create mockups and also play around with states and variants which makes it easy to prototype.
Easy Updation of elements
It is simple to verify that any adjustments to a component are transferred to all other instances across the site because only one atom, molecule, or organism is being altered at any given time.
Conclusion
As a designer, Atomic design provides a clear methodology for crafting design systems. You can work with an atomic design system to reduce time. Start designing atoms and gradually move to templates and pages.
I’m a UI/UX designer based in Bangalore, India. I’ve enjoyed turning complex problems into simple, beautiful and intuitive designs.
