Plugins et outils Figma utiles

Il existe littéralement des milliers de plugins Figma là-bas. Lesquelles utilisez-vous ? A quelle fréquence les utilisez-vous ? Nous avons recherché certains des utileset nous espérons que ceux énumérés ci-dessous vous aideront à améliorer votre flux de travail. Que vous débutiez avec Figma ou que vous l'utilisiez depuis un bon moment maintenant, cet article vous donnera juste assez d'indications pour rendre votre processus de conception plus rapide et plus fluide.

Table des matières[

19659004] Ci-dessous, vous trouverez des sauts rapides vers des plugins et des guides spécifiques dont vous pourriez avoir besoin. Faites défiler vers le bas pour un aperçu général ou ignorez la table des matières. Jetez également un œil aux autres

Vues et perspectives 3D dans Figma

Vectary 3D Elements rend tout un peu plus spatial. C'est l'un des moyens les plus simples d'ajouter des maquettes 3D à vos conceptions, ainsi que d'ajouter des calques, des habillages et des transformations. Vous pouvez placer votre conception Figma dans une maquette 3D préférée ou créer votre élément 3D personnalisé. Vous pouvez regarder de plus près le guide détaillé et la vidéo sur le plugin pour commencer.

En outre, Figmockups et Clay Mockups 3D incluent un plus grand référentiel de maquettes 3D, et Fig3D convertit les objets en modèles 3D, et vous pouvez même regroupez les formes et déplacez-les ensemble vers des modèles 3D.

Accessibilité dans Figma

Nous voulons tous concevoir des expériences meilleures et inclusives, mais parfois nous oublions peut-être le bon contraste de couleur ou un ordre de tabulation approprié. Heureusement, il existe de nombreux Plugins Figma pour l'accessibilité.

Stark est une centrale complète pour tout ce qui concerne l'accessibilité. Il comprend la vérification du contraste et des simulateurs de vision, et il vous permet également de réorganiser vos séquences dans l'ordre de mise au point. Il affiche également le rapport de contraste pour les deux objets que vous sélectionnez. Alternativement, vous pouvez également utiliser Contrast.

Pour des palettes de couleurs accessibles, Geenes.app est un outil fiable et sophistiqué qui vous permet de créer, maintenir, synchroniser et tester des palettes de couleurs et leurs variations. Il est vraiment difficile d'imaginer une configuration Figma sans ce plugin installé!

Si vous devez tester l'impact d'une taille de police différente sur votre mise en page, Text Resizer vous aide à voir ce qui se passe exactement avec l'augmentation ou la diminution des tailles de police.

Éditeur d'animation dans Figma

Cela ne devrait pas être une grande révélation que la création d'animations dans Figma ne nécessite pas vraiment d'outils externes sophistiqués comme Adobe After Effects. Avec Figmotionvous disposez d'un outil d'animation avancé à portée de main. Vous sélectionnez une image, ajoutez une animation, puis parcourez la période via une poignée de temps, avec la possibilité de mettre à jour l'accélération, les images clés et les points d'ancrage.

Si vous souhaitez approfondir un peu l'animation avec Figma, un guide pour ajouter de l'animation à vos conceptions dans Figma montre l'intégralité de l'atelier et les différentes options dont vous disposez, étape par étape .

Les annotations simplifiées dans Figma

Comment gérez-vous généralement les annotations lorsque vous travaillez avec Figma ? Nous sommes tombés sur deux kits d'annotation qui rendent la communication sur une conception beaucoup plus fluide et moins sujette aux malentendus.

L'un d'eux est Annotation Kit 2.0 : A une variété de notes autocollantes et de lignes de mesure et d'outils facilitent l'ajout de contexte et d'annotations pour les membres de votre équipe pendant que vous travaillez. avec les développeurs lors de la remise d'un design. Qu'il s'agisse d'ajouter des légendes pour des éléments d'indiquer l'ordre de mise au point ou de spécifier des interactions au clavier, le kit traduit certaines des formulations souvent cryptiques des WCAG en autocollants faciles à utiliser que vous pouvez utiliser pour mettre en évidence les parties clés de la page. . Tous les composants sont pré-remplis avec les bons éléments CSS ou HTML. traiter. Redlines est là pour changer cela. Le plugin vous aide à mesurer et tracer rapidement les dimensions de tout objet sélectionné. Tout ce que vous avez à faire est de sélectionner un ou plusieurs calques, de personnaliser les paramètres de la ligne rouge et de choisir une option de ligne rouge à tracer.

