Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Design Systems with React
Tony Ward
May 21, 2019
Programming
0
32
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
560
Other Decks in Programming
See All in Programming
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
32
13k
Rに管理されてみる
kazutan
0
260
Introduction to Property-Based Testing @ COSCUP 2022
cybai
1
150
レビュー駆動学習のススメ_StaPy#83
soogie
0
320
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
oniak3ibm
PRO
0
200
Getting Started With Data Structures
adoranwodo
1
270
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
380
Atomic Design とテストの○○な話
takfjp
2
820
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.7k
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
findyinc
7
2.7k
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
owaspkansai
0
300
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
turamy
1
210
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
296
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.9k
Done Done
chrislema
174
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
15
3.8k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.9k
How to Ace a Technical Interview
jacobian
267
21k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
What the flash - Photography Introduction
edds
62
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
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!