What Is a Design System?
A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.
Systems design is not new. What’s new is how we apply it to our work. The design systems that I’m talking about here are specific to digital products — websites, applications, etc. And they touch people who work on digital design, user experience, interaction design, and front end development. Here are a few analogous examples:
Example 1: LEGO
Image Source: LEGO Annual Report
Question: How many ways can you combine six 2x4 LEGO® bricks of the same colour?
Answer: 915,103,765 different ways!
A basic set of LEGOs will likely include a standard brick, plate, stud, tile, etc. And you probably have a few different colors for each block. When we build a design system, we’re designing the LEGO bricks that you can reuse, build a variety of structures, and voila! They all look like they’re part of the same design family.
Example 2: Taco Bell
Taco Bell has about eight ingredients and yet, they have about 50 items on their menu. And guess what? They’re just mixing and matching those same eight ingredients in different ways. With these eight ingredients, you can make a taco, a quesadilla, or a [insert your favorite late night Taco Bell treat]! Same idea applies: this is a design system.
Wait a minute —are you sure it’s called a “design system”?
- Pattern library
- Modular design
- Component design
- Design language
- User interface library
Sure, there are nuances to all of these, but they’re basically doing the same thing: creating a series of design components for you and your team to reuse. Sometimes, you’ll even find elements of a design system in a style or brand guide.
Why should you use a design system?
1) Design systems can save you time and money!
While it might feel like you’re adding on another layer, design systems can actually help you increase your efficiency. To better understand how this applies to you, consider these questions:
- Scale - Are you designing a product (or products) that has more than 300 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.
In addition, because you’re reusing components in your design system, the time you spend creating will level off over time. At that point, your designers and front end developers can fine tune existing products, add delight to the experience, or focus on other projects!
2) Design systems are the future!
“When a technology matures, design moves to the foreground because the underlying machinery has been commoditized.”
Maeda went on to say, “We’re living in an era where there’s massive design debt all over the tech industry,” and outlined four ways to solve the issue:
- Overhaul the design education system to be relevant to tech.
- “Scale” a company’s design function through better managing/leading of designers and shareable design systems.
- Make new kinds of tools that enable computational designers to be faster and capable of handling larger scopes of influence.
- Achieve a level of machine intelligence that subsumes the majority of rote design tasks.
In case you missed it, the second point includes scaling design through shareable design systems! How timely! (Are you sold yet?!)
Do you have any examples of design systems?
Why yes, I do!
Commercial Design Systems
- Harmony from Intuit
- GEL - Global Experience Language from BBC
- Material from Google
- Lightning from Salesforce
- AirBNB’s Visual Language
- Joystick from EA
- Fluent from Microsoft
- Plasma from WeWork
- Polaris from Shopify
- Lonely Planet
- Swarm from Meetup
- Canvas from Hubspot
Government Design Systems
- US Government Design Standards
- USPTO UI Design Library
- USA Jobs Design System
- State of California
- Bristol City Council
- City of Philadelphia
- Australian Government
Check out Adele for even more! UXPin put together this huge repository of publicly available design systems.
If you have any thoughts or questions, please don’t hesitate to reach out! We’d love to hear your stories about how you implemented a design system or the challenges you’re facing. Happy designing!
Are you ready to create a design system for your organization?
Forum One creates a design system for nearly every design project we work on, so if you’re interested, let's talk!