Blog User Experience

Comprehensive Guide to Design Systems

Jason Beres [Infragistics] / Wednesday, April 21, 2021

It’s no secret that there’s a huge disconnect between design and development teams, often referred to as “the handoff” — the moment when an app prototype is sent to the development team. While handoffs in sports often suggest a smooth, effortless motion — one thinks of a quarterback nestling the football in the hands of a running back — handoffs in app building are anything but smooth.

This is because design and development represent core functional disciplines within software product teams, and each discipline has evolved rapidly on its own. And while there are mature tooling solutions targeting designers or developers exclusively, solutions targeting a design-to-code story have been rare. Though that is changing as we’ll discuss shortly.

In this article, you will learn:

In their recent report1 "Build Better Products Faster with Design Systems," Gartner highlights 3 key findings in their analysis of how enterprises build software today:

  • Digital products designed from scratch often lead to inferior usability, visual and behavioral inconsistencies, and longer design cycles.
  • Many product teams create original, custom-made design systems, resulting in unnecessary complexity that requires too much time and effort to design, build and maintain.
  • Design systems age quickly, eroding their capacity to increase product usability and quality and decrease time to market.

From a business success standpoint, enterprises acknowledge the need to deliver compelling UX in applications. However, delivering compelling UX requires a high degree of collaboration between design and development. And this level of collaboration has been challenging for years because it’s difficult for:

  • Developers to accurately duplicate what designers have created or envisioned.
  • Designers to communicate design intent and for transforming visual specifications into code.
  • Developers to even find the files for features or images that are shown in mockups but weren’t delivered during the handoff.

 Design and Developer Silos

A design system can help bridge the traditional silos between designers and developers.

In recent years, design systems have emerged as a solution to improve collaboration between design and development. The design system approach has been embraced by organizations like Salesforce, IBM, Atlassian, and many others and serves as an indication of its appeal.

What is a Design System?

A design system, in simple terms, represents a deliberate inventory of UX patterns and brand style guides that are then realized as matching software components that can be reused or contextualized for building software applications. A design system can also be extended to contain voice and tone guidance for writing content, page templates, and even user flows. It is handcrafted for each organization's specific application domain and usage context. Above all, it serves as a single source of truth for product teams when building applications and represents a collaboration-contract between design and development.

Core Components of a Design System

Benefits of Using a Design System

With a design system in place, designers and developers can work independently in their own tools without requiring low-level checks around design implementation. They can instead focus on high-value interactions around outcomes.  Agreed upon design systems include these benefits:

  • Reduced time to create / construct prototypes using accepted and approved pre-defined UI controls and UI patterns.
  • Consistency across applications and teams in terms of interaction model, but also accessibility requirements like WCAG, ARIA and Section 508 compliance.
  • Reduced defects and testing as the design system and UI controls are used at scale across multiple applications and teams over longer periods of time.
  • Brand consistency as the core components of the design system are accepted and approved by the digital product team / design center of excellence.

From the customer's perspective, meaningful consistency across applications offered by the same organization allows users to reuse what they've learned from past interactions with apps.

As Diana Mounter from GitHub puts it in her YouTube talk:

  • Design systems bring order to chaos. Everyone is kept on the same page, so the entire product remains consistent and polished throughout.
  • Design systems improve the user experience through the repeated use of familiar and proven patterns. Designing anything from scratch leaves room for error, so try to use what already works.
  • Design systems improve workflow efficiency. Product teams know exactly how components of new features should look and how to implement them."

Shared Vocabulary Between Design and Development

While consistency is a big win, something as simple as mutually agreed upon naming for components and patterns can go a long way. This is helpful for current users of the design system and also for onboarding future members. Making the naming convention explicit and shared makes it easier for both developers and designers to find the components in their respective tool environments.

Over time, the names for the UX patterns will start surfacing in conversations, serving as a surrogate for user requirements. For example, when someone mentions we should use a combo-box component, it's clear to both designers and developers what type of behavior it supports and how it can help with the user's task experience. Since a design system documents a component as a pattern, it usually explains when to use a specific component and how to use it the right way — with examples. So, in that sense, a design system can fulfill the need for approachable UX guidance, thus evangelizing design practices.

