Figma Tips ⚡ - Colour styles vs variables

Подписаться 2,1 тыс.

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

50% 1

Use colour variables as much as possible
Learn about their differences in properties and use cases
Time Stamps ⏱️
00:00 Introduction
00:21 What are colour styles and variables?
00:53 Colour variable properties
01:38 Colour style properties
02:47 Benefit of variables - Alias
04:54 Benefit of variables - Prototyping
05:08 Benefit of variables - Variable modes
07:03 Limitation of variables
08:46 Creating variables and styles
12:39 Assigning variables in styles
14:03 Concluding thoughts
14:41 Like, comment, subscribe fam
Colour Variable Perks 🔥
1. Variable alias = more control = design token scalability
2. More prototyping features
3. Variable modes
Differences by Figma: help.figma.com/hc/en-us/artic....
Fake shadows workaround: forum.figma.com/t/how-to-use-...
Managing variables: help.figma.com/hc/en-us/artic...
Convert eligible styles into variables: • Backing color styles w...
Got a question about frames, figma, or the UX/UI industry?
Any suggestions for topics you would like me to cover?
Leave a comment below.
Support my work at:
paypal.me/thejunboy
#ui #userinterface #figma

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

4 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Was looking for a video explaining the difference between styles & variables. Super useful and informative, thank you!

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

Great to hear it was useful! All the best in your Figma journey

@theblowupdollsmusic 2 месяца назад

Thank you so much for putting this video together and explaining the differences clearly.

@thejunboy Месяц назад

You're very welcome!

@user-mm4wz2kn9j 4 месяца назад

Thanks, great explanation!

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

You're welcome! Thank you!

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

Great tips! I did not know much about variables before

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

Glad you could learn something !

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

@@thejunboy I always learn from you bless 🙌

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

On 3:33 - In Tokens section of Local Variables panel, I can see each token is connected to which primitive. Is there a way that I can see each primitive is connected which token?

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

appreciate the comment - there isn't a native way to view this in Figma nor have I found a plugin that can allow us to manage all of the variables and see how they are all connected. noting that variables is still feature in beta, hopefully this feature comes in down the track.

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

@@thejunboy Thanks for your explanation! I appreciate it.

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

It's very confusing😢can u show us how the global token semantic and component tokens works in a figma file?

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

this concept is only relevant if you're working on a design system. your base token variables you could create brand colours. e.g white = FFFFFF, primary brand colour = 000000. your semantic token variables can then reference these base tokens through alias. a light mode button component might have these alias. border colour variable = primary brand colour variable fill colour variable = white variable text colour variable = primary brand colour variable a dark mode button might be. fill = primary brand colour text = white. if this concept is too complex, i would recommend exploring videos on design tokens and design systems.