Figma is the greatest design tool ever created. Thank you, Figma!

Your tutorials and product are incredible. I'm not a designer but Figma is slowly changing that.

just started experimenting with variables, this video really helped to show what variables can do and the extend of use. well made

I love these tutorials. They're soo....soft 😊

Awesome Tutorial. Thanks a lot!

I'm designing a robust condition builder component for quite some time. It has always been an issue to prototype it in code, because of the complexity and time demand from our devs. I am grateful that I can now try out the variable within Figma! I want to learn more about the limits of the tool, as my component is an advanced condition builder, utilizing Nth grandchildren, calculation, various operators between conditions and condition sets.

you guys are just amazing, and here I thought variables are hard.

Thank you for sharing this, it saved my day.

Will be hard to master, but can save so much time in prototyping later, nice job

amazing! thank you :)

thanks for great tutorial ❤❤

Best tutorial for this topic out there. Keep 'em coming! Great narration, awesome tips. Very clear and concise

Amazing. Thanks guys

Looks great, thank you for sharing. It will save a lot of time regarding app prototyping. Please continue to share this kind of practical insights :)

Boy do I Love my conditionals ❤ just need more MODES. 4 is just not enough 😂

Nice_ 😍

Amazing stuff folks. Wish it worked in nested components though. Also, is there a way to make the "navigate to" action only work when the continue CTA is switched to the available state? :) Many thanks.

@Figma

7 ай бұрын

Hi, you should be able to achieve that by adding a nested "Navigate to" action inside a Conditional action!

Great video. It helped me. I would like to know how I can put restrictions on the selection of topics in onboarding, if I only need 3 topics for example.

@Figma

7 ай бұрын

Hi, here is a quick exploration that I did with max 3 topics selection: www.figma.com/file/bXSH8MNBFyZ71Dn6mBKwzg/Prototype-with-variables-(with-3-max-selection)?type=design&node-id=1-99&mode=design&t=SfiUK2mpsQkJpvwO-0

This is a great tutorial, but I have a question: what if you give the user a maximum of 3 topics to choose from, and the logic doesn't seem to support multiple IFs?

@Figma

7 ай бұрын

Hi, you should be able to do it! Here is a quick exploration that I did with max 3 topics selection: www.figma.com/file/bXSH8MNBFyZ71Dn6mBKwzg/Prototype-with-variables-(with-3-max-selection)?type=design&node-id=1%3A99&mode=design&t=I749Bd5rRp20ujQH-1

Can you suggest a good video for understanding variables? I don’t get them at all

Well the list scrolls before assigning them variables but after assigning local variables and selecting specific topics the list isnt scrolling

Make your interactive variants be able to interact cross different variant sets. For example i need to change my tumbler layer, and i make states of this tumbler in one variant set, and then i add this variant to another variant, and i want do interaction to change nested variant from another variant set by click on some frame on high layer with this nested variant. And this will change only nested variant in variant. Now i have to make a lot of states of high layer variant and swap nested instances in them, but if you add this feature i can make just one high layer variant, and by interaction to other set with used nested instance from them change my high layer variant without making additional variants of it, just change nested variants by interactions, like change to. Now i cant do this, i only can change to variant from set, layer from which variant i used to make interaction. It makes a lot of unnecessary work. I just need click on layer in variant from one set and make interaction to another set variant to change nested variants quick, without a lot of components with swapped instances

Random question! What software did you use to create the animated illustrations you showed here? Particularly at 8:50?

Hi, I have a problem with button state. Even if I follow the steps, button always allows to go to the homepage. How to fix it?

how do use use the code, strings, boolean variables etc to make a TOGGLE where only one can e selected and the other shut off? I can't find an answer for this anywhere!!

how came the contents automatically goes up the screen even if they are initially placed all the way below? like the food frame, if you select its category then in the next window it will show up automatically in your viewport even if it is originally placed at the bottom of the frame where you need to scroll down before seeing. Thank you for your answers

