Simplifiez la création et la gestion de vos styles Figma avec le plugin Styler

April 19, 2024
X
MINUTES
PARTAGER SUR
Simplifiez la création et la gestion de vos styles Figma avec le plugin Styler

Introduction

Le design d'interface utilisateur est un processus complexe qui nécessite une attention particulière aux détails. Parmi ces détails, la gestion des styles est cruciale pour maintenir une cohérence visuelle dans un projet. Cependant, la création en masse de styles peut prendre du temps, et il serait plus simple et plus rapide de pouvoir simplement donner un nom à chaque calque ayant un style et de tout générer en une seule fois plutôt que de passer par l'interface de Figma qui peut être chronophage.

C'est là qu'intervient le plugin "Styler", qui permet de générer des styles basés sur le nom des calques dans Figma. L'atout majeur de ce plugin est de pouvoir changer facilement les styles de la même façon. Couplé avec les fonctionnalités du plugin Rename It qui permet notamment de mettre le nom du style en tant que nom de calque, la mise à jour des styles ou bien de leur nom est encore plus simple et rapide.

Comment l’utiliser

EXTRACT STYLES

Cette fonctionnalité permet d'extraire rapidement les styles d'éléments de conception existants dans leur projet Figma. Les styles extraits sont affichés dans l'ordre de taille, ce qui est très pratique pour une utilisation rapide et efficace. De plus, si vous utilisez la fonctionnalité d'auto-layout, l'extraction des styles peut être encore plus rapide et facile pour une utilisation dans d'autres projets ou pour créer un guide de style.

GENERATE STYLES

Cela permet de créer des styles basés sur le nom des calques dans leur conception Figma. Cette fonctionnalité est utile pour les couleurs, les polices, les tailles de police et les effets d'ombre, et peut être utilisée pour créer rapidement des styles cohérents pour vos éléments de conception. Lorsque vous utilisez cette fonctionnalité, il est important de nommer les calques de manière cohérente et descriptive. Par exemple, si vous voulez créer un style pour la couleur de fond d'un bouton, vous pouvez nommer le calque correspondant "Bouton/Fond".

De cette manière, lorsque vous utilisez la fonctionnalité "Generate Styles", le plugin créera un nouveau style basé sur le nom "Bouton/Fond". Une fois que vous avez créé un style à l'aide de cette fonctionnalité, il est facile de l'appliquer à d'autres éléments de conception en utilisant la fonctionnalité "Apply Styles". Vous pouvez également organiser vos styles en utilisant des hiérarchies de styles en utilisant le slash ("/") dans le nom de votre calque, comme vu précédemment.

APPLY STYLES

Cette fonctionnalité permet d'appliquer des styles existants à des éléments sélectionnés dans leur conception Figma en se basant sur le nom des calques. Cette fonctionnalité fonctionne pour les couleurs, les textes et les effets. Ainsi, si vous avez nommé vos calques de manière cohérente avec vos styles, vous pouvez facilement appliquer ces styles à vos calques correspondants en utilisant cette fonctionnalité.

En d'autres termes, la fonctionnalité "Apply Styles" est le comportement inverse de la fonctionnalité de génération de styles. Alors que la génération de styles crée des styles en se basant sur le nom des calques, la fonctionnalité "Apply Styles" applique des styles existants à des calques en se basant également sur leur nom.

DETACH STYLES

Cela permet aux utilisateurs de détacher les styles d'un ou plusieurs éléments sélectionnés en une seule fois. Cette fonctionnalité est particulièrement utile si vous avez plusieurs éléments avec des styles différents et que vous souhaitez les traiter en masse. Il est important de noter que si vous utilisez cette fonctionnalité pour détacher un seul style ou un seul calque, le plugin n'apportera pas nécessairement plus d'avantages par rapport aux fonctions de base disponibles dans Figma. Cependant, si vous devez traiter plusieurs éléments, la fonctionnalité "Detach Styles" peut vous faire gagner beaucoup de temps en évitant de devoir détacher les styles un par un.

