Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 51

Versionskontrolle für Webdesigner: So wird die Finalisierung von Projekten einfacher

Seite 2 / 2

 Konkret sieht der Workflow mit Abstract wie folgt aus: Zu Beginn muss ein Projekt in Abstract angelegt und die Sketch-Dateien – sofern diese bereits vorhanden sind – importiert werden. Ansonsten können Dateien auch direkt aus Abstract erstellt werden. Dabei erzeugt Abstract automatisch den Master – die „Single source of truth”. Um die Datei zu bearbeiten, legen Designer zuerst einen neuen Branch an, indem sie im Menü „New Branch” einen Namen vergeben (beispielsweise „App Design Kickoff”). Es empfiehlt sich, die Branches anhand der jeweiligen Funktionen, Bereiche oder Iterationen zu erstellen. Daraufhin erzeugt Abstract eine Eins-zu-Eins-Kopie des Masters.

Um nun mit der eigentlichen Arbeit zu beginnen, müssen Designer die Dateien immer via Abstract und den Menüpunkt „Edit file in Sketch“ öffnen. Tun sie dies nicht, kann Abstract die Änderungen auch nicht erkennen, commiten und abgleichen. Sobald es erste Änderungen in der Datei gibt, die der Nutzer wie gewohnt speichert, zeigt das Abstract-Plugin am unteren Rand von Sketch die Info „Preview and Commit“. Per Klick auf diesen Button exportiert Sketch den neuen Stand der Datei in Abstract, zeigt eine Vorschau aller Artboards und öffnet das sogenannte „Commit Overlay“.

Jede Änderung muss erst durch einen Commit bestätigt werden, bevor sie in den Master überführt wird. (Screenshot: Abstract)

Jeder Commit sollte einen kurzen, möglichst aussagekräftigen Titel erhalten, zum Beispiel „Button-Farbe angepasst”. Dazu sollte eine optionale Beschreibung kommen wie „Aus Grün wird Rot”. Auch der Text im Bereich „Commit Message“ sollte so konkret wie möglich sein, damit Team-Mitglieder die Nachricht nachvollziehen können. Nachdem ein Designer den ersten Commit erstellt hat, protokolliert Abstract ihn in der linken Spalte und zeigt ihn auf der rechten Seite im Hauptbereich an. Später können alle im Team jederzeit auf jeden beliebigen Commit zugreifen und auch wiederherstellen. Alle Dateien speichert Abstract dabei lokal in einem temporären, von ihm erstellten Ordner und synchronisiert sie nach jedem Commit mit den Abstract-Servern. Nachdem alle notwendigen Änderungen vorgenommen und commitet sind, muss der Designer den Branch „App Design Kickoff“ in den Master mergen, sodass Abstract alle Branches von dort aus aktualisieren kann.

Abstract im Team

Am interessantesten ist Abstract sicherlich dann, wenn mehrere Designer gemeinsam an ein oder mehreren Dateien arbeiten. Hier zeigt die Lösung ihre wahren Stärken und Vorzüge. Meist legt ein Designer die erste Datei in Sketch an, alle anderen kopieren sich diese anschließend, um von nun an gleichzeitig daran zu arbeiten. Oder, noch schlimmer, sie arbeiten nacheinander an derselben Datei und speichern ihren Stand in immer neuen Versionen ab. All dies ist mühselig und vor allem auch fehleranfällig.

Abstract ist hier der wesentlich bessere Weg. Der Workflow bleibt im Grunde wie oben beschrieben, Designer können zeitgleich an derselben Datei arbeiten – genau genommen ist es nicht dieselbe, da jeder eine automatisch erstellten Kopie der Ausgangsdatei erhält. Außerdem kann jeder Designer in eigenen Branches und Sub-Branches arbeiten. Sobald ein Designer beispielsweise mit der Arbeit an einem Feature oder einer Änderung fertig ist, kann er den Branch sowie den Sub-Branch zusammenlegen und somit den Master oder Parent-Branch aktualisieren. Alle Änderungen hebt Abstract dabei hervor.

Nun kann es natürlich passieren, dass zwei Designer gleichzeitig am selben Element arbeiten. In diesem Fall ist leider noch immer etwas Handarbeit und ein gutes Auge notwendig. Abstract erkennt die Unterschiede in beiden Dateiversionen und zeigt sie in einer Vergleichsansicht. Anschließend muss manuell angegeben werden, welche Version korrekt ist. Die nicht gewählte Änderung verwirft Abstract, sie ist somit nicht mehr in der aktuellsten Dateiversion. Besser ist es – selbst mit der smartesten Versionskontrolle – das Team spricht sich vorher ab, wer wann woran arbeitet. Damit erspart es sich so ein Szenario.