@Figma

13 күн бұрын

That's because the content are inside an auto layout frame.

@Jr-bu8in

12 күн бұрын

@@Figma I see, thank you so much!

Can't do it unless I buy Figma Pro? rip

This is OK, but shouldn’t things like Boolean variables be applicable at a higher level? Like, for the similar characteristics of each variant? One button component, one Boolean variable. Not one for each actual button.

How do i check for two conditions in other for the button to be active.. i.e: 4 input Field selected and a Checkbox True, before button becomes active. i pray you understands my jagorns.. 😢😢

@Figma

5 ай бұрын

Hi, you can use the symbol "and" in your conditional action to check for two conditions.

The ideas of the latest features are good but realization is terrible. After these months I still can’t say that features are user friendly

@Beanaification

7 ай бұрын

Agree, it is becoming complicated!

@figma How can engineers see the handoff specs for the cards in the 'Homepage' when they are hidden and only become visible in the prototype when the user selects a topic?

@Figma

7 ай бұрын

Hi, this prototype is built for user testing! I would share a different file with the design specs with the developers.

@danjackson4460

7 ай бұрын

@@Figma Thanks.

@czerskip

7 ай бұрын

​@@FigmaThat's ridiculous… 🤦‍♂️

I added a "return" button at the "homepage" to return to the "get started" page, if I use the Skip button at the start and then return, I want all the options to reset but instead, I end up with all the options remaining selected, I also want the options I selected to remain selected after returning when I decide to not use Skip. So how would I achieve this?

@FernandoLins

7 ай бұрын

I believe you need to check "Reset component states" on your Navigate to action, and also reset the values of all variables that are not attached to a component state to their initial value.

Nothing on how slow and unresonsive figma becomes with more than 2 conditional interactions

This really is almost useless until we can assign variables to nested components, not only the ones embedded in top level frames. 🤦‍♂️

@raynifrozen

7 ай бұрын

I am totally agree. I have only nested buttons that are parts of the cards or sidebar or pop-ups, so for now it is impossible to assign a variable to the nested button that a part of something else. So for now variables are totally useless. But I hope Figma are working on its next update that alow to use variables for nested components. And in this case it will be real breakthrough. We are waiting for this.

@thetrailhunter4469

7 ай бұрын

Yep , just managed to get it all working, but I want the form and a conditional button state to work within a nested component and it breaks. Amazing though.

@Figma

7 ай бұрын

@czerskip @raynifrozen @thetrailhunter4469 Good news! We just released some updates on variables, and now you can bind variables to nested instances.

I was stuck in the set variable part😖I set the variable and conditional stuff but it's just not works

@VictorySports987

Ай бұрын

I can't help myself with the it also, I can't find the variables Created in the edit panel

@khantminthu4025

7 күн бұрын

try to set variant values to only "true" or "false" (boolean value) others like "uncheck" and "check" for instances will not work.

@linjia-ying4867

7 сағат бұрын

@@khantminthu4025 thank you so much!

Video is good, but with this method we reduced the number of screens but increased the number of Local Components. Which is good for smaller flows, but entire App to be prototyped will be true mess again 😟

And it is bad approach to hide content in Edit mode because managerers that are looking that page are don't understant that page is ready and filled because they see nothing. And duplicating the same pages with hide and unhide content increases memory using and leads to warning that memory is not enough. So better to avoid duplicating pages. So it is better to show all content in Edit mode for managers but in Presentation to hide that are not required.

Figma, please make better tutorials. You show us how to do stuff, but you skip over a lot of steps (because they are already done) and you don't explain why you're doing what you're doing, so it makes it hard to transfer the logic to our own designs.

@Figma

7 ай бұрын

Hello, thanks for the feedback! You can grab a copy of the Community file in the description to follow along with the tutorial. Hopefully that will help you understand the concepts/logic better.