Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Seminar: Sketch oder Seminar: Visual Prototyping

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).

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-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.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: