Building Design Systems With React

Achieve DS scale and adoption via independent components and a composable architecture — with examples.

A few weeks ago the React team has revealed an exciting feature that’s currently still under development: React Server Components. This “feature” will not only introduce a new type of components for the server but rather a completely new taxonomy of React components.

Composing React buttons for design systems with the Base and Variant pattern.

Build a React design system to speed and standardize web application development.

A roundup of the best Storybook techniques from leading design systems.

Design is complex - and ever increasingly so. It requires full collaboration between all teams and professions involved in the process. A shared design language makes teams work together more effectively.

Using React propTypes to bring design and development closer together.

Design systems come in all shapes and sizes and can encompass a wide range of skillsets and roles within an organization. As a front-end developer, I'd like to share some of the tooling that I've found to be helpful when building out the components and code portion of a design system in modern applications.

Sprout Social’s design system, Seeds, has done a lot of growing up since it launched in October of last year. When we launched, our system was home to four categories of guidelines and principles: Brand, Visual, Writing, and Product. A healthy showing, for sure, but something was suspiciously missing — components.

Uber assembled a dedicated design and engineering team to come up with a universal system, which resulted in the Base Web design system.

I’m going to show you how in Typeform we are battling tech debt, building straight forward processes and infrastructure, to help our teams move forward as our design system evolves.

Creating design systems with great documentation and examples can be a pain. MDX makes it far less painful — on this episode, Kathleen McMahon joins to teach us how to create excellent documentation for a design system using MDX and Gatsby.

This session explores creating living documentation for design systems, ensuring consistent documentation at all times using TypeScript.

This practical guide shows how to apply existing development tools to your system and what is the value you can get.

In this talk, we'll look at the current state of design and development, and where we could go—if we're willing to push for it.

In this talk, you'll learn how to pitch a design system to your boss, rarely discussed technical caveats and challenges, and how to set your design system up for success from the start.

This talk will take you through our journey to Polaris. An overview of what a design system is, why you would want one, and how we built ours at Shopify. I will give you a behind the scenes look into the technologies and patterns we used to build the system. React, TypeScript, CSS modules, markdown, and how they all come together to build something that both designers and developers will enjoy using.

Building high quality interfaces that are consistent across products is hard. Fear not, Design Systems with React is the solution!

In this course, you'll create a design system from scratch and learn the foundational design concepts that go into one. You'll design your components using Figma, then take those designs and turn them into coded components using React.

This is a course built specifically for designers looking to use React for interface design.

Varya talks about how a component library turns into a design system and shares some of her experience. She talks about how the concepts in a design system are influenced and created by the existing interface.

John and Dan are joined by Sara Vieira to discuss the benefits of creating style guides for the apps you're building in React.

An enterprise-class UI design language and React implementation.

Responsive, theme-based style props for building design systems with React.

Evergreen React UI Framework by Segment.