Skip to main content

Migration einer globalen Designsystem-Bibliothek

Von Sketch zu Figma

von Antoniya Dimitrova

30.04.2024

Header Beitrag Figma to Sketch

Nachfolgend finden Sie eine ausführliche Untersuchung der wichtigsten Herausforderungen, die sich ergeben, wenn Sie aktuell Sketch für die Verwaltung Ihres Designsystems nutzen.

Wir werden uns auch auf einige Erkenntnisse konzentrieren und darauf, wie Sie eine erfolgreiche Migration zu Figma planen und umsetzen. Los geht’s!

Obwohl sowohl Sketch als auch Figma leistungsstarke Werkzeuge für die Erstellung und Pflege von Designsystemen bieten, beobachten wir in letzter Zeit die Tendenz, dass sich viele Unternehmen dazu entschließen, ihre Design-Assets von Sketch zu Figma zu migrieren.

Einschränkungen der Plattformen

Sie möchten, dass Ihr Designsystem allen Designer:innen, Entwickler:innen und Beteiligten, die am Entstehungsprozess der digitalen Produkte in Ihrem Unternehmen beteiligt sind, zur Verfügung steht. Das bedeutet, dass Sie es auf einer Plattform bereitstellen möchten, auf die jede:r zugreifen kann.

Sketch

Sketch ist eine Desktop-Anwendung, die ausschließlich für macOS entwickelt wurde. Das bedeutet, dass Teammitglieder, die auf anderen Betriebssystemen (wie Windows oder Linux) arbeiten, keinen direkten Zugriff auf die erstellten Designs haben, es sei denn Sie:

  • werden als Betrachter in den Online-Sketch-Arbeitsbereich eingeladen, der es ermöglicht, Entwürfe zu betrachten, zu kommentieren, zu prüfen und Assets kostenlos herunterzuladen. Dennoch können Sie nichts bearbeiten.
  • verwenden Tools von Drittanbietern wie Abstract, Zeplin oder InVision. Diese technische Einrichtung erhöht die Projektkosten und ermöglicht es Nicht-Mac-Benutzer:innen immer noch nicht, das Projekt zu bearbeiten.

Figma

Figma hingegen ist ein Cloud-basiertes Tool, auf das von jedem Betriebssystem mit einem modernen Webbrowser aus zugegriffen werden kann. Es ist auch als native Desktop-App verfügbar, die den Designer:innen die Möglichkeit bietet, offline zu arbeiten und ihre Änderungen zu synchronisieren, sobald sie ihre Internetverbindung wiederherstellen.

Darüber hinaus bietet Figma integrierte Prüf-, Kommentar- und Echtzeit-Kollaborationsfunktionen, die die praktischen Sitzungen mit den Beteiligten umfassender und die Entwicklungsübergabe effizienter gestalten.

Kollaboration

In der modernen Geschäftswelt, in der viele Teams an verschiedenen Orten der Welt arbeiten, ist die Möglichkeit, in Echtzeit gemeinsam an einer Datei zu arbeiten, eine wichtige Funktion.
Obwohl Sketch auch eine Echtzeit-Kollaborationsfunktion bietet, ist es viel einfacher, die Zusammenarbeit in Figma zu beginnen, weil:

  • Sie entweder einen direkten Link zu Ihrem Projekt bereitstellen oder Sie laden die Personen, mit denen Sie zusammenarbeiten möchten, per E-Mail über die Freigabeeinstellungen Ihrer Datei ein.
  • Sie müssen nichts auf Ihrem Computer installieren. Im Gegensatz dazu muss für Sketch eine kompatible Version der Sketch-App auf den Geräten aller Mitwirkenden installiert sein, was wertvollen Festplattenspeicher beansprucht und die Leistung Ihres Macs möglicherweise beeinträchtigt.

Die Zusammenarbeit ist für die ordnungsgemäße Pflege und Weiterentwicklung eines Designsystems von entscheidender Bedeutung. Die Projektdesigner:innen müssen in der Lage sein, die Herausforderungen, die sie erleben, und die möglichen Lösungen, die ihnen vorschweben, visuell zu erläutern, um sie dem Designsystemteam nahtlos zu vermitteln. Dies hat einen unschätzbaren Einfluss auf die Qualität des Entwurfssystems als Produkt.

Probleme mit Sketch

In den letzten Jahren sind wir bei der Pflege einer Sketch-Bibliothek für einen unserer Kunden auf zahlreiche Fehler gestoßen, die sich auf die Reaktionsfähigkeit von Symbolen auswirkten oder Probleme bei der Synchronisierung von Bibliotheken verursachten (z. B. verschwanden Symbole oder verknüpfte Bibliotheken wurden unsichtbar). Kurz vor der Migration zu Figma beschlossen wir, die Sketch-Updates für unsere Bibliothek und die Designprojekte einzufrieren, um das System bis zur Migration stabil zu halten.

