I talk at a local meetup about design systems and their advantages
Design Systems withReactYnotDraw @_ynotdrawTony Ward | Software Engineer @ LifeOmic
View Slide
Design Language+Shared Components+Documentation=Design System
Design Language
Designer creates the “designlanguage” for your app
Create the voice of yourproduct
Design ElementsA defined set of options for:• Typography sizes and weights• Buttons• Colors• …
Typically these items have alimited set of options
Design ToolsTools such as Sketch and Figma allow designers to createthese components, similar to components we have in React
Typically the primitive designelements are composed togetherto create other components
Notification is composed ofTypography and color palette
Mockups for a feature/product arecreated by composing thesecomponents together
Design Language ✅+Shared Components+Documentation=Design System
Shared Components
Component ExamplesPrimitive components every time you go to build an app?• Typography sizes and weights• Buttons• Colors• Inputs• …
Your designer probably alreadycreated these as part of theirdesign language
Go build them with React!
Advantage: AgilityNow you have a bucket ofcomponents to build out featuresquickly!
Separate AppsDo you have separate apps under thesame product, that need to look andfeel 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 stepdeeper…
Don’t Reinvent the WheelShare components, utilities, etc. across product lines
Your app becomes pages composed of manyshared, consistent, and familiar components
Similar to designers,building out a newfeature is justcomposing existingcomponents 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 ofcomponents, 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 andpatterns• Shared components withdesign• Shared “language” with design
Advantages• Great for onboarding new devs• Well-tested componentsworking across all browsers
How to Get Started• Build your own fromscratch• Build on top of MUI• Has a ton ofcomponents out of thebox that are very sane• Can override styles toget going quickly
Out in the Wild• https://github.com/alexpate/awesome-design-systems• Atlas Kit• Duolingo• GitHub Primer• Audi UI Kit
Design Resource
YnotDraw @_ynotdrawThanks!