Existe-t-il une fonctionnalité ou un plugin «générer CSS / HTML» dans l'application Sketch

13

J'ai trouvé un script qui fait exactement cela (génère du CSS et du HTML pour les couches et offre une option d'exportation de celles-ci en%) et coupe le travail du web-dev de moitié pour Photoshop. Maintenant, je suis curieux de savoir si quelqu'un a rencontré / créé un plugin ou peut me diriger vers une fonctionnalité native comme celle de l'application Sketch. L'absence de tels éléments rend ma transition vers Sketch vraiment pénible. Ou étant nouveau dans Sketch, il me manque quelque chose d'idéologiquement différent sur la façon dont Sketch fonctionne avec CSS et HTML.

css html sketch-app plugin Rakhilya Lála Ibildayeva
la source

Réponses:

11

Ce n'est peut-être pas tout à fait la réponse que vous recherchez, mais je trouve cela mieux que de remettre aux ingénieurs des styles médiocres générés automatiquement.

Balisage sélectif

Je suis sûr que vous avez découvert le grappin CSS du menu contextuel de Sketch. Vous pouvez sélectionner autant d'objets que vous le souhaitez et vous obtiendrez le CSS dans votre presse-papiers plus rapidement que vous ne pourrez le coller.

Copier le contexte des attributs CSS men

Il n'y a pas de sélecteurs bien sûr, c'est vraiment juste des notes CSS. Chaque bloc est appelé par un commentaire précédent en utilisant le nom de la couche, comme ceci:

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

Annotation de fichier

Sketch Measure est un plug-in qui génère différents niveaux d'annotation selon vos spécifications. Il y a une vidéo de démonstration ici . L'idée de base est d'annoter les nombres importants et de laisser le développeur écrire son propre code.

Plug-in Sketch Measure

Au-delà de l'annotation

Vous pouvez également essayer des outils comme ceux-ci, seuls ou en combinaison:

  • Zeplin crée une version autonome et partageable de votre conception Sketch pour l'inspection de votre développeur, en extrayant les spécifications à la demande.
  • Marvel est un outil de prototypage qui importe des fichiers Sketch. Rien ne communique comme un prototype interactif!

Générateur HTML expérimental

Je ne l'ai jamais utilisé, et c'est clairement aux premiers stades de développement, mais le plug-in Blade semble prometteur.

Blade est un plugin Sketch 3 pour générer automatiquement du HTML. Il générera la balise <div> pour le groupe, la balise <p> pour le texte, etc.

entrez la description de l'image ici

en civil
la source
1
J'ai amélioré le fichier Readme de Blade avec un aperçu / guide de l'architecture pour que les autres aient une meilleure chance de travailler dessus pour l'améliorer davantage ... github.com/kristianmandrup/blade
2
Nous avons publié Protoship UIPad qui fait exactement cela. Il s'agit d'un générateur de code pour Sketch qui convertit les conceptions de Sketch en composants HTML, CSS, SASS et React. Il utilise BEM pour CSS et utilise les marges, les rembourrages, les flottants et la flexbox au lieu du positionnement absolu. protoship.io/tools/uipad.html .
Jasim
"Nous avons sorti" est trompeur - Protoship est une liste d'attente depuis un an, et l'est toujours.
Chris Moschini
1

Voir les liens suivants http://blog.mengto.com/the-best-hidden-features-in-sketch/

Suivez le blog de Meng To pour rester à jour avec des tutoriels, des conseils et même des astuces intéressants sur Sketch. http://blog.mengto.com/ https://designcode.io/

Kiodour
la source
Bonjour Kiodour, pourriez-vous expliquer un peu plus ce que nous trouverons derrière le lien que vous fournissez et pourquoi il répond à la question? De cette façon, votre réponse est toujours valable au cas où le lien se briserait plus tard. La pourriture des liens est la principale raison pour laquelle nous n'aimons vraiment pas les réponses liées uniquement aux liens. Merci pour vos efforts et continuez à contribuer!
AndrewH