Renommer automatiquement les images et les calques dans Figma

Quand il s'agit d'organiser vos fichiers de conception, Renommer vous soutient. Vous pouvez renommer par lots vos cadres et calques. Vous pouvez également renommer plusieurs calques à la fois en appliquant des filtres personnalisés. Si vous souhaitez convertir la casse du nom du calque de majuscule en minuscule ou même en casse camel, vous pouvez utiliser %* avec une combinaison de lettres à convertir.

Avatars pour les maquettes de conception dans Figma

Parfois, nous devons brancher un peu plus que de simples chaînes de texte, et peut-être avons-nous besoin de quelques options supplémentaires pour nos avatars. C'est là que UI Faces peut vous aider.

Tous les avatars sont collectés à partir de diverses sources (ils sont toujours fournis), et ils peuvent être filtrés par âge, sexe et émotion, mais bien sûr, vous devez vérifier la source et la licence avant de l'utiliser réellement. De plus, jetez un œil à Profils d'utilisateurs.

Intégration de logos de marque dans Figma

Vous aimeriez peut-être afficher certains logos de marque dans des critiques ou des témoignages, alors comment feriez-vous pour trouver tous les bon logo ? BrandFetch vous aide à insérer facilement des éléments de marque dans votre conception sans quitter votre fenêtre Figma. Le plugin dispose d'une grande bibliothèque de (littéralement) des millions de logos disponibles à portée de main. Il existe également une base de données consultable pour vous permettre de trouver ce que vous recherchez.

Incorporation de graphiques dans Figma

Votre processus de conception est devenu un peu moins stressant. Avec Chartvous pouvez facilement créer divers graphiques en utilisant des données réelles ou aléatoires. Le plugin prend en charge le copier-coller à partir d'Excel, de la feuille Google, de Numbers et peut également se synchroniser avec Google Sheets et JSON distant. Vous pouvez également importer des fichiers CSV et JSON.

Un autre plugin avec un titre similaire mais légèrement différent est le Plugin Charts Figma. Avec lui, vous pouvez créer des tableaux de bord et des présentations ou à peu près tout autre type de visualisation de données. Le plugin génère des graphiques modifiables dans votre conception Figma, des graphiques à barres simples aux cartes thermiques plus complexes. Vous pouvez également trouver un guide détaillé sur l'utilisation du plugin.

Nettoyer un cadre en désordre dans Figma

Vous avez peut-être laissé tomber quelques dizaines d'icônes dans un cadre, alors comment les organiseriez-vous dans un ordre raisonnable ? Évidemment, nous ne ferions pas une telle tâche manuellement. C'est là que LilGrid peut vous aider.

Le petit assistant prend des éléments et les organise automatiquement dans une grille. Il vous suffit de sélectionner ce que vous souhaitez organiser, d'appuyer sur "Organiser sur la grille" et l'outil s'occupe du reste, en réorganisant uniquement les éléments de haut niveau sur votre page. De toute évidence, il y a une annulation en une étape si vous devez restaurer l'état initial. le plugin Clean Document s'occupe de petits défauts comme ceux-ci afin que vous n'ayez pas à le faire. Une aide précieuse pour peaufiner votre projet Figma avant le transfert.

Espaces réservés de contenu dans Figma

Avec le plugin Content Reelvous pouvez concevoir des mises en page rapidement et facilement en utilisant des chaînes de texte, des images, des icônes et des avatars à partir du même outil. Vous pouvez rechercher ou parcourir l'ensemble de données déjà fourni, puis les ajouter à vos conceptions ou créer à partir de zéro.

Le plug-in vous permet également de créer vos propres chaînes de texte, de télécharger jusqu'à 20 images et de faciliter votre flux de travail et plus fluide en épinglant votre contenu fréquemment utilisé sur votre écran d'accueil.

Vous pouvez également exécuter un Générateur de noms aléatoires pour remplir des noms aléatoires dans votre maquette.

Palettes de couleurs dans Figma

