What the heck is a design system?

Let's start out with a couple quotes to set the mood:

A design system’s purpose is to provide consistent, tested and reusable solutions for a common UX problem.
Mina Markham

A style guide is an artifact of the design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.
Nathan Curtis

So what is a design system?

Well, it's not a box of Legos. It's more like the Lego factory.

People | Tools | Patterns | Guidelines | Values

A good design system is a collaboration between many parts of a business and product. It is a distillation of a companies values and people into a set of guidelines, tools, and patterns that make rapid development easier and enable a team to produce accessible functional tools.

A design system is integrated - it's built into the product and organization/product development process, not merely a style guide you reference

A design system is shared - it’s actually shared and adopted across the organization, in order to cover major part of the product

A design system contains patterns - can be patterns and/or components.

A design system contains principles - there is underlying principles behind the patterns that guide the work

We think we merely design and build websites and apps. And that’s true for the most part. After all, that’s what our clients pay us to do, and the products we create are the vehicles that generate money and success for our organizations. It seems natural to focus on the final implementations rather than the underlying system. The live products remain the primary focus of everyone’s attention, while any pattern library exists as an offshoot that simply provides helpful documentation.

Deliverables

Shopify has a great example of the various deliverables that might be produced from a design system.

Patterns

Rules around accessibility, internationalization, layout patterns, and error messages would all be gathered in the Patterns section.
Example

Content

Rules about website content, blog posts, and documentation all fall into the content portion of the design system.
Example

Style Guide

Rules about design and the creation of visual elements fall into the style guide portion.
Example

Code Style

Code style and formatting, stylelint rules, and CSS patterns are all part of the code style portion of a design system.
Example

Component Library

Reusable components like buttons, form fields, and grids make are part of the component library.
Example

Benefits of a design system:

• 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.

Building a design system

Questions to ask

• How does the system work today and in the future?
• What is our vision?
• What problems are we trying to solve?
• Who does this problem most impact?
• What impact do we want a design system to have on how we work?

Building on a smaller team

1. Don't start from scratch

"Steal like an artist", where you can. There are lots of open design systems out there that we can borrow from. Additionally, there are lots of good tools that we can use.

Even things like Bootstrap can be useful to steal from - we can find common patterns that many web-apps use and build reusable components to build them out for our companies.

2. UX/UI Audit

We can't know where we are going until we know where we are and where we have been. Before starting, get an idea of where you are, what pages you have, what components they use, and what makes sense to abstract into a design system.

3. Build a living document

A design system is a living breathing collaboration between designers and developers. As such, it can and should grow and evolve - which means getting started and letting it change/evolve.

Some ideas of sections:

1. Colors
2. Typography
3. Sizing/Spacing
4. Imagery

4. Build a component library and document it

Once the audit is done, begin to build out a component library. For each component, include documentation and standards. Remember that when not to use a component is just as important as when you should use it.

Quick Activity for getting started

Our design system offers ____[kit scope]____
released as ____[kit outputs]__
and documented at ____[kit doc site]__
produced by ____[people]______
in order to serve ____[products]____
products and experiences.

To infinity and beyond

As the design system grows and evolves it enables us to work in interesting and new ways.

Giving Back

One great thing about a design system is that it can live out in the open. It's a great way to represent your Product/Engineering brand and give back to the community.

DesignOps

DesignOps (also called div-ops!), much like DevOps, is a fast-growing field. A design system is the first step in implementing a DesignOps team.

https://clearleft.com/posts/design-ops-a-new-discipline

Full Stack Design systems

When you’re creating a bespoke Design System for a specific product, you have the opportunity to not just group common UI elements together, but to actually represent your core product concepts at many levels. I call this a Full Stack Design System.
[Link]

Tips

Any design system is better than no design system at all.

Get something built sooner, rather than later.

GitHub’s design system, Primer, was being revamped internally and privately. Doing so, Diana said, was in part because her team faced Imposter Syndrome comparing Primer to the systems of matured and larger organizations like AirBnb’s DLS, Shopify’s Polaris, and the US Web Design System. Primer felt unpolished in comparison. Many components were deprecated.
[Link]

Build systems, not pages

The web is massive and diverse - it is no longer enough to build webpages. Instead, we need to think about responsive and adaptive design made up of components.

http://www.atomicdesign.bradfrost.com/chapter-1/

Pay attention to the team's limits

We can't build a design system in a day, a sprint, or a quarter. Even starting with just a sketch file that makes the creation of new features and pages consistent is a good base.

Organization is key

Avoid "quick and dirty", you'll only bite yourself later. Make sure people know what is happening and get input from everyone that might touch the system. The worst possible timeline is some people using the design system and others not using it.

Have a single source of truth

Have a sharable Sketch library and component library that everyone uses while working on the design system.

Links & Tools

• Abstract's Customer Stories - Stories from Abstract's customers, who are using Abstract to build collaborative design systems
• Design Systems - A Figma publication for design systems
• Getting Developers Started with a Design System - A good article on ramping developers into a design system.
• Design Systems Repo
• Getting executive buy-in for your design system | Inside Design Blog
• Picking Parts, Products & People - EightShapes - Medium
• Accessible Brand Colors
• Sketch version control & design workflow management - Abstract