kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Öffentliche Schulungstermine

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.

1. Sie Sketch-Datei. 2. Umbebannt in die Dateiendung zip. 3. Das entpackte Zip.

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.

Das Online-Tool sketch2json extrahiert JSON aus Sketch

Sketchtool

Sketch selbst bietet mit sketchtool ebenfalls eine Möglichtkeit über die Kommandozeile (CLI).

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.