🧖🏼 👨🏾‍💼 💢 Examen de 14 nouveaux plugins pour Figma qui aideront à augmenter la productivité pendant que nous tous 🕰️ 👻 👨‍💻

Aujourd'hui, nous allons parler des nouveaux plugins Figma suivants:

AutoGrid - Prise en charge de la grille pour AutoLayout.
Suivi - Plugin pour créer des annotations de suivi.
Rechercher et remplacer des couleurs - Organisez les styles de couleurs dans vos conceptions
Spacing Manager - Plugin pour une indentation cohérente dans les composants
Geometric –
Halftones – ,
Batch Styler –
Spell Inspector —
Sitemap –
Style Organizer —
Focus CSS — CSS Figma
Flipbook – Figma
SwiftUI Inspector – Apple
Filter –

Bonjour à tous! Nous espérons qu'en cette période de crise, vous allez tous bien.

La prolifération de COVID-19 a eu un impact sur le monde entier, et beaucoup d'entre nous sont maintenant complètement passés au travail à distance. Il était difficile pour beaucoup d'être à la maison avec des enfants et de rester productifs, mais nous devons tous rester professionnels et soutenir notre communauté.

C'est agréable de voir comment les gens se réunissent, collaborent et s'entraident en ces temps sans précédent. Nous ne sommes pas non plus en reste, car l'idée principale de Figma est la coopération. Alors que le premier numéroa été accueilli très positivement par la communauté Figma, nous sommes heureux de continuer le travail utile, de gagner du temps sur l'apprentissage de nouveaux plugins et de vous fournir des plugins sélectionnés pour Figma qui vous aideront dans votre travail et préserveront votre productivité et votre créativité.

Mes amis, avant de commencer à parler de plugins, nous aimerions dire que la chose la plus importante pour nous maintenant est de rester positif, car il ne fait aucun doute que la pandémie se terminera bientôt et que tout reviendra à la normale. Pour tous les peuples du monde, c'est une nouvelle expérience, comme pour nous - les designers, et cela se reflète dans notre travail.

Malgré la conjoncture économique difficile, nous n'abandonnons pas l'espoir que le secteur du design sera le moins touché par la crise, même si certains designers se plaignent déjà d'une baisse de l'activité. Néanmoins, de nombreuses entreprises se tournent aujourd'hui vers le travail à distance, et nous pensons que c'est le bon moment pour Figma et d'autres outils pour augmenter la productivité, augmenter leur importance pour les projets et la demande du marché.

Eh bien, plongeons-nous maintenant dans l'analyse des plugins! Nous partons du dernier endroit - tout ce qui est le plus intéressant vous attend ci-dessous.

14. Plan du site

Si vous avez besoin de faire une carte de votre site - ce plugin vous aidera dans cette tâche.
La fonctionnalité du plugin Sitemap est assez simple: entrez ou collez l'URL de votre site, cliquez sur "Créer une carte". Le plugin affichera tous les liens qu'il trouve à partir de la source HTML.

13. Demi-teintes

Avec l'aide de Halftones, vous pouvez appliquer des filtres de points et de demi-teintes sympas à vos images.

Sélectionnez simplement une ou plusieurs images, sélectionnez le type de filtre que vous souhaitez appliquer (points ou effet de demi-teintes). Ensuite, à l'aide des curseurs, déterminez l'angle et la taille de l'image, cliquez sur "Appliquer" et le tour est joué - votre image est devenue plus tendance.

12. Flipbook

Diluez notre note avec une petite partie de plaisir grâce au plugin Flipbook! Il s'agit d'un plugin pour animer votre conception dans Figma. Il possède de nombreuses fonctionnalités, notamment l'aperçu en temps réel, le changement de vitesse, le réglage de la vitesse d'animation à l'aide du curseur, ainsi que l'animation inverse et l'exportation au format GIF.

