Créer et modifier des images dans Figma

Figma sert d'abord à dessiner des maquettes de sites et d'applications, mais il est aussi très pratique pour fabriquer les images d'un site : bandeau d'en-tête, image à la une d'un article, vignette, visuel pour les réseaux sociaux, schéma ou capture d'écran annotée. Cette page suit l'ordre du travail : créer l'image aux bonnes dimensions, y placer formes, texte et photos, la retoucher, utiliser si besoin les outils d'IA, puis l'exporter dans un format adapté au Web. Les noms des commandes sont donnés en anglais, comme dans la documentation officielle ; l'interface de Figma existe aussi en français (Settings > Language dans le menu de votre compte). Les raccourcis sont ceux de Windows : remplacez Ctrl par Cmd sur Mac. Faits vérifiés sur l'aide officielle de Figma en octobre 2026.

Figma fonctionne dans le navigateur, sans installation, et son offre gratuite suffit pour la plupart des images d'un site. Il excelle pour les visuels composés : un fond, une photo, un titre, un logo, des formes aux couleurs de votre charte graphique. Tout reste modifiable : changer le texte d'un bandeau ou la photo d'une vignette prend quelques secondes, et un même fichier peut réunir toutes les images d'un site, rangées côte à côte sur la toile.

Pour la retouche photo poussée (corriger finement une peau, un ciel, une perspective), un logiciel de retouche reste plus adapté : voir Créer et modifier des images dans Photoshop. La présentation générale de l'outil, ses avantages et ses ressources sont sur la page Figma.

Dans Figma, une image commence par un frame, un cadre qui contient les formes, les textes et les photos et qui deviendra le fichier exporté. Activez l'outil Frame dans la barre d'outils ou avec la touche F (ou A), puis :

• choisissez un format prêt à l'emploi dans la colonne de droite : Figma propose des préréglages par catégorie (Phone, Tablet, Desktop, Presentation, Social Media, Paper…) ;

• ou tracez le cadre en cliquant-glissant sur la toile, puis tapez la largeur et la hauteur exactes dans les champs W et H du panneau de droite.

Donnez au cadre la taille à laquelle l'image sera affichée sur votre site (par exemple la largeur de la zone de contenu de votre thème pour une image d'article). Pour les écrans haute densité, inutile de doubler le cadre : il suffira d'exporter en 2x (voir plus bas). L'option Clip content du cadre masque tout ce qui dépasse de ses bords, ce qui permet de placer une photo plus grande que le cadre et de choisir la partie visible.

Le menu des formes de la barre d'outils propose rectangle, ligne, flèche, ellipse, polygone et étoile ; l'outil Texte s'active avec la touche T. La couleur d'une forme ou d'un texte se règle dans la section Fill du panneau de droite. Pour un rendu cohérent d'une image à l'autre, utilisez toujours les mêmes couleurs et les mêmes polices (voir choisir les couleurs de son site) : le plus simple est de garder un premier visuel réussi comme modèle et de le dupliquer pour les suivants.

Trois façons d'ajouter une photo : la glisser depuis votre ordinateur sur la toile, la coller (Ctrl+V), ou utiliser Image/video dans le menu des formes (Ctrl+Maj+K). Figma accepte les formats JPG, PNG, HEIC, WebP, GIF et TIFF (TIFF seulement dans Safari). Une image de plus de 4 096 pixels de côté est réduite automatiquement à l'import, son plus grand côté ramené à 4 096 pixels.

Point important pour la suite : Figma n'a pas de calque « image ». Une photo est un remplissage (fill) appliqué à un calque : quand vous la déposez sur la toile, Figma crée un rectangle rempli par la photo. Vous pouvez donc mettre une photo dans n'importe quelle forme, un cercle pour un portrait par exemple, et même dans un texte. Avant d'utiliser une photo, assurez-vous d'en avoir le droit : voir où trouver des images gratuites ou prendre vos propres photos.

