10 plugins méconnus à utiliser dans Figma

Quelles sont les plugins capables de simplifier votre vie de Product Designer et de surpasser les attentes de votre client? Telle est la mission que nous nous proposons de remplir au sein de cet article.

Quoi ? Encore un top 10 des plugins ? En plus c’est tout le temps les mêmes noms qui ressortent sur internet, je connais déjà les plus importants ! Il est vrai qu’en cherchant un peu sur la toile on retombe souvent sur les mêmes titres pourtant il existe quelques plugins méconnus du grand public qui pourraient bien simplifier votre manière de travailler à tout jamais.

Ici il n’est pas question de vous parler de plugins anecdotiques comme “mockup” ou encore “vectary 3D element” que vous utiliserez probablement qu’une ou deux fois au cours de votre vie de Product Designer.

Dans cet article, je me propose de vous partager 10 plugins méconnus que j’ai découvert lorsque je me suis retrouvé confronté à de vraies problématiques métier en tant que Product Designer. Les plugins que vous allez découvrir aujourd’hui m’accompagnent au quotidien dans mon travail et ont considérablement optimisé mon processus de création.

1. Component replacer : vous n’aurez plus qu’à swap !

Source :

✍️ Le contexte

En tant que Product Designer il m’est souvent arrivé de me retrouver sur des projets déjà entamés par d’autres Designers. On ne travaille pas tous de la même façon et certains de mes collègues préfèrent travailler sans Design System au départ dans le but de produire rapidement une ébauche d’idée quitte à créer de la dette design par la suite. Il est impossible de scaler correctement un produit en équipe sans travailler avec des composants.

🤕 Le problème

Aujourd’hui, le travail de remplacement de chaque élément de nos maquettes par des composants de notre Design System s'effectue en supprimant un ancien élément pour le remplacer par la suite par un composant à l’aide d’un drag and drop ou d’un copié-collé tout en prenant soin de le conserver au même niveau hiérarchique à travers nos calques. C’est un processus long et répétitif qui demande beaucoup trop d’étapes.

🔥 La solution

Component remplacer est un outil qui a été créé dans l’optique d’augmenter la vélocité du Product Designer en lui permettant de remplacer n'importe quelle sélection par des composants ou des instances en réalisant un simple swap.

2. Safely Delete Components : automatisez la suppression des composants obsolètes !

Source :

✍️ Le contexte

Je ne sais pas vous, mais moi, je suis le type de Designer qui a tendance à créer de nombreux composants afin de réaliser de nombreuses itérations sur mes maquettes. C’est un mode de fonctionnement qui me permet de travailler rapidement mais qui peut surcharger inutilement un fichier figma avec des composants obsolètes.

🤕 Le problème

La seule solution était alors de partir à la pêche aux composants inutiles au travers une inspection minutieuse de chacun de mes masters dans le but de détecter si toutes ses instances étaient utilisées dans mes maquettes.

🔥 La solution

Mais tout ça c’est du passé car aujourd’hui j’utilise le plugin Safely Delete Components. Il suffit de lancer l’outil sur votre Figma et ce dernier supprimera lui-même les composants inutiles.

3. Stark : l’accessibilité n’aura plus de secret pour vous !

Source :

✍️ Le contexte

Qui ne s’est jamais retrouvé avec des doutes sur l’accessibilité de ses maquettes me jette la première pierre !

🤕 Le problème

Il existe aujourd’hui de nombreux sites permettant de vérifier le contraste de nos couleurs en fonction de nos éléments mais cette tâche est si chronophage que cette action est souvent reléguée au dernier rang en termes de priorité de conception. Toutefois, c’est une négligence qui risquera de vous coûter cher si vous vous y attelez trop tard.

🔥 La solution

C’est pourquoi je vous propose le plugin stark, il est simple à prendre en main et permet de réaliser directement dans votre Figma une évaluation de l'accessibilité de vos maquettes selon les normes WCAG grâce à des outils tels que Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, et bien d'autres encore, réunis en un seul endroit.

4. VisualEyes : obtenez des retours utilisateurs grâce à l’IA !

Source :

✍️ Le contexte

