Shop Website Design In Adobe Xd

In this video we are going to design a shop website in Adobe Xd. We are going to explore how to make a shop website interesting by adding some simple eye catching animations to keep the user for longer, and get their attention to the product itself so they will hopefully buy it. Grab yourself a cup of coffee or tea, and let’s get started!


👉 Get access to 20+ courses, 500+ design products and all YouTube practice files in one membership! Check it out here 👈


📥 Resources from the video:

– Adobe Xd File
– Open Sans Font

▶ Subscribe to my channel for weekly content here

📌 Check out design resources at


Screen Recording
Video editing
Graphics & Music


Check out my Kit

Tube Buddy



✌ Thanks for watching Shop Website Design In Adobe Xd and have a creative day!

Disclaimer: Links in the description are usually affiliate links. By using any of my affiliate links, I receive a very small commission at no extra cost to you.

#AdobeXd #UIDesign #WebDesign


  1. How to code this ….means export each object and shape and image from xd to html …not automatically but code….

  2. Great tutorial. Currently using latest version of adobe xd and downloaded your project file however, it opens blank. Could you please explain why?

  3. The best Adobe Xd tutorial so far. Thanks, Alex!
    I try to download your xd file but when I open it, it just blank. Do you know why?
    I have the latest version of adobe xd

  4. great work but, I have a question , tried to do that shoe moving animation, where after clicking the arrow one shoe comes down. I did the same thing but during prototype it simply switches to duplicated board instead of animation. what am I doing wrong?

  5. hello @Alex On Design unfortunately the document is 100% empty when I open it… whats wrong? best wishes and thanks for this vid, Moritz

  6. This is by far the best Adobe XD tutorial I have ever seen ,the way you explain is so clear . Wow , I loved it and also thanks for the project file , it was very helpfull
    Pls continue these kind of tutorials

  7. I can't open the project the say its made with a newer adobe version, and I have adobe XD 2020 what I have to do

  8. At around 32mins I can't seem to copy and paste the first pink circle directly on top on the second circle in order to create a hover state button. It just pasts directly on top of the first button. How do I get it to work? You hovered over the pink and middle button a few times so I wasn't sure what you are copying and pasting which colour where. Can you please explain how this part is done? Thank you

  9. Hi Alex, at 5:55, I really don't understand how you manage to create a grid lines file. I clicked on Repeat Grid then on CTRL+ G but nothing happens.. If you could please help me, thanks.

Leave a comment

Your email address will not be published.