Study Hall: Using variables in prototypes 101

In this Study Hall, we cover the different ways that variables can be added when creating prototypes, and how you can use them to make them more dynamic and with fewer frames. We cover all of the currently available variable types: Booleans, numbers, text strings, colors, and even discuss how to bind string variables to interactive components.

00:00 Intro
00:20 Booleans
07:43 Numbers
13:49 Strings
18:46 Colors
20:56 Interactive Components

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

[rasavarnam]

Although I initially find it easy to understand when I see it, I struggle to apply it effectively in real-life projects. As a non-coder, I believe there is a learning curve that I need to overcome. I hope to become proficient in these features soon and find them useful in my work. As always, top notch tutorial! Thank you, as I could use this tutorial as a guide whenever am in doubt. 👌👌

[IsabelleBamber]

This is the best variables in prototyping tutorial i have come accross. You are so clear and articulate when you speak and the examples you give are simple enough to understand without getting overwhelmed as its quite a complex new update :) Thank you!

[Phoca_Vitulina]

As a designer who started my journey as a developer, this is so awesome! I've been waiting so long for variables in prototypes in figma, and this is just wonderful <3 This update and the auto-spell check update were just like, chef's kiss <3 Thanks again!

[ericmunro]

This is a massive upgrade, everything I wanted! Now I don't need an extra prototyping tool for presentations. Thank you Figma!!

[Freshhsocks]

I know it’s powerful but its also complicated. It’s going to take me some practice to wrap my head around this and all of the potential use cases.

[underscoreroa]

I'm not in education but I find that features that are new to me are easier to understand in this series of Edu videos. Once I have the fundamentals, I can watch the 'regular' Figma tutorials.

[saurabhhaldankar]

Love how the component sets are prototyped with variables. This is going to save a lot of time

[manuelesposito]

Thank you so much. The last prototype in this file is a lifesaver!!!! 🙌

[jamesgrubb]

Personally, it's a little tricky to get my head around the fact that you hard code 'item 2' into the variable 'currentItem', but then 'item 2' magicaly becomes dynamic. I feel I need that explained a little more?

[peppapig]

for example 1, i had no idea you had to right click the eye to access the booleans! I was expecting to see the little nut/cog thing. Thanks for showing us.

[fiordnord]

Miggi, great tut! Been waiting for a proper variables explainer! Love it

[austinlin]

So complicated, but so excited to learn this!

[victorayala_]

Thank you for explaining this clearly and simply. I owe you a beer!

[maximbrykov]

Guys from Figma, you are awesome. Variables open up a lot of possibilities, and I really like that. However, it seems worth considering the ability to control the scope of variables. Yes, it adds complexity, but otherwise, we will end up with a very long list of variables and face naming issues.

[Underhills]

Kudos for great tutorial. This may create less frames but it takes forever to do, it's classic over engineering, so dunno how much of a progress this is for all practical terms. To me most of this variable stuff is identical to having props. The string example for instance is like a text prop. So what's supposed to happen with prop functionality now? Are they gonna live side by side?

[raweo]

At 18:27, second time you click the letters”S”, “W”, etc, why it doesn’t show “Hello world!” anymore when the variable still set to message + “S”, etc.

[matthew_prina]

Super helpful, thanks for sharing!

Also, never knew you could use cmd+R to rename layers 🤯

[joeyabanks]

Such a helpful tutorial. Thanks so much, Miggi!

[arunb]

Really helpful need more tutorial like this from figma, thank you !

[DesignEngineer-i]

Such a helpful video. I'm soo excited to learn those new features 😊👀🤩