Zeplin Sketch Plugin – Die Workflow-Brücke zwischen Design und Engineering

Zeplin ist ein leistungsstarkes Tool für die Zusammenarbeit, das die Lücke zwischen Designern und Entwicklern schließt, indem es einen vernetzten Raum für Produktteams schafft.

Warum Zeplin?

Ein entscheidender Teil jedes Produktentwicklungspuzzles ist der Ort, an dem Design auf Entwicklung trifft. Wenn ein Design bereit ist, in die Entwicklungsphase (die „Übergabe“) überzugehen, müssen Ingenieure es verstehen und in Code übersetzen.

Zeplin erleichtert die Übergabe, indem Designs aus Sketch, Adobe XD, Figma und Photoshop übernommen und in ein Format exportiert werden, mit dem Codeausschnitte, Styleguides, Spezifikationen und Assets einfach generiert werden können.

Verabschieden Sie sich von den Zeiten des „Redlining“. Zeplin konzentriert sich ausschließlich auf die Verbesserung der Zusammenarbeit zwischen Produktdesignern und Entwicklungsteams und wird von führenden Produktteams bei Airbnb, Dropbox, Pinterest, Microsoft und vielen anderen verwendet.

Mit Zeplin müssen Sie keine Größen oder Ränder manuell aufschreiben, die Kopie eingeben und Symbole exportieren. Es ist einfach fantastisch und spart viel Zeit, um sich auf Designerkundungen zu konzentrieren. – Alex Potrivaev, Produktdesigner @Intercom

In einem unserer früheren Artikel sprach Toptal-Designer Micah Bowers über die Bedeutung eines standardisierten Designsprachensystems, um effizient über verschiedene Funktionen von Produktteams zu kommunizieren, die an digitalen Produkten arbeiten.

Durch die Versionierung von Design-Assets, die Erstellung von Komponentenbibliotheken und die Generierung von Living Style Guides kann ein in Zeplin portiertes Projekt als „Single Source of Truth“ für Produktteams dienen.

Wir betrachten Zeplin grundsätzlich als unsere Quelle der Wahrheit für die Zusammenarbeit mit Engineering. Wenn es nicht in Zeplin steht, ist es nicht offiziell. – Jason Stoff, Senior Designer, Digitale Produkte @Starbucks

Zeplin-Einschränkungen

Obwohl Zeplin viele hilfreiche Funktionen hat, ist es nicht perfekt. Zeplin bietet einen kostenlosen Plan an, der jedoch auf ein Projekt beschränkt ist. Beim Entwerfen für iOS und Android sind zwei separate Projekte erforderlich. An diesem Punkt wäre ein kostenpflichtiger Plan erforderlich.

Sobald der Arbeitsablauf mit Zeplin und Sketch (oder den anderen oben genannten Apps) verstanden ist, wird der Arbeitsablauf einfach. Zeplin hat jedoch eine gewisse Lernkurve, die einige Zeit und Aufmerksamkeit erfordert. Um einen allgemeinen Überblick zu erhalten und mehr über die Verwendung zu erfahren, sehen Sie sich das Zeplin-Demo-Video unten an:

Arbeiten mit Sketch und Zeplin: Schritte und Tipps

1. Beginnen Sie mit Zeplin.

• Erstellen Sie ein Zeplin-Konto, falls Sie noch keines haben. Sie können sich kostenlos anmelden: https://app.zeplin.io/register
• Laden Sie die Zeplin-Desktop-App für Mac oder Windows herunter.
• Laden Sie das Zeplin-Plugin für Sketch herunter.

2. Bereiten Sie Ihre Sketch-Datei vor.

