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. getting more with design tokens @mikolajdobrucki

  2. mikolaj dobrucki designer & developer @mikolajdobrucki

  3. somebody said design tokens?

  4. 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.
  5. request JSON npm run build designTokens.js designTokens.json CSS figma api

  6. request JSON npm run build designTokens.js designTokens.json CSS figma api

  7. 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); }); }) }
  8. request JSON npm run build designTokens.js designTokens.json CSS figma api

  9. { "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": [ { …
  10. request JSON npm run build designTokens.js designTokens.json CSS figma api

  11. { "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" } }
  12. request JSON npm run build designTokens.js designTokens.json CSS figma api

  13. :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 }}; }
  14. do I need design tokens?

  15. do I need design tokens? system

  16. every website can benefit from component-driven architecture applied to design

    and development principles. Brad Frost
  17. every project can benefit from system-driven architecture applied to design

    and development principles. system = tokens + components + principles
  18. design tokens

  19. -platform-agnostic design tokens agnostic format, e.g. JSON, YAML unitless values

  20. -platform-agnostic -single value, multi-purpose design tokens used once? not a

    token!
  21. -platform-agnostic -single value, multi-purpose -mutable design tokens can be dynamic

  22. -platform-agnostic -single value, multi-purpose -mutable -design-related design tokens copy API

    keys metadata SEO
  23. -spacing -sizing -colors -font sizes -font weights -font families -rounded

    corners' radii -shadows, effects -borders -animations' durations -z-indexes -media queries design tokens types
  24. design tokens benefits

  25. -maintainability & scalability design tokens benefits

  26. -maintainability & scalability -quality & consistency design tokens benefits

  27. -maintainability & scalability -quality & consistency -flexibility design tokens benefits

  28. -maintainability & scalability -quality & consistency -flexibility -educational value design

    tokens benefits
  29. design tokens common challenges

  30. -keeping tokens up to date design tokens common challenges

  31. -keeping tokens up to date -rendering differences & optical tweaks

    design tokens common challenges
  32. -keeping tokens up to date -rendering differences & optical tweaks

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

    -categorisation & naming conventions -ownership and contribution design tokens common challenges
  34. design tokens best practices

  35. -don't turn everything into a token design tokens best practices

  36. -don't turn everything into a token -don't build in isolation

    design tokens best practices create your tokens as you need them
  37. -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
  38. -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
  39. -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
  40. components components tokens styles >_

  41. design tokens

  42. -an agnostic way of managing your design decisions design tokens

  43. -an agnostic way of managing your design decisions -a practice

    that projects of all sizes can benefit from design tokens
  44. -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
  45. -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
  46. thank you! @mikolajdobrucki

  47. 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/