olaCreative Blog - Design Systems 101

Design Systems 101

Design Systems 101

We’ve all been there, trying to figure out why our designs lack consistency. Why do our projects always take longer and cost more than expected? In this ever-evolving world, your product’s ability to adapt to change is critical.  Not just to survive, but to thrive.

Today, we’ll look at how a design system can help improve our product’s chances of success while also ensuring that our development process is agile and adaptable. So what exactly is a design system and why is it so valuable? A design system is a collection of reusable design elements, such as buttons,  input fields, and headers, as well as their states and usage rules. Basically, it’s a set of building blocks that you can repeatedly use throughout a project. This system generally consists of three components:

  • A pattern library with a collection of buttons,  input fields, and tables.
  • A style guide featuring typography, colors, brand identity, and icons.
  • Rules of usage include design principles,  language or ‘tone of voice’, documentation, and design terminology.
olaCreative Blog - Design Systems 101

Why this is so valuable because our design system provides us with a standardized,  single point of reference for most if not all of our UX & UI decisions. It ensures consistency by having similar interface elements created in the same way,  especially when there are multiple designers involved. It makes it much easier for new teammates to get up to speed because of the increased flexibility.

It also increases the efficiency of our development teams by eliminating the need to design or code the same element twice, saving time and money. You can see how, as your team grows, the inability to quickly implement global changes,  not to mention the tedious task of designing and coding the same element multiple times,  could lead to chaos if you don’t have a design system in place.

The principle concept behind design systems is known as Atomic Design,  introduced by Brad Frost in 2016. It groups elements using a chemistry-inspired approach, starting with the most basic building blocks called atoms and progressing to the most complex elements such as templates and pages. The practical application of these principles can be applied to any design system.

Clearly, design systems existed prior to 2016.  Designers have always reused elements in an attempt to maintain consistency. Brad Frost’s Atomic Design is simply a more methodical and conceptualized approach to product development. So when should you start utilizing the repetitive elements of a design system?  Usually, as soon as you begin developing a high-fidelity design.

Our designers typically start by grouping elements such as buttons, shapes, and text. And then convert the groups into *symbols* in Sketch, or components in Figma. These ‘master components’ affect all instances of this element,  allowing for global changes to be as simple as changing a single element. These elements are then organized on a separate page, along with the rules and explanations. This is a fairly straightforward process.

The hard part is staying consistent with your efforts,  updating the system regularly, and actually putting it to use. The worst thing that can happen to any piece of documentation is for it to gather dust and be forgotten. Aside from just reusable elements, developing a design system also involves considering the hierarchy of text elements, such as headers, paragraphs, and hyperlinks.

olaCreative Blog - Design Systems 101

We also need to document the product’s color palette, including primary branding colors,  secondary colors, and semantic colors such as success, error, and warning indicators. I should mention that Figma’s recent update has made maintaining design systems quite a bit easier by introducing variants,  making it possible to create multiple states and variations of a single button.

Up until now, we’ve just been focusing on the general benefits of design systems.  Let’s quickly take a moment to consider the advantages of custom-built vs pre-built.

A custom design system is built from the ground up,  which means you’ll need to invest time and money into it. Despite the extra challenge,  a custom design system will help you differentiate your product through  UX and UI while also giving you complete control over which elements you require. It’s worth noting, however, that there are times when you don’t need to start from scratch with a design system.

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

Designers sometimes choose pre-built  open-source **design systems** for projects that must adhere to specific design principles. One obvious advantage of this approach is that it eliminates the need  to invest resources to develop a fully customized system. It also allows you  to use a popular visual language that users are likely to be familiar with. On the other hand, a disadvantage of using a ready-made design system is  that you lose a lot of what makes your design unique.  You might end up with a product that looks like a copy of Google, Apple, or Microsoft.

Also, if chosen incorrectly, they can cause additional problems. For example,  you should probably avoid using Shopify Polaris for a mobile game. On that note, we should quickly mention some of  the popular open-source design systems out there. I just referenced Shopify Polaris. There’s also Google Material Design, Apple Human Interface Guidelines, Microsoft Fluent Design,  and Atlassian Design System just to name a few.

When deciding whether to use a pre-built system or create a custom design system,  long-term design scalability and adaptability should be the primary consideration. 

Some examples of Design Systems:

Here is a list of design systems that are great resources to learn and create better user interfaces. They might come in handy during many different stages of the design process.