Catégories
Astuces et Design

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

A 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…
Plus à propos
Abel

Il existe des centaines de plugins Figma disponibles à ce jour, mais la fonctionnalité de recherche de plugins Figma est assez basique et il peut parfois être très difficile de trouver le bon plugin pour une certaine tâche. Aujourd'hui, examinons en détail plusieurs plugins qui peuvent accélérer votre processus de conception.

Remarque: Cet article s'adresse aux concepteurs d'interfaces utilisateur qui utilisent Figma au quotidien.

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 tente de mettre en évidence les plugins les plus utiles que j'utilise souvent pour rendre mon processus de conception plus rapide et plus fluide.

Trouver les plugins Figma

Le temps que nous, en tant que concepteurs d'interfaces, passons à cliquer, sélectionner, renommer, déplacer, mettre à jour et peaufiner nos conceptions en 2020 est surprenant (et souvent frustrant). C'est une partie inévitable de notre travail, même avec toute la conception d'IA générant de la magie disponible aujourd'hui. Cependant, les minutes ou les 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 est la vie, mais…).

Entrez les 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 certaines 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 listés ci-dessous est ce que vous recherchez, ou peut-être ce que vous ne saviez pas que vous recherchez mais dont vous avez toujours désespérément besoin! ("Il n'y a rien de tel que de chercher, si vous voulez trouver quelque chose. Vous trouvez certainement quelque chose, si vous regardez, mais ce n'est pas toujours tout à fait ce que vous recherchiez.")

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 masse.
  • Organiser les composants et les éléments en masse.
  • Changer les éléments et les styles en masse.

Alors sans plus tarder, plongeons-nous dans les cinq plugins que j'utilise chaque jour (et quelques raccourcis clavier bonus en fin d'article).

Cinq plugins pour vous aider à améliorer votre flux de travail

  1. Similayer
  2. Reel de contenu
  3. Modifier le texte
  4. Lorem ipsum
  5. Organisateur de système de conception
  6. Bonus: raccourcis de 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.).

Points forts

  • 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.
Interface utilisateur du plugin Similayer
Sélectionnez plusieurs éléments avec Similayer. (Grand aperçu)

Les détails

Sélection de plusieurs éléments tout en maintenant Décalage 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 lors de l'utilisation Décalage et le curseur de la souris. 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:

  • Sélectionnez toutes les instances d'un composant dans un cadre;
  • Sélectionnez tout le texte avec un style spécifique (poids, famille, taille) dans un cadre;
  • Sélectionnez tous les calques portant le même nom sur une page.
Exemple de sélection de toutes les instances d'un composant dans un cadre avec Similayer
Sélectionnez toutes les instances d'un composant dans un cadre avec Similayer. (Grand aperçu)
Exemple de sélection de tout le texte avec un style spécifique (poids, famille, taille) dans un cadre avec Similayer
Sélectionnez tout le texte avec un style spécifique (épaisseur, famille, taille) dans un cadre avec Similayer. (Grand aperçu)
Exemple de sélection de tous les calques portant le même nom sur une page
Sélectionnez tous les calques portant le même nom sur une page. (Grand aperçu)

Ce 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.

Pointe

À sélectionner des éléments dans plusieurs cadres de niveau supérieur (par exemple, disons qu'il y a cinq modèles sur une page mais que vous ne voulez sélectionner que 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. Ensuite, utilisez l'option "Limiter sélection dans le cadre racine »pour sélectionner des éléments dans ces écrans / cadres spécifiques, mais pas sur la page entière.

Exemple de sélection d'éléments dans plusieurs cadres racine avec Similayer
Sélectionnez des éléments dans plusieurs cadres racine avec Similayer. (Grand aperçu)

2. Reel de contenu

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.
Interface utilisateur du plugin Content Reel
Générez rapidement du texte et des images d'espace réservé pour les conceptions avec Content Reel. (Grand aperçu)

Les détails

Si vous êtes fatigué de créer des noms, des avatars, des numéros de téléphone, des e-mails, des titres de poste, des adresses ou tout autre type de texte pour rendre vos conceptions réalistes, ce plugin est 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 cela n’a pas l'air 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.

Lorsque vous ouvrez le plugin pour la première fois, différents ensembles de contenus 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 plus d'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 salles 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 chambres.

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.)

