Photos and pixel based graphics are part of almost every real world Figma file, and the tools for importing, cropping, and swapping them are deceptively flexible. Once a few key concepts click into place, working with images in Figma feels fast and forgiving, and the same approach applies whether the image lands in a rectangle, a circle, or any custom shape. A strong grasp of image handling is the difference between a scrappy wireframe and a polished mockup.
- Figma treats images as fills on a shape, which means any vector shape can hold a photo and can be swapped between fill types at any time.
- Cropping can happen through the dedicated crop tool, or on the fly by holding command on Mac or control on Windows while resizing a photo.
- Keeping aspect ratio locked and using upload rather than replace preserves custom crops when swapping one photo for another.
This lesson is a preview from our Figma Masterclass Online. Enroll in this course for detailed lessons, live instructor support, and project-based training.
This is a lesson preview only. For the full lesson, purchase the course here.
The sections below walk through the practical parts of working with photos in Figma, starting with import, moving through cropping and replacement, and ending with how to pull original high resolution files back out of an embedded image.
Importing Photos Into Figma
Images come into Figma through the place image tool, which lives under the small arrow next to the shape tools at the bottom of the screen. JPEG and PNG are the two reliably supported formats for pixel based graphics. Photoshop files cannot be imported directly, and TIFF files look available but quietly fail, so anything coming from Photoshop should be exported to JPEG or PNG first or copied and pasted into the canvas. Once a file is selected, the cursor loads with the image and can either click once to place it at full size or drag to place it at a custom size. PNG supports transparency, while JPEG does not, which is the main reason to pick one over the other for a given graphic.
Cropping and Filling Inside Shapes
Every image in Figma is an image fill on a shape, and the default fill behavior is to cover the full shape with the photo centered horizontally and vertically. Unlocking the aspect ratio in the layout panel frees the shape to take any width and height, which automatically crops the photo to fit. The crop tool in the top right of the design panel switches the fill from fill mode to crop mode, which exposes handles on the photo itself and on the surrounding box. Holding shift while dragging keeps the photo proportional so nothing ever accidentally distorts, and switching back to fill and then back to crop is the quickest way to reset a photo that has been stretched by mistake.
Replacing and Swapping Photos
Two different workflows exist for replacing an image, and the distinction between them matters. Using the place image tool in the bottom toolbar and clicking on an existing shape treats the action as a full replacement, which resets any custom crop to the default fill behavior. This is the right approach when the new photo has a totally different aspect ratio than the old one. When the goal is to swap one photo for another of similar proportions without losing the custom crop, the better path is to open the fill panel, hover over the image thumbnail, and click upload. That method preserves the crop and applies the new image in place of the old one.
Filling Custom Shapes With Images
Because an image is simply a fill on a shape, any vector shape can hold a photo. Circles, ovals, polygons, and custom paths all work the same way. The trick is to draw the shape first, then use the place image tool and click the shape to drop the photo in as a fill. The fill panel also exposes other fill types including solid color, linear gradient, radial gradient, and pattern, and the same shape can be switched between all of those at any time. This is one of the features that makes wireframing in Figma so fluid, because a placeholder rectangle can become a photo, a gradient, or a solid color with a single click.
A few useful habits when working with images in shapes:
- Round corners interactively by dragging the corner dots inward, or enter a specific pixel value like twenty five in the corner radius field.
- Hold option on Mac or alt on Windows to toggle independent corner radius values when only certain corners should round.
- Hold option or alt while resizing a shape to scale it from the center, which adjusts both sides at the same time.
- Hold option or alt while hovering over another object to see the precise pixel distance between the selection and that object.
Wireframing With Placeholders
Wireframing is the early stage of design where rough boxes stand in for content that will be added later. Using placeholder rectangles rather than final photos is a way to fail fast, because design decisions about specific images can wait until the overall layout is settled. Selecting multiple placeholders at once and dropping a batch of images onto them with the place image tool is one of the fastest ways to convert a wireframe into a mockup. Holding shift expands the selection contiguously, while holding command on Mac or control on Windows adds individual shapes without grabbing everything in between.
Extracting Original High Resolution Images
Images are embedded in a Figma file once they are imported, which keeps everything in one place but creates a challenge when the original file is needed later. Paid accounts can switch into dev mode and download the original image directly from the right sidebar, but that approach only works one image at a time. A plugin called Export Original Images solves both problems at once, because it works in free accounts, it supports JPEG and PNG output, and it can export multiple images in a single pass. Selecting several layers or a parent frame and running the plugin exports every embedded image inside in one shot. Enterprise and organization accounts sometimes restrict plugins, so any plugin that does not appear in search may need approval from a Figma administrator.
