Advanced Prototyping in Figma: Add-to-Cart flows with Local Variables, Conditionals & Expressions.

[@shruthibagadi426]

Awesome tutorial for beginners , no words to express , Great job.

[@femijohn]

Thank you. 🙏

[@emmanuelkingston8220]

This has added so much value to my design journey.... I wish to replicate this on a personal project i'm working on, please be ready to walk in when I encounter any challenges. Thanks bunch

[@femijohn]

Thank you. Don’t worry. You can always reach out. 😊🥂

[@LizNadolny-e2h]

You are a great teacher! Thank you so much for taking the time to record everything and post this. Your videos have helped me more than any others I have watched because you show every single step along the way instead of skipping over the "boring" or "noob" parts like the other guys on youtube.

[@femijohn]

You’re welcome. I really appreciate the kind words 😊. Sometimes I think I do too much trying to explain. I’m glad it was helpful. 🙏

[@sanzzi]

What an amazingly useful and detailed tutorial. This and your previous one have taught me a lot more than many other paid tutorials on variables I've done in the past. Keep the great content coming, please!

[@femijohn]

You're welcome.

[@diedrichah7630]

Extremely helpful. I especially appreciated that you ran into errors and were able to debug live and on the fly. It showed that you are real and truly know what you are doing. Thank you very much.

[@femijohn]

Great to hear, you're welcome. I appreciate your kind words.🙏🏽

[@Mnkapl]

I have followed the entire tutorial from start to end. Everything worked amazingly well. Thanks a lot. Somehow I couldn't display the "Empty Card" back on the page, once I cleared all the products in the Cart Page. For this I have added one more condition to the "-" in prototype mode i.e. if cartcount == 0 set variable => IsEmpty to true(its original state). Then it worked. This last step is kinda assignment after following all your steps 😄. I was able to think and do it by myself just because of your clear and detailed tutorial. Thanks for sharing your knowledge💟🙏. I am on to your other videos. Bye!!

[@femijohn]

This is so beautiful to hear. I noticed I forgot to add that last step after making the video. Then I was like, well thats an assignment for whoever made it this far. Kudos to you.

[@ShanyceJoseph]

Thanks John! This is the first video where I didn't even mess up!!! Your explanation and steps were so clear to understand and follow along. You have gained a follower! Thank you!

[@femijohn]

Thank you so much for the kind words 🥹. I am glad you found the video helpful

[@femijohn]

Thank you so much for the kind words 🥹. I really appreciate it. I’m glad I could help.🚀

[@EzekielGodwin-nk5hx]

John, please don't stop making video tutorials, Honestly, someday I'll appreciate you with something because you are a lifesaver, I have been struggling with this for about 4 days now and I have been frustrated, you just made everything so easy. Thank you so much I really appreciate it. You just made my project journey so easy.

[@femijohn]

You're going to make a grown man cry. I am glad I could help. I sincerely appreciate your compliments. It's been difficult lately but you have my word. I won't stop. You can join my membership it's almost free.

[@nwasogwajachimike7018]

@@femijohn thanks for this awesome tutorial. i encountered a challenge, when i created the interaction on the count button component. when i previewed any single click applies on all instances instead of just one. any idea how to correct this?

[@MOEPYAEPYAEKYAW-v2j]

So happy for this tutorial! I am currently working on a sushi restaurant project for school and I found your video. Thank you so much for your wonderful insights, and looking forward to amazing tutorials like this.

[@femijohn]

I am glad I could help. You are so welcome!

[@Kiyahbakre]

After attempting it three times, I finally got it! This tutorial is explained really well. It's incredibly helpful. Thank you so much.

[@rubeneverts9264]

thank youuuuu. You single handedly saved my final assignment.

[@femijohn]

You're welcome.

[@timeyingrage270]

Thank you so much. Your videos are so easy to understand. No complication. I am grateful.

[@femijohn]

You are welcome! I appreciate the compliment.

[@chiragmittal6212]

Nice demonstration of the variables and the conditional prototyping. I learned a lot from your video. Keep posting such works. Thumbs Up!

[@femijohn]

Thanks a lot!

[@stellarspace_95]

The way you explain stuff in here is really nice man

[@femijohn]

Thank You so much

[@inertingd373]

thx so much for the video my brother, easy to understand, the fact that you dnt skip parts and you go thorugh everything, even tiny details, makes a huge difference :) take care, u helped me a lot bro thx frome france :)

[@femijohn]

