Comment ajouter des GIFs animés dans Figma ?

Figma vous permet d’importer différents types de fichiers, dont des GIFs animés, sur vos maquettes et designs web. Cette fonctionnalité vous permettra d’animer vos prototypes en les rendant plus réalistes.

Ajouter un GIF animé sur une maquette Figma

Les méthodes d’ajout de GIFs sont les mêmes que celles pour ajouter des images statiques sur vos fichiers :

• Glisser / Déposer un Gif sur le canevas
• Utiliser l’outil d’importation Figma
• Utiliser la fonctionnalité “Place Image”
• Importer un Gif en tant que remplissage sur un élément
• Copier / Coller un Gif

Visualiser des GIFs dans Figma

Voir l’aperçu du GIF

Il existe deux méthodes pour avoir un aperçu d’un GIF dans Figma :

1. Double cliquez sur le GIF pour ouvrir les paramètres. Vous pouvez alors lancer un aperçu du GIF en cliquant sur l’icone “Play”.

‍

2. Ouvrez votre Frame avec le mode présentation de la maquette web. Les GIFs se lanceront automatiquement sur tous vos frame.

Dissocier les GIFs des autres Images

Les Gifs sont présent de manière statique depuis l’éditeur Figma. Afin de les dissocier des images, ils sont intitulés “GIF” :

1. dans la section Fill du panneau de propriété, sur la droite du mode éditeur

2. dans le Layer panel, sur la gauche du mode éditeur

3. à droite des dimensions du GIF lorsqu’il est sélectionné

4. dans les paramètres de l’image lorsque vous double cliquez dessus

Modifier un GIFs dans Figma

Les GIFs Figma sont éditables comme n’importe quel autre image dans Figma. Vous pourrez par exemple :

• Agrandir, mettre à l’échelle, faire pivoter vos Gifs
• Régler l’opacité
• Créer des styles et composants qui utilisent des Gifs
• Appliquer des masques

Notre agence est spécialisé dans le design de maquette web Figma !