Comment flouter l’arrière-plan dans Figma – Guide rapide des effets d’arrière-plan

Découvrez comment flouter l’arrière-plan dans Figma grâce au flou d’arrière-plan et aux effets de calque. Parfait pour la conception d’interface utilisateur et des superpositions élégantes.

Créez de superbes vidéos produit et des documents avec l’IA

Ce tutoriel a été créé avec Trupeer en moins de 5 minutes

Créez gratuitement

Dans ce guide, vous apprendrez comment appliquer un effet de flou à un cadre dans Figma à l'aide du menu de conception.
Suivez les étapes détaillées pour obtenir le flou souhaité d'un élément dans votre projet de design.

Un effet de flou d'arrière-plan dans Figma donne à votre design un aspect de verre dépoli, couramment utilisé dans les modales, les cartes et les superpositions.

Étape 1 : Préparer le calque de flou

Créer une forme
Utilisez un rectangle ou toute forme/cadre dans lequel vous souhaitez que l'effet de flou apparaisse.
Ajouter un fond
Remplissez-le d'une couleur unie (par exemple, blanche ou grise).
Réduire l'opacité
Diminuez l'opacité du calque (généralement autour de 10 à 40 %). Cette étape est essentielle : le flou ne s'affichera pas sans transparence.

Étape 2 : Appliquer le flou d'arrière-plan

Sélectionner le calque
Cliquez sur la forme que vous venez de créer.
Accéder au panneau des effets
Dans la barre latérale de droite, cliquez sur le "+" à côté de Effets, puis choisissez Flou d'arrière-plan dans le menu déroulant.
Ajuster la valeur du flou
Cliquez sur l'icône des paramètres à côté de l'effet et utilisez le curseur pour contrôler le degré de flou de l'arrière-plan.

Facultatif : peaufinage

Vous pouvez combiner flou d'arrière-plan avec des ombres portées pour ajouter de la profondeur.
Ajustez ensemble l'opacité et le flou pour créer soit un effet doux et dépoli, soit un rendu plus marqué et verrier.

Guide pas à pas : comment flouter l'arrière-plan dans Figma

Étape 1

Pour commencer à appliquer un effet de flou dans Figma, sélectionnez d'abord le cadre que vous souhaitez flouter.

Accédez au menu de conception situé sur le côté droit de l'interface. Dans ce menu, trouvez la section des effets et cliquez dessus.

Dans la section des effets, cliquez sur « Ajouter un nouvel effet » en cliquant sur le symbole "+" qu'elle contient.

To begin applying a blur effect in Figma, first select the frame you wish to blur. Navigate to the design menu located on the right side of the interface. Within this menu, find the effects section and click on it. In the effects section, click on 'Add a new effect' by clicking the '+' symbol within it.

Étape 2

Une fois le nouvel effet ajouté, un menu déroulant apparaîtra. Cliquez sur ce menu et sélectionnez « Flou du calque ». L'effet de flou a maintenant été appliqué avec succès au cadre choisi.

Once the new effect is added, a drop-down menu will appear. Click on this menu and select 'Layer Blur.' The blur effect has now been successfully applied to your chosen frame.

Conseils de pro pour flouter l’arrière-plan dans Figma

Appliquer un flou à un objet :
Sélectionnez l’objet (image, forme ou frame) que vous souhaitez flouter. Dans la barre latérale droite, dans la section Effets, cliquez sur l’icône + et choisissez Flou d’arrière-plan ou Flou de calque dans le menu déroulant.
Ajuster l’intensité du flou :
Après avoir appliqué le flou, utilisez le curseur pour ajuster l’intensité du flou. Vous pouvez augmenter ou diminuer le niveau de flou pour obtenir l’effet souhaité.
Utilisez le flou gaussien pour plus de contrôle :
Pour un contrôle plus précis de l’effet de flou, utilisez le flou gaussien, qui offre un flou plus doux et plus progressif.
Flouter des images ou des frames :
Si vous floutez une image ou un frame, assurez-vous que l’image est sélectionnée. Vous pouvez flouter l’image sans affecter les autres éléments de design.
Plusieurs flous sur les calques :
Vous pouvez appliquer plusieurs effets de flou à différents calques. Par exemple, si vous voulez un arrière-plan flouté avec du texte net, appliquez le flou uniquement au calque d’arrière-plan.

