Michael Siregar

Design Systems and how to develop consistent and scalable products with them

Your design system isn't just a style guide—it's a living product. Learn the five steps to build, maintain, and evolve one for scalable development.

Design Systems and how to develop consistent and scalable products with them
#1about 5 minutes

Understanding the core components of a design system

A design system is a single source of truth built on a style guide, a component library, and a pattern library.

#2about 2 minutes

Step 1: Convincing stakeholders with data-driven inventories

Create inventories of existing styles and components to highlight inconsistencies and redundancies, then convert these findings into numbers to get stakeholder buy-in.

#3about 2 minutes

Step 2: Researching user needs and auditing existing resources

Understand who will use the design system by interviewing them, auditing current processes, and creating a glossary of terms to align teams.

#4about 3 minutes

Step 3: Designing the style guide and component library

Choose your design tools and start by defining essential styles like colors and typography before moving on to creating your first components and patterns.

#5about 1 minute

Step 4: Crafting the system with code and documentation

Select the right technologies and frameworks, set up a CI/CD pipeline, and build out the libraries with tests and technical documentation.

#6about 3 minutes

Step 5: Maintaining and evolving the design system

Establish contribution models, create communication channels, find team ambassadors, and continuously measure success to ensure long-term adoption.

#7about 8 minutes

Documenting components with a live Storybook demo

Storybook helps document components by providing self-hosting, add-ons like Figma integration, and interactive stories for different component variants.

#8about 7 minutes

Q&A: Decoupling from tech and handling legacy systems

Discussion on using design tokens to remain technology-agnostic, inventorying existing systems to merge them, and creating stories for complex components.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Creating a cohesive user experience with design systems
15:48 MIN

Creating a cohesive user experience with design systems

Microfrontends at Scale

Best practices for documenting a design system
21:40 MIN

Best practices for documenting a design system

Microfrontends at Scale

Sharing UI components and ensuring design consistency
21:19 MIN

Sharing UI components and ensuring design consistency

Independently together: how micro-applications improve developer experience + app performance

Creating a shared language with design systems
12:16 MIN

Creating a shared language with design systems

Bridging the gap between design and development

Figma's evolution into a product development platform
00:31 MIN

Figma's evolution into a product development platform

Designing the Future of Human<>Agent Collaboration

Viewing design as an algorithm, not a feature
31:55 MIN

Viewing design as an algorithm, not a feature

Design as an algorithm, not as a feature

Using Storybook to document and refactor components
11:37 MIN

Using Storybook to document and refactor components

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Summary of breaking down design and development silos
52:47 MIN

Summary of breaking down design and development silos

Breaking Down Silos Between Design and Development

Featured Partners

Related Videos

See all videos
Bridging the Gap06:16

Bridging the Gap

Philipp Kremer

Design as an algorithm, not as a feature39:27

Design as an algorithm, not as a feature

Kaya Sohyun Kim

DB UX Design System – How we’ve open sourced our largest inner source project13:57

DB UX Design System – How we’ve open sourced our largest inner source project

Anna Schoderer & Maximilian Franzke

Building a component library for modern challenges29:44

Building a component library for modern challenges

Filip Rakowski

Bridging the gap between design and development29:53

Bridging the gap between design and development

Jade Jiang & Noga Mann

Leveraging Storybook for Component Driven Development outside of your classic Component Library.25:32

Leveraging Storybook for Component Driven Development outside of your classic Component Library.

Emma Britnor

Building a framework-independent component library19:46

Building a framework-independent component library

Tobias Scholz

Unlocking Seamless Collaboration: Design-First APIs for UI Components28:35

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

From learning to earning

Jobs that call for the skills explored in this talk.