Detailed Explanation: Advanced Prototyping with Conditional Logic, Variables & Expressions in Figma

This video breaks down Advanced prototyping with conditional logic and expressions into easy steps for easy understanding. using a real-world product page example.
Advanced prototyping (part 2): Add to cart prototyping
• Advanced Prototyping i...
Get Design file in Figma Community
www.figma.com/community/file/...
ecommerce product image slider animation with interactive prototype
• eCommerce Product Imag...
Sign up for Figma using this link
psxid.figma.com/rlgoyubniq3u

[@sillysafe]

thanks for the video! have you ran into button states (variant interactions) issue while working with variables like this?
For example, if you wanted to add a "pressed state" to the plus or the add to cart buttons and maintain the same logic as you've showed in the video.
I've messed around with various combinations of "on tap" and "while press", etc as well as various groupings of items and the variant interactions seems to get stuck on whatever the last interaction state is set to.

[@nekabarizornaata9299]

Your video's are always amazing

[@sarahigbinosa3004]

Thank you Femi. So good to have you back!!

[@femijohn]

Thank you too! I am also very happy to be back. Thank you for your patience.😊

[@OntorBruh]

So easy and clear! Thank you!

[@femijohn]

You're welcome! Thank You.

[@fredkridler4980]

Great video! So. Many. Steps. Really appreciate you walking us through that so efficiently!

[@femijohn]

Glad it was helpful!

[@lucillferchrollo8503]

thank u for sharing your knowledge, hope you always happy and healthy!!

[@Cheoma_Udeze]

Good video, thanks 🙏🏾

[@ayomideashiru554]

This is well done and actually very detailed !!! I just discovered your channel and man, you have got me subscribing!!! Thank you !!

[@femijohn]

You're most welcome. Welcome aboard! 😊

[@eny_codes]

Thank you so much for this video. I'll always make reference to this video anytime I want.
You always do justice to your interaction videos, I enjoy them

[@femijohn]

I really appreciate the kind words. You’re very welcome 😊 👍🏽

[@vaidehiagarwalla8922]

This video was super good & thorough, thanks for making it!

[@femijohn]

My pleasure!

[@user-so5zc9km5l]

Brilliant video! Thank you.

[@femijohn]

You’re welcome. I appreciate the kind words. 😊

[@princesalman5231]

one of the advance tutorial i have seen

[@cryptic_comet]

Thank you for the detailed look into this, it has been really helpful! 😄

[@femijohn]

You're welcome

[@femijohn]

You're welcome

[@leyetemi]

I always look forward to your videos😁👏👏

[@femijohn]

Thank You, Happy to hear that!😊

[@paulamourad4699]

Wonderful video!!!! Thank you so much!!! 👏

[@femijohn]

You are so welcome!

[@TheChefAine]

Wow 😅😅. That so cool 😍. Thanks for sharing ❤❤

[@femijohn]

Thank you so much ❤️

[@GecrolAcipep]

Wow, this was well explained 👏

[@femijohn]

Glad you think so!

[@RakeshPrajapati-sb3fc]

that's amazing and very detailed explanation. just have a question. If we have tile view that has multiple qty options, how do we segregate with the different conditions? I copied and paste and tried to implement but all options came with the same value. please help me

[@SalimFromATL]

This is great and helpful - thank you!

[@femijohn]

Glad it was helpful!😊

[@jkam2524]

You are great at explaining this!

[@femijohn]

Glad you think so! I appreciate your compliments 😊

[@favourmomoh9567]

Very insightful, Easy to understand. Thank you. 😊

[@femijohn]

Thank you 😁

[@kactusotus56]

wow, this video is so helpful. nice job

[@femijohn]

Glad it was helpful!

[@nbtimac8013]

Thanks, buddy. That is really wonderful video and it helps actully.

[@femijohn]

Glad it helped. You're welcome.

[@wayansusanto14]

Hi there, thanks a lot for the clear and easy to understand video tutorial

[@femijohn]

You’re welcome 😊

[@miraz_kabir]

Thanks for making this tutorial easy to understand.

[@femijohn]

You’re welcome ☺️

[@ruchirabiswas5445]

Thank you so much for this, this was very well explained and very helpful

[@femijohn]

Glad it was helpful! You're welcome.

[@nayerehpoorjafar6233]

Thank you for the perfect tutorial🙏

[@femijohn]

You’re welcome 🙏😊

[@theubrantrekker]

Thanks..very informative.

[@femijohn]

You’re welcome 🙏

[@josephsoh908]

Sucha good video man, so educational...

[@femijohn]

Glad you think so! Thank you so much

[@nifemi2913]

Thank you so much 🙏🏾❤️.

[@femijohn]

You are so welcome😊

[@NihalPalocaren]

Keep up the good work!

[@femijohn]

Thanks, will do!😊

[@phatbi971]

Top Class Explanation.
The way you teach your designs is why I followed this channel. Big up bro👊🏾🔥

[@femijohn]

Thank You, I appreciate your kind words. 😊

[@ken4275]

Thank you for sharing, it's cool. 🙏🏼

[@femijohn]

My pleasure!

[@manojsr]

What an amazing video and teaching style. You made a complex topic so simple. Keep going.❤️❤️❤️

[@femijohn]

Thank you so much. I appreciate your kind words ❤️🚀

[@amartinezroa]

Finally someone clearly explain the efficient way to do this, thanks a lot really :)

[@femijohn]

You're welcome.😊

[@UCCANANDHAKUMARV]

You are so Great Bro 🥰

[@femijohn]

Thank you so much ☺️🥹🚀

[@prasanthmoolethodi3152]

Thank you @Thefemijohn for sharing your videos with us. this tutorial helps me to improve my Figma prototyping to the next level.
You are Awesome Bro :)

[@femijohn]

You're welcome

[@chiemeriechibuzor3989]

Thanks for sharing🙏

[@femijohn]

You’re welcome 👍🏽

[@adeoladamilola5469]

Thank you so much

[@femijohn]

You're most welcome 😊

[@nekabarizornaata9299]

Great video.
Did you go straight to variables without creating a variant for it

[@hehebupbup]

Thanks for your explanation. I have understood how it should work😄Really helpfull video

[@femijohn]

Glad it was helpful! you're welcome 😊

[@ThomKozik]

Excellent tutorial. Well-paced, with appropriately detailed step-by-step instructions. Better still, you explained the use case and the desired outcome plainly, before each sequence, building upon the functionality as you go 👏👏👏

[@femijohn]

Thank you so much for the kind compliment. I appreciate it.

[@SimamkelePikelela]

Thanks for this tut bro, it just helped me so much. I even got an idea to use these variables in my project, meaning watching this tutorial has met my expectations and beyond. God bless you for sharing this info 💯🙏💡

[@femijohn]

You're very welcome! I am glad i could help 🥂

[@benditodsg974]

Thank you so much sir for this, but is this advance prototype available for regular users

[@ramazanguler6066]

Thank you for best leason about Figma 2023 new update logical

[@femijohn]

You’re welcome 😊👍🏽

[@feelerino]

Ok, so what if I want the cart button to be clickable only when there are items in it?

[@jermainehunter7780]

Thank you! I was so lost and frustrated until I saw that you had to drag the
original statement into the conditional to activate it.

[@femijohn]

Glad you were able to figure it out.😊

[@megmiranda1643]

Great video! Wondering if you could prototype an interactive ‘add to cart’ user flow for a product that has different pricing for different sizes? For example, in this video what if the size small shirt is $10 and the medium is $15 and so forth. What would the variables and prototyping look like in this instance?

[@femijohn]

Yes you can , I made another video that explains this exact prototyping logic. Please check my next video on Advanced prototyping. Maybe I’ll also add the link to that video in the description of this. It is more comprehensive.

[@chhotelalbabu4077]

Nice Video

[@femijohn]

Thank you 🙏 😊

[@nekabarizornaata9299]

Please did you create the variants for the counter before prototyping or did you prototype directly on the counter (increment and decrement)?

[@stormstudio6126]

Is it possible to make a fully functional dropdown without a lot of variants? And with conditional logic?

[@Brain_Maks]

Thanks bro!

[@femijohn]

You're welcome!

[@Cheoma_Udeze]

Nice video 😊

[@femijohn]

Thanks 😊

[@user-ng4lk6nz1w]

Hey! Is there any way to tie up the same booleans in the different components ex - I have 2 columns , inside the column list is there and When I click a list option, is visible in the 2 column and when click on the second list's option it is visible to first list and invisible to second list. vice-versa. right now I am different boolean properties.

[@jeremyjeremy9440]

Amazing, thank you, i thank figma too😁

[@femijohn]

Thank you too! Yeah, we all thank Figma😆

[@kingoslo7024]

Bro u are a game changer, even the blind can see your tutorials clearly❤🎉😂... Pls still find it hard to reach u via DM

[@femijohn]

Thank You. Where did you send a msg on?

[@gracelidya1135]

how do you use conditional to give you value between numbers?

[@samarbhardwaj5415]

can this be reflected in cart too, I mean if we have 6 items in the cart will we see them if we open the cart? How to do that?

[@vikavik8470]