• Nachdem Sketch und Zeplin nun einsatzbereit sind, richten wir unsere Sketch-Datei für einen nahtlosen Export nach Zeplin ein.
• Organisieren Sie Ihre Assets und Ebenen in Sketch mithilfe einheitlicher Namenskonventionen. Wenn Sie mit anderen Designern zusammenarbeiten, legen Sie Konventionen fest, die für alle in Ihrem Team funktionieren. Je nach Art des Projekts (z. B. iOS, Android oder Web) passt Zeplin die Namenskonvention der Assets automatisch an, sodass der Export zu einem Vorgang in einem Schritt wird.
• Erstellen Sie Symbole für gemeinsame Elemente und Assets in Sketch. Dadurch können Sie Komponenten in Zeplin einrichten.
• Speichern Sie Farben in Ihrer Palette „Dokumentfarben“ und Schriftarten als „Textstile“ in Ihrer Skizzendatei. Diese werden in Ihrem von Zeplin erstellten Styleguide angezeigt.

3. Machen Sie Assets in Sketch exportierbar.

• Dies ist ein sehr wichtiger Schritt. Sobald Ihre Assets in Symbole gruppiert sind, öffnen Sie die Seite „Symbole“ in Ihrer Skizzendatei.
• Klicken Sie auf eine Gruppe innerhalb eines Symbols, z. B. „ic-menu“ (das Ordnersymbol).
• Suchen Sie bei hervorgehobener Gruppe die Aktion „Exportierbar machen“ auf der unteren rechten Seite Ihres „Inspektors“ in Sketch und klicken Sie auf diese Option. Ein Slice-Symbol sollte jetzt neben dem Namen Ihrer Gruppe erscheinen.
• Dieser Schritt ermöglicht es Ingenieuren, Assets direkt aus Zeplin zu exportieren.

4. Erstellen Sie ein neues Projekt in Zeplin.

• Wählen Sie den Projekttyp aus, den Sie erstellen. Beachten Sie, dass Sie separate Projekte für iOS und Android haben sollten, auch wenn die Designs identisch sind. Dies liegt daran, dass Zeplin je nach Art des Projekts unterschiedlichen Code generiert.
• Wählen Sie die Projektauflösung, die Ihren Sketch-Zeichenflächen entspricht (z. B. 1x, 320 Pixel).

5. Exportieren Sie die Sketch-Zeichenflächen nach Zeplin.

• Markieren Sie in Sketch alle Zeichenflächen, die Sie nach Zeplin exportieren möchten.
• Gehen Sie zu Plugins > Zeplin > Ausgewählte exportieren… oder drücken Sie ⌃⌘E auf Ihrer Tastatur.
• Als Nächstes exportieren wir Symbole aus Sketch. Öffnen Sie die Seite Symbole in Sketch und markieren Sie alle Zeichenflächen. Nach Zeplin exportieren.

6. Organisieren Sie das Projekt in Zeplin.

• Nachdem sich Ihre Sketch-Zeichenflächen nun in Zeplin befinden, lassen Sie uns die Grafik in Abschnitte gliedern.
• Wählen Sie in der Dashboard-Ansicht Ihres Projekts ähnliche Bildschirme aus, um sie in Kategorien zu gruppieren. Klicken Sie nach der Markierung mit der rechten Maustaste und wählen Sie „Neuer Abschnitt aus Auswahl“. Wiederholen Sie dies, bis Ihre Zeplin-Datei richtig organisiert ist.

7. Verwenden Sie Komponenten in Zeplin.

Eine der vielleicht nützlichsten Funktionen von Zeplin ist die Möglichkeit, Assets in Komponentenbibliotheken zu organisieren. Dies ist wichtig, wenn die Designs eines Projekts von verschiedenen Teammitgliedern für mehrere Plattformen entwickelt werden. Die Vereinheitlichung des Designs ist unerlässlich, wie die Airbnb-Designerin Karri Saarinen in Building a Visual Language umreißt:

Ein einheitliches Designsystem ist unerlässlich, um besser und schneller zu bauen; besser, weil eine zusammenhängende Erfahrung für unsere Benutzer leichter verständlich ist, und schneller, weil sie uns eine gemeinsame Sprache gibt, mit der wir arbeiten können.

