Les effets peuvent avoir diverses utilités tant esthétiques que fonctionnelle, par exemple une ombre peut signifier à l’utilisateur que l’élément est interactif. Nous pouvons aussi utiliser le flou pour attirer l’attention de l’utilisateur sur une boîte de dialogue.
Les différents types d’effets
Dans Figma, il existe quatre types d’effets :
- Drop-shadow : sans aucun doute l’effet le plus populaire. Drop-shadow (ou ombre portée) permet d’ajouter de la profondeur en simulant l’ombre d’un calque sur une surface.
- Inner-shadow : à l’inverse du Drop-shadow, Inner-shadow (ou ombre intérieur) permet de créer une ombre à l’intérieur du calque. On peut l’utiliser, simuler un bouton enfoncé par exemple.
- Layer blur : Layer blur (ou flou de calque) permet comme son nom l’indique d’appliquer un effet de flou à votre calque. Il peut permettre de suggérer un mouvement, d’adoucir une image de manière uniforme.
- Background-blur : le background-blur (ou flou d’arrière-plan) permet d’appliquer un effet de flou à la zone située derrière votre calque*. C’est très utile pour lisser un arrière-plan agité afin de faire ressortir les éléments positionnés sur votre calque.
*Afin que l’effet fonctionne, il faut que votre calque ait un arrière-plan transparent ou semi-transparent.
Appliquer un effet d’ombre portée
Commencez par sélectionner votre calque. Dans la section Effects cliquer sur + Add effect.
Par défaut Figma créer un effet de Drop shadow, si vous souhaitez changer le type d’effet il vous suffit de cliquer sur le nom “Drop shadow” pour ouvrir la liste déroulante des effets disponibles. Dans notre cas, nous allons laisser tel quel.
Vous pouvez masquer et afficher votre effet rapidement en cliquant sur l’œil situé à droite.
Maintenant voyons voir les paramètres de notre ombre ! Cliquez sur Effects settings (situé à gauche du nom de l’effet). Vous devriez voir apparaître le menu avec l’ensemble des paramètres de votre effet.
- Type d’effet
- Mode de fusion
- Position : X (horizontal) et Y (vertical)
- Blur (flou) : augmentez le flou vous permettra d’adoucir l’ombre et de la fondre avec l’arrière-plan.
- Spread : permet d’ajuster la taille de l’ombre.
- Color : définissez ici une couleur et une opacité pour votre ombre
Amusez-vous à jouer avec les différents paramètres afin de mieux comprendre leur fonctionnement !
Changer la position de l’ombre portée
Commençons par changer la position de notre ombre. La position vous permet de contrôler la distance horizontale (X) et vertical (Y) de votre ombre par rapport à votre calque, cela vous permet de définir la direction de la source lumineuse. Si vous choisissez des valeurs positives, l’ombre se décalera vers le bas à gauche, donnant l’impression que votre source lumineuse se situe à l’opposé, en haut à droite.
Plus les valeurs seront importantes, plus on aura l’impression que votre élément est éloigné de l’arrière-plan.
Ajouter du flou
Plus une source lumineuse est proche, plus l’ombre sera marquée. Vous contrôlez ce paramètre avec la propriété Blur dans Figma. En règle générale pour les interfaces, on préfèrera des ombres douces (avec un blur important) afin d’avoir un effet plus naturel.
Couleur et opacité
Je vous recommande d’éviter d’utiliser un noir pur pour vos ombres, mais plutôt une couleur foncée issue de votre palette. Cela permettra d’avoir un rendu visuel bien plus agréable ! Concernant l’opacité, à vous de l’ajuster en fonction du rendu souhaité.
Par exemple pour un bouton, on va privilégier une position X et Y aux alentours de 5 px. Et un flou important (30 px) afin d’avoir une ombre très douce. Pour ce qui est de la couleur, complétez avec une couleur foncée issue de votre palette et dans une opacité aux alentours de 15 %.
Espace discussion