Figma Advanced Prototyping Features 2023 | In-depth tutorial

[@DesignXstream]

📌 Here is a practice file you can follow along with: bit.ly/AdvancedPrototypingPracticeFile

[@milokhanh313]

My god, me as a Vietnamese, with all of my heart, i love Indian youtubers like you, the best teachers 🙏

[@DesignXstream]

Hey! That means a lot. Your comment made my day 🙌🏼🤩

[@clevermissfox]

Would love some pointers on a product page- how to choose an iption on a product (like color) and have the product photo populate to reflect that choice. I can not figure out how to prototype to achieve this.

[@DesignXstream]

Hey, here is a quick short video: kzbin.infofPgNFx4eV4c It is not exactly on the same page but the logic would remain the same... like on click of a product choice you can swap images using the method shown in the video.

[@IamShashi98]

Thanks I Understood what you’ve said 🎉you’re a good teacher

[@DesignXstream]

I'm glad you found it helpful! Means a lot 🙌🏼😊

[@Asaljaga007]

Please make a video about how to use the Android/ios status bar nav bar in Figma. I searched on youtube, but found no videos. If I give animation from page to page, the effect applies to the status bar as well. It looks wired. A question. I am learning UI design. I was viewing others' UI portfolios for learning. The mockups were in ios. If someone uses an Android mockup, they are not including the Android bottom nav bar, instead using nav bar gesture. Any reason for that. Can I use the Android bottom bar on my design?

[@BrookeMotis]

Thank you! This was a great introduction too the new prototyping features. Great teaching methods.

[@DesignXstream]

Thanks brook! Glad you enjoyed the video ✌🏼😊

[@lauraps9679]

wow thank you so much!! this just saved my life haha so well explained thanks!!

[@DesignXstream]

That's awesome! Cheers ✌🏼

[@ryanwarren1037]

Best tutorial yet! Why multiplication of the product totals instead of addition.? It works but I don't understand the logic.

[@DesignXstream]

Hey, Thanks! SubTotal = Quantity of Prod 1 x Price of Prod 1 + Qty of Prod 2 x Price of Prod 2 and so on... The multiplication was for qty and price.

[@swatisnigdhadash6407]

Hi, the video was fantastic, very detailed explanation thank you. Could you add the part where you removed the item

[@DesignXstream]

I just realised that I missed to cover that part 😅 Thanks for reminding! I will try to do a part 2 on this and cover it.

[@DesignXstream]

Part 2 is Live: kzbin.info/www/bejne/oaLNhmSAm7x1oLs

[@Brinda-z6j]

In a product page, the Add to cart button should stay sticky at the bottom of the page. Once we scroll past the product details, information etc, (before we enter the section of frequently bought together, similar products etc) the Add to cart button should start scrolling as well. Please make a video on how this can be achieved

[@DesignXstream]

You can try the sticky on scroll option but that is also not so advance that you can do conditional scroll.

[@nikitapotdar8749]

Hi, very nicely explained 💯...usually on an app there are no. of products so i would like to understand how to add variables to these 1000's of products

[@DesignXstream]

Figma is just a basic prototyping tool. You will use figma just to show to developers how you want it to behave with a small no. of products and developers will write actual code of it to scale it for 1000s of products.

[@nikitapotdar8749]

@@DesignXstream Thanks for replying 🙂

[@goat_game_play]

awesome video but I want to know how does the delete product button work? you didn't explain in this video. I watched this video specially for how the delete product button work.

[@DesignXstream]

Hey Dhaval, I missed to include that part in this video.. I'll make a Part 2. However, in short, I created a boolean variable to control the visibility of that list row and on click of delete: I made the necessary calculation changes and then set the boolean variable to false thus turning off that row.

[@DesignXstream]

Part 2 is Live: kzbin.info/www/bejne/oaLNhmSAm7x1oLs

[@arunprakashsambandam3760]

Thank you so much! Your video is very precise and without having any doubt i am able to follow you.

[@DesignXstream]

