Add images and videos to designs

You can upload images and videos to incorporate photography, screenshots, and other visual assets into your designs.

Figma supports the following file types:

Figma doesn’t have a specific layer type for images and videos. Instead, these assets are treated as fills. This allows you to add assets to any layer type, including shapes, frames, text layers, and vector networks. Learn more about using fills.

When you upload an asset directly to the canvas, Figma creates a rectangle layer with the asset set as the fill. You can identify the asset type by the icon in the Layers panel of the left sidebar: Image or Video/GIF.

Asset size limit

If the asset you are uploading exceeds 4096 x 4096 pixels, Figma will automatically scale the asset proportionally so that its longest dimension becomes 4096 pixels or fewer. You can resize the asset once it uploaded to the file. Please note that some file metadata may be lost during this resizing process.

Upload images and videos

There are a few ways to upload images and videos to Figma:

Use the color picker to upload images and videos

You can use the color picker to upload images and videos as a layer's fill:

  1. Select a layer on the canvas.
  2. Click on the swatch in the Fill or Stroke section of the right sidebar to open the color picker.
  3. Select Image or Video from the fill options. A visual placeholder of gray and white checkers is applied to the layer’s fill until you choose a file.
  4. Click Upload from computer to upload an existing image, or click Make an image to create images using Figma AI.

Canvas with a rectangle layer set to be filled with an uploaded image; fill options include "Upload from computer" and "Make an image".

Upload images and videos in bulk

Place image/video lets you import assets in bulk. You can then choose exactly where you'd like to place each asset. Since Figma treats images and videos as fills, you can also add them to existing objects.

  1. Select Image/video from the Shape tools menu in the toolbar or use the keyboard shortcut:
    • Mac: Shift Command K
    • Windows: Shift Ctrl K
  2. Select the image or video files you’d like to upload, then click Open. The cursor will display a badge showing the number of assets that need to be placed.
  3. Do one of the following:
    • Click on the canvas to place the image or video in a new layer, using its original dimensions
    • Select an existing object on the canvas to replace its fill with the image or video
    • Click Place all to add all assets to a single location on the canvas
  4. Repeat the process for the remaining assets. To discard any remaining images or videos, press Delete on your keyboard.

Demonstrating dragging and dropping an image into the Figma canvas to create a new layer with the image as a fill.

Replace image and video fills

You can change an image/video fill at any time. This will keep any fill mode settings you've applied, including any cropping or positioning.

There are a few ways to do this:

Demonstrating dragging and dropping an image into the fill swatch to replace the current image

Edit images

Once uploaded, you can use the image properties to adjust how the image appears in your design. You can also use Figma AI to expand images, remove backgrounds, and more.

Learn how to make and edit images with Figma AI.

Learn more about adjusting the properties of an image.

Link nội dung: https://itt.edu.vn/anh-design-a28737.html