Fermer

avril 23, 2020

15+ plugins Figma pour vous aider à mieux concevoir –6 minutes de lecture



Figma le deuxième outil le plus utilisé pour concevoir des interfaces utilisateur (et le premier premier outil le plus utilisé pour ne compter que le système d'exploitation Windows), a vraiment pris d'assaut l'industrie du design numérique ces derniers temps, avec même Adobe XD expédiant leur propre version de la fonctionnalité multijoueur de Figma (la nommant "coéditing").

Cependant, le sujet brûlant de Figma en ce moment est la sortie des plugins – extensions que les utilisateurs Figma peuvent installer sur Figma pour permettre des fonctionnalités supplémentaires ou pour améliorer leur flux de travail de conception.

Jetons un coup d'œil à certains des meilleurs plugins Figma à ce jour.

1. Arrow Auto (créer des flux utilisateur)

 Arrow Auto

Arrow Auto ajoute des fonctionnalités de diagramme à Figma, ce qui est utile pour créer des cartes de flux utilisateur. Sélectionnez deux objets sur le canevas et Arrow Auto vous permettra de dessiner un connecteur entre eux. Vous pouvez également masquer et afficher les flux à la demande.

Autoflow est une alternative décente (et peut-être plus jolie), mais Arrow Auto a plus de fonctionnalités, y compris la possibilité de changer de direction de connecteur et également de se connecter. objets autour tout en gardant les connecteurs intacts.

2. Angle (utiliser des maquettes d'appareils)

 Angle

Angle vous permet d'afficher vos écrans (c'est-à-dire des plans de travail) à partir d'un certain nombre de cadres d'appareils réalistes ou à effet mat qui sont chacun livrés avec un variété d'options d'angles et styles d'ombre.

Impressionnant, ils sont également 100% vectoriels.

Artboard Studio n'est pas tout à fait la même chose, car cela permet pour insérer un tas d'objets 3D aléatoires sur la toile (comme un kiwi, par exemple). Si vous ne vous souciez que des maquettes d'appareils, j'installe Angle. Vectory 3D est similaire à Artboard Studio, mais il génère des ressources 3D réelles.

3. Master (gérer plus facilement les composants)

 Master

Master offre une meilleure façon de gérer les composants, comme la possibilité de transformer plusieurs objets identiques en un composant, de dupliquer des composants dans d'autres Figma fichiers et bien plus encore.

 Nettoyer le document

Nettoyer le document, eh bien… nettoie votre document! Il supprime les calques masqués, les trie intelligemment, les renomme selon vos goûts, dissocie les groupes monocouches et arrondit même les dimensions au pixel le plus proche. Un outil formidable pour les monstres obsédés et nets!

 Similayer

Tout simplement, Similayer vous permet de sélectionner des calques en fonction de leur similitude avec le calque actuellement sélectionné. Supposons que vous vouliez modifier un style d'ombre utilisé sur un certain nombre d'éléments différents: Similayer pourrait le faire.

Vous pouvez également l'utiliser pour réaffecter plusieurs composants par lots.

 Fenêtres

Découvrez la part de marché correcte de toutes les dimensions de la fenêtre d'affichage, puis appliquez-les aux cadres. C'est fou à quel point c'est utile!

Les données de la fenêtre d'affichage proviennent de StatCounter.

 Todo

Il existe des dizaines de listes de tâches formidables, mais celle-ci existe au sein de Figma. Il n'est pas conçu pour remplacer votre liste de tâches quotidiennes, mais c'est un moyen plus pratique de garder une trace de vos tâches spécifiques à la conception sans avoir à quitter Figma. Vous avez une liste de modifications à apporter? Besoin d'établir des priorités ?

Si oui, installez Todo.

 Échelle de police

Établissez une échelle de police visuellement cohérente / hiérarchique en choisissant une taille de base et un facteur d'échelle, puis enregistrez les résultats dans votre document pour référence continue (comme em ou px ).

9. Content Reel (insérez un contenu meilleur que lorem-ipsum)

 Content Reel

Content Reel insère un contenu «réel» dans votre conception. Besoin d'une adresse rapide? Ou un avatar? Pour une raison quelconque, vous ne pouvez pas penser à un nom unique lorsque vous en avez besoin? Content Reel a votre dos.

La conception avec des données réelles garantit que la conception ne semble pas étrange une fois développée, et nous aide également à concevoir des cas de bord.

 Google Sheets Sync

Que votre application dispose d'une API ou si vous souhaitez simplement créer une table de données manuellement, Google Sheets Sync vous permettra essentiellement de synchroniser ces données directement dans Figma. C'est comme Content Reel, mais vous définissez plutôt les données vous-même. Il est utile pour les concepteurs qui souhaitent créer des maquettes ultra-réalistes avec des données de leur niche réelle (ou application en direct), et il est particulièrement utile pour les équipes qui souhaitent concevoir en utilisant la même bibliothèque de données.

 Chart [19659003] Créez de superbes graphiques personnalisables avec des données provenant d'Excel, de Numbers, de Google Sheets ou importez simplement un fichier CSV ou JSON local. Datavizer est une alternative appropriée, mais Chart peut également se synchroniser avec JSON en direct (c'est-à-dire que vous pouvez connecter Chart à une API REST).

 Iconify

Toutes les polices d'icônes, directement dans Figma. Icônes de conception matérielle, FontAwesome, Icônes de confiture, EmojiOne, Emoji Twitter – vous l'appelez.

Assez emblématique, vraiment.

 Figmotion

Si l'idée d'explorer l'animation vous fait peur ou si vous redoutez les outils de commutation pour accéder aux fonctionnalités d'animation avancées, Figmotion rend l'animation beaucoup moins inductrice d'anxiété. Les animations sont également faciles à transmettre, car elles sont basées sur les technologies Web.

14. Split Shape (faire des colonnes… et d'autres choses)

 Split Shape

Une méthode intéressante pour créer des colonnes, Split Shape divise, disons, un rectangle en plusieurs rectangles à partir de laquelle vous pouvez ensuite créer des colonnes (ou des lignes, ou autre). Split Shape peut être utilisé pour diverses choses si l'on pense en dehors de la boîte! 1965

 Remove BG

Remove BG est un outil Web qui supprime l'arrière-plan des images bitmap, les transformant efficacement en PNG transparents. Supprimer BG pour Figma fait essentiellement la même chose, mais dans Figma.

Si vous avez thésaurisé Adobe Photoshop uniquement pour pouvoir supprimer des arrière-plans, vous pouvez maintenant le supprimer et probablement libérer environ 80 mille millions de Go d'espace sur votre SSD ?.

Plugins Figma populaires

Il y a quelques plugins Figma que je n'ai pas mentionnés car ils sont déjà très bien connus des utilisateurs d'autres outils de conception d'interface utilisateur tels que Sketch . Vous avez probablement ceux-ci déjà:

Plugins Figma bonus

Ces plugins Figma sont géniaux, mais vous n'en aurez peut-être pas souvent besoin (voire pas du tout). C'est agréable de savoir qu'ils sont là, cependant.

Et enfin, tous les plugins Figma (au cas où vous ne pourriez pas en avoir assez! ?).

Désireux d'apprendre le les tenants et aboutissants du développement de vos propres plugins, que ce soit pour améliorer votre workflow ou le workflow des autres? Consultez la documentation des plugins de Figma .




Source link

0 Partages