Comprendre les dégradés, les palettes, la théorie des couleurs et la psychologie sont essentiels pour créer conceptions visuelles agréables. Figma propose de nombreux plugins qui vous déchargent d'une grande partie de ce travail.

Color Palette vous offre une palette de couleurs parfaite pour vos projets. Vous pouvez choisir parmi une vaste bibliothèque de palettes ou rechercher un code de couleur, un nom ou un numéro spécifique à appliquer à votre conception.

Palette de Dustin Mierau est utile lorsque vous souhaitez générer une palette de couleurs à partir d'images. Ce plugin utilise l'apprentissage automatique pour vous aider à générer une palette de couleurs qui conviendra le mieux à votre projet. Vous pouvez sélectionner jusqu'à cinq formes et le plugin vous aidera à remplir les formes avec des couleurs adaptées à votre palette.

Lors de la conception autour d'une image, il est plus facile de faire le bon choix de couleur avec le Plugin Image Palette. Il utilise n'importe quelle image que vous sélectionnez et génère une palette de couleurs à partir de celle-ci en sélectionnant les cinq couleurs les plus importantes de l'image à l'aide d'un algorithme de coupe médiane avec un niveau de précision élevé.

Avec UI Gradients et Web Gradientsvous n'avez pas besoin de créer ou de sélectionner des dégradés un par un, mais à la place, vous pouvez ajouter plusieurs dégradés aux groupes, textes et cadres en un seul clic.

Curve Your Text in Figma

Avec le Arc pluginvous pouvez courber votre texte vers le haut, vers le bas ou même en cercle. Le plugin ajoute une barre d'outils supplémentaire pour contrôler la flexion – c'est une autre question de savoir comment les développeurs l'implémenteraient.

Design Tokens in Figma

Un autre plugin Figma que vous voudrez peut-être ajouter à votre boîte à outils vient de Lukas Oppermann. Si vous en avez assez des tracas que le travail avec des jetons de conception entraîne généralement, le plugin Design Token fait le travail pour vous : les styles et les jetons sont exportés et envoyés vers un référentiel GitHub et les jetons sont automatiquement convertis à l'aide dictionnaire de styles. Pas besoin de quitter Figma. Un vrai gain de temps.

Systèmes de conception avec Figma

Imaginez que vous modifiez le système de conception de votre projet et qu'il se répercute immédiatement dans votre projet Figma. Le plugin Design System Manager pour Figma le permet.

Le plugin vous permet de définir ou de mettre à jour des jetons de conception thématiques en un seul panneau, gérez les calques sélectionnés regroupés par style et remplissez une conception avec du texte réel ou du contenu d'image. Pour donner vie à votre projet, vous pouvez accéder par programmation aux jetons de conception à partir de l'API GraphQL ou les exporter au format de votre choix (CSS, Less, Sass, JSON, YAML, Js, Swift et Android sont pris en charge). Une solution intelligente qui rend la gestion des systèmes de conception beaucoup plus pratique.

Maquettes d'appareils dans Figma

La qualité de votre présentation en tant que concepteur est presque aussi importante que la conception elle-même. Avec plus de 700 scènes de maquettes d'appareils, Mockuuups Studio vous aide à créer facilement et efficacement des maquettes de produits, de contenu visuel ou de supports marketing. Vous pouvez regarder une vidéo détaillée sur son utilisation.

En général, les maquettes ne sont plus belles que lorsqu'un appareil est affiché dans la main d'un humain, et c'est là que le Générateur de maquettes pour toutes les mains peut vous aider. Il comprend une collection large et diversifiée de mains de toutes les nuances, formes et tailles. Sélectionnez un cadre, choisissez une main et vos conceptions seront importées dans la maquette, le tout dans Figma. Vous pouvez également consulter la collection complète de mains.

Exportation de Figma vers HTML, CSS, React

HTML <> Figma vous permet d'exporter vos conceptions Figma vers un prototype HTML. Vous pouvez sélectionner des calques individuels ou entrer une URL que vous souhaitez importer, et le plugin importera immédiatement les styles réels. Il existe également une extension Chrome qui capture une page Web et l'importe en tant que couches Figma modifiables. En arrière-plan, il génère un fichier page.builder.json qui contient toutes les propriétés CSS de la page actuelle.

