Quickly create an interactive photo within your website prototype with Adobe Stock and XD.
Find a hi-res city panoramic photo
Search Adobe Stock for a large, panoramic photo of a city with enough resolution to support magnification. Save the image to your Creative Cloud Library so you can access it from within XD.
Place the hi-res photo into an XD artboard
Import the panoramic photo into the home artboard in XD. Size and position the photo to show the widest angle possible within the layout.
Duplicate and resize the layout in XD
Duplicate the artboard in XD and show additional layers, including text, labels, and changes to the navigation buttons. Then, resize and reposition the city photo to show a magnified area that relates to the area of interest.
Create an animated transition in XD
Switch to the Prototype workspace in XD, and select the Battery Park button on the home artboard. Add a link from the selected button to the second artboard and set the transition action to Auto-Animate. Set the duration to 2.5 seconds in the link properties panel, then click outside the panel to apply the changes.
Click the Preview link button in the top-right of the XD window to interact with your design.
The final result
Your prototype is now ready to preview and share with team members across platforms.
Check out this curated collection from Adobe Stock with more images that you can use in your next project.
