Working with images in Figma

Intro to working with images in Figma

It's no secret that images are a huge part of a designer's world. From sourcing and editing to manipulating and exporting, we're constantly working with images in our design files.

You might have noticed that images are handled a bit differently in Figma than in other tools. There's a few different ways to import them and some unique editing options. There's also a couple of tips and tricks that make designing with images in Figma easy. So whether you're new and coming from another tool, or just looking to improve your workflow, this guide is sure to make your colleagues and hovering art directors go, "Wait...how'd you do that?!"

Importing images in Figma

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.

Manipulating images in Figma

Now that you have your images inside Figma, you can edit them to your heart's desire. While we don't make any claims of Figma being a photo editing tool, we do provide a way for you to make some quick edits like adjusting exposure or contrast.

By default images are set to fill whatever shape they're in, however we give you complete control over this. If you click on the fill setting in the properties panel you'll see a new window pop up. At the top of this window you'll find a little dropdown that let's you switch between Fill, Fit, Crop, and Tile.

Fill

As you can see Fill will expand to the dimensions of the shape it's in.

Fit

Fit makes sure that you will always see the full image in your shape. You'll notice that this may cause blank space (padding) around the image.

Crop

Crop allows you to resize and move the image around the bounds of the shape.

Tile

Well…you get the idea! :)

Tips and Tricks for working with images

Now that you're an expert on importing and manipulating images in Figma, I wanted to share a few tips-and-tricks to help put these methods to practice.

Quick Crop

Need to quickly crop an image? Save a few clicks by selecting the image layer then clicking on the crop button in the top toolbar. Or, if you're a fan of keyboard shortcuts (which you should be), just hold down option and double-click on the image to bring up the crop setting.

Images as Styles

Did you know you can create a style from your image, and then publish that style to your Team Library? To do this, just select your image, click on the create style button and then give it a name. From here, you can either keep the style local to the file you're working in or you can publish it to your Library.

Layering Fills and Blend Modes

I won't be going into too much detail around all the different blend modes, but I will explain how adding multiple fill layers can be useful.

Let's say you'd like to make your image black and white. One way of doing this is by adjusting the saturation slider under the fill settings. However, if you ever need to swap that image out for a different one you'll have to re-apply that saturation setting. This is where Fill layers and blend modes come in handy.

By adding a solid fill, setting the color to black or white, and then changing the blend mode to color you now have black and white images with finer control.

Copying Fill Layers

One trick that I discovered in Figma that has saved me a ton of time is that you can copy and paste fill layers (this also applies to Stroke and Effect layers as well). Continuing from the example above, this lets you quickly take that black-and-white fill layer and apply it to additional images via command+c and command+v.

Images as Strokes

While there may not be many use cases for having an image as a stroke, it's good to know that we support this in Figma. :)

Like I said before, images are an important part of the design process. Whether you work with them on a daily basis or only when you need to update your Twitter avatar, you can't ignore them. So, from finding your preferred import method, to speeding up your design process by using image styles, hopefully this guide has been helpful. Have any additional image tips or tricks that I may have missed? Be sure to let me know on Twitter!

Note that images that are larger than 4,000px will be downsampled to ensure performance. All images in this guide were sourced from unsplash.com and diverseui.com.