Cart quantity selector

[O_Scarf]

Hi all,

 I just started with XD a week ago and so far have worked out most things that I have wanted to do.

 I have now run into one item that I can't seem to find a solution to - I want a cart quantity selector with the +\- buttons to increase or decrease the number of units when tapped. Is this possible to create in XD?

Thanks, Ollie.

[Peter Villevoye · Accepted solution]

If Abobe would start implementing ready-to-use elements like these, letting them work for real, then very soon every one would start claiming tons of other widgets, gadgets, fidgets, whatever. That's not Adobe XD's goal. As a matter of fact, XD is more inclined to ley you to design it exactly the way you want it.

But relax, if that's too much of an effort, then there are also tons of templates and kits available, you can copy and paste from ! Just type in Google: adobe xd shopping cart templates and see them rolling onto your screen. Some examples:

https://www.xdguru.com/adobe-xd-ecommerce-templates/

https://www.behance.net/gallery/67085333/E-commerce-templatestore-themeshop-(FREE-Adobe-XD)

Keep in mind: you're designing the look, feel, and interaction – not building the complete thing. Any interactions like pressing a plus and seeing a number change, would require a few artboards to present these steps. So the artboard isn't technically the same thing as the final page or screen in the website or app. Artboards can represent separate interface stages as shown in one interaction.

[O_Scarf]

Hi Peter,

 Thanks for your assistance with this. I will use a template for now so that I can continue on with the site. Although at some point I would like to learn how to make items like the quantity counter my self.

Thanks, Ollie.

[AurorePhi]

Hi Ollie,

I have found a solution for a quantity selector :

1. Create the design of your quantity selector.

2. Create text with the number 1 (or any number you want by default), wherever you want your numbers to be.

3. Create a rectangle above, which is roughly the size of the numbers you want to display.

4. Select the rectangle and the number and then right-click Mask with Shap.

5. In the same text box, write the others numbers you want to have, in column or in line (with enough space between the numbers so that there is only one number displayed in the rectangle mask).

6. Select all your qualtity selector and create a component.

7. Then add as many new states as needed (one per number).

8. Go to Prototype, with your component selected.

9. Click on your + button and add an interaction : Trigger : Tap / Type : Auto-Animate (or None, ...) / Destination : State 2 / (easing and duration are your choices).

10. Go back to Design, select the "State 2" of your component, and slide the column or row of numbers you created to the next number you want to display.

11. Go to Prototype, repeat 9. but destination is State 3

12. Same as 9. but for the - button and destination is the precedent State (here "default state").

13. Repeat 10. for "state 3".

14. And so on, until you run out of numbers.