Article original : How to Create Color and Text Styles in Figma
Dans cet article, nous allons apprendre à créer, modifier et utiliser des styles de couleur et de texte dans Figma. Nous apprendrons également à combiner les styles de couleur et de texte et à les utiliser pour créer des designs magnifiques.
Les styles vous aident à simplifier votre flux de travail, à maintenir la cohérence du texte et des calques, et à gagner un temps précieux.
Comment utiliser les styles de couleur dans Figma
Vous pouvez appliquer des styles de couleur au texte, à l'arrière-plan et aux contours. Vous pouvez également appliquer des styles de couleur à des formes créées dans vos designs ou à des éléments ou sections d'un site web ou d'une application mobile spécifique que vous concevez. Cela peut inclure des boutons, des rectangles, les barres supérieures et inférieures, et plus encore.
Vous pouvez également utiliser des styles de couleur pour des images ou des dégradés.
Comment créer un style de couleur
Pour créer un style de couleur, suivez ces étapes :
- Créez une nouvelle forme et allez dans Fill (Remplissage). Remplissez votre calque avec la couleur de votre choix.
- Cliquez sur l'icône des quatre points pour ouvrir la fenêtre modale des styles de couleur.
- Cliquez sur l'icône + dans le coin supérieur droit de la fenêtre modale des styles de couleur.
- Donnez à votre style le nom de votre choix (disons Style de couleur 1) et cliquez sur le bouton Create Style (Créer le style).
N'oubliez pas que vous pouvez créer autant de styles de couleur que vous le souhaitez.
Comment appliquer un style de couleur à un calque
Sélectionnez votre calque et allez dans la section Fill (Remplissage) dans la barre latérale droite.
- Cliquez sur l'icône des quatre points dans le coin droit de la section Fill pour ouvrir la fenêtre modale des styles de couleur.
- Sélectionnez votre style de couleur préféré.
Et voilà !
Comment modifier un style de couleur
Cliquez sur le fond gris du fichier pour afficher vos styles.
- Faites un clic droit sur le style de couleur et sélectionnez Edit style (Modifier le style) dans le menu.
Comment supprimer un style de couleur
Supprimer un style de couleur est très facile à faire.
- Cliquez sur le fond gris du fichier pour afficher vos styles.
- Faites un clic droit sur le style de couleur et sélectionnez Delete Style (Supprimer le style).
Comment utiliser les styles de texte dans Figma
Vous pouvez également appliquer des styles au texte. Il peut s'agir d'un bloc de texte entier ou d'une partie du texte d'un bloc. Cela aide à définir le style de vos en-têtes.
Pour créer un nouveau style de texte, commencez par créer un nouveau calque de texte et ajoutez quelques paramètres. Par exemple :
- Famille de polices : Roboto
- Taille de police : 30
- Graisse de police : Regular
- Cliquez sur l'icône des quatre points dans la section Text pour ouvrir la fenêtre modale de texte.
- Cliquez sur l'icône + dans le coin droit de la fenêtre modale des styles de texte.
- Donnez à votre style votre nom préféré (disons Style de texte 1) et cliquez sur le bouton Create Style (Créer le style).
Comment appliquer un style de texte à un calque
Tout d'abord, sélectionnez votre calque et allez dans la section Text dans la barre latérale droite.
Ensuite, cliquez sur l'icône des quatre points dans le coin droit de la section Text pour ouvrir la fenêtre modale des styles de texte.
Enfin, sélectionnez simplement votre Style de texte préféré.
Comment supprimer un style de texte
Pour supprimer un style de texte, vous devrez cliquer sur le fond gris du fichier pour afficher vos styles. Ensuite, vous pouvez simplement faire un clic droit sur le style de texte que vous souhaitez supprimer et sélectionner Delete Style (Supprimer le style).
Comment combiner les styles de couleur et de texte
Vous pouvez également combiner les styles de texte et de couleur lors de la conception. Vous pouvez ajouter un style de couleur à différents objets textuels. C'est une étape supplémentaire qui peut rendre votre système plus facile à maintenir, surtout lorsque vous n'avez pas à créer de styles de texte différents pour chaque combinaison de couleurs.
- Pour enregistrer des styles de couleur spécifiquement pour le texte : Créez une zone de texte et saisissez votre texte. Suivez les étapes de « Comment appliquer un style de couleur à un calque ».
- Lorsque vous arrivez à l'étape où vous devez donner une description ou un nom à votre style, saisissez votre description de texte, par exemple sous-titre, en-tête de page, texte de bouton, et ainsi de suite.
Conclusion
Notez que l'utilisation et la création de styles lors de la conception dépendent entièrement de vous. Personne ne saura quels styles de couleur/texte vous utilisez dans votre design à moins que vous ne le leur fassiez savoir. Comme je l'ai dit, cela dépend entièrement de vous !
Cependant, les styles aident à maintenir la cohérence de vos designs et la création de bons styles peut contribuer à rendre votre expérience utilisateur fluide.