Component-Driven Design Systems Workshop

https://component-driven.io

Transcript

1. Component-Driven
   Design Systems
   Workshop
   

   View Slide

2. component
   driven.io
   https://component-driven.io
   @okonetchnikov @iamsapegin
   @ComponentDriven
   

   View Slide

3. @okonetchnikov
   UI developer with an experience in both
   design and development who specializes in
   interaction design, design systems and
   modern frontend development.
   

   View Slide

4. UI engineer working with web
   technologies since 1999. Creator of react-
   styleguidist and component-driven-
   development
   @iamsapegin
   

   View Slide

5. bit.ly/cddwrkshp
   Workshop GitHub page
   

   View Slide

6. What’s on your mind?
   

   View Slide

7. Plan for today
   

   View Slide

8. Plan for today
   ✓ DS theory
   ✓ UI Inventory
   ✓ Introduction to CDD
   ✓ Design Tokens
   ✓ UI Primitives
   ✓ Layout & Whitespace Management
   ✓ UI Composition
   

   View Slide

9. Design language
   Typography Color
   Spacing
   UX
   

   View Slide

10. No whitespace Added whitespace
    Typography
    

    View Slide

11. Low contrast High contrast
    Color
    

    View Slide

12. Spacing
    No structure Structured content
    

    View Slide

13. Design language
    • Establishes the brand
    • Adds consistency
    • Improves accessibility
    

    View Slide

14. Brand
    

    View Slide

15. Dropbox Yandex.Disk
    Brand
    

    View Slide

16. Consistency
    

    View Slide

17. Accessibility
    

    View Slide

18. Accessibility
    

    View Slide

19. How do we enforce
    design language?
    

    View Slide

20. Design Systems
    

    View Slide

21. “Design system defines a set of design-
    related rules as a system of instructions
    that can be re-used across single or
    multiple products”
    

    View Slide

22. German government vs Austrian government
    

    View Slide

23. German federal government web-sites
    

    View Slide

24. German federal government web-sites
    

    View Slide

25. German federal government web-sites
    

    View Slide

26. Design system
    

    View Slide

27. Austrian federal government web-sites
    

    View Slide

28. Austrian federal government web-sites
    

    View Slide

29. Austrian federal government web-sites
    

    View Slide

30. Austrian federal government web-sites
    

    View Slide

31. No design system
    

    View Slide

32. Component-driven
    Design Systems
    

    View Slide

33. The Process
    1. Analyze & Plan
    2. Execute
    3. Maintain
    4. PROFIT!
    

    View Slide

34. 1. Analyze & Plan
    

    View Slide

35. Where to start
    1. Analyze & find problems (UI Inventory)
    2. Document
    3. Plan
    4. Execute!
    

    View Slide

36. UI inventory process
    

    View Slide

37. UI inventory process
    

    View Slide

38. UI inventory process
    

    View Slide

39. UI inventory process
    

    View Slide

40. Document
    

    View Slide

41. Plan
    

    View Slide

42. https://bit.ly/2U3hdss
    

    View Slide

43. 2. Execute
    Building styleguides
    

    View Slide

44. Styleguides
    

    View Slide

45. “Styleguide is a collection of rules,
    patterns and components that are re-
    usable across single or multiple
    products.”
    

    View Slide

46. https://vueds.com/example/#!/Design%20Tokens
    

    View Slide

47. https://material-ui-next.com/style/color/
    

    View Slide

48. https://www.lightningdesignsystem.com/design-tokens/
    

    View Slide

49. https://vueds.com/example/#!/Design%20Tokens?id=all
    

    View Slide

50. https://ant.design/components/button/
    

    View Slide

51. https://react-bootstrap.github.io/components/buttons/
    

    View Slide

52. https://www.lightningdesignsystem.com/components/avatar/
    

    View Slide

53. https://dialogs.github.io/dialog-web-components/
    

    View Slide

54. http://jxnblk.com/rebass/getting-started
    

    View Slide

55. http://blueprintjs.com/docs/v2/#icons
    

    View Slide

56. Good styleguides
    • A common language for designers, developers, PMs
    • Easy to use: good structure + relevant content
    • Styleguide = documentation
    • Easy to create & maintain
    • Always up-to-date
    

    View Slide

57. Styleguide generators
    

    View Slide

58. View Slide

59. https://storybook.js.org
    

    View Slide

60. View Slide

61. https://www.catalog.style
    

    View Slide

62. react-cosmos
    

    View Slide

63. https://github.com/react-cosmos/react-cosmos
    

    View Slide

64. View Slide

65. https://react.feedly.com
    

    View Slide

66. npm start
    

    View Slide

67. Directory structure for component-driven development
    

    View Slide

68. Design Tokens
    

    View Slide

69. –https://www.lightningdesignsystem.com/design-tokens/
    “Design tokens are the visual design
    atoms of the design system —
    specifically, they are named entities that
    store visual design attributes”
    

    View Slide

