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.