Branching & Versioning (Figma) – Design-Versionierung wie Git für Designer

Branching in Figma ermöglicht das Erstellen paralleler Design-Zweige einer Datei für experimentelle Änderungen, die nach Review in die Hauptdatei gemergt werden können; Versioning sichert automatisch oder manuell alle Änderungsstände einer Datei für Rollbacks.

Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Profi Synonyme / Auch bekannt als: Figma Branching, Design Versioning, File History; Branches = Zweige (analog zu Git-Branches)

Was sind Branching und Versioning in Figma?

Branching wurde 2022 als Professional- und Enterprise-Feature eingeführt und gibt Designteams ein Konzept, das Entwicklern durch Git vertraut ist: Branches sind parallele Arbeitskopien einer Figma-Datei, die unabhängig bearbeitet werden können, ohne die Hauptdatei zu beeinflussen. Nach Review können Branches in die Hauptdatei gemergt werden.

Versioning (Versionshistorie) existiert in Figma schon länger: Figma speichert automatisch alle 30 Minuten eine Versionsprüfung und ermöglicht manuelle Versionsspeicherpunkte. Beide Funktionen zusammen ermöglichen einen professionellen, kontrollierten Design-Workflow für Teams.

Erklärung

Versionshistorie

Die Versionshistorie ist immer verfügbar, auch ohne Branch-Funktion:

Automatische Versionsspeicherung: Figma speichert automatisch alle 30 Minuten eine Versionsprüfung und nach jeder Sitzung. Diese Checkpoints sind in der Versionshistorie als graue Punkte sichtbar.

Manueller Versionspunkt: Um einen benannten Versionspunkt zu setzen: Strg+Alt+S / Cmd+Option+S oder Figma-Menü → File → „Save to Version History". Ein Dialog erlaubt das Benennen und Beschriften der Version.

Versionshistorie aufrufen: Figma-Menü → File → „Show Version History" oder Strg+Alt+H / Cmd+Option+H. In der rechten Seitenleiste erscheint eine Timeline aller gespeicherten Versionen.

Version wiederherstellen: Eine alte Version auswählen → „Restore this Version" klicken. Das setzt die aktuelle Datei auf den gespeicherten Stand zurück. Alternativ: Version als separate Kopie öffnen, ohne die aktuelle Datei zu überschreiben.

Benennungskonvention für Versionen: Best Practice ist ein klares Benennungsschema:

• v1.0.0 – Initial Design
• v1.1.0 – Navigation überarbeitet
• v2.0.0 – Complete Redesign
• Stakeholder Review 2024-03-15

Branching

Branching ist in Figma-Professional- und Enterprise-Plänen verfügbar.

Branch erstellen:

1. Figma-Menü oben links → „Create branch" (oder über das Datei-Menü).
2. Branch-Namen eingeben (z. B. feature/dark-mode, experiment/new-nav, fix/button-padding).
3. Figma erstellt eine Kopie der Hauptdatei als Branch.

Im Dateititel wird der Branch-Name angezeigt. Branch-Dateien sind in der Figma-Dateiliste unter der Hauptdatei als Unterelemente sichtbar.

Im Branch arbeiten: Der Branch ist eine vollständige, unabhängige Kopie der Hauptdatei. Alle Änderungen im Branch beeinflussen die Hauptdatei nicht. Mehrere Branches können gleichzeitig existieren.

Branch-Vergleich (Branch Review): Bevor ein Branch gemergt wird:

1. Im Branch-Datei → Figma-Menü → „Review Changes" (oder „Compare with Main").
2. Figma zeigt einen Side-by-Side-Vergleich: Hauptdatei links, Branch rechts.
3. Geänderte Frames werden hervorgehoben.
4. Reviewer können Kommentare hinzufügen.

Branch mergen: Nach Review und Genehmigung:

1. Im Branch → Figma-Menü → „Merge Branch".
2. Figma zeigt einen Merge-Bestätigungsdialog mit Konflikt-Warnung, wenn sich in der Hauptdatei seit dem Branch-Erstellungszeitpunkt Änderungen ereignet haben.
3. Merge bestätigen → Änderungen werden in die Hauptdatei übertragen.

Merge-Konflikte: Figma löst einfache Konflikte automatisch. Bei komplexen Konflikten (z. B. wenn dasselbe Element in der Hauptdatei und im Branch geändert wurde) zeigt Figma einen Konflikt-Dialog und der Designer muss entscheiden, welche Version übernommen wird.

Branch schließen (ohne Merge): Wenn ein Branch-Experiment gescheitert ist → Figma-Menü → „Archive Branch" oder „Delete Branch". Die Hauptdatei bleibt unverändert.

Typische Branch-Workflows

Feature-Branch-Workflow (ähnlich wie in der Software-Entwicklung):

• Hauptdatei = main (immer produktionsreif)
• Für jedes neue Feature oder größere Design-Änderung einen Branch erstellen.
• Im Branch iterieren und testen.
• Branch-Review mit Stakeholdern.
• Merge in main.

Experiment-Branches:

• Riskante oder experimentelle Design-Änderungen in einem Branch ausprobieren.
• Bei Erfolg: mergen. Bei Misserfolg: archivieren. Die Hauptdatei bleibt immer sauber.

