World Congress 2023 • Aug 11, 2023

Design Systems and how to develop consistent and scalable products with them

Michael Siregar

Building a comprehensive design system before your MVP demands high upfront investment, but it prevents massive technical debt. Discover how to scale efficiently using Figma, React, and Storybook.

Pause
Mute Enter Fullscreen
#1 about 3 min

Introduction and agenda overview

An overview of the presentation covering design system terms, implementation steps, and tools.

#2 about 1 min

Defining the core design system components

A breakdown of the essential parts of a design system including style guides, components, and patterns.

#3 about 2 min

Building a style guide and design tokens

How to establish visual aspects, principles, and strict naming conventions for design tokens.

#4 about 2 min

Creating reusable component libraries

Collecting code snippets, design assets, and usage principles into reusable user interface elements.

#5 about 2 min

Establishing a design pattern library

Formulating reusable design solutions to solve specific interaction problems and guide developer behavior.

#6 about 3 min

Convincing stakeholders to adopt a system

How to audit existing interfaces and translate inconsistencies into business cases to win stakeholder support.

#7 about 3 min

Conducting user and process research

Collecting user insights, understanding current deployment workflows, and auditing existing resources.

#8 about 3 min

Designing tools, guides, and components

Choosing the right design tools and incrementally building style guides, components, and patterns.

#9 about 2 min

Engineering and documenting the system

Selecting front-end frameworks, setting up deployment pipelines, and building functional libraries.

#10 about 3 min

Maintaining and evolving the design system

Strategies for ongoing collaboration, measuring workflow success, and proactively adapting the living system.

#11 about 3 min

Documenting components using Storybook

Leveraging Storybook for interactive design documentation, workflow testing, and seamless interface integration.

#12 about 6 min

Interactive Storybook and Figma demonstration

A developer walkthrough of a Storybook codebase, showcasing functional component variants and design handoff views.

#13 about 8 min

Audience Q&A on implementation challenges

Addressing developer questions around platform lock-in, legacy systems compatibility, rendering variants, and upfront project investments.

Matching moments

4:23 min

Building a framework-agnostic design system with web components

Manuel Mauky · World Congress 2023

4:48 min

Creating a shared language through design systems

Jade Jiang Jade Jiang +1 · World Congress 2024

10:09 min

Transitioning from graphic design to large scale frontend architecture

Erasmo Hernandez Erasmo Hernandez · World Congress 2026 Europe

1:42 min

Adopting design systems and detangling business logic

Nathalia Rus · World Congress 2022

3:06 min

Coordinating design system rollouts across decoupled software teams

Josh Goldberg · World Congress 2021

1:59 min

Documenting component libraries effectively using interactive development tools

Josh Goldberg · World Congress 2021