Live demo: Design Tokens using Style-Dictionary & Figma

38m Link to video
Tags Style dictionary Design tokens The Future of Design Systems
Speakers Joren Broekema Thaís Santos
Edit on GitHub

During this live demo @th4is_ds and @jorenbroekema will explore how to bring the Design Tokens from Style-Dictionary into Figma via the Figma Tokens plugin.

The magic is done with the use of the Open Source token-transformer 👉 https://www.npmjs.com/package/@divriots/style-dictionary-to-figma

We’re using Backlight to write the tokens 👉 https://backlight.dev/starterkits

Play with Style Dictionary in your browser 👉 https://www.style-dictionary-play.dev/

Figma Tokens plugin 👉 https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens

Learn how to use the Figma Tokens plugin in the workshop 👉 https://intodesignsystems.gumroad.com/l/cNVQD

The Future of Design Systems Conference 👉 https://intodesignsystems.gumroad.com/l/wzkix