The Cohesive Workflow for Creating a Wysiwyg Design System

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.

Maintaining a unified design language contract between Figma and code is crucial in today's fast-paced product development environment. Without this alignment, the disconnect between designers and developers can lead to inconsistencies in product design, failing to achieve pixel-perfect precision.

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

design systems UX UI

Kamlesh Chandnani

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 Conference 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 Conference 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

Workshops on related topic

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

React Advanced Conference 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