12 plug-ins d'esquisse essentiels gratuits
À la fin de la version bêta de Sketch 44, nous examinons l'une des meilleures fonctionnalités de Sketch: la vaste sélection de plugins open source.
La communauté Sketch est extrêmement utile et vous pouvez trouver des tonnes de plugins incroyables qui amélioreront radicalement votre flux de travail. Dans cet article, je couvrirai les 12 meilleurs plugins Sketch que tout concepteur devrait avoir.
1. Mesure d'esquisse
Mesure d'esquisse aide les concepteurs à organiser et à décrire leur travail pour les développeurs, les chefs de projet et les autres membres de l'équipe.
Mais c'est aussi incroyablement utile pour les loups solitaires qui conçoivent et codent tous leurs projets. Avec le plug-in Measure, vous pouvez définir des éléments montrant des dimensions spécifiques largeur / hauteur pour obtenir des mesures correctes en un coup d’œil.
Cela inclut tous les éléments de la page tels que les boutons, le texte, les icônes et même les principales parties de la planche graphique.
Avec Sketch Measure, vous pouvez même exporter des pages vers HTML / CSS avec des styles de page in-tact. Certes il y a Outils Adobe cela peut aussi le faire. Mais avoir toutes ces fonctionnalités directement dans Sketch vous facilite la tâche.
2. InVision Craft
Il y a quelque temps, l'équipe InVision a annoncé un nouveau plugin Artisanat . Mais cela ressemble plus à une suite de plug-ins où vous obtenez des tonnes de fonctionnalités et de raccourcis supplémentaires.
Un exemple est le Plugin de données qui permet aux concepteurs d'extraire du texte / des données directement des API publiques sur le Web. De cette façon, vous pouvez remplir automatiquement votre application avec du contenu réel et des images à la volée.
Les développeurs d'InVision mettent constamment à jour Craft avec de nouvelles fonctionnalités de plug-in pour que cela soit encore plus précieux pour les concepteurs. Et ai-je mentionné que c'est totalement gratuit?
Jusqu'à présent, Craft dispose de 6 principales fonctionnalités de plug-in, qui méritent toutes d'être ajoutées à votre flux de travail de conception.
- À main levée - collaboration en temps réel dans Sketch
- Prototype - prototypage dynamique haute fidélité
- Synchroniser - Synchronisation instantanée entre les prototypes InVision et Sketch
- Les données - extraire des données réelles du Web dans votre maquette Sketch
- Bibliothèque - concevoir des actifs dans le cloud partageables avec toute votre équipe
- Dupliquer - clonage d'interface ultra-rapide
Jetez un oeil à la Page d'accueil de l'artisanat et voyez ce que vous en pensez. Une fois que vous l'essayez, vous ne voudrez plus jamais revenir en arrière.
3. Boîte à outils d'esquisse
Chaque utilisateur de Sketch doit connaître le Boîte à outils d'esquisse . C'est un gestionnaire de plug-ins exquis qui facilite l'installation / la personnalisation de vos plugins.
Avec cette boîte à outils, vous pouvez parcourir des centaines de plug-ins Sketch et choisir ceux que vous souhaitez installer. Il vous suffit de cliquer sur ce que vous voulez et il sera automatiquement téléchargé sur votre ordinateur, prêt à être utilisé.
Et la boîte à outils Sketch Toolbox met à jour automatiquement les plugins pour qu'ils fonctionnent correctement.
Techniquement, c'est encore en version bêta et il reçoit toujours de nouvelles mises à jour sur GitHub . Mais je pense que c'est assez solide pour être utilisé dans un flux de production. En fait, je pense qu'un bon flux de travail Sketch ne serait pas complet sans ce gestionnaire de plugins incroyable.
4. Actifs d'exportation
L'une des tâches les plus détaillées d'un concepteur consiste à allouer des ressources et à les partager avec les développeurs. Toutes les petites icônes, graphiques, motifs de fond, doivent tous être exportés (généralement à la main).
le Plugin Export Assets rend ce processus un jeu d'enfant. Notez simplement que cette prise est spécialement conçue pour les applications mobiles où les concepteurs doivent exporter des ressources d’interface Android / iOS. Cela comprend les actifs de rétine pour les tailles d'écran @ 2x et @ 3x.
Je n'ai pas vu de fonctionnalités liées à la conception web rétine, mais vous pouvez consulter le Croquis Exportateur plugin aussi. Il est actuellement en version bêta et se veut une version améliorée de l'original.
5. Générateur de contenu
Le plug-in Craft que j'ai mentionné précédemment offre la génération de contenu. Mais vous voudrez peut-être quelque chose de plus simple comme celui-ci Générateur de contenu par Timur Carpeev.
Avec cette installation, vous pouvez remplir automatiquement plusieurs éléments d'esquisse avec des données connexes telles que:
- Avatars utilisateurs
- Prénom et nom
- Texte de paragraphe factice
- Chaînes personnalisées (géos, prix, numéros de carte CC, etc.)
Tout le contenu est extrait de bases de données open source telles que Unsplash et Uinames vous pouvez donc l'utiliser sur plusieurs projets, commerciaux ou autres.
6. Looper
Photoshop possède son propre panneau Actions où vous pouvez automatiser les actions répétées. Sketch n'a pas de panneau comme celui-ci mais il a le Plugin Looper qui est complètement gratuit et super facile à apprendre.
Ceci est très utile pour créer des motifs répétés qui couvrent toute la page. Les concepteurs graphiques peuvent trouver plus d’utilisation de ce plug-in que les concepteurs Web, mais cela permet de gagner beaucoup de temps en bouclant des tâches répétitives de mise à l’échelle / duplication.
Jetez un coup d’œil à la Looper page d'accueil pour voir ce qu'il peut faire Cela peut ne pas être utile pour tout le monde, mais pour ceux qui peuvent l'utiliser, vous gagnerez beaucoup de temps.
7. Croquis Iconfont
Les concepteurs Web aiment polices d'icône . Les grandes icônes facilitent grandement la conception de l'interface utilisateur et les fichiers de polices sont généralement plus petits que les images.
le Croquis Iconfont plugin est une suite de gestion complète pour stocker, trier et extraire des polices d’icône directement dans Sketch. Par défaut, le plug-in est vide, vous devrez donc télécharger les polices d'icônes localement pour les utiliser.
Mais cela vous donne un accès complet au travail avec toutes les polices d'icônes que vous trouvez en ligne. Il y a en fait un paquet de polices faite spécifiquement pour ce plugin si vous cherchez à remplir rapidement votre dossier iconfont. Et vous pouvez toujours parcourir le Web au fil du temps.
Je recommande absolument de récupérer une copie de ce plugin. Les polices Icon sont là pour rester et elles sont inestimables pour les sites Web modernes.
8. Inventaire du style
Chaque fois que vous démarrez un nouveau fichier Sketch, vous devez soit recréer des styles à partir de zéro, soit copier / coller des styles à partir de maquettes précédentes.
Avec le Plugin d'inventaire de style vous pouvez contourner tout ce travail supplémentaire. Quelques clics importent tous vos styles précédents directement dans votre nouveau document Sketch pour un accès facile.
Ces styles incluent des couleurs, des styles de texte et des symboles, ainsi que des styles de calque pour certains éléments.
Ce plugin est rarement mis à jour, mais je le recommande pour la fusion de maquettes similaires. Vous pourriez aussi essayer le Sketch Palettes plugin pour enregistrer et importer des combinaisons de couleurs.
9. Pixel Perfecter
Chaque concepteur numérique se targue de maquettes en pixel parfait. Cette tâche n'est pas difficile, mais chaque élément de conception doit être parfaitement aligné avec la grille, sans aucun chevauchement ou imperfection.
Si vous souhaitez vérifier votre travail avant de l'exporter, vous pouvez exécuter Pixel Perfecter . Ce très petit plug-in vérifie tous les éléments de votre fichier pour voir si des pixels dépassent les positions de coordonnées X / Y traditionnelles, ce qui crée des pixels imparfaits.
Notez que cela ne corrigera pas automatiquement ces valeurs de pixels de décalage. Il ne vous reste plus qu'à trouver les couches à l'origine des problèmes et à les mettre en surbrillance pour pouvoir les corriger vous-même. Pourtant, cela permet de gagner beaucoup de temps en vérifiant chaque couche manuellement.
10. Bouton dynamique
Le plug-in de bouton dynamique original a été quelque peu abandonné en 2015, mais le plus récent Bouton dynamique Le plugin est encore meilleur et compatible avec Sketch 3.5+.
Il ajoute automatiquement des styles de boutons et de remplissage à tous les calques de texte que vous créez, et le remplissage est dynamique pour qu'il soit mis à jour indépendamment de la taille du texte. Ceci est extrêmement utile pour les concepteurs d'interface utilisateur qui apportent constamment des modifications à leurs maquettes.
Cela peut également être utilisé pour les applications mobiles où les boutons suivent généralement une taille / un ratio fixe. Ce n'est pas le plugin Sketch le plus glamour mais il fait bien son travail.
11. Compo
Si vous voulez un générateur de boutons avec quelques fonctionnalités supplémentaires, alors le Plugin Compo vaut la peine d'être testé.
Le créateur de Compo a eu l’idée après avoir utilisé le plugin Dynamic Button pendant un moment, en voulant finalement quelque chose de plus rapide. Compo génère automatiquement la taille et la taille de texte appropriées pour correspondre exactement à vos spécifications. En un clic, vous avez un composant Sketch fonctionnel qui est automatiquement dimensionné et positionné correctement.
Normalement, lorsque vous créez un bouton et modifiez le texte, cela n'affecte que le calque de texte. Le bouton sous-jacent serait donc trop petit. Compo redimensionne automatiquement le bouton et le texte comme s'ils étaient un élément.
Vous pouvez trouver des tonnes de démos sur le Repo GitHub avec quelques guides de l'utilisateur pour commencer.
12. CSSketch
Le dernier mais non le moindre est le CSSketch brancher. Ceci est très utile pour les combinaisons de concepteurs et de développeurs qui souhaitent un accès direct au code CSS pour tous les styles qu’elles créent.
Toute page que vous concevez peut être exécutée via ce plug-in pour exporter une feuille de style complète avec tous les actifs pris en compte. Mais comme ceci est automatisé, vous ne pouvez pas attendre un code de qualité A ++.
Je préfère toujours coder mon CSS à la main, mais ce plug-in offre au moins un point de départ pour les concepteurs ou les développeurs non techniques qui souhaitent gagner un peu de temps.