Accelerate Design Process and Development

Speed to delivery is an explicit benefit of reusing components in a design system. From a design perspective, efficiencies come from not having to create new components or patterns since they are already part of the design system UI kits. Even when faced with the need to create a new complex pattern, designers can rely on the design system guidelines and build something using the buttons, labels or menu dropdowns already available.

From a developer's point-of-view, being able to generate the code for this component or pattern helps avoid inconsistency between design specs and code. Learning speed is a not-so-obvious benefit of using a design system approach. Now that designers are freed up from pixel crafting, they can return to the true design process, focusing on designing user journeys or flows and evaluating them with users. The approach used for creating design deliverables can also be used to produce interim prototypes for usability testing and getting feedback from stakeholders.

It's important to note that a design system is not just a set of UX best practices and UI kits. You also need matching UI components on the development side. While the design systems movement has traditionally been championed by design teams within large organizations, for it to truly succeed, the development team also needs to become a co-owner/contributor of the design system.

This is where design systems usually fall down – they are championed by the design side of the digital product team; the development side is not included. The miscommunication and lost time in mismanaged handoffs still exist in these cases.

Why Use a Design System?

Design systems force designers to systematize their work, to think in components. Front end developers are already doing this. They’ve been doing this. When design teams create design systems, suddenly they start thinking like their developer teammates and speaking the same language.

While it might feel like a design system is simply adding another layer to your work, design systems can help increase your efficiency. To better understand how this applies to you, consider these questions:

  • Scale – Are you designing a product (or products) that has upwards of a 100 or more screens? Will your product(s) grow significantly?
  • Consistency – Do you want your products to have consistent branding, look and feel, and experience? Does your product currently have 20 different button styles?
  • Efficiency – Do you want your visual designers, user experience designers, and front-end developers to work faster and save time?
  • Teamwork – Do you have projects where there’s a lot of handoff between designers or many designers work on the same project at once?

If you answered “yes” to even one of the above questions, then a design system is probably right for you. Working at scale, and increasing consistency and efficiency are the biggest benefits to creating and using a design system.

The Anatomy of a Design System

 A design system uses an approach for building scalable elements that can be best illustrated as atoms, molecules, and organisms. It's generally referred to as the Atomic Design Methodology created by Brad Frost. It has become a popular approach for describing the structure of a design system.

Atomic Design Graphic Image

Illustrating the atom-molecule-organism concept with examples.

 Returning to the metaphor of atoms, molecules, and organisms, you start by designing the tiniest component (e.g. button, avatar, label, heading, etc.). This tiniest component is referred to as an atom.

Going one level deeper, atoms consist of particles such as protons and neutrons. For a design system, this can be mapped to the base color palette and typography, which define the brand identity for the organization.

Going one level up from atoms, you have molecules, which are composed of atoms. Molecules can be mapped to components and represent more complex structures such as menu item, list item, and dropdown item.

Then, by combining layouts and multiple components, we get next hierarchal unit: UX patterns. If we're sticking to our biological comparison, that brings us to organisms. These encapsulate UX best practices by following "good" design principles and are built for the specific needs of a product.

The point of illustrating design systems as atoms, molecules, and organisms is to draw parallels with a living system. A design system should not be static and never-changing — it should reflect the product's UX needs and constantly evolve with the product and technologies used. New requirements emerge because of new device layout requirements. New product features and brand identity changes are inevitable. We must be sure that our design system is flexible and ready to change for us to adapt to these changes.

How to Build a Design System

To get started, you can use an existing design system as a base for what you build. The benefit of using an existing system is that it could save you tons of time – especially if it’s backed by real-world UI controls and components. In this case, you have the design system definition and the controls to back it up when you do the handoff of design to the dev teams. This is the design to code handoff we always talk about. When you start with an existing design system as a base, you aren’t sacrificing your own design needs, you can customize every aspect of the UI kits and design system definition for your corporate needs, while still maintaining the other benefits we’ve highlighted in this article.

