The Difference Between Design Systems, Component Libraries and Atomic Design
These days, “Design System” is becoming the latest buzz phrase in product design and development. Everyone is using it: giants like Airbnb, IBM, and Salesforce are leading the way, while startups and new businesses are quickly catching up and implementing it into their product development roadmap as well.
However, as this methodology grows in popularity, so does the confusion around it. What exactly IS a Design System? How does it differ from other methodologies such as Component Libraries or Atomic Design? And why is it so useful?
As I’ve been privileged to witness the development of each of these terms in my career, I will try to offer a brief description of what each of them means and how I’ve come to use them myself.
What is Atomic Design?
Atomic Design is a methodology developed by Brad Frost. The modular structure of this methodology breaks down building blocks of design such as buttons, search bars and navigations into a hierarchy of components based on chemistry principles:
- Atoms are the basic UI elements that cannot be broken down any further, e.g. icons and buttons.
- Molecules are a group of atoms that form a more complex component such as a search bar. The search bar component will include the input field, search button and icon in this example.
- Organisms are then even more complex components that can include both molecules and atoms such as a top navigation bar. The bar may include the navigational atoms such as “home” and “login” along with the molecule component of the search bar and the brand icon.
How I Used Atomic Design
I first came across the term Atomic Design about three years ago while working remotely for a startup on the verge of creating a SaaS application. The goal of the app was to ease the process of booking a venue for an event, including food, beverages, music and other services. At the time, a typical booking process would include numerous calls and emails between the venue and the customer prior to finalising all the details and payment.
The application’s CEO, who had a technical background, wanted to build the product as efficiently as possible. It had to be flexible enough to allow brand customisation, like adding or removing features from the booking process, yet constrained enough so we would not have to redesign the product for every venue.
We were looking for various solutions and it quickly became clear that a modular design methodology was the best option. Our research lead us to Atomic Design and we based the entire project on this approach.
To start, I created the basic components (atoms) and nested them in more complex molecules such as a beverage multi-select input form. The components were designed with the startup’s own brand colour scheme yet could easily be adjusted to a venue’s branding. We structured the booking form in a modular fashion, allowing a venue to customise the services they offered for their events.
What is a Component Library?
A component library is a single file or folder that consists of all the styles and components used in a website, software or app, including buttons, input fields, a UI kit and more. It is responsive (for web), flexible and scalable.
As you can imagine, such a library can become overwhelmingly large and complex and one could easily get lost in all its content. Also, as both designers and developers work with the same library but on different platforms (usually Sketch-app for designers and React for developers), there is a need to ensure that all parties involved follow the same process and structure when creating or using Component. Atomic Design offers a simple way to scale such a library, which is why many Component Libraries are based on it.
How I Used a Component Library
The team at Lat Long and I were designing a new E-commerce experience for Airstream , which was to be a glossy magazine-style travel guide that offered accessories and products from Airstream’s collection. Airstream’s team would be adding new products and articles to the platform on a regular basis, so we agreed on a Component Library methodology as the best solution for their needs.
As the UX designer on the project, I created my wireframes based on the Atomic Design methodology. All layouts were component-based and broken down into atoms, molecules and organisms. I added some interaction elements and layout variations to the different page types (e.g. product page, home page, etc).
Our talented UI designer Alex Sanders created a beautiful style guide based on the wireframe components, adding more interaction elements and bringing the platform to life. The developers at LatLong coded the component library and the website itself. Our result was a scalable, flexible WordPress-based E-commerce site where the client, Airstream, is able to add, edit and remove content effortlessly.
What is Design System
A Design System is a single source of truth file, consisting of all elements used in a product along with rules and guidelines on how to create new components or implement them in either design or code. It includes, as you may have expected, the component library but also a pattern library, design guidelines, brand values, tone of voice and more.
This is not a finished product, but a dynamic, ever-evolving one. Designers and developers add to and edit it constantly, from attaching new components to updating rules of use or changing the entire colour scheme. It takes as much effort to maintain a Design System as it does to create one.
How I use Design Systems
While working for Arcadia Group, I was the sole UX designer responsible for bringing the group’s seven brands and their E-commerce under one platform. Each brand had its own style, layouts, tone of voice and other unique features. The challenge was to create a system that was flexible enough to include each of the brand’s identities while minimising custom-built features and code for specific brands. The end goal was a single platform that would give Arcadia a better overview of each brand’s traffic, conversion and usability tests.
As with previous projects, I created a component library based on Atomic Design methodologies. Some components had variations in layout and content while following the overall system rules of ratio, grid and size. For example, all brands had a product page that included a product image. Topshop has a single product image with arrows allowing users to navigate to the next image. Miss Selfridges has a main product image, plus a side carousel of thumbnails for the other images.
Each brand then provided their style guide and UI kit which were introduced into the design system. For testing and visual representation, I implemented the style guides of the brands into the components to verify the system worked. The result was a functional system where developers could easily update a specific brand’s UI and add a feature to one brand while removing it from another.
Design Systems Today
Today, a Design System is becoming a basic requirement for most projects I’ve been working on. My clients understand its benefits and ease of use and require it as one of the project deliverables. As a UX designer, I find it far more efficient to design with this methodology as well. I create components early on in my designs, which allows me to iterate them faster, based on team feedback and user testings. When it comes to building it, developers find it easier as well and the overall process is much faster and smoother than before.
As Design Systems continue being implemented into product development roadmaps for companies across the board, it will become even more important to understand how these methodologies work and how we can best utilise them.
