Advanced Prototyping in Figma: Add-to-Cart flows with Local Variables, Conditionals & Expressions.
HTML-код
- Опубликовано: 19 июл 2023
- 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/community/file/...
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.
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. 🙏
After attempting it three times, I finally got it! This tutorial is explained really well. It's incredibly helpful. Thank you so much.
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
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!
You're welcome.
I always enjoy your tutorials. Well done
Thank you so much 🥹🙏
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
Thank you. Don’t worry. You can always reach out. 😊🥂
Extremely helpful. Thank you!
Glad it was helpful!
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.
I am glad I could help. You are so welcome!
Thank you so much. Your videos are so easy to understand. No complication. I am grateful.
You are welcome! I appreciate the compliment.
Amazing! Thank you very much. The tutorial shows each and every step clearly 👍
You're very welcome!
Nice demonstration of the variables and the conditional prototyping. I learned a lot from your video. Keep posting such works. Thumbs Up!
Thanks a lot!
Awesome tutorial for beginners , no words to express , Great job.
Thank you. 🙏
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 :)
You're welcome. I really Appreciate your compliment.
This is amazing. I learned Variables in one video, advance prototyping with you. Thanks for this video, I will wait more content from you.
Glad you liked it! More to come. 🥂
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.
Great to hear, you're welcome. I appreciate your kind words.🙏🏽
The way you explain stuff in here is really nice man
Thank You so much
Thank you Brother Love From India, This Tutorial is really helpful.
thank youuuuu. You single handedly saved my final assignment.
You're welcome.
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.
Glad it was helpful! Thank you too for the amazing compliment.
It's really helpful to me. Thanks a lot for the video.
You are most welcome🙏🏽
Thank you for this tutorial! Much appreciated!
You're very welcome!🙏🏽
This is exactly what I needed thanks Femi
You’re welcome 🙏
Very well explained. Thank you for this amazing tutorial. Appreciate 🙌
Glad it was helpful!
You are GREAT teacher! Thank you so much fo this important tutorial 🙏🏻 You are safe my project 😩🙏🏻
you're welcome. I am glad I could help.
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
SO so useful! Thank you man!
Thank You for the tutorial! It was extremely helpful!!
Glad it was helpful!
This is incredible - thank you so much!
You're welcome
Thank you soo much, i have learnt a lot from this video adn it has helped me with making my UX assignment even better
You're very welcome!😊
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
Wow, thats amazing. Thank You. I hope the video was helpful.
@@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)
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.
What an amazing teacher!
Thank You so much
Thank you so much for providing the prototype too! Would have taken you hours but you still chose to share it for free!
you're welcome, I am glad it was helpfull.
Amazing tutorial, thank you so much !!
You're very welcome!
Thank you for showing us this your tutorials are amazing !! keep explaining everything makes sense
You're very welcome!🚀
Thank you very much!! It clearly explain , helps me a lot😁
Glad it helped!
Very well done. Thank you!
You're welcome 🙏🏽
amazing today i understood reason behind creating variables and logics to apply it
Glad it was helpful.
Thanks. It is very good.
You're welcome 🙏🏽
Thank you so much for this.
You’re welcome 😊
Hey Femi..
How are you doing today?
I am through and through Loving this series. Learnt a lot from you. Looking forward for more.
Thank you so much. I appreciate the kind words 🙏😊
The best variables lesson out there ♥♥
Thank you so much ❤️🥹
@@femijohn I really enjoyed every minute of it 👍
Great video as always
I appreciate that, thank you 🙏
Thanks so much.
It was really helpful
Thank you.
FINALLYYYYY took me two hours to find this useful vid....all them clickbait tutorial out there is loaded af
You're welcome, I am glad I could help.
thanks, it did really help.
You’re welcome 😊
@@femijohn I watched it again and again, I learned lots from it. thanks again.
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!!
Does instance swap in prototype mode work just with the variables, in paid version?
@@esmel2329 I'm not completely sure what you're asking, could you rephrase?
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?
@@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
Weldone Femi🎉
Really good. Keep it up.
Thanks, will do!
omg it's extremely helpfull. Thank you very much
Glad it helped!
Good Video, really helpful 😁
You’re welcome 😉
AMAZING!!! KEEP DOING!!
Thank you 😊 🙏
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.
Thanks a lot
You're welcome
You are a legend!
Thank You😊
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?"
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?
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?
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????
❤❤ 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.
Nice info
You’re welcome 🙏
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?
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.
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 :(
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. :)
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!
Thanks for the idea! I will look into that
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?
Nice One, however, it looks like i will have to be on a paid plan on figma to apply this to my designs.
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.
Hlw bro when i try to apply the text as an variable it is unable to replace what should i do
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?
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.
Your images, please how do you get them? There all so precise and of good quality, if you don’t mind sharing
I have them in the figma file attached to the link. You should be able to get them there.
hi Femi, looks like i need to move my file to a paid team to do advance prototype, is that the case now ?
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.
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
Ever find a fix for this? I am experiencing the same thing
Your videos are so easy to understand. Thank you so much for explaining it step by step 🥹
You’re very welcome. I appreciate your kind words. 🙏
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.
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.
@@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.
in the cart page, how the elements can realign the position after removing one item?
i need some help😮💨
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.
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
Please let me know if this helps
@@femijohn It really helped, thank you!
This type of prototype need paid version of figma ???
Yes 🥲
Yes I tried 🥲
if my product more than 10, how about it?
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.
file bro
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.
Apologies for the length. I wanted to breakdown every bit of it for beginners too. Thanks for the feedback.🙏
@@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
@@KristinaHawes I’m glad to know this helped you. Thank you for your feedback.
*promo sm* 👌
very beautiful work ,, thank you a million 🩵
Thank you! Cheers!