Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe.
In this video, we’re going to take a look at 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.
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, use the Open option under the File menu, or
if you’re already working in a document, the Import option will load your design into
an existing artboard.
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.
Let’s dive in and expand upon this design.
Starting off nice and simple, we may want to replace one of the images that was added
in Photoshop – and to do that in XD, it’s as simple as locating the file within Finder
or File Explorer, and dragging it straight onto a shape or existing image – and if
necessary, double-clicking will allow you to adjust the scaling and position within
the mask.
As you start incorporating imagery into your projects, there may be times where you need
a bit more photo editing power to really express your creativity – and for those moments,
images can be opened directly in Photoshop by right-clicking, and choosing Edit in Photoshop…You
can now edit to your heart’s content, utilizing the power of Photoshop to remove unwanted
objects, cut out parts of your photos, add filters, or even add an unspeakable bevel
and emboss, and when you’re all set, hitting save will sync it right back to XD.
Next up, a gallery of images would look great in this section, and for that, a Repeat Grid
will work beautifully.
With the existing placeholder 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!
Since I chose to extend the gallery off the artboard to give the impression that the area
is scrollable, why not actually make it scrollable?
With the Repeat Grid selected, a Scroll Group can be enabled within the Properties Inspector
– horizontally, vertically, or in both directions – and when one is chosen, the blue handles
can be adjusted to determine the window where the content will always remain visible.
You’ll see this in action once we preview our design in a moment.
Great!
I’m starting to like how this it looking, but might want to rearrange some of this content.
The various sections were previously grouped in Photoshop, but to help us quickly move
them around, we’ll want to place them into a larger group.
Similar to Photoshop, Command/CTRL + G will place your selected objects into a new group.
This will allow a Stack to be created within the Properties Inspector, and based on the
way the content is laid out, XD will automatically determine the orientation – in this case,
vertical.
I can now hop into our newly created Stack and move the sections around with ease – and
if I’m particular about spacing, I can control it on an individual level by dragging on the
pink area in-between stacked elements, or hold Shift to adjust them all at once.
Now that I’m happy with the design, I may want to add in a few interactions.
First off, since this is a long-form landing page, I’d love to be able to scroll through
it.
Selecting the entire artboard, vertical scrolling can be enabled within the Properties Inspector,
where a specific viewport height can be entered, or the blue handle can be adjusted to the
left.
Next up, since this is a web-based project, let’s throw in a hover effect on the button
up top – and to start that process, we’ll want to convert that button into a component.
So with the shape and text layer selected, a component can be created within the Assets
panel, the Command/Ctrl + K shortcut, or over within the Properties Inspector.
If you haven’t explored the world of components yet, I’ll link a video alongside this one.
Now that our button has been converted, we can add in an additional state by pressing
the + button beside the default, and you’ll notice that hover states are automatically
wired up for prototyping, as indicated by the lightning icon to the right.
With the new state created and active, changes can be made to the button to define the hover
effect.
Keeping things relatively simple, I’ll lighten up the color a touch, then separate the two
pieces of this icon ever so slightly.
Great, I can now switch back to the default state.
Let’s take a look at our experience so far.
Launching the preview will not only let me scroll up and down the page, but I can also
horizontally scroll through the gallery of images, and interact with the button up top.
But, of course, there’s so much more to learn and explore – and using Photoshop
alongside XD can certainly take your experiences to new levels.
Be sure to check out our other videos to boost your knowledge on working with assets, repeat
grids, Scroll groups, in-depth prototyping, and a whole lot more.
I’ll see you all soon.