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.

• 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.

• Adjust the properties of an image

  Before you Start

  Who can use this feature

  Users on Any plan can edit image properties

  Users with Edit access to a File can edit image properties

   You can access the Image Properties from the Fill section of the Properties Panel. 

  1. A static Image will be an "Image" in the Fill section. An animated GIF will be a "GIF".
  2. View a thumbnail of the image or GIF. Click the thumbnail to open the Fill menu.
  3. Adjust the Opacity of the Image using the field provided. We represent this as a percentage value (%).
  4. Toggle visibility of that Image by clicking the eye icon.
  5. Remove the image from the object by clicking the [-] icon.
  6. Add new Fill layers by clicking the [+] icon.
  7. Create Color Styles from Images, solid colors and gradients. Click the Style icon (four dot square) to view, apply or create Styles. 

  You can also click the image thumbnail in the Properties Panel to access more image settings. This allows you to adjust the following:

  1. Fill Type (Add Fills to layers)
  2. Blend Mode (Create unique effects with Blend modes)
  3. Fill Mode
  4. Rotation
  5. Image Preview
  6. Image Adjustments

  

  Fill Mode

  There are four different modes that decide how Figma will apply a Fill to your object. This takes into account the dimensions of both the image and the object you're adding it to.

  We keep the selected Fill mode, even as you scale or manipulate the object.

  • Fill will position and scale the Image so that it takes up the entire object it's applied to. If the image and the object are different shapes, we may clip the Image. This ensures the shape is completely filled.
  • Fit ensures the entire image is visible within the object it fills. This ensures no part of the image hidden, even when you resize the object. Depending on the shape of the object, the Image may not completely fill the object.

  • Crop allows you to adjust the boundary lines of your image. This allows you to control which part of the image you can see. This is a non-destructive action that works like a mask. 

  • Tile creates a repeated pattern of the original image, which fills the entire object. You can adjust the size of the tile using the percentage value. We base this on a percentage of the image's original dimensions. You can enter a percentage in the field provided. Or, click and drag the blue handles in the canvas to adjust the scale.

  Images that scale

  As we apply Images as Fills, it's not possible to adjust the scale or dimensions of the Image itself.

  But like any other object, you can scale the object the Image fills. We will scale and position the Image based on the Fill mode you've selected.

  In the example below, our Image is set to Fill. When we resize the object, Figma scales our Image to ensure it fills the entire object.

  

  Rotation

  You can use the Image options menu to rotate the Fill within an object. This won't affect the orientation of the object itself, just the Fill within it.

  The rotate icon allows you to rotate the Fill clockwise at 90º increments.

  1. Select the object you want adjust.
  2. Click the image thumbnail in the Properties Panel to open the Image options menu:
  3. Click the rotate icon to rotate the Fill 90º clockwise.
  4. Repeat as many times as you need.
  5. Click X in the top-right corner of the Image options menu to close and return to the canvas.

  

  Image preview

  The Fill menu allows you to see a preview of the Image. From here, you can perform some extra actions:

  • Upload images from your computer: Hover over the preview so that the Choose Image button appears. If you already have an image added, this will replace the existing Image with the new one.  Learn more in our Upload Images as Fills article.
  • Replace Images: Drag Image Files over the Image Preview to replace the Image. This will preserve the Fill mode and settings of the previous image.
  • Preview GIFs: If you've added a GIF, you can select which Frame you can see in the Editor. You can use the slider to choose your Frame, or press the play and stop icons to select a Frame.

  Image adjustments

  You can also apply adjustments to Images. These work like the filters or settings you'd see in photo editing software. 

  We apply these on top the Image as opposed to editing the image itself. Adjustments are non-destructive, you can reverse or update these settings at any time. 

   

  • Apply Image adjustments
  • Types of a adjustments

  Apply image adjustments

  You can apply Image Adjustments via the Image options menu:

  1. Select the Layer with the Image you want to adjust.
  2. Click the Image thumbnail in the Properties Panel.
  3. This will open up the Image menu where you can see a preview of the Image.
  4. You'll find the. Each setting has a scale which you can drag to adjust.

     
     Generally, you can drag the handle:

     • To the left to apply a negative adjustment.
     • To the right to apply a positive adjustment

     
     You can see the adjustments on the Image inn the canvas, as well as in the Image Preview.

  5. Click the X to apply your adjustments and return to the Canvas.

   

   

  Types of adjustments

  There are seven Image adjustments available:

  1. Exposure
  2. Contrast
  3. Saturation
  4. Temperature
  5. Tint 
  6. Highlights
  7. Shadows

  Note: It's not possible to apply adjustments to animated GIFs.

  Exposure

  Traditionally, exposure indicates how much light reaches the sensor within a camera. You can decrease the exposure to create a darker image (underexposure). Or, increase it to create an image with more light (over exposure).

  

  Contrast

  Contrast refers to the difference between the light and dark pixels within an Image.

  You can decrease the contrast to narrow the range of colors and create a muted Image. Or, increase the difference between the light and dark portions of your images.

  This results in more vivid images with brighter highlights and darker shadows.

  

  Saturation

  Allows you to adjust the intensity of the colors within an image. You can decrease the saturation completely to get a black and white image. Or, increase the saturation to create an image with more intense, saturated colors.

  Temperature

  Temperature refers to the tone of the image. We measure Temperature along a horizontal axis, from blue to amber.

  "Cooler" images have blue undertones, while "warmer" images have amber undertones. You can drag the slider to the left to create cooler toned images. Or, to the right to create warmer images.

  

  Tint

  Allows you apply a Tint to the colors within an image. We measure Tint along a vertical axis, from green to magenta.

  You can drag the slider to the left make the image appear more green. You can drag the slider to the right to makes the image appear more magenta.

  Tip! You can use Temperature and Tint together to adjust the white balance of the image.

  Highlights

  Allows you to isolate and adjust only the lighter areas of an image. You can use this to create more distinction between the highlights and shadows. As well as adjust the relative exposure.

  You can decrease to reduce the level of light in the highlights. Or, increase it to create even brighter highlights.

  

  Shadows

  This allows you to isolate and adjust only the darker areas of an image. You can use this to create more distinction between the highlights and shadows. As well as adjust the relative exposure.

  You can apply a negative adjustment to reduce the level of light and create deeper shadows. Or, a positive adjustment to increase the amount of light to create brighter shadows.

  

   
• 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