Figma Tokens Plugin (version 88) and Style Dictionary for a Design System to React workflow

Подписаться 39

Просмотров 10 тыс.

50% 1

I created a practice project to show how to export design tokens using Figma Design Tokens plugin in Figma to Github and pull tokens down into a React app, then transform the design token JSON with the Style Dictionary CLI tool into a stylesheet you app can use.
Useful links:
Figma Design Tokens figma plugin: www.figma.com/...
NPM package for Style-dictionary CLI tool with install instructions: www.npmjs.com/...
Style-dictionary github repo: github.com/amz...
Check out my Medium article with more information: / push-design-tokens-to-...

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 26

@_mattbailey 2 года назад

Thanks, this was exactly what I was looking for. I liked how you didn't assume any prior knowledge and went through all the steps - very easy to follow and reproduce!

@danjaymotee1988 2 года назад

The pace of this video was just right and well-articulated, compared to other videos I've seen where the entire video was rushed assuming beginners would understand. Great work

@toureh 2 года назад

First video that I found that just went straight to the point. Good work!

@ajgubi19 2 года назад

Thank you so much for making this video. You are saving lives! I want you to know that.

@alexdorosin6168 2 года назад

You are truly a hero! Thanks a lot! Keep up the good work!

@MauricioRoss 2 года назад

So amazing !!! thx for this!!

@Kuddusi 2 года назад

This was extremely helpful. Thank you very much!

@kaykay4130 2 года назад

great video, thank you

@aarongreen4564 2 года назад

Nice work! I am working on a similar project.

@alexmaza3270 2 года назад

Thank you Very Much!!!

@victor_janin 2 года назад

This is great content! Thank you :) just wondering if the changes done in the json ion githubg get updated in Figma? I think I saw it somewhere in one of Jan Six's but forgot where.

@sarahkimirettig 2 года назад

Yes I believe you can pull from a github repo using the figma plugin. This page explains this feature: docs.tokens.studio/sync/github

@SeeThroughist 2 года назад

Nice! Storybook hooked up to that might be cool too...?

@sarahkimirettig 2 года назад

Yea I'm still wrapping my mind around it. The way I see it storybook new figma plugin the designer can see the coded components and with figma tokens developers can get design tokens...I'm actually now interested in Adobe XD because they have a VS code extension that shares both design tokens and components (the whole design system) to developers using Adobe XD link.

@sevenson5112 2 года назад

How to solve with reference/aliases in figma tokens which can't be convert to SCSS, CSS or SAS in style-dictionary?

@sarahkimirettig 2 года назад

I personally didn't find an solution for aliases using figma and style dictionary. I am looking into adobe xd to see if that is more straightforward since adobe xd has a visual studio code extension - webdesign.tutsplus.com/tutorials/better-design-systems-with-adobe-xd-for-visual-studio-code--cms-36059

@sevenson5112 2 года назад

@@sarahkimirettig wow, xd is one step further on this feature

@arjunt1099 2 года назад

If I try to run a command "style-dictionary init basic" it shows "command not found: style-dictionary". what should i do?

@sarahkimirettig 2 года назад

Have you installed style-dictionary npm package in your project using the command npm i -g style-dictionary? Of course you have to have node and npm installed in your project to install style-dictionary. Note the npm i -g style-dictionary installs style-dictionary in your global npm files on your computer so in the future for any project you can run style-dictionary commands and it should work? I'm not the best coder or command line or npm tools person. I may not be able to help you if the above does not work. You can also post an issue as you probably already know on stackoverflow.com/ Let me know how it goes.

@arjunt1099 2 года назад

@@sarahkimirettig i just added "npx style-dictionary init basic" its working now, thank you.

@sevenson5112 2 года назад

cool

@snarefarex 2 года назад

im having the hardest time getting style-dictionary build to update my variables file. i wonder what im doing wrong

@sarahkimirettig 2 года назад

I'll have to think about it this weekend when I'm off work. Sorry I can't help right now. Off the top of my head is there might be an issue with that path of the build? The amazon github repo has an issues section that might be helpful. github.com/amzn/style-dictionary/issues

@zdargahi 2 года назад

you can use Toukan plugin

@sarahkimirettig 2 года назад

Cool, I haven't heard of Toukan plugin yet. I'll check it out. I found the url it's www.figma.com/community/plugin/995763475526131389 I'll share it here in case anyone reads these comments and stuff.