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.

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/