Summary: Design systems are a collection of components and guidelines used to design and implement a consistent visual experience for users.
Who is this for: internal teams, agencies, designers and engineers.
Bookmark this for your design resources.
“Design isn’t just what it looks like and feels like — design is how it works.” -Steve Jobs
Design Systems
As today’s design landscape continually evolves, designers are tasked with creating better user experiences. With this ever-growing set of expectations, a need for an organized approach to streamlining the creative process has emerged — enter Design Systems. Design systems provide a framework which helps guide product design while ensuring consistency across wide array of digital experiences from wearable to web. In this blog post we’ll go over what exactly is meant by a “design system”, look at its underlying principles, explore some of its benefits, list some tools and discuss how it is being used. So let’s get started!
The Marketplace
Did you know the Big Four technology companies among others use a design system. It’s no coincidence their visual elements in their products are the most adopted globally with a reach greater than even Gutenberg’s press. UX artifacts found in the most popular design systems are visual elements are part of users daily life. So technology has come a long way and design systems can help support the next Apple, or Facebook or Google.
How do you create a design system?
Understanding what makes a design system tick is a critical first step. Be willing to get deep into the details of how design systems function, what is delivered, and understand the cost to implement. Tooling is also something you should decide on early if possible. There is no magic approach, but starting with understanding will help you build something solid.
- Start in Figma or Sketch – within your tool of choice grab a library to start with or create the scaffolding for your work. Name your system and always remember to use a versioning system.
- Work in sections – Start creating the sections you want to include in the design system and label it in the file.
- Work on the foundation – Add typography, color, spacing, grid system, iconography, and brand elements.
- Work on the components – add all the components you want to start with. This doesn’t have to be perfect it just has to be a start.
- Publish what you have – Whether is is perfect or not just publish what you have. You can publish to a product like Zeroheight or Storybook. Both require different processes. Most importantly, publish to code and start circulating work for feedback.
- Always be selling – once you have something published, if you haven’t already, start selling. Make allies for the system.
- Repeat.
Structure of a Designed system
Below are some design systems implemented by different companies, so there is no wrong or right answer. Every client or company is different. Consider that when building your own design system. There is never a perfect solution. Usually these systems are about sharing design and code from documentation or code repo. Your design system should contain a principles, foundation, component library at least.
Design principles
Why, Guardrails, Release Notes
Foundation
Brand guidelines, Logo mark, Iconography, Color, Typography, Grid system, Spacing Design, Usage guidelines and more
Components (reusable UI elements)
Badges, Bottom app bar, Bottom sheets, Buttons, Cards, Checkbox, Chips, Date pickers, Dialogs, Divider, Lists, Menus, Navigation bar, Navigation drawer Navigation rail, Progress indicators Radio button, Search and more
Motion
A great sign of design system maturity is having a thoughtful approach to motion, microanimations, or transitions. These would be covered in documentation with animated samples and even json files for developers.
Style Guides, Pattern libraries, Design systems
A design system isn’t a style guide or pattern library exactly, but they are related. You could say style guides and pattern libraries are sub-sets of design system.
There are so many different usages and at times designers and developers interchange meanings. So really there no set definition, yet all of these can be considered design guidelines.
- Style guides contain the basics like font usage, color, some UI components. This would be a foundational part of a design system.
- A pattern library is usually reusable components that are code and can be shared. This would be part of a component and pattern and the heart of a design system.
- Design systems include everything in a style guide or pattern library, yet a design system goes deeper. For example rather than a simple typography kit as seen in a style guide, a design system would have more details like usage from weight to type-scale to line-height with rationale. As well there would be spacing and grids information included. There would be design process information. On top of that design systems contain important parts like principles, documentation, release notes, annotations, UI components, design patterns, tokens or code snippets and things like motion examples with usage recommendations.
Getting Efficient and Consistent with a Design System
Design and engineering teams care about a lot of things. Two of the most important to understand are efficiency and consistency.
Design guidelines:
Imagine a design team designing for a product without sharing foundational elements like typography, color, or spacing. The results would be everything you ever heard about like bad user experiences that lead to project failures. The visual design of a product would vary from designer to designer.
Engineering:
What happens when engineers roll code without sharing reusable component library or shared ui elements? Well you get bloat and tech deb. Software development is hard enough without 200 different flavors of an input or checkbox. A design system provides the structure and mechanisms for engineering teams to code consistent user interfaces.
Design System Examples
Every design system is unique like a snowflake, taking on the shape of its own company’s needs. The design systems can be as varied as the companies they serve and that is ok. Here are some design system that are serve high performing market leading products. See if you can spot the similarities and differences.
Apple human interface guidelines
“Apple’s Human Interface Guidelines (HIG) is a comprehensive resource for designers and developers looking to create great experiences across Apple platforms. Now, it’s been fully redesigned and refreshed to meet your needs — from your first sketch to the final pixel.” To learn more, visit the HIG website at: https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/.
Google Material design system
“Google’s Material Design system is a design system built and supported by Google designers and developers. Material.io includes in-depth UX guidance and UI component implementations for Android, Flutter, and the Web”. To learn more, visit the Goldman Sachs Design System website at: Material.io.
Microsoft Fluent design system
“Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included”. To learn more, visit the Fluent Design system website at: https://design.gs.com/home
Uber Design system (Base)
“Base Web is a foundation for initiating, evolving, and unifying web applications. It’s an open source toolkit of React components and utilities that align with the Base Design System–essentially, the designs translated into code. The project is engineered to be reliable, accessible, and extensively customizable”. To learn more, visit the Uber Design system website at: https://baseweb.design
Goldman Sachs design system
“The Design System is customized for institutional finance and allows teams to create digital products that put clients first. “. To learn more, visit the Goldman Sachs Design System website at: https://design.gs.com/home
IBM Carbon design system
“Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors”. To learn more, visit the Carbon Design System website at: https://www.carbondesignsystem.com/.
Salesforce lightning design system
“The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows”.
To learn more, visit the Salesforce Design System website at: https://www.lightningdesignsystem.com
Atlassian design system
“The design system template gives you the tools you need to define your design principles, document components, and clarify rules and best practices for design, writing, and more. It’s the perfect starting point for any design system”. To learn more, visit the Atlassian Design System website at: https://atlassian.design
Pajamas design system
“To ensure that everyone can contribute to GitLab with confidence we provide everyone with the right resources and know-how. This design system is the single source of truth for everything anyone needs to know about contributing to GitLab”. To learn more, visit the Pajamas Design System website at: https://design.gitlab.com
Top 5 Design Tools for Design Systems
We won’t get too far into the weeds regarding specific design system tools. You can review that on another blog post about design tools. Just note, not all of these tools are used for creating interfaces. Some tools are just for documentation others just for code snippets and others for components. These tools can be combined with each other.
- Figma – Create, design guidelines, design inspection
- Storybook – Code, coding guidelines, docs
- Zeroheight – Docs, coding guidelines, examples, design inspection
- Adobe XD – Create, design guidelines, design inspection
- Sketch – Create, design guidelines, design inspection
Typical Design systems challenges
Creating a design system in any organization is a difficult task, but it is made more difficult by not getting some common barriers out of the way. It is important to frame a design system from the start as a system or process not a project with an end. As well, it is critical to tackle as much as you think you and the organization is able to adopt, because an imperfect system is better than no system at all. Here are some other challenges you might come across.
Not sponsored by decision makers
Building a successful design system requires more than just few champions – it’s essential to build an entire coalition of execs from different business units. Having support and buy in from multiple levels of management is key as it can make all the difference between having smooth sailing or running into obstacles while trying to introduce something new.
Not enough funding
This usually resolves with getting leadership buy-in, but sometimes you need to bootstrap your way there. So do so! Don’t wait for an invitation. Create a case and a proof of concept or presentation and sell it to your concentric circles of team members. One of the biggest tasks for creating a design system is power point and sales. Always be selling.
Lack of engineering support
The term MVP used as an excuse to not implement a design system often. Engineers mean well and are usually very good at what they do. But at time times their definition of adding value to a product may be very different to what users need, the product needs, or design needs. Start with decision maker buy-in, but make friends with engineers by empathizing with their needs. Design systems serve engineers too!
No one participates
One of the biggest challenges to building design systems is the process of design systems and the participation rate of team members. Every company is different, but participation rate is a key indicator o system health and it is super important you gain the trust of others so they fell comfortable not just to participate but
Not enough documentation
After creating a design system you should prepared to dedicate a portion of your bandwidth just on documentation. If you don’t you run the risk of getting flooded with questions or issues that could otherwise be answered with good documentation. While there are dedicated teams that do this there is nothing wrong with documenting things on your terms when you can.
Its a process not a project
Like UX, a design system isn’t completed at the end of a sprint or when a project is completed. A design system is on a schedule to be sure, but it should be improved every sprint. A design system is many things including a process. A good design system can efficiently deliver value to your customers. So sell it like a process not a project.
Design systems are about people
When working on design systems, think of it as relationship-building! Building strong relationships with others is the key to gaining support for your system – be sure to show kindness and empathy in everything you do. Design systems should focus more about connecting people together than creating something flawless; participation is so important here!
Conclusion
Design systems are extremely helpful for designing products more efficiently and less chaotic. By having a living document that outlines all the design elements used in a project, as well as their relationships to one another, designers and developers can avoid spending time on pixels and instead focus on creating cohesive user experiences.
A style guide or pattern library alone is not enough to constitute a design system—for a true design system, all three components must be integrated and working together. We hope this introduction has piqued your interest in learning more about how design systems can help streamline your next big project. More to come!
Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.
