$30 off During Our Annual Pro Sale. View Details »

Component-Driven Design Systems Workshop

Component-Driven Design Systems Workshop

Andrey Okonetchnikov

April 24, 2019
Tweet

More Decks by Andrey Okonetchnikov

Other Decks in Education

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