How to Add Animated GIFs in Figma?

Tutorial
March 20, 2023
3 min
Figma editor with GIF on white background, text, and Figma color bars.
Key points

Figma allows you to import various file types, including animated GIFs, into your web mockups and designs. This feature will help you animate your prototypes, making them more realistic.

Adding an Animated GIF to a Figma Mockup

The methods for adding GIFs are the same as those for adding static images to your files:

  • Drag and Drop a GIF onto the canvas
  • Use the Figma Import tool
  • Utilize the “Place Image” feature
  • Import a GIF as a fill for an element
  • Copy and Paste a GIF

Previewing GIFs in Figma

Viewing a GIF Preview

There are two methods to preview a GIF in Figma:

  1. Double-click on the GIF to open the settings. You can then launch a preview of the GIF by clicking on the “Play” icon.
Figma GIF settings with a dog GIF and play button highlighted in blue

2. Open your Frame in presentation mode for the web mockup. The GIFs will automatically play on all your frames.

Figma GIF with a dog on an iPhone, against a black background

Separating GIFs from Other Images

GIFs are displayed statically in the Figma editor. To distinguish them from images, they are labeled "GIF":

  1. in the Fill section of the properties panel, located on the right side of the editor
Figma editor with the fill section highlighted in blue to emphasize a GIF

2. in the Layer panel, on the left side of the editor

Figma editor with the GIF title highlighted in blue

3. to the right of the dimensions of the GIF when it is selected

Figma editor with GIF dimension highlighted in blue

4. in the image settings when you double-click on it

Figma editor with GIF settings highlighted in blue

Editing a GIF in Figma

Figma GIFs are editable just like any other image in Figma. You can for example:

  • Resize, scale, and rotate your GIFs
  • Adjust the opacity
  • Create styles and components that utilize GIFs
  • Apply masks

Our agency specializes in Figma web mockup design!

Thomas Labonne
Thomas Labonne
Co-founder

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today