Earlier this week I watched Adobe MAX Sneak Peeks and it’s super cool! (make me want to work there!) Then I stumbled upon this Adobe XD tutorial because the title has “food” word :p

I found the tutorial interesting. It tells about the new interaction function in Adobe XD: the auto-animate, the drag function, and voice command. In this prototype I made, I only made the build the burger part (did not make the voice command part) because of the time limitation at the time.

The Burger App

Here are the screens I made:

• 

• 

• 

Credits:

1. Burger vector: https://www.freepik.com/free-vector/hamburguer-ingredients-design_1029754.htm
2. Icons: flaticon.com

Here’s the video of the prototype

Trial & Error

While working on this design, I faced some problems which now has been solved haha (otherwise, I won’t make this post). Here are some problems I faced, hopefully, it would help anyone that needs it

Q: Why can’t I drag and drop my Ai file to XD?

A: It because the drag function can only be done in Mac while I’m using Windows. Unfortunately, I cannot import Ai file (I don’t know why). I could make it works by converting the file into SVG and drag to Adobe XD windows.

Source: https://theblog.adobe.com/faster-together-opening-illustrator-files-in-adobe-xd

Q: Why the Auto-animate does not work?

The burger supposed to expand when I clicked “Build It” button, but it did not expand (only usual page transition)

A: It happened because I used different names for the burger object in screen 1 and 2. After I edited the object/group name, the auto-animate worked.

Q: Why can’t I drag the cucumber to the right? Why it’s only provide drag left?

A: It’s because I deleted the “cucumber” object in screen 3. I did not set the final position for the draggable object. Apparently, due to that the Adobe XD could not decide which direction the drag should be. Don’t delete it, do this instead:

1. Group all the burger ingredients, maybe name it to “burger” group. So that the draggable element or “the cucumber” is still part of the screen, not the pasteboard.
   
2. Move “the cucumber” to the outside right of the screen (make sure it’s still in “burger” group)

If you want to try..

Below is the link of my Adobe XD file:

For shared – Google Drive

No Description

I do not own the idea, the vector, and icons (I mentioned where you could download them above)

If you have any question, feel free to write in comment section, thanks 🙂