Accélérez votre flux de travail avec les plugins Figma

À propos de l'auteur

Abel Hancock est un créateur de produits et musicien basé à Los Angeles, en Californie. Sa passion pour l'efficacité structurée et la création abstraite…
En savoir plus sur
Abel
…

L'un des meilleurs moyens de réduire le temps passé à pousser des pixels dans Figma est d'utiliser certains des innombrables plugins qui peuvent faire le travail à votre place. Figma a récemment ajouté des fonctionnalités étonnantes pour nous aider dans nos flux de travail, mais les plugins remplissent toujours le vide pour de nombreuses tâches quotidiennes fastidieuses et répétitives. Cet article pratique est une tentative de mettre en évidence les plugins les plus utiles que j'utilise souvent pour rendre mon processus de conception plus rapide et plus fluide.

Recherche de plugins Figma

Le temps que nous, en tant que concepteurs d'interfaces, passons à cliquer, sélectionner, renommer, déplacer, mettre à jour et modifier autrement nos conceptions en 2020 est surprenant (et souvent frustrant). C'est une partie incontournable de notre travail, même avec toute la conception de l'IA génératrice de magie disponible aujourd'hui. Cependant, toutes les minutes ou heures que nous pouvons économiser sur les pixels en mouvement peuvent être consacrées à l'amélioration de la qualité du design, à la croissance en tant que concepteurs, ou simplement à profiter de la vie en dehors du design (je sais, le design c'est la vie, mais…).

Enter Plugins Figma! Les membres de la communauté ont développé des centaines de plugins depuis leur première introduction à Figma l'année dernière, dont beaucoup nous aident à accélérer les tâches de conception (et certains qui vont certainement vous ralentir ). Mais, comme la fonctionnalité de recherche actuelle du plugin Figma est assez basique, pour moi (et pour de nombreux autres utilisateurs de plugin) cela signifie que nous devons d'abord rechercher Google, trouver un article détaillé ou un article de blog sur un plugin qui fait quelque chose, lire sur il, puis allez à Figma pour l'installer et l'essayer. Cet article se concentrera sur un certain nombre de plugins pour accélérer nos flux de travail et il est également destiné à contribuer à la communauté et aux connaissances collectives sur les plugins à utiliser pour certaines tâches.

J'espère que l'un des plugins répertoriés ci-dessous est ce que vous êtes cherchez, ou peut-être ce que vous ne saviez pas que vous recherchez mais dont vous avez désespérément besoin! ("Il n'y a rien de tel que de chercher, si vous voulez trouver quelque chose. Vous trouvez certainement généralement quelque chose, si vous regardez, mais ce n'est pas toujours tout à fait ce que vous étiez après .")

Les plugins mis en évidence ici ne sont pas nécessairement les plus flashy ou les plus excitants, mais ils ont considérablement amélioré mon flux de travail. De manière générale, je trouve que les plugins les plus utiles:

• Générer du contenu d'espace réservé en vrac .
• Organiser les composants et les éléments en vrac .
• Modifier les éléments et les styles en vrac .

Alors sans plus tarder, plongeons-nous dans les cinq plugins que j'utilise tous les jours (et quelques raccourcis clavier bonus à la fin de l'article).

Five Plugins To Help You Enhance Votre flux de travail

1. Similayer
2. Content Reel
3. Change Text
4. Lorem ipsum
5. Design System Organisateur
6. Bonus: Raccourcis des plugins

1. Similayer

Quand l'utiliser

Utilisez Similayer lorsque vous devez sélectionner plus de quatre ou cinq éléments avec les mêmes styles (images, composants, texte, cadres, etc.).

Highlights

• Sélectionnez des couches similaires en quelques clics.
• Utilisez des propriétés / conditions extrêmement spécifiques pour définir les éléments à sélectionner.
• Sélectionnez des éléments similaires uniquement dans un cadre spécifique ou dans toute la page.

Les détails

Sélectionner plusieurs éléments tout en maintenant Shift et double ou triple-cliquer sur plusieurs groupes prend du temps et est difficile. Cela est particulièrement vrai lorsqu'il y a plusieurs couches imbriquées ou lorsque vous essayez de sélectionner des éléments à l'intérieur de nombreux groupes. Dans de tels cas, vos tentatives de sélection multiple de quelques éléments seront plus souvent un échec, au lieu d'un succès.

La sélection de seulement quelques éléments peut être assez rapide lorsque vous utilisez Shift et la souris le curseur. Si la sélection des éléments prend plus de cinq secondes, Similayer vous fera gagner du temps. Se familiariser avec ce Similayer accélérera considérablement vos flux de travail et changera votre façon de travailler avec Figma. Au cours d'une journée de travail moyenne, j'utiliserai ce plugin deux fois plus souvent que tous les autres plugins, combinés. Bien sûr, comme avec n'importe quel plugin, Figma peut ajouter des fonctionnalités de base qui finiront par rendre ce plugin obsolète, mais pour le moment, c'est une vraie bouée de sauvetage.

J'utilise le plus souvent Similayer pour:

• Tout sélectionner instances d'un composant dans un cadre;
• Sélectionnez tout le texte avec un style spécifique (épaisseur, famille, taille) dans un cadre;
• Sélectionnez tous les calques portant le même nom sur une page.

Ceci n'est qu'un aperçu de ce que le plugin peut faire – les options sont presque illimitées! Similayer peut sélectionner tous les éléments avec une granularité définitive. Pour cette raison, je sélectionne généralement des éléments avec Similayer avant d'exécuter l'un des trois plugins suivants.

Astuce

Pour sélectionner des éléments dans plusieurs cadres de premier niveau (par exemple, disons qu'il y a cinq modèles sur une page mais que vous souhaitez uniquement sélectionner des éléments dans Design One et Design Two), ajoutez temporairement un cadre autour de tous les cadres de niveau supérieur dans lesquels vous souhaitez sélectionner des éléments. Utilisez ensuite l'option "Limiter la sélection dans le cadre racine" pour sélectionner des éléments dans ces écrans / cadres spécifiques mais pas la page entière.

2. Content Reel

Quand l'utiliser

Utilisez Content Reel chaque fois que vous avez besoin de générer plus de deux éléments de contenu d'espace réservé. Il peut s'agir d'adresses, de numéros de téléphone, de noms, de numéros de commande, d'images de profil ou de presque n'importe quel type de chaîne de texte ou d'image.

Points forts

• Générez rapidement du contenu d'espace réservé structuré.
• Prend en charge les images et les chaînes de texte.
• ] Créez vos propres ensembles de contenu pour un usage personnel ou publiez-les publiquement.

Les détails

Si vous êtes fatigué d'inventer des noms, des avatars, des numéros de téléphone, des courriels, des titres de poste, des adresses ou tout autre type de texte pour donner à vos créations un aspect réaliste, ce plugin est fait pour vous. Content Reel insère le contenu d'espace réservé structuré des ensembles de données dans les conceptions. Un excellent cas d'utilisation de ce plugin est de remplir des tableaux avec un contenu réaliste. Si vous utilisez le (555) 555-5555 vers le bas sur une colonne entière, vous la couperez lorsque vous serez pressé, mais ne semble pas très réaliste . En plus de créer des conceptions visuellement réalistes, ce plugin peut aider à tester les contraintes d'une conception en utilisant un contenu «factice» d'aspect réaliste.

Lors de la première ouverture du plugin, différents ensembles de contenu seront disponibles sur votre page «d'accueil» qui couvrira la plupart des cas d'utilisation de base. Pour des cas plus uniques ou du contenu personnalisé, essayez de rechercher dans la bibliothèque de contenu d'autres options existantes ou de créer vos propres ensembles de contenu!

À titre d'exemple pratique, j'ai récemment aidé à concevoir une application de réservation de salle de conférence. Pour ce projet, j'ai fini par créer un ensemble d'équipements (WiFi, TV, prises, cafetière, etc.) à insérer au hasard dans différentes listes de pièces.

Les ensembles d'images peuvent également être utiles pour des cas tels que les avatars. Le plugin fournit également un ensemble d'avatars par défaut qui fonctionne très bien mais j'ai fini par ajouter un ensemble personnalisé d'images plus «professionnelles» pour les avatars. ( Unsplash.com est un excellent site Web où vous pouvez trouver des photos adaptées à cet effet.)

Astuce

Lorsque vous créez votre propre ensemble de contenu dans le plugin, il existe une option pour le garder privé pour un usage personnel ou le publier directement dans le plugin pour votre équipe ou les autres utilisateurs à trouver et à utiliser plus tard.

3. Modifier le texte

Quand l'utiliser