Il existe cependant certaines limitations, car tous les types d'éléments et les propriétés CSS ne sont pas pris en charge. En outre, il convient de garder à l'esprit que toutes les polices doivent être téléchargées sur Figma ou que des polices de secours seront utilisées. Néanmoins, le plug-in est open-source, est entouré d'une grande communauté et les créateurs le maintiennent activement.

Alternativement, il existe également un HTML Generator qui prend en charge les polices Google, a des options d'exportation dédiées. et génère du HTML, du CSS, des éléments d'image et du code SCSS et Figma To HTML. Et si vous avez besoin de quelque chose de plus sophistiqué, Anima crée des prototypes et les convertit en code HTML, CSS et React — sans aucune dépendance. En fait, vous pouvez créer des prototypes interactifs, des conceptions réactives et des composants React réutilisables prêts à l'emploi. (Le plugin a un niveau gratuit, mais vous devrez vous inscrire au niveau $31 pour exporter le code).

Exporting Figma to Vue.js

Si vous souhaitez supprimer une partie des frictions que peut entraîner la transformation d'un prototype Figma en une application fonctionnelle apportez, le plugin open source de Klaus Schaefer Figma-Low-Code est fait pour vous. Il vous permet d'utiliser les conceptions Figma directement dans les applications Vue.js.

Cette approche low-code ne fait pas seulement réduire la main- off time entre les concepteurs et les développeurs ainsi que la quantité de code frontal, mais garantit également que la conception Figma reste la source unique de vérité. L'idée est que vous concevez le prototype dans Figma, puis utilisez le plugin pour ajouter des données et une liaison de méthode. Une fois cela fait, vous pouvez utiliser votre éditeur de code préféré pour implémenter la logique métier, et — ta-daa ! — votre application est prête à être déployée. Les modifications que vous apportez au fichier Figma sont automatiquement propagées à l'application Web. petits plugins pour rendre le travail du développeur un peu plus facile. En fait, il existe un guide détaillé sur la conception d'e-mails dans Figma qui couvre l'ensemble du flux de travail d'expédition de toutes nouvelles conceptions d'e-mails à partir de zéro. du début à la fin – un guide complet pour concevoir des e-mails avec Figma.

Si vous recherchez des e-mails HTML réactifs et prêts pour la production pour Figma, Emailify vous fournira des dizaines de modules de contenu configurables, vous permettant de personnaliser votre texte, vos images, vos styles et les paramètres de mise en page automatique entre autres fonctionnalités, sans autres API, applications ou sites Web requis.

Si vous n'avez pas peur de l'idée que le code de courrier électronique HTML soit généré pour vous, Modèles et code de courrier électronique fonctionne avec le plugin Marka pour produire du code HTML. Vous pouvez avoir des e-mails personnalisables avec des designs pour les newsletters, les e-mails marketing et les modèles de style blog. En outre, il existe également de nombreuses conceptions personnalisables. directement dans la conception sur laquelle vous travaillez actuellement. Cependant, si vous gardez à l'esprit la structure des fichiers dès le début, vous pouvez vous assurer que le transfert se fera en douceur. Et vous vous épargnerez beaucoup de travail de nettoyage une fois la date limite proche. Luis Ouriach a publié un guide des meilleures pratiques pour structurer vos cadres dans Figma — avec des conventions de dénomination cohérentes, des composants descriptifs et un espacement cohérent.

Prévisualisation des polices dans Figma

La commutation manuelle entre les polices peut être un peu fatigante, il existe donc évidemment des assistants Figma pour cela. Meilleur sélecteur de polices et Prévisualisation des polices vous aident à sélectionner les polices avec un aperçu.

Appariements de polices Google pour Figma

Si vous utilisez des polices Google, Appariements de polices Google peut également être utile. Vous pouvez commencer sur la page des polices Google de Figma. Chacune des polices est livrée avec un petit spécimen de type pour obtenir un aperçu décent du style et de la convivialité des polices utilisées. .

Icônes intégrées dans Figma

Avoir une large collection de toutes les icônes possibles en un seul endroit est sans doute l'une des meilleures idées de plugins de tous les temps. Figma a des plugins qui contiennent des jeux d'icônes dans plusieurs styles pour tout type de projet de conception.

