Related Videos

• Add animated GIFs to prototypes

  Who can use this feature

  Supported on any team or organization plan

  Anyone with can edit access can add GIFs to Figma design files

  Add GIFs to your design files and view them in presentation view. This allows you to simulate videos or animations, and create more dynamic prototypes.

  Due to browser limitations, the width or height of an image must not be larger than 4096 pixels. Figma will scale any larger images so they fit within these limitations.

  Add animated GIFs

  Like regular static images, you can apply animated GIFs to layers as fills. This means you to apply them to any vector shape, including text layers. There are a few ways to add GIFs to your designs:

  • Drag and drop GIFs onto the canvas
  • Import files via the file browser
  • Add images to objects in bulk with place image
  • Upload image as fills
  • Copy and paste image fills between layers

  Want to copy and paste an animated GIF from a website in the browser? Some browsers will only allow you to copy a static version of the GIF. We recommend saving a copy of the image locally and dragging the file into the file instead.

  View animated GIFs

  Animated GIFs only play in presentation view. When viewing the file in the editor, animated GIFs appear as static images.

  Identify GIFs by their GIF label in:

  • Fill section in the right sidebar
  • Fill modal 
  • Layers panel
  • Next to the image's dimensions in the canvas

  

  Manipulate or edit GIFs

  Like static images, you can also manipulate aspects of a GIF. You can:

  • Scale, rotate and adjust the dimensions of GIFs
  • Adjust the opacity, fill mode, and rotation of a GIF
  • Apply or combine with blend modes
  • Create styles and components with GIFs
  • Apply masks to only show a part of the GIF
  • Apply scrolling overflow settings to GIFs
  • Create overlays in prototypes using GIFs

  There are also a few extra options for GIFs:

  • View images and animated GIFs in the Figma mobile app
  • Keep and export metadata including Frame delay and # of Loops
  • Choose which frame of the GIF you want to display in the canvas

  There are some actions you can't take with animated GIFs. You can't:

  • Apply image adjustments to GIFs. We recommend layering fills and using blend modes instead.
  • View animated GIFs in the canvas (editor). Animated GIFs only play back in presentation view.
  • Export animated GIFs from Figma. Figma can only export animated GIFs as static images.
• Upload an image as a fill

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access to a file can add images

  You can apply an image to an existing shape via the color picker. You will need to have the image downloaded to your computer to upload it.

  Note: Images must be uploaded as PNG, JPG, TIFF, or HEIC files.

  Upload an image

  1. Select or create the shape in the canvas.
  2. Click on the Fill swatch in the right sidebar. This will open the color picker.
     
     
  3. Click on the Fill mode and select Image from the options: 
     
     
  4. A placeholder image of black and white checks will be applied to the shape. Click the Choose image button in the preview: 
     
     
  5. Select the image from your computer and click Open to apply.
  6. The image will be added to your shape as a Fill.
     
     

     Tip! We display static images as image and animated GIFs as GIF in the Fill section of the right sidebar.

     

  Replace image fills

  If you already have an image applied to a shape as a fill, you can replace the image you've used.

  This will keep any fill mode settings you've applied, including any cropping or positioning.

  There are a few ways to do this:

  • Drag the image file over the image preview in the Fill modal:
    
    
  • Drag the image file over the Fill in the right sidebar:
    
    
