Design Systems, Design Tokens & Atomic Design — The Art of Scaling Design

What is a design system?

Every business or company has its way of communicating with clients and users, and design makes a big part of it. A design system, which is a complete set of design standards, documentation and principles along with the toolkit (reusable components and patterns) can help design teams manage designs at scale and streamline design work.

For a design system to work, it’s not enough to standardize components and patterns and create libraries. The most important part of a design system is its documentation and a guide on using each component. Well-designed systems can help create a stronger relationship between the user and the brand, and maintain consistency across multiple digital products.

Let’s put it this way — every design system should consist of a scalable UI language and streamlined UX guidelines on using that language. Consistency is the most important aspect of any brand or a business, especially if it keeps growing and evolving on multiple fronts and platforms. As design systems are created, managed, and implemented by people, there is always room for errors and misunderstandings when using them if the component descriptions are not well explained. 

Understanding not only the what, but the why, behind the design of a system is critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding.

— Marco Suarez, InVision Product Designer

The main parts of a design system

• Component library
• Pattern library
• Style guide
• Principles and guidelines
• Code snippets
• Branding

The design system consists of different parts, but the basic ones are a pattern library, a style guide and a code snippet. Many people mix a style guide and a design system, but the main difference is the scalability and the dynamic of a design system that can help a digital product grow, evolve and expand over time, without being outdated and inconsistent. 

Based on the size — component and pattern libraries make up the biggest part of a design system, but guidelines and principles help implement those elements properly. Code snippets are there to manage the components in the pattern library, and style guides and branding often include logo usage, icons, spacing, grids, typography, colors, visual language, and marketing materials such as the brand voice, tone of communication and other publishing guidelines. 

Main benefits of a design system:

• greater efficiency of a whole project/product team
• design and development workflow is improved 
• more efficient production process
• time and resources are saved and maintenance is reduced
• designers can focus on more important problems
• maintained consistency across multiple products 

Quality, speed and efficiency — these are the main benefits of a design system. Well implemented systems with extended documentation can help designers tackle very complex problems and optimize their time, resources and effort when working in teams.

Having a design system with reusable components and code, allows both designers and developers to concentrate on other features and more important problems. A lot of time gets wasted on repetitive tasks and solving simple, common problems that can be tackled and fixed quickly with investing in a design system.

Every design system is special and different from others — each one is created for a different business or a brand and has its purpose. It is important to prioritize components of a design system based on that particular business’s needs and to extract its maximum value and get the most benefit from it. When creating a system, every designer should take into consideration the scale of the project, as well as its applicability.

Design system principle #1: Systems solve easy problems so products can solve hard problems more easily.

— Nathan Curtis, Eightshapes Founder

Who should be included in the creation of a design system?

Design systems only work as well as the teams using them, they are both a product and a service. Designers and developers are the main roles in this process as their communication and understanding are keys to a successful design system, but other roles such as content strategists, researchers, product/project managers and clients can be included and contribute to its creation as they can bring a whole another perspective to the whole team. 

Clients can contribute to the process with their vision and in-depth knowledge of their business or a product, and researchers and content strategists can help identify and define the right direction, and prioritize tasks and components based on real-users feedback and behavior. 

To ensure that each member of a design system team cooperates and brings value to the process, product and project managers are there to keep the whole team together and keep track of time and money. They are the main bond between a client’s requirements and designers that define the users’ needs. 

Design system creation & implementation

There are 3 main approaches to design system creation, and they are:

• adopting an existing design system
• adapting an existing design system
• creating a brand new design system

The best way to design a system is to start with a product and then output a design system — when you already have an existing design system, the lowest-cost approach is using it by adapting or adopting it, but there are some cases where the best option is to create a new design system from scratch.

When a business or a brand has its own particular needs, and customization is a must because of brand differentiation, their approach is often building a completely new system. This may be a high-cost investment, but every approach is selected based on the budget and needs of a business.

Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.

— Chris Messina, Tech evangelist and former Developer Experience Lead at Uber

Design system examples

Brands and companies that have implemented a design system in their workflow can increase speed, efficiency and inspiration among everyone in the project team. Here are some design system examples that many designers and developers often look up to!

1. Apple – Human Interface Guidelines

Human Interface Guidelines is a collection of in-depth information and UI resources for designing apps that integrate seamlessly with Apple platforms. This design system follows Steve Job’s 5 design principles — simplicity, friendliness, minimalism, precision and focus. It also offers numerous practical resources, guidelines and style guides for both designers and developers for iOS, macOS, vOS and watchOS.

2. Google – Material Design System

We all know about Google, and I believe that you’ve also already heard about Material Design System. Google created Material.io and publicly shared all of its components that everyone can easily use and get valuable information about each component and its use. Some of the features of the Material Design system are color, typography, layout, components, starter kits, components, design source files and many others.

3. Shopify – Polaris Design System

