Automatisieren: Sketch Bilder Export ohne Sketch

Ich werde dir heute zeigen, wie du alltägliche Aufgaben wie den häufigen Export von Artboards in Sketch mit einem kleinen Tool automatisieren kannst. Dieses Tool wird mit Sketch mitgeliefert (mit welche du noch weitere Dinge erledigen kannst).

Das Problem

Sobald du deine Layouts und Designs in Sketch erstellt hast, hast du wahrscheinlich mehr als ein Dutzend Artboards. Alle Schritte, die damit verbunden sind, d.h. Minimierung der Anzahl der Ebenen, Auswahl von Zeichenflächen, separater Export von 1x, 2x und 3x, nehmen viel Zeit in Anspruch (besonders wenn du den Vorgang häufig wiederholst).

Eine mögliche Lösung

Glücklicherweise haben das Team von @bohemiancoding, die Entwickler des beliebten Design-Tools Sketch, mitgedacht und richtig geplant. Tatsächlich hat Sketch eine CLI (kurz für Command Line Interface in der Dev-Welt) namens Sketchtool.

Wenn du Sketch bereits installiert hast, spring zum nächsten Absatz. Ansonsten lade Sketch zuerst und gehe dann zum nächsten Schritt.

Wie man das Command Line Tool Sketchtool installiert

Das CLI kann nicht installiert werden, wie du normalerweise ein Programm installierst. Aber hey, wir wollen hier etwas lernen, oder? Also los. Es wird ziemlich cool.

Ein paar Dinge zu Kontext und Verständnis:

• Die Terminal-App (auf jedem Mac installiert) ist eine einfache textbasierte Möglichkeit, den Mac das tun zu lassen, was du normalerweise mit anderen Programmen mit der Maus machst
• Sobald du Terminal öffnest, landet der Cursor normalerweise immer automatisch in dem Stammordner deines Mac (Ordner "Benutzername")
• Von dort aus kannst du jegliche Kommandos ausführen

Die Installation

1. Um die native Terminal-App zu öffnen, drücke auf Ihrem Mac CMD+Space und gebe dann "Terminal" ein, drücke RETURN oder suche die App im Ordner "Applications". Es sollte sich ein leeres, weisses Fenster öffnen, in dem du oben links so etwas wie das hier siehst: MBP:/ andree$ oder MBP:~ andree$. MBP bezieht sich auf den Namen deines Mac und andree ist der Benutzername des Mac-Kontos (derjenige, mit dem du dich anmeldest).
2. Um die CLI von Sketch zu installieren, gebe sudo sh /Applications/Sketch.app/Contents/Resources/sketchtool/install.sh ein und drücke RETURN (beachte, dass sich in einer späteren Version der Dateipfad oben (/Applications/...) ändern könnte).
3. Wenn du nach deinem Mac-Konto-Passwort gefragt wirst, gebe es ein (genau wie bei der Anmeldung auf dem Mac). Hinweis: Das Password wird nicht im Klartext dargestellt.

Du solltest nun eine solche Textausgabe sehen (ab Version 3.8.1):

Screenshot 1: Nach der Installation von Sketchtool.

Sobald das erledigt ist, gebe ein sketchtool im Terminal ein und drücke RETURN. Du solltest genau sehen, was unten gezeigt wird.

Screenshot 2: Das Sketchtool ist nun installiert und kann von jedem Ordner auf dem Mac ausgeführt werden.

Das Sketchtool ist nun installiert und kann von jedem Ordner auf dem Mac ausgeführt werden. Beginnen wir mit dem richtig coolen Stuff!

Spare jeden Tag Zeit mit Sketchtool

Was du brauchst

• Die Mac App Terminal (Standard auf jedem Mac)
• Ein Finder Fenster eines aktuellen Projektes
• Eine .sketch Datei mit 4-5 Artboards in einem Projektordner

Note: Wenn du Fragen hast, frag mich via Twitter @andreehuk

Wenn Terminal geöffnet ist, zeigt es einen blinkenden Cursor. Du bist nun in einem Ordner auf deinem Mac. Du kannst nun den Befehl cd %folderName% verwenden, um in andere Ordner zu wechseln. %Ordnername% steht für den Namen des Ordners, der im Finder angezeigt wird. Um dies sehr einfach und unkompliziert zu gestalten, bietet der Mac einen Trick, um einfach zwischen Ordnern im Terminal zu wechseln:

• Gebe ein cd mit Leerzeichen
• Gehe zum Finder und suche den Ordner eines aktuellen Projekts, so dass den Ordnernamen im Finder siehst. Öffne diesen Ordner noch nicht
• Ziehe den Ordner mit der Maus in die Terminal-App, der Ordnerpfad wird dann automatisch vervollständigt
• Drücke RETURN, um diesen Ordner im Terminal zu öffnen

