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

Abstract glowing visual with yellow and orange gradients, featuring the text “AI & DESIGN 2025” in the center, suggesting a theme focused on artificial intelligence and design in 2025.
Documentation
AI

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)
Screenshot of the Webflow Partner directory showcasing several agencies: Digidop, Finsweet, Flow Ninja, and Simon Lampert. The blue background features the Webflow Partner logo on the left, while partner cards display their status, starting price, awards, and preview of delivered websites.
Documentation
Webflow

The Webflow Partner Program

The Webflow Partner Program
Agentic AI vs. Generative AI
Documentation
AI

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Want to turn your website into your most valuable asset?

Contact us today