Live demo: Design Tokens using Style-Dictionary & Figma

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
👉 www.npmjs.com/...
We're using Backlight to write the tokens
👉 backlight.dev/...
Play with Style Dictionary in your browser
👉 www.style-dict...
Figma Tokens plugin
👉 www.figma.com/...
Learn how to use the Figma Tokens plugin in the workshop
👉 intodesignsyst...
The future of Design Systems Conference
👉 intodesignsyst...

[@MaxWeir]

Nice presentation, this looks very exciting and would definitely like to see token decisions coming from Figma as well

[@mhewson]

Exactly what I am looking to do - thanks for the good work!

[@octachron_ios_drum_sequencer]

Yes, very nice presentation but indeed a bit blurred 😊

[@vanylaskywalker]

How would iOS developers using SwiftUI use design tokens?

[@backlight_dev]

Hi! You can use a tool like `style-dictionary` to generate iOS and Android corresponding assets. See amzn.github.io/style-dictionary/#/

[@stevenwu19891125]

do you guys have any explainer that shows how to do this the other way around? Right now I have stuff in Figma named as design tokens, and I need the devs to leverage the design token when they create the design system in React/storybook

[@dannysvibe6404]

I like the presentation but it's all blurred, can't see a thing..

[@akinhwan]

the video quality is too bad to see whats going on in the video!

[@XINTSUAI]

So prolix, get straight to the point, you don't need to show your entire DS to show how to use the damn plugin, 18 minutes to start the action, c'mon..