Advanced: Figma tokens Sync with Github

Подписаться 31 тыс.

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

50% 1

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.asaadmahmood.com/courses/...
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.com/821dltt72sqv .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv....

Кино

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

14 май 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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. 👏👏👏👏👏

@djmtype Год назад

Please consider covering more advanced transforms between Figma Tokens and Style Dictionary. For example, pixels to rem units; hex to hsl, box-shadows, etc.

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

Unbelievable content. Your videos are getting better and better

@hugocsl Год назад

Dude you are the king, thank you for sharing! Cheers from Brazil 🇧🇷

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

This is the coolest thing I've ever seen for designers and developers

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

Thank you! Seeing the entire process (design and dev) is so valuable!

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

Glad you found it valuable!

@renem1219 Год назад

Thank you, great explanation of how to smoothly sync your development with Figma and CSS.

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

Wish to learn more about design tokens, thanks for the great content!

@f1729. Год назад

Thank you for sharing this, from my perspective as a developer this is awesome.

@evandromottaz Год назад

Amazing content. I am need to develop a design tokens and I was intend to build in sass, but this is awesome!! 😮

@andrecho Год назад

Thank you for the explanation!

@FabianAlcantara 3 месяца назад

Amazing! thank you!

@antonioguedes6903 Год назад

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?

@tanyacequi6556 8 месяцев назад

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 😢

@gunasekar4554 Год назад

Awesome, thank you.

@AMDesignAndDev Год назад

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.

@8animer889 5 месяцев назад

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 !

@AMDesignAndDev 5 месяцев назад

Sure, will consider that!

@8animer889 5 месяцев назад

@@AMDesignAndDev Thanks !

@andersonaf 8 месяцев назад

@AM Design - Hi There, could you do a video about Figma Design System and how to connect to Github?

@primozin Год назад

Thanks a lot!

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

Thanks!

@fire8665 9 месяцев назад

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?

@xZhodiac 4 месяца назад

Hi, i would like to know, how to export shadows?

@khasanshadiyarov Год назад

The idea and implementation is a bit vague, but it has a lot of potential

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

I d love to have that content being shown .. slower .. :D. As a non dev this things are happening way too fast.

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

Got it Daniel, will try do these tutorials at a better pace.

@jorgemendoza9616 7 месяцев назад

Does this plugin work with design systems and big Figma designs containing several hundred components and layers?

@AMDesignAndDev 7 месяцев назад

Yup it should

@saeedrastegar9436 3 месяца назад

Hi Asaad, thank you a lot and i have a question, do you think that this plugin (Figma Tokens) will be paid in the future or stay free?

@AMDesignAndDev 3 месяца назад

It has a freemium model: tokens.studio/pricing It has some features that are restricted and you need to upgrade. And I think they'll keep it freemium, so a free plan and a paid plan for advanced features.

@saeedrastegar9436 3 месяца назад

Thank you. I saw their page, but i wanted to know, if the free model will be paid in the future or stay so. again thx a lot @@AMDesignAndDev

@AMDesignAndDev 3 месяца назад

@@saeedrastegar9436 probably no

@sevenson5112 Год назад

How to solve the references/aliases errors on VSC when the figma token have aliases?

@reisengroup5978 Год назад

you can use tokens-transformer

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

I have a problem when saving figma token to github. There was an error connecting. Check your credentials. how to solve this?

@sevenson5112 Год назад

usually is because of wrong file path of repo and expired or wrong personalize token of github

@teegees Год назад

Man that is a lot of hoops to run through...

@DeiHendrick Год назад

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 haven't, but I can try again. Ideally, you should try setting it up from scratch again to see if the issue reappears.

@DeiHendrick Год назад

@@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.

@SaralKarki-pv1mi 9 месяцев назад

@@DeiHendrick did you solved it?

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

Hi Can I know your name please?

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

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.

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

Asaad Mahmood

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

@@AMDesignAndDev thankyou