Versionierung im Design: So verlieren Sie sich nicht in tausend Layouts

- Kollegen, ist die Datei project_lastVersion genau endgültig? Oder project_lastVersion_1?

„… Ist das eine



vertraute Situation? Ich bin mir sehr sicher, besonders wenn Sie in einem Team mit anderen Designern arbeiten. Normalerweise müssen Sie mehrere verschiedene Versionen von Dateien erstellen, deren Anzahl vom Projekt, den Änderungen und anderen Faktoren abhängt, und die Kopfschmerzen stellen alle diese Versionen fest.



In dem Artikel werde ich über die relevantesten und am häufigsten verwendeten Versionskontrolloptionen sprechen, nämlich: Zeplin (+ Skizze), Figma, Zusammenfassung (+ Skizze), dh ich werde die Funktionen und Merkmale dieser Tools beschreiben, die sich speziell auf die Versionierung beziehen.







Warum die Versionskontrolle im Design wichtig und notwendig ist



  1. , , . : , ;
  2. , ( ) , «project1», «project1.1», «project_1», «project1_lastVersion» . ( ), ;
  3. ;
  4. Aus dem vorherigen Absatz folgt, dass es bei der Zusammenarbeit wichtig ist zu verstehen, wer genau und wann die Änderungen vorgenommen wurden und was sie sind.


Dies sind nur einige Situationen, in denen die Verwendung eines Versionskontrollsystems den Entwicklungsprozess beschleunigen und Herzstillstand vermeiden kann, wenn alles weg zu sein scheint. Als nächstes werde ich über die Vor- und Nachteile von Tools zur Versionskontrolle sprechen, mit denen ich mich in meiner Arbeit befassen musste.



Zeplin + Skizze



Am einfachsten zu bedienen ist Zeplin. Um damit zu arbeiten, muss der Designer nur die Änderungen in der funktionierenden Skizzendatei speichern und die Zeichenflächen von Sketch nach Zeplin exportieren. Zeichenflächen werden in Zeplin angezeigt. Sie können in Abschnitte gruppiert werden, Elementstile anzeigen, Symbole, Bilder usw. herunterladen sowie einen Styleguide bilden, der aus einer Palette von Farben, Textstilen, Abständen zwischen Elementen, Komponenten / Symbolen besteht.



Die Vorteile der Verwendung von Zeplin sind folgende:



  1. Wie bereits erwähnt, einfache Bedienung - Sie müssen nur die ausgewählte Zeichenfläche exportieren.
  2. Fähigkeit, Zeichenflächen zu kommentieren;
  3. Kommentarbenachrichtigungen, die per E-Mail

    eingehen und in Zeplin selbst angezeigt werden ;
  4. Die Möglichkeit, 1 Projekt kostenlos zu erstellen und so viele Teilnehmer hinzuzufügen, wie Sie benötigen.




Wie jedes Werkzeug hat Zeplin seine Nachteile:



  1. Achten Sie beim Ändern einer Zeichenfläche, die zuvor in Sketch nach Zeplin exportiert wurde, auf deren Namen. Gleichnamige Zeichenflächen ersetzen sich beim Exportieren automatisch. Wenn sich der Name der exportierten Zeichenfläche jedoch von dem zuvor in Zeplin geladenen unterscheidet, wird diese Zeichenfläche als neue in die Anwendung exportiert und ersetzt nicht die irrelevante Version. Unaufmerksamkeit beim Exportieren von Zeichenflächen kann einige Zeit in Anspruch nehmen, um zu überprüfen, ob die Namen der Zeichenflächen übereinstimmen.
  2. Sketch Zeplin , . (), , ( ), , Sketch-, ;
  3. ,

    Zeplin;
  4. , , ;
  5. Zeplin , , Zeplin ;
  6. Sketch Zeplin owner.




Figma



Figma wird aufgrund seiner attraktiven Funktionalität aktiv in die Arbeit von Designern eingeführt. Dieses Tool ist universell einsetzbar - hier finden Sie Design, Prototyping und Versionskontrolle.



