Painting with Code

Airbnb stellt Library React Sketch.app Open Source

Mascha Schnellbacher

AlesiaKan / Shutterstock.com

Airbnb will eine Brücke zwischen Designern und Programmierern schlagen: Mit der Library React Sketch.app lassen sich React-Komponenten schreiben, die zu Sketch-Dokumenten gerendert werden.

Denkt man an Airbnb kommen einem erst mal Begriffe wie Städtereise und Roadtrip in den Sinn. An eine JavaScript-Bibliothek denkt man wohl eher nicht.

Doch das Designteam von Airbnb belehrt uns eines besseren: Die betriebsinterne Bibliothek React Sketch.app steht ab sofort Open Source zur Verfügung.

React Sketch.app – Designer & Coder zusammenbringen

Wie es der Name React Sketch.app schon ankündigt, lassen sich mit der Library React-Komponenten schreiben, die direkt nach Sketch gerendert werden können. Auf diese Weise legt das Airbnb-Team „the paintbrush in the hands of the engineer“.

Ingenieure und Designer können vielleicht in kleineren Projekten ohne Design-Systeme zurecht kommen, aber für große Unternehmen bedeutet eine Ignoranz solcher Systeme immer eine Gefahr. Airbnb beispielsweise hat eine Menge Ressourcen in die Entwicklung von Design-Komponenten gesteckt, die im ganzen Unternehmen angewendet werden können. Doch trotz dieser Planung hatte das Unternehmen immer noch damit zu kämpfen, sein iteratives Design-System mit Sketch-Templates synchron zu halten.

Design-Systeme sind quasi die Design-DNA jedes Unternehmens, das über mehrere Produktdesign-Teams verfügt. Wenn also z. B. ein Airbnb-Team ohne mit dem für Bewertungen zuständige Team zu kommunizieren an der Listings-Page arbeitet, kann das schnell ganz schön schief gehen.

Bei jedem Produkt kann eine einzige neue Design-Regel das Aussehen von unzählig vielen Dinge ändern. Und zwar von so vielen Dingen, dass man diese nicht mehr sinnvoll nachverfolgen kann. Wenn aber Sketch-Renderings sofort mit nur den Code-Änderungen aktualisiert werden könnten, kann ein solches Bottleneck verringert werden. Genau hier kommt die React-Sketch.app-Library zum Einsatz.

Sketch & React im Einsatz

Die Verwaltung der Assets von Design-Systemen in Sketch ist komplex, fehleranfällig und zeitaufwendig. Sketch ist zwar skriptfähig, aber das API ändert sich oft. Im GIF ist zu sehen, wie Airbnb seine React-Sketch.app-Bibliothek unter Nutzung des Google Translate API implementiert, um Variationen von Text in verschiedenen Sprachen, aber mit dem gleichen Design zu rendern.

Mithilfe des Google Translate API automatisch Text in verschiedene Sprachen übersetzen

Die Umsetzung dieser Aufgaben in React hat den Vorteil, dass die Vorgehensweise JavaScript-Entwicklern bereits vertraut ist. React bietet den perfekten Wrapper, um so einfach wiederverwendbare Dokumente zu erstellen.

We’re investing in code as a design tool. Moving closer to working with assets that don’t only include layout and design, but also logic and data. This helps bridge the gap between engineers and designers, thus reducing the need for design specs – or redlines – and the steps between vision and reality.
– Alex Schleifer, Head of Design bei Airbnb

Ursprünglich war die Library als Werkzeug zur Reduzierung der Gesamtentwurfs- und Entwicklungszeit bei Airbnb gedacht. Doch wenn Programmierer auf die gleiche Weise mit Designs interagieren können, wie sie es typischerweise mit Code tun, eröffnen sich ganz neue Möglichkeiten. React Sketch.app steht Open Source auf GitHub zur Verfügung.

Name React Sketch.app
Projektwebsite http://airbnb.io/react-sketchapp/
GitHub https://github.com/airbnb/react-sketchapp

Verwandte Themen:

Geschrieben von
Mascha Schnellbacher
Mascha Schnellbacher
Mascha Schnellbacher studierte Buchwissenschaft und Deutsche Philologie an der Johannes Gutenberg-Universität Mainz. Seit Juni 2015 arbeitet sie als Redakteurin in der Redaktion des Entwickler Magazins bei Software & Support Media. Zuvor war sie als Lektorin in einem Verlag sowie als freie Editorin tätig.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.