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. 👌👌
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!
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
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.
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.
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.
Hello! Scoping is fully supported for number variables but will be expanded to other variable types in the future. Learn more about how to scope a number variable here: help.figma.com/hc/en-us/articles/15871097384471-The-difference-between-variables-and-styles#Supporting_features
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?
Exactly this is where i also got confused. Those interactions spin me head hahahaa but cool trick i'm not sure if there is a better way to handle this.
Is there any way to control a more complex component that has some nested components in it using boolean variables or maybe a combination of boolean and string variables? Quick example: I have an overlay with a list of countries, this overlay is opened by a click on a dropdown field. I need to be able to click on a country in the overlay list and add a nested component inside the dropdown field and i need to be able to add more than one otherwise i could do it without any variables. It's a long shot and maybe i haven't provided all the details but any hint might help. Thank you.
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?
This is really helpful, would love it if you could create more about conditional prototyping where we can understand more about "If" and "else" cases, one more thing, the first prototype you created where you added 3 boolean actions, what if there are 50 images like this, then will we add 50 different variables?
In the last example, I would like to know the value of the variable “selected item” change along with changing the navigation component set. That’s why is called two-way binding?
The idea is to try to reduce the number of links in the prototype using Variables, that’s was the promise in the Figma show. The real thing is when you try to create a component with animation and Variables to reuse in your prototype like a main navigation or a side navigation this doesn’t work. For this reason, all of these examples Don’t have animations. Try to convert the last example for this slider into a component to reuse on other screens. The “currentitem” variable will be disabled for the instance inside of the “selected” component: item1, item2, and item3. You will get the message “Removed variant bindings from nested instances” The string variables do not work when you try to create smart animations.
Hey, in last example image & navigation components name(item1, item2..) are overlapping due to which I can't apply property to image instance and also facing issues in variable due to this.
One note: dissolve animation is applied when the user clicks on the big images, but it does not appear when the user clicks on the small previews. Is there any way to use such type of animation on the bigger images when clicking the small preview buttons?
Worst usability part is that you have "to guess" to right click on that visibility icon. Other than that whenever I replace a string variable with another string - it changes the font styling to regular - before it was bold. Why is that?
This is a learning curve for me. I foresee that it will become more complex. As I am using the unpaid version as an individual user, I'm unable to practice variables and conditional prototyping. It would be beneficial if the free version could grant access to these features for individuals seeking to practice and learn.
hey you will have access to using variables and modes just by upgrading your account to education plan. go to settings and fill your education details and just click upgrade to education plan, don't worry about verification. you will have access :)
It's a step forward but it still pains me to see that you need to create 3 separate variables just to toggle separate components on and off. You think you could just create 1 variable and reuse that per component, without it affecting the others. More complexity would definitely help, especially with longer item lists and tables, for example.
The interactive component set up is laggy and slow in my template. I tried other approaches but due to the complexity of our templates, the variable approach in general is not performing well. Hope it changes once it's out of beta.
How do you tie component states to conditional logic? It feels like a bug but for some reason, conditional logic breaks the component state interactions.
I've set everything on the last images swap variables, but when I do this 24:06 in stead of assigning the variable to it's respective matching image component, the variable name shows -currentItem- then it says "variable value doesn't map to variant". What could be the issue?
The explanations are kind of fast. In the 'component sets' example when I 'paste in place' I don't get the same version of the navigation that is in this example even though I copied the same one. I think I will try the last example again tomorrow.
great video, please keep posting more to understand more usecases for variables, one question ... so far Booleans can only be used to Hide-Show components? is there any other use case?
You can also use it for boolean properties. Let's say you created a card component, where one of the properties is "Compact", with values "True" and "False". Since Figma treats these as boolean values, you can bind a boolean variable to that property. As a result, you have a variable that toggles the compact mode on/off on your card component. Apart from that, you can use boolean variables in conditional logic.
Thanks for the great tutorial! When I tried to replicate the first animation using different modes, I was able to turn the visibility of each image on and off, but I couldn't figure out how to make the "Show all" button to work. Does anyone know how to make this work?🤔
How do you use this on a component that is being used multiple times on the same screen (eq list item)? As of right now when you have a condition to toggle (show/hide) that all instances of that component trigger the same condition so the component condition doesn't work independently per component instance.
@@Figma ok so I have to create multiple variables, name each of them differently. The variables have the exact same value (boolean [false]). Show/hide an input and image upload for each list item.
Thank you In the first example, how can we change the show icon to a hide icon when the image is hidden and switch back to show when it is back? I made a component for the icon with two states (show, hide) and defined the click action to switch but I think the click action of the instance which includes the conditional action overrides my initial switching action of the component.
Great tutorial - thank you. One thing I can't understand: can anyone explain to me how in the Component Set example the variable value is changed through interacting with the navigation component set? I got it to work, I just don't understand what was done to connect those two things.
Basically the interactive component, during the prototype is not just read only, its current state will also write to/update the variable, changing it. Since both of the interactive component states are bound to the same variable, changing one, impacts the other.
In couple of months we will see something with AI panel and you only need to write some prompts such as: Section with margin 80 / 12 columns/ two boxes, each box 76 width, etc. Next year probably. So you need to be more creative than manage a tool.
I was wondering if this new variable feature allow us to create function that opens one accordion at a time among a bunch of accordions without creating repetitive variations for the component.
yeb I know but it requires tons of repetitive works. Say if I wanna have 6 accordions set then I need to have six instances for that interactive component and do loads of prototyping works. Not to mention if I'd like to have more than 6 accordions.
Thanks man, I was trying to copy/paste the interaction and it ended up copying the whole content of the nested object. Still not sure what isn't considered a mistake
chrisbeltran6676 1 second ago What up Miggi! Are there any workarounds for variables within prototyping to work with deep nested component instances? I want to get this to work with some of the components coming out of my design systems.
The idea of having to copy and paste the interaction on each QWERTY button to add the value of the various letters is not very practical. IMHO It would be better if instead of taking the string 'Q' you could take the contents of the label. this.textLabel.
![[UNCUT] บอสพอล แผลงฤทธิ์ บอสพระ-นักร้อง ก. โดนแฉยับ! I คนดังนั่งเคลียร์ I 21 ต.ค. 67](http://i.ytimg.com/vi/XKf6HeftoPI/mqdefault.jpg)
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. 👌👌
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!
This is a massive upgrade, everything I wanted! Now I don't need an extra prototyping tool for presentations. Thank you Figma!!
Thank you so much. The last prototype in this file is a lifesaver!!!! 🙌
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
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.
Love how the component sets are prototyped with variables. This is going to save a lot of time
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.
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.
So complicated, but so excited to learn this!
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.
Hello! Scoping is fully supported for number variables but will be expanded to other variable types in the future. Learn more about how to scope a number variable here: help.figma.com/hc/en-us/articles/15871097384471-The-difference-between-variables-and-styles#Supporting_features
@@Figma Thank you for the explanation
Miggi, great tut! Been waiting for a proper variables explainer! Love it
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?
Exactly this is where i also got confused. Those interactions spin me head hahahaa but cool trick i'm not sure if there is a better way to handle this.
Thank you for explaining this clearly and simply. I owe you a beer!
Such a helpful tutorial. Thanks so much, Miggi!
Super helpful, thanks for sharing!
Also, never knew you could use cmd+R to rename layers 🤯
@Figma, please implement boolean inversion operator. It is faster to calculate value=NOT(value) than using conditionals.
Is there any way to control a more complex component that has some nested components in it using boolean variables or maybe a combination of boolean and string variables? Quick example: I have an overlay with a list of countries, this overlay is opened by a click on a dropdown field. I need to be able to click on a country in the overlay list and add a nested component inside the dropdown field and i need to be able to add more than one otherwise i could do it without any variables. It's a long shot and maybe i haven't provided all the details but any hint might help. Thank you.
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?
Really helpful need more tutorial like this from figma, thank you !
interactive components demo is 10/10.
Such a helpful video. I'm soo excited to learn those new features 😊👀🤩
thank you so much this will help me a lot in my projects
Really appreciate the demo!
This is really helpful, would love it if you could create more about conditional prototyping where we can understand more about "If" and "else" cases, one more thing, the first prototype you created where you added 3 boolean actions, what if there are 50 images like this, then will we add 50 different variables?
Thank you so much! variable with component is awesome!
Your tutorials are so helpful! Thank you!!
In the last example, I would like to know the value of the variable “selected item” change along with changing the navigation component set. That’s why is called two-way binding?
When Figma becomes its own database.
Really helpful tutorial. Thanks so much.
The idea is to try to reduce the number of links in the prototype using Variables, that’s was the promise in the Figma show. The real thing is when you try to create a component with animation and Variables to reuse in your prototype like a main navigation or a side navigation this doesn’t work. For this reason, all of these examples Don’t have animations. Try to convert the last example for this slider into a component to reuse on other screens. The “currentitem” variable will be disabled for the instance inside of the “selected” component: item1, item2, and item3. You will get the message “Removed variant bindings from nested instances” The string variables do not work when you try to create smart animations.
Desperately need a copy button for statements inside interactions. It’s a pain to have to manually input the same condition with only a few tweaks.
hey, you did a great job with this video
Hey, in last example image & navigation components name(item1, item2..) are overlapping due to which I can't apply property to image instance and also facing issues in variable due to this.
Miggi you are the real MVPPPPPPPPPP
❤
One note: dissolve animation is applied when the user clicks on the big images, but it does not appear when the user clicks on the small previews. Is there any way to use such type of animation on the bigger images when clicking the small preview buttons?
Worst usability part is that you have "to guess" to right click on that visibility icon. Other than that whenever I replace a string variable with another string - it changes the font styling to regular - before it was bold. Why is that?
Great update! How to do linkage /chain? By dragging one element to control the transparency displacement of another element to change? Thank u
This is a learning curve for me. I foresee that it will become more complex. As I am using the unpaid version as an individual user, I'm unable to practice variables and conditional prototyping. It would be beneficial if the free version could grant access to these features for individuals seeking to practice and learn.
hey you will have access to using variables and modes just by upgrading your account to education plan. go to settings and fill your education details and just click upgrade to education plan, don't worry about verification. you will have access :)
@kishorekumar8216 Hi K, Really? That's great, thank you for sharing! I have purchased it recently. Hopefully, I can get a refund or partial refund.
It's a step forward but it still pains me to see that you need to create 3 separate variables just to toggle separate components on and off. You think you could just create 1 variable and reuse that per component, without it affecting the others. More complexity would definitely help, especially with longer item lists and tables, for example.
great tutorial! thank you very much
Do you have any tutorials on creating calendars with variables?
Nice one Sensei 🙏
Appreciate you!
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.
Hi! How did you get your head to pop out from the explaining frame? Is there an internal software that you use?
I use OBS and a green screen.
Nice Rochester Hat👍
Thanks! It was made by a former student of mine.
Thanks, Miggi 👏👍
The interactive component set up is laggy and slow in my template. I tried other approaches but due to the complexity of our templates, the variable approach in general is not performing well. Hope it changes once it's out of beta.
How do you tie component states to conditional logic? It feels like a bug but for some reason, conditional logic breaks the component state interactions.
I've set everything on the last images swap variables, but when I do this 24:06 in stead of assigning the variable to it's respective matching image component, the variable name shows -currentItem- then it says "variable value doesn't map to variant". What could be the issue?
Never mind, I got the solution. I "wrongly" named the numbers. I had item 01 instead of item 1
@@slack. no worries. It happens to the best of us. Not shown: many outtakes.
The explanations are kind of fast. In the 'component sets' example when I 'paste in place' I don't get the same version of the navigation that is in this example even though I copied the same one. I think I will try the last example again tomorrow.
great video, please keep posting more to understand more usecases for variables, one question ... so far Booleans can only be used to Hide-Show components? is there any other use case?
You can also use it for boolean properties.
Let's say you created a card component, where one of the properties is "Compact", with values "True" and "False". Since Figma treats these as boolean values, you can bind a boolean variable to that property.
As a result, you have a variable that toggles the compact mode on/off on your card component.
Apart from that, you can use boolean variables in conditional logic.
Also if you have a component or layers within an auto layout, they will collapse when hidden.
Thanks for the great tutorial! When I tried to replicate the first animation using different modes, I was able to turn the visibility of each image on and off, but I couldn't figure out how to make the "Show all" button to work. Does anyone know how to make this work?🤔
How do you use this on a component that is being used multiple times on the same screen (eq list item)? As of right now when you have a condition to toggle (show/hide) that all instances of that component trigger the same condition so the component condition doesn't work independently per component instance.
apply the interactions to the instances, not the main component, provide different values for each. - Mig
@@Figma ok so I have to create multiple variables, name each of them differently. The variables have the exact same value (boolean [false]). Show/hide an input and image upload for each list item.
Thank you
In the first example, how can we change the show icon to a hide icon when the image is hidden and switch back to show when it is back? I made a component for the icon with two states (show, hide) and defined the click action to switch but I think the click action of the instance which includes the conditional action overrides my initial switching action of the component.
Found it. Remove any interaction between the component states. Use text variable to change the show/hide states with conditional action.
Thanks, very useful.
incredible video!
Great tutorial - thank you. One thing I can't understand: can anyone explain to me how in the Component Set example the variable value is changed through interacting with the navigation component set? I got it to work, I just don't understand what was done to connect those two things.
Basically the interactive component, during the prototype is not just read only, its current state will also write to/update the variable, changing it. Since both of the interactive component states are bound to the same variable, changing one, impacts the other.
@@figma-miggi Thanks for the rpely. That makes sense, although a little confusing at first.
So does everything with variables attached need to be a component?!
copy pasting interactions doesn't seem to work on my end 😥
Thank You
Oh,It is amazing.
Excellent
In couple of months we will see something with AI panel and you only need to write some prompts such as: Section with margin 80 / 12 columns/ two boxes, each box 76 width, etc. Next year probably. So you need to be more creative than manage a tool.
OH ! Why I can't copy the interaction? Its copying the whole + component.
hi, how to set min value 0 in decrement?
You will need to write a conditional statement to keep the number from going below zero. Check out the next video in the series, its covered.
Amazing!
clear tutorial
Awesome!
I was wondering if this new variable feature allow us to create function that opens one accordion at a time among a bunch of accordions without creating repetitive variations for the component.
You could already do that with interactive components
Yeah can make each accordion an instance that changes state on click.
yeb I know but it requires tons of repetitive works. Say if I wanna have 6 accordions set then I need to have six instances for that interactive component and do loads of prototyping works. Not to mention if I'd like to have more than 6 accordions.
Just thinking whether the variable and conditional features can easily solve it
Thanks man, I was trying to copy/paste the interaction and it ended up copying the whole content of the nested object. Still not sure what isn't considered a mistake
If you have a variable that has been deleted, or removed, or that does not exist in the file. It may error.
It works but you have to click the bigger container for the interaction until the entire container is highlighted blue, then you can copy and paste
i'm facing the same issue
With the copy/paste of number variable button +/- does not work for me
chrisbeltran6676
1 second ago
What up Miggi! Are there any workarounds for variables within prototyping to work with deep nested component instances? I want to get this to work with some of the components coming out of my design systems.
Amazing
Thanks for bonus
In 5 years, we're going to see Figma be able to host websites.
Good bye Webflow and framer.
Yes some great new things but I continue to prefer Principleformac, more intuitive and it really lacks a timeline
Who really cares
Yeah I never thought timeline for design tools made much sense
I also love principle for mac, depending what I am trying to demonstrate, prototype, I use a different tool.
Damn Figma.
Goodbye all other design software.
👏 👏 👏
🤯🤯🤯
guy sounds like he occasionally remebers he should have a Brooklyn accent
Good tutorial. But the ux for this tool is so bad, its completely un intuitive, its upsetting, who made this mess?
I find this feature to be so buggy that it's not even worth using
I ❤ ur miggi
Ohuena spas no))
The idea of having to copy and paste the interaction on each QWERTY button to add the value of the various letters is not very practical. IMHO It would be better if instead of taking the string 'Q' you could take the contents of the label. this.textLabel.
You can do something similar with modes. Though still not practical for this explicit example. I will be doing a video on prototyping with modes.
@@figma-miggi Thank you!