Wo es noch mehr Potenzial gibt

Abstract hilft einzelnen Designern und auch Design-Teams, ihren Workflow zu optimieren. Dennoch läuft auch in einem so guten Werkzeug wie Abstract nicht alles perfekt oder immer so, wie man sich das vorstellt. Hin und wieder haben App und Plugin so ihren Schluckauf. Das führt dazu, dass Sketch abstürzt oder das Werkzeug relativ lange für die Synchronisierung der Dateien braucht. Gerade sehr große Sketch-Dateien, die 100 Megabyte und größer sind, können die Performance beim Hoch- und Herunterladen beeinträchtigen. Der aktuelle Stand der Arbeit ist aber immer lokal gespeichert und, über einen temporären Ordner,direkt aus Abstract erreichbar.

Dazu kommt das Thema Datenschutz: Wie viele andere Dienstleister aus den USA speichert auch Abstract die Dateien zur Synchronisation in der Cloud. Dabei greift es auf AWS von Amazon zurück. Somit ist nicht garantiert, dass Dateien auf deutschem Boden bleiben. Sind Datenschutz und Sicherheit in einer Firma ein wichtiges und sensibles Thema, sollten Designer wohl abwägen, ob Abstract die richtige Lösung ist. Im Zweifelsfall muss es bis Mitte diesen Jahres warten, denn dann soll die Enterprise-Lösung erscheinen, die Unternehmen selbst hosten können.

Darüber hinaus ist das Konflikt-Magement von Abstract noch ausbaufähig. Bei so genannten „Non-Visual Changes“ – also etwa minimalen Positionsänderungen eines Elements – kann es noch recht mühsam sein zu entscheiden, welche Version denn nun die richtige ist. Meist sind dies dann aber auch zu vernachlässigende Abweichungen. Abstract-CEO Josh Brewer hat beim Sketch Hackathon in Berlin aber auch schon Optimierungen in diesem Bereich versprochen.

Alternativen zu Abstract

Abstract ist kostenpflichtig: 9 US-Dollar im Monat pro Nutzer. Neben Abstract gibt es noch ein paar andere, nennenswerte Lösungen und Plugins für die Versionsverwaltung mit Sketch. Sie alle bauen auf demselben Grundprinzip auf und sind daher auch im Handling ähnlich. Sie unterscheiden sich jedoch teilweise in den Funktionen und auch bei den Kosten.

Plant

Plant ist – im Gegensatz zu Abstract – ein reines Plugin, das sich in der rechten Spalte von Sketch einnistet. Das ist einerseits praktisch, da Designer so jederzeit alle Funktionen direkt auswählen können. Andererseits ist es aber auch umständlich, weil es an der gleichen Stelle wie andere Plugins „sitzt“ – etwa „InVision Craft“ – und somit relativ viel Platz einnimmt. Außerdem zeigt Plant die eigentlichen Dateien und Änderungen aktuell nur in der Web-App. Plant setzt ebenfalls auf ein Abomodell. Die kostenlose Version ist auf wenige Projekte und Nutzer beschränkt, die Pro-Versionen beginnen bei 12 US-Dollar im Monat.

Kactus

Kactus ist eine Mac-App des Programmierers Mathieu Dutour, der seit 2017 zum Kern-Entwicklerteam von Sketch gehört und schon zuvor diverse Plugins geschrieben hat. Anders als Abstract oder Plant setzt Kactus einen Github-Account und grundlegende Git-Kenntnisse voraus. Die App selbst macht einen recht übersichtlichen Eindruck und ist stark an das Github-Interface angelehnt. Neben der Gratis-Version gibt es eine Premium- und eine Enterprise-Version für 5 sowie 12 US-Dollar pro Monat.

Fazit

Vor allem Teams sollten für die Einführung von Abstract oder einem anderen Versionierungswerkzeug gemeinsame Workshops zu den Grundlagen und den Änderungen des Workflows durchführen. Je weniger Erfahrung Designer mit dem Prozess der Versionskontrolle haben, desto ungewohnter und schwieriger kann der Einstieg sein. Es lohnt sich daher auf jeden Fall, alle abzuholen und eine gewisse Grundstruktur zu definieren, an der sich das gesamte Team orientieren sollte. Doch die Mühe lohnt sich. Denn es gibt nun endlich adäquate, zeitgemäße und performante Lösungen für Webdesigner.

Startseite
  • Seite:
  • 1
  • 2

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden