From Figma to TV & Beyond: Scaling React UI with Design Tokens & MCP

This talk is confirmed. The time of the talk will be announced soon.

The recording will be published after editing. Multipass and Full ticket holders have early access.

How do you scale a React UI system from Smart TVs to refrigerators, washing machines, and more while keeping everything consistent? This talk shares our real-world experience extending a React-based UI component system (initially built for webOS TV) into a multi-platform design system in collaboration with Figma. Moving beyond traditional handoffs, you will learn how we connected design and development to "design once and scale everywhere" using a robust Design Token architecture, CI/CD automation, and an AI workflow that leverages the Figma MCP to generate exact component code.

This talk has been presented at React Summit 2026, check out the latest edition of this React Conference.

design systems

Seungho Park

Video transcription, chapters and summary will be available later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Design Systems: Walking the Line Between Flexibility and Consistency

React Advanced 2021

47 min

Design Systems: Walking the Line Between Flexibility and Consistency

Top Content

Shruti Balasa

Tech Educator

This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.

design systems css react design systems tailwind react

Walking the Line Between Flexibility and Consistency in Component Libraries

React Summit 2022

27 min

Walking the Line Between Flexibility and Consistency in Component Libraries

Siddharth Kshetrapal

GitHub

This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.

design systems component library

Find Out If Your Design System Is Better Than Nothing

React Summit 2022

20 min

Find Out If Your Design System Is Better Than Nothing

Arseny Smoogly

Solution Architect @ Rangle

Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.

case study design systems react components component library

Type-safe Styling for React Component Packages: Vanilla Extract CSS

React Advanced 2023

19 min

Type-safe Styling for React Component Packages: Vanilla Extract CSS

Watch video: Type-safe Styling for React Component Packages: Vanilla Extract CSS

Negar Jamalifard

Frontend Developer

Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

typescript design systems css css-in-js vanilla react

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

JSNation 2023

10 min

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Hidde de Vries

Web Standards Specialist

The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.

design systems accessibility

Workshops on related topic

From Chaos to Clarity: Managing Agentic System Complexity in Cloud-Native FinTech

TechLead Conference 2025: AI in Orgs

49 min

From Chaos to Clarity: Managing Agentic System Complexity in Cloud-Native FinTech

Workshop

Sibasis Padhi

Overview: AI adoption brings system complexity, especially when autonomy, orchestration, and cloud-native microservices collide. Based on my published research and enterprise experience, this workshop breaks down the complexity of deploying agentic systems responsibly. This workshop is aimed at senior engineers who are navigating cloud-native architectures while introducing autonomous AI components, without a clear blueprint.Contents:1. The New Complexity Stack a) Microservices, AI, and third-party code generators b) Where system chaos starts and why it escalates
2. Understanding Agentic AI Behavior a) Autonomy, memory, and hallucination risk b) Real-world examples from financial decision support
3. Design Patterns for Clarity a) Guardrails for system observability b) Tradeoffs: orchestration vs code generation
4. Scalability Without Burnout a) What senior engineers must lead: governance, ethics, reliability b) Designing systems that scale safely under load
5. Takeaways a) Agentic adoption roadmap b) How to test and monitor non-deterministic AI c) Alignment with team velocity and business outcomes

design systems

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems

React Advanced 2022

118 min

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems

Workshop

Richard Moss

In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.
We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.
Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React

react design systems