Skip to main content
Inspiring
June 9, 2023
Question

How wild can I make portolio navigation (new to XD)

  • June 9, 2023
  • 1 reply
  • 168 views

Hi, everyone! I'm just getting started using XD (I've done a few of the intro tutorials so far) and I'm wondering if some of the ideas I have for building my design portfolio web site are even possible in XD, so here goes:
I sketched this whole thing out on paper.

The main screen would have three clickable thumbnails for web design, print design, and art. Iniially I thought to just use circular frames with a thumbnail of an image inside, but then I thought it would be cool to make them more like globes or convex shapes with the thumbnails warping to follow the curvature of the shape. I can do that easily enouigh in Photoshop, so that's not a problem.

Then I want to make it so that when the user clicks on each of the thumbnails, it triggers an animation and opens a gallery of thumnails that scrolls horizontally, with the thumbnails cycling through slowly but also a drag to scroll or arrows to scroll, then clicking on a thumbnail there pops up a detailed image. 

For that animation that opens the thumbnail gallery, though, I want to do three different takes, each unique to the respective categories, like one would look kind of like browser pop-ups, another would be like a book opening up, the third like a an old scroll unfurling. 

Does this sort of thing sound doable using XD, and would I be able to build something like that and export to a Fgima file afterwards and still have a hope of it working correctly?


    This topic has been closed for replies.

    1 reply

    Rishabh_Tiwari
    Community Manager
    Community Manager
    June 13, 2023

    Hi @TeamMancomm ,

     

    Thank you for reaching out. It's great to hear that you're getting started with Adobe XD and exploring ideas for your design portfolio website. Based on your description, XD offers several features that can help you achieve the effects you have in mind. Here are some insights:

     

    1. Create clickable thumbnails using circular frames or other shapes to represent your thumbnails and add click interactions.
    2. Animation and gallery functionality by creating transitions and animations to simulate the opening of a gallery or the pop-up effects you mentioned. The drag-to-scroll and arrow functionality for the gallery can be achieved using drag triggers and overlays.
    3. XD can export your designs to various file formats, including SVG, which is compatible with Figma. However, remember that not all interactive features or animations might translate perfectly between different design tools.

     

    I encourage you to explore XD further and prototype your ideas to see how well they work in practice. Don't be afraid to experiment and iterate until you achieve the desired effect. Best of luck with your design portfolio website, and I hope you enjoy the process of bringing your ideas to life!

    I am leaving this discussion open for other experts' suggestions.

     

    Thanks

    Rishabh