Polaris provides an easy-to-follow and practical style guide for building a great experience for all of Shopify’s merchants. This design system offers UI components, visual elements, content, design language and many other free resources for creating a better product experience, such as React components, Figma UI Kit and GraphQL API.

4. Netflix – Hawkins Design System

Hawkins is the name of a fictional town from the Netflix TV show called Stranger Things, but Netflix Studio ecosystem uses this name for their design system. At the Schema conference, Jen Yee and Luca Orio from Netflix shared why and how they built Hawkins and demonstrated how it works on a platform with 80+ applications and 20+ languages — find out more about Hawkins in this blog!

5. Atlassian Design System

Atlassian Design System is an end-to-end design language that they use to create simple, intuitive and beautiful experiences. On their website, you can explore components, patterns, their brand, foundations and content guidelines, but also a collection of tools, kits, plugins and guides to help you simplify the creation process. 

Design systems have evolved into robust ecosystems of interconnected tooling, documentation, conceptual models, and more, and that’s why Jennie Yip, the Lead Designer at Atlassian, decided to share her knowledge at the Schema conference in the Reimagining Atlassian design system talk. If you want to find out more about the conference and some talks I liked the most, keep reading!

Schema – Figma’s conference about design systems

“Like any product, a design system is only as useful as it is usable.” — for me, this was one of the most memorable quotes from the Schema online conference. The quote mentioned above was from the User-centered design system resources talk held by the Lyft Design Systems team — Jeremy Dizon, Runi Goswami, Michael Yom and Joanne Deng. They shared the end-to-end resources that enable their system users to build consistent, quality products and features at scale.

Schema brought numerous product designers, UX and software engineers and design system experts that shared their knowledge, real-life examples and advice about design systems and their creation. Over 15 speakers talked about design tokens, user-centered design system resources, creation of a design system and building custom Figma plugins.

Jina Anne, Ivy Wang and Ainsley Wagoner from Asana held a talk about how the Asana Design Systems team uses design tokens to get designers and engineers working at the same level of abstraction. They shared how Figma’s design system tooling, along with design tokens, enabled them to make the redundant parts of designing more streamlined so that they can focus on solving design problems.

If you want to find out more about this talk, the conference and its speakers, check out the official Schema website.

What’s the deal with Design Tokens?

Design tokens mentioned above, are visual values that construct and maintain a design system, and they include spacing, color, typography, shadows, object styles, animation and others. They maintain a consistent and scalable visual system for development, and also function as a replacement for hard-coded values, such as hex and Pantone values of a specific color. 

Global tokens or the most tokenized values are:

• color, shadows, opacity
• typographic scale – font-family, font-size, font-weight, line-height, letter-spacing
• border, border-weight, border-style, corner-radius, animation curves
• spacing, transition, media-query (breakpoint), z-index

Setting up tokens helps designers and developers collaborate in an easier and faster way and, besides keeping the design implementation consistent in development, they also help in the automation process. As design tokens are often considered design atoms of a design system, I also decided to write a bit about atomic design.

Designing systems with atomic design 

Atomic design is a series of visual building blocks that are organized by complexity into different buckets – atoms, molecules, organisms, templates and pages.

Atoms are the most basic building blocks and they include colors, heading typography, body text, buttons, form labels and form inputs. This component saves a lot of time and work when it comes to changes in the UI – there’s no need to go through each and every component itself and change it, you can just update the UI in that component and all components will be automatically changed and updated.

Molecules are groups of atoms that work together to form a functional unit that performs a specific action or represents a purpose, such as a contact form, team member listing, individual course card. With molecules, you can combine different atoms in multiple ways.

Organisms are a group of molecules that are organized by importance, type, or purpose. These include features such as course listings, website footer and related blog posts section. 

Pages and templates give structure to multiple organisms. Templates are a collection of reusable design patterns, and common templates are homepage templates, blog post templates, product pages, login/registration page and the contact page.  

The creation of an atomic design system is not meant to be linear, it is easier to start with the creation of a page or two with iterations and various designs, and once a page is created, you start to look for patterns and identify them. After that, you start extracting individual elements, standardizing them, and creating a library with all the reusable components. The best way to do this is to build each component using smaller components — this way, you can recreate the entire organism.

People often associate atomic design with UI, but it’s more a way of thinking and organizing, and can be used in numerous different projects and situations — it’s a mental model that can help designers and developers to think of the user interface as a whole system that is divided into smaller components that can be organized and grouped together to create bigger ones.

To find out more about atomic design, check out this blog by Brad Frost, the creator of this methodology and the writer of the Atomic Design book.

It’s never too late to start with a design system

As businesses and companies evolve and expand, it is easier to design and develop new pages, websites and products when you have a design system that groups all the necessary elements. It’s important to know that once you set a design system into your brand or company, it is not a done task — your design system will constantly evolve with the product, the tools and the new technologies that you’ll be using. A design system is a living thing that will grow with your business and help you and your teams to work in a faster and more efficient way, and in the upcoming years, bring numerous benefits to your company.