Prototype an “add” button and cart icon on the same screen

I want to create in a prototype a screen where there are multiple buttons that add an item to a cart. However, I don’t want that the add button takes you to another screen. I want when the add button is clicked it to shows a number of items in the cart icon on the same screen. Kind of like you see in many actual apps. Is it possible to do? Please be detailed as I am new at this.

Hi @Marlene_Horwitz! As I wrote to you earlier, you need to create a component set with variants. The Add button and Basket must be in the same variant.

I made an example for you.
Design file:

Prototype:

Your design may be different from mine, and you may need to navigate to a different frame instead of using interactive components.

2 Likes

Now I understand better. I don’t know why I keep confusing the frames with a different screen. Seeing the visual of it is clearer.

Yours is just on add button however mine has multiple. So each time the someone add the number in the basket need to go up accordingly. Obviously its possible in the app I guess because of the coding but is that possible also in a prototype or no? Thanks

Do you really need to show this in a prototype? Then only through “Navigate to”.

See the design file at the link above, only on Page 2.
Prototype:

And in order for the number on the badge to change, you need to kill time to create each new screen (frame) for the desired combination.

Figma has no logical conditions to do this. You can vote for the addition of this function in this topic: Prototyping | Conditional logic & variables

Well, I don’t know. I may have to. I am a student. I am doing Google’s online UX course. :roll_eyes: Not the best course as you can’t get any answers from instructors to questions.

We had to do a usability test of our lo-fidelity prototype. I got no negative feedback for my design from my peers. However, I got questions, why does the add button take you to the bag page and you have to go back to the other screen if you want to add more. Logically in the actual app which is not a prototype and it’s coded that won’t happen. The add button will add to the bag like I described I want it in the prototype. However, these peers (they are all different levels) don’t all get that some things are actually not possible to do in a prototype.

I would vote for this type of function, however even though I could explain it, I have no clue what to call it. Suggestions?

Truly a million thanks for your help :blush:

1 Like

Can you imagine the amount of work? Your screenshot shows 11 “Add” buttons, which are 2048 unique combinations. That’s how many screens you need to design. Yes, with the help of interactive components, you will only get 12 screens, but for the cart with items, you will need to create 2048 screens, because you do not know in what combination the user will add items to the cart.
How long will it take you to create such a low fidelity prototype?

You need to show an example of one position. That is: if no item has been added to the cart; added to cart. The basket is exactly like this: an empty basket; basket with item(s).

1 Like

This is why the course is not good as the real beginners don’t understand. I do understand. I will just do the one.

Is it possible for you to share the actual design files to the ones you sent me so I can see the actual steps you took. Then it will be clearer to me what to do. Thanks. :blush:

1 Like

This post has a link to the design file. Open that link and duplicate to drafts.

1 Like

Thank you. :blush:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.