Upgrade Your Figma Variable Library | Variables Latest Release!

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

Просмотров 3,6 тыс.

50% 1

This December, @Figma released new variables, including effect, border width, and opacity variables. Here's how we're adding these variable types to our design system!
*Please note this is the method we follow when building our Figma variable library. Every designer's approach is different.
Join the community for free 1:1 slack support and more: www.uicollective.co/
Free version of our Design System: resources.uicollective.co/che...
Our Figma Plugin: www.figma.com/community/plugi...
UI Collective resources: resources.uicollective.co/
Book a session (for enterprise support): tidycal.com/kirkland/60-minut...
0:00 An Introduction
0:28 Blur Variables
2:38 Spread Variables
4:59 Positioning Variables
8:51 Border Width Variables
9:52 Opacity Variables

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

4 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Nice and Awesome Content. It’s really Great.

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

Thank you so much 😀 Please subscribe and share our channel!

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

Great share. I notice you are using lowercase for all variable labeling in the variable panel, also for the top level category name such as dropshadow. But for the section label you use Sentence case, such as Brand for instance. I also see you separate some labels with transcending from lowercase to capitalized letter, like the width of a border with the subcategory label borderWidth. Is this in line with how developers write? So when a developer inspect the code view in a UI prototype where variables are used, they will see a way of labeling that match their code world? Any best practice here?

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

It depends on the dev team honestly. Always check with your devs as you go. I've seen a ton of cases where designers will build out an entire library only for it to conflict with their devs. Good catch on Brand being uppercase... this should be consistent with everything else :)

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

You could have shown how to constrain these variables to effects and borders in the variable properties

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

Great call out! Apologies I missed that. Have some other vids on it but just overlooked that here.

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

Thank you for sharing amazing contents. I’m trying to set color variables however those styles I already set, are not showing in variable tab. Could you please help me solving this issue?

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

Styles are separate from variables. You need to recreate your styles into variables :)

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

Is there any design rules that i can look into, where do you get the value numbers for the tokens?

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

I generally follow a grid system and scale up accordingly. Your tokens can be any scale, as long as they follow a grid, ex, Don't have a 5 if you're using a 2px grid.

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

Very helpful as always :D I have a question for you. I have a project named X where there is a design system file and a mobile app file. I duplicated the project and want to make a similar app keeping the same variables etc. only after duplicating the project, in the variabels mobile app file it doesn't link to the new design system only to the old one. Is there any way to quickly link variables to the new design system? I was able to do it by swapping each color, pointing it to the new DS location, but it's time-consuming. Let me know if you understood me haha :D

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

Try downloading the file locally, and re-uploading, this could work I think :) Sorry for the delay in response!

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

Thanks, but it unfortunately doesn't work :(@@UICollectiveDesign

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

Hmmm.. maybe message me in our Slack community and I can help you troubleshoot@@krzysztofk6796

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

thanks. when it comes to border none (0), what's the point of having a container that has only a fill but no border. Adding a stroke to then assign it a 0 seems unnecessary but perhaps there would be a reason for it. I am thinking of all components that have a fill but no border and going through that process to return a 0.

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

A couple reasons... 1. Consistency/best practice... always use variables when you can 2. Prototyping & conditional logic.. ex: remove border or add border based on different states You're right that it's not critical, but it's more best practice than anything else.