Erreurs courantes pour flouter l’arrière-plan dans Figma

Flouter le mauvais calque :
Correctif : vérifiez bien le calque que vous avez sélectionné avant d’appliquer le flou. Utilisez le panneau des calques pour vous assurer que vous modifiez le bon calque.
Abuser de l’effet de flou :
Correctif : n’appliquez pas trop de flou aux éléments importants comme le texte ou les logos, car cela peut réduire la lisibilité. Utilisez le flou avec parcimonie pour mettre le design en valeur.
Netteté involontaire après le flou :
Correctif : si l’application du flou sur des images produit une netteté indésirable, ajustez la quantité de flou et essayez différents effets comme le flou gaussien pour obtenir l’apparence souhaitée.
Le flou ne s’affiche pas à l’export :
Correctif : si l’effet de flou ne s’affiche pas lors de l’exportation, assurez-vous d’exporter en haute résolution (PNG ou SVG) pour une meilleure qualité.

FAQ courantes pour flouter l’arrière-plan dans Figma

Puis-je flouter du texte dans Figma ?
Vous pouvez flouter des formes vectorielles et des images, mais vous ne pouvez pas appliquer directement un flou au texte dans Figma. Cependant, vous pouvez rasteriser le texte en forme, puis appliquer l’effet de flou.
Comment puis-je flouter l’arrière-plan d’un design ?
Sélectionnez le calque d’arrière-plan ou l’image, appliquez l’effet Flou de calque et ajustez l’intensité. C’est idéal pour mettre en valeur les éléments au premier plan.
Puis-je contrôler la direction du flou ?
L’effet de flou de Figma s’applique de manière uniforme. Si vous avez besoin d’un flou directionnel (comme un flou de mouvement), vous devrez utiliser des outils externes de retouche d’image comme Photoshop ou Illustrator avant de réimporter l’image dans Figma.
L’effet de flou restera-t-il après l’exportation du design ?
Oui, l’effet de flou restera dans le design exporté tant que le fichier est enregistré dans un format pris en charge comme PNG ou JPG.
Existe-t-il un moyen de flouter seulement une partie d’une image ?
Oui, vous pouvez utiliser un masque dans Figma pour isoler une zone spécifique de l’image et appliquer l’effet de flou uniquement à cette partie.
Comment enregistrer l’écran sur Mac
Pour enregistrer l’écran sur un Mac, vous pouvez utiliser Trupeer AI. Il vous permet de capturer tout l’écran et offre des capacités d’IA telles que l’ajout d’avatars IA, l’ajout de voix off, ainsi que le zoom avant et arrière dans la vidéo. Grâce à la fonctionnalité de traduction vidéo par IA de Trupeer, vous pouvez traduire la vidéo dans plus de 30 langues.
Comment ajouter un avatar IA à un enregistrement d’écran ?
Pour ajouter un avatar IA à un enregistrement d’écran, vous devrez utiliser un outil d’enregistrement d’écran IA. Trupeer AI est un outil d’enregistrement d’écran IA, qui vous aide à créer des vidéos avec plusieurs avatars, et vous aide aussi à créer votre propre avatar pour la vidéo.
Comment enregistrer l’écran sur Windows ?
Pour enregistrer l’écran sur Windows, vous pouvez utiliser la barre de jeu intégrée (Windows + G) ou un outil IA avancé comme Trupeer AI pour des fonctionnalités plus avancées telles que des avatars IA, la voix off, la traduction, etc.
Comment ajouter une voix off à une vidéo ?
Pour ajouter une voix off aux vidéos, téléchargez l’extension Chrome Trupeer AI. Une fois inscrit, importez votre vidéo avec la voix, choisissez la voix off souhaitée dans Trupeer et exportez votre vidéo modifiée.
Comment zoomer dans un enregistrement d’écran ?
Pour zoomer pendant un enregistrement d’écran, utilisez les effets de zoom dans Trupeer AI, qui vous permettent de zoomer avant et arrière à des moments précis, améliorant ainsi l’impact visuel de votre contenu vidéo.