• Wählen Sie die Registerkarte „Styleguide“ oben in der Mitte von Zeplin (neben „Dashboard“).
• Wählen Sie auf der Registerkarte „Styleguide“ die sekundäre Registerkarte „Komponenten“. Hier sehen Sie alle Ihre aus Sketch exportierten Symbole.
• Organisieren Sie diese in Abschnitte wie „Symbole“, „Bilder“, „Gemeinsame Elemente“ usw. Hier erfahren Sie mehr über die Registerkarte „Komponenten“ Ihres Projekt-Styleguides in Zeplin.

8. Exportieren Sie Styleguides aus Zeplin.

• Suchen Sie in der Dashboard-Ansicht Ihres Zeplin-Projekts die Schaltfläche „Teilen“ in der oberen rechten Ecke der Anwendung.
• Wählen Sie „Teilen“ und suchen Sie dann unten im Menü nach „Szene“. Wählen Sie „Aktivieren“ und dann „Öffnen“. Dadurch wird ein dynamischer Styleguide für Ihr Projekt generiert. Teilen Sie die URL mit Ihrem Team.

9. Kommentieren Sie Ihre Entwürfe in Zeplin.

• Das Hinzufügen von Notizen zu Designs ist mit Zeplin ganz einfach. Wählen Sie in der Detailansicht eines Bildschirms das Symbol „Notiz hinzufügen“ aus und heften Sie Ihre Notiz an eine Komponente.
• Sie können eine Notiz hinzufügen, indem Sie Cmd ( Strg für Windows- und Linux-Benutzer) gedrückt halten und irgendwo auf den Bildschirm klicken.
• Sie können sogar andere Teamkollegen mit „@“ erwähnen und sie erhalten eine Benachrichtigung.

10. Zusammenarbeiten, teilen und die Versionskontrolle nutzen.

• Jetzt, da Ihre Zeplin-Datei bereit ist, mit Ihrem Team geteilt zu werden, laden Sie Benutzer über ihre E-Mail-Adresse ein oder senden Sie ihnen die Projekt-URL.
• Aktualisieren Sie Ihre Zeplin-Datei weiter, indem Sie Zeichenflächen aus Sketch exportieren.
• Zeplin kontrolliert automatisch die Version Ihrer Dateien und Sie können weiterhin mit Teammitgliedern zusammenarbeiten, indem Sie diese dynamische „Quelle der Wahrheit“ nutzen.

Fazit

Die Schaffung eines dynamischen, organisierten und kollaborativen Arbeitsablaufs zwischen Design- und Entwicklungsteams ist für die Entwicklung großartiger digitaler Produkte unerlässlich. Mit einer Workflow-Brücke wie Zeplin können Designer Bildschirme mit Anmerkungen versehen und die oft gefürchtete Übergabephase mit vollständigen und präzisen Spezifikationen erleichtern.

Die Flexibilität, Assets dynamisch von einer zentralen Quelle aus zu aktualisieren, wie z. B. ein Symbol in Sketch, das in eine Komponente in Zeplin exportiert wird, schafft eine enorme Flexibilität. Ingenieure können dann Assets einfach in nativen Code exportieren und so Zeit und Mühe sparen.

Während durchdachte UX und ästhetisch ansprechende Designs die Wurzel eines erfolgreichen Produkts sind, ist der Prozess, dieses Design in die Hände der Benutzer zu bringen, entscheidend.

Designer, die effizient arbeiten und sich auf eine einzige „Quelle der Wahrheit“ verlassen möchten, sollten den oben skizzierten Sketch to Zeplin-Workflow in Betracht ziehen. Die Leistung hinter der robusten Softwarebeziehung zwischen diesen beiden Designtools wird Designern und Entwicklungsteams dabei helfen, einfacher und zufriedener ans Ziel zu kommen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Adobe XD vs. Sketch – Welches UX-Tool ist das richtige für Sie?
• So erstellen Sie ein effektives Design-Framework (enthält ein kostenloses Sketch-UI-Framework)
• Dinge, die Sie vielleicht nicht über Typografie in Sketch wissen
• Kennenlernen der Sketch-Plugin-Entwicklung
• Erstellen Sie im Handumdrehen atemberaubende Illustrationen mit Sketch und Looper