Zu Hauptinhalten gehen

Insider-Leitfaden für eine nahtlose Figma-Migration

Stilisierte Illustration eines Workflows mit abstrakten Formen, Häkchen und Pfeilen, die einen dynamischen Designprozess darstellen.Stilisierte Illustration eines Workflows mit abstrakten Formen, Häkchen und Pfeilen, die einen dynamischen Designprozess darstellen.

Mit einer Migration ändern sich nicht nur die Tools, sondern auch die Arbeitsweise. Designer Advocate Clara Ujiie erläutert in diesem Leitfaden die einzelnen Schritte und gibt Einblicke und nützliche Tipps für einen reibungslosen und erfolgreichen Wechsel.

Insider-Leitfaden für eine nahtlose Figma-Migration teilen

Hero von Derek Abella.

Die Migration zu einem neuen Design-Tool wie Figma umfasst eine durchdachte Reihe von Schritten, angefangen bei der Planung und Kommunikation über die Neuorganisation und das Onboarding bis hin zur Anpassung der Arbeitskultur. Ein solcher Wechsel geschieht nicht von heute auf morgen. Als Designer Advocate habe ich bereits zahlreiche Teams durch den Prozess geführt. Ein guter Einblick in die Organisation ist nützlich, um einen nahtlosen und erfolgreichen Wechsel zu Figma sicherzustellen. Natürlich ist eine Migration immer mit einem gewissen Aufwand verbunden, der jedoch als strategische Investition in die zukünftige Produktivität betrachtet werden sollte.

Migration zu Figma planen

Änderungsmanagement (Change Management): Wichtig ist, den Wechsel strategisch vorzubereiten und die Mitarbeitenden, Teams und Organisationen während des Änderungsprozesses zu begleiten und zu unterstützen. Schließlich müssen sie mit neuen Ressourcen und Geschäftsprozessen, geänderten Budgetzuweisungen oder anderen neuen operativen Verfahren umgehen lernen.

Herzlichen Glückwunsch zum Wechsel zu Figma zu! Wichtig ist zunächst, die wesentlichen Beweggründe für die Veränderung zu verstehen, wie etwa die Verbesserung der Zusammenarbeit und Transparenz sowie die Optimierung von Prozessen. Wer den Grund für eine Veränderung kennt, kann diese leichter annehmen. Berücksichtige vor allem auch, dass die Veränderung jedes einzelne Teammitglied betrifft, weshalb ein gutes Änderungsmanagement definitiv hilfreich ist.

Fürsprache-Team zusammenstellen

Dieses Team wird vermutlich auch mit Figma zusammenarbeiten. Wenn du die Migration zu Figma erwägst, kontaktiere mich (Clara) gerne auf Twitter oder wende dich an unser Vertriebsteam.

Ein Fürsprache-Team für Figma zu haben, ist für eine erfolgreiche Migration essenziell. Gewinne dafür am besten Vertreter aus unterschiedlichen Abteilungen wie Entwicklung, Produktmanagement und anderen Stakeholder-Gruppen. Dieses Team ist entscheidend, um ausgewogenes Feedback zu erhalten, einen für alle geeigneten Figma-Arbeitsbereich zu schaffen, die unternehmensweite Kommunikation zu managen und die Übertragung der Bibliotheken zu beaufsichtigen.

Unternehmen wie Wells Fargo, Uber und JPMorgan Chase sind für diese Strategie beispielhaft. Bei Wells Fargo wurde der interne Wechsel von einem Team aus Figma-Experten und -Begeisterten geleitet (letztere erhielten den Spitznamen „Figma Jedis“). Uber verband zunächst einen bestehenden Designsystem-Workshop mit einer grundlegenden Figma-Schulung und Demos und integrierte Figma nach und nach in seinen Workflow. JPMorgan Chase gewann als „Advocates“ Teammitglieder, die von ihrem Designsystem begeistert waren, sowie diverse Führungskräfte und abteilungsübergreifend zuständige Mitarbeitende. Diese Beispiele verdeutlichen, wie wichtig motivierte Teammitglieder aus unterschiedlichen Bereichen als Basis für einen erfolgreichen Wechsel sind.

Funktionsübergreifende Unterstützung gewinnen

Hand, die Figma-Socken hältHand, die Figma-Socken hält

Hier ein paar wertvolle Einblicke von Adam Noffsinger.

Adam Noffsinger ist Senior Product Designer für Design Systems bei Dropbox. In seinem Artikel Design Tooling at Scale erzählt er von der Migration zu Figma.

