Figma Variables Setup: Building a Variable Library

Unlock the secrets to Figma variable mastery in this tutorial on setting up your ‪@Figma‬ variable library. *Please note that this is meant to serve as a foundation. All library needs are different.
Part 2: • Figma Variables: Build...
Build a community profile + join the community: www.uicollective.co/
Resource library: resources.uicollective.co/
Request a design system audit: www.uicollective.co/design-sy...
Download the Figma Variable starter kit mentioned: resources.uicollective.co/che...
Our Figma Plugin: www.figma.com/community/plugi...
Token/variable naming video: • Master Figma Tokens & ...
0:00 An Introduction
0:49 Spacing Variables
3:01 Radius Variables
4:40 Brand Colors
14:48 Alias Colors
24:09 Mapped Text Colors
28:28 Mapped Icon Colors
29:36 Mapped Surface Colors
37:09 Mapped Border Colors

[@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.

[@jackiet.5156]

Tip: shift+enter to duplicate the last added variable

[@UICollectiveDesign]

Great tip!!

[@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!

[@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.

[@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.

[@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!!

[@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

[@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 ?

[@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 :)

[@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