By Howard Pinsky
It is that simple to open your Photoshop designs in Adobe XD. Hey everyone, I'm Howard Pinsky. And in this video we're going to take a look at a few of the design features you can take advantage of to supercharge your workflows.
Starting off at the top of this website design, I have this header which contains a search field, a logo, and a few icons over to the right. But I'm noticing it's a little bit squishy on the left and the right. So with the entire group selected, I'm going to hold down Alt or Option and drag on in. And because we have Responsive Resize turned on within the Properties Inspector over to the right, the layers inside this group didn't get squashed or squished. They simply shifted on in. Next up, we have a group containing a bunch of categories for this website and, to help us quickly rearrange them or add in new ones, I'm going to turn on a Stack within the Properties Inspector, which is automatically going to define it as horizontal. And since the spacing between these icons are not currently exact, I can enter in a value. Let's say, 104. And it's going to automatically space those out for me. And one of the really cool benefits of using a Stack is, you can dive into this group, grab an object, and shift it on over. I can grab this one, shift it to the front, and if you need to duplicate an object, select it, Command or Control+D, or you can delete one. And everything shifts beautifully.
Next up, in this section right down below, we have these two blocks that can use some images. So, hopping over to Finder on the Mac or Explorer on Windows, I'm going to go ahead and grab this image from Adobe Stock, drag it on in and it's automatically going to mask inside of that shape. In Adobe XD, any shape or path can be used as a mask. And if you need to adjust position or scaling, you simply double-click, shift it on over, and scale it up. Let's do one more. I'll grab this image, drag it into this square, double-click, and shift it over.
Now, that's great for one or two images. But what about when you want to add many images? In the new and noteworthy section, I may want several of these cards extending across the artboard. And this is where the magic of Repeat Grids comes into play. I'm going to go ahead and select all these elements here: the rectangle, the heart, and both text layers. And then at the top right-hand corner of the Properties Inspector, I'm going to press Repeat Grid. This will give us two new handles, one on the right and one at the bottom. And I'm now able to grab this handle and drag out additional cards going across the artboard. And if I wanted to, I can also drag cards down the artboard. And by hovering my mouse in between any of the cards, I can adjust spacing as well. And now that we have our additional cards in place, let's hop over to the Finder one more time. And I have these five images that I'd like to drag in. Of course, like the last example, you can grab one image, drag it in, grab another image, drag that in as well... but we're all about speed and efficiency. So instead, I'll go ahead and grab all five of these images and drag them directly into any of the cells in this Repeat Grid. And, just like the images at the top, we can double-click to adjust scaling and position.
Now, that's great. But what about the text layers in this Repeat Grid? Well, we can dive in and update the product names by typing them out. Or, very similar to how we drag the images in, we can also drag in plain text documents. So here we have two documents: one of furniture names and one of prices. So I'll go ahead and grab the furniture text file, drag it directly into this first text layer, and then do the same thing for the prices. Beautiful. And like you're going to learn in the next video, you can add a Repeat Grid into a Scroll Group so that when you're previewing your prototype, you can scroll left and right.
All right, hopping down to the bottom of this page, we may want to work on this section a little bit. First up, I'll hop back over to the Finder to grab a new image and pop it directly in. Next, we may want to add a button to Shop Now, right below this text layer. Now you noticed right here at the top, in this section here, we have a button in place already. And since I may want to keep this design consistent, I want to go ahead and turn this button into a component. And that can be done in your document assets, right down here at the bottom or within the Properties Inspector over to the right. You'll also be able to create different states of your component, including hover states, which you'll learn about in the next video. So now that we have our component created, I'm going to go ahead and turn on padding within the Properties Inspector as well. And you'll see what that does in just a moment. Now panning on back down to this area at the bottom, I'm going to dive into this group, grab this Shop Now button, and drag it directly in. And I'm thinking for this area here, I may want to change what this button says. Instead of Shop Now, we may want something like Explore Ideas. And because I turned on padding on our main component, as I change that text layer, the button behind it automatically resized. That looks pretty nice. But we may want one more section right below this one. I'm going to hop back into my layers and make sure this overall group is selected. And I'm thinking, another Stack may help us out in this situation. So I'm going to place this group into a larger group with the Command or Control+G shortcut. And I'll go ahead and call this Sections. And then back within the Properties Inspector, we're going to turn on a Stack.
Now, because there's only one group inside of this larger group at the moment, it automatically set it up as horizontal. But we can change it over to vertical. And now, if we dive in and then use the Command or Control+D shortcut, it's going to add another block right below. And I can hover in between to adjust the spacing. Now, maybe for this one we might want the image on the left side versus the right side. And luckily, we can have a Stack inside of a Stack. So back within the Properties Inspector, I'm going to turn another one on. Diving into this group and shift the image over. I'll hop over to Finder one more time and drag a new image in. And of course, if I had a little bit more time, I can dive in here and make changes to our text layers.
Now the final thing I want to show you are assets. A little bit earlier, we hopped into our document assets to add a new component, but you can do the same with colors and character styles. And this can be done on an individual basis by selecting a layer and hitting the plus button. Or if you want a quick jump on things, you can select entire groups or entire artboards, hit the plus button beside colors, and hit the plus button beside character styles. And all the colors and character styles that you're using inside of this project will automatically be added to your assets. And if you're all about keeping things organized, you can move them around or double-click to rename. But what's really helpful about working with your assets is that if you need to make changes to a specific color or character style, you can simply right-click, press edit, and make that change. Okay, let's not use Comic Sans. The same works for colors as well, right-click, edit, and everywhere that color is used, it's going to change.
And those are just a few of the design features you'll be able to use once you've brought your Photoshop documents into Adobe XD. Thanks so much for watching everyone. I'll see you all in the next video.
Open your PSD files in Adobe XD to prototype your artwork and bring your designs to life. Explore how Responsive Resize, Stacks, and padding ensure layouts look great on any screen. See how to draw shapes and paths, add images from Adobe Stock, and use shapes and paths as masks. Bring in batches of images and plain text files by dragging them into a Repeat Grid. Select a graphic and convert it to a component, then set up states for hover effects. Nest Stacks inside of Stacks to manage layouts. Reuse colors and character styles added to your Libraries panel.
What's Next
Learn how to prototype your Photoshop files using Adobe XD.