Kosten im Vergleich

Der Gesamtbetrag pro Redakteursplatz in Figma ist immer noch geringer als das, was ein Team für Sketch und alle Tools von Drittanbietern zahlen muss, die die Zusammenarbeit und die Versionskontrolle in einer Designsystemumgebung erleichtern.

Wir sind sind mehr als nur Expert:innen – Unser engagiertes Team von Designer:innen, Entwickler:innen und Marketingspezialist:innen arbeitet Hand in Hand, um Ihre digitale Präsenz auf das nächste Leven zu heben.

Bereit für den nächsten Schritt?
Kontaktieren Sie uns und erfahren Sie mehr über unsere Dienstleistungen.

Unsere Tipps für die Migration

Nachfolgend finden Sie unsere Empfehlungen für die Migration Ihres Designsystems von Sketch zu Figma:

  1. Machen Sie sich einen Plan: Die Umstellung von Werkzeugen ist kein einfacher Prozess, denn sie hat große Auswirkungen auf die gesamte Organisation und ist kostenintensiv, auch wenn sie sich am Ende auszahlt. Sie sollten sorgfältig abwägen, wie viel Zeit und Mühe Sie im Vorfeld investieren müssen, um eine Migration zu Figma erfolgreich durchzuführen.
  2. Neuaufbau Ihrer Bibliothek in Figma: Leider ist es nicht möglich, Ihre *.sketch-Datei in Figma zu öffnen und sofort mit ihr zu arbeiten, da Sketch einige Einschränkungen bei der Art und Weise hat, wie Komponenten überschrieben werden. Fast jede Komponente, die aus Sketch importiert wird, bringt ein unnötiges Maß an Komplexität mit sich. Seien Sie klug und investieren Sie in einen sauberen Aufbau, indem Sie Komponenten von Grund auf neu erstellen, was später eine stabile Figma-Bibliothek gewährleistet.
  3. Teilen Sie Ihre Bibliothek auf: Teilen Sie Ihre Design-Assets in verschiedene Figma-Dateien auf, die bestimmte Teile Ihres Design-Systems abdecken. Dadurch wird die Leistungsfähigkeit Ihrer Bibliothek erhöht.
  4. Erstellen Sie Präsentationstafeln
    Verwenden Sie eine separate Datei außerhalb Ihres Entwurfssystemprojekts in Figma, in der Sie den vollen Umfang der Komponenten zeigen und eine Übersicht über alle Zustände und Stile erstellen. Dies wird eine gute Vorschau auf die verborgenen Möglichkeiten einer Figma-Komponente geben (nützlich für Entwickler:innen und neue Designer:innen), sowie die Konsistenz zwischen Design und Code sicherstellen. Außerdem dient die Datei als Dokument zur Fehlerbehebung bei eventuell auftretenden Fehlern und kann eine Quelle der Wahrheit für Geschäftsinteressenten sein, die eine Erweiterung des gegenwärtig im Designsystem angebotenen Angebots planen.
  5. Erstellen Sie einen Zeitplan für die Migration und kommunizieren Sie ihn offen: Ein klarer Migrationsplan schafft Vertrauen in den Prozess für alle Beteiligten. Kommunizieren Sie ihn rechtzeitig und bereiten Sie die Teams im Voraus vor, indem Sie einen Archivierungsprozess für die Sketch-Dateien anbieten.
  6. Wählen Sie die ersten Migrationsteams aus: Je nach Größe Ihres Unternehmens kann es zu einer Überforderung führen, wenn zu viele Teams gleichzeitig migrieren. Fangen Sie klein an und erweitern Sie mit der Zeit den Support für die Sketch-Bibliothek, bis die vollständige Migration zu Figma abgeschlossen ist.
  7. Team On-boarding & Unterstützung: Stellen Sie sicher, dass Sie auf allen Kommunikationskanälen, die Sie in Ihrem Unternehmen nutzen, Unterstützung anbieten. Stellen Sie eine spezielle Task Force zusammen, die sich um offene Fragen und Anliegen kümmert. Bieten Sie wöchentliche Sitzungen an, in denen Sie komplexere Themen vertiefen können.

Lassen Sie uns gemeinsam migrieren!

Von den aktuellsten Branchen-Trends, über neueste Insights zu KI und UX/UI-Design, bis hin zu spannenden Use Cases.

Melden Sie sich für unseren monatlichen Newsletter an und bleiben Sie immer up to date!