You're welcome. I really Appreciate your compliment.

[@fallegan1664]

This is amazing. I learned Variables in one video, advance prototyping with you. Thanks for this video, I will wait more content from you.

[@femijohn]

Glad you liked it! More to come. 🥂

[@akratirawat6514]

Amazing video...I have never seen anyone explaining each step in detail like you did. Variables can be confusing but you made a wonderful prototype which could be used as a reference to build a variety of designs. 😍 Thank you for sharing your knowledge.

[@femijohn]

Glad it was helpful! Thank you too for the amazing compliment.

[@shivam_pandya.]

Bro you are lucky, I asked google bard to suggest me video for advance prototyping and first it recommended yours. It's nice to see AI automatically recocgnise and doesn't bias like youtube algorithm that suggest popular only on top

[@femijohn]

Wow, thats amazing. Thank You. I hope the video was helpful.

[@shivam_pandya.]

@@femijohn Need one help, When I use minus function my Values started getting into minus but it suppose to be "0" ( So I have toppings as option and when I add one topping ($1.20) it's shows proper data in total but when I click again to remove it then It automatically changes to ($1.60)

[@allenoluyisola4522]

this is awesome, thank you. you provided the answer to 80% of my puzzles

[@femijohn]

You’re welcome, I’m glad you found it helpful

[@wge621]

oh my god, i'm a nerd but this is SO cool!! figma is changing the game, I love how much functionality they pack into such a minimal interface. their UX designers are out of this world

[@rufailateefah]

I always enjoy your tutorials. Well done

[@femijohn]

Thank you so much 🥹🙏

[@yassanwilliam3153]

thank you very much, John. It was helpful. Exactly what I have been searching for. I tried came up with other approach but it was very long. Yours is very simple. Cheers

[@abdurrazaqadinugraha7468]

This is the tutorial I've been looking for, thank you, sir.

[@femijohn]

You’re welcome 🙏

[@naingoo881]

Really really appreciate for this kind of tutorial. well done, bro!

[@femijohn]

Thank you!

[@Aijazkhan460]

Fantastic tutorial man! it's a great learning experience from this video. keep it up!

[@femijohn]

Thanks man 🙏

[@AyahMlhem]

Amazing! Thank you very much. The tutorial shows each and every step clearly 👍

[@femijohn]

You're very welcome!

[@komarisb]

Thank you for your video. Figma allows only 4 modes of variables. This means I can create only 4 products following your lesson. Could you please advise how I can create more product cards using variables if I don't have an Enterprise plan? Are there any solutions? Thank you in advance.

[@femijohn]

There is a different approach if you have lots of products, but the purpose is basically to prototype the flow and not to show all the products you have in your inventory.

[@nora_qm9129]

You are GREAT teacher! Thank you so much fo this important tutorial 🙏🏻 You are safe my project 😩🙏🏻

[@femijohn]

you're welcome. I am glad I could help.

[@kashafzahra4317]

Thank you so much for providing the prototype too! Would have taken you hours but you still chose to share it for free!

[@femijohn]

you're welcome, I am glad it was helpfull.

[@tharyhout9707]

FINALLYYYYY took me two hours to find this useful vid....all them clickbait tutorial out there is loaded af

[@femijohn]

You're welcome, I am glad I could help.

[@RJArena45]

Thank you Brother Love From India, This Tutorial is really helpful.

[@femijohn]

My pleasure

[@truclamhuynh736]

Thank you so much for your tutorial. It was fantastic and very easy to understand

[@femijohn]

You're Welcome, thank you for the kind words 🙏🏽😊

[@Rebecca-xw5zi]

Another amazing tutorial. Thank you so much.

[@femijohn]

You're Welcome 🙏🏽

[@ajayji1009]

Great knowledge and usage of the updates but is the process will be helpful in real world where there will not be only 4-5 products but 100 of products. The process takes very long and it's not actually the development, it's just showing someone how the design will look and like and work. I might be wrong but asked as it came in my mind. Correct me if I am wrong, will be happy to have your thoughts. :)

[@coonachara]

Thank you for this tutorial! Much appreciated!

[@femijohn]

You're very welcome!🙏🏽

[@omarmessam]

The best variables lesson out there ♥♥

[@femijohn]

Thank you so much ❤️🥹

[@omarmessam]

@@femijohn I really enjoyed every minute of it 👍

[@richespeter4879]

This is exactly what I needed thanks Femi

[@femijohn]

