06. Images - Figma 101
Learn how to import and manipulate images efficiently so you can work quickly without interrupting your creative flow. Understand drag and drop, image fills, masking, and blend modes so you can integrate photography and visuals seamlessly. These image fundamentals mean less time wrestling with imports and more time on the design decisions that matter.
Let's look at the various ways to add and manipulate images in our designs. (mid tempo beats music) We will start with the simplest method, importing an image directly onto our Figma canvas. So start by navigating to the Figma icon dropdown in the top left corner, and then go to file, place image, and then a dialogue box will appear where you can select the image you want to import. Your image will now show up attached to your cursor in the Figma interface, and you can click anywhere on the canvas to place it. The shortcut for this is Command + Shift + K.
Images on the canvas are exactly like the rectangles we just looked at in the previous lesson. The only difference here is that there is an image fill instead of a solid color fill. One of the quickest ways to import an image is by using the drag and drop method. Open any folder on your computer containing the desired image, then drag and drop it directly onto your Figma canvas. One of the coolest features about Figma and the way it handles images is the ability to copy an image directly from the web.
To do this, we can right click on any image online and choose copy image, head back to Figma, and then hit Command + V and boom, you have your image. Dragging and dropping and copying images on the web are the two methods that I personally use most. Images in Figma are rectangles with a special image fill property. Because this is a property of a shape, we can borrow this property and use it on other shapes. Figma allows you to quickly copy an image fill from one shape to another.
First, select the shape with the image fill you wish to copy. Then press Command + Option + C. Next, select the shape you want to fill with the image and press Command + Option + V. The selected shape will now be filled with the copied image. The only downside to this method is that all of the properties will be copied, including any corner radius or strokes, et cetera.
To copy and paste only an image fill, select the image fill in the properties panel of the selected shape, and then press Command + C. You can then select another shape and just hit Command + V. The second shape will now have the same image fill as the first one. Frames can also have image fills in addition to rectangles and other shapes. You can easily crop images by selecting the image, hold down the Command key and adjust the bounding box to your desired size.
We can also use shape masks for images to create different effects. To do this, place the image you want to mask over the shape you'll be using as a mask. Make sure the shape has a fill on it. Next, select both the shape and the image. Right click and choose use as mask.
The image will now conform to the shape effectively being masked by it. The shortcut for this is Command + Control + M. This creates a unique mask in the layers panel, and you can also place other layers inside of this mask group as well. (light playful music) We can also use a frame as a mask. Though keep in mind, frames can only be rectangular.
To use an image inside of a frame, we need to make sure that clip content is selected. We'll drag and drop an image into this frame. If the image is larger than the frame, it will overflow the boundaries unless clip content is checked in the properties panel. This will clip the overflowing parts of the image, effectively fitting the image within the boundaries of the frame. Another way to push images in Figma is by adjusting the blend mode.
Blend modes can alter how your images interact with the layers beneath them. Let's look at three that I primarily use, multiply, screen, and luminosity. Multiply will remove the white parts of an image, leaving only the dark parts. Screen is the opposite of multiply and will remove the darkest areas. Luminosity will absorb the color beneath the image.
To illustrate this mode, first, let's add a color fill to the image, and then drag it below the image fill. Once you apply luminosity to your image, the color from the underlying layer bleeds through the luminance of the image, creating a color blend. Luminosity can be helpful for integrating images shot under different lighting conditions as it helps achieve a consistent look across different photos. This can be ideal if you have a bunch of avatars for testimonials you want to display on your website, but the colors are all different. So that's it.
You've now got some super useful tricks up your sleeve for working with images in Figma.
