Atomic Design 101: Creating Structured Design Systems

Atomic Design is a design system created by Brad Frost and inspired by chemistry. It is a modular system founded on the principle that a whole system can be subdivided into smaller parts (modules) that can be independently created, replaced, modified, or exchanged with other smaller parts or across different systems. It is a methodology that has helped develop modern, structured design systems capable of evolving and incorporating the input of various designers. Atomic Design is an interesting topic if you are looking to improve the way you design, which is why we’ve created this brief overview to help you understand how it all works. 

Atomic Design: Atoms, Molecules, and Organisms

As mentioned earlier, this modular system is inspired by chemistry. When you studied chemistry at school, you probably learned (but you may have forgotten by now!) that atomic elements combine to make molecules. In turn, molecules combine with other molecules and atoms to create organisms. Organisms combine with atoms, molecules, and other organisms to create even more complex structures.

Here’s a quick chemistry refresher:

  • Atoms are the basic building blocks of everything. All matter consists of atoms, the smallest functional unit of ordinary matter. Each element has unique properties and cannot be reduced further without losing its chemical meaning. As a result, they often must be combined with other factors to create sense.
  • Molecules are formed when two or more atoms are held together by chemical bonds. Molecules have their purpose and are slightly more complex than an atom. A design system generally has more than one function or purpose. 
  • Organisms combine molecules and atoms (and sometimes other microorganisms). Organisms tend to be much more complex, larger in size, and in a design system, are multi-functional elements. 

This is a very simplified version of the chemical composition of the universe, but it should help you understand the basic principles behind Atomic Design. Everything can be broken down into atoms, and subsequently, anything can be built by combining any variety of particles. It is more of a mental model than a consistent linear process and is a way to think creatively and methodically design. 

How do you create a design system using atomic design?

The Atomic Design framework can inform the way you think about design and the practical steps you take to implement designs. Using the chemical hierarchy we’ve just highlighted, Atom Design functions via five stages, in the following order:

  • Atoms - Labels, buttons, inputs, etc.
  • Molecules - Tangible UI elements such as search forms, survey forms, list forms, etc.
  • Organisms - When atoms and molecules combine to create complex structures such as headers or form entry modals
  • Templates - Page-level objects that solidify the content structure, such as a dashboard, landing page, or login screen
  • Pages - Templates with specific content that represent the final product

As mentioned, Atomic Design is a mental model. Therefore, it is essential to see all UI elements as parts of a whole. However, only atoms can stand on their own. Therefore, all molecules, organisms, templates must be smaller components. The best way to start using the atomic design system is by thinking about all of the basic needs for your website and understanding which essential components you’ll need to create your more significant design elements, such as: 

  • Labels
  • Iconography
  • Buttons
  • Interactive Elements (Checkboxes, switches, radio buttons, etc.)
  • Typography
  • Form Fields

Am I limited to creating my designs using only the atomic design system?

Remember, Atomic Design is a modular system. This means that not every single UI element you create needs to be part of the design system; only the UI element components need to originate from the design system. If a new atom needs to be created for a molecule or organism, you should work with the owner of your design library to be added to the design system officially. There is room for expression within the atomic design system, as it is a system of thinking that encourages and rewards experimentation. Furthermore, once you have a library of UI elements, there are so many variations to experiment with that it is unlikely you will feel limited in any way.

When should I consider creating/adding a new element to the design system?

It would help if you considered creating or adding a new element when you have used the same few elements multiple times on multiple projects. One of the ways you can make sustainable progress to your design system, and prevent it from growing stale, is by adding elements that force you to innovate and come up with exciting ideas.

Equally, you can create new UI elements with pre-existing atomic elements and store these new UI elements locally in your design file. You don’t have to start from scratch every time. The atomic design system also ensures that you have solid foundational elements in your designs to create reliable and robust designs.

To learn more about creating structured design systems, feel free to contact our team of UI and UX experts. 

