Si l’image est déjà dans Figma
Figma possède une fonction Remove background. Dans Figma Design, sélectionnez l’image puis cette commande dans la barre d’outils secondaire. Son accès dépend de votre offre et de vos autorisations ; le guide Figma ci-dessous indique les conditions actuelles.
Si cette méthode est disponible et vous donne le résultat attendu, poursuivez dans le même fichier. Il n’est pas nécessaire de sortir l’image de Figma pour la réimporter. Regardez le détourage sur la couleur de votre cadre avant de travailler la mise en page.
Figma : modification d’images et suppression du fond (en anglais)
Si la référence est encore ouverte dans Chrome
ClickCutout peut servir pendant la recherche d’images web que vous pouvez réutiliser. Autorisez l’accès aux images, connectez-vous avec Google et choisissez PNG. L’extension fournit un fichier ou une image dans le presse-papiers ; elle ne crée pas de composant Figma ni de lien synchronisé avec la fiche produit.
- Ouvrez la grande version de l’image produit sur sa page source.
- Faites un clic droit, ouvrez ClickCutout et choisissez Copier.
- Sélectionnez la zone voulue dans votre fichier Figma modifiable et collez. Si le collage n’est pas accepté, téléchargez plutôt le PNG.
- Insérez le fichier avec les commandes d’importation d’images de Figma ou glissez-le sur le canevas.
Comparez deux images dans le même haut de page
Prenons la première section d’une boutique de chaussures. Placez d’abord le titre, le bouton et le fond, puis une chaussure détourée à côté du texte. Dupliquez le cadre et remplacez-la par une photo prise sous un autre angle. Le texte et les espacements restent fixes pour faciliter le choix du visuel.
Regardez vers où pointe la chaussure, la place qu’elle occupe et sa proximité avec le bouton. Comparez la taille du sujet visible. Deux images de même largeur peuvent avoir des marges transparentes très différentes. Conservez les proportions pendant le redimensionnement.
Testez le petit écran et la couleur de fond
Intégrez aussi le détourage dans la version mobile. Un autre placement ou un autre angle sera parfois nécessaire si le produit devient minuscule ou repousse le texte trop bas. Le détourage ne peut pas reconstituer un talon ou une manche coupés dans la photo d’origine.
Examinez les contours sur un fond clair puis sombre. En présence d’un rectangle blanc, vérifiez s’il vient de l’image, d’une forme ajoutée ou du cadre situé derrière. Réinsérez le PNG transparent téléchargé si le collage a aplati l’image. Un liseré attaché au sujet demande plutôt une correction des contours ou une meilleure source.
Gardez la source avec la maquette validée
Nommez le calque et conservez le lien d’origine dans les notes du fichier. La personne qui reprend le travail pourra vérifier la version du produit et remplacer une référence par un visuel validé. Gardez aussi un fichier transparent pour les prochaines modifications de mise en page.
ClickCutout conserve les dimensions de l’image reçue. Il ne transforme pas une petite vignette en grand visuel net. Pour la mise en ligne, préparez les dimensions et le format définitifs dans le processus habituel du site, puis vérifiez l’image dans la page réelle.
