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

Best practices for documenting a design system
03:31 MIN

Best practices for documenting a design system

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

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

Improving design tooling and engineering handoff
03:50 MIN

Improving design tooling and engineering handoff

Shift Left On Accessibility - Geri Reid

Featured Partners

Related Videos

See all videos
Bridging the Gap
06:16

Bridging the Gap

Philipp Kremer

Design as an algorithm, not as a feature
39: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 project
13: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 challenges
29:44

Building a component library for modern challenges

Filip Rakowski

Bridging the gap between design and development
29:53

Bridging the gap between design and development

Jade Jiang & Noga Mann

Unlocking Seamless Collaboration: Design-First APIs for UI Components
28:35

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

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 library
19:46

Building a framework-independent component library

Tobias Scholz

Related Articles

View all articles
Jordan Cutler
A Guide to Public Speaking For Software Engineers
“Your technical skills are where they need to be, but you need to improve your communication.” - Your manager. This is one of the hardest pieces of feedback to hear as a software engineer. Why? Because you probably thought as a software engineer you ...
A Guide to Public Speaking For Software Engineers
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 
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.