Il existe également une version Pro de ce plugin. Il n'a pas de filigrane et a également une fonction de peau d'oignon (pelure d'oignon, c'est-à-dire la fonction d'afficher le couvercle du cadre pour vérifier votre animation).

11. Inspecteur de sorts

Avez-vous déjà eu besoin d'un outil qui trouverait des fautes d'orthographe dans la figure? Eh bien, le plugin Spell Inspector vous y aidera.

Spell Inspector utilise l'API SpellCheck spéciale. À l'heure actuelle, le dictionnaire comprend 40 000 mots. L'orthographe vérifie la page sur laquelle vous souhaitez rechercher les fautes d'orthographe et fournit une liste de phrases pertinentes. Nous espérons qu'à l'avenir les créateurs de ce plugin ajouteront plus de langues et développeront le dictionnaire.

Abonnez-vous à ma chaîne Telegram "Utile pour le concepteur", il y aura des annonces des parties suivantes et de nombreuses autres ressources de conception utiles. Je me tiens constamment au courant et suit la sortie de nouvelles ressources, outils et applications utiles qui aident les concepteurs, les développeurs et les chefs d'équipe à accélérer.

10. Focus CSS

Ce plugin améliorera le processus de travail avec CSS dans Figma et détectera les styles incohérents.

Caractéristiques du plugin:

Génération CSS pour tous les éléments du document Figma;
La possibilité de masquer les propriétés CSS que vous ne souhaitez pas copier dans le code.
Il existe également une fonction de filtrage qui vous permet d'afficher uniquement les types de couches CSS dont vous avez besoin.

9. Suivi

Avec ce plugin, vous avez la possibilité de créer, mettre à jour ou attacher des annotations de suivi directement à partir du fichier Figma.

Grâce au suivi, vous pouvez expliquer aux développeurs ce que vous souhaitez suivre exactement et vous assurer également de suivre les éléments dont vous avez besoin à vol d'oiseau. De plus, le plugin a une fonction «état», vous saurez donc si le suivi a été effectué ou non.

Pour mieux comprendre comment utiliser le plugin, vous pouvez voir le manuel ici .

8. Filtre

Malgré le fait que ce plugin soit sorti le mois dernier, il est constamment mis à jour, et l'auteur y ajoute de plus en plus de filtres intéressants. C'est pourquoi nous avons décidé d'ajouter ce merveilleux plugin à notre liste.

Avec Filter, vous pouvez augmenter votre créativité et accélérer votre flux de travail. Ayant ce plugin dans votre arsenal Figma, vous n'avez plus besoin de quitter Figma pour utiliser Photoshop, car Filter vous donne un excellent contrôle sur les paramètres des images ou des nœuds.

À l'heure actuelle, vous avez plus de 30 filtres à votre disposition, dont: Bulge Pinch, Colour Halftone, Cartoon, Triangle Blur, Denoise, Lens Blur, Night Vision, Crosshatch et bien d'autres filtres.

7. Inspecteur SwiftUI

Travailler avec Swift et rechercher un outil pour vous aider à transférer des styles d'élément de Figma vers Xcode? Vous pouvez arrêter votre recherche, car SwiftUI Inspector résoudra ce problème. Avec ce plugin sympa, vous pouvez exporter les styles de vos éléments de conception en code SwiftUI.

Les fonctionnalités prises en charge comprennent: les couleurs, les étiquettes de texte, les formes de base. L'auteur du plugin promet d'ajouter un support pour des éléments tels que les composants, les vecteurs et les ombres dans un avenir proche.

6. Géométrique

Ajoutez de la beauté mathématique à vos projets avec ce super plugin. Grâce à Géométrique, la création de formes complexes est maintenant plus facile que jamais. À votre disposition sont des figures telles que Rose, Polygones, Spirales de différents types, Superellips, Astroid, Fonctions trigonométriques. Vous pouvez les modifier à l'aide de divers paramètres. Et selon le créateur du plugin, dans un avenir proche, il y aura des figures mathématiques encore plus intéressantes.

5. Gestionnaire d'espacement

De nombreux concepteurs sont tombés sur la pratique d'appliquer différents retraits entre les éléments. Certains éléments étaient en retrait 10px, d'autres - 14px, etc. Plus tard, si vous deviez faire des changements d'indentation, ils devaient changer chaque élément manuellement. AutoLayout a résolu ce problème. Cependant, avec le plugin Spacing Manager, vous pouvez encore améliorer votre processus d'indentation.

4. Rechercher et remplacer des couleurs

Avez-vous déjà rencontré des situations lors de l'importation d'une conception non organisée à partir de Sketch? Ou votre collègue vous envoie-t-il un modèle Figma sans styles de couleurs? Avec ce plugin, vous pouvez facilement trouver toutes les couleurs du fichier et les remplacer par celles dont vous avez besoin.

Le plugin est disponible pour travailler avec tout type de fichier, que ce soit des composants, des instances, des rectangles, des cadres, des objets vectoriels ou des textes.

Le plugin est facile à utiliser: installez-le et exécutez-le. Cliquez ensuite sur le champ de saisie à côté de la couleur correspondante et entrez une nouvelle valeur de couleur. Après cela, vous pouvez commencer le processus de remplacement de toutes les correspondances en cliquant sur le bouton «Remplacer les couleurs».

3. Styler par lots

Batch Styler est une excellente solution pour les situations où il existe de nombreux styles de texte, et vous devez changer les polices de ces styles de texte rapidement et sans actions inutiles.

Peu importe le nombre de styles de texte ou de polices à modifier, Batch Styler s'occupe de tout et enregistre tous les types d'épaisseur de police et d'autres styles.

2. Organisateur de style

Ce plugin permet d'afficher et d'organiser les styles de couleurs sur la page. De plus, ayant des styles organisés, cet outil générera automatiquement une palette de couleurs.
Ce qui est ignoré dans ce plugin: remplissage / trait d'images, indentation invisible des calques / nœuds invisibles.

Gardez également à l'esprit que Style Organizer ne prend pas en charge la fonction de mise à jour automatique lors des modifications de conception. Vous devrez cliquer sur le bouton Actualiser après avoir apporté les modifications.

1. AutoGrid

Peut-être êtes-vous confronté à une situation où vous devez créer plusieurs couches de mise en page automatique pour vous assurer que les cartes de votre mise en page sont en bon état?

Ce plugin est une excellente solution. AutoGrid s'occupe de tout ce qui concerne la grille. Tout ce que vous avez à faire est de définir les colonnes, les lignes et les retraits, et AutoGrid fera le reste.

Le plugin est assez simple à utiliser:

Sélectionnez l'élément racine de votre grille (par exemple, une carte)
Définissez la structure de la grille: combien de lignes, de colonnes et de retraits.
Cliquez sur Créer une nouvelle grille.

AutoGrid créera un clone de votre élément racine afin qu'il remplisse la grille nouvellement créée.
Le plugin a également une fonction de mise à jour automatique. Avec cette fonctionnalité, vous n'aurez pas besoin de mettre à jour manuellement votre grille chaque fois que votre structure change.

Nous choisissons AutoGrid , Style Organizer et Batch Styler comme leaders dans la notation actuelle, car ces plugins sont très utiles et accélèrent les processus de conception, en particulier lorsqu'il s'agit de créer des systèmes de conception.

Nous espérons que cet ensemble de plugins vous a été utile. Si vous avez besoin de systèmes et de modèles de conception Figma professionnels, consultez Setproduct.com. Eh bien, pour notre part, nous vous tiendrons au courant de tout ce qui est nouveau. Restez avec nous et # restez à la maison!