Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Tool-Tipp

Slinky: Sketch-Plugin erzeugt HTML-E-Mail-Templates aus euren Designs

    Slinky: Sketch-Plugin erzeugt HTML-E-Mail-Templates aus euren Designs

Newsletter (fast) per Knopfdruck. (Foto: HUZAIME/Shutterstock)

Das experimentelle Plugin Slinky exportiert Sketch Artboards direkt nach HTML. Gedacht ist das Tool für die Newsletter-Erstellung.

Wer erinnert sich noch an Fireworks? Dieser Mix aus Vektor- und Pixeltool aus dem Hause Macromedia, später übernommen von Adobe und noch später eingestellt, war das ideale Werkzeug für Webdesigner. Visuell bauten sie Seiten zusammen, nebst allen Klicktargets und sonstigen Verlinkungen, und exportierten die Entwürfe direkt nach HTML. Sicherlich war das nicht immer die optimale Lösung, aber man erhielt eine Rohfassung, mit der sich arbeiten ließ.

Sketch aus dem Hause Bohemian Coding ist recht nah an Fireworks dran, was zumindest teilweise den großen Erfolg erklärt, den das Tool in Webdesignerkreisen hat. Wesentlich unkomplizierter als mit den Adobe-Boliden arbeitet es sich hier, wesentlich schlanker und schneller.

Sketch wird zum neuen Standard für Designer. (Screenshot: Bohemian Coding)

Aus Sicht des Fireworks-Aficionados gibt es eigentlich nur zwei Schwächen: Zum einen ist es schade, dass Sketch nicht über wenigstens rudimentäre Möglichkeiten der Pixelbearbeitung verfügt. Zum anderen ist es geradezu schlecht, dass Sketch keinen HTML- und CSS-Export der Artboards erlaubt.

Zumindest für den letztgenannten Fall gibt es eine Reihe von Drittanbietern, die sich genau mit diesem Exportproblem auseinandersetzen und dabei mehr oder weniger überzeugende Ansätze bieten.

HTML- und CSS-Export aus Sketch: Slinky macht's möglich

Heute stelle ich euch das Sketch-Plugin Slinky aus dem Hause Finch.io vor. Slinky konzentriert sich auf den Export von Artboards zu HTML-E-Mail-Templates. Es ist kostenlos erhältlich und steht auf Github zum Download bereit.

Das Team von Finch.io arbeitet an einer Mac-App, die die Echtzeit-Bearbeitung von Websites über das Frontend erlauben soll. Die App wird derzeit in geschlossener Beta getestet. Erste Eindrücke vermittelt die Website zum Projekt. Hier könnt ihr schon mal ein bisschen mit dem Frontend-Editor spielen.

Slinky könnt ihr entweder über die Projektwebsite herunterladen oder über das immer beliebter werdende Werkzeug „Sketchpacks for macOS” installieren.

Sketchpacks hält euer Sketch-Umfeld aktuell. (Screenshot: t3n)

Das ebenfalls kostenlose Sketchpacks kümmert sich um die automatische Aktualisierung eurer Sketch-Plugins und bietet Zugriff auf die weite Welt der Sketch-Addons von einem zentralen Platz aus. Sehr nützlich ist auch die Möglichkeit, Plugins auf Wunsch in ihrer Version festzuschreiben. Immer wieder kommt es nämlich zu Kompatibilitätsproblemen zwischen Sketch und den verfügbaren Plugins.

Ist Slinky in Sketch integriert, ist die Verwendung recht einfach, wie die folgende Animation zeigt:

Slinky funktioniert theoretisch ganz einfach. (Quelle: Finch.io)

Slinky exportiert Artboards umstandslos nach HTML. Zwei Templates liefert das Tool gleich mit, eines für einen einspaltigen, eines für einen zweispaltigen Newsletter. Diese Templates solltet ihr als Basis für eigene Arbeiten nutzen. So kann ein Export beispielsweise aussehen.

Das solltet ihr beim Einsatz von Slinky beachten

Da sich Slinky auf die Erstellung von Newslettern konzentriert, erfolgt der Export stets als Tabelle, was die Flexibilität bei der Konzeption des Designs deutlich beschränkt. Sehr komplexe Tabellenstrukturen solltet ihr besser gar nicht erst versuchen.

Slinky exportiert auch Medienelemente, wenn diese innerhalb von Sketch ausdrücklich als exportierbar gekennzeichnet wurden. Bekannt sind Exportprobleme darüber hinaus beim Einsatz von Symbolen. Um Verlinkungen zu setzen, benennt ihr grafische Ebenen mit der URL, die beim Klick aufgerufen werden soll. URLs in Text-Ebenen wandelt Slinky automatisch in Links um. Was die Verwendung von Schriften betrifft, beschränkt ihr euch am besten auf überall verfügbare Systemschriften, da Slinky Custom Fonts nicht exportiert.

Designt ihr häufiger E-Mail-Newsletter mit Sketch, kann Slinky den Workflow geschmeidiger machen. Ihr solltet daher auf jeden Fall einen Blick darauf werfen.

Finde einen Job, den du liebst

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden