DesignOps: Atomic Design
This would be the beginning of my journey to writing design articles. Everything from design software, advice, tips and tricks, how-tos, and everything in between.
This article is intended for front-end developers, product designers, and tech enthusiasts. We’d be talking about DesignOps and Atomic Design.
Let’s jump in.
What’s DesignOps?
Simply put, Design Ops is anything that helps the designer or a design team.
Firstly, DesignOps means Design Operations which is similar to DevOps (Development Operations).
As digital products get complicated by the day, there exists a need to cover operational gaps to provide efficient workflows, improve design output and enable the product and company scale.
DesignOps is the orchestration and optimization of people, processes, and craft in order to amplify design’s value and impact at scale.
-NNgroup
Atomic Design
Yes, you saw that right. That’s the basis of Atomic design.
Atomic Design is a methodology for crafting an effective Desing System to build consistent & modular interfaces.
Atomic Design - Brad Frost
Remember divide and conquer? The concept behind Atomic design is to break a complex design (interface/graphics) down to the bare basic till it becomes indivisible. These basics can then be addressed, used, or brought together to create new interfaces that are scalable, consistent, and modular.
Let’s talk about each entity briefly.
1: Design Tokens
These are tangible properties shared throughout an interface or composition which are typically not useful alone. Examples include Font name, Font size, Colors HEX value, Opacity value, Transparency value, Grid gutter size, Base spacing, etc.
2: Atoms
These are the foundational building block of any interface or graphic element. It combines one or more design tokens together with shapes. Examples include Buttons, Input fields, Checkbox, Pagination, Tooltip, Input Chips, etc.
3: Molecules
These are combinations of Atoms that form meaningful and usable components when used alone or when combined with another Molecule or Atom.
The rule to Molecules is “Do one thing. Do it well.”
So, whatever combination of the atoms you make at this level should agree to this rule. Examples are Table header cell/row, Table content cell/row, Drop-down button, Input filed (with content, label, message, etc), Accordion, etc.
4: Organisms
These are more robust entities in the Atomic system that consist of Atoms and/or Molecules. They exist to satisfy a functional design need e.g Navigation, Notification, Form, etc.
5: Templates
These are page-level organism groups. They are robots enough to satisfy page or flow requirements. E.g a page that shows a list program itinerary for an event, an email subscription page or flow, etc.
Templates can come in handy when wireframing concepts.
6: Pages
These are the highest level in the Atomic taxonomy called the High-Fidelity Interface. They are the actual interface that has every other thing nested in them.
In conclusion, the Atomic design is simply another divide and conquer method to achieving a modular, consistent and reusable interface. The concept can be applied to anything — the divide and conquer, that is.
Thanks for reading this far, don’t forget to share and clap this article if you find it useful.
💗
Other useful articles —
Why Build a Design System?
Building Design Systems
Reference:
Atomic design Brad Frost, Brad Frost Web
Design System Tokens Medium
