Importing & Cropping Photos

Topics Covered in This Adobe XD Tutorial:

Importing a Photo As an Image Fill (crop a Photo), Rounding Corners

Exercise Preview

Exercise Overview

In this hands-on exercise, you'll master one of the most essential skills in modern UI/UX design: importing, cropping, and positioning photos within your Adobe XD layouts. These techniques are fundamental for creating professional interfaces that balance visual impact with technical precision.

Importing a Photo As an Image Fill (Cropping a Photo)

1. Launch Adobe XD and navigate to File > Open from Your Computer or use the keyboard shortcut Cmd–Shift–O (Mac) or CTRL–Shift–O (Windows).
2. Navigate to Desktop > Class Files > Adobe XD Class > Pulse and double–click Home Page—Ready for Photos.xd to open the working file.
3. Set your view to 100% zoom by pressing Cmd–1 (Mac) or CTRL–1 (Windows) for optimal precision while working.
4. Examine the layout and locate the three dark gray rectangles—these are placeholder shapes waiting for our photo content. Focus on the top rectangle positioned behind the New Autumn Attire text, as this will be our first target for image placement.
5. To create an image fill, we'll use Adobe XD's intuitive drag-and-drop functionality. Keep your XD file open and visible, then switch to your system's file explorer (the Finder on Mac or Windows Explorer on Windows).
6. Navigate to Desktop > Class Files > Adobe XD Class > Pulse > Pulse Photos to access the source images for this exercise.
7. Arrange your windows so you can simultaneously see both the Desktop folder and the top dark gray box behind New Autumn Attire in your XD workspace.

8. Drag feature-jpeg.jpg directly onto the top dark gray rectangle. Watch for the blue highlight indicator—this signals that XD is ready to accept the image as a fill. Release when you see this visual confirmation.

   

9. Keep your file explorer window accessible but return focus to Adobe XD to continue the editing process.
10. Select any corner resize handle and experiment with dragging to observe how the image intelligently scales while maintaining its aspect ratio and always filling the designated area completely.

11. Cancel any resize operation by pressing Esc, or if you've already released the mouse, undo the action with Cmd–Z (Mac) or CTRL–Z (Windows).

    Understanding image fill behavior is crucial: it functions similarly to CSS background-image with cover sizing. The image automatically scales to fill the container while remaining center-aligned both vertically and horizontally. This approach ensures consistent visual presentation but may crop portions of the original image at the edges.

12. Let's refine the layout by creating breathing room around our featured image.

    Hold Option (Mac) or ALT (Windows) and drag the left-middle resize handle inward until it snaps to both the layout grid and the semi-transparent white overlay behind New Autumn Attire. This modifier key ensures symmetrical adjustment, simultaneously pulling in both left and right edges.

13. We've created 15 pixels of horizontal spacing. Now let's adjust vertical positioning using precise keyboard controls. With the image selected, press Shift–Down Arrow to move it down exactly 10 pixels.
14. Press the Down Arrow five additional times for fine-tuned positioning.
15. To verify precise spacing, keep the image selected for the next measurement step.
16. Hold Option (Mac) or ALT (Windows) and hover over the navbar. Adobe XD's intelligent spacing indicator will display the exact distance between elements—you should see 15 pixels of separation. This built-in measurement tool is invaluable for maintaining consistent spacing throughout your designs.
17. Adjust the bottom boundary by dragging the bottom-middle handle upward until it snaps to align with the bottom edge of the semi-transparent white box behind New Autumn Attire.
18. Let's explore shadow effects to add visual depth. Ensure the photo remains selected.
19. In the Property Inspector, activate the Shadow checkbox to enable drop shadow effects.
20. Click directly on the Shadow label to access the comprehensive color and opacity controls.
21. Locate the transparency slider to the far right of the Hex field and adjust it to 50% to intensify the shadow's visual impact.
22. Click the Shadow label again to close the color picker interface.
23. In the Shadow section of the Property Inspector, modify the B (blur) value to 15 to create a softer, more natural shadow effect.

24. After evaluating the design impact, we'll remove the shadow for a cleaner aesthetic. Uncheck Shadow in the Property Inspector to disable the effect.

    Pro tip: XD preserves your shadow settings even when disabled, so you can quickly re-enable the effect later with your custom values intact.

25. Now we'll add contemporary rounded corners to soften the image's appearance. With the image selected, locate the small dots positioned inside each corner (distinct from the corner resize handles). Drag any corner dot toward the image center to begin the rounding process.

    

