Component-Driven Design Systems Workshop

Transcript

1. Component-Driven Design Systems Workshop

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

3. @okonetchnikov UI developer with an experience in both design and

   development who specializes in interaction design, design systems and modern frontend development.

4. UI engineer working with web technologies since 1999. Creator of

   react- styleguidist and component-driven- development @iamsapegin

5. bit.ly/cddwrkshp Workshop GitHub page

6. What’s on your mind?

7. Plan for today

8. Plan for today ✓ DS theory ✓ UI Inventory ✓

   Introduction to CDD ✓ Design Tokens ✓ UI Primitives ✓ Layout & Whitespace Management ✓ UI Composition

9. Design language Typography Color Spacing UX

10. No whitespace Added whitespace Typography

11. Low contrast High contrast Color

12. Spacing No structure Structured content

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

    Improves accessibility

14. Brand

15. Dropbox Yandex.Disk Brand

16. Consistency

17. Accessibility

18. Accessibility

19. How do we enforce design language?

20. Design Systems

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”

22. German government vs Austrian government

23. German federal government web-sites

24. German federal government web-sites

25. German federal government web-sites

26. Design system

27. Austrian federal government web-sites

28. Austrian federal government web-sites

29. Austrian federal government web-sites

30. Austrian federal government web-sites

31. No design system

32. Component-driven Design Systems

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

    4. PROFIT!

34. 1. Analyze & Plan

35. Where to start 1. Analyze & find problems (UI Inventory)

    2. Document 3. Plan 4. Execute!

36. UI inventory process

37. UI inventory process

38. UI inventory process

39. UI inventory process

40. Document

41. Plan

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

43. 2. Execute Building styleguides

44. Styleguides

45. “Styleguide is a collection of rules, patterns and components that

    are re- usable across single or multiple products.”

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

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

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

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

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

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

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

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

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

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

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

57. Styleguide generators

58. None

59. https://storybook.js.org

60. None

61. https://www.catalog.style

62. react-cosmos

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

64. None

65. https://react.feedly.com

66. npm start

67. Directory structure for component-driven development

68. Design Tokens

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”

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

    a a a a a a a a a

71. http://webtypography.net/3.1.1

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

73. Linear progression Geometric progression Spacing scale

74. Spacing

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

76. https://www.colorbox.io

77. https://colorsnapper.com

78. Color tokens

79. ⚒ DesignTokens

80. UI Primitives

81. None

82. Button

83. Label Button Icon Input Avatar

84. Label Button Icon Input Avatar

85. Login Form

86. Label Button Icon Input Avatar

87. Search Toolbar

88. Label Button Icon Input Avatar

89. ⚒ Primitives

90. Component variations <Button primary /> <Button secondary />

91. Component variations // Don't do this <Button primary /> <Button

    secondary /> // Impossible state! <Button primary secondary />

92. Component variations // Do this instead! <Button variant="primary" /> <Button

    variant="secondary" />

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

94. Accessing design tokens // Value from the static imported theme

    import {colors} from './theme.js'; styled.button`color: ${colors.primary};`

95. Accessing design tokens // Value coming from the theme styled.button`

    color: ${props => props.theme.colors.primary}; `

96. Accessing design tokens // Value coming from the theme (shorthand)

    import {themeGet} from 'styled-system'; styled.button` color: ${themeGet('colors.primary')}; `

97. API for design tokens import { color } from 'styled-system';

    const Text = styled.p`${color};` Text.defaultProps = { color: 'primary' } // Renders text with primary color <Text/> // Renders text with secondary color <Text color="secondary"/> https://styled-system.com/how-it-works

98. ⚒ Whitespace & Layout

99. UI Patterns

100. None

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

     solution to a design problem.”

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

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

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

105. Patterns • A great way to communicate • Suitable for

     both designers & developers (and many others) • Solve particular design problems • Re-usable • …

106. 3. Maintain

107. Process Development Product Design

108. Process Product Design & Development

109. Process Product Design & Development Styleguide

110. Process Design & Development Design System

111. Process Design & Development Design System

112. Benefits of CDD • Develop in isolation • Faster feedback

     loop • See all possible states • Easier to refactor • Documentation!

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

114. How to start? • Don’t ask for permission, just start!

     • Make a thing • Show it’s useful • Commit!

115. Discussion What problems are you facing…

116. Further reading

117. Atomic Design Brad Frost

118. Design Systems Alla Kholmatova

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

120. The Elements of Typographic Style Robert Bringhurst

121. http://webtypography.net

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

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