Comment créer un dégradé dans Figma

Lorsque vous ne parvenez pas à choisir une couleur, les dégradés sont une excellente option. Dans Figma, vous pouvez créer différents arrière-plans dégradés, appliquer un dégradé sur une forme et un texte, créer des dégradés de traits et bien plus encore. Vous pouvez même créer des dégradés de maillage avec l'effet de flou ou avec un plugin de dégradé de maillage de la communauté Figma.

Étant donné que Figma propose de nombreuses façons différentes de créer un dégradé, les nouveaux utilisateurs pourraient avoir du mal à toutes les comprendre dès le début. Bien sûr, expérimenter fait partie du processus d’apprentissage, mais il est beaucoup plus facile d’avoir toutes les instructions au même endroit. Et cet article fournit exactement cela.

Comment créer différents styles de dégradé dans Figma

Figma propose différents styles de dégradés que vous pouvez utiliser pour remplir des arrière-plans ou des objets sur la toile avec plusieurs couleurs.

• Linéaire :  les dégradés linéaires ont deux couleurs qui se mélangent en une ligne droite.
• Radial :  avec les dégradés radiaux, la première couleur part d'un seul point et se fond dans l'autre dans toutes les directions.
• Angulaire :  dans les dégradés angulaires, vous pouvez déterminer la direction dans laquelle le dégradé se déplace en ajoutant des angles. C'est une excellente option pour créer des images 3D.
• Diamant :  Comme son nom l'indique, les dégradés de diamants partent d'un point et s'étalent en forme de diamant.

Les étapes pour créer l’un de ces styles de dégradé sont les mêmes. La seule différence réside dans le style que vous sélectionnez. Voici comment créer un motif dégradé dans Figma :

1. Ouvrez un fichier Figma vierge.
   
2. Appuyez sur « Outil Rectangle » dans la barre d'outils de gauche.
   
3. À l’aide de l’outil, dessinez un rectangle sur le canevas à utiliser comme référence de dégradé.
   
4. Sélectionnez le rectangle créé.
   
5. Cliquez sur la couleur actuelle sous « Remplir » dans le panneau de droite pour ouvrir le sélecteur de couleurs.
   
6. Appuyez sur le menu déroulant et modifiez le « Solide » par défaut selon le style de dégradé souhaité. Deux arrêts ou cases de couleur apparaîtront.
   
7. Sélectionnez chaque arrêt de couleur et choisissez la couleur que vous souhaitez ajouter au dégradé.
   
8. Appuyez sur les quatre points à côté de « Remplir » pour enregistrer le dégradé en tant que style.
   

Après cela, vous pouvez ajuster la valeur de transparence, positionner les arrêts de couleur là où vous souhaitez qu'une couleur se termine et la seconde commencer, ajouter un autre arrêt de couleur, les déplacer sur la toile ou modifier l'angle du dégradé. Une fois les réglages terminés, enregistrez à nouveau le dégradé (étape 8).

Remarque :  Pour supprimer un arrêt de couleur que vous avez ajouté, sélectionnez l'arrêt et appuyez sur « Supprimer » ou « Retour arrière » sur votre clavier.

Vous pouvez désormais appliquer le style dégradé à n’importe quel objet de votre choix.

Comment créer un dégradé de maillage dans Figma

Les dégradés de maillage sont populaires parmi les grandes entreprises et les marques. Si vous êtes un utilisateur fréquent d'Instagram, vous voyez chaque jour le logo de l'application. Ainsi, savoir comment les créer peut être utile dans les situations où vous devez ajouter un peu d'intérêt à vos projets.

Comme mentionné, les dégradés de maillage peuvent être créés avec un plugin fourni par la communauté Figma. Mais il existe un moyen plus simple d'ajouter plusieurs couleurs où vous le souhaitez sur votre toile sans avoir besoin d'outils externes.

Voici comment créer un dégradé de maillage dans Figma :

1. Entrez un nouveau fichier Figma.
   
2. Créez un cadre.
   
3. Cochez la case « Contenu du clip » dans le panneau de droite afin que tout ce qui sort du cadre soit coupé.
   
4. Commencez à ajouter diverses formes ou créez votre propre objet avec l'outil « Stylo » à l'intérieur du cadre.
   
5. Modifiez le « Remplir » de chaque nouveau formulaire pour qu'il diffère du reste.
   
6. Sélectionnez toutes les formes.
   
7. Sous « Effets », appuyez sur le menu déroulant et sélectionnez « Flou de calque ».
   
