Importing images in Figma

Via the menu

This might seem obvious, but to start working with images in Figma, you'll need to first import them into your file. You can do this from the menu, by going to File then clicking on Place Image. You can also find this same option at the bottom of the Shape Tools dropdown, or by pressing the handy keyboard shortcut Shift + Command + K.

This will then bring up a file browser that lets you select multiple images. From here though, we don't just toss them all willy-nilly on your canvas. Instead, Figma lets you add them one-by-one by either clicking or dragging. This gives you a lot more control over the placement and size of the images upon import.

This may seem like a simple thing, but it's actually quite powerful, especially when you consider how images are handled in Figma. Let me rewind really quick and explain why.

In Figma, we don’t treat images as their own object type, instead, we treat them as fills. When you import an image, we create a rectangle with the same dimensions and apply an image fill to it. If you're familiar with CSS, think of this as setting an image on the background property of a div. At face value, this doesn't necessarily mean all that much, your image should still look the same, but the benefit is that it makes it much easier to crop, resize, and replace the image as you're designing.

So, back to importing. Like I said, when you use the Place Image method you get the option to add multiple images one-by-one. The cool thing is that because images are treated as fills you can use this method to add your selected images to pre-existing shapes. One use-case for this would be to quickly add profile images to three different designs (circle, square, and rounded-rect) that you want to test out.

Via drag and drop

The second import method is via drag and drop. From your desktop or a folder on your computer you can simply drag and drop one or multiple images into Figma. With this method we place them on the canvas in aligned rows of ten. The nice thing about this is that you can quickly take advantage of our newer Smart Selection features. Just select all of the images you imported and then adjust the spacing. Or if you want to get really fancy you can quickly create a grid and then swap them around like a true photo feed.

These two import methods — importing via the place image method or by drag and drop — are extremely versatile, but they do require that you have the images already downloaded to your computer. So, what if you're wanting to quickly explore a bunch of ideas without taking up that precious hard drive space? Don't worry, Figma's got you covered.

Via copy + paste

The third way to import images is through a simple copy and paste. When you're browsing for that perfect image and you think you've found the one, just right-click on an image and select copy. (This should work from any browser.) Jumping back to Figma, you can then paste the copied image into your file.

Although this method only works with one image at a time, it's a quick way to try out a bunch of ideas, plus it skips the middleman à-la your hard drive.