article

Design Systems: Everything You Need to Know

10 min read
Dmytro Trotsko
Dmytro Trotsko
15 Jun 2021

In an ever-evolving world, adaptiveness to change is key for your product not only to survive but flourish. That’s why product owners should maximize the agility and adaptiveness of their product development processes. 

One of the most potent ways to save time and money is to standardize and reuse the elements you’ve already built. This is what this article is about: saving time, money and effort, while also maximizing the efficiency of your design and development teams. In other words, this article is about design systems.

What is a design system?

In layman’s terms, a design system is a collection of all of the reusable design elements, such as buttons, input fields, headers, their states, and the rules of their usage. 

Design systems are usually comprised of three elements:

  • A pattern library (a collection of buttons, input fields, tables, etc.)
  • A style guide  (typography, colors, brand identity, icons, etc.)
  • Rules of usage (design principles, language (tone of voice), documentation, design nomenclature, etc.)

It’s also crucial to point out, that developers are able to attach code snippets to each of these elements to ensure code consistency and reusability. 

Why you need design systems?

Here’s what a design system provides:

  • Consistency (All identical interface elements are designed identically regardless of the designer)
  • Efficiency (No need to design or code the same element twice)
  • Flexibility (It’s easy for new teammates to get up to speed)
  • Standardization (A design system is a single point of reference for most if not all UX&UI decisions)


We should also note, that the bigger the team, the more useful a design system is.

Conversely, having no design system results in:

  • Chaos in design elements with dimensions, paddings, font sizes, etc.
  • Inability to quickly apply global changes results in extra costs and extra time
  • Having to design and code the same element multiple times

The Principle Behind Design Systems

Being a chemistry-inspired approach to grouping elements, the term Atomic Design was coined by Brad Frost in 2016. The principle is fairly simple: you should decompose your design into its basic components. This includes both the smallest imaginable parts (atoms) all the way to larger conglomerates of elements such as templates or pages. This exact line of thinking serves as a basis for any design system. The practical application of the principles developed by Brad Frost manifested itself through design systems. 

That’s not to say that there were no design systems before 2016. Designers have always been reusing elements and trying to keep things consistent. However, what we owe to Atomic Design is a rigorous and conceptualized approach to keep our designs in order.

When to create a design system?

Design systems are usually created whenever there’s a need to reuse elements. Therefore, the moment you start designing high-fidelity design, you should save repetitive elements. 

Usually, designers group multiple elements into a larger object (e.g. the button shape + text), and then turn the object into a symbol (in Sketch) or component (in Figma). The beauty of symbols and components is that changing the master component will change all instances of this element. This makes global changes as easy as changing a single design element.

How to create a design system?

The algorithm of creating a design system is as follows:

    This algorithm does look pretty simple on paper. The difficult part is being consistent with your efforts, updating the system, and actually using them. The worst fate any piece of documentation can meet is gathering dust and being forgotten. 

    Aside from the reusable elements, creating a design system also entails thinking through such things as text hierarchy (headers, paragraphs, hyperlinks, etc.). Additionally, one should document the product’s pallet. The pallet usually features the primary branding colors, secondary colors, and semantic colors (success, error, warnings, etc.).

    By the way, we couldn’t not mention a recent Figma update that made maintaining design systems easier. The app introduced variants, that allow creating multiple states and variations of a single button. Neat!

    Pre-built vs Custom Design Systems

    So far, we’ve been discussing the benefits of design systems in general. Let’s take a moment to go over the benefits of a custom and pre-built design system. 

    A custom design system is built from scratch, which means that you’ll have to spend time and resources creating it. That said, despite the difficulties, a custom design system will lead you a long way in differentiating your product through both the UX and UI. Additionally, you’ll have full of control of what elements need to be built.  

    It’s worth noting that sometimes there’s no need to create a design system from scratch. For projects that need to adhere to specific design principles, designers use pre-built open-source design systems.

    There are quite a few benefits of using a pre-built design. Here are a few of them:

    • No need to invest resources into building a custom design system
    • Tapping into a popular visual language that users are likely familiar with

    The key drawback to using any pre-built design system is that you sacrifice a lot of what makes your design unique. Using a pre-built design system will make your product look Googl’ish, Apple’ish, or Microsoft’ish. Another shortcoming of such design systems is that if chosen unwisely they become a pain. For example, you probably shouldn’t use Shopify Polaris for a mobile game.

    Here are a few of the most popular open-source design systems out there:

    • Google Material Design. GMD is one of the most comprehensive design systems out there. Aside from the most common design patterns, it also features dark mode, elements of skeuomorphism and motion design. The major con of using GMD is that you’ll potentially become less distinguishable in terms of UX and UI.
    • Apple Human Interface Guidelines. Again, AHIG is very comprehensive. The downside to the design system is that you’ll be competing with millions of apps that have a similar look and feel.
    • Microsoft Fluent Design. It’s a little less comprehensive than the previous two. The shortcomings include lacking documentation and some inconsistencies in the design patterns. However, it’s still a solid choice.
    • Atlassian Design System. A solid choice if you like the look and feel of Atlassian products like Jira or Trello.
    • Shopify Polaris Design System. As the name suggests, this design system is created for e-commerce merchants. If you’re designing an e-commerce project, that’s a very good choice.

    Conclusion

    Hopefully, if you had any doubts as to whether you need a design system, this article made a good case for it. Regardless of whether you’re building a custom or a pre-built design system, these are vital for long-term design scalability and adaptivity. If you’re looking for a place to follow your journey with design systems, look through the pre-built design systems to get an idea of what they should look like.

    Thanks for sticking till the very end, see you in our next article!

    Dmytro Trotsko by Dmytro Trotsko

    Did you like the article?

    Help us share it:

    start your project with us.

    Getting in touch
    is easy .
    Thank you for your message. It has been sent