26. All corners should now display uniform rounding. For precise control, locate the corner radius field in the Property Inspector (positioned above the Fill section). Input 15 and press Return (Mac) or Enter (Windows) to apply the exact measurement.

    

Positioning Photos Within a Shape & Custom Rounded Corners

With our hero image perfectly positioned, let's tackle the remaining placeholder rectangles using an alternative import method. This approach offers greater control over image placement and demonstrates Adobe XD's flexible workflow options for professional designers.

1. Navigate to File > Import to access XD's direct import functionality.
2. Browse to Desktop > Class Files > Adobe XD Class > Pulse > Pulse Photos and double–click woman-side-facing.jpg to import it into your workspace.
3. With the newly imported photo selected, cut it to the clipboard using Cmd–X (Mac) or CTRL–X (Windows).
4. Click on the dark gray placeholder rectangle designated for the Women section.
5. Apply the image as a fill by selecting Edit > Paste Appearance—this powerful command transfers the cut image directly into the selected shape as a fill.
6. The photo now appears masked within the rectangle boundaries. To fine-tune its positioning and scale, double–click the image to enter editing mode, which reveals the full image extent beyond the container.

7. Resize and reposition the photo to achieve optimal composition within the frame. Focus on centering the subject and maintaining visual balance as shown in the reference below. Click outside the image when satisfied to finalize the crop.

   

8. Click in an empty area of the artboard to ensure no elements remain selected before proceeding.
9. Let's apply rounded corners to maintain visual consistency across the layout. Click once on the Women photo to select it.
10. In the Property Inspector, locate the Corner Radius field above Fill and input 15, then press Return (Mac) or Enter (Windows) to apply uniform rounding.

11. For enhanced visual interest, we'll create asymmetrical corner rounding—rounded on the right, square on the left.

    Hold Option (Mac) or ALT (Windows), locate the corner radius dot inside the top-left corner, and drag it toward the corner until the rounding disappears completely.

12. Repeat this process for the bottom-left corner. Hold Option (Mac) or ALT (Windows), grab the corner radius dot inside the bottom-left corner and drag toward the corner to eliminate rounding.
13. Click in an empty artboard area to deselect and evaluate the sophisticated asymmetrical corner treatment.

14. Save your progress to preserve these carefully crafted adjustments.

Updating Photos

Design is an iterative process, and sometimes the perfect image reveals its limitations only within the full layout context. Let's explore XD's streamlined photo replacement workflow to address a common design challenge.

1. Select the bottom photo in the Women section.
2. CTRL–click (Mac) or Right–click (Windows) on the Women photo and choose Replace Image from the contextual menu.
3. Navigate to Desktop > Class Files > Adobe XD Class > Pulse > Pulse Photos and double–click woman-front-view.jpg to select the replacement image.
4. If necessary, fine-tune the size and position of the new photo by double–clicking to enter edit mode and adjusting the image's scale and position within the frame.

5. When satisfied with the positioning, click on an empty area of the artboard to complete the replacement process.

   Pro tip: You can also update photos by dragging a replacement image directly from your Desktop onto any existing photo in XD—this method is particularly efficient for rapid iteration during client reviews.

Optional Bonus: More Practice

1. Complete the layout by adding the final photo for the Men section. First, click on an empty artboard area to ensure nothing is selected.
2. Access File > Import to open the import dialog.
3. Navigate to Desktop > Class Files > Adobe XD Class > Pulse > Pulse Photos and double–click man.jpg to import the final image.
4. With the photo selected, cut it using Cmd–X (Mac) or CTRL–X (Windows).
5. Click on the remaining dark gray placeholder rectangle for the Men section.
6. Execute Edit > Paste Appearance to transfer the image into the shape as a fill.
7. Double–click the newly filled photo to enter editing mode for precise positioning and scaling.

8. Adjust the photo's scale and position to achieve optimal composition within the frame, using the reference image below as your guide:

   

9. Click in an empty artboard area to deselect all elements.
10. Create visual symmetry by applying corner rounding that mirrors the Women photo. Select the Men photo.
11. In the Property Inspector above Fill, click the Different radius for each corner button to reveal individual corner controls.

12. Input the corner radius values as 15 0 0 15 and press Return (Mac) or Enter (Windows) to apply the asymmetrical rounding.

    Remember: Corner radius values follow clockwise order starting from top-left: top-left, top-right, bottom-right, bottom-left. This creates rounded left corners while maintaining sharp right corners, perfectly mirroring the Women photo's treatment.

13. Click on an empty artboard area to deselect and review your completed professional layout.

14. Save and close the file to preserve your work.