By Howard Pinsky
Let me show you how you can open your existing Photoshop documents directly in Adobe XD, and how they can work hand-in-hand to take your projects to new levels.
Here I have a website which was designed in Photoshop that I’d love to expand on using Adobe XD. Thankfully, I don’t need to recreate the entire thing from scratch. Opening your Photoshop documents in XD is as simple as opening your XD documents in XD. You can drag with file right onto the icon, or use the Open option under the File menu.
Once it’s all loaded in, you’ll notice that just about everything transferred over correctly, allowing you to seamlessly continue your designing using many of the features that makes XD shine.
For this project, I may want to quickly create a gallery of images in this section, and for that, a Repeat Grid will work beautifully. With the existing image selected, I’ll press the Repeat Grid button to the right, and drag out a few additional cards, both horizontally and vertically, then I can adjust the padding to get it looking just right. With the gallery in place, I need some more images. Hopping over to Finder, I can select all these great looking shots, drag them straight onto any of the cards, and they’ll populate the grid. Pretty neat!
Let me create one more repeat grid further down this page, this time using the Command/Ctrl + R shortcut, and in addition dragging in images, plain text files can also be dropped to populate titles, descriptions, or any other type layers you may be working with.
Great! I’m starting to like how this it looking, but would love to see how it’ll feel on a smaller display. With the entire artboard selected, I’ll first duplicate it over to the right, then I’m going to turn on Responsive Resize. Holding down my Alt/Option key to scale from the center, I’ll drag the sides inwards, and once it’s in a good place, I can focus on individual sides or groups. You might be noticing that instead of simply squishing the various elements that are on this page, Responsive Resize is keeping proportions in tact.
Finally, now that I’m happy with the design at various sizes, let’s add a simple interaction. On the narrower artboard, I want to first enable scrolling. This can be done by choosing Vertical to the right, then I can decrease the Viewport height and drag the handle up the artboard. Now, everything above this handle will be visible immediately, while anything below will only be visible on scroll.
With that in place, I may want this image to enlarge with a tap. Duplicating this artboard one more time, I’ll simply grab the group containing the image and text, and enlarge it. Then to avoid any distractions, I’ll select the group behind it, and turn the opacity down to 0. Now that both states are in place, wiring this up is super simple. Jumping into Prototype mode, I’ll select the image to reveal the wire, which can then be dragged to the target artboard. I’ll stick with tap for the trigger, but make sure that Auto-Animate is selected under action. This will instruct XD to look at the differences between the two artboard, and animate anything that’s changed. Finally I’ll set my desired easing and duration options.
Now, when I go to preview my prototype, I can not only scroll down the artboard, but I can also tap on the image to enlarge it – and all of this was accomplished with an imported Photoshop document.
But there’s so much more to learn and explore. Make sure to check out our other videos to crank up your knowledge on working with assets, repeat grids, responsive resize, in-depth prototyping, and a whole lot more.
Thanks to integrations with Adobe Creative Cloud, Adobe XD integrates well with Adobe Photoshop, allowing you to edit photos from XD directly in Adobe XD. The integration goes even further, allowing you to open PSD files in XD. Photoshop files can be opened in Adobe XD either through importing, or by opening the file in Adobe XD allowing you to use prototyping features to bring those Photoshop files to life in Adobe XD.