Icons8 vous fournit une grande collection d'icônes cohérentes sans avoir à quitter votre tableau Figma. Il possède une bibliothèque de plus de 120 000 icônes avec plus de 32 styles de conception populaires, une collection consultable et classée, toutes disponibles en PNG ou SVG.

Iconscout vous permet d'insérer des millions d'icônes, d'illustrations et de 3D de haute qualité dans Figma. En mode designer, vous pouvez choisir votre designer et photographe préféré et accéder directement à leurs ressources sans rechercher dans toute la bibliothèque.

Imbrication d'illustrations dans Figma

Illustrez avec un logiciel vectoriel, puis importez-le dans votre conception, n'est-ce pas ? Vous n'êtes pas obligé de le faire tout le temps car Figma est livré avec de nombreux plugins d'illustration.

Avec Blushvous pouvez créer ou mixer et assortir des illustrations personnalisées pour tes projets. Vous pouvez également générer des compositions aléatoires ; De plus, de nouvelles illustrations sont ajoutées chaque semaine. Les SVG et les images haute résolution sont disponibles avec un forfait payant.

Pour de belles icônes et illustrations, regardez de plus près la Bibliothèque d'illustrations populaires gratuitesqui comprend des illustrations gratuites de haute qualité publiées sous une licence Creative Commons.

Si vous souhaitez ajouter une illustration humaine à votre site Web, Humaaans vous propose des illustrations déjà prédéfinies de personnes branchées et branchées. Vous pouvez parcourir une galerie ou rechercher une niche ou une catégorie spécifique.

En outre, vous pouvez utiliser Storyset avec des centaines de concepts illustrés disponibles sous forme d'illustrations prêtes à l'emploi. Vous pouvez également modifier les styles, les couleurs et l'arrière-plan. De plus, vous pouvez également animer les illustrations.

Copier-coller et synchroniser des feuilles Google dans Figma

Très souvent, copier-coller des données de Google Docs dans Figma prend beaucoup de temps et est frustrant. Google Sheet est un plugin pratique qui accélère l'importation de vos feuilles Google vers Figma. Une fois que vous l'avez installé, vous pouvez récupérer et synchroniser les données de vos feuilles de calcul Google. Il existe également une documentation avec tous les détails sur la façon de configurer une structure de feuille appropriée et sur la façon dont les couches Figma doivent être nommées pour éviter un travail supplémentaire – ainsi que quelques exemples pour vous aider à démarrer.[19659158]Google Sheet »/>

Composants interactifs et variantes dans Figma

Il y a quelques semaines, Figma a lancé une version bêta de sa fonctionnalité Composants interactifs qui vous permet de créer des éléments interactifs qui basculent automatiquement entre les variantes (un bouton changeant de passer sur un état enfoncé, par exemple). Ce qui peut sembler être un petit détail, s'avère réduire considérablement la quantité de cadres et de connexions dont vous avez généralement besoin pour prototyper des champs de saisie tels que des cases à cocher ou des bascules.

Pour plonger plus profondément dans le nouvelle fonctionnalité, Steve Ruiz a résumé de quoi il est capable et ce qui peut être réalisé avec si vous sortez des sentiers battus (un jeu de démineur ou de cuirassé fonctionnant sous Figma, ça vous tente ?). Autre lecture intéressante : Rodrigo Osornio a exploré les avantages et les possibilités qu'apporte Interactive Components pour les micro-interactions telles que les champs de saisie, les chargeurs, différents types de boutons, les listes déroulantes et les composants d'abonnement.[19659030]En parlant de composants : Luke Cardoni montre comment il a réussi à créer un composant unique, adaptable au contenu, entièrement personnalisable et facilement maintenable avec 3 360 variantes qui sert toutes les combinaisons possibles de paramètres pour la saisie de texte. Un projet gigantesque qui illustre les avantages de la fonctionnalité Variantes de Figma.

Layout Grid in Figma

Nous nous appuyons souvent sur des grilles pour créer des systèmes de conception où chaque composant d'interface est correctement aligné. Il ne faut donc pas s'étonner qu'il n'y ait pas de pénurie de plugins de grille de mise en page pour Figma. Grills Generator vous permet d'appliquer une famille de diverses configurations de style de grille aux mises en page. Guide Mate est légèrement plus flexible : il fournit des raccourcis pour les grilles couramment utilisées et un moyen d'ajouter une grille personnalisée si vous en avez besoin.