Screenshot 3: Klicke auf dieses Ordnerelement und ziehe es in Terminal.

Screenshot 4: Ich habe den Ordner auf das Terminal gezogen, der Ordnerpfad erscheint nach cd.

Screenshot 5: Nach dem Drücken von RETURN befinde ich mich nun im 'Testprojekt', wie unter 'MBP:Testprojekt andree$' gezeigt..

Note: Wann immer du $ siehst, kannst du nun einen Befehl eingeben oder ausführen

Pro Tip: Im Terminal, Cursor-up zeigt dir die letztens Befehle, sodass du diese nicht immer neu eingeben musst

Bei der Ausführung von sketchtool im Terminal Fenster wird dann die Hilfe zu dem Kommando gezeigt, z.B.:

• export artboards
• export layers
• export pages
• export slices

Der Befehl zum Exportieren (Standard: in das Verzeichnis, in dem sich die Datei .sketch befindet) aller Artboards lautet wie folgt:

$ sketchtool export artboards %fileName%

Ersetze %fileName% mit dem Namen der Sketch Datei, in meinem Fall:

$ sketchtool export artboards layouts.sketch

Der vorherige Befehl exportiert alle Artboards in 1x (Standard) und listet jeden Namen im Terminal auf.

Pro Tip: Wenn du eine Datei oder Ordner eingeben möchtest, gibst du das erste Zeichen ein und drückst TAB. Terminal vervollständigt den Dateinamen automatisch. Wenn du >1 Dateien hast, die mit dem gleichen Anfangsbuchstaben beginnen, tut das Terminal nichts, weil es nicht weiß, welche Datei du gemeint hast. Tippe einfach weiter den nächsten Buchstaben ein und drücke TAB erneut. Voilà.

Kann ich auch 2x oder 3x exportieren? Ja, ganz einfach. Gebe ein:

$ sketchtool export artboards layouts.sketch --scales=2x

$ sketchtool export artboards layouts.sketch --scales=3x

Du kannst 2 oder 3 in jede Zahl ändern, Sketchtool fügt die Skala automatisch an das Ende des Dateinamens an. Fantastisch. Ich habe selbst nichts über 10 ausprobiert, da der Export schon ewig gedauert hat.

Wenn du nicht möchtest, dass die Zeichenfläche selbst exportiert wird, sondern nur Objekte, die auf diesen Zeichenflächen liegen, kannst den folgenden Befehl ausführen. Es werden alle Zeichenflächen auf das kleinste mögliche Rechteck geschnitten, so wie ein Doppelklick auf eine Ebene in Photoshop (der dann das Zelt um Objekte im Dokument setzt).

$ sketchtool export artboards layouts.sketch --trimmed=YES

Wenn du möchtest, dass Zeichenflächen eine Hintergrundfarbe haben, führe aus:

$ sketchtool export artboards layouts.sketch --background=white

Du kannst white durch andere Farben ersetzen, wie black oder andere. Tatsächlich exportiert Sketchtool Zeichenflächen mit beliebiger Hintergrundfarbe, aber es muss im HEX-Code beschrieben werden, siehe diesen Link.

Pro tip: Man kann Kommandos wie --scales oder --background kombinieren.

Exportiere alle Artboards gleichzeitig

Um noch mehr Zeit zu sparen, habe ich ein superleichtes Skript 'e.sh' geschrieben, das alle Zeichenflächen in 1x, 2x und 3x mit einem transparenten Hintergrund (Standard) exportiert. Lade das Skript hier herunter und kopiere es in deinen Sketch-Projektordner (entweder über das Terminal oder den Finder).

Script e.sh:

#!/bin/bash

$ sketchtool export artboards $1 —scales=1x
$ sketchtool export artboards $1 —scales=2x
$ sketchtool export artboards $1 —scales=3x

Sobald sich das Skript in Ihrem Projektordner befindet, führe einfach Folgendes aus:

$ sh e.sh %fileName%

Ich habe den Skriptnamen kurz gehalten, um weniger tippen zu müssen.

Pro: Export aller Zeichenflächen auf einmal "On steroids":

Wenn du den Dateinamen nicht jedes Mal mit eineben willst, öffne das Skript in einem Editor wie TextEdit oder über das Terminal (Befehl unten) und tausche $1 mit dem .sketch Dateinamen aus. Wenn du dich im Projektordner im Terminal befindest, kannst du einfach den folgenden Befehl ausführen, um die Zeichenflächen in 1-3x für das aktuelle Projekt zu exportieren. Wenn du mehr als 1 .sketch Datei hast, öffne einfach das Skript und kopiere und füge die Sketchtool-Befehle dort ein und änder den Dateinamen entsprechend.