Design-System-Branches:

• Library-Updates werden in einem Branch vorbereitet.
• Nach Design-Review und Entwickler-Abstimmung in die Library gemergt.
• Library-Update als neue Version veröffentlichen.

Einschränkungen von Figma Branching

• Branching ist nur in Professional- und Enterprise-Plänen verfügbar.
• Merge-Konflikte bei komplexen Änderungen müssen manuell gelöst werden.
• Figma hat keine Command-Line-Integration oder API für Branches (Stand 2024) – kein direktes CI/CD-Äquivalent.
• Komponenten aus Shared Libraries in einem Branch zu aktualisieren und zu mergen kann komplex sein.

Beispiele

1. Dark-Mode-Entwicklung: Ein Designer erstellt Branch feature/dark-mode. Über mehrere Wochen wird Dark-Mode-Farbpalette und Component-Updates erarbeitet. Nach Stakeholder-Review und Entwickler-Abstimmung wird der Branch in die Main-Library gemergt.
2. A/B-Test-Design: Zwei Branches experiment/nav-v1 und experiment/nav-v2 enthalten verschiedene Navigation-Konzepte. Beide werden für User-Testing genutzt. Nach Test-Ergebnissen wird der bessere Branch gemergt.
3. Design-Sprint-Prototyp: Während eines Design-Sprints wird ein Branch erstellt, um schnelle Iterationen vorzunehmen. Am Ende des Sprints werden die validierten Ansätze selektiv in die Hauptdatei übertragen.
4. Stakeholder-Feedback-Loop: Der aktuelle Design-Stand wird als Version gespeichert (Stakeholder Review – KW 22). Feedback wird eingearbeitet. Bei Bedarf kann zum Review-Stand zurückgekehrt werden.
5. Versionierter Release-Prozess: Jeder Design-Release wird als benannte Version gespeichert (v2.3 – Checkout Redesign – 2024-06-01). Diese Versionen korrespondieren mit den zugehörigen Development-Sprints.

In der Praxis

Shortcuts:

• Version manuell speichern: Strg+Alt+S / Cmd+Option+S
• Versionshistorie aufrufen: Strg+Alt+H / Cmd+Option+H
• Branch erstellen: Figma-Menü → „Create branch"

Best Practices:

• Versionspunkte vor und nach größeren Änderungen manuell setzen.
• Branch-Namen aussagekräftig halten: feature/dark-mode statt branch-1.
• Branches nicht zu lange leben lassen – regelmäßig mergen oder archivieren.
• Vor dem Merge den Branch-Review-Prozess nutzen – nicht blind mergen.
• Versionshistorie als Dokumentation nutzen: Changelogs schreiben, was warum geändert wurde.

Häufige Fehler:

• Zu viele gleichzeitige Branches → Überblick verlieren, Konflikte häufen sich.
• Branches zu lange ohne Merge-Aktivität liegen lassen → schwer auflösbare Konflikte.
• Versionshistorie ignorieren und alles undokumentiert ändern.

Vergleich & Abgrenzung

Git (GitHub/GitLab/Bitbucket): Das Vorbild für Figma Branching. Git ist deutlich mächtiger (granulare Konflikterkennung, Commit-History per File, automatische CI/CD-Integration), aber für Designdateien nicht anwendbar. Abstract war ein Drittanbieter-Tool, das Git-ähnliches Branching für Sketch-Dateien ermöglichte. Mit Figmas nativem Branching ist Abstract für Figma-Nutzer weitgehend überflüssig geworden. Plant (ebenfalls Branching für Sketch) ist ähnlich positioniert. Figma Branching ist weniger mächtig als Git, aber nahtlos integriert und für die meisten Design-Team-Anforderungen ausreichend.

Häufige Fragen (FAQ)

Kann ich einen Branch mit jemandem teilen, der keinen Zugriff auf die Hauptdatei hat? Ein Branch ist eine Datei innerhalb desselben Figma-Teams. Wer Zugriff auf das Team hat, kann den Branch sehen. Um einen Branch mit externen Personen zu teilen, muss ein separater Share-Link für den Branch erstellt werden.

Was passiert mit meinen Library-Änderungen in einem Branch? Library-Änderungen in einem Branch sind im Branch lokal. Sie werden erst nach dem Merge in die Hauptdatei und einer erneuten Library-Veröffentlichung für andere Dateien sichtbar. Das ermöglicht einen kontrollierten Library-Update-Prozess.

Kann Figma Branching mit Git-Repositories verbunden werden? Nicht nativ (Stand 2024). Über Plugins wie Tokens Studio kann ein Teil des Design-Workflows (Token-Synchronisation) mit Git verbunden werden, aber die Figma-Dateien selbst werden nicht in Git versioniert.

Verwandte Einträge

• Shared Libraries
• Components
• Dev Mode

Weiterführend

• Figma Help Center – help.figma.com/de
• Figma-Dokumentation: „Branch and merge files" – help.figma.com/hc/en-us/articles/5691414543575
• Figma Config 2022: „Introducing Branching" (Figma YouTube, 2022)