Une fois que vous avez une grille en place, vous souhaiterez peut-être y accrocher vos composants. Aligner sur la grille crée non seulement une grille personnalisée, mais organise également les éléments sur la grille en organisant automatiquement chaque objet. Lorsque le plugin est en cours d'exécution, les éléments du canevas s'aligneront sur la grille lors du déplacement et de la mise à l'échelle. Andreslav Koslov montre comment fonctionne ce plugin dans une vidéo de 3 minutes. Vous pouvez également utiliser les raccourcis clavier Alt + Cmd + P pour aligner tous les objets sur la grille lorsque Figma est en ligne.

Incorporation de cartes dans Figma

Le téléchargement de cartes pour votre projet ne doit pas être un long processus car Mapsicle de Chris Arvin peut vous aider à insérer facilement des cartes dans vos conceptions Figma. Le plugin vous permet de définir votre carte sur un emplacement, une latitude et une longitude particuliers que vous souhaitez pour vos conceptions, et voilà, il ajoute juste le bon instantané dans votre conception.

Cependant, si vous aviez besoin d'une carte SVG d'un pays ou d'une région particulière pour votre conception, le Vector Maps Plugin peut s'avérer très utile. Vous pouvez littéralement parcourir les pays ou les régions et les insérer directement dans votre conception Figma en un seul clic. Les cartes peuvent également être téléchargées au format SVG ou PDF via https://vector.mapcraft.biz/constructor/.

Nom Conventions in Figma

Nous avons tous été là : Quand vous' Dans la précipitation, les conventions de nommage sont un détail qui souvent n'obtient pas l'attention qu'il mérite. Et avant que vous ne le remarquiez, vous vous retrouvez avec un fouillis de styles de mise en forme différents pour les noms de vos pages, cadres, composants et calques.

Le plugin Namespaces met fin au chaos et nomme soigneusement vos actifs selon un schéma logique. Idéal également pour unifier différentes conventions de nommage lorsque vous travaillez sur un fichier partagé avec d'autres.

Bien sûr, nous voulons tous être bien organisés, mais parfois nous pouvons être un peu distrayants lorsque nous nommons nos cadres. C'est alors que Figma Exporter peut vous aider. Il vous permet de sélectionner la convention de nommage que vous souhaitez pour vos fichiers exportés : kebab-case, snake_case ou camelCase. Le reste se fera automatiquement !

Bloc-notes pour notes rapides dans Figma

Si vous avez toujours voulu avoir un espace dédié dans Figma pour prendre des notes, des idées et des commentaires tout en travaillant, Bloc-notes de Dustin Mierau est probablement ce que vous cherchiez . Les notes sont automatiquement enregistrées avec vos documents et sont disponibles pour les autres éditeurs. D'une certaine manière, vous pouvez utiliser le Bloc-notes comme un espace partagé pour documenter votre projet avec votre équipe. En passant, vous devez rouvrir Notes pour voir les modifications apportées par d'autres éditeurs si vous travaillez en collaboration. .

Motifs dans vos dessins Figma

Tout est légèrement mieux avec des motifs ! Bien que la création de modèles de base soit généralement assez simple, la création de modèles personnalisés peut être un processus délicat et intense, et c'est là que les plug-ins de modèles de Figma sauvent la journée.

Le plug-in Pattern Hero permet d'insérer vos éléments personnalisés. dans une grille et les répète pour former un motif. Vous pouvez répéter ou mélanger les motifs, créer des instances et également travailler avec plusieurs modèles. Si vous avez besoin de créer un motif, c'est une bonne option à utiliser.

Alternativement, Hero Patterns est une collection de motifs d'arrière-plan SVG. Pour créer un ensemble unique pour vous-même, vous pouvez mélanger et assortir différents motifs pour créer un motif souhaitable.

Il y a beaucoup plus de plugins de motifs dans Figmavous pouvez donc obtenir n'importe quoi de des motifs de confettis à des graphiques générés trippy et des formes géométriques.

