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 full-size slide

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

    View full-size slide

  3. Design Language

    View full-size slide

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

    View full-size slide

  5. Create the voice of your
    product

    View full-size slide

  6. Design Elements
    A defined set of options for:

    • Typography sizes and weights

    • Buttons

    • Colors

    • …

    View full-size slide

  7. Typically these items have a
    limited set of options

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Notification is composed of
    Typography and color palette

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Shared Components

    View full-size slide

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

    • Typography sizes and weights

    • Buttons

    • Colors

    • Inputs

    • …

    View full-size slide

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

    View full-size slide

  16. Go build them with React!

    View full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. Maybe you want to go one step
    deeper…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Documentation

    View full-size slide

  27. Documentation Tools
    • Storybook (quick win)

    • Styleguidist

    • Mdx-docs

    • Custom docs app

    View full-size slide

  28. 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 full-size slide

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

    View full-size slide

  30. Advantages
    • Faster feature/product building

    • UI/UX consistencies and
    patterns

    • Shared components with
    design

    • Shared “language” with design

    View full-size slide

  31. Advantages
    • Great for onboarding new devs

    • Well-tested components
    working across all browsers

    View full-size slide

  32. 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 full-size slide

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

    • Atlas Kit

    • Duolingo

    • GitHub Primer

    • Audi UI Kit

    View full-size slide

  34. Design Resource

    View full-size slide

  35. YnotDraw @_ynotdraw
    Thanks!

    View full-size slide