Component-Driven Design Systems Workshop

Component-Driven Design Systems Workshop

69bb6b30cd7b682ba5d5a1f352e6862a?s=128

Andrey Okonetchnikov

April 24, 2019
Tweet

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