You’re welcome 🙏

[@vidhyasagarhv]

Hey Femi.. How are you doing today? I am through and through Loving this series. Learnt a lot from you. Looking forward for more.

[@femijohn]

Thank you so much. I appreciate the kind words 🙏😊

[@liftwithnikhil]

Thank you soo much, i have learnt a lot from this video adn it has helped me with making my UX assignment even better

[@femijohn]

You're very welcome!😊

[@chbmnya]

amazing today i understood reason behind creating variables and logics to apply it

[@femijohn]

Glad it was helpful.

[@katerinrangel6121]

Your videos are so easy to understand. Thank you so much for explaining it step by step 🥹

[@femijohn]

You’re very welcome. I appreciate your kind words. 🙏

[@Radujahib]

This was so helpful thank you John, you're doing great work. Is there a way to also enable products on the checkout page to appear in the order of interaction on the product page? For example, if Iced coffee was added first followed by Espresso, I'd want that order to be reflected in the checkout page.

[@femijohn]

Wow, that is very tricky. honestly I can't think of a way to achieve that at the moment.

[@VikasKate-lv4kz]

Extremely helpful. Thank you!

[@femijohn]

Glad it was helpful!

[@octaeguiluz6394]

man, you are a genius, thanks for the tutorial. New sub

[@anishhirlekar]

Very well explained. Thank you for this amazing tutorial. Appreciate 🙌

[@femijohn]

Glad it was helpful!

[@Hello_There_27]

This video is amazing! Thank you for taking the time to go through the entire process! Do you have a video explaining how to create an intuitive size selection? Like S, M, L that works in a similar way that is also connected to the cards in the cart page? I’m yet to find an instructional video of this process online.

[@ashleaaverso7541]

Thank you so much for this tutorial! It helped me tremendously with prototyping a complex project. I'm running into one error though I can't seem to figure out - when adding and removing items to cart, everything does as it's supposed to; yet, when I remove all the items from the cart, my "No items have been added to your cart" frame doesn't appear. Any idea what the issue may be? I've tried setting up a few conditionals for that particular frame and can't figure out a way to fix it.

[@milanrdesign]

Have you tried adding a conditional to your - button that says if cart count == 0 set cart empty to true? (I dont know what you named your variables but replace it as whatever you named them)

[@femijohn]

Thanks your the compliment and sorry for the delayed response. I hope you've been able to fix this, if not. Try and cross check properly the layers you are setting the prototype on, especially in cases where you are using auto layout. Most time the problem revolves around not setting the prototype on the right layer.

[@creativelizzy.wonder]

Thank you soo much for this amazing teaching Boss. I have a challenge. When I add to cart for a particular item, every other product reflects the addition. How can I rectify this?

[@wge621]

thank you so much for this tutorial!! it helped me figure out other stuff that wasn't working as well (eg i was trying to get instance swap to work, but it looks like it doesn't work with component sets, only individual components). Loving this!!

[@esmel2329]

Does instance swap in prototype mode work just with the variables, in paid version?

[@wge621]

@@esmel2329 I'm not completely sure what you're asking, could you rephrase?

[@esmel2329]

Ok I'll make an example: if I want to put an heart icon that can be filled when you add to preferred products a product inside a panel how can I do it in a free version?

[@wge621]

@@esmel2329 variables work exactly the same in free and paid, the only difference is that you have a max number of variables for free version

[@Corlet-b5n]

This is truly amazing, thank you for this video. I'm trying to applying this on a web rather than on mobile, and the flow is kinda different, so when the user clicks on the +(add to cart) button the cartcount increases and when they click on the cart icon they get to see an overview of items added to cart where they can click + to add and - to subtract. My question is how do i go about the add to cart flow?

[@hellokitkath3329]

What an amazing teacher!

[@femijohn]

Thank You so much

[@jasonsin4847]

Great video, had a question. How come when I click add button it still duplicates onto the second item also? For example; I click add one expresso, it would add onto the hot chocolate, etc also.

[@femijohn]

If you watch from 9:20 I tied each product card to the Mode that was set in the variable panel so that they all inherit their individual variables. if you do this, you won't encounter this error.

[@elainesum12]

Thank you very much!! It clearly explain , helps me a lot😁

[@femijohn]

Glad it helped!

[@ololadetimilehin]

Your images, please how do you get them? There all so precise and of good quality, if you don’t mind sharing

[@femijohn]

I have them in the figma file attached to the link. You should be able to get them there.

