Branching in Figma erlaubt es, parallele Arbeitskopien einer Designdatei zu erstellen, isoliert zu entwickeln, per Review prüfen zu lassen und schließlich mit der Hauptdatei zusammenzuführen – analog zu Git-Branches in der Softwareentwicklung.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Design Branches, Figma Merge, Versionszweige
Was ist Branching in Figma?
Branching ist ein Feature des Figma Professional Plans (und höher), das Design-Versionierung auf Git-ähnliche Weise ermöglicht. Statt eine Datei direkt zu verändern, erstellt ein Designer einen Branch – eine vollständige Kopie der Datei, in der er arbeiten kann, ohne die Hauptdatei zu verändern. Nach Abschluss der Arbeit wird der Branch gereviewed und mit dem Main (Hauptdatei) zusammengeführt.
Erklärung
Branch erstellen
Um einen Branch zu erstellen, öffnet man die Hauptdatei und klickt auf den Dateinamen-Dropdown → „Create Branch". Der Branch erhält einen Namen (z. B. feature/checkout-redesign) und öffnet sich als separate Datei-Kopie. Im Interface erscheint ein Branch-Banner mit dem Branch-Namen und Merge-Optionen.
Namenskonventionen: Ähnlich wie in Git empfehlen sich beschreibende Branch-Namen: feature/, fix/, experiment/ als Präfix.
Hauptdatei (Main) vs. Branch
- Main: Die aktuelle, verabschiedete Design-Version, auf die sich Entwickler im Dev Mode stützen.
- Branch: Ein Arbeitszweig, der Änderungen enthält, die noch nicht final sind.
Mehrere Designer können gleichzeitig in verschiedenen Branches arbeiten, ohne sich gegenseitig zu stören. Das ist besonders bei großen Design-System-Dateien wichtig.
Änderungen verfolgen
Im Branch erscheint ein Change-Indicator: Alle Elemente, die im Branch verändert wurden, sind mit einem Markierungspunkt versehen. Designer sehen auf einen Blick, was sich geändert hat.
Review-Prozess
Wenn der Branch fertig ist, kann der Designer eine Review-Anfrage erstellen (Branch-Banner → „Request review"). Reviewer erhalten eine Benachrichtigung und können:
- Die Branch-Änderungen im Canvas begutachten
- Kommentare hinterlassen
- Änderungen genehmigen oder ablehnen
Merge (Zusammenführen)
Nach genehmigtem Review wird der Branch in den Main gemergt. Figma zeigt eine Merge-Vorschau mit allen Änderungen. Bei Konflikten (dieselbe Schicht wurde in Main und Branch verändert) muss der Designer entscheiden, welche Version übernommen wird.
Nach dem Merge wird der Branch archiviert und ist nicht mehr aktiv.
Update from Main
Während der Branch-Arbeit kann die Hauptdatei weiterentwickelt werden. Mit „Update from Main" kann man diese Änderungen in den Branch übernehmen – ähnlich wie git pull origin main.
Branch von einer Library-Datei
Branching ist besonders wertvoll für Design-System-Libraries. Änderungen an Komponenten, Styles oder Variables werden im Branch entwickelt, gereviewed und erst nach Genehmigung in die Hauptlibrary gemergt. So wird verhindert, dass unfertige Änderungen an alle Library-Abonnenten propagiert werden.
Versionsverlauf
Unabhängig von Branches hat jede Figma-Datei einen Version History (Dateimenü → Version History). Das sind automatische und manuelle Snapshots der Datei über Zeit. Branches und Version History ergänzen sich: Branches für parallele Feature-Arbeit, Version History für Snapshots wichtiger Meilensteine.
Beispiele
- Komponenten-System: Das Design-System-Team entwickelt einen neuen Button-Stil im Branch
feature/new-button-system. Nach Review und Merge erhalten alle Library-Abonnenten ein Update. - Responsive Design: Ein Designer arbeitet im Branch
feature/mobile-checkoutan der Mobiloptimierung des Checkouts, während ein anderer im Branchfeature/desktop-navigationdie Desktop-Navigation redesignt – parallel, ohne Konflikte. - Prototyping/Handoff: Erst nach Merge in Main werden Screens im Dev Mode als „Ready for Development" markiert – Entwickler sehen nur abgestimmte, finale Designs.
- Team-Workflow: Product Manager erstellt den Review-Request; Lead Designer reviewt; nach Genehmigung mergt die Designerin selbst. Klarer Prozess ohne E-Mail-Hin-und-her.
- Experiment-Branches: A/B-Test-Designs für zwei Checkout-Varianten werden in getrennten Branches entwickelt, um beide Varianten sauber zu dokumentieren, bevor eine ausgewählt wird.
In der Praxis
Branch erstellen: Dateiname-Dropdown → „Create Branch" → Namen eingeben In Branch wechseln: Dateiname-Dropdown → Branch aus der Liste wählen Review anfragen: Branch-Banner → „Request review" → Reviewer auswählen Merge: Branch-Banner → „Merge into main" → Merge-Vorschau prüfen → bestätigen Update from Main: Branch-Banner → „Update from main" Version-History: Hauptmenü → File → Version History → Snapshot auswählen
Vergleich & Abgrenzung
| Figma Branching | Git (Code) | Sketch Libraries | Abstract | |
|---|---|---|---|---|
| Visueller Diff | Ja | Nein (nur Code) | Nein | Ja |
| Merge-Konflikte | Manuell | Automatisch | Nein | Manuell |
| Review-Workflow | Integriert | PR (extern) | Nein | Integriert |
| Branch-Kosten | Professional+ | Gratis | Nein | Kostenpflichtig |
Abstract war ein separates Tool für Sketch-Versionierung. Mit Figmas nativem Branching hat es an Relevanz verloren. Figmas visueller Diff (Änderungen direkt im Canvas sehen) ist ein erheblicher Vorteil gegenüber reinen Code-Versionierungssystemen.
Häufige Fragen (FAQ)
Was passiert mit einem Branch, wenn Änderungen an Main und Branch am gleichen Element konfliktieren? Figma zeigt bei einem Merge-Konflikt beide Versionen nebeneinander. Der Designer wählt, welche Version übernommen wird. Eine automatische Zusammenführung wie in Git existiert für Designs nicht – das macht manuelle Entscheidungen nötig, aber vermeidet unbeabsichtigte Überschreibungen.
Können Branches auf das Free-Figma-Konto erstellt werden? Nein. Branching ist ein Feature des Professional Plans und höher. Im Free Plan steht nur die Standard-Version History (30 Tage) zur Verfügung.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/360063144053
- Figma (2024): Branching in Figma. Figma Docs.
- Online: Figma Blog – „Branching: How teams use design version control"
