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
01:19 MIN

Creating a cohesive user experience with design systems

Microfrontends at Scale

Creating a shared language with design systems
04:55 MIN

Creating a shared language with design systems

Bridging the gap between design and development

Best practices for documenting a design system
03:31 MIN

Best practices for documenting a design system

Microfrontends at Scale

Summary of breaking down design and development silos
01:35 MIN

Summary of breaking down design and development silos

Breaking Down Silos Between Design and Development

Exploring the IBM Carbon Design System as an example
02:32 MIN

Exploring the IBM Carbon Design System as an example

Building a framework-independent component library

Sharing UI components and ensuring design consistency
01:40 MIN

Sharing UI components and ensuring design consistency

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

Using Figma to design and standardize UI components
01:08 MIN

Using Figma to design and standardize UI components

Bridging the Gap

Documenting your component library with Storybook
04:35 MIN

Documenting your component library with Storybook

Typescript, React and Atomic Design - a match made in heaven

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

Building a framework-independent component library19:46

Building a framework-independent component library

Tobias Scholz

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

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

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

Related Articles

View all articles
DC
Daniel Cranney
Why Attend a Developer Event?
Modern software engineering moves too fast for documentation alone. Attending a world-class event is about shifting from tactical execution to strategic leadership. Skill Diversification: Break out of your specific tech stack to see how the industry...
Why Attend a Developer Event?

From learning to earning

Jobs that call for the skills explored in this talk.