[@RubyPaterson-q9v]

Amazing tutorial, thank you so much !!

[@femijohn]

You're very welcome!

[@Gasonphonics]

Thank you for showing us this your tutorials are amazing !! keep explaining everything makes sense

[@femijohn]

You're very welcome!🚀

[@akashmahadevan1940]

Thank You for the tutorial! It was extremely helpful!!

[@femijohn]

Glad it was helpful!

[@namtranle3108]

It's really helpful to me. Thanks a lot for the video.

[@femijohn]

You are most welcome🙏🏽

[@designbydavid]

Very well done. Thank you!

[@femijohn]

You're welcome 🙏🏽

[@JujuMendez-w5m]

Thank you for your tutorial it help a lot! I just want to ask if you can make videos with same add to cart flows like this but with size of drinks like 16 onze like that. Thank you!

[@femijohn]

Thanks for the idea! I will look into that

[@nickrig2383]

hello, really helpful video! I wanted to ask, is it better to edit the data of each product via variables or by creating properties (text, boolean etc)? Thank you!! Also, if you have a lot products something like 20 what do i do in this occasion?

[@Obiosio]

❤❤ Good afternoon Mr. Femi. Please can you make a tutorial on how to design a portfolio page using Framer? I am really struggling with using Framer.

[@premium_AR]

Excellent tutorial! I have a question. Using variables significantly reduces the number of screens, which is fantastic for prototyping. Since many screens dynamically appear, how can a developer inspect the tokens if they want to review the specifications of the cart page with an empty state and suggestions? Should we create another set of pages specifically for token inspection?"

[@mykieu9974]

omg it's extremely helpfull. Thank you very much

[@femijohn]

Glad it helped!

[@mrenigma3773]

Nice One, however, it looks like i will have to be on a paid plan on figma to apply this to my designs.

[@bawnjourno]

SO so useful! Thank you man!

[@femijohn]

You're welcome!

[@trombone0926]

thanks, it did really help.

[@femijohn]

You’re welcome 😊

[@trombone0926]

​@@femijohn I watched it again and again, I learned lots from it. thanks again.

[@null8637]

you have my respect man its an op vedio

[@femijohn]

Thank You 🙏

[@sarahkulsum3267]

How about the PLACE ORDER button, how to make it appear only when the cart has some product?

[@offshare2033]

Thanks. It is very good.

[@femijohn]

You're welcome 🙏🏽

[@fscaramuzza]

I really like this tutorial. However the modes seem to break if you create a variant of a component. So if you have an instance of a component with two instances of Frame 19965 the counter doesn't work anymore. You can see in the layers panel that the instance does not have the modes anymore. Hope that this is on the Figma roadmap as a fix.

[@femijohn]

Thank you so much. Would love to talk to you personally to understand this. Because I find it a little to understand what you mean.

[@stevetyler3474]

@@femijohn I've encountered the same issue on my one. I can't link the item count to the same mode as the price. Did you manage to resolve this issue? And super awesome tutorial. It was a huge help for me.

[@SisiBisi-zh1cj]

Thank you so much

[@femijohn]

You're most welcome 🙏🏽

[@itsjoesee]

You are a legend!

[@femijohn]

Thank You😊

[@lanh-lanh]

thank you guys, but i have a trouble, when i have two items in the cart, and i reduce one item to zero, it immediately shows as card "isEmpty", while there is still another type of item in the cart

[@tristangrimes8167]

Ever find a fix for this? I am experiencing the same thing

[@郭恒宇-c4v]

in the cart page, how the elements can realign the position after removing one item?

[@郭恒宇-c4v]

i need some help😮‍💨

[@tolulopejayeola]

Thank you so much for this.

[@femijohn]

You’re welcome 😊

[@valeriiab5699]

