Design Systems with React

I talk at a local meetup about design systems and their advantages

Transcript

1. Design Systems with React YnotDraw @_ynotdraw Tony Ward | Software Engineer @ LifeOmic
2. Design Language + Shared Components + Documentation = Design System
3. Design Language
4. Designer creates the “design language” for your app
5. Create the voice of your product
6. Design Elements A defined set of options for: • Typography sizes and weights • Buttons • Colors • …
7. Typically these items have a limited set of options
12. Design Tools Tools such as Sketch and Figma allow designers to create these components, similar to components we have in React
13. Typically the primitive design elements are composed together to create other components
14. Notification is composed of Typography and color palette
15. Mockups for a feature/product are created by composing these components together
16. Design Language ✅ + Shared Components + Documentation = Design System
17. Shared Components
18. Component Examples Primitive components every time you go to build an app? • Typography sizes and weights • Buttons • Colors • Inputs • …
19. Your designer probably already created these as part of their design language
20. Go build them with React!
21. Advantage: Agility Now you have a bucket of components to build out features quickly!
22. 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.)
23. Maybe you want to go one step deeper…
24. Don’t Reinvent the Wheel Share components, utilities, etc. across product lines
25. Your app becomes pages composed of many shared, consistent, and familiar components
26. Similar to designers, building out a new feature is just composing existing components together
27. Goal: Have enough components to build a new feature (Even better goal: have enough components to build a new product)
28. So you and your designer built a bunch of components, how do people learn about them?
29. Design Language ✅ + Shared Components ✅ + Documentation = Design System
30. Documentation
31. Documentation Tools • Storybook (quick win) • Styleguidist • Mdx-docs • Custom docs app
32. 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

33. Design Language ✅ + Shared Components ✅ + Documentation ✅ = Design System
34. Advantages • Faster feature/product building • UI/UX consistencies and patterns • Shared components with design • Shared “language” with design
35. Advantages • Great for onboarding new devs • Well-tested components working across all browsers
36. 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
37. Out in the Wild • https://github.com/alexpate/awesome-design-systems • Atlas Kit • Duolingo • GitHub Primer • Audi UI Kit
38. Design Resource
39. YnotDraw @_ynotdraw Thanks!