Design Systems: A List of Resources
Design Systems. The buzzword that’s circulating around the design industry and a trend that should not be ignored.
During summer 2018, I worked as a UX Design Intern at Workfront and was on the design system team for a month. This was when I really started to learn and understand the importance of a design system. At first, I found myself aimlessly looking for resources — trying to figure out what this buzzword meant. I know trying to learn something on your own is difficult, so I decided to put together a list of resources to help others get started.
So what exactly is a design system and why should companies adopt one?
According to DesignBetter.co, a design system is defined as:
a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Design systems are often confused with a pattern library or a style guide—both of which are just subsets of a design system. Think of a design system as the story of how a company builds and design its products — it can include design principles, UI components, UX guidelines, code standards, processes, design toolkits, code repositories, resources, etc. A design system is not a project, but a living product that is constantly evolving and needs to be maintained.
Some benefits of implementing a design system includes:
- Having a consistent product. It helps increase familiarity with users due to the standardized components used throughout the whole product. Therefore, there’s a better user experience.
- Efficiency within the team. Designers can prototype faster and focus more on the user experience since common UI components have already been designed. Engineers can then ship products faster since they are using components that have already been built.
- Encourages collaboration. Collaboration between designers and engineers is essential in creating a design system. Designers are not the only contributors — a design system is shared and used across multiple teams (designers, engineers, product managers, etc).
Implementing a design system sounds cool and every company wants to have one, but it is not always necessary. A company should only adopt one when it is on a larger scale rather than a small startup of 8 people. A company should only start building a design system when they are scaling the team and when they are hitting inefficiencies with multiple designers.
Getting Started
Building a design system is not easy and certainly has its challenges. I have put together a list of resources that can help you get started and learn more about design systems below.
Atom Design by Brad Frost
Why you should read this:
Atom Design is a methodology for creating design systems written by Brad Frost. In this article, Frost compares building a design system to the periodic table of elements, as they can both be broken down to fundamental building blocks. This comparison makes building a design system a lot easier to understand and is a great first approach.
Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.
— Brad Frost
Design Systems Handbook—an overview of Design Systems
Why you should read this:
This handbook provides an amazing overview of design systems — from understanding the power of building a design system to building your own. One of the best resources out there all in one place!
A Comprehensive Guide to Design Systems by Will Fanguy
Why you should read this:
Yet another guide to design systems. In this article, Fanguy provides resources from top organizations that are using design systems to drive success. In addition, Fanguy quickly summarizes the key steps and benefits of implementing a design system.
Design Systems — Zero to One by Paul Farino
Why you should watch this:
Farino does an excellent job going through the lifecycle of building a design system—from getting buy-in with stakeholders to ways on scaling and maintaining a design system. In order for a design system to be successful, you must get support from everyone in the company and show them the business and user value of developing a design system. Think about how much time and effort is spent rewriting code over and over again.
Picking Parts, Products & People by Nathan Curtis
Why you should read this:
The first thing you need to do to get your design system off the ground is to identify the specific components you need to design. In this article, Nathan Curtis provides a component checklist that allows you and your team to quickly identify which components are essential to your organization’s design system.
Laying the Foundations by Andrew Couldwell
Why you should read this:
This book covers what design systems are, why they are important, and how to get stakeholder buy-in to create one. It introduces you to a simple model, and two very different approaches to creating a design system. What’s unique about this book is its focus on the importance of brand in design systems and creating documentation. It’s a comprehensive, logical, practical guide that’s simple to follow and easy on the eye.
Lingo — A Design System Manager
Teams from IBM, Apple, LinkedIn, Salesforce, Workday, and Shopify use Lingo to help manage, organize, and scale their design systems.
A Design Systems Slack Community
Why you should join:
Jina Anne created this awesome Slack community to promote discussions around design systems. It’s a great place to connect with and learn from other designers who are also creating design systems.
List of Popular Design Systems
I’ve put together a short list of some popular design systems that are currently publicly available.
- Adele — A repository of publicly available design systems and pattern libraries
- Alex Pate created his own list of design systems, pattern libraries, and everything in between.
- Design Systems Repo — another comprehensive list of design systems
- Material Design by Google
- Lightning Design System by Salesforce
- Clarity Design System by VMWare
- Carbon Design System by IBM
- Design System by Pluralsight
Other Links
- https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/
- https://theblog.adobe.com/building-design-system-speed-scale-collaboration-innovation/
- https://designcode.io/design-system-in-figma/
- Nathan Curtis has a ton of articles on Medium.
- Jina Anne — Designing a Design System 2016
- https://www.uxpin.com/create-design-system-guide/recommended-resources
Final Thoughts
I am convinced that having a design system is not only a buzzword and trend, but can be beneficial to companies when successfully implemented. Therefore, companies must fully invest and support the design system teams in order to be successful.
