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.

job ad

Saby Company
Delebio, Italy

Intermediate

d

Saby Company
Delebio, Italy

Junior

Matching moments

Using structured design data for better code generation
23:11 MIN

Using structured design data for better code generation

aa

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

Creating a shared language with design systems
12:16 MIN

Creating a shared language with design systems

Bridging the gap between design and development

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

Exploring the IBM Carbon Design System as an example
17:14 MIN

Exploring the IBM Carbon Design System as an example

Building a framework-independent component library

Using Figma to design and standardize UI components
02:37 MIN

Using Figma to design and standardize UI components

Bridging the Gap

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

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

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

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

Building a component library for modern challenges29:44

Building a component library for modern challenges

Filip Rakowski

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
AP
Anto Pranjić
11 Tips to Make The Most Out of Your First World Congress 
The world’s most awesome event for developers is taking place in less than a month! It’s been far too long since the last time we met in person, but that’s only going to make this year’s WeAreDevelopers World Congress a truly special experience. Conf...
11 Tips to Make The Most Out of Your First World Congress 
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!

From learning to earning

Jobs that call for the skills explored in this talk.