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
Tweet

More Decks by Tony Ward

Other Decks in Programming

Transcript

  1. Design Systems with
    React
    YnotDraw @_ynotdraw
    Tony Ward | Software Engineer @ LifeOmic

    View Slide

  2. Design Language
    +
    Shared Components
    +
    Documentation
    =
    Design System

    View Slide

  3. Design Language

    View Slide

  4. Designer creates the “design
    language” for your app

    View Slide

  5. Create the voice of your
    product

    View Slide

  6. Design Elements
    A defined set of options for:

    • Typography sizes and weights

    • Buttons

    • Colors

    • …

    View Slide

  7. Typically these items have a
    limited set of options

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Design Tools
    Tools such as Sketch and Figma allow designers to create
    these components, similar to components we have in React

    View Slide

  13. Typically the primitive design
    elements are composed together
    to create other components

    View Slide

  14. Notification is composed of
    Typography and color palette

    View Slide

  15. Mockups for a feature/product are
    created by composing these
    components together

    View Slide

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

    View Slide

  17. Shared Components

    View Slide

  18. Component Examples
    Primitive components every time you go to build an app?

    • Typography sizes and weights

    • Buttons

    • Colors

    • Inputs

    • …

    View Slide

  19. Your designer probably already
    created these as part of their
    design language

    View Slide

  20. Go build them with React!

    View Slide

  21. Advantage: Agility
    Now you have a bucket of
    components to build out features
    quickly!

    View Slide

  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.)

    View Slide

  23. Maybe you want to go one step
    deeper…

    View Slide

  24. Don’t Reinvent the Wheel
    Share components, utilities, etc. across product lines

    View Slide

  25. Your app becomes pages composed of many
    shared, consistent, and familiar components

    View Slide

  26. Similar to designers,
    building out a new
    feature is just
    composing existing
    components together

    View Slide

  27. Goal:
    Have enough components to build a new feature
    (Even better goal: have enough components to build a new product)

    View Slide

  28. So you and your designer built a bunch of
    components, how do people learn about them?

    View Slide

  29. Design Language ✅
    +
    Shared Components ✅
    +
    Documentation
    =
    Design System

    View Slide

  30. Documentation

    View Slide

  31. Documentation Tools
    • Storybook (quick win)

    • Styleguidist

    • Mdx-docs

    • Custom docs app

    View Slide

  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


    View Slide

  33. Design Language ✅
    +
    Shared Components ✅
    +
    Documentation ✅
    =
    Design System

    View Slide

  34. Advantages
    • Faster feature/product building

    • UI/UX consistencies and
    patterns

    • Shared components with
    design

    • Shared “language” with design

    View Slide

  35. Advantages
    • Great for onboarding new devs

    • Well-tested components
    working across all browsers

    View Slide

  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

    View Slide

  37. Out in the Wild
    • https://github.com/alexpate/awesome-design-systems

    • Atlas Kit

    • Duolingo

    • GitHub Primer

    • Audi UI Kit

    View Slide

  38. Design Resource

    View Slide

  39. YnotDraw @_ynotdraw
    Thanks!

    View Slide