Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Systems with React

Design Systems with React

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


Tony Ward

May 21, 2019

More Decks by Tony Ward

Other Decks in Programming


  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

  8. None
  9. None
  10. None
  11. None
  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

  16. Design Language ✅ + Shared Components + Documentation = Design

  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

  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!