Hey Arun, I'm glad you found the video helpful! Will be coming up with more videos on this topic ✌🏼 :)

[@Pibepan10]

Thanks you its better to understand with these real examples

[@DesignXstream]

Glad you enjoyed the video ✌🏼😊

[@normanwozniak2336]

Really great tutorial, thank you!

[@DesignXstream]

Glad you enjoyed it! :)

[@yathinshetty9957]

Your are awesome man I just love your videos and your way of explaining things 🫶🫡

[@DesignXstream]

That means a a lot! Glad you enjoy my videos 🙌🏼

[@newbangerdigital6462]

Thanks for the video, very solid

[@DesignXstream]

Cheers ✌🏼

[@koushikbysani4057]

Very detailed, Thanks for the video

[@DesignXstream]

Glad you liked it! Cheers buddy ✌🏼😊

[@figmaLearnerEnthusiast]

Great video as always. I do have a question, how would you go about doing this, but it doesn't add anything until you hit a button? This works great for a checkout screen, but what if I have a menu screen where I add the items and the cart updates after I press the add to order.

[@DesignXstream]

this is also possible using variables. You just need to store the items and update it on to the screen when you press add to cart.

[@artisticcharly3044]

This is great !

[@DesignXstream]

Glad you like it! Cheers ✌🏼😃

[@gloriieven]

Thanks from indonesia☕👋🏻🇮🇩

[@DesignXstream]

Cheers from India 🇮🇳🤩

[@usmannasksoft-u4h]

well expalined

[@DesignXstream]

Glad you found them helpful! Cheers ✌🏼

[@MatildaKop]

Fantastic video tutorial, extremely helpful. I just have one issue with it, after it hits 0 doesn't want to add anymore. Plus is disabled as well. Is it a bug or am I doing sth wrong?

[@DesignXstream]

Glad you enjoyed the video. We need to put the condition of not doing any action on hitting 0 only for the minus button. If you add that for the + button as well you might face that issue.

[@mdstudio04]

awesome

[@DesignXstream]

🙌🏼 🤩

[@Asaljaga007]

Hi great tutorial. I am trying to create ADD button to 1,2,3 and -3 -2; when it comes to -1, it needs to go back to Add button. How to do that?

[@DesignXstream]

For that you can place an 'Add' button on top of that counter button and then create a boolean variable to turn on and off the Add button. Then write a condition on - button when itemCount == 0 then turn on that Add button.

[@jaden_caruso]

@@DesignXstream this is the answer i looking for, thanks bro, god bless u.

[@maheshbiruduganti1718]

Nice🎉

[@DesignXstream]

Thank you Mr. Mahesh 🙌🏼 😊

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

[@DesignXstream]

I'll surely try to make a tutorial covering all the features.

[@suryajayarajan42]

@@DesignXstream thanku so much

[@hsinwu9143]

Thank you for your tutorial! But why when one of the ItemCount is zero then all of "-" not working anymore?

[@hsinwu9143]

I think maybe cause I put this component into another scroll delete component, is there any way it can be in the scroll component but still work?

[@DesignXstream]

Doesn't matter where you place it. Variables are applicable to the whole file.

[@HinokamiKagura7630]

Hi. This was a great video. Is there any way to add a scrolling animation to the counter as the itemCount increases with advanced prototyping?

[@DesignXstream]

You mean like when user taps on + we should have the 1 move up and 2 come from below? Is that the expecation?

[@HinokamiKagura7630]

@DesignXstream exactly! Also I was wondering, why I am not able to change the state of the counter when it turns to 0. That is, I created a variant for this counter where 1st variant is counter and the 2nd is the add to cart button. My expectation is when I click add to cart button, it changes to the counter variant which works fine. But when the item Count is 0, I want the counter to reset back to the add to cart button variant.. these are the 2 doubts that I have.. thanks in advance!😊

[@DesignXstream]

