Advanced: Figma tokens Sync with Github
Vložit
- čas přidán 27. 08. 2024
- Learn how to sync your Figma tokens with Github and easy the changes between design and dev and have a single source of truth.
Here's my official Figma paid course which you can check out on:
www.asaadmahmo...
Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
Be sure to subscribe and hit the notification icon! It really helps the channel grow and motivates me to keep on investing on the channel.
/ @amdesignanddev .
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn.
/ asaadmahmood .
.
👉 Follow me on LinkedIn and Twitter for more content.
/ asaadmahmood
/ asaadmahmood5 .
Sign up for Figma: psxid.figma.co... .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-de...
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!
Dude you are the king, thank you for sharing! Cheers from Brazil 🇧🇷
Unbelievable content. Your videos are getting better and better
Please consider covering more advanced transforms between Figma Tokens and Style Dictionary. For example, pixels to rem units; hex to hsl, box-shadows, etc.
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.
This is the coolest thing I've ever seen for designers and developers
Wish to learn more about design tokens, thanks for the great content!
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 !
Thank you for the explanation!
Amazing content. I am need to develop a design tokens and I was intend to build in sass, but this is awesome!! 😮
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 😢
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.
Amazing! thank you!
Awesome, thank you.
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?
Thanks a lot!
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
@AM Design - Hi There, could you do a video about Figma Design System and how to connect to Github?
Thanks!
Hi, i would like to know, how to export shadows?
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?
Does this plugin work with design systems and big Figma designs containing several hundred components and layers?
Yup it should
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