Dieser Beitrag zeigt, wie man aus Sketch JSON-Dateien ausliest.
Aktualisiert von 2020 –
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.
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-and-Drop hochgeladen und das JSON extrahiert.
Das Online-Tool sketch2json extrahiert JSON aus Sketch
Sketchtool
Sketch selbst bietet mit sketchtool ebenfalls eine Möglichkeit über die Kommandozeile (CLI).
Geschrieben von:
Raimund Büchner
Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.
Jonas Hellwig
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
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.
Unsere Agentur in Berlin unterstützt bei digitalen Projekten mit sehr unterschiedlichem Umfang. Mit Beratung, Gestaltung und Programmierung helfen wir Menschen in verantwortungsbewussten Unternehmen dabei, online zeitgemäß zu kommunizieren.
Von: 
