Design Systems of a Down: Steal this Guide!

Remember Atomic Design? It's been a while since we started talking about Design Systems. They're supposed to solve our interfaces inconsistencies issues, as a single source of truth. But do you know well how to build and use them, from a developer perspective?

Here's your ultimate guide to Design Systems, for Devs! From the fundamentals of Design Tokens definition, to how to build advanced versatile layouts. You'll learn all best practices, tips & tricks, components splicing strategies, from this comprehensive step--step handbook talk.

Never be lost again in front of a creating Design System from scratch!

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

design systems

m4dz

25 min

02 Sep, 2021

Comments

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

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 Developer, Netherlands

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

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

Workshops on related topic

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