Please consider covering more advanced transforms between Figma Tokens and Style Dictionary. For example, pixels to rem units; hex to hsl, box-shadows, etc.
Great Tutorial man ! Please consider creating a tutorial on how we can setup a actual project in figma i mean how can we add variables setup, the components and the pages/screens. basically a guide on how we can structure a project !
Thanks for this, is really helpful! ❤ Would be awesome to see an example of a multi-brand + multi-color Tokens Studio JSON set applied to a website. I’m not sure what the process could be like, since you need to have different “sets” by brand and by color theme, that means a lot of JSON files 😢
Thanks for showing this setup. I was wondering how you would take advantage of style dictionary and transformers inside a mono repo with multiple app themes using the same components? Sync different tokens to different file paths in Github and have multiple listenrs in style dictionary?
Truly a great demonstration, but what if we synced typography as a new set (with tokens that have a font family from Figma)? Will it cause a problem? Shouldn't we import the font for the library to be able to transform tokens to CSS? if yes then how?
Here's my official Figma paid course which you can check out on: www.asaadmahmood.com/courses/figma-noob-to-pro Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
Have you used new style-dictionary or latest figma tokens. when I convert using style dictionary, always get an error. said " Property Reference Errors: Reference doesn't exist: global.btnPriColor.default.value tries to reference primary.pr50, which is not defined. Export result , will get "global": include as parent key. do you know how solve the issue?
@@AMDesignAndDev I did many times. but if you do manual export and uncheck parent key. everything it worked fine. but upload your tokens to repo such github, you always get global as parent key in json. if you export always get an error. I don't know the issue, it was from style dictionary or from figma tokens. I follow your vid, and it's not valid anymore.. I haven't talked to my friend who expertise as programmer. but this figma tokens and style dictionary should work fine as default. if you could how to to fix, it will be great. thanks for your response.
I found you on upwork first then followed here, but now can't see the upwork profile, there is a freelancing cohort who want to reach out to you as a mentor.
You've completely changed my workflow and everything is automated thanks to you. Keep sharing the knowledge.
I heard about design tokens one month ago.
This video is the first piece of content displaying an example of how they are actually used. 👏👏👏👏👏
Thank you! Seeing the entire process (design and dev) is so valuable!
Glad you found it valuable!
Please consider covering more advanced transforms between Figma Tokens and Style Dictionary. For example, pixels to rem units; hex to hsl, box-shadows, etc.
Unbelievable content. Your videos are getting better and better
Dude you are the king, thank you for sharing! Cheers from Brazil 🇧🇷
Thank you, great explanation of how to smoothly sync your development with Figma and CSS.
Thank you for sharing this, from my perspective as a developer this is awesome.
Great Tutorial man ! Please consider creating a tutorial on how we can setup a actual project in figma i mean how can we add variables setup, the components and the pages/screens. basically a guide on how we can structure a project !
Sure, will consider that!
@@AMDesignAndDev Thanks !
Thanks for this, is really helpful! ❤ Would be awesome to see an example of a multi-brand + multi-color Tokens Studio JSON set applied to a website. I’m not sure what the process could be like, since you need to have different “sets” by brand and by color theme, that means a lot of JSON files 😢
Wish to learn more about design tokens, thanks for the great content!
This is the coolest thing I've ever seen for designers and developers
Amazing content. I am need to develop a design tokens and I was intend to build in sass, but this is awesome!! 😮
Thanks for showing this setup. I was wondering how you would take advantage of style dictionary and transformers inside a mono repo with multiple app themes using the same components? Sync different tokens to different file paths in Github and have multiple listenrs in style dictionary?
Thank you for the explanation!
@AM Design - Hi There, could you do a video about Figma Design System and how to connect to Github?
I d love to have that content being shown .. slower .. :D. As a non dev this things are happening way too fast.
Got it Daniel, will try do these tutorials at a better pace.
The idea and implementation is a bit vague, but it has a lot of potential
Amazing! thank you!
Truly a great demonstration, but what if we synced typography as a new set (with tokens that have a font family from Figma)? Will it cause a problem? Shouldn't we import the font for the library to be able to transform tokens to CSS? if yes then how?
Hi, i would like to know, how to export shadows?
Awesome, thank you.
Thanks a lot!
Thanks!
Does this plugin work with design systems and big Figma designs containing several hundred components and layers?
Yup it should
Here's my official Figma paid course which you can check out on:
www.asaadmahmood.com/courses/figma-noob-to-pro
Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
How to solve the references/aliases errors on VSC when the figma token have aliases?
you can use tokens-transformer
I have a problem when saving figma token to github.
There was an error connecting. Check your credentials.
how to solve this?
usually is because of wrong file path of repo and expired or wrong personalize token of github
Man that is a lot of hoops to run through...
Have you used new style-dictionary or latest figma tokens. when I convert using style dictionary, always get an error. said " Property Reference Errors:
Reference doesn't exist: global.btnPriColor.default.value tries to reference primary.pr50, which is not defined.
Export result , will get "global":
include as parent key. do you know how solve the issue?
I haven't, but I can try again. Ideally, you should try setting it up from scratch again to see if the issue reappears.
@@AMDesignAndDev I did many times. but if you do manual export and uncheck parent key. everything it worked fine. but upload your tokens to repo such github, you always get global as parent key in json. if you export always get an error.
I don't know the issue, it was from style dictionary or from figma tokens.
I follow your vid, and it's not valid anymore.. I haven't talked to my friend who expertise as programmer. but this figma tokens and style dictionary should work fine as default.
if you could how to to fix, it will be great.
thanks for your response.
@@DeiHendrick did you solved it?
Hi Can I know your name please?
I found you on upwork first then followed here, but now can't see the upwork profile, there is a freelancing cohort who want to reach out to you as a mentor.
Asaad Mahmood
@@AMDesignAndDev thankyou