REMOVE STYLES

Cette fonctionnalité permet de supprimer rapidement un style de texte, de couleur, un effet ou une grille à partir d'un élément sélectionné dans votre projet Figma. L'un des avantages de cette fonctionnalité est que la suppression est visuelle, ce qui permet d'identifier plus facilement les styles à retirer. De plus, il est possible de cibler tous les styles en une seule fois ou individuellement en utilisant les options "By Fill Type", "By Stroke Type", "By Text Type", "By Effect Type" et "By Grid Type". Cette fonctionnalité est très utile pour maintenir la cohérence des styles dans l'ensemble de votre projet et pour supprimer rapidement les styles inutilisés ou redondants.

CUSTOMIZE PLUGIN

Cela permet de personnaliser le plugin en fonction de vos besoins spécifiques. Vous pouvez choisir la durée des notifications pour ne pas manquer d'informations importantes, et définir l'ordre de génération des styles pour répondre à vos préférences. De plus, vous pouvez afficher le nom du dernier style en description pour une meilleure identification.

Le plugin propose également quelques fonctionnalités expérimentales pour les utilisateurs avancés. Vous pouvez régler le nombre de colonnes et de lignes générées lors de l'utilisation de la fonctionnalité "Extract Styles", ce qui peut être très pratique pour les grands projets. Enfin, vous pouvez choisir d'enregistrer les paramètres actuels ou de restaurer les valeurs par défaut.

Conclusion

En somme, le plugin "Styler" est un outil pratique pour tous les designers travaillant sur Figma qui souhaitent gagner du temps et améliorer leur productivité. Grâce à la fonctionnalité de génération de styles basée sur le nom des calques, il est facile de créer des styles cohérents pour tous les éléments de votre conception. En utilisant également la fonctionnalité "Customize Plugin", vous pouvez personnaliser l'outil selon vos besoins spécifiques, en choisissant par exemple la durée des notifications ou l'ordre de génération des styles.

L'un des atouts majeurs de "Styler" est sa combinaison avec le plugin Rename It, qui permet notamment de mettre à jour rapidement les noms de calques en fonction des styles appliqués.  En fin de compte, "Styler" est un excellent outil pour tous les designers qui cherchent à simplifier leur flux de travail et à gagner du temps. En utilisant cet outil, vous pouvez facilement créer des styles cohérents pour tous les éléments de votre conception, tout en personnalisant l'outil pour répondre à vos besoins spécifiques.

LIENS PRATIQUES

Plugin Figma

Guillaume Hambourger

Guillaume Hambourger

UI Designer chez ATECNA
PLUS D'ARTICLES

Vous pourriez également être intéressé

Créez des expériences web révolutionnaires avec le duo dynamique de Webflow & SplineCréez des expériences web révolutionnaires avec le duo dynamique de Webflow & Spline
Explorez de nouvelles dimensions avec Webflow et Spline ! Cet article dévoile comment ces plateformes combinent design 2D et modélisation 3D pour des interactions utilisateurs captivantes. Découvrez comment cette synergie révolutionne le web design et libère votre créativité.
Spline, l'outil de conception 3D dans le navigateur avec collaboration en temps réelSpline, l'outil de conception 3D dans le navigateur avec collaboration en temps réel
Spline révolutionne la modélisation 3D avec sa simplicité, sa puissance et sa polyvalence. Cette plateforme intuitive permet à quiconque de créer des modèles 3D époustouflants, d'animer des scènes dynamiques et de développer des expériences interactives engageantes. Idéale pour les professionnels et les amateurs, Spline libère votre créativité 3D.
Introduction à Responsively, l’application pour optimiser le responsive de Votre Site WebIntroduction à Responsively, l’application pour optimiser le responsive de Votre Site Web
Découvrez Responsively, l'application révolutionnaire qui simplifie le développement web réactif. Testez et visualisez votre site web en temps réel sur plusieurs appareils simultanément, garantissant une expérience optimale pour tous les utilisateurs.