Utilisez Modifier le texte chaque fois que vous devez rechercher et remplacer un mot à plusieurs endroits ou mettre à jour plusieurs calques de texte simultanément.

Surlignages

• Trouvez et remplacez facilement le texte existant à partir du texte actuel selection.
• Utilisez $ & pour insérer le texte actuel comme l'outil de changement de nom par lots natif Figma.
• Le plug-in ne met à jour que les calques de texte sélectionnés (à la fois un pour et contre, selon le cas d'utilisation).

Les détails

Ce plugin corrige une faute de frappe typo copiée / collée 25 fois en une tâche de 5 secondes. Il est similaire à l’outil de changement de nom par lots natif de Figma mais pour le texte! Vous pouvez trouver et remplacer des mots ou des chaînes de texte simultanément dans plusieurs couches de texte.

J'adore ce plugin pour le travail client. C'est un moyen rapide et complet de trouver et de remplacer le nom d'une entreprise dans tous les modèles existants ou de changer partout une étiquette de bouton qui dit «Créer» avec une étiquette de bouton qui dit «Ajouter» basé sur la demande d'un client. Il y a tellement plus de cas où cela est utile! Plus vous avez une architecture de composants solide, moins ce plugin est nécessaire, mais nous savons tous combien il est difficile de créer des composants dès le départ.

Astuce

Tout d'abord, utilisez Similayer pour sélectionner rapidement toutes les couches de texte que vous vouloir changer. Ensuite, utilisez Modifier le texte pour modifier le texte. Si les caractères de texte dans tous les calques cibles sont tous identiques (par exemple, tous sont «typeo»), vous pouvez facilement sélectionner tous les éléments en utilisant l'option «Caractères de texte» dans Similayer.

4. Lorem Ipsum

Quand l'utiliser

Utilisez Lorem ipsum chaque fois que vous avez besoin d'un texte factice. Que vous ayez besoin d'un texte d'espace réservé rapide de 10 minutes ou que vous attendiez qu'un client termine la copie finale, le texte lorem ipsum est toujours pratique.

Faits saillants

• Générez plusieurs zones de texte en même temps.
• Le contenu ne fonctionne pas. "Lorem ipsum" ne doit pas commencer et générera un contenu unique pour chaque instance.
• La génération automatique remplit parfaitement une zone de texte en fonction de sa taille.

Les détails

Lorem ipsum est l'un de ces plugins pas si flashy mais vraiment vitaux. Je pense que chaque designer peut probablement lire le latin de nos jours sans s'en rendre compte! Le but de ce plugin est de vous faire gagner du temps en n'ayant pas à écrire du contenu d'espace réservé «réel». Raison de plus pour ne passer que quelques secondes à générer le texte factice.

Il existe de nombreux plugins Figma spécifiquement pour générer du contenu factice avec différents paramètres. Si vous n’utilisez pas celui-ci spécifiquement, assurez-vous de saisir l’une des autres options 5+ (recherchez simplement «lorem ipsum). Avec ce plugin, @Dave a trouvé l'équilibre parfait entre flexibilité et simplicité avec la possibilité de choisir rapidement le nombre de mots, phrases ou paragraphes à générer. La possibilité supplémentaire de remplir automatiquement une couche de texte avec l'ajustement parfait du contenu distingue ce plugin. Surtout lorsque vous travaillez avec des composants de mise en page automatique qui seront redimensionnés en fonction du contenu (lorsque vous ne le souhaitez pas nécessairement).

Conseil

Utilisez l'option de génération automatique pour remplir parfaitement n'importe quel calque de texte avec le texte factice lorsque vous ne veut pas que les calques soient redimensionnés. Pour un texte factice plus abstrait, essayez d'utiliser une famille de polices comme Expurgée ( télécharger ) en combinaison avec le plugin Lorem ipsum.

5. Design System Organizer

Quand l'utiliser

Utilisez Design System Organizer si vous créez une nouvelle bibliothèque de composants! Cela peut également être utile pour personnaliser les bibliothèques de composants copiés ou dans des fichiers contenant un grand nombre de styles ou de composants locaux.

Points forts

• Renommer, supprimer, réorganiser les composants en bloc.
• Fonctionne avec tous les styles (texte, couleur , fill, effect, grid).
• Les noms de style avec plusieurs / sont triés dans des sous-dossiers dans le plugin.

Les détails

C'est l'un de ces plugins que je n'utilise pas tous les jours (vous ne l'utiliserez probablement pas non plus) mais c'est quand même un gain de temps si énorme que il doit être inclus dans la liste. Selon la tâche ou le fichier, ce plugin peut économiser des heures qui seraient autrement passées à renommer et à organiser. Si vous travaillez souvent avec des clients ou de nouveaux systèmes de conception, ce plugin vous aidera à rester organisé. Le plugin coûte 2,99 $ pour une licence à vie (mais il y a un essai gratuit de 30 jours pour chaque fichier dans lequel le plugin est utilisé). Même si vous ne configurez un système de conception qu'une seule fois, le coût en vaut la peine, car le plugin vous aidera à réorganiser et à nettoyer les choses au fur et à mesure.

