Importing & Cropping Photos

Topics Covered in This Figma Tutorial:

Importing & Cropping Photos, Rounding Corners

Exercise Preview

Exercise Overview

Mastering image management in Figma is essential for creating professional designs. In this comprehensive exercise, you'll learn the foundational skills of importing photos and cropping them with precision—techniques that form the backbone of modern interface design. These skills translate directly to real-world projects where visual hierarchy and image composition can make or break your design's effectiveness.

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

We'll start by learning Figma's powerful image fill feature, which functions similarly to CSS's background-image property with cover sizing. This approach gives you maximum flexibility for responsive design scenarios.

1. In Figma, if you're not currently on the homescreen (file browser), navigate there using one of these methods:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.
2. To open a local file, click Import file (located near the top right of your interface).

3. Navigate to Desktop > Class Files > Figma Class > Pulse and double–click on Home Page—Ready for Photos.fig to select it.

   Once the file uploads successfully, click Done and double–click the file thumbnail to open your working document.

4. Set your view to 100% zoom by pressing Shift–0. This ensures pixel-perfect precision as you work with images.
5. Examine the layout and locate the three dark gray rectangles—these are placeholder containers for our images. Focus on the top dark gray box positioned behind the New Autumn Attire text, as this will house our first photo.
6. In the toolbar at the top left, click the dropdown arrow next to the Rectangle tool and select Place image/video from the dropdown menu.
7. Browse to Desktop > Class Files > Figma Class > Pulse > Pulse Photos and double–click feature-jpeg.jpg to select it.
8. Position your cursor over the top dark gray box (behind New Autumn Attire) and click once to place the image into that container.
9. Click the photo again to ensure it's selected and ready for manipulation.
10. Experiment with the scaling behavior by grabbing any corner resize handle and dragging. Notice how the image intelligently scales to maintain its aspect ratio while always filling the entire container—this is the power of image fills in action.

11. Undo your scaling experiment by pressing Cmd–Z (Mac) or CTRL–Z (Windows).

    What you've just created is an image fill, which behaves like a CSS background image set to "cover." The image automatically scales to fill the container while maintaining its aspect ratio, with center alignment ensuring the most important parts of the image remain visible even when edges are cropped.

12. Let's refine the composition by adding strategic white space around the photo for better visual breathing room.

    Hold Option (Mac) or ALT (Windows) and drag either the left or right edge inward until it snaps to the semi-transparent white box behind New Autumn Attire. This modifier key constrains the resize to both sides simultaneously, maintaining perfect center alignment.

13. Now we'll add vertical spacing using precise keyboard controls. With the image selected, press Shift–Down Arrow to move it down exactly 10 pixels.
14. Fine-tune the position by pressing the Down Arrow five additional times for precise 1-pixel increments.
15. To verify the spacing is correct, keep the image selected for the next measurement step.
16. Hold Option (Mac) or ALT (Windows) and hover over the black navbar background. Figma will display the exact distance between the two elements in the gap—you should see 15 pixels of spacing. This smart measurement feature is invaluable for maintaining consistent spacing throughout your designs.

17. Complete the positioning by dragging the bottom edge upward until it snaps to the bottom of the semi-transparent white box behind New Autumn Attire.

Rounded Corners & Cropping Photos

Now we'll explore Figma's sophisticated corner rounding capabilities, which allow for both uniform and selective corner treatments—essential techniques for modern interface design.

1. Hover over the image and observe the small circular dots positioned inside each corner (distinct from the resize handles at the very edges). These are your corner radius controls.

2. Drag any of these corner dots toward the center of the photo to apply uniform rounding to all four corners simultaneously, as demonstrated below:

   

3. For precise control, locate the Corner radius field in the Design panel (positioned below the Height field).

   Enter 15 and press Return (Mac) or Enter (Windows) to apply this specific radius value.

4. Let's efficiently populate the remaining placeholder containers. The two additional dark gray rectangles (for Women and Men sections) need their respective photos.

   Click the dropdown arrow next to the Rectangle tool and select Place image/video .

5. Navigate to Desktop > Class Files > Figma Class > Pulse > Pulse Photos. We'll use Figma's multi-select capability to load multiple images:

   • Click once on man.jpg to select it.
   • Hold Cmd (Mac) or CTRL (Windows) and click woman-side-facing.jpg to add it to your selection.
6. Click Open to load both images into your cursor.

7. You now have both photos queued in your cursor, with a preview of the current image (likely the woman's photo). This batch loading technique is a major time-saver for production work:

   • Click once over the Women gray box to place the first photo.
   • Click over the Men gray box to place the second photo.
8. Let's optimize the composition of the women's photo. Select the women's image to begin cropping.
9. In the central portion of the toolbar, click Crop image to enter crop mode.

10. Hold Shift while grabbing a corner of the semi-transparent image overlay (avoid the blue selection corners) and resize the photo to match the composition shown below. The partially transparent overlay can be subtle, so watch for the cursor to change to the resize icon.

    Drag the image itself to reposition it within the crop area, then click outside the image to finalize your crop.

    

11. Click in an empty area several times to ensure nothing remains selected.
12. Now we'll apply strategic corner rounding to create visual cohesion. Click once on the Women's photo to select it.
13. In the Design panel, locate the Corner radius field below the Height setting and enter 15.

14. Let's create an asymmetrical corner treatment for sophisticated visual flow by removing rounding from the left-side corners while preserving the right-side rounding.

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

15. Repeat this process for the bottom-left corner. Hold Option (Mac) or ALT (Windows), grab the corner radius dot, and drag it toward the corner to eliminate the rounding.

16. Click in an empty area to deselect and appreciate the sophisticated asymmetrical corner treatment you've created.

Updating Photos

Design is an iterative process, and Figma makes it effortless to swap images when your initial choices don't serve the overall composition. Let's address a common design challenge: directional flow and visual balance.

1. Click the dropdown arrow next to the Rectangle tool and select Place image/video .
2. Navigate to Desktop > Class Files > Figma Class > Pulse > Pulse Photos and double–click woman-front-view.jpg to select it.
3. Click directly on the existing Women's photo to replace it instantly—no need to delete the original first.
4. If necessary, fine-tune the new photo's composition by clicking Crop image in the toolbar and adjusting the scale and position.
5. When satisfied with the composition, click in an empty area to deselect and see your updated layout.

Optional Bonus: More Practice

Reinforce your skills with additional practice on the men's photo, applying the same professional techniques to create a cohesive, balanced layout.

1. Let's optimize the men's photo composition. Click once on the men's photo to select it.
2. Click Crop image in the toolbar to enter crop mode.

3. Resize and reposition the photo (grab the transparent overlay edges, not the blue selection corners) to achieve the balanced composition shown below:

   

4. Click in an empty area to ensure no elements remain selected.
5. Now we'll create a mirror effect that balances the Women's photo treatment. Click once on the Men photo to select it.

6. In the Design panel, locate the Corner radius section and click the Independent corners button to reveal four individual corner controls.

7. Enter the values 0 15 0 15 and press Return (Mac) or Enter (Windows) to apply the asymmetrical corner treatment.

   Remember: Corner values follow clockwise order starting from top-left: top left, top right, bottom right, bottom left. This creates the perfect mirror effect to complement the Women's photo.

8. Click in an empty area to deselect and examine your completed layout. You've successfully created a sophisticated, balanced design with strategic corner treatments that guide the viewer's eye through the composition.