The UI Prep Syllabus on Design Systems

Written By
Jake Tsacudakis
Read Time
12 min
Last Updated
August 10, 2023

Introduction

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

A history of design system trends and recommendations for creating and using design systems today.

The evolution of the web and why design systems are necessary.

An overview of what a design system is, its purpose and how to use them within teams.

What goes into building a design system.

Why design systems are important

Why design systems are essential to build products better and faster.

How design systems reduce loss, increase consistency and efficiencies and improve company operations.

A study of the time saving benefits of a design system.

How a design system is different from a UI Kit

Why design systems require both a UI kit and coded frontend components.

What a design system is and what it should include.

Getting team buy in

Applying market analysis, jobs to be done, and data-driven decision making to your design system to ensure success.

Convincing engineers and creating a realistic plan to deliver value.

Creating A Design System

Design system methodology

Introduction to atomic design, what it is, and how it helps create more effective, deliberate UI design systems.

How to use Atomic Design to create an effective design system.

Applying UI methodologies like Atomic Design to every aspect of your product.

Using modular design systems to scale better, make design faster, and be less likely to fail.

Building your design system

How to strategically design components for a design system.

Guide to creating a design system ui kit on a startup budget.

Step-by-step process of creating a Design System.

Laying the foundation

What the 8pt grid system is, why it's important, and how to use it.

Extensive, straightforward layout documentation.

Intro to layout grids and how to use them in Figma.

How to create and use spacial systems.

Spacing and layout grid best practices based on Material Design, Bootstrap, and Figma.

Establishing brand and applying consistent styles

How to establish a design system through the lens of its style guide.

The relationship between branding and UI.

Best practices and strategies for building color palettes.

How to choose fonts, set a hierarchy, and integrate with components.

Extensive, straightforward type scale documentation.

Guide to help designers and developers work together to build design systems.

Documentation & naming conventions

Improving design systems with standardized naming conventions.

Using documentation to drive effective design decisions and speed development.

Maintaining A Design System

Designing a maintainable system

How to maintain a design system and set it up for long-term success.

How to ensure design systems are properly used across team members for long-term success.

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.

Product designer Jeff Smith shares insights, expert advice, and actionable tips based on the design process at Facebook.

Using office hours to collect input from product teams.

Closing the gap between designers and developers

Fundamentals of successfully building a component design system.

Intro to Airbnb's new open source library React Sketch.app

Step-by-step onboarding instructions for developers.

Using the API model to improve communication between designers and developers.

Collaborating on design systems

Leveling up a design system’s multi-channel approach to messaging designers, developers and everyone else.

How Airbnb is evolving their model to be inclusive and empower teams to engage with the design system.

Creating people systems as well as technical and operational systems.

Deep dive through Workday’s experience developing, productizing, and eventually, releasing their design system out into the open.

Using design systems to create a community.

Additional Resources

Books

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

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

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

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

"What design systems are, why they are important, and how to get stakeholder buy-in to create one."

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

Talks

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

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

"How design systems can help businesses become more efficient, resourceful environments as well as help designers create a better user experience."

"Airbnb’s experience creating an effective, widely-adopted design system and the decisions and trade-offs that were made to get there."

Podcasts

"Bridging the gap between designers and developers."

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

"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?"

"How to implement, maintain, enforce, evangelize, and roll out a design system."

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

"Unique challenges of designing for developers, the best approach to building design tools, and Google's mobile development platform Firebase."

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

Blogs

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.

Case Studies

"What we built, what we learned along the way, and where we’re heading next."

"How we created a design system at WeWork"

How engineers, designers, and writers centralized standards and built "Slack Kit".

"The story of how Dropbox Design migrated to Figma and structured our cross-platform design system."

"How we built the Booking Design System (and how you can get a head start building yours)"

"How having a design system helped Skyscanner — and could help other businesses give themselves a makeover."

"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

Design System Frameworks

UI Prep Design System

Here at UI Prep, we obsess over every detail when it comes to building design system so you don't have to. Download the system to jump start your next project or use as a playground to learn best practices.

→ Learn more about UI Prep Design System
→ Preview the system in Figma
Weekly, practical tips to help you become a more confident designer.

Get 5 tips about Figma and design systems from me every Friday. Always free. No fluff.

Join 20k+ designers getting the newsletter.

Want more design insights like this?

See our full catalog of articles covering Figma tips and Design System best practices.

View All Articles