Learn to create complete prototyping for an add-to-cart flow using local variables, modes, expressions, and conditionals. Here is the link to the prototype, design mockups, and images on different pages of this file. www.figma.com/...
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.
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.
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.
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. :)
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!!
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.
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?
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
Wtf ... What are you gonna do with these advanced prototying... These are developers job... We are designers... Wasting time on creating this for hours
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.
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.
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.
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
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?
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.
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)
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.
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 :(
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?
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?
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?"
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!
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.
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
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!
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.
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.
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 :)
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.
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?
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.
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?
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
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 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)
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
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 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
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.
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 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.
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?
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.
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?
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
@@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.
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!
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!!
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?
