Adobe XD nach Figma migrieren: Möglichkeiten, Grenzen und Schritt-für-Schritt-Anleitung

Was ist Adobe XD?

Adobe XD ist ein vektorbasiertes Design-Tool von Adobe für das Entwerfen und Prototyping von Benutzeroberflächen und Nutzererlebnissen (UI und UX). Typische Einsatzbereiche sind:

• Wireframes und Layouts für Websites und Apps
• Klickbare Prototypen mit Verlinkungen, Übergängen und Animationen (Auto-Animate)
• Design-Systeme mit Komponenten, Zuständen und wiederverwendbaren Stilen
• Abstimmung mit Kunden und Teams über freigegebene Links und Kommentare
• Übergabe von Design-Spezifikationen an die Entwicklung

Ein besonderer Vorteil von XD ist die enge Integration in die Adobe-Welt: Dateien aus Photoshop und Illustrator lassen sich direkt weiterverwenden, und über Creative Cloud Libraries können Farben, Zeichenformate und Grafiken programmübergreifend geteilt werden. Auch die Zusammenarbeit im Team ist in XD möglich. Hier ist Figma allerdings ebenfalls stark und wird häufig eingesetzt.

Warum ein Umstieg von Adobe XD auf Figma sinnvoll sein kann

Mitte September 2022 kündigte Adobe an, Figma für rund 20 Milliarden US-Dollar zu übernehmen, und beide Unternehmen hatten sich dafür bereits vertraglich geeinigt.^[1] Adobe hat XD anschließend im Mai 2023 in den Wartungsmodus versetzt, während die geplante Übernahme von Figma noch lief.^{[2, 3]} Auf den Support-Seiten bestätigt Adobe, dass XD weiterhin in diesem Modus bleibt: Bestehende Kunden unterstützt Adobe, indem es Fehler behebt und Sicherheits- und Datenschutzanforderungen aktualisiert.^{[4, 5]} Im Dezember 2023 scheiterte die Übernahme von Figma dann an den Bedenken der Wettbewerbsbehörden in der EU und in Großbritannien.^[6] Das bedeutet: keine neuen Funktionen, und die Zukunft von Adobe XD bleibt offen.

Figma hat sich als browserbasiertes Design-Tool etabliert und wird von vielen Teams für die Zusammenarbeit in Echtzeit eingesetzt. Trotzdem gibt es gute Gründe, weiter mit XD zu arbeiten, etwa die enge Integration in die Adobe-Welt. Ob und wann ein Umstieg sinnvoll ist, hängt vom jeweiligen Projekt ab. Wer sich dafür entscheidet, erfährt in diesem Beitrag, ob es einen offiziellen Migrationsweg gibt, welche Wege in der Praxis funktionieren, was dabei verloren geht und wie Schritt für Schritt vorzugehen ist.

Adobe XD nach Figma migrieren: Gibt es einen offiziellen Weg?

Kurz gesagt: nein. Weder Adobe noch Figma bieten einen offiziellen Konverter oder eine native Importfunktion für XD-Dateien an. Diese Anleitung kommt deshalb bewusst ohne Zusatzwerkzeuge aus und nutzt nur den SVG-Export von XD und den Import in Figma. Wer automatisieren möchte, findet im Abschnitt „Hinweis: Kostenpflichtige Konverter“ zwei Drittanbieter-Tools.

Was von der Migration zu erwarten ist (und was nicht)

Eine verlustfreie 1:1-Übertragung gibt es nicht. Realistisch ist mit diesen Einschränkungen zu rechnen:

• Interaktionen und Animationen (Verlinkungen, Auto-Animate, Overlays, Scroll-Gruppen) gehen beim SVG-Weg komplett verloren.
• Komponenten und Zustände werden beim SVG-Weg zu normalen Gruppen. Zustände von Komponenten und Wiederholungsraster (Repeat Grids) müssen in Figma neu aufgebaut werden.
• Stile fehlen. Farben und Zeichenformate kommen als feste Werte an, nicht als Styles oder Variablen.
• Responsives Verhalten (Responsive Resize, Stacks, Padding, fixierte Positionen) wird nicht übertragen. In Figma werden Constraints und Auto Layout neu gesetzt.
• Mehrzeilige Texte kommen beim SVG-Import häufig als einzeilige Textrahmen an. Die Zeilenumbrüche sind dann hart gesetzt, und der Text umbricht nicht mehr automatisch.
• Schriften können zum Problem werden. Adobe Fonts stehen in Figma nicht automatisch zur Verfügung, und Zeilen- sowie Zeichenabstände weichen oft ab.
• Effekte wie Hintergrundunschärfe, Schatten, Verläufe, Masken und Füllmethoden können anders aussehen und sollten einzeln geprüft werden.

Diese Einschränkungen sind kein Grund, auf die Migration zu verzichten. Sie sind aber der Grund, warum sich eine gründliche Vorbereitung lohnt.

Schritt-für-Schritt-Anleitung

Schritt 1: Bestandsaufnahme und Sicherung

Vor jeder Änderung den Ist-Zustand sichern:

