Catégories
Astuces et Design

15+ plugins Figma pour vous aider à mieux concevoir – SitePoint

Figma, le deuxième outil le plus utilisé pour concevoir des interfaces utilisateur (et le première 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, même Adobe XD a expédié sa propre version de la fonctionnalité multijoueur de Figma (la nommant «coédit»).

Cependant, le sujet brûlant de Figma en ce moment est la sortie de 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 œil à certains des meilleurs plugins Figma jusque là.

1. Flèche Auto (créer des flux d'utilisateurs)

Flèche Auto

Arrow Auto ajoute une fonctionnalité d'organigramme à Figma, 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 belle), mais Arrow Auto a plus de fonctionnalités, y compris la possibilité de changer de direction de connecteur et de déplacer les objets connectés tout en gardant les connecteurs intacts.

2. Angle (utiliser des maquettes d'appareils)

Angle

L'angle vous permet d'afficher vos écrans (c'est-à-dire les plans de travail) à partir d'un certain nombre de cadres d'appareils réalistes ou à effet mat qui viennent chacun avec une variété d'options d'angle et styles d'ombre.

Impressionnant, ils sont également 100% vectoriels.

Artboard Studio n'est pas tout à fait la même chose, car il permet d'insérer tout 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. Maîtrisez (gérez les composants plus facilement)

Maître

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 fichiers Figma, 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 plus proche pixel. Un outil formidable pour les monstres obsédés et soignés!

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 changer 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 par lots plusieurs composants.

Fenêtres

Découvrez la part de marché correcte de toutes les dimensions de la fenêtre d'affichage, puis appliquez-les aux cadres. Ses insensé comme c'est utile!

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

Faire

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. Avoir une liste de changements faire? Besoin d'établir les priorités?

Si c'est le cas, 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. Bobine de contenu (insérer du contenu meilleur que lorem-ipsum)

Bobine de contenu

Content Reel insère un contenu «réel» dans votre conception. Besoin d'une adresse rapide? Ou un avatar? Pour une raison quelconque, je ne peux pas penser à un Célibataire nom quand vous en avez besoin? Content Reel a le 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.

Synchronisation Google Sheets

Que votre application dispose d'une API ou que vous souhaitiez 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.

Graphique

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

Iconifier

Toutes les polices d'icônes, juste à l'intérieur de 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 anxiogène. Les animations sont également faciles à transmettre, car elles sont basées sur les technologies Web.

14. Split Shape (faire des colonnes… et des trucs)

Forme fendue

Une méthode intéressante pour créer des colonnes, Split Shape divise, disons, un rectangle en plusieurs rectangles à partir desquels 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! 😁

Supprimer 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 accumulé Adobe Photoshop uniquement pour pouvoir supprimer des arrière-plans, vous pouvez maintenant le supprimer et Probablement libérez environ 80 milliards 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 Probablement en avoir déjà:

Plugins Figma bonus

Ces plugins Figma sont géniaux, mais vous pourriez ne pas en avoir besoin souvent (voire pas du tout). C’est bien de savoir qu’ils sont là, cependant.

Et enfin, tous les plugins Figma (au cas où vous n'en auriez tout simplement pas assez!).

Envie d'apprendre les tenants et aboutissants du développement de vos propres plugins, soit pour améliorer votre flux de travail ou le flux de travail des autres? Consultez les plugins de Figma.

Laisser un commentaire

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