10 plugins d'esquisse gratuits pour les développeurs Web
Sketch suscite un vif intérêt chez les concepteurs et les développeurs Web. C'est probablement parce que c'est intuitif, facile à apprendre et comporte de nombreuses fonctionnalités qui facilitent grandement la création d’un prototype de site Web. C’est peut-être aussi parce que cette application est extensible que vous pouvez ajouter facilement de nouvelles fonctionnalités à l’application à l’aide de plugins..
Voici 10 plugins qui peuvent vous aider à augmenter votre productivité lorsque vous utilisez Sketch. Il existe divers types de générateurs, allant des générateurs de contenu au sélecteur de palette de couleurs, et ils peuvent vous aider à afficher les mesures des calques ou à ajouter automatiquement un remplissage à un calque..
1. CSS Buddy
CSS Buddy vous permet d'ajouter le CSS à votre calque dans l'espace de travail Sketch. Fondamentalement, vous pouvez appliquer la largeur, la hauteur, l'opacité, l'ombrage, la bordure et l'arrière-plan au calque à l'aide de CSS.
Avec ce plugin installé, il suffit de sélectionner une couche, puis sélectionnez Appliquer à la sélection depuis le menu du plugin. Une boîte de dialogue vous invitera à entrer votre feuille de style. Ajoutez le contenu CSS sans la classe CSS et regardez votre couche prendre forme.
2. Palette de couleurs de conception matérielle
Si vous suivez la tendance du design des matériaux, vous remarquerez l’utilisation de couleurs distinctives. Material Design a une palette de couleurs impressionnante. Maintenant, vous pouvez apporter cela dans votre espace de travail avec Matériau Conception Palette de couleurs.
Ce plugin générera des palettes de couleurs en quelques secondes sans que vous ayez à fermer votre espace de travail. Choisissez Teinte, Valeur ou Échantillon pour générer une palette de couleurs adaptée à votre projet..
3. Carnet de croquis
Parfois, nous devons montrer ce que nous faisons dans un commentaire ou via une documentation. Si vous travaillez sur des projets avec d'autres concepteurs ou avec la participation d'un client, vous devez également vous assurer que le résultat correspond à l'objectif recherché par tous..
Carnet de croquis est un plugin pour documenter votre conception dans Sketch avec facilité. Cela ajoutera une barre latérale supplémentaire à votre espace de travail, contenant les commentaires que vous ajouterez à n'importe quel élément de votre conception. Vous pouvez réorganiser les commentaires, réaligner, supprimer et basculer la visibilité des commentaires..
4. joueur de jour
Avant d’utiliser des images réelles dans une conception, nous utilisons souvent des images de substitution pour accélérer le processus de conception. Pour Sketch, vous pouvez utiliser Joueur de jour pour ajouter des espaces réservés personnalisés à n’importe quelle couche de votre espace de travail Sketch à partir de 6 services d’image, y compris Placehold.it, LoremPixel et Unsplash. Une fois activé, vous pouvez définir la largeur, la hauteur et d'autres informations de l'image..
5. Générateur de contenu
Nous avons déjà un plugin pour insérer des images de substitution, que diriez-vous d'un contenu général?? Générateur de contenu vous aide à ajouter des données factices telles que des avatars, des noms, des données de géolocalisation et plus encore. Fonctionne très bien pour les maquettes et pour réduire les maux de tête en essayant de savoir comment générer des données sur place.
Pour ajouter les données factices, sélectionnez simplement un calque, puis sélectionnez Plugin> Générateur, et choisir Géo, Personnage ou Photos.
6. Mesure d'esquisse
Croquis Mesure est un outil de mesure pour Sketch. Il mesure la longueur ou la taille d'un calque (ou de plusieurs calques) de votre conception. Vous obtenez également le remplissage et la marge d'un calque ainsi que la distance entre deux calques. Sketch Measure peut également imprimer les propriétés du calque, telles que la couleur, les bordures et l'opacité. Toutes les mesures peuvent être affichées via des raccourcis clavier.
7. Bouton dynamique
Bouton dynamique vous aide à créer facilement des boutons avec des rembourrages fixes. Il ajustera automatiquement le remplissage en fonction de la valeur que vous donnez, quelle que soit la longueur de votre texte. Avec le plugin installé, un texte peut être converti en une structure avec le raccourci Command + J. La quantité de remplissage requise peut ensuite être insérée dans la couche de texte (0: 0: 0: 0) (sous le groupe de boutons flexibles).
8. Échelle typographique
Echelle typographique est un plugin permettant de transformer le calque de texte sélectionné en échelle typographique. Pour utiliser ce plugin, il suffit de sélectionner un calque de texte (simple ou multiple) ou un calque mixte contenant au moins un calque de texte, puis de sélectionner Plugin> Echelle typographique
et ajustez la valeur dans la boîte de dialogue. Le résultat est un ensemble de texte mis à l'échelle qui suit les règles de l'échelle typographique.
9. Modulizer
Avec Modulateur vous pouvez contrôler les rembourrages des boutons, des modules ou des zones de votre conception à l'aide du raccourci clavier Maj + Commande + M. Vous pouvez combiner tous les calques, les regrouper, puis utiliser le raccourci pour ajuster automatiquement le remplissage en fonction de la valeur de remplissage souhaitée. . Regardez la vidéo de démonstration pour voir cela en action.
10. lame
Avez-vous déjà songé à convertir votre dessin de sketch en HTML? Si oui, vous devriez probablement obtenir Lame, un plugin Sketch qui génère automatiquement des fichiers HTML à partir de votre conception. Il convertira le groupe en div
, texte en p
etc.
Lorsque vous utilisez Blade, vous pouvez indiquer au plug-in quel élément DOM générer en ajoutant un nom spécial au calque, tel que [btn] ou input [text], afin que Blade sache ce qu'il doit faire. Découvrez cette démo vidéo pour un aperçu de l'intérieur.