• Add images to design files

  Who can use this feature

  Supported on any team or plan

  Anyone who can edit design files can add or import images.

  Adding mp4 fills is supported for files in Education, Professional, Organization, and Enterprise teams.

  Figma supports PNG, JPEG, HEIC, GIF and WEBP image and mp4 video formats.

  Add images to your design files to incorporate photography, screenshots, or other visual assets in your designs. Figma supports PNG, JPEG, HEIC, GIF and WEBP image and mp4 video formats.

  Figma doesn't have a specific layer type for images, instead, images are a type of fill. This allows you to add images to any shape or vector network.

  View and update image fills in the Fill section of the right sidebar. Figma will show a thumbnail of the image in the swatch and an Image label.

  You can identify layers with image fills in the Layers panel in the left sidebar:

  • If you add an image straight to the canvas, Figma creates a rectangle in the canvas with the dimensions of the original file with the Image icon and Image label.
  • If you add an image to an existing object, Figma uses the layer icon and description of the original layer.

  You can also identify layers with video fills in the Layers panel in the left sidebar:

  • If you add a video straight to the canvas, Figma creates a rectangle in the canvas with the dimensions of the original file with the video icon and Video label.
  • If you add a video as a fill to an existing object, Figma uses the layer icon and description of the original layer.

  Note: Figma downsizes images with a width or height larger than 4096 pixels. This scales the image's original dimensions proportionally, so the longest edge is less than 4096 pixels.

  Sometimes, Figma needs to decode and convert an image before adding it to the file. For this reason, we can't guarantee that Figma will preserve all file metadata.

  Add images to files

  

  As images are fills, you can add them to any vector or shape. This gives you greater flexibility and control. There are a number of ways you can add images to design files:

  • A Drag and drop images file from your computer onto the canvas. Figma creates a new rectangle the dimensions of the image and applies the image as a fill.

  • B Import image files into the file browser. Figma creates a new design file in the project with the image added as a rectangle.

  • C Add multiple images to your designs in bulk using place. Choose which layers to add images to. Place images in bulk →

  • D Use the image importer from the color picker. Upload image fills →

  • E Copy an image from another layer in the current file, or from another file. Copy and paste images between layers →

  • F Paste any image from your clipboard into the canvas. Copy images from the web without having to download and upload. Paste images in the canvas →

  You can also add video and animated GIFs to your prototypes. GIFs only playback when viewing designs and prototypes in presentation view. Add animated GIFs to prototypes →

  Edit images

  There are lots of ways to edit or adjust images:

  • Scale, rotate and adjust the dimensions of any layers with images
  • Crop and re-position images applied to layers
  • Adjust the image options including the Fill mode, rotation and blend modes
  • Includes images in styles and components
  • Apply masks to only show a part of the image
  • Make adjustments to images like changing the hue, saturation, or contrast

  Having issues loading images? Troubleshoot common image loading issues →

• Add images and videos in bulk

  Who can use this feature

  Adding images is supported on any team or plan. Adding videos is supported on any paid team or plan.

  Only people with Can edit access to the file can add images.

  Place image/video allows you to import images and/or videos in bulk. You can then choose exactly where you'd like to place each file. As Figma treats images and videos as fills, you can add them to existing objects.

  Tip! Figma supports .png, .jpg, .tiff, or .heic image files, and .mp4, .mov, or .webm video files. Learn more about working with videos in Figma →

  Note: If you are on the Starter plan, you can only add images—this means that instead of “Place image/video,” your menu item is labelled “Place image.”

  

  1. Access Place image/video from any of the following places:
  • • From the menu, by searching Quick actions for Place image/video.
    • From the Shapes menu in the toolbar:
      
    • Use the keyboard shortcuts:
      MacOS: Shift-Command-K
      Windows: Shift + Ctrl + K
  2. Figma will open an upload window which allows you to select your image and/or video files. Select the files you'd like to use and click Open.
     
  3. Figma will show a plus cursor and a thumbnail of the first file. If you've selected multiple files, a badge will show how many files you have left to place.
     
  4. You then have a few options:
  • • Click on an area in the canvas to add an image/video to those co-ordinates. Figma will add the file to the canvas at its original dimensions:
      
    • Click and drag to define the dimensions of the image/video. This allows you to add the file with dimensions that are different to the original.
      
    • Select an existing object on the canvas. This will apply the image/video as a fill with the Fill mode set to Fill.
      
    • Select Place all in the menu bar to add all files to the canvas at once.
      
  5. Repeat the process for any remaining images/videos. Use the Discard all button in the menu bar to discard any files that haven't been placed.
     

  Having issues loading images? Learn about the most common image loading issues and how to fix them.

• Paste images in the canvas

  Who can use this feature

  Supported on any team or plan.

  Anyone who can edit the file can add images.

  Figma doesn't have a specific layer type for images, instead, images are a type of fill. This allows you to add images to any shape, including custom vector networks.

  There are lots of ways to add images to design files. In this article, we'll show you how to paste from the clipboard and what outcomes to expect.

  Due to limitations with Chromium, it's not possible to paste from the clipboard on Windows devices. Instead, we recommend you upload images as fills.

  Create a new layer

  If you want to create a new layer from an image on your clipboard, you can paste it directly on the canvas. This allows you to copy images from the web without having to download them to your device.

  1. Click an empty spot in the canvas to deselect any layers.
  2. Paste the image to add a new layer to the canvas using the keyboard shortcut:
     • macOS: ⌘Command V
     • Windows: Ctrl V
  3. Figma will create a rectangle shape with the same dimensions as the original image and apply the image as a fill.

  Add image to an existing layer

  If you select a layer before pasting an image, Figma will add the image to that layer as a fill. You can use this process to replace an existing fill or add another fill to a layer.

  By default, Figma will add a new fill to the layer. If you want to replace the existing fill, you can select the fill in the right sidebar before pasting.

  1. Select the layer you want to add the image to.
  2. To replace the existing fill (optional): select the fill layer in the right sidebar. You'll need to click to the left of the image thumbnail. The fill layer is highlighted in blue when successfully selected.
  3. Use the paste shortcut
     • macOS: ⌘Command V
     • Windows: Ctrl V
  4. Figma will add the image to the selected layer as a new fill. The fill mode of the image is Fill by default, but you can change this to Fit, Tile, or Crop.

  Paste GIFs

  Most browsers do not support copying animated GIFs to your clipboard. If you copy a GIF directly from the browser and paste this into Figma, it will result in a static image.

  We recommending downloading a copy of the GIF to your computer, then import it to Figma using another method. Add animated GIFs to prototypes →