Was kann es in Bezug auf die Versionierung tun?



  1. Figma unterstützt die gleichzeitige Arbeit mehrerer Designer am selben Projekt. Nach dem Öffnen des gewünschten Projekts kann der Benutzer die Namen der Kollegen sehen, die gleichzeitig Änderungen vornehmen und das Projekt neben der Zeichenfläche / den einzelnen Elementen anzeigen.
  2. Versionsverlauf (oder Verlaufsversion), damit Sie sehen können, wer wann Änderungen vorgenommen hat, zu einer früheren Version zurückkehren und Informationen zur ausgewählten Version bearbeiten können;
  3. Kommentar, Komponentenbeschreibung;
  4. Figma kann als Anwendung auf einem PC und in einem Browser verwendet werden.




Figma hat zu wenige Nachteile, aber die wichtigsten sind:



  1. Der Versionsverlauf (dieselben Informationen zur Versionierung) in einem kostenlosen Konto wird nur 30 Tage lang bereitgestellt.
  2. Es gibt keine Vergleichsmodi, wie zum Beispiel in Abstract.




Zusammenfassung + Skizze



Abstract arbeitet wie Zeplin mit Sketch und ist im

Gegensatz zu beispielsweise Figma speziell für die Versionierung vorgesehen.



Abstract hat genug Vorteile:



  1. Zusammenarbeit mehrerer Designer gleichzeitig an einer Datei;
  2. Cloud-Speicherung von Dateien;
  3. Verwenden Sie es sowohl als unter MacOS installiertes Programm als auch in einem Browser

    auf jedem PC.
  4. Synchronisierte Arbeit mit Teammitgliedern, mit der Sie die

    an der Überprüfung vorgenommenen Änderungen senden können . Änderungen können akzeptiert oder abgelehnt werden.
  5. Möglichkeit, Kommentare und Anmerkungen zu hinterlassen und Benachrichtigungen darüber zu erhalten;
  6. Die Möglichkeit, Dateien miteinander zu vergleichen - Abstract bietet zwei Vergleichsmodi.
  7. Aktivitätsdatenstrom, mit dem Sie anzeigen können, wer was wann geändert hat.




Unter den Nachteilen möchte ich Folgendes herausgreifen:



  1. Bezahlte Nutzung. Abstract bietet eine kostenlose Testversion (nur 30 Tage für die Verwendung mit Sketch) und eine 14-tägige Demo für Adobe XD. Diese Zeit reicht jedoch aus, um sich mit dem Instrument vertraut zu machen, mit dem Team zusammenzuarbeiten und zu verstehen, ob Abstract zweckmäßig ist oder nicht.
  2. Derzeit wird eine Vollversion für die Arbeit nur für Sketch + Abstract bereitgestellt, dh sie ist für MacOS geeignet. Wie bereits erwähnt, wird Abstract

    auf Adobe XD erweitert, es gibt jedoch bisher nur eine Beta-Version.




Was für die Versionskontrolle zu wählen



Dies hängt von dem Tool ab, mit dem der Designer an dem Projekt arbeitet. Ich benutze sowohl Sketch als auch Figma in meiner Arbeit. Nachdem ich jedoch 3 verschiedene Versionskontrolloptionen in Betracht gezogen habe, nämlich Sketch + Zeplin, Figma, Sketch + Abstract, finde ich Abstract am funktionalsten, sodass ich die Versionierung genauer betrachten werde.



Ist das Tablet Magic Abstract



Abstract ist eine Art GitHub für Designer. Das Funktionsprinzip besteht darin, dass der Designer eine zuvor erstellte Skizzendatei in Abstract lädt (diese Datei ist eine Masterdatei, dh sie enthält die relevantesten Zeichenflächen / Elemente und Informationen zum Projekt). Mehrere Designer können gleichzeitig an einer Masterdatei arbeiten. Genauer gesagt arbeitet jeder Designer in seiner eigenen Kopie (Zweig) der Masterdatei. Wenn Sie fertig sind, muss der Zweig für Abstract festgelegt werden. Das Festschreiben des Zweigs ist ein Muss, da nur so die am Zweig vorgenommenen Änderungen gespeichert und zu Abstract hinzugefügt werden können. Das Festschreiben wirkt sich in keiner Weise auf den Inhalt der Masterdatei aus, bis die Zusammenführung erfolgt (mit anderen Worten, Zusammenführung). Sie können nicht nur einen Zweig mit einer Masterdatei zusammenführen, sondern auch einen Zweig mit einem Zweig.







