Michael Siregar
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
00:06 MIN
Bridging the gap between design and development
Boost Productivity with AI: Figma & Playwright MCP Workflows - Aris Markogiannakis
15:48 MIN
Creating a cohesive user experience with design systems
Microfrontends at Scale
21:40 MIN
Best practices for documenting a design system
Microfrontends at Scale
12:16 MIN
Creating a shared language with design systems
Bridging the gap between design and development
21:19 MIN
Sharing UI components and ensuring design consistency
Independently together: how micro-applications improve developer experience + app performance
52:47 MIN
Summary of breaking down design and development silos
Breaking Down Silos Between Design and Development
00:31 MIN
Figma's evolution into a product development platform
Designing the Future of Human<>Agent Collaboration
17:14 MIN
Exploring the IBM Carbon Design System as an example
Building a framework-independent component library
Featured Partners
Related Videos
06:16Bridging the Gap
Philipp Kremer
39:27Design as an algorithm, not as a feature
Kaya Sohyun Kim
13:57DB UX Design System – How we’ve open sourced our largest inner source project
Anna Schoderer & Maximilian Franzke
29:44Building a component library for modern challenges
Filip Rakowski
29:53Bridging the gap between design and development
Jade Jiang & Noga Mann
25:32Leveraging Storybook for Component Driven Development outside of your classic Component Library.
Emma Britnor
19:46Building a framework-independent component library
Tobias Scholz
28:35Unlocking Seamless Collaboration: Design-First APIs for UI Components
Lucien Immink
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Sr Product Experience Designer - Design System (Strato) - Data Visualization
Dynatrace GmbH
Linz, Austria
Senior
Figma
Product Management
Graduation: Visual Modelling Techniques for Software Architecture Documentation
Vanderlande Industries
Veghel, Netherlands
C++
Python
Software Architecture