70. Typography scale
    a a a a a a a a a a a a a a a a a
    

    View Slide

71. http://webtypography.net/3.1.1
    

    View Slide

72. Naming
    • x-small small medium large x-large
    • xs, sm, md, lg, xl
    • xs s m l xl
    • 0, 1, 2, 3, 4, 5
    • alpha beta gamma delta epsilon
    

    View Slide

73. Linear progression Geometric progression
    Spacing scale
    

    View Slide

74. Spacing
    

    View Slide

75. https://design.lyft.com/re-approaching-color-9e604ba22c88
    Color palettes
    

    View Slide

76. https://www.colorbox.io
    

    View Slide

77. https://colorsnapper.com
    

    View Slide

78. Color tokens
    

    View Slide

79. ⚒ DesignTokens
    

    View Slide

80. UI Primitives
    

    View Slide

81. View Slide

82. Button
    

    View Slide

83. Label Button Icon
    Input
    Avatar
    

    View Slide

84. Label Button Icon
    Input
    Avatar
    

    View Slide

85. Login Form
    

    View Slide

86. Label Button Icon
    Input
    Avatar
    

    View Slide

87. Search Toolbar
    

    View Slide

88. Label Button Icon
    Input
    Avatar
    

    View Slide

89. ⚒ Primitives
    

    View Slide

90. Component variations
    
    
    

    View Slide

91. Component variations
    // Don't do this
    
    
    // Impossible state!
    
    

    View Slide

92. Component variations
    // Do this instead!
    
    
    

    View Slide

93. Accessing design tokens
    // Hard coded value
    styled.button`color: tomato;`
    

    View Slide

94. Accessing design tokens
    // Value from the static imported theme
    import {colors} from './theme.js';
    styled.button`color: ${colors.primary};`
    

    View Slide

95. Accessing design tokens
    // Value coming from the theme
    styled.button`
    color: ${props => props.theme.colors.primary};
    `
    

    View Slide

96. Accessing design tokens
    // Value coming from the theme
    (shorthand)
    import {themeGet} from 'styled-system';
    styled.button`
    color: ${themeGet('colors.primary')};
    `
    

    View Slide

97. API for design tokens
    import { color } from 'styled-system';
    const Text = styled.p`${color};`
    Text.defaultProps = {
    color: 'primary'
    }
    // Renders text with primary color
    
    // Renders text with secondary color
    
    https://styled-system.com/how-it-works
    

    View Slide

98. ⚒ Whitespace & Layout
    

    View Slide

99. UI Patterns
    

    View Slide

100. View Slide

101. –https://en.wikipedia.org/wiki/Design_pattern
     “A design pattern is the re-usable form of
     a solution to a design problem.”
     

     View Slide

102. A Pattern
     Language: Towns,
     Buildings,
     Construction
     Christopher Alexander
     

     View Slide

103. http://ui-patterns.com/patterns/PasswordStrengthMeter
     

     View Slide

104. https://react.feedly.com/#inputsuggestionlist
     

     View Slide

105. Patterns
     • A great way to communicate
     • Suitable for both designers & developers (and many
     others)
     • Solve particular design problems
     • Re-usable
     • …
     

     View Slide

106. 3. Maintain
     

     View Slide

107. Process
     Development Product
     Design
     

     View Slide

108. Process
     Product
     Design & Development
     

     View Slide

109. Process
     Product
     Design & Development Styleguide
     

     View Slide

110. Process
     Design & Development Design System
     

     View Slide

111. Process
     Design & Development Design System
     

     View Slide

112. Benefits of CDD
     • Develop in isolation
     • Faster feedback loop
     • See all possible states
     • Easier to refactor
     • Documentation!
     

     View Slide

113. Reasons for CDD
     • A common language for designers & developers
     • Enforce design language & design system
     • Consistent UI
     • Scales: single or multiple products
     • Up-to-date documentation
     

     View Slide

114. How to start?
     • Don’t ask for permission, just start!
     • Make a thing
     • Show it’s useful
     • Commit!
     

     View Slide

115. Discussion
     What problems are you facing…
     

     View Slide

116. Further reading
     

     View Slide

117. Atomic Design
     Brad Frost
     

     View Slide

118. Design Systems
     Alla Kholmatova
     

     View Slide

119. A Pattern
     Language: Towns,
     Buildings,
     Construction
     Christopher Alexander
     

     View Slide

120. The Elements of
     Typographic
     Style
     Robert Bringhurst
     

     View Slide

121. http://webtypography.net
     

     View Slide

122. 
     • https://www.styled-components.com
     • github.com/jxnblk/styled-system
     • https://github.com/rebassjs/grid
     • https://github.com/rebassjs/space
     • https://github.com/sapegin/stack-styled
     • github.com/jxnblk/macro-components
     

     View Slide

123. component
     driven.io
     https://component-driven.io
     @okonetchnikov @iamsapegin
     @ComponentDriven
     

     View Slide