.webp)
Introduction
Aujourd’hui, on sait que Figma permet de consulter l’ensemble des couleurs d’une sélection et de pouvoir sélectionner tous les éléments ayant une même couleur. Il est même possible de différencier une couleur, d’un style de calque. Malheureusement, cette fonctionnalité n’existe que pour la gestion des couleurs. En effet, il est actuellement impossible d’avoir un comportement similaire concernant la gestion des textes et styles typographiques.
Le plugin "Select by Font", nous permet de visualiser facilement l’ensemble des typographies utilisées sur la sélection. En fonction des informations affichées, nous pouvons réfléchir aux changements que nous souhaitons appliquer. Ces informations peuvent permettre au Designer de s’assurer que toutes les typographies sont bien liées aux styles typographiques de la Librairie qui compose son Design System.
Ce plugin élimine la difficulté de trouver et de sélectionner les textes pouvant poser problème dans la maintenance d’un Design Sytem ou d’une simple interface.
Fonctionnalités
NOM DU STYLE
La première colonne des résultats du plugin vous permet de voir assez rapidement si un texte est rattaché à un style de texte ou pas. L’avantage est que s’il l’est, vous pouvez changer de style à défaut de le rattacher à un style existant.
NOM DE LA FONT
Le nom de la font vous permet de voir si l’ensemble de votre sélection utilise une seule typographie ou s’il y a des divergences avec les styles qui devraient être appliqués.
TAILLE & GRAISSE
Qu’il s’agisse de la taille ou bien de la graisse d’une typographie, cela vous donnera des indices sur les styles à appliquer sur les typographies n'étant pas rattachées à un style. Par exemple, si votre typographie “Body” est à 16px et que certains textes ont la même taille, la même typographie et la même graisse vous avez qu’il faut appliquer le style “Body”.
SELECTION PAR LOT
Bien qu’aucun bouton ne soit affiché, lorsque vous cliquerez sur l’une des lignes des résultats du plugin, une sélection de l’ensemble des textes ayant les mêmes propriétés sera fait. C’est cette sélection qui vous fera gagner du temps lors de vos modifications.
ACTUALISER LA SÉLECTION
Même si cette dernière fonctionnalité soit optionnelle, elle n’en reste pas moins utile et vous permettra de voir la différence sur l’avant et l’après modification. Certain styles seront fusionnés et les résultats doivent refléter les actions que vous avez initiées.
Comment l’utiliser
ÉTAPE 1
Sélectionnez une frame ou un groupe de frames, puis exécutez le plugin pour voir la liste précise des typographies utilisées dans cette sélection.
ÉTAPE 2
Cliquez sur le nom de la police ou du style pour sélectionner tous les éléments de texte correspondant à ce style.
ÉTAPE 3
Si vous apportez des modifications à la police ou au style, vous pouvez fermer la fenêtre du plugin ou rafraîchir la sélection pour mettre à jour la liste des polices.
Conclusion
Pour conclure, je dirais que "Select by Font" vous assurera une ultime vérification lors de la conception de vos interfaces. Cela permet de ne plus prendre peur dès qu’un texte a perdu son style. Le seul petit défaut étant qu’il fonctionne sur une sélection dans une page et non par rapport au document donc il faudra le faire page par page, mais cela ne devrait pas vous prendre plus de temps qu’il ne vous en fera gagner.
Personnellement, je l’utilise pour être sûr que l'ensemble des textes soit bien rattaché à un des styles de la librairie, mais également pour faire massivement la bascule d’un style de texte à un autre. À vous de vous l’approprier pour qu’il puisse vous faire également gagner du temps !