Double-cliquez sur la photo (ou cliquez sur l'option de recadrage dans le panneau de droite) pour passer en mode recadrage. Déplacez les poignées bleues ou choisissez un rapport largeur / hauteur, puis validez avec Entrée ou en cliquant sur la toile. En maintenant Ctrl, vous pouvez aussi recadrer directement en tirant un coin de l'image. Le recadrage est non destructif : la partie coupée n'est pas supprimée, vous pouvez y revenir à tout moment. Pour un recadrage rond, arrondissez les angles du calque ou placez la photo dans une ellipse.

Cliquez sur la vignette de l'image dans la section Fill du panneau de droite : la fenêtre qui s'ouvre propose quatre modes.

• Fill : la photo couvre toute la forme, quitte à être coupée sur les bords. C'est le mode le plus courant.

• Fit : la photo entière reste visible, quitte à laisser des zones vides dans la forme.

• Crop : vous choisissez précisément la partie visible, comme avec le recadrage.

• Tile : la photo est répétée en mosaïque, avec une taille réglable en pourcentage, pour un motif de fond.

La même fenêtre contient des curseurs de réglage, comparables aux filtres d'un logiciel photo : Exposure (exposition), Contrast (contraste), Saturation, Temperature (température, plus froide ou plus chaude), Tint (teinte), Highlights (hautes lumières) et Shadows (ombres). Ces réglages ne modifient pas la photo d'origine et se changent ou s'annulent à tout moment. Ils suffisent souvent à éclaircir une photo de smartphone un peu sombre ou à passer une photo en noir et blanc (saturation au minimum) pour l'harmoniser avec un texte coloré. Le bouton Rotate 90° tourne la photo dans sa forme sans tourner la forme.

Comme la photo n'est qu'un remplissage, vous pouvez en changer en gardant la forme, sa taille et sa place dans la composition : dans la fenêtre de l'image, choisissez une autre image depuis votre ordinateur, ou importez la nouvelle photo et cliquez sur la forme existante pour remplacer son remplissage. Pratique pour décliner un même modèle de vignette sur tous les articles d'un blog.

Un masque n'affiche une image qu'à l'intérieur d'une forme : placez la forme (cercle, texte, forme dessinée à la plume) sous l'image dans la liste des calques, sélectionnez les deux, puis choisissez Use as mask dans le panneau de droite (Ctrl+Alt+M ; Ctrl+Cmd+M sur Mac). Rien n'est supprimé : retirez le masque et l'image réapparaît entière.

En octobre 2026, Figma Design intègre plusieurs outils d'IA pour les images, accessibles depuis la barre d'outils secondaire qui apparaît quand une image est sélectionnée (certains sont rangés dans le menu More) :

• Make an image : crée une image à partir d'une description écrite (menu Actions), dans une forme existante ou dans un nouveau calque. Vous choisissez le modèle d'IA dans une liste et pouvez joindre des images de référence.

• Edit image : modifie une image existante d'après une consigne écrite.

• Remove background : supprime l'arrière-plan d'une ou plusieurs images sélectionnées, en un clic.

• Erase object et Isolate object : entourez une zone au lasso (outil Select area) pour l'effacer de l'image ou pour en faire un calque séparé.

• Expand : agrandit l'image au-delà de ses bords, en inventant la suite du décor (pratique pour transformer une photo verticale en bandeau).

• Boost resolution : améliore la netteté d'une image en basse résolution.

• Vectorize : transforme une image simple (logo dessiné à la main, lettrage, illustration) en formes vectorielles modifiables.

Ces outils consomment des crédits d'IA, partagés entre toutes les fonctions d'IA de Figma. Selon le barème officiel : 1 à 5 crédits pour supprimer un arrière-plan, 2 à 5 pour vectoriser, 5 à 10 pour agrandir, effacer, isoler ou améliorer la résolution, et de 2 à 16 crédits par image créée ou modifiée selon le modèle choisi (2 avec ChatGPT Images 2.0, 16 avec Nano Banana 2). L'agent de Figma (bouton Agents) sait aussi faire ces opérations à partir d'une demande écrite, avec un coût en crédits qui dépend de la tâche.

Ces outils ne remplacent pas tout : pour comparer avec d'autres solutions, voir Enlever le fond d'une image et Upscale une image avec l'IA. Pour les questions de droits sur les images créées par IA, voir Créer des images avec l'IA. Le détail des commandes est dans l'aide officielle de Figma.

Sélectionnez le cadre (ou n'importe quel calque, groupe ou section), cliquez sur le + de la section Export en bas du panneau de droite, choisissez l'échelle et le format, puis cliquez sur Export. Un même élément peut avoir plusieurs réglages d'export, par exemple un PNG en 1x et un autre en 2x, exportés ensemble. Le bouton Preview montre le résultat avant l'export. Pour exporter d'un coup tous les éléments qui ont un réglage d'export sur la page : menu File > Export (Ctrl+Maj+E). Pour coller rapidement une image dans un autre logiciel, faites un clic droit puis Copy/Paste as > Copy as PNG.

En octobre 2026, Figma Design exporte en quatre formats :

• PNG : sans perte de qualité, avec transparence (toujours incluse). Idéal pour les captures d'écran, les visuels avec du texte et les images à fond transparent, mais plus lourd qu'un JPG pour une photo.

• JPG : compression avec perte, sans transparence, avec un réglage de qualité (élevée par défaut). Le bon choix pour une composition à base de photo. Attention, la compression peut rendre flou un petit texte.

• SVG : format vectoriel, net à toutes les tailles, pour les logos, icônes et illustrations simples. Par défaut, les textes sont convertis en contours (option Outline text) : ils s'affichent partout à l'identique mais ne sont plus modifiables comme du texte.

• PDF : pour un document à imprimer ou à envoyer, pas pour une page Web.

Figma n'exporte ni en WebP ni en AVIF, les formats les plus légers pour le Web. Exportez en JPG ou en PNG, puis convertissez : les méthodes sont décrites dans Les formats d'images sur le Web, et WordPress peut s'en charger automatiquement (voir Les formats d'images dans WordPress).

Le champ d'échelle accepte un multiplicateur (1x, 2x…), une largeur fixe (1200w) ou une hauteur fixe (600h). Un cadre de 800 pixels exporté en 2x donne une image de 1 600 pixels de large, plus nette sur les écrans haute densité (smartphones récents, écrans Retina) ; pour une simple vignette, 1x suffit souvent. Les exports SVG et PDF se font toujours en 1x. Le champ Suffix ajoute un texte à la fin du nom du fichier, par exemple « @2x ».

• Color profile : « Same as file » par défaut, sRGB ou Display P3. Pour un site, sRGB, le profil standard du Web, est le choix le plus sûr.

• Image resampling : « Detailed » (par défaut) pour les photos, dégradés et illustrations, « Basic » pour les icônes, logos et images en pixel art aux bords nets.

Si l'image exportée fait un pixel de plus que prévu, la solution est expliquée dans la section « Divers Figma » en fin de page.

• Exportez à la taille d'affichage, 2x au maximum : une image de 4 000 pixels de large ralentit la page sans être plus belle.

• Le bon format pour chaque image : JPG (puis WebP) pour une photo, PNG pour une capture ou un fond transparent, SVG pour un logo.

• Compressez après l'export : un outil de compression ou une extension WordPress réduit encore le poids sans perte visible, voir Optimiser des images dans WordPress.

• Nommez le fichier avant de l'envoyer : un nom descriptif, en minuscules, sans accents ni espaces (par exemple atelier-poterie-lyon.jpg), car il est difficile à changer ensuite dans WordPress (voir les images dans WordPress).

• Gardez le fichier Figma : c'est lui que vous modifierez la prochaine fois, pas l'image exportée.

L'offre gratuite de Figma, Starter, suffit pour créer, retoucher et exporter les images d'un site. En octobre 2026, elle comprend :

• des brouillons illimités (les fichiers rangés hors dossier), plus un dossier d'équipe limité à 3 fichiers Figma Design ;

• 30 jours d'historique des versions ;

• l'import d'images, ouvert à toutes les offres (les vidéos sont réservées aux offres payantes), et tous les formats d'export ;

• 500 crédits d'IA par mois, avec un plafond de 150 par jour.

Pour les outils d'IA, l'aide de Figma se contredit en octobre 2026 : la page Get started with Figma AI et celle des outils d'image indiquent que l'offre Starter y a accès dans Figma Design (créer et modifier des images, supprimer l'arrière-plan, agrandir, effacer ou isoler, vectoriser, améliorer la résolution), alors que la présentation de l'offre Starter mentionne encore « No AI image tools ». Le plus simple est de sélectionner une image dans un brouillon et de regarder si les commandes apparaissent. Les offres payantes (Professional, Organization, Enterprise) ajoutent les fichiers et projets illimités et davantage de crédits d'IA (3 000 par mois pour un siège complet Professional) ; leurs prix sont sur la page tarifs de Figma.

Vous avez fait une image de 128x128px dans Figma, quand vous la sélectionnez, ça affiche clairement 128x128, mais quand vous l'exportez, vous vous retrouvez avec une image de 129x129 ou 128x129 ...

La solution : il faut placer l'image sur la grille de pixels dans Figma, car lorsqu'une image est entre 2 pixels, Figma va ajouter un pixel à l'export.

Dans l'image ci-dessous :

• Cas A : l'image est entre 2 pixels, Figma ajoutera un pixel de trop à l'export

• Cas B : l'image est bien alignée sur la grille, l'export aura les dimensions voulues

• À droite : les coordonnées X et Y de l'image

• Vous pouvez changer les coordonnées X, Y de l'image (à droite de la copie d'écran ci-dessus) pour mettre des nombres entiers au lieu de nombres décimaux, par exemple passer de 222,7 à 222 tout rond

• Dans mon cas, ça n'a pas suffi, j'ai dû zoomer sur l'image et la déplacer manuellement sur la grille

• Possibilité d'activer l'option qui aimante les images à la grille pour tomber pile dessus