Eine neue Lösung muss nicht nur dem Designteam gefallen. Wichtig ist auch, dass Entwickler, Produktmanager und Stakeholder für die Veränderung sind. Bei Dropbox stellten der damalige Design Manager Kyle Turman und Staff Design Program Manager Sarah Lin zusammen mit ihrem Team einen Vorschlag für die Führungsebene zusammen, indem sie die Vor- und Nachteile des Wechsels auflisteten. Um die restlichen Mitarbeitenden des Unternehmens für die Idee zu gewinnen, veranstalteten sie unter anderem gemeinsam Workshops, teilten Best Practices und boten Frühzugriff auf Bibliotheken und Komponenten. Und ja, es wurde auch unfassbar viel Figma-Swag verteilt.

Handschriftlicher Text „Figma – Migration – Toolkit“ neben einem stilisierten Flussdiagramm vor einem Hintergrund mit violettem FarbverlaufHandschriftlicher Text „Figma – Migration – Toolkit“ neben einem stilisierten Flussdiagramm vor einem Hintergrund mit violettem Farbverlauf

Sieh dir mein Figma-Migrations-Toolkit an, um zu erfahren, wie du von anderen Tools zu Figma migrieren kannst.

Von anderen Teams lernen

Der Austausch mit Teams anderen Team, die bereits erfolgreich umgezogen sind, kann enorm helfen. Martin Hardee unterstützt große Unternehmen bei der Migration zu Figma. Als Martin als Head of Design Frameworks bei Wells Fargo eine umfangreiche Figma-Einführung plante, fragte er sich zuerst, wie sich eine effektive und reibungslose Bereitstellung im großen Maßstab sicherstellen ließe. Er nahm daraufhin Kontakt zu Kolleg*innen bei anderen großen Unternehmen auf, die bereits ähnliche Migrationen durchgeführt hatten. Sie teilten bereitwillig ihre eigenen Erkenntnisse und Best Practices für eine erfolgreiche Migration, wie Schulungen, Playbooks und anderes Material (und erzählten auch, was er nicht tun sollte). Einiges davon erläutert Martin in seinen Tipps für die Design-Skalierung mit Figma.

Was erwartet dich genau? Hör dir in diesem Livestream an, was Workday, Uber und Dropbox berichten.

Zeitplan für die Migration festlegen

Erstelle den idealen Zeitplan und berücksichtige dabei die Teamverfügbarkeit und das Ablaufdatum bestehender Tools. Steht die Jahresplanung bevor oder laufen Abonnements aus? Diese Termine sollten unbedingt berücksichtigt werden und beeinflussen deine Strategie. In meinem Figma-Migrations-Toolkit findest du eine Vorlage für einen Zeitplan, die du gerne nutzen kannst. Oder erstelle mit der Gantt-Diagrammvorlage in FigJam deinen eigenen Zeitplan.

Abstrakte Illustration eines Projektmanagementplans mit verschiedenen Spalten für die unterschiedlichen Phasen. Querbalken in Hell- und Dunkelviolett, Grün und Orange stellen Aufgaben oder Schritte dar.Abstrakte Illustration eines Projektmanagementplans mit verschiedenen Spalten für die unterschiedlichen Phasen. Querbalken in Hell- und Dunkelviolett, Grün und Orange stellen Aufgaben oder Schritte dar.

Mit Gantt-Diagrammen kannst du die Planung für dein Team, Projekte und vieles mehr visuell darstellen. Fun Fact: Wir haben mit dieser Vorlage FigJam geplant. Designer Advocate Luis Ouriach hat damit auch diesen Migrationsplaner für Figma erstellt.

Effektiven Kommunikationsplan erstellen

Erstelle neben dem Zeitplan für die Migration auch einen detaillierten Kommunikationsplan. Du wirst vermutlich mehrere Ankündigungen an verschiedene Teams senden müssen, um sie während des Prozesses auf dem Laufenden zu halten. Diese können unter anderem Folgendes betreffen:

  • Informationen bezüglich eines möglichen Tool-Wechsels
  • Einladung zur Teilnahme an einem Pilotprogramm für die neuen Tools
  • Entscheidungen bezüglich der Einführung von Figma
  • Ankündigungen für Workshops (mit ansprechenden Demos, um die Begeisterung zu fördern)
  • Informationen über spezielle rollenbasierte Anwendungen
