Study Hall: Using variables in prototypes with modes and conditionals

In this Study Hall, learn how to apply the use of variables in your prototypes with the assistance of variable modes and conditional logic to create a more realistic shopping cart prototype that uses real math.

____________________________________________________

Find us on ⬇️

____________________________________________________

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

[SatyamBarnwal]

This was a bomb. The concept of using Variables into Prototypes made me 100x more excited to learn figma and all the advance functions.
Thanks figma!!❤❤

[peterdps]

This looks overall too complicated for a designer and really time consuming. Wondering how much of these would bring any value for a team to put out to test to users.
Yes it looks fun to make it work like you were an engineer, but im assuming they would be able to make it quicker and easier. Overall i find amazing that figma allows to do so, i just don't see the benefit of it rather then the fact to prove that it can be done. What i do think is that animations are missing and wondering if they can be introduced in this type of prototyping with the variables. Everything is stiff and not to pleasant for the overall experience.

[clevermissfox]

Does anyone understand why he made a second component of the product card just for the cart prototype? I thought he already made and wired the card but then he had to set the variables of name and price again.

[renanmalato]

Hi, is it possible to click on the + button do load a variable, but still make an interaction like change color? (would be 2 taps / clicks interactions)

[sahilaelc]

WOW – it really all starts to make sense ... now I only need to adapt all of this knowledge 😁 
I would like to see how variables change our workflow when using buttons with different states like default, hover, disabled, ... – that would be great – thank you 🙏🏼

[koraljkadecarina]

@miggi-from-figgi It would be nice to see another study hall prototyping with variables video with another example other than the shopping cart so we can get more practice and greater ideas for usage

[milksliced]

Ahhhh using the back key to choose mode. I’ve been looking for how to change mode on interaction. No one on Reddit could help me with that either. Maybe make that more obvious in a future release

[Underhills]

Great stuff. Really nice to get these high-res videos with both conceptual and practical approach 💪

[IrinaNikishina-xt]

Thanks for the cool lessons! Can you tell me why when copying a frame from mango and switching to apple, Total stops working in the prototype? Everything is ok on mango

[ahmedalaraj]

That's done the work, but the problem is it's not practical in a real big prototype, as creating modes like this is very committal, I would really suggest that Figma implement something like "this" function, that automatically indicates which components should be affected.

[mike.ivchenko]

Thank you for this simple and valuable explanations!

[lubahickey]

Thank you, this is very helpful! On a side note, how did you achieve on the cart screen for the Total price section to move up or down as you add/remove cart items to/from the cart?

[garyvoigt]

Thank you for making these videos so fun and easy to understand.

[Blackcat]

Thank you for creating these variable/advanced prototyping study hall videos! So helpful, and the video length is good! Keep 'em coming :)

[harshitsharma-mhsw]

This helped a lot. Thank you so Figma to make such great study content on variable. I hope you make more in detailed content which will keep our learning pace on peak.

[cartertanton]

Hi, in both preview and the main prototype window, when I click the plus to change the total price my fonts change to a default font everytime. Any idea what's happening? Thanks

[PPA-xk]

Thank you Very much. this is reslove my problem. I hope to see more topic form you.

[djashawe]

I love this kind of practical demo! Thanks Miggy! Please keep them coming! I love how organized and efficient his way is! 🤩💯
I have a quick question! Should we assign the variable to an instance or the component(or if it doesn't matter)?

[annienar]

It would be more useful to have a more complex tutorial were the example is not about a shopping cart. It's difficult to implement the variables in more complex, and not so linear, projects

[SisiBisi-zhcj]

You are amazing, thank you so much. It is done correctly❤