getting more with design tokens @mikolajdobrucki

mikolaj dobrucki designer & developer @mikolajdobrucki

somebody said design tokens?

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.

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

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

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); }); }) }

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

{ "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": [ { …

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

{ "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" } }

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

: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 }}; }

do I need design tokens?

do I need design tokens? system

every website can benefit from component-driven architecture applied to design and development principles. Brad Frost

every project can benefit from system-driven architecture applied to design and development principles. system = tokens + components + principles

design tokens

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

-platform-agnostic -single value, multi-purpose design tokens used once? not a token!

-platform-agnostic -single value, multi-purpose -mutable design tokens can be dynamic

-platform-agnostic -single value, multi-purpose -mutable -design-related design tokens copy API keys metadata SEO

-spacing -sizing -colors -font sizes -font weights -font families -rounded corners' radii -shadows, effects -borders -animations' durations -z-indexes -media queries design tokens types

design tokens benefits

-maintainability & scalability design tokens benefits

-maintainability & scalability -quality & consistency design tokens benefits

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

-maintainability & scalability -quality & consistency -flexibility -educational value design tokens benefits

design tokens common challenges

-keeping tokens up to date design tokens common challenges

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

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

-keeping tokens up to date -rendering differences & optical tweaks -categorisation & naming conventions -ownership and contribution design tokens common challenges

design tokens best practices

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

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

-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

-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

-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

components components tokens styles >_

design tokens

-an agnostic way of managing your design decisions design tokens

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

-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

-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

thank you! @mikolajdobrucki

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/