Figma offers a range of shortcuts and controls for importing images, placing them on the canvas, and modifying them once they’re in position. Let’s take a look!
Watch Tips
1. Use Fill Settings on Images to Control Size
When you drop an image into Figma, in actual fact a rectangle is created, then the image is set as that rectangle’s background fill. To modify how that image is displayed, go to the rectangle’s fill properties in the Properties panel.
Much like the way we can control how a background image is displayed via CSS, here we can state that the image should:
- Fill: the image crops horizontally or vertically so that it completely fills the object.
- Fit: all of the image is visible, which often leaves an area of the rectangle unfilled.
- Crop: where the image actually stretches with the size of the rectangle.
- Tile: the image tiles to cover the rectangle. The size of the tiles can be changed via a secondary set of sizing handles.
2. Import Whole Sets of Images
To import a whole set of images you can drag and drop a folder onto the Figma canvas, then all the images will be automatically imported for you.
3. Import and Place Multiple Images
To keep batch importing images more organized, first set up some frames where you’d like to display your images, then hit (CMD or CTRL) + SHIFT + K, click somewhere on the canvas to begin the process, then select all the necessary images in the file picker which pops up.
You can then click on the canvas, once for each image, placing them exactly where you want as you go. In the screenshot below you’ll see from the mouse cursor that there are still two images to place.
Figma Learning Resources
Those were some quick tips for working with images in Figma. To help you take things to the next level we have a series of Figma courses on Tuts+:
- Hat tip to Carmel DeAmicis and Valerie Veteto for their regular community tips roundups—go and check them out!
- blog.figma.com
- www.figma.com
