Design Systems with
React
YnotDraw @_ynotdraw
Tony Ward | Software Engineer @ LifeOmic
Slide 2
Slide 2 text
Design Language
+
Shared Components
+
Documentation
=
Design System
Slide 3
Slide 3 text
Design Language
Slide 4
Slide 4 text
Designer creates the “design
language” for your app
Slide 5
Slide 5 text
Create the voice of your
product
Slide 6
Slide 6 text
Design Elements
A defined set of options for:
• Typography sizes and weights
• Buttons
• Colors
• …
Slide 7
Slide 7 text
Typically these items have a
limited set of options
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Design Tools
Tools such as Sketch and Figma allow designers to create
these components, similar to components we have in React
Slide 13
Slide 13 text
Typically the primitive design
elements are composed together
to create other components
Slide 14
Slide 14 text
Notification is composed of
Typography and color palette
Slide 15
Slide 15 text
Mockups for a feature/product are
created by composing these
components together
Slide 16
Slide 16 text
Design Language ✅
+
Shared Components
+
Documentation
=
Design System
Slide 17
Slide 17 text
Shared Components
Slide 18
Slide 18 text
Component Examples
Primitive components every time you go to build an app?
• Typography sizes and weights
• Buttons
• Colors
• Inputs
• …
Slide 19
Slide 19 text
Your designer probably already
created these as part of their
design language
Slide 20
Slide 20 text
Go build them with React!
Slide 21
Slide 21 text
Advantage: Agility
Now you have a bucket of
components to build out features
quickly!
Slide 22
Slide 22 text
Separate Apps
Do you have separate apps under the
same product, that need to look and
feel as though they are the same app?
(Now made easier with the primitive components! Each app just imports the package.)
Slide 23
Slide 23 text
Maybe you want to go one step
deeper…
Slide 24
Slide 24 text
Don’t Reinvent the Wheel
Share components, utilities, etc. across product lines
Slide 25
Slide 25 text
Your app becomes pages composed of many
shared, consistent, and familiar components
Slide 26
Slide 26 text
Similar to designers,
building out a new
feature is just
composing existing
components together
Slide 27
Slide 27 text
Goal:
Have enough components to build a new feature
(Even better goal: have enough components to build a new product)
Slide 28
Slide 28 text
So you and your designer built a bunch of
components, how do people learn about them?
Slide 29
Slide 29 text
Design Language ✅
+
Shared Components ✅
+
Documentation
=
Design System
Documentation
• How to’s:
• Import
• Use
• Props available
• Use cases for components
• When to use A vs B
• Designers may do well at writing these sections
Slide 33
Slide 33 text
Design Language ✅
+
Shared Components ✅
+
Documentation ✅
=
Design System
Slide 34
Slide 34 text
Advantages
• Faster feature/product building
• UI/UX consistencies and
patterns
• Shared components with
design
• Shared “language” with design
Slide 35
Slide 35 text
Advantages
• Great for onboarding new devs
• Well-tested components
working across all browsers
Slide 36
Slide 36 text
How to Get Started
• Build your own from
scratch
• Build on top of MUI
• Has a ton of
components out of the
box that are very sane
• Can override styles to
get going quickly
Slide 37
Slide 37 text
Out in the Wild
• https://github.com/alexpate/awesome-design-systems
• Atlas Kit
• Duolingo
• GitHub Primer
• Audi UI Kit