Comment Rendre un Fond Transparent dans Figma (Guide 2026)

Figma est conçu pour le design d'interface, pas la retouche photo, donc « supprimer l'arrière-plan » signifie quelque chose de différent là-bas que dans un outil photo. Si vous avez simplement besoin que l'arrière-plan de votre frame ou de votre plan de travail disparaisse à l'export, Figma peut le faire nativement. Mais si vous avez une photo avec un arrière-plan chargé - une photo produit, un portrait, une image placée - Figma n'a aucun moyen intégré de détecter le sujet et de le détourer ; il vous faut soit un plugin, beaucoup de patience avec l'outil Plume, soit un outil de suppression d'arrière-plan dédié avant même que l'image n'arrive dans votre fichier.

Pourquoi les fonds transparents comptent dans les projets Figma

Les PNG transparents permettent de superposer un logo, une photo produit ou une icône sur n'importe quelle couleur, maquette de capture d'écran ou dégradé sans encadré visible autour. C'est important pour les kits UI, les présentations marketing, les captures pour l'App Store, et tout système de design où le même élément doit apparaître sur plusieurs fonds.

Méthode 1 : Exporter un frame avec un fond transparent

Étape 1 : Sélectionnez votre frame, groupe ou composant dans Figma.

Étape 2 : Dans le panneau de droite, supprimez ou masquez le remplissage d'arrière-plan du frame (cliquez sur la pastille de couleur et supprimez-la, ou désactivez sa visibilité).

Étape 3 : Ouvrez la section Export en bas du panneau de droite, choisissez PNG, puis exportez. Le PNG prend en charge la transparence alpha, donc partout où le remplissage d'arrière-plan a été supprimé sera exporté en transparent plutôt qu'en blanc.

Cela fonctionne bien pour les logos, icônes et maquettes UI où l'« arrière-plan » n'est qu'une couleur de remplissage ajoutée dans Figma, pas une scène photographiée.

Méthode 2 : Supprimer l'arrière-plan d'une photo placée

Si le besoin de transparence concerne une photo - une photo produit, un portrait, la capture d'un objet physique - les réglages d'export de Figma ne peuvent pas aider, car l'arrière-plan n'est pas un remplissage Figma, il fait partie des pixels de l'image elle-même. Dans Figma, vos options réalistes sont un plugin communautaire qui appelle une API externe, ou le masquage manuel du sujet avec l'outil Plume, ce qui est lent et produit rarement des contours propres autour des cheveux, du pelage ou des détails fins.

La voie la plus rapide : le supprimer avant l'import

Le workflow le plus simple pour la plupart des designers consiste à supprimer d'abord l'arrière-plan de la photo, puis à glisser le PNG transparent résultant directement dans Figma. Téléchargez l'image sur nobackground, laissez l'IA embarquée détourer le sujet en quelques secondes, téléchargez le PNG et placez-le sur votre canevas - sans autorisation de plugin, sans compte, et sans qu'aucune image ne quitte votre navigateur durant le processus.

Conseils pour des exports transparents propres

• Exportez à l'échelle 2x ou 3x pour tout ce qui sera utilisé sur un écran haute densité, puis réduisez l'échelle si nécessaire - cela évite des contours flous et doux autour du détourage.
• Prévisualisez les PNG transparents sur un damier ou un fond sombre avant de les livrer, car un léger halo gris sur les contours est facile à manquer sur un canevas blanc uni.
• Si vous placez le même détourage sur plusieurs maquettes, conservez le PNG transparent original comme ressource partagée dans votre bibliothèque Figma plutôt que de le réexporter depuis chaque frame.

Questions sur la transparence dans Figma

Figma a-t-il un outil de suppression d'arrière-plan intégré ? Non. Figma peut exporter des frames ou des formes avec un remplissage transparent, mais il ne peut pas détecter et détourer automatiquement un sujet à partir d'une photo sans plugin ni outil externe.

Un PNG transparent de nobackground fonctionnera-t-il directement dans Figma ? Oui. Glissez-déposez simplement le PNG téléchargé sur votre canevas comme n'importe quel autre visuel ; la transparence est conservée.

Pourquoi votre export Figma a encore un fond blanc

C'est le problème de transparence le plus fréquent dans Figma, et il tient presque toujours à l'une de ces quatre causes. Premièrement, la frame a encore un remplissage : dans certains fichiers anciens, masquer un remplissage avec l'icône en forme d'œil le laisse présent à l'export, supprimez donc le remplissage au lieu de le désactiver. Deuxièmement, vous avez exporté en JPG au lieu de PNG ; le JPG n'a pas de couche alpha et aplatira la transparence en blanc à chaque fois. Troisièmement, une seconde frame ou un rectangle blanc se cache derrière votre contenu, ce qui passe facilement inaperçu dans une Auto Layout très imbriquée. Quatrièmement, l'image elle-même a un fond blanc incrusté dans ses pixels, et dans ce cas aucun réglage du panneau d'export de Figma n'y changera rien, car Figma exporte fidèlement ce qui est là.

