Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. @okonetchnikov UI developer with an experience in both design and

    development who specializes in interaction design, design systems and modern frontend development.
  2. UI engineer working with web technologies since 1999. Creator of

    react- styleguidist and component-driven- development @iamsapegin
  3. Plan for today ✓ DS theory ✓ UI Inventory ✓

    Introduction to CDD ✓ Design Tokens ✓ UI Primitives ✓ Layout & Whitespace Management ✓ UI Composition
  4. “Design system defines a set of design- related rules as

    a system of instructions that can be re-used across single or multiple products”
  5. “Styleguide is a collection of rules, patterns and components that

    are re- usable across single or multiple products.”
  6. 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
  7. –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”
  8. 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
  9. Component variations // Don't do this <Button primary /> <Button

    secondary /> // Impossible state! <Button primary secondary />
  10. Accessing design tokens // Value from the static imported theme

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

    color: ${props => props.theme.colors.primary}; `
  12. Accessing design tokens // Value coming from the theme (shorthand)

    import {themeGet} from 'styled-system'; styled.button` color: ${themeGet('colors.primary')}; `
  13. 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
  14. Patterns • A great way to communicate • Suitable for

    both designers & developers (and many others) • Solve particular design problems • Re-usable • …
  15. Benefits of CDD • Develop in isolation • Faster feedback

    loop • See all possible states • Easier to refactor • Documentation!
  16. 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
  17. How to start? • Don’t ask for permission, just start!

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