Animated GIFs make your Figma models and prototypes more realistic. Here's how to add and view GIFs in Figma.
Figma allows you to import different types of files, including animated GIFs, onto your mock-ups and web designs. This feature will allow you to animate your prototypes, making them more realistic.
Adding an animated GIF to a Figma model
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
- Using the Figmaimport tool
- Using the "Place Image" feature
- Import a Gif as a fill on an element
- Copy / Paste a Gif
Viewing GIFs in Figma
See the preview of the GIF
There are two ways to preview a GIF in Figma:
- Double click on the GIF to open the settings. You can then preview the GIF by clicking on the "Play" icon.
2. Open your frame with the presentation mode of the web template. The GIFs will automatically launch on all your frames.
Disassociate GIFs from other images
Gifs are present in a static way from the Figma editor. In order to dissociate them from the images, they are entitled "GIF":
- in the Fill section of the property panel, on the right of the editor mode
2. in the Layer panel, on the left of the editor mode
3. to the right of the GIF dimensions when selected
4. in the image settings when you double click on it
Editing GIFs in Figma
Figma GIFs are editable like any other image in Figma. You can for example :
- Enlarge, scale, rotate your Gifs
- Adjusting the opacity
- Create styles and components that use Gifs
- Applying masks
Our agency is specialized in Figma web design!