by Gabriel Manfredy

Design Systems: An Overview

A Design System organizes various disparate components to enable a team to design, realize, and develop a product. The elements of this design system can be used and reused to build a wide range of products and help facilitate designers' skills and expertise. However, when choosing a design system, there are many elements to consider. And while many believe design systems are critical, some within the industry are divided on their use. 

Below we've highlighted the pros and cons of using design systems and attempted to overview how design systems work in the real world. 

What is a Design System? 

Essentially, a design system is a collection of elements that can build a product or service, or piece of software. A design system can evolve and adapt to meet new requirements while providing designers with useful UI and UX pieces to serve as building blocks for the finished product. Equally, a design system can guide designers' design process from creation to implementation to delivery. 

Benefits of Using a Design System

  • Brand Recognition: A design system that includes a collection of parts that reflect the company's values helps to maintain brand recognition. In addition, designers and developers can use these assets and components to create instantly recognizable designs and connect to the company. Design systems may also provide designers with a standardized set of colors, shapes, and typography that can serve as the essential building blocks of their creations. 
  • Saves Time: A comprehensive Design system allows teams to free up design resources and save time. In addition, design teams can use the components to structure and alter their products, software, pages, and apps. As a result, design teams don't need to spend so much time creating assets from scratch, and with this extra free time, they can work on more complex and vital design issues. Ultimately, this will result in a better user experience. 
  • Enables Design to Scale: As well as saving time, design systems improve the scalability of design teams and their designs. Team members will have to spend less time styling everything from the ground up and will be able to focus on maximizing the potential of existing components. Some design systems will also provide a roadmap. This level of guidance will help designers and developers anticipate their needs as they scale, hopefully making the whole process easier. 
  • Developers and Designers Have a Common Language: Design systems give developers and designers a common visual language to use. As a result, design hand-offs are a lot easier because they will appreciate the bigger picture and understand how one component fits into the creation of the whole design. In addition, communication is an integral part of any design process, and design systems are usually a reliable way to improve collaboration within teams and across departments. 
  • More accessible to Onboard New Developers or Designers: Design systems ensure that you gather the essential and relevant information in one place. For example, if you need to onboard new designers or developers, a design system can smoothly help the process. System onboarding can be quick and more effective with all the relevant information included in the design. 

Drawbacks of Using a Design System

There are quite a few pros to having a design system, but it is also essential to consider the downsides. 

  • Resource Intensive: One of the most glaring drawbacks to creating a design system that serves its purpose is a resource-intensive process. You can invest quite a lot of design and development resources into a design system before receiving any tangible progress.  This investment is usually worth it in the long run, but if you have a small team or low resources or need to create something quickly, a design system can be a hindrance rather than a helpful tool. 
  • Educating Developers and Designers: It may be challenging to get all your designers and developers to use a design system. Many of them will have been completing projects without a design system. Therefore, it can take some time to educate everyone. For some companies and teams, this may involve a cultural shift and a level of patience. 

Understanding Design Systems  

The purpose of a design system is to facilitate the team's work. Therefore, design systems are often created in collaboration with an entire product team. Ideally, this means that developers, designers, product managers, programmers, and engineers will all say how a design system looks and feels. This is important as it is a system that hopefully aids everyone's progress regardless of their place within the team. Most design systems are based on a standard setup. So first, there will be top-level navigation showing the main system categories, including Design, Code, Components, Branding, etc. Then within these main categories, there will be sub-navigation levels that include Typography, Color, Components, Forms, Guidelines, etc. 

Ultimately, when design systems are used properly, they should serve as a single source of truth for the design team and ensure that everyone who works on the product or project is always on the same page. In addition, they help to emphasize design principles, different brand identity, and language and provide all team members with the components and tools they need to succeed. 

Want to learn more about design systems? Feel free to contact our design experts here at Radiant. 

by Alka Singh