Figma Token and Variable Setup: Top Mistakes to Avoid

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

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

50% 1

Learn how to avoid common mistakes when configuring variables and tokens in your design projects. Subscribe for our Tokens 101 video coming soon!
*Jumper variables can also be called adaptive variables
Apply to join our Slack design community: www.uicollective.co
Download the free copy of our design system: resources.uicollective.co/che...
Advanced library setup: • Creating an Advanced F...
0:00 An Introduction
0:20 Too many variables
3:16 Improper token definitions
5:35 Ignoring Accessibility
9:04 Not factoring in responsiveness

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

15 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@ArijanitRoci 8 дней назад

I really see your point in making less variables to make it less complex. But here is a thought though that people should know. And that is that if gap and padding are combined into one token called for example xl (24) . If for some reason you have to change the overall padding on 100 of elements and leave the gap as is. Well then you have a major problem, because you just applied the same token on both the padding and the gap thus linking them together if you change the setting of the "XL token". Just a thought- great video !

@UICollectiveDesign 8 дней назад

Really great point! In a number of other videos, and resources, I had these seperated for that reason. Really great call out though!!

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

The amount of value you provide to design community is immeasurable :) Thank you!

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

Thanks, man!! Please share our channel :)

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

5:37 disabled element is not a good example here. They are not required to pass color contrast ratio check.

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

I tend to think that anything that has text, should pass the contrast check ratio. It's always interesting to hear how other designers do things, however!

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

@@UICollectiveDesign for disable state, contrast should pass 3.5:1 ratio in order to meet accessibility requirements (WCAG 2.1)

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

@@UICollectiveDesign I still remember the neverending email loop with a11y auditors around 12 months ago. Here’s the quote from Success Criteria for 1.4.11: ”User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.” In this situation, mentioned 3:1 is enough :) Have a great day, I love your videos!

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

I Agree @tomaszgens

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

Really well explained with great examples. Thanks for sharing

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

Glad you liked it! Please subscribe and share where you can :)

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

If you're already using Mapped for light and dark mode, then having sizes in there would mean that you'd need a Light-Desktop and Light-Tablet as well as equivalent for dark. I would think it better to have a separate collection for sizes and just have the modes applicable to sizing specified there.

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

Great call out!

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

Surface on disabled colors do not need to meet AA contrast ratios as disabled elements are not interactive, they cannot receive focus and are not announced by screen readers. Disabling an element is the same as hiding it from an accessibility and inclusion point of view. That being said it is true that earlier you start thinking about color contrast, the better.

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

Great call out!

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

Great insights and valuable lessons, thanks!

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

Glad it helped! Please subscribe and share our video :)

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

Hello 👋 I’m not sure for your “jumper” variables naming. I’ve done exactly the same 1 month ago but it was a better solution to keep a kind of scaling system. In a collection called Resolutions I specified all transformations depending from width or height. So for example viewport or container-min is not the same for mobile/tablet/laptop/desktop The term « mapped » is interesting. I use “Theme” I do a lot of multi brand systems Anyway thank you

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

Great call-out & tips! Always interesting to see how other designers do things :)

@mahdi.mortazavi 6 месяцев назад

but #676767 color is not sutble for disable button!

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

Sorry I have to ask this. Are you familiar with the different tier groups of tokens? For example global as base for alias and alias as base for componen specific tokens?

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

Yup!

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

Those are talked about in a number of our videos.

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

Okay - then sorry for playing the smart guy here :D I was just confused by the didactic of the first third of the video. But then I get where this is coming from. Thanks.@@UICollectiveDesign

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

haha no problem@@nutellanorbert2799

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

Hey, pretty huge mistake imo that you are making: disabled elements are not required to meet contrast requirements :/ And luckily, because this kind of disabled buttons are so dark they look like primary neutral haha However, I love your videos, thanks for what you are bringing to the table

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

It's just an example. I also come from the banking world, where our disabled buttons needed to be accessible due to corporate policy.

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

the gap and the padding example was not good. they can alias to the same primitive if they have the same value but they are semantic tokens, so they give context to where they should be applied. they make sense to exist in a lot of cases. you are falling into the trap of thinking that because you achieve the same visual with both variables, you can just simplify the tokens. that beats the principles of tokens which is flexibility. with your approach, the gap and the padding can never have different values and that might limit the adaptability of the system. again, just a bad a example.

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

also, please don't reduce accessibility as color contrast.color is just a very very very small part of accessibility. calling it color contrast would be better suited.

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

Spacing variables here are intended to be primitives that you are referencing. These can be reused with context if needed for greater flexibility. Our goal is show that you should start with a primitive set of spacing tokens that can scale or be mapped according to your design needs. Appreciate the input!

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

Of course, there's a lot more that goes into it, so the wording here could have been better for sure. Be sure to watch our talk on Accessibility posted on our channel@@rafaelmatosdasilva