Steven Houessou-Adin nous parle d'automatisation de tâche par l'usage de plugins, widgets et de raccourcis claviers sur Figma. https://www.figma.com/community/file/1149310932961040375 ------------------ Retrouvez-nous sur https://friends.figma.com/cotonou/

1. Quand la tâche parait répétitive, une
automation s’impose.
/ 🗜 atelier design : organisation et
…
Plugins
Search all plugins
Recents

2. Plugins & Widgets
Sur Figma comme pour d’autres outils, un
Plugin c’est un programme non persistant
auquel on a accès depuis l’interface de
l’outil et qui ajoute des fonctionnalités
spécifiques parfois manquantes tout en
fonctionnant en arrière-plan.
Le Widget, pareillement, ajoute des
nouvelles fonctionnalités, mais a la
particularité d’être visible, persistant et
offre à l’utilisateur d’interagir avec lui sur
sa page.

3. Liste des
Ressources
fn + ↓
fn + ↓
fn + ↓
• Plugins
• Widgets
• Toolkit (fichier community)

4. Quelle est mon objectif?
Est-ce long à réaliser manuellement?
Existe-t-il une solution native?
Aurais je à le repété souvent?
Quelles sont les repercutions possibles?
Quelle est sa relation avec les autres objets ?
Ma solution est elle utilisable ?
Profondes réflexions
UTILISABILITÉ
“La notion d’utilisabilité englobe à la fois la
performance de réalisation de la tâche, la
satisfaction que procure l’utilisation de l’objet et la
facilité avec laquelle on apprend à s’en servir.”
On peut y associer l’accessibilité et la
réutilisabilité.

5. Plugins

6. Pages
Pages comme son nom l’indique est un plugin utile
pour la gestion des pages sur Figma.
Créez des pages depuis une liste ou effacez des pages
en cascade aisément et gratuitement.
Voir sur le community

7. Styler
Styler permet de gérer plusieurs styles à la fois en
modifiant les propriétés des Calques.
Il est possible de créer, supprimer, renommer, mettre à
jour les styles ou de les déplacer d'un fichier à un autre
en les extrayant.
Voir sur le community

8. Batch Styler
Avec Batch Styler, modifiez plusieurs styles de texte et
de couleur directement !
Vous avez besoin de changer les valeurs de plusieurs
styles (texte ou couleurs) simultanément, mais vous ne
voulez pas passer par le processus de modification de
chaque style ?
C’est ce à quoi ce plugin répond efficacement.
Voir sur le community

9. Design System Organizer
Design System Organizer est utile pour la plupart des
tâches relatives à la réorganisation et au nommage de
composant et de styles. N’hesitez pas à regarder cette
vidéo démonstration.
DSO offre 15jour d’essai gratuit et coûte actuellement
29 $ (à vie), un prix qui vaut la peine d’être payé quand
on voit le gain de temps offert dans la gestion de
bibliothèque de composants.
Soutenez Arthur Savchenko et achetez une licence.
Voir sur le community

10. Style Organizer
Style organizer est l’outil idéal pour évaluer l’utilisation
globale de style sur votre page.
Vous pouvez identifier les éléments ayant le même
style et les modifier, identifier les styles venant de
librairies externes, identifier les éléments non liés à des
styles et apporté une correction manuelle et il y a
même une option pour faire automatiquement les
corrections possibles en un seul clic.
Voir sur le community

11. Edit in place
Edit in place donne le superpouvoir de sélectionner
n'importe quelle instance d'un composant local et
éditez le composant parent dont il dérive à la place.
Note : Il ne fonctionne pas très bien avec les variantes
Voir sur le community

12. Find in page
Find in page comme la plupart des plugins de
recherche, permet d’identifier des calques et des textes
dans votre conception, naviguez entre les
les résultats et remplacez le tout-en-un seul clic.
Sa particularité réside dans le champ de recherche qu’il
offre. À savoir, la possibilité de chercher sur Une page,
suivant une Sélection ou Tout le fichier (toutes les
pages).
Notez qu’il est fonctionnel sur Figjam également.
Voir sur le community

13. Rename It
Rename It à l’instar de la fonction de Renommage
native à Figma, permet de rapidement renommer
plusieurs calques de manière personnalisée.
Sa particularité se trouve dans les différentes
personnalisations qu’il offre.
Un plus, est qu’il intègre les plugins parameters, donc
permet de renommer rapidement avec quelques
touches de claviers.
Voir sur le community

14. Master
Master vous permet de Créer, attacher, cloner ou
déplacer des composants en quelques clics sans
perdre les overrides !
Super-pouvoir : Imaginez que vous commencez un
nouveau projet dans Figma, puis réalisez un peu tard
que vous auriez dû utiliser des composants pour la
construction d’un lot d’élements que vous utilisez 🤦🏽♂️.
Master offre de remplacer en un clic ces éléments par
des instances d’un Composant parent qui sera auto-
génerer. Aussi chaque instance gardera les overrides
qu’ils devraient avoir 💖. Mais il n’est pas gratuit :/
Voir sur le community

15. Component Utilities
Component utilities
Voir sur le community

16. Similayer
Similayer permet de sélectionner des calques
similaires, en fonction de toutes sortes de propriétés.
C’est l’un des meilleurs plugins de ce genre.
Voir sur le community

17. Add numbers to texts
Change du texte devient un jeu d’enfant.
Ce plugin permet de changer du texte en offrant des
moyens de personnalisations comme l’incrementation
de chiffre ou de lettres.
Voir sur le community

18. Find and replace
Recherchez des textes sur votre page et remplacez-les
aisément.
Vous avez la possibilité de rechercher du contenu texte
ou le nom d’un calque sur la page ou depuis une
sélection.
Voir sur le community

