Figma tutorial: Intro to variables

Hey Figma team, please provide the option to rearrange the collections in colors panel. Currently, the Primitive collection appears before the Tokens collection. As a user it becomes difficult for me since I need scroll down and search variables from Token collection.
Offering the option to rearrange these collections would significantly improve our workflow.

Great video! Also just wanted to add that the music was groovinnnn!

this is good but how do you categorize and organize if you are building a design system with 40+ components for a saas platform?

I'm in awe and overwhelmed. Help.

Currently the styles seem complementary, but will they be removed in the future?

All good until I cannot create another mode and finish this basic tutorial because that's only for paid plans...

this was very helpful to my team!

We cant use variables for font-size ?

What a bittersweet experience for old figma design systems esecially large ones...don't even know where to start from porting our old design system to work with this new paradigm. Completely makes alot of duplicated frames expandable

This video is insane. The content is crazy good and the presentation is awesome. Definitely need to re-watch this a few times to get the hang of this workflow but it really looks like it takes half the effort to do twice the work! Figma is changing the design world for the good!

difficult to follow

Where is Figma files??

Testing YT's comment UX! :P

I’m new here , isn’t variable’s essentially like css style sheets ?

Wow.

Can you possibly offer a range of narrators next time, i can't deal with this one at all?

are there a way to export this variables? csv or js files?

no one "needs" a brutalism aesthetic...

does it matter if we use proper spelling for colour?

I was super hyped to see this new feature but I can't be bothered to update my styles to variables since we have such a massive product on our hands 🥲

This is really well produced. And I know I'm being a jerk for saying this... but why does she sound 10 years old?

talk about totally overengineering things.

Hello! I don`t know how to write to your support guys, but I have suggestions for improving the flexibility of working with style, and color Collections. Could you make possibility to move style from one collection to another? I have cases in my workflow when I create a separate Collection for some style but after I realize that it should be in a different collection and because I already attached some text properties to that style moving this style to another collection can become a nightmare

What about design system or UI kit? Traditionally we create those colors in a design system fig file and label them with "Shades", "Primary", etc. With variables, it seems no longer necessary

The BG music is too annoying & distracting,

What about Gradients ?

I followed the advice in this video - and made many primitives, and hen many many tokens. Now when I go to choose a color - I see all the primitives as well as the tokens as well as the styles. It would be nice to specify that a token is also a style and will show up in the picker. I can't tell other designers to ignore a bunch of primitives in the picker... Is there a solution that exists that I missed? Probably!

Great feature, need practice to understand, so powerful to handle the token approach on UI concept

Mind blowing work done by the Figma design team! Kudos to the team!!!

Why use lowercase labels for everything? Is that a code reference?

it's amazing!! good work

Brvtal.

What's the name of the music... it's amazing

Thank you for the updates and breakdown of variables - As a suggestion for future tutorials, remove or lower the volume of the looping background audio.

She has such a smooth soft voice. It's make learning this stuff super easy. Excellent video

Название шрифта сейчас нельзя взять из переменной. Товарищи, вы что прикалываетесь?

Why does ALL the number variables appear in the context of radius? When you click on that variable icon in the corner radius field, logically you should only get the contextual options, namely radius variables. But the whole list of variable options for number is there. Spacing etc. Seems very illogical.

How 0.5 number is added over here? Figmas Number attribute is not supporting the decimal point

Hi, aren't we also able to change the color, for example, the whole border color, by using the "selections color" panel and locate the color and then change all of them? compare to variables, I feel it's also an easy way to change all the colors at once. But I get the variables can work as a preset for different themes.

Please let us add variables to styles or text like font size/letter spacing

I can't do set variables, it asks me to upgrade to professional, what can I do? :/

I also have a question when we use google material theme creator it creates all of these styles. would it integrate in the variables or is it possible to select them in variable panel or we have to add them manually

I just don't understand why we do these locally. is it just for testing what the design could be or this is also how we would do the design system and publish it