Image crop and fill modes in Figma - Deep Dive

Overview - Image crop and fill modes

What is it?

Image crop and fill modes are ways to control how an image fits inside a shape or frame. Crop mode cuts parts of the image to fit the shape exactly. Fill mode resizes the image to cover the shape fully, sometimes cutting edges. These modes help designers show images clearly and attractively in their layouts.

Why it matters

Without crop and fill modes, images might look stretched, squished, or show unwanted parts. This can confuse viewers or make reports and dashboards look unprofessional. Using these modes ensures images fit well, improving clarity and visual appeal, which helps people understand data and stories better.

Where it fits

Learners should know basic image handling and frame concepts in Figma before this. After mastering crop and fill modes, they can explore advanced image effects, masks, and responsive design techniques to create polished visuals.

Mental Model

Core Idea

Image crop and fill modes decide how an image fits inside a frame by either cutting parts or resizing to fill space.

Think of it like...

It's like fitting a photo into a picture frame: crop mode trims the photo edges to fit exactly, while fill mode stretches or zooms the photo so no empty space shows, even if some edges get cut.

┌─────────────┐
│  Frame Box  │
│ ┌─────────┐ │
│ │ Image   │ │
│ │ Crop:   │ │
│ │ trims   │ │
│ │ edges   │ │
│ └─────────┘ │
│ ┌─────────┐ │
│ │ Image   │ │
│ │ Fill:   │ │
│ │ zooms   │ │
│ │ & cuts  │ │
│ └─────────┘ │
└─────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Image Frames in Figma

Concept: Learn what frames are and how images fit inside them.

In Figma, a frame is like a container or window for images and other objects. When you place an image inside a frame, the frame controls how much of the image is visible. The image can be bigger or smaller than the frame, so you need ways to decide what part shows.

Result

You see an image inside a box that may show all or part of the image depending on settings.

Understanding frames is key because crop and fill modes work by changing how images behave inside these frames.

2

Foundation

Basic Image Sizing and Positioning

Concept: Learn how images can be resized or moved inside frames.

You can resize an image to be bigger or smaller than its frame. You can also move the image inside the frame to show different parts. Without special modes, images might stretch or leave empty space.

Result

Images may look distorted or partially visible depending on size and position.

Knowing how images behave by default helps you appreciate why crop and fill modes are needed.

3

Intermediate

How Crop Mode Works

🤔Before reading on: do you think crop mode resizes the image or cuts parts off? Commit to your answer.

Concept: Crop mode cuts parts of the image outside the frame without resizing the image itself.

In crop mode, the image keeps its original size and shape, but parts outside the frame are hidden. You can move the image inside the frame to choose which part shows. This is like looking through a window at a bigger picture.

Result

Only the part of the image inside the frame is visible; edges outside are hidden.

Understanding crop mode helps you control exactly which part of an image viewers see without changing image proportions.

4

Intermediate

How Fill Mode Works

🤔Before reading on: does fill mode keep the whole image visible or cut edges? Commit to your answer.

Concept: Fill mode resizes the image to cover the entire frame, possibly cutting edges to avoid empty space.

Fill mode zooms or shrinks the image so it fills the frame completely. If the image and frame have different shapes, some edges of the image get cut off. This avoids blank areas but may hide parts of the image.

Result

The frame is fully covered by the image, but some image edges may be hidden.

Knowing fill mode helps you create clean visuals without empty spaces, important for professional layouts.

5

Intermediate

Comparing Crop and Fill Modes

🤔Before reading on: which mode better preserves the whole image, crop or fill? Commit to your answer.

Concept: Crop mode shows the original image size but hides edges; fill mode resizes image to fill frame but cuts edges.

Crop mode is best when you want to show a specific part of the image without distortion. Fill mode is best when you want no empty space in the frame, even if some edges are lost. Choosing depends on your design goal.

Result

You can pick the mode that fits your visual needs: exact part or full coverage.

Understanding the tradeoff between preserving image parts and filling space is key to good design.

6

Advanced

Using Crop and Fill in Responsive Designs

🤔Before reading on: do you think crop and fill modes behave the same when frames resize? Commit to your answer.

Concept: Crop and fill modes respond differently when frames change size, affecting image visibility.

When a frame resizes, crop mode keeps the image size but changes visible area, possibly hiding more or less of the image. Fill mode resizes the image to always cover the frame, adjusting zoom dynamically. This affects how images look on different screen sizes.

Result

Images adapt differently to frame resizing, impacting responsive layouts.

Knowing how modes behave with resizing helps create flexible designs that look good on all devices.

7

Expert

Advanced Masking and Layering with Crop and Fill

🤔Before reading on: can crop and fill modes be combined with masks for complex effects? Commit to your answer.

Concept: Crop and fill modes can be combined with masks and layers for sophisticated image presentations.

