Gibt es eine Funktion zum Generieren von CSS / HTML oder ein Plugin in der Sketch-App?

13

Ich habe ein Skript gefunden, das genau das macht (generiert CSS und HTML für die Ebenen und bietet die Möglichkeit, diese in% -Werten zu exportieren) und halbiert die Arbeit für den Web-Entwickler in Photoshop. Jetzt bin ich neugierig, ob jemand auf ein Plugin gestoßen ist oder mich auf ein natives Feature für die Sketch-App hinweisen kann. Das Fehlen solcher macht meinen Übergang zu Sketch wirklich schmerzhaft. Oder weil ich neu bei Sketch bin, fehlt mir etwas Ideologisch anderes an der Arbeitsweise von Sketch mit CSS und HTML.

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

Antworten:

11

Das ist vielleicht nicht ganz die Antwort, die Sie suchen, aber ich finde es besser, als den Ingenieuren mittelmäßige, automatisch generierte Stile zu übergeben.

Selektives Markup

Ich bin sicher, Sie haben den CSS-Grabber im Kontextmenü von Sketch entdeckt. Sie können so viele Objekte auswählen, wie Sie möchten, und Sie erhalten das CSS schneller in Ihre Zwischenablage, als Sie es einfügen können.

Kopieren Sie die Kontextmenüs der CSS-Attribute

Es gibt natürlich keine Selektoren, sondern nur CSS-Notizen. Jeder Block wird durch einen vorhergehenden Kommentar mit dem Namen der Ebene wie folgt aufgerufen:

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

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

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

Dateianmerkung

Sketch Measure ist ein Plug-In, das verschiedene Annotationsebenen gemäß Ihren Spezifikationen generiert. Hier gibt es ein Demo-Video . Die Grundidee ist, die wichtigen Zahlen zu beschriften und den Entwickler ihren eigenen Code schreiben zu lassen.

Sketch Measure-Plug-In

Jenseits von Anmerkungen

Sie können solche Tools auch einzeln oder in Kombination ausprobieren:

  • Zeplin erstellt eine eigenständige, gemeinsam nutzbare Version Ihres Sketch-Designs für die Inspektion Ihres Entwicklers, wobei auf Wunsch Spezifikationen abgerufen werden.
  • Marvel ist ein Prototyping-Tool, das Sketch-Dateien importiert. Nichts kommuniziert so gut wie ein interaktiver Prototyp!

Experimenteller HTML-Generator

Ich habe das noch nie benutzt und es befindet sich eindeutig in den frühen Entwicklungsstadien, aber das Blade-Plug-In sieht vielversprechend aus.

Blade ist ein Sketch 3-Plugin für die automatische HTML-Generierung. Es wird Tag <div> für Gruppe, Tag <p> für Text usw. generiert.

Bildbeschreibung hier eingeben

Zivilkleidung
quelle
1
Ich habe die Blade-Readme-Datei mit einem Architekturüberblick / Leitfaden verbessert, damit andere besser daran arbeiten können, um sie weiter zu verbessern ... github.com/kristianmandrup/blade
2
Wir haben das Protoship UIPad veröffentlicht, das genau dies tut. Es ist ein Code-Generator für Sketch, der Sketch-Designs in HTML-, CSS-, SASS- und React-Komponenten konvertiert. Es verwendet BEM für CSS und verwendet statt der absoluten Positionierung Ränder, Abstände, Floats und Flexbox. protoship.io/tools/uipad.html .
Jasim
"We've released" ist irreführend - Protoship ist seit einem Jahr eine Warteliste und ist es immer noch.
Chris Moschini
1

Siehe die folgenden Links http://blog.mengto.com/the-best-hidden-features-in-sketch/

Folgen Sie dem Blog von Meng To, um über interessante Sketch-Tutorials, Tipps und sogar Tricks auf dem Laufenden zu bleiben. http://blog.mengto.com/ https://designcode.io/

Kiodour
quelle
Hallo Kiodour, kannst du uns bitte etwas näher erläutern, was sich hinter dem von dir angegebenen Link verbirgt und warum die Frage beantwortet wird? Auf diese Weise ist Ihre Antwort immer noch von Wert, falls der Link zu einem späteren Zeitpunkt unterbrochen wird. Link Rot ist der Hauptgrund, warum wir hier keine Nur-Link-Antworten mögen. Vielen Dank für Ihre Mühe und weiterhin Ihren Beitrag!
AndrewH