Building Design Systems With React

Articles & Tutorials

Building a React Design System for Adoption and Scale (blog.bitsrc.io)
May 12, 2021
Achieve DS scale and adoption via independent components and a composable architecture — with examples.
  • Eden Ella
Design Systems with React’s Server, Shared and Client Components (blog.bitsrc.io)
Jan 06, 2021
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.
  • Alicia Jones
Design Systems: React Buttons with the Base + Variant Pattern (blog.bitsrc.io)
Jul 20, 2020
Composing React buttons for design systems with the Base and Variant pattern.
  • Aditya Agarwal
Building a React Component Design System (blog.bitsrc.io)
May 14, 2020
Build a React design system to speed and standardize web application development.
  • Jonathan Saring
How design systems use Storybook (medium.com)
Feb 11, 2020
A roundup of the best Storybook techniques from leading design systems.
  • Dominic Nguyen
Why (not) make a design system? (react.christmas)
Dec 17, 2019
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.
  • Kjell Arne Brødreskift
Design Systems: Embedding UI Design Patterns in React Components (blog.bitsrc.io)
Oct 28, 2019
Using React propTypes to bring design and development closer together.
  • Eden Ella
The Modern Front-End Design System Stack (jxnblk.com)
Jul 18, 2019
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.
  • Brent Jackson
How we built a component library that people actually enjoy using (medium.com)
Jun 26, 2019
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.
  • Chase McCoy
Introducing Base Web, Uber’s New Design System for Building Websites in React (eng.uber.com)
Apr 16, 2019
Uber assembled a dedicated design and engineering team to come up with a universal system, which resulted in the Base Web design system.
  • Nadiia Dmytrenko
  • Chase Starr
  • Gergely Nemeth

Video Guides & Talks

Paving the adoption path of your Design System for engineers (youtube.com)
Oct 03, 2019
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.
  • Jeremias Menichelli
Design systems and MDX in Gatsby (youtube.com)
Aug 16, 2019
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.
  • Jason Lengstorf
  • Kathleen McMahon
Scalable Design Systems with TypeScript (youtube.com)
May 01, 2019
This session explores creating living documentation for design systems, ensuring consistent documentation at all times using TypeScript.
  • Tejas Kumar
A practical guide to building your design system infrastructure (youtube.com)
May 01, 2019
This practical guide shows how to apply existing development tools to your system and what is the value you can get.
  • Varya Stepanova
Designing with React (youtube.com)
Apr 24, 2019
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.
  • Mark Dalgleish
Secrets to a Successful Design System (youtube.com)
Dec 17, 2018
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.
  • Monica Lent
Nordic.js 2018 - Building a Design System in React (youtube.com)
Dec 12, 2018
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.
  • Dominic McPhee
We Need To Talk About Our Frontend Workflow (youtube.com)
Mar 20, 2018
Building high quality interfaces that are consistent across products is hard. Fear not, Design Systems with React is the solution!

Courses & Video Series

Design Systems with React & Storybook (frontendmasters.com)
May 12, 2020
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.
  • Emma Bostian
React for Design (react.design)
Feb 11, 2019
This is a course built specifically for designers looking to use React for interface design.
  • Philip Davis

Podcast Episodes

Design Systems with Varya Stepanova (devchat.tv)
Jul 02, 2019
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.
Style Guides in React with Sara Vieira (realtalkjavascript.simplecast.fm)
Jan 22, 2019
John and Dan are joined by Sara Vieira to discuss the benefits of creating style guides for the apps you're building in React.

Libraries

antd (ant.design)43748
v3.21.4
Aug 09, 2019
An enterprise-class UI design language and React implementation.
  • Benjy Cui
  • Wei Zhu
styled-system (jxnblk.com)3358
v5.0.21
Aug 08, 2019
Responsive, theme-based style props for building design systems with React.
  • Brent Jackson
  • John Otander
evergreen-ui (evergreen.segment.com)7561
v4.18.1
Jul 10, 2019
Evergreen React UI Framework by Segment.
  • Jeroen Ransijn
  • Roland Warmerdam