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
01:19 MIN
Creating a cohesive user experience with design systems
Microfrontends at Scale
03:31 MIN
Best practices for documenting a design system
Microfrontends at Scale
04:55 MIN
Creating a shared language with design systems
Bridging the gap between design and development
01:35 MIN
Summary of breaking down design and development silos
Breaking Down Silos Between Design and Development
02:32 MIN
Exploring the IBM Carbon Design System as an example
Building a framework-independent component library
01:08 MIN
Using Figma to design and standardize UI components
Bridging the Gap
01:40 MIN
Sharing UI components and ensuring design consistency
Independently together: how micro-applications improve developer experience + app performance
01:55 MIN
Solving design inconsistency with a shared UI kit
Destructuring Frontend monoliths with MicroFrontends
Featured Partners
Related Videos
06:16Bridging the Gap
Philipp Kremer
25:32Leveraging Storybook for Component Driven Development outside of your classic Component Library.
Emma Britnor
13:57DB UX Design System – How we’ve open sourced our largest inner source project
Anna Schoderer & Maximilian Franzke
19:46Building a framework-independent component library
Tobias Scholz
29:53Bridging the gap between design and development
Jade Jiang & Noga Mann
29:44Building a component library for modern challenges
Filip Rakowski
28:35Unlocking Seamless Collaboration: Design-First APIs for UI Components
Lucien Immink
29:11Design Principles For The Web
Jeremy Keith
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Tech Solutions Gmbh
GIT
HTML
Vue.js