• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Creating add to cart button with 2 functions

Community Beginner ,
Aug 19, 2023 Aug 19, 2023

Copy link to clipboard

Copied

Hi all,

 

Am new to Adobe XD and am working on creating an add to cart button. So far I have set it up as a component with multiple states 1-10 that move up and down when the + or - buttons are clicked. But I also want the button to funtion so that a prompt temporarily appears saying its being added to the cart. I know that its potentially not possible for 2 different types of animations to be happening on the same page? I tried to create a new "artboard" (I dont know what they call it in XD) and make that the frame that the promt transitions to but when I tested it the + and - functionality didn't work.

 

 

Screenshot 2023-08-20 at 6.42.30 PM.png

 I want "Add to cart" to appear each time + or - is clicked.

Screenshot 2023-08-20 at 6.43.00 PM.png

 

These are the states I've set up for the button

Screenshot 2023-08-20 at 6.47.45 PM.png

Views

621

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 20, 2023 Aug 20, 2023

Copy link to clipboard

Copied

LATEST

Hi @Eva9604, I think I'd do it this way, let's say the number is 1:
- Click the button, with tap trigger number changes to 2, 
- While the number is two, with time trigger, the artboard changes to an artboard that has "added to cart" popup/prompt appears.

- Again with another time trigger, artboard changes to the another art board with number 2 (that doesn't have a time trigger)

 

I know it's not very practical since you need to use 3 artboards for each state but that's the only way I can think of now. If I come up with another idea, I'll update you, and would like to be updated by you if you find another way. Hope this gives you an idea to explore!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines