7 Plug-ins Figma pour concevoir de meilleurs Design System

Créer un Design System est une chose, le maintenir en est un autre. Cela demande un investissement de temps. Et le temps, personne n’en a vraiment (et encore moins pour ça …).

Alors, quand il s’agit d’hygiène de travail et de conception UI, il faut être un peu malin pour être plus efficace sans prendre beaucoup plus de temps.

Voici quelques-uns des plug-ins que j’utilise quotidiennement pour concevoir et maintenir des librairies et des systèmes de design dans Figma

— — —

Find and Replace

➡️ Simple et efficace. Find and Replace permet, comme son si joli nom l’indique, de chercher et remplacer du texte sur une même page.

Find and Replace Colors

➡️ Cousin germain de Find and Replace, Find and Replace colors permet…. [roulement de tambour] de sélectionner par lot des couleurs et de les remplacer en un clic. Très pratique pour lier des couleurs en HEX à des styles de couleurs déjà définis.

Rename It

➡️ Rename It est très utile pour renommer les calques de texte en une valeur commune. Cela évite d’avoir le contenu texte qui saute d’un variant à l’autre car Figma va repérer les libellés similaires et conserver les chaînes de caractères à l’intérieur. Je me sers littéralement de ce plug-in tous les jours, et ça me fait gagner un temps fou à chaque fois !

Style Organizer

➡️ Ce petit plug-in est une petite pépite qui permet de vérifier que chaque de nos composants soient bien reliés aux styles locaux correspondants (style de couleurs et styles de texte correspondants). L’option sélection et de fusion de styles par lot est super utile. En un clic, tout rendre dans l’ordre (ou presque ;-)) ! Bref, Style Organizer est un vrai “” de designer.

Theemo

➡️ Theemo est un plug-in un petit peu particulier, qui comble une grande fonctionnalité encore manquante à Figma selon moi : la possibilité de créer des alias de style de couleurs. Ce plug-in est à utiliser, entre-autre, pour créer des styles de couleurs sémantiques, sans pour autant dupliquer la source. C’est idéal lorsque l’on travaille avec des variations de thème UI (par exemple &

Themer

➡️ Une fois les différents styles de couleurs référencés avec Theemo présenté ci-dessus, Themer permet tout simplement de mettre en place des variations de thème et de les intervertir très facilement entre eux. C’est magique !

Lorem Ipsum

Un plug-in tout simple pour générer du Lorem Ipsum. Lorem Ipsum est bien pratique pour tester ces composants avec plus ou moins de texte.

Depuis ces dernières années, Figma a considérablement amélioré l’expérience utilisateur de conception de design en proposant des features de plus en plus performantes ,et surtout de plus en plus . Malheureusement, concevoir, développer et tester de nouvelles features, ça prend du temps. Et Figma ne peut pas aller plus vite que la musique. La communauté, en revanche, elle, elle le peut.

Et c’est grâce à la communauté Figma que nous pouvons profiter de ces nombreux plug-ins 🙏 Les plug-ins, c’est la vie ! Ils nous permettent d’aller plus vite et il y a toujours un, ou presque, pour faire ce que l’on cherche à automatiser.

Et vous, quels sont vos plug-ins Figma favoris pour organiser et automatiser vos librairies sur Figma ?

Merci d’avoir lu cet article. ❤️ Vous avez une question, un feedback ou bien souhaitez à votre tour partager votre avis sur le sujet ? Vous êtes libre de laisser un commentaire ici 👏 ou de me contacter via Linkedin. À bientôt 👋

--

--

👋 Je suis product Designer chez Pelostudio avec une passion pour les Design System. ❤️🧘‍♀️🍫

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Clémence Taillez

Clémence Taillez

64 Followers

👋 Je suis product Designer chez Pelostudio avec une passion pour les Design System. ❤️🧘‍♀️🍫