Pour diagnostiquer rapidement, donnez temporairement à la zone de travail une couleur magenta vif. Tout ce qui est réellement transparent laissera apparaître le magenta ; tout ce qui est blanc restera blanc et se trahira immédiatement.

Remplissages d'image et images placées

Figma traite une photo comme un remplissage appliqué à une forme, et non comme un objet distinct, ce qui surprend les personnes venant de Photoshop. Cette distinction compte ici : comme la photo est un remplissage, vous ne pouvez pas en effacer une partie, et l'outil Plume ne la découpe pas. Ce que vous pouvez faire, c'est dessiner une forme vectorielle et l'utiliser comme masque, ce qui rogne le remplissage à cette forme. Cela fonctionne bien pour des découpes géométriques comme une carte produit aux angles arrondis, et mal pour des contours organiques comme une personne, puisque vous dessinez alors à la main chaque courbe de la silhouette.

Si votre sujet a des cheveux, de la fourrure, des bords adoucis ou la moindre zone semi-transparente, un masque vectoriel est structurellement le mauvais outil. Un tracé vectoriel est une frontière nette ; les cheveux exigent une alpha partielle, c'est-à-dire des pixels opaques à 40 %. C'est pourquoi la réponse pratique consiste à importer une image qui possède déjà une couche alpha plutôt que d'essayer d'en créer une dans Figma.

Garder des détourages nets dans les composants et les variantes

Dès qu'un PNG transparent entre dans un composant, quelques habitudes évitent bien des reprises. Placez l'image dans sa propre frame avec un remplissage transparent, pour que le composant puisse être redimensionné sans que le remplissage d'image ne se recadre de façon inattendue. Préférez Ajuster à Remplir pour les détourages, car Remplir rogne au format de la frame et coupera volontiers le haut d'une tête quand quelqu'un redimensionne une instance. Si le même détourage apparaît à plusieurs tailles dans un système de design, publiez-le une fois comme composant et utilisez des instances plutôt que de coller le PNG à répétition : un seul réexport met alors à jour tous les écrans d'un coup.

Réglages d'export qui cassent discrètement la transparence

Au-delà du piège du JPG, trois réglages causent des problèmes évitables. Exporter en 1x pour une maquette retina donne des contours flous qui ressemblent à un mauvais détourage alors qu'il s'agit simplement d'un export sous-dimensionné : utilisez 2x ou 3x pour tout ce qui sera vu sur un écran haute densité. Appliquer un flou d'arrière-plan ou un flou de calque à une frame oblige Figma à rastériser une zone plus large et peut introduire une légère bordure rectangulaire dans le PNG exporté. Et une ombre portée appliquée au niveau de la frame plutôt qu'au niveau de l'objet produira l'ombre du rectangle et non celle de la silhouette détourée, ce qui trahit immédiatement un visuel assemblé plutôt que photographié.

PNG, SVG et WebP pour la livraison

Pour un détourage photographique, le PNG est le bon format d'export dans presque tous les cas : c'est le seul format matriciel largement pris en charge qui préserve l'alpha pixel par pixel sans poser de question de compatibilité. Le SVG ne convient que si le visuel est réellement vectoriel, par exemple un logo dessiné avec des formes ; exporter une photo en SVG ne fait qu'intégrer les données matricielles dans une enveloppe SVG et alourdit le fichier sans aucun bénéfice. Le WebP produit des fichiers nettement plus légers avec la transparence intacte et constitue un bon choix pour les visuels web en production, mais livrez du PNG à vos collègues et gardez la conversion WebP comme étape de build, car certains outils de design et d'impression gèrent encore le WebP de façon inégale.

Poids des fichiers et bibliothèques partagées

Les PNG transparents sont plus lourds que leur équivalent JPG, parce que la couche alpha ajoute des données et que la compression PNG est sans perte. Dans un gros fichier Figma comportant des dizaines de détourages en pleine résolution, cela se traduit par un chargement lent pour toute l'équipe. La solution pratique consiste à garder un master haute résolution de chaque détourage en dehors du fichier de travail et à placer dans Figma une version de taille raisonnable, environ deux fois la plus grande taille d'affichage nécessaire. Vous conservez la qualité là où elle compte et cessez de la payer à chaque ouverture du fichier.