Eine Tabelle mit unterschiedlich farbigen Zellen vor einem gepunkteten Hintergrund als Darstellung eines Projektmanagement- oder Design-LayoutsEine Tabelle mit unterschiedlich farbigen Zellen vor einem gepunkteten Hintergrund als Darstellung eines Projektmanagement- oder Design-Layouts

Mit diesem Kommunikationsplan kannst du eine Übersicht für dein Team erstellen, wann und wie neue Projektinformationen bereitzustellen sind und wer darüber informiert werden soll.

Die Art der Ankündigungen kann variieren. Manchmal ist eine komplette Präsentation sinnvoll, während bei anderen eine Nachricht über einen Teamkanal reicht. Biete für jede Art passende Kommunikationsmethoden an. Als das Team von Help Scout den offiziellen Wechsel zu Figma vorbereitete, erklärte Buzz Usborne, einer der damaligen Chefdesigner, Figma in einem 20 Minuten langen Demo-Video. Er erläuterte darin grundlegende Dinge wie die Verwendung des Tools und welche Vorteile es bietet. „Das Video wurde ein Hit und half definitiv, anfängliche Skeptiker für den Wechsel zu gewinnen“, erklärt Buzz.

Wie bei jeder Kommunikation sind auch hier regelmäßige Erinnerungen ausschlaggebend: Lieber einmal zu oft auf etwas hinweisen als einmal zu wenig. Sorge dafür, dass du und dein Team für Fragen zur Verfügung stehen und organisiere regelmäßig Meetings, um alle auf dem Laufenden zu halten. Egal, ob ihr asynchron oder persönlich – Klarheit sorgt für ein Gefühl von Sicherheit. „Wir haben alle verfügbaren Kommunikationskanäle genutzt“, erklärt Andrew Garber-Browne, Vice President und DesignOps Program Manager bei JPMorgan Chase. Sein Team stellte fest, dass sich in den Firmen-Chats von selbst verschiedene Communitys bildeten, in denen sich Designer*innen und Entwickler*innen regelmäßig in offenen Gesprächen austauschten, Fragen stellten und über den aktuellen Stand informierten.

Migrationsprozess vorbereiten

Nachdem du alle Stakeholder an Bord geholt hast, beginnt die eigentliche Arbeit. Theoretisch könntest du einfach nur alle Dateien von deinem bisherigen Tool importieren und weitermachen. Dabei würde dir jedoch die wertvolle Chance entgehen, deine Dateien und Prozesse zu optimieren, indem du etwa die Bibliothek aufräumst, Anpassungen an Code Repositorys durchführst oder klare Richtlinien erstellst. Dies ist eine hervorragende Gelegenheit für einen frischen Start.

Hier kommt dein Fürsprache-Team für Figma ins Spiel. Der große Vorteil von Figma sind die effizienten Funktionen für die Zusammenarbeit. Außerdem helfen grundlegende Elemente wie Variablennamen, Variablenmodi, Komponenteneigenschaften, Varianteneinrichtung, Dateistruktur, Verzweigungsnamen und Teamstruktur, Figma nahtlos in deine Workflows zu integrieren. Es hat sich auch bewährt, den Dev Mode mit den Entwickler*innen durchzugehen, um sicherzustellen, dass die im Designsystem und in den Bibliotheken eingerichteten Variablen, Modi und Komponentennamen gut auf die Entwicklung abgestimmt sind.

Vor einem dunklen Hintergrund steht der Text „Best practices“ gefolgt von „Workspace structure and recommendations“, und daneben ist eine Grafik mit Feldern zur Workspace-Struktur dargestellt.Vor einem dunklen Hintergrund steht der Text „Best practices“ gefolgt von „Workspace structure and recommendations“, und daneben ist eine Grafik mit Feldern zur Workspace-Struktur dargestellt.

Dieser von Designer Advocate Luis Ouriach erstellte Leitfaden für die Workspace-Struktur eignet sich hervorragend als Einstieg in die Organisation deiner Teams und Dateien. (Hinweis: Er ist für Unternehmenspläne ausgelegt.) Alternativ kannst du auch diese Vorlage von Joey Banks, einem begeisterten Figma-Nutzer, verwenden, um eine Übersicht der Teamnamen, einschließlich Beschreibungen und Symbolen, zu erstellen und mit deinem Team zu teilen.

Hinweis: Achte bei der Vorbereitung des Migrationsprozesses darauf, dich nicht in Details zu verlieren. Manches kannst du auch später erledigen. Organisiere jedoch am besten gleich alle Dinge, die bei späterer Bearbeitung zu erneuten Prozessänderungen führen würden. Sämtliche grundlegenden Entscheidungen sollten ebenfalls stets kommuniziert werden (am Besten zum Kommunikationsplan hinzufügen).

