Veröffentlicht am 6. Februar 2018 von Robert Klank

Kollaboratives Arbeiten mit Sketch – Libraries optimal nutzen

Designprojekte sind mittlerweile so komplex, dass selten ein Designer allein ein ganzes Projekt betreut. Da somit die Arbeit in Teams erfolgt, sollte die Arbeitsweise möglichst kollaborativ sein. Mit ein wenig Aufwand ist das auch in Sketch möglich. Während in verknüpften Einzeldateien Komponenten erarbeitet werden, können diese parallel in den finalen Dokumenten genutzt werden. Dies erlaubt ein dynamischeres Arbeiten, da Mitarbeiter nicht auf die Zuarbeit des Anderen warten müssen. Mit der neuen Bibliothekenfunktion beschert Sketch ein mächtiges Werkzeug für kollaboratives Design, welches wir, bei UCDplus, bereits intensiv nutzen.

Sketch-Libraries ermöglichen den Zugriff auf externe Dateien, und dadurch das unabhängige Aktualisieren von Inhalten. Eine Library ist dabei eine herkömmliche Sketch-Datei, die ohne zusätzliche Plugins direkt in eine weitere Sketch-Datei eingebunden wird.

Hinzufügen einer Sketch-Library

In der Masterdatei wird, über das Menü Sketch > Preferences > Libraries, das Einstellungsfenster geöffnet und über den „Add Library“-Button die einzubindende Quelldatei hinzugefügt:

Sketch Bibliothek hinzufügen

Anschließend kann über den „Symbol hinzufügen“-Dialog auf importierte Libraries zugegriffen werden. Eine detaillierte Beschreibung bietet auch dieser Artikel. Ein Hinweis oben rechts zeigt zudem an, wenn sich die Quelldatei verändert hat und aktualisiert nach Bestätigung alle Komponenten.

Vorteile

  • übersichtliche Dateien, inhaltlich aufgeteilt
  • einbinden externer Libraries
  • projektübergreifende Nutzung von Bibliotheken (z.B globale Icondatei, Brand Colors eines Kunden…)
  • Synchronisation der Inhalte während des Arbeitens
  • Arbeitsteilung innerhalb eines Projektes möglich

Probleme

  • etwas Zeitverzögerung in der Synchronisation
  • zeitgleiches Öffnen einer Quell-Library auf zwei Computern führt zu Fehlern und muss daher abgesprochen werden
  • verschachtelte Symbole zeigen vereinzelt noch Fehlverhalten
  • keine Unterstützung von Text- oder Layerstilen, aktuell nur Übernahme von Symbolen

Quelldatei erstellen

Eine Library wird wie eine normale Sketch-Datei angelegt. Alle erstellten Symbole werden beim Import in das übergeordnete Zieldokument übernommen. Bei mehreren Libraries sollte daher auf inhaltliche und namentliche Doppelungen geachtet werden. Wir haben einheitliche Schreibregeln entwickelt, um die gemeinsame Arbeit zu erleichtern.

Kleiner Sonderfall: Da Libraries über den Pfad verknüpft werden, dürfen sich deren Dateinamen und Verzeichnisse nicht ändern. Es empfiehlt sich daher eine Versionierung in einem extra Archivordner, an einem zentralen Speicherort (Server / NAS).

Library nachträglich erstellen

Wenn es bereits Elemente in der Masterdatei gibt, welche eigentlich in eine Bibliothek gehören, hilft das Move to Library Plugin. Es übergibt Symbole aus der aktuellen Datei an eine Library und ersetzt Symbole auf den Seiten gegen Verknüpfungen mit der Bibliothek.

Verschachteln – Wenn das Ziel zur Quelle wird

Die sogenannten Nested Symbols funktionieren auch über Library Grenzen hinaus. Einzelne Bestandteile (atoms) einer Library können in einer Library kombiniert (molecules), und wiederum in einer weiteren Library verwendet werden (organism). Entsprechend können Bestandteile eines Symbols auch aus vererbten Inhalten bestehen. Das folgende Bild visualisiert ein Nested Symbol, bei dem ein Button auf eine Iconbibliothek zugreift, welche wiederum externe Farben einbindet. Bei der ausschließlichen Integration der Buttondatei, kann vom globalen Design Dokument auf untergeordneten Library Komponenten zugegriffen werden.

Erweiterte Kollaboration im Design

Im Designprozess bedeuten separierte Inhalte eine bessere Zusammenarbeit zwischen Disziplinen. Der UI Designer kann in seiner globalen Sketch-Datei Ergebnisse entwickeln, während Kollegen zuarbeiten können. Diese erweitern parallel die Iconbibliotheken, Farben und Elemente, wie Buttons, in jeweils eigenen Dateien. Weitere Möglichkeiten visioniert auch dieser Artikel. Es ist zudem denkbar, dass Projektzuarbeiter ohne tieferes Designverständnis mithilfe der Quelldateien erste Skizzen im kundenkonformen Stil erstellen können, ohne dass versehentlich in Originaldateien eingegriffen wird. Sketch-Libraries schaffen damit einen offeneren und agileren Designprozess.

 

Unsere Sketch-Reihe:

1. Teil: Effizienter Arbeiten mit Sketch – Emojis haben doch einen Sinn
2. Teil: Kollaboratives Arbeiten mit Sketch – Libraries optimal nutzen
3. Teil: Mit verschachtelten Symbolen zum Sketch Experten
4. Teil: Button-Hack – Erscheint am 20. Februar 2018
5. Teil: Nützliche Sketch Plug-Ins – Update (in Arbeit)

Schon etwas älter, unser Artikel zu Sketch-Plug-Ins: http://www.interaction-design.de/2016/02/23/sketch-plugins/