Designers use crop and fill modes inside masked frames or with multiple layers to create effects like zoomed-in details, shaped images, or dynamic reveals. Understanding how these modes interact with masks and layers allows precise control over image display in complex dashboards or reports.

Result

You can create polished, professional visuals with layered images and precise cropping or filling.

Mastering these combinations unlocks expert-level design capabilities for impactful BI visuals.

Under the Hood

Figma treats images as objects inside frames. Crop mode clips the image using the frame boundary without changing image size, using a mask-like effect. Fill mode calculates scale factors to resize the image so it fully covers the frame, then clips any overflow. These operations happen in real-time as frames or images change.

Why designed this way?

These modes were created to solve common design problems: crop mode for precise framing without distortion, fill mode for full coverage without empty space. Alternatives like stretch distort images, which looks unprofessional. The design balances flexibility and visual quality.

┌─────────────┐
│   Frame     │
│ ┌─────────┐ │
│ │ Image   │ │
│ │ Crop:   │ │
│ │ Clip    │ │
│ │ mask    │ │
│ └─────────┘ │
│             │
│ ┌─────────┐ │
│ │ Image   │ │
│ │ Fill:   │ │
│ │ Scale & │ │
│ │ Clip    │ │
│ └─────────┘ │
└─────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does crop mode resize the image to fit the frame? Commit yes or no.

Common Belief: Crop mode resizes the image to fit inside the frame exactly.

Reality: Crop mode does not resize the image; it only hides parts outside the frame.

Why it matters: Believing crop resizes leads to unexpected image distortion or wrong parts showing.

Quick: Does fill mode always show the entire image inside the frame? Commit yes or no.

Common Belief: Fill mode always shows the whole image without cutting edges.

Reality: Fill mode resizes the image to cover the frame fully, cutting edges if needed.

Why it matters: Expecting full image visibility causes surprises when important parts get cut off.

Quick: Can crop and fill modes fix image distortion caused by non-proportional resizing? Commit yes or no.

Common Belief: Crop and fill modes prevent image distortion regardless of resizing.

Reality: These modes do not prevent distortion if the image or frame is stretched unevenly.

Why it matters: Misunderstanding this leads to poor image quality in designs.

Quick: Does fill mode always zoom in on the image? Commit yes or no.

Common Belief: Fill mode always zooms in, making images bigger than original.

Reality: Fill mode can zoom in or shrink the image depending on frame size and image proportions.

Why it matters: Assuming only zoom-in causes confusion when images appear smaller than expected.

Expert Zone

1

Crop mode allows precise control of visible image parts without changing image data, useful for highlighting details.

2

Fill mode's scaling respects image aspect ratio, preventing distortion but sometimes hiding edges, which can be adjusted by repositioning the image.

3

Combining crop/fill with masks and vector shapes enables complex visual storytelling beyond simple image placement.

When NOT to use

Avoid crop and fill modes when exact pixel-perfect image display is needed without any clipping; instead, use 'Fit' mode or manual resizing. For responsive designs requiring dynamic image scaling without cropping, consider using constraints and auto-layout features.

Production Patterns

Professionals use crop mode to focus on key image areas in dashboards, like product photos or maps. Fill mode is common for background images or banners to avoid empty spaces. Advanced users combine these with masks and overlays to create interactive reports with clean, engaging visuals.

Connections

Responsive Web Design

Builds-on

Understanding image crop and fill modes helps grasp how images adapt to different screen sizes in responsive layouts.

Data Storytelling

Same pattern

Choosing how images fit frames parallels selecting which data to highlight in a story, balancing completeness and focus.

Photography Composition

Builds-on

Crop mode mimics cropping photos to emphasize subjects, teaching visual focus principles useful in BI visuals.

Common Pitfalls

#1 Image looks stretched or squished inside the frame.

Wrong approach:

Set image width and height independently without maintaining aspect ratio.

Correct approach:

Use crop or fill mode to maintain aspect ratio and control visible area.

Root cause:

Not understanding that manual resizing can distort images without mode controls.

#2 Important parts of the image are cut off unexpectedly.

Wrong approach:

Use fill mode without repositioning the image inside the frame.

Correct approach:

After applying fill mode, move the image inside the frame to show key parts.

Root cause:

Ignoring that fill mode crops edges and requires manual adjustment.

#3 Empty space appears around the image in the frame.

Wrong approach:

Use crop mode with an image smaller than the frame without resizing.

Correct approach:

Use fill mode or resize the image to cover the frame fully.

Root cause:

Not matching image size to frame size or choosing the wrong mode.

Key Takeaways

Image crop and fill modes control how images fit inside frames by either hiding edges or resizing to fill space.

Crop mode keeps the image size but hides parts outside the frame, allowing precise focus on image areas.

Fill mode resizes the image to cover the frame fully, sometimes cutting edges to avoid empty space.

Choosing the right mode depends on design goals: preserving image parts or filling space without gaps.

Understanding these modes is essential for creating clear, professional visuals in dashboards and reports.