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

Need help with prototyping

New Here ,
Jul 14, 2025 Jul 14, 2025

Hi! Can someone give me a quick tutorial how to make this website section clickablene / interactive in my prototype? Thanks!

 

First image: Start of the section (first option is visible)

Second image: mouseover effect (text white for other options)

Third image: Click on "option 2": Headline, text and image change to option 2Bildschirmfoto 2025-07-14 um 14.08.00.png

297
Translate
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 ,
Jul 14, 2025 Jul 14, 2025

Hello, you can either use the "Option 1, 2" etc as links/navigation and connect different pages using those links, or, you can convert the whole layout piece (with option buttons, image, text, basically all elements that need to be changed) into a component and switch to different conponent states, based on the click/tap interactions of "Option 1" etc links. One of my old tutorials actually demonstrates an interaction with similar logic, to give you an idea: https://youtu.be/MWr4xgvQx18?si=1ec5y6aJzX-ipeoo 

 

Also, if you're a beginner on XD, I'd recommend moving to Figma, you can check beginner tutorials like: https://www.youtube.com/watch?v=7Up_WyjrV7U

Hope this helps!

Translate
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
New Here ,
Jul 15, 2025 Jul 15, 2025

Hello! Thanks a lot!!! Helped me to build everything the way I wanted ... except I still have no idea how to achieve the additional Mouseover effect for the options menu. Any idea, how to solve that?

Translate
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 ,
Jul 15, 2025 Jul 15, 2025
LATEST

Hmm the most basic form of creating a hover effect should be like this: https://www.youtube.com/watch?v=VOZZkrSOsGg 
In your case, since I'm guessing the links are going to be in a component, achieving a hover might be a little tricky, but also can't be sure, since it's been a long time I used XD and I don't have access to an XD app now, it had started to give an error and I removed the app, so that's why I (and other experts) suggest people to move to the closest alternative Figma. I hope this helps, if you have any further questions, feel free to share, even if I can't help, some other expert/designer might. 

Translate
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