WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
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

More from World Congress 2023

The year 3000, a brief history of Web Development thumbnail
25:30
over 2 years ago

The year 3000, a brief history of Web Development

Lorenzo Pieri

Demografie nutzen um jedem Bewerber das passende Angebot zu machen! thumbnail
8:52
almost 3 years ago

Demografie nutzen um jedem Bewerber das passende Angebot zu machen!

Nathalie Gierth

Guided Memory Management: Rust's Ownership Model thumbnail
0:18
almost 3 years ago

Guided Memory Management: Rust's Ownership Model

Stefan Baumgartner

Passwordless future: WebAuthn and Passkeys in practice thumbnail
32:32
almost 3 years ago

Passwordless future: WebAuthn and Passkeys in practice

Clemens Hübner

External Secrets Operator: the secrets management toolbox for self-sufficient teams thumbnail
30:07
almost 3 years ago

External Secrets Operator: the secrets management toolbox for self-sufficient teams

Moritz Johner

Building Reliable Serverless Applications with AWS CDK and Testing thumbnail
25:18
almost 3 years ago

Building Reliable Serverless Applications with AWS CDK and Testing

Raphael Manke

Upcoming sessions on this topic

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

From Prompt Engineering to Harness Engineering: Building Observable and Governed GenAI Systems

  • Lakshmi Devi Prakash

    JPMorgan Chase

    VP, Applied AI/ML Lead

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Supply Chain Security for the Everyday Engineer

  • Pradumna Saraf

    Kestra Technologies

    Quality Assurance Engineer

Open session

Teaching AI Coding Agents to Build It Right the First Time

  • Sajeetharan Sinnathurai

    Microsoft

    Principal Product Manager

Related videos

Bridging the Gap thumbnail
6:16
World Congress 2023 • almost 3 years ago

Bridging the Gap

Philipp Kremer

Bridging the gap between design and development thumbnail
29:53
World Congress 2024 • about 2 years ago

Bridging the gap between design and development

Jade Jiang, Noga Mann

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned thumbnail
28:13
World Congress 2022 • over 4 years ago

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Nathalia Rus

Leveraging Storybook for Component Driven Development outside of your classic Component Library. thumbnail
25:32
World Congress 2024 • about 2 years ago

Leveraging Storybook for Component Driven Development outside of your classic Component Library.

Emma Britnor

Unlocking Seamless Collaboration: Design-First APIs for UI Components thumbnail
28:35
LIVE • about 2 years ago

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

Typescript, React and Atomic Design - a match made in heaven thumbnail
40:05
LIVE • over 5 years ago

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.