Modifying Images in Figma

Cropping an image in Figma lets you cut off the sides of a picture to show just the part you want. You don't lose the parts you cut off; you just hide them. This means you can change your mind and adjust the crop later if you need to.

To crop an image:

1. First, select the layer that has the image fill.
2. Then, navigate to the Fill section in the Design panel and click on the image thumbnail.
3. Open the image mode dropdown and select Crop.
4. Use the 8 blue handles around the image to adjust your crop.

For proportional cropping, hold the Shift key (on both Mac and Windows) to maintain the image's aspect ratio.

In Figma, various adjustments can be made to an image, such as repositioning, resizing, or rotating. Here's how to perform these actions:

• Repositioning: Click and drag the image to move it to a new location.
• Resizing: Grab any edge of the image and drag it to adjust its size. For proportional resizing, hold the Shift key (on both Mac and Windows) to maintain the image's aspect ratio.
• Rotating: Move your cursor just outside a corner of the image until the rotate icon appears, then click and drag to rotate the image.
• Resizing opposite sides simultaneously: Hold the Option key (Mac) or Alt key (Windows) while dragging to resize both sides at the same time.
• Rounding edges: To round the edges of an image, click on the image. Inside each corner, you'll see a small circle with a dot. This is the corner radius handle. Click and drag it inward to adjust the rounding.

You can fill objects with images in a few different ways, depending on how you want the image to show up. To select the fill type, click the image thumbnail in the Design panel and choose from the dropdown menu:

• Fill: This makes the image cover the whole object. If the image and object are different shapes, the image might get cut off to make sure the object is fully covered.
• Fit: This mode makes sure you can see the entire image inside the object. If the object and image shapes don't match, you might not fill the whole object, leaving some empty spaces.
• Crop: You can pick which part of the image you want to see by adjusting its edges. It's like putting a frame around the part you want to show.
• Tile: The image repeats over the object, creating a pattern. You can change the size of the repeated images by adjusting the percentage value. You can either type in a new percentage or use the blue handles in the canvas to make it bigger or smaller.

Rotating an image within an object in Figma is a handy technique for adjusting the direction of patterns, textures, or photos within shapes. This action only affects the image fill, not the entire object.

Here’s how to do it:

1. Select the object with the fill you want to rotate.
2. In the Fill section in the Design panel, click the image thumbnail that reveals a modal.
3. Look for the rotate icon and click it to rotate the fill by 90º clockwise. You can click multiple times to keep rotating in 90º increments until you achieve the desired orientation.

In photography, exposure controls how much light hits the camera sensor, affecting the image’s brightness. In Figma, exposure works the same way, you adjust how light or dark an image appears. To adjust exposure in Figma, click the image thumbnail in the Fill section of the Design panel. This opens a modal where you’ll find the Exposure slider. Drag it left to darken the image (like underexposing), or right to brighten it (like overexposing).

This adjustment is useful when you want to bring out details in dark images or tone down brightness in overly light ones. It helps images fit better with the rest of your design, improving balance and focus without needing external editing tools.

Higher contrast makes shadows deeper and highlights brighter. Lower contrast softens that difference, making the image look flatter or more muted. In Figma, you can adjust contrast by clicking the image thumbnail in the Fill section of the Design panel. This opens a modal where you can locate the Contrast slider. Drag it right to increase contrast and add more definition. Drag it left to reduce contrast and soften the image.

This adjustment helps when an image looks washed out or too harsh. Increasing contrast can sharpen edges and improve focus. Lowering it can help blend the image more smoothly into the background or surrounding elements.

Saturation controls how intense or muted the colors in an image appear. High saturation makes colors look more vivid. Low saturation reduces color strength, eventually turning the image grayscale.

In Figma, you can find the Saturation slider by clicking the image thumbnail in the Fill section of the Design panel. Drag the slider right to boost color intensity. Drag it left to tone down the colors or remove them entirely.

Use this when an image looks too dull or too loud. Increasing saturation can help an image stand out. Decreasing it can help it feel more neutral or better match the surrounding UI.

Adjusting an image's temperature changes its overall tone, shifting it from cool to warm hues. Temperature control is like adjusting the image's mood. Cooler tones, with blue undertones, give a calm, serene feel, while warmer tones, leaning towards amber, add a cozy, inviting vibe.

You can find the Temperature slider by clicking the image thumbnail in the Fill section of the Design panel. Simply slide to the left to cool down your image, introducing a subtle, refreshing blue tint. Sliding to the right warms it up, bathing your image in a soft, amber glow. This setting is great for setting the scene in your designs, whether you're aiming for the crisp freshness of early morning light or the golden hue of a sunset.

Adding a tint to an image lets you adjust its color balance, shifting between green and magenta hues. Click the image thumbnail in the Fill section of the Design panel to find the Tint slider. Sliding left adds a fresh, natural feel, ideal for images needing a touch of tranquility or to emphasize environmental themes. Sliding right infuses warmth and vibrancy, perfect for energizing a picture or highlighting romantic and creative elements.

This setting is especially useful in creating cohesive color schemes across your design, allowing images to harmonize with your overall palette.

To find the Highlights slider, click the image thumbnail in the Fill section of the Design panel. Adjusting highlights in Figma enhances the lighter areas of your image, making it easy to distinguish between bright spots and shadows. It allows for increasing the difference between light and dark areas for more depth. This adjustment can also help soften glaring highlights or boost them for a luminous effect.

This feature is especially handy when you want to balance your image's overall look or highlight specific details, ensuring your design stands out.

Click the image thumbnail in the Fill section of the Design panel to find the Shadows slider. Adjusting shadows helps you work on the darker spots of your image, making it easier to see the difference between light and dark areas.

By focusing on shadows, you can:

• Make your image look more interesting by adding depth.
• Change how dark or light the shadows are, making them softer or more noticeable.

Think of it as controlling how much shade there is in your picture. You can either turn down the shadows to keep things light or dial them up to make your image more dramatic.

Figma’s AI-powered edit image feature lets you change images using a simple text prompt. You can remove backgrounds, fix parts of an image, or boost resolution, all right inside Figma. To use it, you need to be on a paid plan and have Can edit access to the file.

Here’s how to use it:

1. Select the image you want to edit.
2. Go to the Actions menu in the bottom toolbar
3. Type what you want in the text box. Be clear and specific. More context helps achieve the desired result.
4. Click Edit image or press Command Enter.

This keeps editing fast and simple, without switching tools.