Bring up design systems in conversation and it's guaranteed to spark a debate. While design systems are now mainstream, there's still lots of open questions and uncertainty around the value they bring to teams and the products they build. Our goal in creating this syllabus is to remove the heavy-handed jargon and help designers, product managers, developers, and team leaders learn key concepts and strategies, and familiarize themselves with benefits, pitfalls, and unexpected side-effects of building and managing design systems. While this material is intended for people working in product-related roles, the principles and concepts are relevant to anyone who is interested in better understanding how design systems enable teams to deliver best-in-class experiences.
The resources in this syllabus cover everything from the most basic concepts to the nitty gritty realities of building design systems. Get first-hand advice from team leaders who built their company's design system from the ground up, understand the biggest challenges teams face when starting out, and discover the best approach to take based on team size and product maturity.
This post is part of the UI Prep syllabus series, a set of posts dedicated to helping product people (designers, PMs, developers) deeply understand key topics to help them build world-class products.
Design Systems 101
What is a design system
- On the Current State of Design Systems - Christian Beck
A history of design system trends and recommendations for creating and using design systems today.
- Chapter 1: Designing Systems - Brad Frost 🔥
The evolution of the web and why design systems are necessary.
- Everything you need to know about Design Systems - Audrey Hacq
An overview of what a design system is, its purpose and how to use them within teams.
- Defining Design Systems - Nathan Curtis 🔥
What goes into building a design system.
Why design systems are important
- Building a Visual Language - Karri Saarinen
Why design systems are essential to build products better and faster.
- The value of investing in design systems - Drew Bridewell 🔥
How design systems reduce loss, increase consistency and efficiencies and improve company operations.
- Measuring the value of design systems - Clancy Slack
A study of the time saving benefits of a design system.
How a design system is different from a UI Kit
- Your Sketch Library is Not a Design System - Brad Frost 🔥
Why design systems require both a UI kit and coded frontend components.
- Building a design system… not just a UI kit - Christian Slegtenhorst
What a design system is and what it should include.
Getting team buy in
- Product Thinking is a Lifeline for Struggling Design Systems - Matthew Strom 🔥
Applying market analysis, jobs to be done, and data-driven decision making to your design system to ensure success.
- Selling a Design System at Your Company - Nick Babich
Convincing engineers and creating a realistic plan to deliver value.
Build your design system with UI Prep’s Design System UI Kit for Figma.Learn more
Creating a design system
Design system methodology
- Chapter 2: Atomic Design Methodology - Brad Frost 🔥
Introduction to atomic design, what it is, and how it helps create more effective, deliberate UI design systems.
- Chapter 4: The Atomic Workflow - Brad Frost 🔥
How to use Atomic Design to create an effective design system.
- The full stack design system - Emmet Connolly
Applying UI methodologies like Atomic Design to every aspect of your product.
- Micro Design Systems: Breaking the Monolith - Paul van Oijen
Using modular design systems to scale better, make design faster, and be less likely to fail.
Building your design system
- Atomic design: how to design systems of components - Audrey Hacq 🔥
How to strategically design components for a design system.
- 10 Basic Tips to Creating a Design System from Scratch - Christian Beck
Guide to creating a design system ui kit on a startup budget.
- Creating a product design system in Sketch - Alexandre Trimoulet
Step-by-step process of creating a Design System.
Laying the foundation
- Intro to The 8-Point Grid System - Elliot Dahl 🔥
What the 8pt grid system is, why it's important, and how to use it.
Extensive, straightforward layout documentation.
- Everything you need to know about layout grids - Thomas Lowry
Intro to layout grids and how to use them in Figma.
- Space, Grids, and Layouts - Elliot Dahl
How to create and use spacial systems.
- Everything you need to know as a UI designer about spacing & layout grids - Molly Hellmuth 🔥
Spacing and layout grid best practices based on Material Design, Bootstrap, and Figma.
Establishing brand and applying consistent styles
- Style Guide-Driven Design Systems - Brad Frost
How to establish a design system through the lens of its style guide.
- Design FAQ. The Role of Branding in UI Design - Marina Yalanska 🔥
The relationship between branding and UI.
- 11 Tips For Building Great Color Palettes - Patrick Multani
Best practices and strategies for building color palettes.
- Typography in Design Systems - Nathan Curtis
How to choose fonts, set a hierarchy, and integrate with components.
Extensive, straightforward type scale documentation.
- Designing for Design Systems - Ethan Muller
Guide to help designers and developers work together to build design systems.
Documentation & naming conventions
- Best practice for design system naming conventions - Shayna Hodkin 🔥
Improving design systems with standardized naming conventions.
- Documenting components - Nathan Curtis
Using documentation to drive effective design decisions and speed development.
Maintaining a design system
Designing a maintainable system
- Chapter 5: Maintaining Design Systems - Brad Frost 🔥
How to maintain a design system and set it up for long-term success.
- A Design System Governance Process - Brad Frost
How to ensure design systems are properly used across team members for long-term success.
- Tips For Managing Design Systems - Nick Babich 🔥
How to incorporate and manage a design system to help teams improve designs, be more consistent, and bring design and development together.
Scaling your Design system
Design leaders from Google, Spotify, Stealth Startup, and Gigster share their thoughts on design systems—and their predictions for the future.
- 5 Ways Facebook Scales Their Design System - Jeff Smith 🔥
Product designer Jeff Smith shares insights, expert advice, and actionable tips based on the design process at Facebook.
- Design system office hours playbook - Daniel Eden
Using office hours to collect input from product teams.
Closing the gap between designers and developers
- UI Component Design System: A Developer’s Guide - Joni Star 🔥
Fundamentals of successfully building a component design system.
- Painting with Code - Jon Gold
Intro to Airbnb's new open source library React Sketch.app
- Getting Developers Started with a Design System - Nathan Curtis 🔥
Step-by-step onboarding instructions for developers.
- Design APIs: The Evolution of Design Systems - Matthew Strom
Using the API model to improve communication between designers and developers.
Collaborating on design systems
- Design System Communications - Nathan Curtis
Leveling up a design system’s multi-channel approach to messaging designers, developers and everyone else.
- Systems Thinking, Unlocked - Hayley Hughes, Yujin Han 🔥
How Airbnb is evolving their model to be inclusive and empower teams to engage with the design system.
- The People Part of Design Systems - Magera Moon
Creating people systems as well as technical and operational systems.
- Design Systems are everybody's business - Alex Nicholls
Deep dive through Workday’s experience developing, productizing, and eventually, releasing their design system out into the open.
- Design Systems are for People - Jina Anne
Using design systems to create a community.
- Invision | Design Systems Handbook - Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield 🔥
"Best practices around planning, designing, building, and implementing a design system, with insights and first-hand experiences from experts who have gone through the journey."
- Design Systems - Alla Kholmatova 🔥
"Based on Alla’s experiences, case-studies from AirBnB, Atlassian, Eurostar, TED, and Sipgate, plus 18 months of research and interviews — all attempting to figure out what works and what doesn’t work in real-life products."
- Thinking in Systems - Donella Meadows
"Insight for problem solving on scales ranging from the personal to the global."
"Know how to build a design system step-by-step. Based on real projects."
- Frontend architecture for design systems - Micah Godbolt
"Takes experienced web developers through the new discipline of frontend architecture, including the latest tools, standards, and best practices that have elevated frontend web development to an entirely new level."
- Laying the Foundations - Andrew Couldwell
"What design systems are, why they are important, and how to get stakeholder buy-in to create one."
- The Timeless Way of Building - Christopher Alexander
"A new theory of architecture, building, and planning which has at its core that age-old process by which the people of a society have always pulled the order of their world from their own being."
- The technical side of design systems - Brad Frost 🔥
"What's involved in establishing a technical architecture for your design system, including front-end workshop environments, CSS architecture, implementing design tokens, popular libraries like React and Vue.js, deploying design systems, managing updates, and more."
- Why Design Systems Fail - Una Kravets
"What makes design systems successful, analyze real examples of success and failure, and show how to make sure your design system has the building blocks it needs to grow into a successful product."
- The Future of Design Systems - Hayley Hughes
"How design systems can help businesses become more efficient, resourceful environments as well as help designers create a better user experience."
- Building (and re-building) AirBnBs Design System - Maja Wichrowska, Tae Kim
"Airbnb’s experience creating an effective, widely-adopted design system and the decisions and trade-offs that were made to get there."
- Design Better: Brad Frost and Dan Mall: Rethinking designer-developer collaboration - Brad Frost, Dan Mall
"Bridging the gap between designers and developers."
- Google Design: Method Podcast, Episode 12 - Rich Fulcher
"The evolution of design tools, and what it means to design for users who are themselves designers and developers."
"The evolution of Indeed’s design system, and how collaboration across the company is key to any design system’s success."
- Design Better: Diana Mounter: from design silos to design system - Diana Mounter
"Navigating the path from style guide contributor to full-time design systems manager."
"Design Tokens. What are they, what problem do they solve, and how can they be used within an existing Design System?"
- Design Details: 292: Building Design Systems - Linzi Berry
"How to implement, maintain, enforce, evangelize, and roll out a design system."
- Google Design: Design Notes, Episode 2 - Liam Spradlin
"How they each built experiences with a distinct personality, and as they discuss elevating content, the emotive qualities of white space, and how to use the Material Design system as a springboard for unique expression."
- Google Design: Method Podcast, Episode 4 - Roman Nurik
"Unique challenges of designing for developers, the best approach to building design tools, and Google's mobile development platform Firebase."
- Hacking UI: Finding Your Product’s Level of Readiness and Manifesting Design systems (w/ Keenan Cummings, Airbnb) - Keenan Cummings
"Keenan shared with us why he believes that investing in design systems and investing in your team, not only pays-off, but it is a must."
A Figma publication for design systems creators, designers, developers, and managers.
A frequently updated collection of Design System examples, articles, tools and talks.
Web design best practices, design systems, responsive design, and other tasty topics.
- Gusto | Design Systems at Gusto: Part I - Robin Rendle
"What we built, what we learned along the way, and where we’re heading next."
- WeWork | Plasma design system - Andrew Couldwell
"How we created a design system at WeWork"
- Slack | The Gradual Design System: How We Built Slack Kit - Garrett Miller
How engineers, designers, and writers centralized standards and built "Slack Kit".
- Dropbox | Design Tooling at Scale - Adam Noffsinger
"The story of how Dropbox Design migrated to Figma and structured our cross-platform design system."
- Booking | Lessons learned building a design system at scale - Arda Karacizmeli
"How we built the Booking Design System (and how you can get a head start building yours)"
- Skyscanner | How we scaled our design system to unleash Skyscanner’s new brand - Skyscanner Engineering
"How having a design system helped Skyscanner — and could help other businesses give themselves a makeover."
- Ryte | Lessons learned building a design system for 500,000+ users at Ryte - Raphael Fleckenstein
"The lessons we learned building our design system and how we dramatically increased the velocity of our design process with it by 8x."
How HobSpot created a design system to make their product consistent, highly functional and delightful.
Example Design Systems
- Sales Force's Design System
- Atlassian's Design System
- Solid Buzzfeed's Design System
- Mail Chimp's Design System
- Shopify's Design System
- IBM Design Language
- Apple's Design System