Design Systems with React

I talk at a local meetup about design systems and their advantages

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