Thanks to the many well-built design tools, designing interfaces has never been easier. But do you remember the days of hundreds of photoshop layered files? Yikes!
Workload-wise, new generation design tools like Sketch, Figma and Framer X are making our lives easier. We are capable of creating full prototypes in a matter of days. Looking back, we've made a lot of progress in that area.
However, looking at today’s expectations, designers are asked to design incredibly fast with different requirements and more limitations than ever before. While the necessity for speed is understandable, our design prototypes still require a system and structure to ensure the work doesn’t get sloppy. Without this structure in place, the process became overwhelming for designers and stakeholders alike. Designs being used for development lacked consistency and standardization, creating confusion for the entire team.
Design systems were born because design inconsistencies went beyond the design team. According to the enterprise UXPin design report, design debt due to lack of consistency is the greatest challenges of enterprises.
Ever since I heard about atomic design back in 2014, I was intrigued about the idea of building a web application (like building a tower with lego bricks). I learned to treat the smallest elements as dependent units and design them for infinite combinations. As explained by Brad Frost in his book Atomic Design, all matter (web pages or templates) in the universe (interface) can be broken into a finite set of atomic elements that coexist (buttons, link styles, headlines, pages, etc).
The Atomic Taxonomy of the Design System
Atom: The smallest basic element in the system (i.e. a color, body texts, form labels)
Molecules: Groups of atoms that perform an action (i.e. a form, a card)
Organisms: Groups of molecules that form a piece of the page (i.e. a footer, a blog grid)
Templates and Pages: These two are very similar, and their distinction varies based only on your site architecture (i.e. blog layout, product pages, homepage template)
At that time, implementing the atomic structure into my workflow served me well as I moved away from full site comps to patterns and modular designs and from Photoshop to Sketch. Treating everything as a consistent system with reusable components was, and still is, beneficial, especially if a team of designers are working on the same product.
What I love about atomic design the most is that it allows for quick wins. Focusing on colors, headlines, and tiny components that are consumed by bigger components helps us maintain clarity—Clarity for the designers, the user, and the rest of the team.
So, to sum things up, focusing on tiny components to build systems, not pages, right?
… And What are Design Systems?
Design systems are sets of elements, styles, components, and principles for use within a given digital ecosystem. Their goal is to provide alignment, consistency and efficiency but also to leverage design and development time.
The Atomic Design Mindset in your Decision Making
The tools to craft your own design system
All the design systems I have worked on in the past have used Sketch as the main living design document. However, I would not like to limit Design Systems projects to Sketch only. I have been working with Figma lately, and I would absolutely recommend it if it fits your company’s/project’s goals. That being said, my best recommendation would be Sketch + DSM.
Why Sketch? It allows you to create atoms, then molecules and organisms with functionality like symbols, overrides, layer and text styles.
Why DSM? It allows you to share a single source of truth outside the design team. For the system to be successful, it needs to be adopted by everyone in any role working of your product. Your job as a creator of the design system is to empower and hold everyone accountable through a shared vocabulary. In that way, everyone can contribute to it. No more wasting time reinventing the wheel.
Determine the product stage
If you are creating a design system for a non-existent product that lacks brand guidelines and style tiles, I recommend starting with the latter of the two to serve as a representation of its atomic elements. This way, the designer can make sure stakeholders and the team are aligned in regards to the best way to communicate the core of the visual brand in a digital ecosystem.
Perform a UI Content Audit
As part of preparation (or exploration time), I recommend performing a UI content audit of all interfaces that exist. This will allow you to see the similar styles scattered across the sites, giving the design team context about how to simplify these unnecessary repeated patterns. Make sure you document the atoms found during the audit, so those are accounted during the design system creation. Then, organize them by categories.
Even if you are creating a design system based on a recently redesigned project, I would not skip performing a UI content audit to make sure there are no inconsistencies. And if there are, this is a good opportunity to fix these issues within the new design system.
Know the end-users of the design system
Product designers, developers and product owners are some of the primary roles involved when shipping a digital product, so they will be a few of the end-users for your design system. To make sure collaboration happen seamlessly through the design system, take the time to understand each other’s workflow, expectations, and pain points while working towards a common goal: to launch products at a fast pace.
We have frustrations as a team, but we also have frustrations and things we care about in our individual roles. Product owners need to ship features fast, marketers need leads, developers need to have final designs to get started, and designers want to see that the final build represents the design they created. Think about how a new system can help solve these problems and how an atomic system can lessen these frustrations
Final thoughts
Design systems, their implementation, and success:
The best design systems are the ones that scale with the product & team and are able to power software in an efficient manner. Hence, the need for it to be adopted by an entire organization is imperative. Making the process easy to follow and update is the best way to keep everyone aligned, engaged and willing to keep it alive. Design systems require a lot of adjustments and up-front work, and the atomic design approach forces the designer to be in that mindset from the beginning.
