Figma Variables Setup: Building a Variable Library

[@cp3onmtv963]

This content is so valuable, thank you! I have to point out that your uploads are low resolution visually though. Despite me choosing 1080p, your screen still looks fuzzy. It could be an upload issue or the screen recorder you're using isnt high res, it's just something for you to look into!

[@UICollectiveDesign]

All my videos are exported and uploaded at 1080p, except for some when I first started releasing. I'll look into it! Thanks!

[@Underhills]

Great share as always. Hope gradients and not just solid colors will be supported as variables soon. And not to forget type variants. Also, as this video clearly demonstrates, Figma should add some of that Adobe floating palette magic to the UI. Would be nice to able to collapse, dock and build custom sidebars etc. Perhaps it happens when the Adobe deal get's formalized.

[@UICollectiveDesign]

Thank you! & agreed. Will be releasing a video next week covering Figma's newest variables.

[@baguetteDuGame]

Do you use the brand/alias/mapped system for other tokens than colors or these collection are exlusively for colors?

[@UICollectiveDesign]

This can also apply to other tokens as well! But then we get into much more complex territory when it comes to tokens

[@baguetteDuGame]

@@UICollectiveDesign Ok so i did the following. I have 3 figma files (Root, Alias, Mappings) and i have the system you explained in each one of these files, so they are nested. In mappings, i created a collection for Colors, one for Font and a last one for the spacings. In spacings collection, i have all the different container types (button, cards, input, ...) with variables such as PaddingTop, Gaps, Radius, ... linked to the spacing aliases. And the "Mappings" file, having all the tokens, styles, effects etc... is published as a library for my main design system file. Is that a good setup ?

[@sameehangadkari]

First of all, extremely valuable content on your channel. Thanks for the efforts! My problem: I have 3 buttons stacked side-by-side to each other, where the centre button has 'none' round edges, but the left button has full roundness only on the left two corners, and the right button has full roundness on the right. How would your approach be here? Thanks!

[@UICollectiveDesign]

Thanks for the kind words :) Please subscribe and share our channel where you can. When you ask how to approach, can you elaborate on what you're looking for? Sorry I can interpret that question a number of different ways here.

[@JosephCallanan]

Hey if i created local color variables in a library file, is it possible to sync/access those color variables in another file in the same project? How would i go about doing this?

[@UICollectiveDesign]

Publish the file, and then subscribe to it. In the top bar, hit the arrow next to the file name, and then publish. Then, in another file, hit File>Libraries, and toggle on the library you want :)

[@javadsaberi_afroo]

Thank you for your good explanations, the question that came to me is, shouldn't we add titles like "text" "icon" "surface" "border" in the subgroup of titles like "Button" "Input" "Toast" under each one? Where do you see components like buttons, input, toast, etc.?

[@UICollectiveDesign]

You want to avoid component level tokens. This can cause a library with a ton of tokens, and you'd have to adjust them manually. Components should be consistent in sharing the same tokens.

[@JaspervanderKamp]

Good video! What about the spacing and radius values, are they only in the 'Brand' collection? So in short, only the colors will be in 'Alias' and 'Mapped'?

[@UICollectiveDesign]

Correct!!

[@jackiet.5156]

Tip: shift+enter to duplicate the last added variable

[@UICollectiveDesign]

Great tip!!

[@Dupdopy]

Godly. Thank you!

[@roter13]

Can you use variables to set up a typographic scale? Or even just the H1-H6....

[@UICollectiveDesign]

Not yet. This is still done in Tokens Studio and managed via styles. Check out our Text Variables video for a better explanation as how variables works with type

[@samduss4193]

damn i try to learn figma i run into here but this is a bit of a advance is there a roadmap somewhere i can follow ? ... if someone know thanks

[@UICollectiveDesign]

Don't have a roadmap for learning Figma unfortunately. This is definitely a more advanced topic.

[@irfanali-cr6up]

Why we can't skip alias level ?

[@UICollectiveDesign]

Check out our 'Guide to Naming & Setup' video

[@marckremers]

@@UICollectiveDesign but yo, maybe i'm being thicc, but you mention a link about variable naming at the beginning (2nd chapter) but I can't see it. Maybe this is it (found via comment diving though) so maybe add this explicitly in the description? And if you did and I missed it, my bad.

[@UICollectiveDesign]

My bad bro! Maybe I removed it by accident... not sure why it wasn't there. Thanks for calling it out! Just added it@@marckremers