Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Comment ajouter des GIFs animés dans Figma ?

Thomas Labonne
Thomas Labonne
April 24, 2022
editeur figma avec gif sur fond blanc, texte et barres de couleurs 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”.
paramètre gif figma avec un gif de chien et bouton play entouré en bleu

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

gif figma avec chien dans un iphone, sur fond noir

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
éditeur figma avec la section fill entourée en bleu pour mettre en avant un gif

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

éditeur figma titre gif entouré en bleu

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

éditeur figma avec dimension de gif entourées en bleu

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

editeur figma avec les paramètre d'un gif entouré en bleu

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

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions