Figma Variables, Dynamic spacing tokens

Welcome to my channel, Design Thinkers! In this video, I'm Matthew Sear, and I'll be showcasing the exciting new features in Figma, specifically focusing on variables. I'll guide you through the process of creating dynamic spacing in your designs using the new variable system.
In this video, you'll learn:
1️⃣ Understanding the concept of spacing tokens and their importance in design scalability.
2️⃣ Exploring Figma's variable collections and how to set up scaling points for different screen sizes.
3️⃣ Step-by-step walkthrough of creating a scalable button using spacing variables.
4️⃣ Applying spacing tokens to adapt and resize designs seamlessly.
5️⃣ Pro tips and best practices for using spacing tokens effectively in your design workflow.

[@kupidoons2]

I think this is very clever. I was looking for the possibility to use spacing variables to "auto adjust" based on, let's say, screen rezolutions as an example. Thank you 🎉

[@shibly95]

Hi, this is really good. Can you tell me one thing please? I am making a design system, I made the color tokens for dark and light mode. Since I have text, spacings, and other variables on that mapped collection as well so every one of them got dark and light modes. But I want to make “desktop” “tablet” “mobile” modes for spacing and typography. Is it possible to use all of these in the same figma file? I tried but it didn't work. If not then is there a way to do that?

[@pixellink.design]

I am releasing a typography scaling video, that should address most of these questions. I just use a base scaling set and align the value into font size collection. If you want to split where you use variables, I would recommend spliting by types and use a primitive set of values called "scale" or "sizes". Then you can use the scale variables in specific sets like font size or spacing, padding, rounding, bounce ECT.

[@hetpatel2805]

Can we get this file url?

[@siskoDE]

Not the best tutorial. A lot of confusions

[@pixellink.design]

Sorry to hear that how can I improve the video to help you out more in the future?

[@oposkainaxei]

Yep.

[@Stevenchustudio]

I wasn’t clear about the final art board demo at the end. It looked like the button stayed the same across all 3 screen sizes , and only switched to small when you manually switched it to small? Maybe I misunderstood what to do? Ty!

[@user-df3nh7xr8u]

Hope you will cut the unnecessary parts in the video next time.