Dans un monde idéal, on a toujours le temps et le budget pour mettre en place des tests utilisateurs. Mais sur le terrain, il s’avère parfois qu'on a pas le temps de les réaliser.

🤕 Le problème

Alors on fait quoi ? Et bien généralement on supprime les tests utilisateurs et on design avec l’instinct du Designer ce qui provoque souvent des mauvaises surprises une fois le produit lancé et remis entre les mains des utilisateurs finaux.

🔥 La solution

VisualEyes a bien compris notre problème c’est pourquoi ils ont décidé de produire un plugin en se basant sur le pouvoir de l’intelligence artificielle. Et c’est un pari réussi puisque l’outil parvient à simuler avec une précision de 93% le comportement de nombreux utilisateurs à travers une simple analyse du design de vos maquettes. Ainsi en utilisant cet outil sur vos maquettes Figma vous pourrez obtenir :

• Une “attention map” : elle remplace parfaitement les tests de cinq secondes et les maps d’ eyes tracking
• Un “ clarity score “ : le score de clarté peut également être un excellent substitut à un test de préférence rapide.
• Une “ Area of interest “ : les zones d'intérêt quantifient l'attention à l'intérieur des éléments critiques et permettent de réaliser des AB test rapides.

5. Detach Component : détachez tous vos composants en 1 clic !

Source :

✍️ Le contexte

Pourquoi diable avoir besoin de détacher des composants lorsque l’on construit des maquettes ? L’intérêt de concevoir à l’aide d’un Design System n’est-il pas justement de créer une unique source de vérité capable de modifier l’ensemble de nos productions par l’intermédiaire des masters components ? C’est en partie vrai mais il arrive parfois que l’on ait besoin de garder une trace des itérations de nos maquettes précédentes.

🤕 Le problème

Si vous souhaitez réaliser des tests utilisateurs en gardant une vision figée dans le temps de vos anciennes maquettes par exemple, il vous faudra en détacher les composants un à un afin de ne pas changer leurs looks lorsque vous ferez évoluer votre Design system. Une tâche simple mais fastidieuse et répétitive.

🔥 La solution

Laissez detach component faire le sale boulot à votre place et utilisez votre temps pour des tâches qui en valent la peine. Sélectionnez simplement vos écrans et cliquez sur detach component, le plugin se chargera de tout détacher pour vous.

6. Automator : automatisez tout ce que vous voulez !

✍️ Le contexte

Qui n’a jamais rêvé d’avoir un plugin capable d’automatiser n’importe quelle tâche sur Figma ? En effet, il nous arrive à tous de nous retrouver face à une tâche longue et répétitive et de rêver d’un plugin capable de la réaliser à notre place.

🤕 Le problème

La quantité de plugin présent sur community est dense, pourtant il m’arrive souvent de ne trouver aucun plugin capable de répondre à mon besoin d’automatisation.

🔥 La solution

Imaginez le pouvoir des scripts d’action personnalisés sur photoshop fusionné avec la puissance d’une communauté de Designers qui fournissent gratuitement une énorme quantité de templates d’automations et vous aurez une idée de la puissance d’Automator.

Automator est partie d’un constat simple : toute action répétitive effectuée par un Designer peut être automatisée et enregistrée à l’intérieur d’un script d'action qu’il aura lui-même défini. Le plugin permet d'effectuer 100 actions différentes pour un seul script d'automation, ce qui implique des possibilités infinies. Ainsi des actions rébarbatives telles que : réaliser les specs d’une maquette pour une po review, importer et réaliser des cards à partir d’une base de données sur Airtable ou encore transformer une maquette en placeholder pourront être réalisées en un simple clic.

Pour en savoir plus et comprendre le fonctionnement et les possibilités du plugin, je vous invite à consulter le site Automator Design. Automator est un plugin payant, mais il est possible de le tester en version gratuite.

7. Writter-for-Figma : fini les fautes d’orthographes !

Source : **

✍️ Le contexte

Lorsque l’on désigne, on est souvent préoccupé par tellement de choses pendant la construction de notre interface que l’on peut passer à côté des fautes de grammaire les plus grotesques.

🤕 Le problème

Vous aurez beau être le meilleur Designer de la terre, s’il s’avère qu’il y a des fautes d’orthographes dans vos maquettes vous perdrez toute crédibilité aux yeux de vos clients.

🔥 La solution

Ne faites pas cette erreur et installez le plugin Writer-for-Figma, Writer est l'assistant de rédaction IA pour les équipes. Utilisez-le pour vous assurer que tout votre contenu est clair, cohérent et sans erreurs. Ce dernier vérifie votre contenu pour l’orthographe, la grammaire, la lisibilité, les erreurs de ponctuation et vous donne même des statistiques sur le temps de lecture, le nombre de mots ou encore la longueur de vos phrases. C’est un plugin qui a fait ses preuves auprès de nombreuses entreprises comme invision, webflow ou encore squarespace. Le seul petit bémol est qu'il a été conçu uniquement pour les textes en anglais pour le moment.

8. Headlime : lorsque l’IA devient votre copywriter !

✍️ Le contexte

Headlime est un plugin que j’ai découvert un peu par hasard en recherchant des bonnes pratiques pour rédiger des contenus pertinents capables de convertir mes users sur une landing page, attirer l’attention du lecteur au travers d’un titre de blog accrocheur ou encore rassurer un prospect au travers d’un mail client.

🤕 Le problème

Selon la taille de l’entreprise dans laquelle vous intervenez, vous pouvez être amené à prendre la casquette de copywriter ce qui est loin d’être une sinécure.

🔥 La solution

Avec Headlime, pas besoin d'être un rédacteur pour écrire des textes à fort taux de conversion. Il suffit d’expliquer le texte que l’on souhaite communiquer à nos utilisateurs en quelques mots et l’IA se charge de nous proposer différentes tournures de phrases qui correspondent à nos objectifs de rédaction. Leur plugin Figma propose quelques unes de leurs fonctionnalités, mais il faudra toutefois se rendre sur le site internet Headlime pour bénéficier de toute la puissance de l’outil. Une des grandes forces de ce plugin est que ce dernier fonctionne pour plusieurs langues.

9. Image Tracer : transformez vos images en svg !

Source :

✍️ Le contexte

Lorsque vous devez reprendre des maquettes existantes, il arrive parfois que l’on vous fournisse des pictos en png à l’intérieur ce qui est tout sauf une bonne pratique.

🤕 Le problème

Je ne compte plus le nombre de fois où j’ai dû me rendre sur des sites tels que TinyWow ou encore Illustrator pour convertir des images en svg.

🔥 La solution

À partir d’aujourd’hui vous pouvez arrêter de faire ça. Avec Image Tracer, vous pouvez convertir vos images bitmap noir et blanc en vecteurs. C’est un outil qui peut s’avérer extrêmement utile lorsque vous intervenez sur un Figma où votre prédécesseur vous a gentiment légué des pictos en png ou jpg à l’intérieur de ses maquettes.

10.Deepl translate : enfin un traducteur instantané !

Source :

✍️ Le contexte

Le métier de Product Designer implique souvent de travailler avec des entreprises internationales qui ont besoin de concevoir des interfaces en anglais.

🤕 Le problème

À moins d’être bilingue, il nous arrive souvent de chercher nos mots ce qui nous pousse à réaliser d’inlassable allers-retours entre Figma et google traduction.

🔥 La solution

Je vous présente mon chouchou, Deepl translate un plugin simple et efficace capable de traduire l’intégralité des textes de vos maquettes en un clic au sein de votre Figma et ce dans 26 langues différentes.

En conclusion

Comme vous aurez pu le constater, la majorité de ces plugins fonctionnent grâce à l’intelligence artificielle, un élément sur lequel Figma va de plus en plus mettre l’emphase grâce à son rachat par Adobe.

Si vous êtes désireux d’en savoir plus sur l’avenir de Figma, n’hésitez pas à consulter notre article "Adobe a racheté Figma, et c'est une bonne nouvelle !"

Enfin, si vous avez encore du mal à convaincre votre entreprise de sauter le pas vers Figma, nous vous conseillons de partager l’article pourquoi et comment utiliser figma pour les convaincre.