• Crop an image

  Before you Start

  Who can use this feature

  Fill modes are available on Any plan

  Anyone with can edit access can adjust the Fill mode of an image

  Fill modes define how Figma will apply a Fill to an object.

  A fill mode will take into account the dimensions of the image and the object you're adding it to, and display the image accordingly.

  To crop an image you can either set the image's fill mode to Crop or hold ⌘ while resizing a frame.

  Update the fill mode

  • 1. Select the layer you'd like to adjust. 

    2. In the Fill section of the Properties Panel, click on the Image thumbnail to open the Fill menu.

    3. Click on the Fill mode drop down in the top-left corner and select Crop: 
    4. Figma will add 8 blue handles around the image. You can then choose how much of the image you want to display:
       • Click and drag the blue handles in any direction to define 
       • Click and drag the image itself to reposition
       • The parts of the image you don't want to be visible will be less opaque:
    5. Click anywhere on the canvas to apply the crop. Or, click the X in the Fill menu.

  Crop quickly:

  Once an image is selected, hold down ⌘ (Mac) or Ctrl (Windows) while you click and drag the corners to crop it.

  Releasing ⌘ / Ctrl before the mouse will revert back to resizing the image instead.

• Image loading and performance

  This article covers common image-related issues in Figma and how to fix them.

  Image resolution

  Figma stores both high-resolution and low-resolution versions of your images. High-resolution images are images larger than 512 by 512 pixels.

  Figma only downloads high quality versions of images in your current viewport. For images outside your current view, Figma loads a lower quality version. This improves performance when you first load a file.

  If you have a lot of high-resolution images in a file, your images may look blurry at first. Figma will load high-resolution images as you explore the file.

  Note: Because Figma only loads high quality versions of images in your current viewport, exporting content that includes images outside your current view may take longer than expected. This is due to Figma loading high-resolution versions of all images before exporting.

  If you’re still seeing low-resolution images, you can try the following:

  • Close and reopen the affected file
  • Close any other Figma files
  • Check your internet speed and connection to make sure your device is online
  • Using Figma in the browser: quit your internet browser application, then relaunch it.
  • Using the desktop app: right-click on the file’s tab and select Reload Tab.

  Incorrect image rotation

  EXIF data (Exchangeable Image File Format) provides information on an image's characteristics such as orientation, size, device used to create the image, date, and more.

  Before mid-2020, internet browsers didn't always check the orientation value in an image's EXIF data, including those taken on a mobile device. When this happened, Figma would automatically rotate images according to the EXIF data.

  Now that most internet browsers check an image's EXIF data, images that were previously manually rotated in Figma may need to be corrected once more to account for this change in your browser's behavior.

  

  Example

  1. You imported an image to a file in Figma. Your internet browser ignored the image's EXIF data, so Figma corrected the image's orientation for you.
  2. In mid-2020, you updated your browser to a version with new EXIF data handling. Your images have now been rotated twice—once by the browser, then again by Figma—resulting in the wrong orientation.
  3. Before October 2020, you manually rotated the image to the correct orientation.
  4. In October 2020, Figma released an update to account for the new behavior by newer versions of internet browsers. Your image appears incorrectly rotated again.

  Note: You only need to correct image rotation once if you encounter this issue. Going forward, your browser will set image orientation correctly using an image's EXIF data.

  You may also need to manually rotate an image if the thumbnail image appears incorrectly rotated while zooming, loading, or panning around a file.

  Images in prototypes not loading

  There are two possible causes for images in prototypes not loading:

  • Limited internet connection
  • Blocked by a browser extension

  

  Limited internet connection

  Images may fail to load if your device is experiencing a limited internet connection, or is offline. Confirm your device has a reliable internet connection.

  Browser extensions

  Browser extensions, such as ad blockers, can prevent images from loading in presentation view.

  You can disable the browser extension, or add figma.com to the extension’s allow list. The process for this varies by extension, so make sure to reference the documentation for the relevant extension.

  As of August 2020, the following extensions are known to block images in Presentation view:

  • Ghostery
  • Video Downloader PLUS
  • iDM Integration Extension
  • Honey