Supercharge Your Figma Variables | Spacing and Sizing Variables

Рет қаралды 6,148

Күн бұрын

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

Пікірлер: 26

@Fabian-fk8qs 3 сағат бұрын

When using a 4pt/8pt system: How to account for the border of elements? Either you have px less padding e.g. around the icon of and the buttons border or your button is 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.

@WePiphany 3 ай бұрын

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

@UICollectiveDesign 3 ай бұрын

I agree! Long overdue honestly

@WePiphany 3 ай бұрын

@@UICollectiveDesign I think it would remove the need for modes and aliasing to the extent we must today. It must be near impossible to get relative units to work if they decide to go this long, painful direction first?

@UICollectiveDesign 2 ай бұрын

@@WePiphany Agreed on that. Will be interesting to see how Figma manages to support the more complex functionality, without sacrificing the basic needs of the everyday user.

@fryonthemoon 3 ай бұрын

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?

@UICollectiveDesign 3 ай бұрын

The tokens in themselves reference the initial brand or primitive values. Are you using token studio to sync with your developers? It would be good to understand what issue your devs are having, maybe we can setup a call with one of our tech leads.

@AngyBrooksPersonal 5 ай бұрын

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.

@Underhills 5 ай бұрын

Think he was referring to the logic behind the brand values in the beginning, that numbers are more generic and easier to administrate in smaller increments in case you need that for one off instances, like he demoed at the last part, BUT what I struggled to understand is why those increments should be more "fine tuned" by property in general than the pre-defined t-shirt sizes. Cause if the Alias variables are set to identically represent the Brand values, then those Brand values could also be t-shirt sizes, making the system easier to administrate. Numbers are less restricted to the label formats so it kinda makes sense to base everything on that and then assign pre-defined size labels like S, M etc to Alias variables in different contexts. Just seems a bit double trouble to have different measurement concepts if it's all assigned to the same t-shirts anywho. Perhaps I've missed out on some logic here, wouldn't be the first time 😂

@UICollectiveDesign 5 ай бұрын

Great dialogue! So 100 scale in brand just offers flexibility if you do need to add others. Then t-shirt sizing in Mapped because this is generally clearer to every designer than 100 scale sizing. Sorry for the short response... on my phone at an airport :) @@Underhills

@user-sx4ev9qu6s 3 ай бұрын

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

@UICollectiveDesign 2 ай бұрын

You can do this as well if you want them more global :)

@thomasrenon 4 ай бұрын

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?

@UICollectiveDesign 4 ай бұрын

Provided some examples at the end on how to squeeze those in. You also don't need to switch to t-shirt sizing. I just like to use it really :)

@UICollectiveDesign 4 ай бұрын

Really great question though!

@Shahraman 5 ай бұрын

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

@UICollectiveDesign 5 ай бұрын

Not for everything, but it depends on the brand

@gracerx Ай бұрын

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

@UICollectiveDesign Ай бұрын

Sorry! Was an overlook when filming

@calvinogood 5 ай бұрын

4:50, is 56 right?

@UICollectiveDesign 5 ай бұрын

Sorry, should be 64. Typo while recording.

@mojito1216 5 ай бұрын

❤❤🎉

@mojito1216 5 ай бұрын

Please make tutorial on complete prototyping ❣️

@UICollectiveDesign 5 ай бұрын

Will do!@@mojito1216

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

@UICollectiveDesign Ай бұрын

That's a great call out. Thanks for the suggestion! Will do better