To start with the Indigo.Design System, grab the UI Kits and Sync tool from Indigo.Design, and then follow this doc -https://es.infragistics.com/products/indigo-design/help/sync-themes-plugin - to customize to your own needs. 

Sketch UI Kit Design System Starter

 

 Whether starting with an existing design system, or starting from scratch, here are some of the key steps to build a design system:

Conduct a Visual Audit

The first step in building a design system is to do a visual audit of your current design, whether that’s the design of an app, a website, or some other digital product. Taking inventory of the CSS you’re using, and the visual qualities of the elements can help you gauge how much of an undertaking this process might be.

Create a Visual Design Language

The visual design language is the core of a design system. It’s made up of discernible components that you’ll use to construct your digital product. Your visual design language is made up of four main categories, and you should consider the role each of these design elements plays in every component on the screen.

  • Color - Common colors in a design system include 1–3 primaries that represent your brand. You may want to include a range of tints—a color mixed with white—and shades—a color mixed with black—to give your designers a few more options.
  • Typography - Most design systems include just 2 fonts: 1 font for both headings and body copy, and a monospace font for code. Keep it simple to avoid overloading and confusing your user. Keep the number of fonts low; it’s not only a best practice of typographic design, it also prevents performance issues caused by excessive use of web fonts.
  • Sizing and Spacing - The system you use for spacing and sizing looks best when you have rhythm and balance. A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.
  • Imagery - The key to success with imagery in your visual design language is having a plan and sticking to it. Set guidelines for illustrations and icons, and use the best image format for the situation.

Create a UI/Pattern Library

Unlike the visual audit you’ve already conducted (which looked at the visual qualities of your design elements), this step in the process looks at the actual components of your UI. Collect all of the parts and pieces of your UI currently in production. That means every button, form, modal, and image. Merge and remove what you don’t need.

Document Each Component and Use

This step is important. Be sure to document what each component is and when to use it. Documentation and standards are what separate a pattern library from a true design system.

Treat Your Design System Like a Product

Like any product, your design system needs a product manager (usually a design leader or UX leader in your organization), it needs a backlog, a roadmap and it needs to be maintained.  Design systems that aren't treated like a product will ultimately end up like the products in your enterprise that get ignored. They'll become stale, out of date, they won't include the latest best practices and patterns, and won't keep up with corporate standards. It is critical to treat your design system like any other product - it will give confidence to the users that there is a future and they have a place to go for support.

Design System Examples

Commercial Design Systems

Government Design Systems

Indigo Design System

The Indigo Design System empowers your design workflow with 60+ UI Components that also map to Ignite UI for Angular controls. Each component is optimized for responsive web development and provides various templating capabilities through smart layout and resizing rules set in the library. Furthermore, we have added light/dark modes and various interaction states to choose from when designing dynamic experiences. All this streamlines application design and development allowing any user interface created with the library in Sketch to be built in Angular with Ignite UI.

The Sketch library has a Components page containing all Components and symbols related to them. Below is a small part of a design system in the form of the "design side" - a UI Kit in Sketch, with all the core areas of the design system that we mentioned in this article.  This is not only showing some of the simpler artifacts, such as the several types of Buttons, Button Group and form elements like Checkbox, Switch, and Radio Group but it shows a rich UI control like a Data Grid, which is a must-have in any enterprise design system.

Design System UI Kit in Sketch

To find more:

  • Material Icons - a collection of 150+ Material Icons extended with 250+ more icons created by us according to the Material icon design guidelines, which you can easily extend even further
  • Colors - palettes with primary, secondary and gray color variants, as well as special colors and a couple of palettes specifically designed for data visualizations, including a set optimized for different types of color blindness
  • Typography - a collection of generic and component-specific text styles
  • Elevation - the set of 24 shadows we are familiar with from Material Design based on umbra, penumbra, and ambient shadow colors.
  • Illustrations - a set of 17 customizable and stylable illustrations to make your designs more playful and complete

Indigo.Design

 Visit Indigo.Design to learn more about this complete design-to-code system that not only includes a design system, but also integrates prototyping, user testing, app building and code generation.

1 Gartner ‘Build Better Products Faster with Design Systems," 2 March 2021, Brent Stewart, Van Baker