Hi. It s very very helpful video. I study figma by myself and i want to ask. You showed variable if Item count more than 0 it True, but how can i do if i just have option to choose single item, so instead of + - button i have only button “add to cart”? ( this specific item is a box, so you can’t choose few same boxes, you only can choose multiple items inside of the box, how can i do this?

[@femijohn]

Thank you. You’ll need to create an interactive component with 2 variants. Kindly watch my previous video on variable. I used a single “add to cart” button. Your second variant will be with you want to display after clicking the “add to cart”. I display “+-“ but yours could be anything. I also showed how to setup your expression while interacting with the component

[@femijohn]

Please let me know if this helps

[@valeriiab5699]

@@femijohn It really helped, thank you!

[@edwinraquel]

hello, the demonstration is awesome. i got some doubt. i made add item +,- in component and made 4 instance. when click on +, the changes are reflecting in all instance. can u help me with this?

[@uxdworld]

Nice info

[@femijohn]

You’re welcome 🙏

[@hondimon69]

Great video as always

[@femijohn]

I appreciate that, thank you 🙏

[@harshinisatish]

when I used the item counter's instances for different product cards and added the number, all of them were added at the same time what do I do????

[@swatisardesai9846]

Hi, it's a wonderful tutorial. I have followed each direction very carefully but the counter still goes below zero, giving me negative counting. Can you help?

[@femijohn]

Sorry about that, be very careful with the layers your are selecting. You can name each layer to be sure. I found out that most people have this issue because the prototype are not done on the right layer.I hope you were able to fix this

[@swatisardesai9846]

@@femijohn I did fix the issue. Thank you for responding. Interestingly, the counter works well on a laptop, but the same responsive site does not work on the phone. It adds $2 for every transaction. I wonder if there are glitches when the desktop work is mirrored in the mobile phone? But thank you very much for an amazing tutorial.

[@SezinAltugan]

I tried following your tutorial but the file in the description already had set variables so initially I deleted them then created again while following tutorial. But after I set the variables of the item counter, in the prototype all products counts went up even though I just clicked on one items plus icon. Don't know what I did wrong there :(

[@tanvirahassan]

Really good. Keep it up.

[@femijohn]

Thanks, will do!

[@T-SeriesHindi-g3s]

Hlw bro when i try to apply the text as an variable it is unable to replace what should i do

[@TahiraAhamad]

Thanks a lot

[@femijohn]

You're welcome

[@favourmomoh9567]

Good Video, really helpful 😁

[@femijohn]

You’re welcome 😉

[@bansijajadiya8170]

This type of prototype need paid version of figma ???

[@_AzRael_777]

Yes 🥲

[@_AzRael_777]

Yes I tried 🥲

[@avinashsrivastava8626]

No you can crack your basic figma version into pro version. Than you can use this kind of prototyping ❤❤❤

[@ogunjimioluwadamilare7993]

@@avinashsrivastava8626how to do that

[@westanderpereira]

AMAZING!!! KEEP DOING!!

[@femijohn]

Thank you 😊 🙏

[@nekabarizornaata9299]

Weldone Femi🎉

[@henriettaopete4668]

Please Femi I am having an issue. The QTY I made it a component like you did and I used the variant for everyother thing. But when I click on the + icon on a frame, like the add to cart it reflexs on everyother frame. Whereas it is the variant not the main component. I hope you understand?

[@femijohn]

Hello, Apologies for the late response. I hope you've been able to fix the issue. I understand what you mean but it's difficult to fix over text.

[@alabiolanrewaju7332]

hi Femi, looks like i need to move my file to a paid team to do advance prototype, is that the case now ?

[@Daniel-ui5nt]

if my product more than 10, how about it?

[@femijohn]

I noticed this approach won't work for large number of products, so I might do another video for that. But this is basically for prototyping sake and all your products don't have to be on the design.

[@mariamparvez-fm6by]

Why is your video soooooooooo long ? You sound super energetic but I saw the time of the video and have to select another tutorial coz of my time crunch.

[@femijohn]

Apologies for the length. I wanted to breakdown every bit of it for beginners too. Thanks for the feedback.🙏

[@KristinaHawes]

@@femijohn Personally I am super grateful for the length, the way you broke everything down makes it super easy to not only replicate, but understand so I can expound upon it in my projects to do other things. Thanks so much

[@femijohn]

@@KristinaHawes I’m glad to know this helped you. Thank you for your feedback.

[@tpsya2441]

file bro

[@Steezy967]

Hey wonder if you can help out on an issue, I have created the counter and works great but when I click on it, it effects all other instances of it, so when I click add, it adds to every one on the screen. Any ideas?

[@NhungoanThiHong-eg4fw]

13:38

[@kristinearmstrong]

*promo sm* 👌

[@selfiejones]

Wtf ... What are you gonna do with these advanced prototying... These are developers job... We are designers... Wasting time on creating this for hours

[@femijohn]

Well, figma wants us to have some dev experience. thank you for your comment though.

[@hzakaria5338]

very beautiful work ,, thank you a million 🩵

[@femijohn]

Thank you! Cheers!