Study Hall: Using variables in prototypes with modes and conditionals 

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

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.

@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

Another Shopping Cart example? 😖

Love the gist in that

Thank you for this simple and valuable explanations!

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 🙏🏼

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

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

Powerful stuff! Thanks, Miggy

Thank you for the lesson!

I need to see more stuff like this!

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

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.

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.

Thank you so much

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

Yay! Yippee!

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.

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?

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

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

Is naming variables connected to any existing code convention? I see some use all lowercase for the whole label in the variable panel. When there's two words I see some separate the variable label with an Uppercase letter like "inCartCount". Other times I've seen people use sentence case like "In cart count" with no separator character. I've also seen alot of all lowercase with a - as separator, like "in-cart-count." However, in this video underscore is used as a label separator "in_cart_count". So what's the most semantically correct way?! It obviously works all ways in Figma but would be nice to match the developer way of doing things since this whole variable feature is supposed to simulate the developer approach according to Figma.

Awesomesauce

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

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)

I know figma is a tool with more focus on the apps rather than on websites but I would love to see a tutorial in using variables and all other systems in building web pages and how the responsive could be made using all of the most recent updates etc.

Has anyone tried this tutorial as of late? The conditional clauses he's showing during 22:22 don't seem to work anymore. When adding or subtracting a fruit it only adds to the total when apples are selected, that is, when a variable from the default/ first mode is selected, in this case the "apple mode". It looks like it's a new bug?

Wish they allowed having more than 4 modes before running into a paywall. The way that this 'best-practice' is architected means that every single object (in this case each 'fruit') needs to be represented as a mode. What happens when I need to represent >4 rows in a table of users? That's hardly an edge case. Guess we have to pay for such 'advanced' functionality.

I've created Three modes based on the tutorial, but the end result only works on Auto Mode. I'm using the Students' plan. Will work this tutorial (mode) on the Student's plan?

why my total cart not updating:(

figma plugin uninstalling how come

i dont know why, to me working only in "apple mode"

I felt so much smarter when I hacked the prototype to do stuff that were not possible. Now when it is this easy, I refuse to use it ;))))

Didn’t this already been showcased by the lady the other day?

Spam And Not Slay

Nice content! But this is too advanced for a designer. It feels so much like some deep engineering stuff. It's as if I need to have some foundation in programming to understand this level of prototyping.

just change the F to an L

This is bullshit. Why can’t I use Nocode platforms. So much effort for only design and to cater one scenario alone