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!

Ea26ebbe66c3bb6afb5f711cfe766dff?s=128

Siddharth Kshetrapal

March 19, 2018
Tweet

Transcript

  1. OUR FRONTEND WORKFLOW

  2. siddharthkp

  3. @siddharthkp

  4. youtube.com/siddharthkpshow

  5. None
  6. OUR FRONTEND WORKFLOW IS BROKEN

  7. IS BROKEN

  8. QUALITY

  9. None
  10. None
  11. None
  12. CONSISTENCY

  13. None
  14. None
  15. COMMUNICATION

  16. HAND OFF

  17. None
  18. None
  19. None
  20. HAND OFF

  21. SOLUTION?

  22. 2011

  23. None
  24. None
  25. None
  26. None
  27. None
  28. LEAKY ABSTRACTION

  29. COMPONENT IS THE RIGHT ABSTRACTION

  30. None
  31. None
  32. None
  33. design systems

  34. None
  35. Karri Saarinen
 Design Language System Lead @Airbnb Set of shared

    and integrated principles and patterns that define the overall design of a product
  36. @NateBaldwinArt

  37. Technical stuff

  38. TOKENS

  39. SPACING

  40. BASE
 COLORS

  41. BRAND
 GUIDELINES

  42. TOKENS

  43. COMPONENT LIBRARY

  44. None
  45. API

  46. compound components

  47. API

  48. API

  49. API

  50. API

  51. DOCUMENTATION IS THE PRODUCT

  52. None
  53. None
  54. DESIGN DECISIONS BAKED IN SYSTEM


  55. None
  56. None
  57. None
  58. SYNCED DESIGN ASSETS

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

  60. Component Symbol prop override

  61. PRO TIPS

  62. #1 Consistency over Flexibility
 #2 Build abstractions but ship all

    the building blocks
 #3 Adoption is the only metric that matters.
  63. None
  64. HOW DO YOU CONVINCE YOUR COMPANY?

  65. PEOPLE RUIN EVERYTHING

  66. #1 Show people what’s wrong
 #2 Speak their language #3

    Build support from developers
  67. siddharthkp github.com/auth0/cosmos