Si vous devez configurer une sorte de grille de points dans votre maquette, Dot Grid automatisera la tâche pour vous. Avec l'outil, vous pouvez facilement générer de belles grilles de points pour servir de guides tout au long de votre processus de conception sur Figma avec une largeur de grille, une hauteur de grille, une taille de point, un espace et des couleurs de point personnalisables. generates dot grids (how surprising!) based on your choice of grid width, height, dot size, gap and dot colors.

Photos Embedding in Figma

You don’t have to leave Figma to get custom photographic assets for your project. Of course, Unsplash is everyone’s go-to page for high-res images and now it is a plugin on Figma.

Remove Backgrounds in Figma

Remove backgrounds allows you to pretty much do just that: remove backgrounds of images easily. No need to manually edit the background of images before adding them to your design. A caveat: you will need a remove.bg account to use the plugin.

Responsive Design And Testing in Figma

Not many people resize boxes for living, but as designers, that’s pretty much what we have to do every now and again. In Figma, Breakpoints is one of the many plugins for testing responsive design. It provides a resizable instance of a frame, and works without the plugin window — so everyone on your team can explore the responsive behavior of the frame without having the plugin installed.

Alternatively, you can also use Responsifywhich allows you to select any frame and set custom device sizes, so you can preview what the website or app will look in that particular view. Responsive is similar, and it allows you to test specific edge cases of your responsive layout by clicking on the input frames in the plugin. Nothing groundbreaking, but handy!

Reverse The Order Of Layers

Automating small, tedious actions is always a good thing to save you precious time and stay focused on what really matters. When it comes to reversing the order of multiple layers, the Reverse Layer Order plugin could become your new best friend. Just as its name implies, it will reverse the order of two or more layers within the same parent. All you need to do is select them and run the plugin.

Shapes And SVG in Figma

Creating basic shapes is easy. However, creating complex shapes might take valuable time that you can’t really afford to lose when working on a project. Figma’s plugins all around shapes and SVG can make your work easier, with a variety of shapes to choose from.

Blobs helps you improve the aesthetics of your design. With blobs, you can create and add organic shapes into your Figma designs using two parameters: complexity and contrast. You can also control how unique a shape is as well as the number of points it has.

Need waves? The Get Waves plugin helps you generate SVG wave patterns for your designs. It can be quite useful when working with charts, graphs or designs with crests and troughs. You just have to choose a curve, adjust the complexity and randomize.

If you are trying to create a wave and curve pattern for your design, the Wave & Curve plugin by Andreslav Kozlov can help you generate waves in various patterns. You can also choose the direction of the waves either Top and BottomTopor Bottom.

Finally, To Path helps you put things on a path and can work with texts, shapes, objects, and components. To curve text around a path (a circle, for example), you can install the plugin, then remove circle opacity, select text, and circle, and then use the plugin to link both objects and watch the magic happen.

Some other features of the plugin include repeating shapes along any path, editing the original shape or text and reflecting changes in real-time (while the plugin is open), and editing the path afterwards, and again, watch the linked objects change.

Turn Your Designs Into A Slide Deck

So you have a Figma design that you want to present to a client, your boss, or your team? Pitchdeck is here to help you do just that. The plugin turns your design into animated slide decks or, if you prefer, exports it for PowerPoint, Keynote, or Google. PDF export is also supported, as well as a number of handy features like webcam overlay, video embeds, speaker notes, and more. It’s even possible to record your presentation as a video with microphone audio.

Table Generator in Figma

Although designing data tables can be quite time-consuming, the Table Generator plugin makes this easier by helping you automate dealing with tabular data. All you need for table generation is to copy and paste the data (currently in CSV format).

Alternatively, you can also use Table-Paste to paste data from an Excel spreadsheets into styled table rows, or Table-Creator to create resizabled custom-styled tables. A little bonus: you can also update all tables anytime your design changes.

Templates For Wayfinding in Figma

First, there’s only one person on the Figma project board, then another one joins in, and soon you’ll see the cursors of designers, developers, project managers, content designers, researchers, and many others spread across the screen. You’ve probably experienced this scenario before. But did all of these people actually find the information they needed? Did they have to dig around or was it easily discoverable?

