Advanced image manipulation in Figma

Figma is not exactly suited for image manipulation, and that’s completely fine. While it does provide an ample amount of tools that let you apply some basic changes to your raster images, for anything more complex you need to look someplace else. Unless of course you’re really stubborn, like me, and enjoy doing things the hard way.

The basics

Now let’s quickly cover the basics of what you can do. First, you have the set of slider controls anyone who’s modified a photo on their phone should be familiar with.

Figma also provides you with the blend mode feature, used to determine how two layers interact with each other. Well known to those of us who have used Photoshop or similar apps in the past. Blend modes are a great feature, but using them properly may require a lot of practice and experimentation.

You also get to choose how an image behaves when it’s resized, or rather when its bounding area is resized. This should make the most sense to those who are not afraid to dabble in CSS.

The default option for an image is to fill its bounding area. What this means is that when it’s scaled up or down and the image no longer fits the bounding area, some of its parts will get cropped away or rather hidden from view.

The second option is fit. The image always remains in full view and is centered inside the bounding area. If the bounding area is too wide or too tall, you’ll get some empty space on the sides of an image.

Crop seems a little janky, I rarely use it. When you choose crop from the menu, you get these handles that allow you to specify the bounding area. Even though the X, Y, W & H properties change accordingly when you manipulate the bounding area with your mouse, you can’t use them to define its exact size or location. As soon as you click either of those controls you get kicked out of the crop mode. Thankfully snapping still works. You have to be careful after using crop mode, as the image will lose its aspect ratio (as shown in the example below) when the bounding area is resized without the shift key being pressed.

Using tile for the first time brings the image to its original aspect ratio and size. If the bounding area’s smaller then the original image, you won’t see the effect of tiling. You can modify the size of the tile by setting its size in percentages or grabbing the side of a tile and moving it around. The tiles always retain the aspect ratio of the original image. This is a great tool for generating pattern backgrounds.

All of these changes can be reversed, although there’s no quick way to bring back an image to its original size and properties. You could delete the modified image and reimport it, but that’d be way too easy. What any self-respecting Figma aficionado should do is set the image to tile. That’ll make the image pop back to its original size (or if you’ve been using tile before on the image, just set the tile size to 100%) and aspect ratio. Now resize the bounding box to fit the image’s frame and there you go.

Fill layer stacking

Now that we’ve got all the obvious stuff out of the way, it’s time to move on to the fun parts. One of the coolest and less known features is the ability to stack fill layers of an object. It’s kind of like nesting layers inside an object or even a separate system of layers that behaves pretty much as the normal layers do.

You can have multiple fill layers, stroke layers, effect layers or export settings. Since we’re talking about image modification, we’re going to be talking about fill exclusively. Clicking the + button more than once keeps adding additional fill layers. The default type setting for the second fill layer, regardless of what kind of fill layer is set as the first one, is gradient.

This is really cool because you can exercise greater control over your imported images while keeping your regular layer structure clean. Normally you’d need to put the image object in a frame and have the effects in a separate object, all of them appropriately constrained. By stacking fill layers you keep all your effect layers inside one single object and you don’t need to worry about constraints.

Just as with normal layers, you can change the stack order of your fill layers. All you have to do is grab one and move it to wherever you like. The tricky part is actually grabbing one. The example on the left (above) highlights the entire area of a single fill layer in the Fill panel and from left to right you’ve got four controls that let you set fill type and color, opacity or remove the layer. Everything that isn’t a control is grabbable (highlighted on the right) and allows you to move the layer around. Knowing all that you can go all kinds of crazy with overlay tints, gradients and blend modes to receive many satisfying or unsatisfying effects, but there’s more.

Once you have a fill layer selected you can copy it, but only through keyboard shortcuts. There’s no right click menu for this layer system in case you’re wondering. Since you’re copying a property rather than an object, you need to select an object or a set of objects in order to be able to paste your fill layer into. And this is actually pretty awesome, because it lets you copy a fill layer from an imported image and paste it into any object that accepts fill layers. It could be a circle (if you’re creating, say, an avatar) or it could be text. This action doesn’t overwrite any preexisting layers — it gets added as the topmost layer of an object.

This is different than using the more fleshed out method of copying properties of an object. When you’re doing that you’re copying a set of different properties — could be a lot of them. Using my method you can be very particular about choosing the properties you want to copy between two objects.

Images as styles

Some of the features I’ve described seem so obscure and unintuitive to use, it almost makes me questions their intendedness. As I’ve mentioned before, you could achieve the same effects by using the normal system of layers, masks, and constraints, though I often find myself preferring the fill stacking method. One of the reasons for that is that you can turn a combination of fill layers that includes an image into a color style for your design system. Once you’re ready setting up your layer stack, just add it to your color styles and it’s now ready to be applied to any object that accepts colors. So yeah, nothing’s stopping you from using it as a stroke layer now.

I hope that this newly acquired knowledge will have you switching back to Photoshop a little less now. Good luck.