Supercharge Your Figma Variables | Spacing and Sizing Variables

Welcome to our latest tutorial on supercharging your Figma workflow! In this video, we'll dive deep into harnessing the power of variables, specifically focusing on spacing and sizing variables in Figma.

0:00 An Introduction
0:30 Difference between spacing and sizing variables
1:46 Building the Brand Collection
5:21 Building the Alias Collection
8:46 Building the Mapped Collection
14:32 Working with Individual Variables

[fryonthemoon]

Variables are brilliant. However, the approach you showed in the video is really hard for development. E.g. if you're creating a component with mapped variable you might likely forget what size that mapped variable has. So that you should trace a value from mapped collection to alias, then to the brand collection. Any ideas how that may be simplified?

[ElementoryMyDearWatson]

Hoping the day will eventually come when we can use clamp functions and REM values

I have a question, why create alias collections for spacing and sizing? Don't they work well directly from primitive ones?

[thomasrenon]

you said you use 100 scale to add something in between but then you matched them to a tee-shirt scale. What would happen then if you had to add 150?

[AngyBrooksPersonal]

As always, I appreciate your in-depth videos. I have a few questions:

Regarding your Brand spacing/sizing, why not just make it the actual value if you’re going to point Alias tokens with t-shirt sizing at it? E.g., at the Brand level: spacing-4=4px, sizing-8=8px? Wouldn’t that achieve the same thing while also making the underlying values of the Brand tokens more easily understood when assigning/looking at the Alias tokens? 



OR, because you’ve abstracted it to another reference tier (Mapped) is my point moot? It seems to me as though the Mapped collection is being used as a component tier, as opposed to core/global or alias/semantic tier. If it’s NOT a component tier, why have a second alias tier at all? This seems like an extra layer of complexity to me.

Thank you.

[dussdev]

I struggle to take the t-shirt sizing method seriously. Maybe it's the woodworker in me. Any real reasons why it's desirable?

[Fabian-fkqs]

When using a 4pt/8pt system: How to account for the border of elements? Either you have <border_size> px less padding e.g. around the icon of and the buttons border or your button is <border_size> px larger. Even if you choose the first option what if you have an outlined version and a filled version of that button. Either the content inside of the button does not has the same spacing to the button sides as the filled button or it has, meaning the buttons content is not vertically aligned with the other buttons content (that effect stacks when using multiple outlined/filled buttons next to each other and is a huge problem when an outlined button should become filled once hovered due to content jumps). Buttons are just one example, there are more.

Does anyone know how to deal with that in real world projects? Saying the devs we use multiples of 4 but in reality there are odd numbers due to border usage.

[АлексейСмазнов-ви]

Hi! I wonder, why didn't you place desktop, tablet and mobile variations at the aliases level?

[WePiphany]

Looking forward to the day Figma supports relative units and calc().specifically for type and spacing.

[Shahraman]

Wait, but... should the sizing for mobile be larger than for desktop, right? For instance, when creating buttons with variables

[russelltokar]

Wy use a 100 scale and not the actual value of the "value"

[gracerx]

You didn't show the result effects of the sizing on the squares.

[Thingwithlegs]

This is a great video but I need to add one suggestion, please alert viewers that this tutorial needs a premium figma version, many freelance designers work like this, we can’t add more than one mode. Still nice to learn though….

[TrickyPasta]

Naming your tokens on a 100 scale kind of defeats the purpose of its flexibility. You'll end up with a mess of a system by having irregular increments going from 100, to 150, 160 then jumping to 200 (and their values aren't correlated to the actual pixel value, which is even more confusing and will require people to have a table of reference).... makes no sense. Just name your tokens to what the spacing value is...