The team at Shopify took these questions as an occasion to rethink the structure of their Figma playground and ensure it meets the diverse needs of teams across the company. Apart from sharing the process in an article, they distilled their findings into a project index template that you can download and use right away. A handy little helper to give everyone involved in your project the context they need, when they need it.

Text Replacement in Figma

Sometimes you’re in a situation where you need to replace a piece of text in your Figma mockup. No big deal — well, unless that piece of text appears in multiple instances across the design. A fantastic little time-saver for those occasions is Content Buddy.

Instead of having to look up all instances, components, frames, and groups one by one and changing the text manually, Content Buddy does the heavy lifting for you: It provides you with a list of each unique text content in your design so that you only need to select the items you want to replace and enter the new replacement text — once.

Tracing Images in Figma

Convert any white and black bitmap images to vectors using the Image Tracer plugin. This plugin saves you the time you’d manually trace with the pen tool or use Illustrator to convert to vectors. On running the plugin, you will see a console on the window with options to help you make edits to your taste.

Typographic Scale in Figma

You’ve been there before. You need to look up the right values for a typographic scale of your design, but you don’t have them at hand? Marvin Bruns’ Typescales and Scaale allow you to generate harmonious, responsive typographic scalesbased on your choice of ratio — without leaving Figma. As always, you start with a base-valuefont-size increments and decrements from that size, and a multiplier.

Ah, you need to be able to set a custom scale, too? Sam Smith’s Typescale does that for you (yep, it’s a different plugin with a similar name). Also, Textyles generates text styles with a font preview, and if you need to generate vertical rhythm by using a modular type scale, grid, and auto-layout, Heading-Helper has got your back, too.

Finally, Font Scale is helpful when you want to keep the proportions between your body text and headings the same, whether it’s on-screen or paper. Jeremy Church’s Type-Scale is an inspiration for this plugin.

Upload Images From Mobile in Figma

We all have been in the situation before where you need to place something on Figma, perhaps just as a sketch or brainstorming session, so you would take a picture, send it to yourself via email, and then paste it in.

With Mobile upload it’s no longer necessary. With the plugin, you can take a picture with your phone upload it directly to Figma. This is quite useful for notebook sketches and brainstorming sessions.

Utility Plugins in Figma

Have you ever lost resolution when bringing a large image into Figma? Or been frustrated at not being able to input a spacing value for your layers? Or maybe you’ve been unable to resize a frame independently of its contents? Yuan Qing Lim, product designer at Shopify, developed nine useful plugins that solve issues like these.

With the plugins, you can move layers with pixel precision, reisze frames without also resizing their contents, copy a component, insert unblurred large images (beyond the 4096 pixels limitation) and make quick and precise selections.

And if you need a bit more guidance or inspiration, Louis Ouriach has created a best practice advice on how to structure frames in your files to ensure handoff is as smooth as butter.

Wireframing and Prototyping in Figma

When you are just planning your design, it might come in handy to use wireframing tools to just get a sense of what you are going to design in the first place.

For wireframing in Figma, no conversation will escape the mention of AutoFlow. The plugin allows you to select objects and it will automatically draw an arrow to connect them. A great little helper to display and explain ideas!

Wireframe provides a large set of wireframes, for user flow, prototypes and basic structures. The wireframe components are divided into categories. All files are SVGs, so you can easily edit them for your needs.

However, sometimes after creating a design, you might want to go back to the wireframe to iterate a bit more, or perhaps create a slightly different flow for your design. Wire Box can be useful for these situtions. It converts your designs from high-fidelity mock-ups to low-fidelity mock-ups, so you can then focus on the overall architecture rather than the fine details of the UI.

Finally, you can also use oblique for creating quick shadows, 3D depth and visual perspective, and Wireframer Figma plugin to generate placeholder text for wireframes with just one click.

Conclusion

In this article, we explored a myriad of Figma tools, plugins and resources that you can use to make your design process easier. There is still a lot that we have not covered but you can explore them on the Figma community here or share your favorite ones in the comments below!

Further Resources

Other Smashing Guides

Wow, you’ve made it so far! Well, if you are looking for similar posts, please check other round-ups we’ve published earlier:

And if that’s not enough, you can always subscribe to our newsletter so you don’t miss the next ones. Thanks for being… smashingof course! 😉

(vf, yk, il, cm)