Atomic Design (Explained) in 8 Slides 💥
Courtesy of @tomkoszyk
Atomic Design Framework by Brad Frost is one of the most popular and essential concepts in UI Design.
It’s also a backbone of a good Design System (another hot word!).
What makes it so powerful? 🔥
How does it work?
Learn more from this post! 😉
What it is
A methodolocy that involves breaking down UI into its basic components. Which are then reused throughout the site.
How it works
Atomic Design in Practice
In Atomic Design approach, we’re building UI from the ground up. Starting with the smallest elements, up to final pages designs. This ensures consistency across the design.
The most basic, yet functional (HTML) elements such as input fields, buttons, text labels. Things that can’t be broken down any further.
Molecules are more complex. Those things are built from several single Atoms. They form simple UI elements groups.
Organisms are more deliberate beings which form more distinct UI sections, like a full input form. They are constructed out of several molecules & atoms.
Templates are page-level structures. Blueprints, which are later filled with the content. It’s crucial to remember that they serve as structures!
A final stage in Atomic Design framework. Those are templates filled with actual content, final UI pieces in our design.
How it works
Tokens were introduced in extended Atomic Design. Tokens are subatomic particles in Atomic Design. The are thought as a way to store design variables.
Bonus — 4 tools that may be useful in your designer way:
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.