Styles locaux

Contexte

Quand un projet est débuté sur Figma, il y a beaucoup de chances pour que la charte graphique soit déjà définie.
Dans ce cas, il est intéressant de regrouper et sauvegarder les couleurs, les typographies ou les effets visuels du projet à un seul et même endroit.

Nous allons donc voir comment déclarer et attribuer des styles à n'importe quel élément de notre design.

Déclarer des styles locaux

Pour commencer, il faut s'assurer qu'aucun élément du design n'est sélectionné.
Si c'est bien le cas, un onglet « Local styles » devrait apparaître dans le menu de droite, nous permettant d'ajouter 4 types de styles : Text, Color, Effect et Grid.

Le déroulé est ensuite très simple car il nous suffit simplement de renseigner un nom, une description (optionnelle) ainsi que la valeur de notre style : un code héxadécimal pour une couleur, le nom d'une typographie pour le texte... .

Attribuer un style local

Une fois que notre style est enregistré, nous pouvons l'appliquer sur n'importe quel élément.

Attribuer une couleur de fond à un bouton se fait très facilement en sélectionnant l'élément, puis en se rendant dans le menu de droite, dans « Fill » et en cliquant sur l'icône afin de sélectionner la couleur de notre choix.

Notre bouton possède maintenant une couleur fond qui correspond au style enregistré plus tôt.
Cela signifie que si cette couleur vient à être modifiée ou supprimée, la couleur de fond du bouton sera également impactée.

L'intérêt de créer au préalable des styles est de réduire la perte de temps en cas de modifications sur la charte graphique d'un projet.