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

Getting more with design tokens

Getting more with design tokens

A quick glimpse into the concept of design tokens – a mysterious remedy for some of the most severe pains of working with design systems and complex UI projects. During my talk, I will show the basic use cases of design tokens and preview how to sync designs with code in real-time using Figma API. I will also share all the resources necessary to start using this concept in your own workflow.

Mikolaj Dobrucki

August 27, 2019
Tweet

Other Decks in Programming

Transcript

  1. design tokens are an agnostic way to store variables such

    as typography, spacing so that your design system can be shared across platforms like iOS, Android, web.
  2. var url = `https://api.figma.com/v1/files/` + process.env.FIGMA_FILEID; module.exports = () =>

    { return new Promise((resolve, reject) => { axios.get(url, { headers: { "X-Figma-Token": process.env.FIGMA_APIKEY } }) .then(response => { … seed(JSON.stringify(tokensJSON), `${__dirname}/../dev/designTokens.json`) resolve(tokensJSON); }) .catch(err => { reject(err); }); }) }
  3. { "document": { "id": "0:0", "name": "Document", "type": "DOCUMENT", "children":

    [ { "id": "0:1", "name": "styleguide", "type": "CANVAS", "children": [ { "id": "8:0", "name": "spacers", "type": "FRAME", "blendMode": "PASS_THROUGH", "children": [ { …
  4. { "color": { "light": "rgb(255, 255, 255)", "dark":"rgb(38, 41, 39)",

    "primaryLight":"rgb(247, 190, 202)", "primaryDark":"rgb(219, 130, 149)", "accent": "rgb(38, 209, 123)" }, "spacing": { "spacerDesktop": "5", "spacerMobile": "1.66" } }
  5. :root { --spacing: calc({{ designTokens.spacing.spacerMobile }} * 1rem); --bgColor: {{

    designTokens.color.dark }}; --textColor: {{ designTokens.color.light }}; --linkColor: {{ designTokens.color.primaryLight }}; } @media screen and (min-width: 50rem) { :root { --spacing: calc({{ designTokens.spacing.spacerDesktop }} * 1rem); } } .lightMode { --bgColor: {{ designTokens.color.light }}; --textColor: {{ designTokens.color.dark }}; --linkColor: {{ designTokens.color.primaryDark }}; }
  6. every project can benefit from system-driven architecture applied to design

    and development principles. system = tokens + components + principles
  7. -spacing -sizing -colors -font sizes -font weights -font families -rounded

    corners' radii -shadows, effects -borders -animations' durations -z-indexes -media queries design tokens types
  8. -keeping tokens up to date -rendering differences & optical tweaks

    -categorisation & naming conventions design tokens common challenges
  9. -keeping tokens up to date -rendering differences & optical tweaks

    -categorisation & naming conventions -ownership and contribution design tokens common challenges
  10. -don't turn everything into a token -don't build in isolation

    design tokens best practices create your tokens as you need them
  11. -don't turn everything into a token -don't build in isolation

    -don't confuse options with decisions design tokens best practices e.g. red, green, orange… e.g.error, success, warning
  12. -don't turn everything into a token -don't build in isolation

    -don't confuse options with decisions -specify allowed usage design tokens best practices
  13. -don't turn everything into a token -don't build in isolation

    -don't confuse options with decisions -specify allowed usage -structure your designs properly design tokens best practices
  14. -an agnostic way of managing your design decisions -a practice

    that projects of all sizes can benefit from design tokens
  15. -an agnostic way of managing your design decisions -a practice

    that projects of all sizes can benefit from -great for design systems but can be used independently design tokens
  16. -an agnostic way of managing your design decisions -a practice

    that projects of all sizes can benefit from -great for design systems but can be used independently -a bridge between design and development that promotes shared knowledge and supports consistency and maintainability design tokens
  17. demo files https://github.com/mikolajdobrucki/mikolajdobruckicom figma api documentation https://www.figma.com/developers/api what are design

    tokens? an article by Robin Rendle for CSS-Tricks https://css-tricks.com/what-are-design-tokens/ directory of design tokens-related links by Stuart Robson https://github.com/sturobson/Awesome-Design-Tokens when do we need a design system? an interview with Brad Frost for Smashing Magazine https://www.smashingmagazine.com/2019/06/building-design-systems-interview-brad-frost/