@okonetchnikov UI developer with an experience in both design and development who specializes in interaction design, design systems and modern frontend development.
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
–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”
Accessing design tokens // Value coming from the theme (shorthand) import {themeGet} from 'styled-system'; styled.button` color: ${themeGet('colors.primary')}; `
API for design tokens import { color } from 'styled-system'; const Text = styled.p`${color};` Text.defaultProps = { color: 'primary' } // Renders text with primary color
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