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!

Transcript

1. OUR FRONTEND WORKFLOW
2. siddharthkp
3. @siddharthkp
4. youtube.com/siddharthkpshow
6. ❤
7. OUR FRONTEND WORKFLOW IS BROKEN
8. IS BROKEN
9. QUALITY
13. CONSISTENCY
16. COMMUNICATION
17. HAND OFF
21. HAND OFF
22. SOLUTION?
29. LEAKY ABSTRACTION
30. COMPONENT IS THE RIGHT ABSTRACTION
34. design systems
36. Karri Saarinen
 Design Language System Lead @Airbnb Set of shared and integrated principles and patterns that define the overall design of a product
37. @NateBaldwinArt
38. Technical stuff
39. TOKENS
40. SPACING
41. BASE
 COLORS
42. BRAND
 GUIDELINES
43. TOKENS
44. COMPONENT LIBRARY
46. API
47. compound components
48. API
49. API
50. API
51. API
52. DOCUMENTATION IS THE PRODUCT
55. DESIGN DECISIONS BAKED IN SYSTEM

59. SYNCED DESIGN ASSETS
60. airbnb/react-sketchapp brainly/html-sketchapp
61. Component Symbol prop override
62. PRO TIPS
63. #1 Consistency over Flexibility
 #2 Build abstractions but ship all the building blocks
 #3 Adoption is the only metric that matters.
65. HOW DO YOU CONVINCE YOUR COMPANY?
66. PEOPLE RUIN EVERYTHING
67. #1 Show people what’s wrong
 #2 Speak their language #3 Build support from developers
68. siddharthkp github.com/auth0/cosmos