1. Die XD-Datei nicht nur in der Cloud, sondern auch lokal sichern (Datei → Lokal speichern) und an einem sicheren Ort archivieren. Sie dient als Referenzstand.
2. Alle Zeichenflächen zusätzlich als PDF sowie als PNG oder JPG exportieren. So lässt sich das Design auch ohne XD später noch ansehen und mit Figma abgleichen, falls XD irgendwann eingestellt werden sollte. Das ist auch deshalb wichtig, weil der SVG-Export von der Darstellung in XD abweichen kann, vor allem bei Schriften, die nicht standardmäßig auf dem System installiert sind (zum Beispiel Adobe Fonts) und ins Projekt geladen wurden.
3. Dokumentieren, was nicht automatisch übertragen wird: Welche Interaktionen gibt es? Welche Komponenten mit mehreren Zuständen? Welche Overlays und Scroll-Bereiche?
4. Alle verwendeten Schriften inklusive Schnitte notieren und prüfen, welche davon aus Adobe Fonts oder anderen Quellen stammen.

Schritt 2: XD-Datei aufräumen

Je sauberer die ursprüngliche XD-Datei, desto besser das spätere Import-Ergebnis in Figma. Das gilt besonders für die Struktur: Alle Namen und Gruppierungen werden nach Figma übernommen. Steht in der XD-Datei „Rechteck 1“, „Rechteck 2“ und „Gruppe 14“, findet sich dasselbe später in Figma wieder und muss von Hand nachbenannt werden.

• Ungenutzte Zeichenflächen, versteckte Ebenen und sonstige nicht benötigte Elemente löschen.
• Alle Zeichenflächen, Ebenen, Objekte, Elemente und Komponenten sprechend benennen, zum Beispiel „Header/Logo“, „Button/Primär“ oder „Hero/Bild“, statt „Rechteck 1“ oder „Gruppe 7“. Zusammengehörige Elemente logisch gruppieren und ordnen, zum Beispiel pro Seitenbereich.
• Textformate und Farben vereinheitlichen, damit sich in Figma schnell Styles daraus ableiten lassen.
• Prüfen, ob Wiederholungsraster vorher in einzelne Elemente aufgelöst werden sollten, um das Ergebnis besser kontrollieren zu können.

Schritt 3: SVG-Export in Adobe XD

1. In XD den Export-Dialog öffnen (Datei → Exportieren) und die Zeichenflächen (Artboards) auswählen, die übertragen werden sollen.
2. Als Format SVG wählen.
3. Die Exportoptionen prüfen. Empfohlene Einstellungen:
4. Formatierung: Präsentationsattribute
5. Bilder speichern: Einbetten
6. Dateigröße: deaktiviert für „Optimiert (Minified)“
7. Pfadoptionen: deaktiviert für „Konturlinie“

Schritt 5: SVG-Import in Figma

1. Einen neuen Design-Entwurf in Figma erstellen.
2. Die exportierten SVG-Dateien per Drag-and-drop auf die Figma-Arbeitsfläche ziehen. Jede Datei wird als Frame mit Ebenen angelegt. Alternativ lässt sich über Datei → Bild platzieren die SVG-Datei auswählen.
3. Die Frames in Figma auf Seiten anordnen, zum Beispiel pro Bereich oder pro Seitentyp der Website.

Welche Vorteile bringt die Migration von XD nach Figma?

• Zukunftssicherheit: Figma wird aktiv weiterentwickelt, XD befindet sich im Wartungsmodus.
• Zusammenarbeit in Echtzeit: Mehrere Personen arbeiten gleichzeitig in derselben Datei und kommentieren direkt im Design. Das spart Feedback-Schleifen mit Kunden.
• Browserbasiert und plattformübergreifend: Figma läuft im Browser und lässt sich damit unabhängig vom Betriebssystem nutzen.
• Leistungsfähigeres Komponentensystem: Varianten, Auto Layout und Variablen sind für responsive Website-Designs deutlich mächtiger als die XD-Entsprechungen.
• Strukturierte Übergabe von Design zu Entwicklung, der sog. Entwickler-Handoff: Der Dev Mode erleichtert die Übergabe von Maßen, Farben und Assets.
• Großes Ökosystem: Es gibt viele Plugins, Vorlagen und UI-Kits aus der Community.
• Zentrale Versionsverwaltung: Versionsverlauf und Branching helfen, Stände nachvollziehbar zu halten.

Dem steht der Verlust der engen Anbindung an Photoshop, Illustrator und Creative Cloud Libraries gegenüber. Ob sich der Umstieg lohnt, hängt davon ab, wie stark der Workflow auf der Adobe-Welt aufbaut.

Fazit und Empfehlung

Ein offizieller Weg von Adobe XD nach Figma existiert nicht, aber mit dem richtigen Vorgehen gelingt die Migration auch ohne Zusatzwerkzeuge. Der SVG-Weg ist kostenlos, verlangt aber viel Handarbeit bei Texten, Komponenten und Interaktionen.

Empfehlung: den Stand sichern, die XD-Datei aufräumen und den Export zunächst mit einer repräsentativen Zeichenfläche testen, bevor das gesamte Projekt übertragen wird. Den Prototyping-Neuaufbau fest einplanen, denn Interaktionen müssen in den meisten Fällen neu angelegt werden.