In our previous video, we imported a Photoshop file into Adobe XD. And it should have opened with editable artboards, layers, and assets. As a result, when you choose the Select Tool (black arrow) and select the artboard as an artboard, its layers will appear on the left, just as they did in Photoshop before exporting. To view the layers, locate the three icons in the bottom left corner, components, layers, and plugins. You can expand the column by clicking on the second icon and see the layers.
I’ll be making a few short videos on making this mockup a more believable prototype, so hit that subscribe button and notification bell so you know when the next video is up. I appreciate you supporting me unless you’ve already done so!
Adobe XD has the ability to edit Photoshop files as well. For example, suppose you wanted to edit the posters or pictures in a gallery. The images in your Photoshop file may be out of alignment, the gutter space between columns may not be even on all posters, or maybe the images inside have not been placed correctly in the container.
In a few minutes, we’ll be able to fix all that in Adobe XD. Before I do that, let me create a duplicate of this artboard. The reason is that I may have to copy and paste the information under the poster. Let’s look at the artboard we want to fix. On the right, as well as at the bottom, I would like to delete the posters. I might accidentally delete something else instead of the entire group of posters if I try to delete it. Simply double click the poster and Adobe XD will focus on the container. Those details can be removed from this section. The fact that you organized your files as folders in your Photoshop mockup should make cleaning up your files much easier. Otherwise, you will need to select each layer and remove it manually. As I showed you how to build it properly, you can now select the next container of the poster and its contents. The single-click worked because XD remembers which layer level you were at in the previous step. Now let’s do that for the rest of them.
You should keep the one up to serve as our guide for making the gallery of posters. Right in the control panel, there is a toggle switch labelled repeat grid, click it once to turn it on. On the right side and bottom, you should have rounded rectangle corner boxes with a green outline. Select the box, then drag it to the right. As you drag, you should start to see the first box repeated until you reach the desired number. What about the second row? Select the rectangular box with rounded corners at the bottom of the page and drag it down.
You should see the same posters in a couple of rows. If you place your cursor between the columns, it will turn pink, and you will need to slide the cursor right until you have enough gutter space. As a result, I’m aligning with this position.
The next step is replacing the posters. The poster is likely in the folder of the group when you select it. If you want, you can try. When placing an image on top of a poster, the dragged image remains on top. The poster itself needs to be selected. The group is highlighted in blue in the layers on the left. A new set of layers will appear after clicking the circle in the box icon. A single click on the folder will reveal more layers. Watch the screen as you select the layer that you think is the poster. Select the right layer, then drag the new picture into that container. A new photo should appear.
You may recall how you duplicated this artboard at the beginning, so if you need to replace the title, date, and stars, it is the same procedure, except you will be copying and pasting the contents from the duplicated artboard into the revised format.
Using a Photoshop file, you’ve learned how to use a repeat grid in Adobe XD and how to apply new posters to the image container.