Une grande utilisation de Design System Organizer est de nettoyer ou de renommer des composants dans une bibliothèque que vous avez clonée à partir de la Figma Community . La plupart des fichiers de la communauté sont déjà bien organisés et faciles à utiliser prêts à l'emploi. Parfois, si vous êtes comme moi, il peut être plus difficile de comprendre comment les nouveaux composants sont nommés que de simplement les renommer et les recatégoriser dans une méthode que vous connaissez déjà.

Conseil

plugin à utiliser si vous avez juste besoin de supprimer des styles en vrac. Contrairement aux composants, Figma n'autorise pas la sélection multiple de styles, de sorte que la suppression de plusieurs styles prend du temps. Utilisez ce plugin pour sélectionner et supprimer plusieurs styles d'un fichier.

6. Bonus: Raccourcis de plugin

Peu importe les plugins que vous utilisez ou la fréquence à laquelle vous les utilisez, ouvrir un plugin peut être fastidieux. Beaucoup de clics droits, de menus déroulants imbriqués, non merci. Voici quelques raccourcis pour ouvrir les plugins Figma.

Ouvrir un plugin rapidement

Utilisez Cmd + / (ou Ctrl + / sous Windows) pour ouvrir le menu Recherche . Recherchez rapidement un plugin par nom et ouvrez-le avec Entrez .

Ouvrez un plugin encore plus rapidement

Utilisez Cmd + Opt + P (ou Ctrl + Alt + P sous Windows) pour rouvrir le dernier plugin utilisé. C'est particulièrement bien si vous utilisez souvent le même plugin (pour moi, ce raccourci ouvrira presque toujours Similayer).

Ouvrir un plugin le plus rapide

Sur un Mac, il est facile de créer des raccourcis clavier personnalisés pour le (s) plugin (s) Figma que vous utilisez quotidiennement.

Note : Il existe probablement un programme pour Windows qui vous permettra de réaliser quelque chose de similaire, mais comme je suis un utilisateur Mac, je ne pourrai pas vous aider.

La méthode suivante peut également être utilisée pour tout élément de menu que vous utilisez régulièrement ou pour des éléments de menu avec des raccourcis existants difficiles à mémoriser. Voici comment procéder:

1. Accédez à Préférences système → Clavier → Raccourcis → Raccourcis d'application.
2. Cliquez sur le «+» en bas à gauche de la liste pour créer un nouveau raccourci.
3. Sélectionnez Figma dans les applications dropdown.
4. Ajoutez le nom du plugin ou de l'élément de menu exactement tel qu'il apparaît dans Figma (par exemple Similayer).
5. Créez un raccourci clavier et cliquez sur "Ajouter".
6. Exécutez le plugin dans Figma avec votre raccourci personnalisé !

Conclusion

Figma a récemment ajouté des fonctionnalités natives étonnantes pour rendre les actions répétitives moins répétitives. Lors de l'événement Config Europe ils ont annoncé la sortie de plus de fonctionnalités en 2020 qui permettront aux concepteurs d'économiser des efforts considérables, mais les plugins comblent toujours le vide où les fonctionnalités natives sont insuffisantes. Il existe d'innombrables plugins utiles et amusants disponibles dans la communauté Figma! Si vous passez un peu de temps à apprendre à utiliser ces cinq (et tout autre plug-in lié au flux de travail), votre productivité Figma en bénéficiera.

Assurez-vous de parcourir également les Fichiers communautaires Figma si vous pas déjà! Il y a chaque jour de nouvelles ressources pour lancer votre prochain projet, améliorer les processus ou être inspiré par.

Jusqu'à la prochaine fois, retrouvez-moi dans la communauté Figma .

Bonne conception!

(mb, ra, yk, il)