In Abstract können Sie wie in Zeplin und Figma Elementstile anzeigen sowie verwendete Symbole und Bilder herunterladen.



Darüber hinaus wird im Abschnitt Eigenschaften angezeigt, in welchem ​​Stil sich das ausgewählte Element derzeit in der Masterdatei befindet und welcher Stil derselbe ist, der jedoch im aktuellen Commit geändert wurde.







Eine Masterdatei kann mehrere Zeichenflächen enthalten. Bei Änderungen werden alle Änderungen im Hintergrund gespeichert. Sie müssen nur den Zweig festschreiben, mit dem der Designer gearbeitet hat, und alle Änderungen werden in Abstract angezeigt. Geänderte Zeichenflächen oder einzelne geänderte Elemente sind mit dem Symbol Bearbeitet gekennzeichnet. Dank dessen muss der Designer keine große Anzahl von Dateien mit unterschiedlichen Versionen des Projekts erstellen, da alles klar gespeichert und an einem Ort angezeigt wird.







Wie bereits erwähnt, bietet Abstract Vergleichsmodi.



Der erste Vergleichsmodus ist nebeneinander - wenn sich die Zeichenfläche aus der Masterdatei und die geänderte Zeichenfläche aus dem Zweig nebeneinander befinden.







Der nächste Vergleichsmodus ist Overlay - wenn sich die Zeichenfläche aus der Masterdatei und die geänderte Zeichenfläche aus dem Zweig überlagern und alle Änderungen auf einem weißen Hintergrund angezeigt werden.







Darüber hinaus verfügt Abstract über weitere nützliche Funktionen, z. B. können Sie Skizzenbibliotheken synchronisieren, Sammlungen erstellen - Sätze von Zeichenflächen, die Sie Kollegen präsentieren müssen.



Der Aktivitätsdatenstrom enthält die vorgenommenen Änderungen, Kommentare, das Erstellen von Zweigen, Festschreibungen, Zusammenführungen und andere Aktualisierungen. Es zeigt, wer, wann und was genau geändert, hinzugefügt, kommentiert, genehmigt oder abgelehnt, zusammengeführt usw. wurde.







Zeplin, Figma und Abstract machen es schneller und einfacher, Projekte nicht nur für Designer, sondern für alle Teammitglieder zu bearbeiten. Am erfolgreichsten sind meiner Meinung nach jedoch Figma und Abstract (Abstract in größerem Umfang aufgrund der Funktionalität und Informativität in Bezug auf die Versionskontrolle). Mit ihnen müssen Teammitglieder nicht viel Zeit für Besprechungen und Chat-Diskussionen aufwenden, um herauszufinden, welche Änderungen an den Layouts vorgenommen wurden und wo sie suchen müssen, um sie anzuzeigen. Die Verwendung der Versionskontrolle in irgendeiner Form verbessert die Zusammenarbeit zwischen Teammitgliedern, das Projektverständnis und beschleunigt bestenfalls die Entwicklung.



In diesem Artikel habe ich bei weitem nicht alle vorhandenen Versionskontrolloptionen im Design berücksichtigt, sondern die bekanntesten und am häufigsten verwendeten. Wenn ein Team von mehreren Designern an einem Projekt arbeitet, sollten Sie eine Versionierung in Abstract oder Figma in Betracht ziehen. Zeplin eignet sich besser für einzelne Arbeiten, wenn Sie nicht zusammen und gleichzeitig mit anderen Kollegen an derselben Datei arbeiten müssen. In jedem Fall tut es nicht weh, jedes dieser Tools auszuprobieren.



All Articles