8. Ouvrez les paramètres « Flou du calque » et augmentez la valeur jusqu'à ce que vous ne voyiez plus de limites claires entre les formes.
   
9. Enregistrez le style comme ci-dessus et utilisez-le sur d'autres objets.

Une autre façon de créer un dégradé de maillage consiste à utiliser le style angulaire. Cela donne un résultat fascinant légèrement différent mais tout aussi intéressant que le premier tutoriel.

Voici ce que vous devez faire :

1. Ouvrez une toile vierge.
   
2. Utilisez la forme souhaitée et ajoutez-la au canevas.
3. Sous « Remplir », remplacez « Solide » par « Angulaire ».
   
4. Choisissez les couleurs du dégradé.
   
5. Ajustez l'angle et d'autres aspects du dégradé.
   
6. Ajoutez une autre forme, de préférence « Eclipse », c'est-à-dire un cercle.
   
7. Placez-le au-dessus de l'autre forme sur la toile.
   
8. Ajoutez un dégradé linéaire et changez la couleur pour celle qui correspond bien au reste.
   
9. Sous « Effets », utilisez l'effet « Flou de calque » et floutez les lignes de la nouvelle forme pour la fondre dans la première.
   

Comment dégradé une image dans Figma

En plus de créer un dégradé, vous pouvez également superposer une image existante avec un dégradé pour ajouter de la dimension. Cela lui donne un effet de « fondu » ou l’illusion d’une source de lumière invisible brillant sur l’image depuis l’extérieur.

Voici comment ajouter un dégradé à une image dans Figma :

1. Ouvrez un nouveau fichier dans Figma.
   
2. Faites glisser et déposez l'image à laquelle vous souhaitez ajouter le dégradé sur le canevas.
   
3. Ajoutez une forme qui correspond à la taille de l'image en haut.
   
4. Sélectionnez un style de dégradé dans la section « Remplir ».
   
5. Choisissez les couleurs du dégradé dans le sélecteur de couleurs.
   
6. Ajustez l'opacité, l'angle, etc.
   

Vous pouvez également utiliser l'outil « Stylo » et dessiner une forme dans la zone où vous souhaitez que le dégradé soit.

Comment dégradé un texte dans Figma

La création d'un dégradé sur un texte dans Figma est assez similaire à la façon dont vous créez un dégradé pour toute autre forme. Voici les étapes :

1. Ouvrez un nouveau canevas dans Figma.
   
2. Appuyez sur l'outil « Texte » dans la barre d'outils de gauche.
   
3. Cliquez n'importe où sur la toile et commencez à écrire.
4. Sélectionnez le texte et accédez à « Remplir ».
   
5. Choisissez le style de dégradé.
   
6. Appuyez sur chaque case de couleur et recherchez la couleur que vous souhaitez ajouter au dégradé.
   

FAQ

Combien de couleurs puis-je ajouter à un dégradé dans Figma ?

Vous pouvez ajouter autant de couleurs que vous le souhaitez dans les styles de dégradé Figma standard et maillé. Mais essayez de ne pas en faire trop. Étant donné que les dégradés ont plusieurs couleurs de transition, plus de cinq peuvent être trop, même pour un dégradé maillé.

Puis-je importer un dégradé dans Figma ?

Vous pouvez importer n'importe quel dégradé de votre choix dans Figma. Par exemple, vous pouvez coller du code à partir de CSS (Cascading Style Sheets) en ouvrant le panneau « Code » et en collant le code. Vous pouvez également importer des dégradés depuis Adobe Illustrator.

Où puis-je trouver des dégradés Figma gratuits ?

Vous pouvez trouver des dégradés Figma gratuits et payants dans la  communauté Figma . Il présente une pléthore de designs magnifiques et uniques créés par les utilisateurs de Figma. Vous pouvez filtrer par plugins, fichiers et widgets. Tapez simplement « dégradé » dans la barre de recherche en haut et trouvez celui que vous aimez.

Soyez génial avec des dégradés colorés

Les dégradés sont un excellent moyen de rendre un design distinct et personnalisé. Et Figma vous permet de faire une transition en douceur entre deux ou plusieurs couleurs de votre choix. Cependant, n'en faites pas trop. Mélangez les couleurs qui vont bien ensemble et essayez de rester dans la même palette de couleurs.

Avez-vous déjà essayé de faire un dégradé dans Figma ? Dites-nous dans les commentaires ci-dessous quel style de dégradé vous avez utilisé et pour quoi vous l'avez utilisé.