Exemple de création de contenu personnalisé dans Content Reel.
Créez du contenu personnalisé dans Content Reel. (Grand aperçu)

Pointe

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 que votre équipe ou d'autres utilisateurs les trouvent et les utilisent plus tard.

3. Modifier le texte

Quand l'utiliser

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

Points forts

  • Trouvez et remplacez facilement le texte existant de la sélection actuelle.
  • Utilisez $ & pour insérer le texte actuel comme l'outil de changement de nom par lots natif Figma.
  • Le plugin ne met à jour que les calques de texte sélectionnés (à la fois un avantage et un inconvénient, selon le cas d'utilisation).
Changer l'interface utilisateur du plugin de texte
Recherchez et remplacez le texte par Modifier le texte. (Grand aperçu)

Les détails

Ce plugin permet de réparer un typeo faute de frappe qui a été copiée / collée 25 fois dans 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 rechercher et remplacer des mots ou des chaînes de texte dans plusieurs calques de texte simultanément.

J'adore ce plugin pour le travail client. Il s'agit d'un moyen rapide et complet de rechercher et de remplacer le nom d'une entreprise dans toutes les conceptions existantes ou de modifier partout une étiquette de bouton indiquant "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 à quel point il est difficile de créer des composants dès le départ.

Pointe

Tout d'abord, utilisez Similayer pour sélectionner rapidement tous les calques de texte que vous souhaitez modifier. 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.

Points forts

  • Générez plusieurs zones de texte en même temps.
  • Le contenu ne doit pas nécessairement commencer par «Lorem ipsum» 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.
Interface utilisateur du plugin Lorem ipsum
Générez du texte d'espace réservé avec Lorem ipsum. (Grand aperçu)

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 5 autres options (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, de phrases ou de 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).

Pointe

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

Exemple de texte généré par une police expurgée
Utilisez la police caviardée sur le texte généré pour une approche plus abstraite du contenu d'espace réservé. (Grand aperçu)

5. Organisateur du système de conception

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

  • Renommez, supprimez, réorganisez les composants en masse.
  • Fonctionne avec tous les styles (texte, couleur, remplissage, effet, grille).
  • Les noms de style avec plusieurs / sont triés dans des sous-dossiers dans le plugin.
Interface utilisateur de Design System Organizer
Organisez les composants et les styles en vrac avec Design System Organizer. (Grand aperçu)

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 tellement énorme qu'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 utilité de Design System Organizer est de nettoyer ou de renommer des composants dans une bibliothèque que vous avez clonée à partir de la communauté Figma. 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à.

Pointe

C'est un excellent 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 des plugins

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

Ouvrez rapidement un plugin

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

Ouvrez un plugin encore plus rapidement

Utilisation 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).

Raccourcis pour ouvrir les plugins.
Utilisez les raccourcis clavier pour ouvrir rapidement les plugins. (Grand aperçu)

Ouvrez un plugin le plus rapide

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

Remarque: 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 la liste déroulante Applications.
  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é!
Exemple de raccourci clavier personnalisé pour un plugin Figma.
Créez des raccourcis clavier personnalisés pour les plugins Figma. (Grand aperçu)

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 nouvelles fonctionnalités en 2020, ce qui permettra aux concepteurs d'économiser des efforts importants, 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 investissez un peu de temps pour apprendre à utiliser ces cinq extensions (et tout autre plug-in lié au flux de travail), votre productivité Figma en bénéficiera.

Assurez-vous de parcourir également les fichiers de la communauté Figma si vous ne l'avez pas déjà fait! Il existe chaque jour de nouvelles ressources pour démarrer votre prochain projet, améliorer les processus ou vous inspirer.

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

Bonne conception!

Éditorial fracassant(mb, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *