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

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.

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

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

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

Such a helpful tutorial. Thanks so much, Miggi!

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

Your tutorials are so helpful! Thank you!!

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?

@hassamali8581

10 ай бұрын

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.

So complicated, but so excited to learn this!

Really appreciate the demo!

Really helpful tutorial. Thanks so much.

Thank you so much! variable with component is awesome!

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.

Super helpful, thanks for sharing! Also, never knew you could use cmd+R to rename layers 🤯

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

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

great tutorial! thank you very much

When Figma becomes its own database.

thank you so much this will help me a lot in my projects

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.

@Figma

11 ай бұрын

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

@maximbrykov

11 ай бұрын

@@Figma Thank you for the explanation

interactive components demo is 10/10.

incredible video!

Thanks, Miggi 👏👍

hey, you did a great job with this video

@Figma, please implement boolean inversion operator. It is faster to calculate value=NOT(value) than using conditionals.

Thanks, very useful.

Miggi you are the real MVPPPPPPPPPP

@miggi-from-figgi

11 ай бұрын

❤

Nice one Sensei 🙏

@figma-miggi

11 ай бұрын

Appreciate you!

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?

Awesome!

Amazing!

Amazing

clear tutorial

Excellent

Oh,It is amazing.

Great update! How to do linkage /chain? By dragging one element to control the transparency displacement of another element to change? Thank u

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?

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.

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.

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?🤔

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.

Thanks for bonus

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.

Nice Rochester Hat👍

@figma-miggi

11 ай бұрын

Thanks! It was made by a former student of mine.

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?

@tehoko

11 ай бұрын

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.

@miggi-from-figgi

11 ай бұрын

Also if you have a component or layers within an auto layout, they will collapse when hidden.

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?

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.

Do you have any tutorials on creating calendars with variables?

Hi! How did you get your head to pop out from the explaining frame? Is there an internal software that you use?

@miggi-from-figgi

11 ай бұрын

I use OBS and a green screen.

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.

@kishorekumar8216

5 ай бұрын

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 :)

@jaslina6113

5 ай бұрын

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

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?

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.

@Ehsan.Mortazavi

10 ай бұрын

Found it. Remove any interaction between the component states. Use text variable to change the show/hide states with conditional action.

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.

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.

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.

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?

@slack.

11 ай бұрын

Never mind, I got the solution. I "wrongly" named the numbers. I had item 01 instead of item 1

@figma-miggi

11 ай бұрын

@@slack. no worries. It happens to the best of us. Not shown: many outtakes.

👏 👏 👏

🤯🤯🤯

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

11 ай бұрын

apply the interactions to the instances, not the main component, provide different values for each. - Mig

@ianmadrigalmonkey1979

11 ай бұрын

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

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.

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.

@chidorirasenganz

11 ай бұрын

You could already do that with interactive components

@blaskotron

11 ай бұрын

Yeah can make each accordion an instance that changes state on click.

@user-ms4bb2dz1h

11 ай бұрын

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.

@user-ms4bb2dz1h

11 ай бұрын

Just thinking whether the variable and conditional features can easily solve it

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.

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

@miggi-from-figgi

11 ай бұрын

If you have a variable that has been deleted, or removed, or that does not exist in the file. It may error.

@rubychien

11 ай бұрын

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

@PerlaBitar

10 ай бұрын

i'm facing the same issue

@koraljkadecarina3440

10 ай бұрын

With the copy/paste of number variable button +/- does not work for me

copy pasting interactions doesn't seem to work on my end 😥

hi, how to set min value 0 in decrement?

@Figma

10 ай бұрын

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.

So does everything with variables attached need to be a component?!

OH ! Why I can't copy the interaction? Its copying the whole + component.

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.

Yes some great new things but I continue to prefer Principleformac, more intuitive and it really lacks a timeline

@yuultube

11 ай бұрын

Who really cares

@chidorirasenganz

11 ай бұрын

Yeah I never thought timeline for design tools made much sense

@figma-miggi

11 ай бұрын

I also love principle for mac, depending what I am trying to demonstrate, prototype, I use a different tool.

I ❤ ur miggi

In 5 years, we're going to see Figma be able to host websites. Good bye Webflow and framer.

Damn Figma. Goodbye all other design software.

guy sounds like he occasionally remebers he should have a Brooklyn accent

Ohuena spas no))

I find this feature to be so buggy that it's not even worth using

Good tutorial. But the ux for this tool is so bad, its completely un intuitive, its upsetting, who made this mess?

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.

@figma-miggi

11 ай бұрын

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.

@watchmyawsomevideos

11 ай бұрын

@@figma-miggi Thanks for the rpely. That makes sense, although a little confusing at first.

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.

@figma-miggi

11 ай бұрын

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.

@stefanofois-com

11 ай бұрын

@@figma-miggi Thank you!