# Comment ajouter des GIFs animés dans Figma ? Tutoriel3 minPublié le Apr 24, 2022Dernière mise à jour le ![editeur figma avec gif sur fond blanc, texte et barres de couleurs figma](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712646833ab4ff70198c062_64760069e93084646c9ef164_6265c84738cd3eb2df0f67f9_Open-Graph-importer-GIF-figma.png)Sommaire [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Résumez cet article avec une IA[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Points clés de l'article[Figma vous permet d’importer différents types de fichiers](/fr/blog/comment-importer-fichiers-figma), 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 : - **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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712646a33ab4ff70198c0de_64760069e93084646c9eeceb_6265c6c1546fcb7313b71b8a_visualiser-gif-figma.png) ‍ 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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712646a33ab4ff70198c0ee_64760069e93084646c9eecef_6265c72d6982ca2aae519ea3_gif-figma-mode-presentation.gif) ### 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” : - **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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712646a33ab4ff70198c0ea_64760069e93084646c9eecec_6265c4978edf975346f2f9df_section-fill-gif-figma.png) 2. **dans le Layer panel**, sur la gauche du mode éditeur ![éditeur figma titre gif entouré en bleu](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712646a33ab4ff70198c0f3_64760069e93084646c9eeced_6265c7850c90e87b88f03e5c_layer-panel-figma-gif.png) 3. **à droite des dimensions** du GIF lorsqu’il est sélectionné ![éditeur figma avec dimension de gif entourées en bleu](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712646a33ab4ff70198c0e3_64760069e93084646c9eecee_6265c7c86baf021b376a4dc1_nom-gif-figma.png) 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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712646a33ab4ff70198c0e7_64760069e93084646c9eecf0_6265c8185ec64a2e49969d18_aper%2525C3%2525A7u-gif-figma.png) ## Modifier un GIFs dans Figma Les GIFs Figma sont **éditables comme n’importe quel autre image** dans [Figma](/fr/tools/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](/fr/services/webdesign) ! [ ](#)![Thomas Labonne](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a45970e82f1635d9e4d7f_thomas-website%20(1).webp)Thomas LabonneCo-fondateur[ ](/fr/team/thomas-labonne)[ ](https://fr.linkedin.com/in/thomas-labonne-digidop)[ ](#)+1200 lecteurs ## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives. [S'inscrire ](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter ](https://digidopfr.substack.com/) ## Articles qui devraient vous intéresser ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir ### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026 [Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir ### Webflow lance Source. Notre avis sur ce shift. [Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir ### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA [Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles ](/fr/blog)Les meilleurs projets web commencent par une conversation[Discuter avec un expert ](/fr/contact)[Réserver un appel ](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)