@@HinokamiKagura7630 firstly yes we can have such a counter scroll animation I will try to create a video on that. Secondly when the itemCount goes to zero you can set the component state variable to something like a 'defaultstate'. Check this video it might help: kzbin.infofPgNFx4eV4c?si=F23oQtW65UAQs9s3

[@HinokamiKagura7630]

@@DesignXstream cool! Thanks a ton!

[@HinokamiKagura7630]

@DesignXstream hi, I just tried this method on a project that m working currenty and the assign variable icon does not show up for some reason.. but to test it out, I created a new project and it works fine... not sure what went wrong in my existing project.. any suggestions?

[@0xjmp]

Thanks for making this video! Could you not apply subtotal calculation step-wise? ie. instead of re-calculating the entire subtotal with each interaction, you could apply the existing value of the subtotal with the specifics of each item. So for example, the plus button expression for MX Keys could be simplified as: #subTotal + 9000.

[@DesignXstream]

Hey, yes that is also a possible approach however, doing it this way you will have to write the expression separately for each of the + button. In the approach I showed the expression is common for all the 3 products at the component level.

[@muralis8002]

@DesignXstream If the item count component(frame 2) is within the another component(product card), you cant map the variable(mode names),.. Figma need to fix this.

[@DesignXstream]

If you assign variable mode to a frame all the inner child will acquire that mode state!

[@jaden_caruso]

If anyone wanna know how to change tax section 1. Create variable " tax " 2. Set Variable : #tax -> subTotal * 0.1 3. Apply Variable to "Tax" done

[@jaden_caruso]

if your design include tax, beside shipping.

[@DesignXstream]

That's perfect! You got it right 😁

[@joykutty8925]

💯💯💯

[@DesignXstream]

🙌🏼 😁

[@tauriurbanik5509]

Hey man, Can you make a TUT of how can we pull product page images to product detail page using advanced prototyping?

[@DesignXstream]

Here is quick short video I just made: kzbin.infofPgNFx4eV4c You need to create component sets and swap the variants.

[@nevioth]

i'm clicking on the itemCount token but it will not show me the modes even though i have created them in the local variables. Any ideas?

[@DesignXstream]

Works well for me. Could it be bug! Check if there are any updates pending on Figma and try again?

[@Mohitmaheshwarri]

♥

[@DesignXstream]

🙌🏼 😊

[@lissyjoy3424]

💯✌

[@DesignXstream]

🙌🏼 😁

[@hellokitkath3329]

Is there a practice file available?

[@DesignXstream]

Forgot to include that. Here you go: bit.ly/AdvancedPrototypingPracticeFile

[@hellokitkath3329]

@@DesignXstream Thank you so much!

[@saumitraization]

Hi can we get figma file

[@DesignXstream]

Here is a practice file you can follow along with: bit.ly/AdvancedPrototypingPracticeFile

[@thesuperfly]

Hey, how can we grey out the "-" button when it reaches 0? Thanks in advance

[@DesignXstream]

You can do that in multiple ways. One way is to maintain color codes as variables. Create a color variables with #000 and assign that to the "-" button. Now in the condition where we have if itemCount == 0 do a set variable for the color variable and change it to a grey color code.

[@donegan50]

Anyone seen a way to multiply quantity by a variable for the price?

[@DesignXstream]

Like i mentioned in the video you can store the price also in a variable and then assign it to the price text and then in expression instead of the static 9000 I put you just have to replace it with the price variable.

[@master_will_]

Hey! You forgot to show how to delete items from cart 😅

[@DesignXstream]

Yes I did miss that so I made a part 2: kzbin.info/www/bejne/oaLNhmSAm7x1oLs 😄

[@changandy]

thanks for this tutorial. how did you delete the card at 2:35? (kzbin.info/www/bejne/hnusomiOaJ1sgJo)

[@DesignXstream]

I missed to include that part in this video.. I'll make a Part 2. However, in short, I created a boolean variable to control the visibility of that list row and on click of delete: I made the necessary calculation changes and then set the boolean variable to false thus turning off that row.

[@changandy]

Looking forward to part 2!