Figma tutorial advanced colour tokens using variables

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

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

50% 1

Welcome to this deep dive into Figma's advanced colour tokens, brought to you by Matthew Sear, your go-to designer🚀
In this masterclass, we're taking Figma's variable system to the next level by crafting a comprehensive colour token system to supercharge your design workflow.
Design Token Mastery
Discover how to:
Set up custom colour tokens for ultimate design flexibility.
Implement dark and light mode colour schemes seamlessly.
Organize primary, secondary, and tertiary colour sets.
Elevate your designs with a utility colour palette.
Harness the power of colour states like hover, base, focus, and press.
We're diving deep into colour theory, and you'll gain hands-on experience in creating a versatile colour token system that will transform your design projects. 💡
So, if you're ready to take your design skills to the next level and unlock the full potential of Figma's variable system, you're in the right place. Don't miss this opportunity to become a colour token maestro!
#figmadesign #ColorTokens #colortheory #uidesign #DarkLightMode #colorpalettes #interactivedesign #usercentricdesign #designthinking #designtutorials #figmatips #designprocess #colordesign #graphicdesign #ux #ui #figma

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

11 сен 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@ifydus 19 дней назад

Amazing and quite insightful stuff. Thanks a lot. Please can you share the file used for this lesson for easy understanding?

@whennn 6 месяцев назад

Interesting . I like the idea of using tokens instead of components.

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

This is a gem 💎 Glad I stumbled upon this early in my variable journey 🎉 Thank you

@pixellink.design 5 месяцев назад

I am glad that it was helpful 🙂

@uifry 6 месяцев назад

Amazing Content & Well explained :)

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

Are you for real?

@pixellink.design 4 месяца назад

Hi Andree, hope you are doing well. I am always looking to grow and improve the quality of the content. What types of educational formats do you find helpful to help you achieve what you are seeking to achieve? What were your goals when looking at this video? This question would help with creating more effective content for people like yourself? Thanks for your support and feedback 😊

@sevenson5112 6 месяцев назад

confusing with the same name at the sub

@tw7716 6 месяцев назад

We could use variant in a component with different colors. This way is not the good way to use variables

@pixellink.design 6 месяцев назад

Then you can apply different sets of colors to different UI elements in the component. Or you can make it a custom colour component with the colors. In the end there is no wrong or right way there is just what works or does not work for you and your team. What system do you use for colour layering?

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

First off, thank you for this detailed video. I work with a large design system at a software company and my team wanted to know what we should be doing with our variables besides just light and dark mode. I did speak to Figma about this too, because with your tutorial procedure it is impossible to get the hover effect of buttons when prototyping as the mode isn't exposed for the color on a primary button to have it "change to" hover color while hovering like you can do with variants. I confirmed this with Figma support. Figma recommended I watch their video, Variants vs Variables : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-RXQ8XVirzjs.html which folks should check out in addition to what you've shown to make their decision on direction for their design system. It really helped me out a lot.

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

Moving everything into code, devs are gonna be like...wtf are these dots and gliphs in the json file export?

@pixellink.design 3 месяца назад

Like all people add space or capital and (/ - # &) alsorts of symbols, code needs to be 100% consistent. You will all ways need to convert your naming info a more appropriate format. I like using the dots so I can use my plugin to convert the name into a format automatically. In the end use the naming you want that makes sense for you, I am dyslexic and I can't read so a user dots and then I have a plugin that reformates names and covers the design into code. Hope this helps 🙏