JSON aus Sketch-Datei extrahieren
Sketch ist als UX/UI-Design-Tool u.a. auch deshalb so populär, da Sketch-Dokumente sich leicht im Frontend weiterverarbeiten lassen. Eine dieser Möglichkeiten ist das Auslesen von JSON aus Sketch. Im Kern ist jede Sketch-Datei ein gezippter Ordner mit enthaltenen JSON-Dateien. Im Umkehrschluss können aus Code auch neue Sketch-Dokumente erzeugt werden, wie Airbnb mit react-sketchapp beeindruckend vorgemacht hat.
Sketch-Datei entzippen und öffnen
Um zu sehen was in einer Sketch-Datei steckt, reicht es die Sketch-Datei zunächst von der Dateiendung *.sketch auf *.zip umzubenennen. Anschließend kann das ZIP entpackt werden. Zum Vorschein kommt ein Ordner mit allen Dateien, die die Sketch-Datei ausmachen.
JSON im Browser aus Sketch auslesen
Mit dem Online-Tool sketch2json können Sketch-Files im Browser in JSON umgewandelt werden. Die Sketch-Datei wird per Drag an Drop hochgeladen und das JSON extrahiert.
Sketchtool
Sketch selbst bietet mit sketchtool ebenfalls eine Möglichtkeit über die Kommandozeile (CLI).
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