19. Google Sheets Sync
Synchronisez du contenu de Google Sheets
directement dans votre fichier Figma.
Il est simple d’usage et dispose d’une documentation.
Voir sur le community

20. JSON to Figma
Ce plugin peut parcourir des fichiers JSON en local ou
à partir d'une URL afin de vous permettre de remplir
vos calques avec du texte ou des images.
Voir sur le community

21. Content Reel
Remplissez rapidement vos interfaces avec des
chaines de caractères, des images et icônes.
Content Reel vous permet de créer du contenu
personnalisé que vous pouvez utiliser en privé ou
partager avec d'autres utilisateurs en le rendu public.
Voir sur le community

22. Photos
Recherchez et insérez des photos (y compris des gifs)
dans vos fichiers Figma depuis Unsplash, Google,
Flickr, Pixabay, Pexels, Giphy et Tenor.
Vous pouvez insérer 20 photos par fichier depuis
Unsplash, Pixabay, Pexels, Flickr, Giphy et Tenor.
Ce qui est génial est que le plugin propose des offres
d’achat de licence à vie à côut très abordable.
Soit 20$ pour un Basic Plan et 30$ pour le Pro Plan.
Voir sur le community

23. Automater
Automater peut être présenté comme une collection
d'utilitaires simples ou avancés qui répondent à divers
problématiques.
Voir sur le community

24. Automator
Automator permet de créer des automations
personnalisées par glisser-déposer afin de résoudre
des tâches chronophages.
Le plugin coûte aujourd’hui 9$ pour une licence
personnelle.
Un espace community spécial est disponible pour les
utilisateurs pour partager des automations. Alors
parfois, selon la tâche à accomplir, pas besoin de créer
une nouvelle automation ou de démarrer à zéro.
Voir sur le community

25. Figma Workflows
Accélérez votre processus de conception grâce à de
puissantes automatisations.
À l’instar de l'outil Shortcuts sur iOS, créez des
automations en combinant différentes actions que
propose Figma Worflows pour répondre à vos
problématiques d’éxecution de tâches.
Ce plugin est completement gratuit et opensource sur
github.
Voir sur le community

26. Node Inspector
Node Inspector permet de voir et copier les propriétés
des nœuds pour développer des plugins.
Voir sur le community

28. Clean Document
Organisez et nettoyez automatiquement votre Fichier
Figma.
Voir sur le community

29. Translations for figma
Translations for Figma vous permet de tester vos page
avec différentes langues à la volée.
Vous pouvez l'utiliser gratuitement ou en tant que
service payant.
Le service gratuit ne nécessite pas d'inscription et est
celui activé par défaut.
Vérifiez ce qui est disponible avec un accès privilégié
sur la page de pricing.
Voir sur le community

30. Figma Section
Utilisez les sections dans Figma pour organiser
facilement vos conceptions.
Superpouvoir : Il ne se comporte pas comme un Frame,
donc n’affecte pas la structure des éléments dans une
librairie ou encore les liens de prototypage par
exemple.
Ce plugin coûte 5$.
Voir plus de détails sur la page officielle.
Voir sur le community

31. Section分区
Utilisez les sections dans Figma pour organiser
facilement vos conceptions.
Note : Le plugin fonctionne plutôt bien outre quelques
petits bugs, sachant qu’il est complètement gratuit.
Voir sur le community

32. Team Library Component
Browser
Le plugin permet de lister, parcourir et faire usage des
composants de vos bibliothèques partagées et locales.
Pro Usage : Remplacé la ou les sélection·s par une
instance tout en retenant les tailles respectives.
Voir sur le community

33. Strings
Strings UX est un outil d’UX writting qui permet de
gagner du temps à l’écriture en proposant des
exemples de phases/mots et d’autres corrections utiles
à l’amelioration du score de lisibilité.
De plus, il intègre un verificateur/correcteur de
grammaire et orthographe dans diverses langues dont
le français.
La version gratuite de l’outil est largement suffisante
pour des travaux personnels ou pour des PME. Voir
détails
Disclamer 🤦 : Apparemment Strings ne sera plus
disponible dès fin août.
Voir sur le community

34. Widgets

35. Calendar
Calendar est un widget de calendrier utile pour vos
besoins de planification, qui inclut des vues par
semaine ou mois et des plages de temps
personnalisable avec une disposition flexibles.
Go to community page

36. Activity Tracker
Ce simple widget vous permet de suivre le temps passé
sur vos tâches !
Considérez-le comme un chronomètre perfectionné
pour vos activités.
Go to community page

37. Translate
Traduisez de/vers n'importe laquelle de 125 langues
disponibles sans quitter votre espace de travail.
Go to community page

38. lil todo
Créer rapidement une todo list pour vos taches
journalières.
Go to community page

39. Changelog
Un widget pour créer de manière fluide des
Changelogs pour vous et votre équipe.
Go to community page

40. Asana
Vous pouvez utiliser le widget Asana pour récupérer les
projets Asana et toutes leurs tâches associées dans le
Canvas pour en discuter et les mettre à jour en équipe.
Ajustez les dates d'échéance, les attributaires, les
étiquettes, les sections, les projets et tout autre champ
personnalisable, tout en conservant votre source de
vérité dans Asana.
Go to community page

41. Jira
Utilisez le widget Jira pour transférer les projets Jira et
toutes les questions qui y sont associées dans le
canvas pour en discuter et les mettre à jour en équipe.
Ajustez l'attributaire, la priorité, le statut et le type de
problème directement depuis votres espace de travail,
tout en conservant votre source de vérité dans Jira.
Go to community page

42. Navigate
Utilisez ce widget pour guider les gens à travers vos
planches avec des animations fluides.
Go to community page

43. Merci
stevenkejjad@gmail.com
figma.com/@steven
@mrstev3n