Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design Systems with React
Search
Tony Ward
May 21, 2019
Programming
0
200
Design Systems with React
I talk at a local meetup about design systems and their advantages
Tony Ward
May 21, 2019
Tweet
Share
More Decks by Tony Ward
See All by Tony Ward
EmberConf2018: Toyota's Shared Component Library
ynotdraw
0
800
Other Decks in Programming
See All in Programming
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
0
130
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
170
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
790
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.2k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
140
定理証明プラットフォーム lapisla.net
abap34
1
670
最近のVS Codeで気になるニュース 2025/01
74th
1
240
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.6k
Amazon Nova Reelの可能性
hideg
0
260
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
300
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
150
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
Mobile First: as difficult as doing things right
swwweet
222
9.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Optimizing for Happiness
mojombo
376
70k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Side Projects
sachag
452
42k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Why Our Code Smells
bkeepers
PRO
335
57k
Transcript
Design Systems with React YnotDraw @_ynotdraw Tony Ward | Software
Engineer @ LifeOmic
Design Language + Shared Components + Documentation = Design System
Design Language
Designer creates the “design language” for your app
Create the voice of your product
Design Elements A defined set of options for: • Typography
sizes and weights • Buttons • Colors • …
Typically these items have a limited set of options
None
None
None
None
Design Tools Tools such as Sketch and Figma allow designers
to create these components, similar to components we have in React
Typically the primitive design elements are composed together to create
other components
Notification is composed of Typography and color palette
Mockups for a feature/product are created by composing these components
together
Design Language ✅ + Shared Components + Documentation = Design
System
Shared Components
Component Examples Primitive components every time you go to build
an app? • Typography sizes and weights • Buttons • Colors • Inputs • …
Your designer probably already created these as part of their
design language
Go build them with React!
Advantage: Agility Now you have a bucket of components to
build out features quickly!
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.)
Maybe you want to go one step deeper…
Don’t Reinvent the Wheel Share components, utilities, etc. across product
lines
Your app becomes pages composed of many shared, consistent, and
familiar components
Similar to designers, building out a new feature is just
composing existing components together
Goal: Have enough components to build a new feature (Even
better goal: have enough components to build a new product)
So you and your designer built a bunch of components,
how do people learn about them?
Design Language ✅ + Shared Components ✅ + Documentation =
Design System
Documentation
Documentation Tools • Storybook (quick win) • Styleguidist • Mdx-docs
• Custom docs app
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
Design Language ✅ + Shared Components ✅ + Documentation ✅
= Design System
Advantages • Faster feature/product building • UI/UX consistencies and patterns
• Shared components with design • Shared “language” with design
Advantages • Great for onboarding new devs • Well-tested components
working across all browsers
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
Out in the Wild • https://github.com/alexpate/awesome-design-systems • Atlas Kit •
Duolingo • GitHub Primer • Audi UI Kit
Design Resource
YnotDraw @_ynotdraw Thanks!