How to Crop in Framer

Updated on:

April 6, 2026

By:

Madhav Bhandari

Use this interactive demo to learn how to crop your designs within the Framer design tool.

‍

Here’s how to crop in Framer:

‍

Open your Framer project.
Go to the 'Fill' menu.
Access the 'Crop' tool to perfectly frame your visual content.
You can move or scale the image inside the frame to adjust what’s visible.
Adjust your design's dimensions for optimal display across devices.
Perfect your image presentation with intuitive cropping tools and click 'Crop'.
That's it! You've successfully cropped the image in Framer.

📌 Why this matters

Cropping images lets you eliminate distractions, highlight key subjects, and ensure your visuals fit perfectly within your design layout. Beyond basic framing, cropping becomes essential for responsive design – you can create multiple crop variations of the same image that work across different screen sizes and orientations.

This means your hero images, product shots, and content visuals maintain their impact whether viewed on desktop, tablet, or mobile, without awkward stretching or important elements getting cut off unexpectedly.

Your product deserves an interactive demo

Start free

How to Add Adobe Fonts to Framer

Framer CRM Integration

How to Link to Section in Framer