Тёмный

When to Use Component Level Tokens/Variables in Figma 

UI Collective
Подписаться 9 тыс.
Просмотров 7 тыс.
50% 1

Learn about what is a component-level token/variable and when to use them in the context of our design system.
Apply to join our Slack design community: www.uicollective.co
Download the free version of our design system:
resources.uicollective.co/che...
Pre-register for the UIC Design System Linter plugin: www.uicollective.co/design-sy...
Email me video suggestions: hello@uicollective.co
0:00 An Introduction
0:57 Global Variable vs Component Level Variables
2:42 When to Use Component Level Variables

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

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 19   
@timofeypiper
@timofeypiper 9 месяцев назад
I worked at a large corporation where our only chose was to develop component-level tokens. This approach was essential for effectively managing a vast legacy framework. This is what Goldman Sachs' design system also had to do.
@UICollectiveDesign
@UICollectiveDesign 9 месяцев назад
Interesting! Would love to hear more about that. You should join our Slack!
@cp3onmtv963
@cp3onmtv963 Месяц назад
So I have a question on this. Going to try and be as brief/clear as possible. My team has decided that we will need a handful (not a lot) of component level tokens. What’s not clear to me is where you added those bolder colors? Did you first add them to the base collection? What did you name them? Referencing what’s shown, let’s say I need a component level token for a header. I have my (base) hex, my (alias) green-100, and my (mapped) primary. This green-100 is also aliased for all buttons. The component level color goes in the mapped collection as you’ve shown, as ‘primary-header’. But it’s still being aliased? That means that if I go BACK to my (base) hex and change it to blue, everything else that references it (alias and mapped) will also change to blue. But I DONT want that. I want to be able to change the green-100/primary-header separately from the buttons, or anything else that may already reference it. We want a global change for buttons, but a separate global change for headers, although technically they’ll reference the same color green in the css. I hope this is making sense lol. It seems figma doesn’t have the capability to do what I’m describing, referencing 1 color in 2 different ways, so I’m wondering the best workaround to achieve this? Do I simply add an additional green-100 but just name it slightly different?
@UICollectiveDesign
@UICollectiveDesign Месяц назад
It appears your structure is slightly off. The green -100 scale should be in your base or brand, and not in your alias. Your alias is where you assign elements roles like primary, secondary, etc... and then map those out ex: surface/primary. Apologies if I misunderstood. The easiest route is to just change the mapped color for the headers. I don't feel you need to add a duplciate color at all. Are you in our community? Happy to chat with you 1:1.
@cp3onmtv963
@cp3onmtv963 Месяц назад
@@UICollectiveDesign thank you for the response! If it’s discord or slack then no I am not. I don’t want yet another app drawing my already limited attention span, so I really appreciate you taking the time to respond here! Sorry for the confusion, as green-100 is in fact a base color. My alias for this is primary, however, this color is used for more than just text, (hence the header). (I’m still working on mapped, maybe that’s what I’m missing...) So as it currently is, if I want to change the base color (green-100) of my text (low-case), it would also affect the header color (slightly higher case), which I don’t want. I want to be able to change the green text separate from the green header. Even with mapping, if they’re tied back to the base color but the base is changed, everything else will follow. I hope this is less scatterbrained lol. I’m not seeing a way to do this without adding a duplicate…
@UICollectiveDesign
@UICollectiveDesign Месяц назад
@@cp3onmtv963 The easiest way is to maybe just have a solo color in your mapped collection honestly. Just be sure that in your documentation you cover this.
@cp3onmtv963
@cp3onmtv963 Месяц назад
@@UICollectiveDesign cool thank you!
@UICollectiveDesign
@UICollectiveDesign Месяц назад
@@cp3onmtv963 happy to help!
@winwolf2011
@winwolf2011 6 месяцев назад
It is neccery to create component tokens as well because themes. Semantics tokens may make too many duplicated color in light mode but different color in dark depending on contexts
@UICollectiveDesign
@UICollectiveDesign 6 месяцев назад
Only if you really need to. Use it almost as a last resort
@winwolf2011
@winwolf2011 6 месяцев назад
F. Ex. One text default token in light has one dark token in white and another in black. In semantics token it will be duplicated light tokens, not so easy for user to understand which one will get what kind dark color when it must be find out in full semantic tokens list. But in specific component tokens user need only to search the component name with much less choices for one component.
@UICollectiveDesign
@UICollectiveDesign 6 месяцев назад
If I am following right, then yes. Component level tokens should only be used when no other of your tokens work for a specific use-case... it's really common on dark mode. We also have a video on when to use component-level tokens@@winwolf2011
@MyDigitalHub
@MyDigitalHub 9 месяцев назад
Nice
@UICollectiveDesign
@UICollectiveDesign 9 месяцев назад
Thanks!!
@davidMc
@davidMc 9 месяцев назад
Nice vid...but don't really agree with the fundamental rational of when to use component tokens. Comp tokens should just feed off your semantic layer so any changes you make are inherited, you don't need to makes changes in both. Comp tokens are there for if specific overrides and to give more granular control, really useful when managing a while label design system
@UICollectiveDesign
@UICollectiveDesign 9 месяцев назад
That's the essence of what I was trying to get at.. for specific overrides and granular control. Hence the case of our alert component.
@davidMc
@davidMc 9 месяцев назад
@@UICollectiveDesign Yeah I understand...I guess what I'm trying to get at is that if you don't have those component tokens set up from the get go, you don't have the framework in place to make overrides if needed for a specific white-label brand, a code re-factor would need to be made instead of just changing the value in the component token for that brand. There's lots of debate over component tokens out there and it's really dependdant on what you need from your system I guess. Anywho, love your vids, good up the good work!
@UICollectiveDesign
@UICollectiveDesign 9 месяцев назад
All great points... good dialogue! Be sure to join our Slack, you'd be a great fit to chat more about design systems, etc..@@davidMc
@cp3onmtv963
@cp3onmtv963 Месяц назад
@@davidMcthanks for the dialogue because I’m currently struggling with this very thing!
Далее
Swapping Variants Using Variables | A Figma Tutorial
10:10
Using Figma Variables to Swap Variants Between Modes
8:17
Tokens Studio vs Figma Variables
7:58
Просмотров 12 тыс.
Figma Variables vs Tokens Studio | Which to Use in 2024
11:25
Component properties
6:29
Просмотров 55 тыс.
Ultimate Guide to Figma Variables and Design Tokens!
33:04
Figma Token and Variable Setup: Top Mistakes to Avoid
14:18