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

We need to talk about our frontend workflow

We need to talk about our frontend workflow

Building high quality interfaces that are consistent across products is hard. Fear not, Design Systems with React is the solution!

Siddharth Kshetrapal

March 19, 2018
Tweet

More Decks by Siddharth Kshetrapal

Other Decks in Programming

Transcript

  1. OUR
    FRONTEND
    WORKFLOW

    View full-size slide

  2. @siddharthkp

    View full-size slide

  3. youtube.com/siddharthkpshow

    View full-size slide

  4. OUR
    FRONTEND
    WORKFLOW
    IS BROKEN

    View full-size slide

  5. COMMUNICATION

    View full-size slide

  6. LEAKY ABSTRACTION

    View full-size slide

  7. COMPONENT
    IS THE
    RIGHT
    ABSTRACTION

    View full-size slide

  8. design
    systems

    View full-size slide

  9. Karri Saarinen

    Design Language System Lead @Airbnb
    Set of shared and integrated
    principles and patterns that define
    the overall design of a product

    View full-size slide

  10. @NateBaldwinArt

    View full-size slide

  11. Technical
    stuff

    View full-size slide

  12. BASE

    COLORS

    View full-size slide

  13. BRAND

    GUIDELINES

    View full-size slide

  14. COMPONENT
    LIBRARY

    View full-size slide

  15. compound
    components

    View full-size slide

  16. DOCUMENTATION
    IS THE
    PRODUCT

    View full-size slide

  17. DESIGN
    DECISIONS
    BAKED IN
    SYSTEM


    View full-size slide

  18. SYNCED
    DESIGN
    ASSETS

    View full-size slide

  19. airbnb/react-sketchapp brainly/html-sketchapp

    View full-size slide

  20. Component Symbol
    prop override

    View full-size slide

  21. #1 Consistency over Flexibility

    #2 Build abstractions but ship
    all the building blocks

    #3 Adoption is the only metric
    that matters.

    View full-size slide

  22. HOW DO YOU CONVINCE
    YOUR COMPANY?

    View full-size slide

  23. PEOPLE RUIN EVERYTHING

    View full-size slide

  24. #1 Show people what’s wrong

    #2 Speak their language
    #3 Build support from developers

    View full-size slide

  25. siddharthkp github.com/auth0/cosmos

    View full-size slide