Vor einem dunklen Hintergrund steht der Text „Best practices“ und darunter „Design system structure“. Daneben ist eine Seitenleiste mit den Elementen „Alert“, „Header“, „Footer“ und „Textarea“ angezeigt, die durch ein Flussdiagramm verknüpft sind.Vor einem dunklen Hintergrund steht der Text „Best practices“ und darunter „Design system structure“. Daneben ist eine Seitenleiste mit den Elementen „Alert“, „Header“, „Footer“ und „Textarea“ angezeigt, die durch ein Flussdiagramm verknüpft sind.

Du möchtest Tipps zur Strukturierung deines Designsystems? In diesem Community-Beitrag erläutert Figma Designer Advocate Luis Ouriach, wie du dein Designsystem für Teams, Projekte und Dateien mit jedem beliebigen Figma-Abo aufbauen kannst.

Kyle Turman berichtet, dass bei Dropbox während der einmonatigen Migration von Sketch zu Figma nicht nur die Dateien übertragen wurden, sondern sie auch die Chance nutzten, um das Designsystem zu optimieren, bestehende Probleme zu beheben und Verbesserungen vorzunehmen. Durch die besser zugänglichen und teilbaren Dateien kann jetzt dezentraler gearbeitet werden. Durch die Aktualisierung war speziell auch eine effiziente Übernahme von Bibliotheken möglich. Änderungen in übergeordneten Bibliotheken werden nahtlos zu untergeordneten Bibliotheken kaskadiert, was die Konsistenz sicherstellte und die Aktualisierung des Designsystems erheblich erleichterte. In-App-Kommentare ermöglichten ein direktes, informelles Feedback.

Bei JPMorgan Chase betrachtete man den Wechsel als Chance, Design-Altlasten aufzuräumen. Ein frischer Start erwies sich langfristig als zeiteffizienter, als mit den früheren Designs fortzufahren. Andere Teams haben im Rahmen der Migration zu Figma umfangreiche Aktualisierungen an ihrem Designsystem vorgenommen, um die einzigartigen Komponenten und Funktionen nutzen zu können.

Auch Martin Hardee betont, wie wichtig eine selektive Migration ist, und rät davon ab, veraltete Designs zu migrieren. „Ist es wirklich notwendig, ein Design von vor drei Jahren zu übertragen?“, fragt er. „In der Regel macht es mehr Sinn, das Designsystem in Figma neu aufzubauen und nur aktuelle oder kürzlich abgeschlossene Projekte zu behalten. Unternehmen stellen oft fest, dass sie in der Tat deutlich weniger migrieren müssen, als sie anfänglich dachten.“ Bei diesem strategischen Ansatz wird auf Qualität und Relevanz statt Quantität gesetzt.

Der Migrationsprozess kann eine wichtige Gelegenheit für dein Team sein, deine bestehenden Designsysteme zu bewerten und zu optimieren. Dabei lassen sich auch Ineffizienzen der bisherigen Designprozesse beheben. Nutze daher den Wechsel, um Verbesserungsvorhaben für dein Designsystem umzusetzen. Vielleicht kannst du jetzt endlich Design-Token implementieren, die Token-Struktur überarbeiten oder alle deine Bibliotheken einer eingehenden Prüfung unterziehen. Jetzt kannst du deine To-do-Liste abarbeiten und neu starten.

Dein Team in Figma einarbeiten

Nachdem das Gros der Migration zu Figma erledigt ist, stelle das Tool deinem gesamten Team vor. Anstatt den Mitarbeitenden die Verwendung des neuen Tools einfach aufzuoktroyieren, haben Dropbox und Uber ihre Teams zunächst mit Figma vertraut gemacht. Dropbox veranstaltete einen Workshop für seine Entwickler*innen, UX Writer und Designer*innen. Auf einer Microsite stellte das Unternehmen zudem nützliche Tipps sowie Leitfäden für den Einstieg bereit, die es während seiner Hack Week entwickelt hatte. Uber veranstaltete „Figma 101“-Workshops, in denen die Funktionen des Tools erläutert wurden, wie etwa die Vorteile der Zusammenarbeit in Echtzeit sowie des aktiven Dialogs durch Feedback und Kommentare.