Hmm. Super cool. But what if I clicking on the eye button, Figma just hides the layer as usual but does not offer variable option ? :(

[@aminadavg]

Wow. I can't guess right click on the eye icon! thank you!

[@femijohn]

You're welcome!

[@alisabacon9535]

Can you please add sections into this video? Makes it much easier to skip through the video to find the one part I'm looking for :)

[@clotildadaniels6453]

Great tutorial as usual just need 4-7 replays 😂🎉

[@femijohn]

I’m sorry it’s so long, and a lot to process at once 🫢. Thank you 😊

[@sparkplug964]

Great video, I think this is the first time I have watched that explained Variables in a straight forward way to understand, but I still think Variables have not allot to do with design and are heavy related to programming and computer logic. I think Figma maybe need to look at this and try and make it easer for Designer to implement?

[@femijohn]

Thank you. And yap, I think you’re right

[@suryajayarajan42]

can you do a full website crash course with the updated features, Please !! Because I am stuck with the old designs created and I have to redo the whole again as I am a beginner.

[@femijohn]

Sure, I will let you know once its available 😊

[@suryajayarajan42]

@@femijohn thanku so much

[@boipelomotsosi7587]

10 out of 10

[@femijohn]

Thank you 🙏

[@rajdeepdey3562]

Bro, THANKYOU SO SO SO SO SO SO MUCH ♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️

[@femijohn]

You're welcome!! ❤️

[@zidansyed]

The left side slider is not working properly. I was interested to have the slider properly implemented like web. Thanks for sharing :)

[@femijohn]

I am sorry about that. I didn’t notice. I just duplicated it from a previous video. You can check the video on my channel so you can fix it. You’re welcome

[@donatasp.]

Since when choosing the number of items it appears in the cart? Usually, the cart is updated after pressing the Add to cart button. But the principle of prototyping itself is good

[@femijohn]

Well, I actually saw that behavior on an e-commerce site called “jumia”. You can check it out yourself. And I can understand why you might think is not the best experience. But the video was about learning the prototyping features. Thank you 👍🏽

[@ayomideashiru554]

@donataspupeikis2672 I really do not think anything is wrong with the logic and experience @femijohn used, because immediately you click on add to cart in an e-commerce site, it is counted as 1, so if you would like to select more, then the Qty button shows up, which begins to add or remove from cart ... So in all that is rightly done and kudos to you bro!!!!

[@femijohn]

@@ayomideashiru554 Thanks for the response, well said. 👌🏽

[@williamsrichard2191]

thanks for the videa. i see that this feature only works, if you paid. is there no way around it, if you havent paid?

[@femijohn]

yes, some features are for paid versions only

[@vickyvijayraj]

It’s really good however with Figma using this variables and conditions are not Upto the mark compared to powerful prototyping tools like AXURE RP where this function can be done clearly

[@femijohn]

Yes, you are totally right. Axure RP have taking design prototyping to a different level. I believe with time, Figma will to. its a gradual process.

[@dududu5788]

how about if we want to change the price as well

[@femijohn]

Thats very possible, I will be having a more comprehensive video on a completely add to cart and checkout feature utilizing variable. So please do stick around.

[@dududu5788]

@@femijohn awesome! appreciate it!!

[@tanvirahassananik8055]

Struggling to make a functional bookmark/favorite for a product with variables.

[@femijohn]

Please check my next video on advance prototyping of an add to cart flow. It’s more comprehensive than this.

[@tanvirahassananik8055]

@@femijohn Eagerly waiting

[@maskedvillainai]

Recommend way snappier explanations. I was skimming skimming

[@reezus_]

👏🏾👏🏾👏🏾

[@khabbas7911]

Hi please reply please.
How much should a freelancer charge for corporate single homepage figma design?
I lost my job due to layoff and now same company is offering me to work as freelancer.
And I dont know how much should I charge.

[@femijohn]

Please check my bio you’ll see my social handles, kindly send a message on Twitter or LinkedIn let’s talk better

[@sisanmiworitseokorodudu9425]

👊🏽👊🏽👊🏽

[@user-kp3rt5qn8k]

I like how you say supaaah

[@femijohn]

Thank you 😂. Hope you're not making fun of me.

[@user-kp3rt5qn8k]

@@femijohn why’d you think that 🌝
It was a compliment, I like your accent 🥰
And the content you upload , very helpful!

[@rabiyanoor4459]

I want a UI UX designer job

[@femijohn]

I you will get a very good job. You can reach me on any of my social.

[@EminYusifov]

it's a really interesting lesson but it's really hard to listen to your accent

[@femijohn]

Thank You.

[@eathtomicheal]

This video gave me so much joy 🥹

[@femijohn]

You're welcome 😊

[@nekabarizornaata9299]

You're the best @thefemijohn