Ähnlich ging Wells Fargo vor und organisierte Demos und Workshops, um die Lernkurve zu vereinfachen. Zu Beginn gab es mehrmals in der Woche offizielle Sprechzeiten, bis alle Teammitglieder mit Figma vertraut waren. „Sobald alle mit Figma vertraut sind und beginnen, die Vorteile zu schätzen, werden die Fragen speziell zum Tool weniger und die Mitarbeitenden wollen mehr generell zum Designsystem und zu Designmustern wissen“, erklärt Martin, dem dies bereits bei zahlreichen Unternehmen aufgefallen ist. Diese Phase ist entscheidend, um die Vertrautheit und Neugier zu fördern und die allgemeine Akzeptanz sicherzustellen.

Weitere Tipps für die Einarbeitung deines Teams in Figma:

  • Figma in die Dokumentation integrieren: Füge allen internen Ressourcen Beschreibungen von Figma hinzu, sodass diese leicht auffindbar und zugänglich sind.
  • Figma für das Onboarding verwenden: Implementiere Figma in Onboarding-Materialien wie Organigramme und Teampraktiken für neue Mitarbeitende.
  • Figma-Schulungs-Hub einrichten: Füge in Figma einen Bereich mit Videos, Tutorials, Testumgebungen und anderen Ressourcen hinzu. Verwende dafür sowohl Community- als auch Internet-Quellen zusammen mit unternehmensspezifischem Schulungsmaterial.

Die beiden Produktdesignerinnen Justyna Sieczka und Alicja Gancarz haben diese Workshop-Vorlage für Entwickler mit Folien, Daten und einem E-Book zusammengestellt.

  • Onboarding-Workshops organisieren: Biete Workshops für das Team-Onboarding mit verschiedenen Schulungsplänen für unterschiedliche Rollen an.
  • Sprechzeiten abhalten: Plane feste Bürozeiten ein, in denen die Mitarbeitenden Fragen stellen können und individuelle Unterstützung erhalten.
  • An Branchenveranstaltungen teilnehmen: Nimm mit deinem Team an Branchenveranstaltungen oder Figma-Events teil.
  • Kontinuierliches Lernen fördern: Führe Programme und Rituale ein, um Tipps und Fertigkeiten innerhalb des Teams auszutauschen. (Wie wäre es beispielsweise mit Figma Fridays?)
  • Mit der Figma-Community interagieren: Rege dein Team zur Teilnahme an der breiteren Figma-Community an, um die Weiterbildung und den Informationsaustausch zu fördern.

Vorbereitung des kulturellen Wandels

Der Wechsel zu Figma ist mehr als nur das Erlernen eines neuen Tools. Er läutet einen grundlegenden Wandel der Arbeitsplatzkultur ein, in dem Zusammenarbeit und Offenheit im Vordergrund stehen. Isolierte Arbeitsbereiche weichen einer einheitlicheren, transparenteren Umgebung, die neben der Aneignung von technischem Wissen auch eine Anpassung der Arbeitskultur erfordert.

Nach meiner Erfahrung mit verschiedenen Migrationen ist die anfängliche Skepsis gegenüber Figma nicht auf die technische Komplexität, sondern den damit einhergehenden kulturellen Wandel zurückzuführen. Designer*innen und Produktentwickler*innen sind in der Regel von Natur aus neugierig und lassen sich schnell auf neue Technologien ein. Der kulturelle Wandel durch die verstärkte Zusammenarbeit, die Figma bei der Produktentwicklung ermöglicht, kann jedoch Herausforderungen mit sich bringen. Wells Fargo verzeichnete beispielsweise nach der Migration eine verstärkt synchrone und asynchrone Zusammenarbeit zwischen Design-, Entwickler- und Produktteams. Auch bei JPMorgan Chase hat sich die Rolle von UX von einem serviceorientierten Ansatz hin zu einer strategischeren Partnerschaft neu definiert, was die Zusammenarbeit und Effizienz deutlich steigerte.

Jede Figma-Migration birgt ihre eigenen Herausforderungen und Erfolge. Mit einem strategischen Plan, robusten Partnerschaften und Offenheit gegenüber Neuem kann der Wechsel zu Figma jedoch eine äußerst lohnende Erfahrung sein und dein Team für zukünftige gemeinsame Erfolge starkmachen.

Du möchtest mehr erfahren? Sieh dir unseren Best-Practice-Leitfaden für die Migration zu Figma an oder wende dich an unser Team, um persönliche Unterstützung zu erhalten.

Mit Figma kreativ sein und zusammenarbeiten

Kostenlos loslegen