Instanzen in Figma sind Kopien einer Main Component, und Overrides sind lokale Änderungen an einer Instanz, die die übergeordnete Komponente nicht beeinflussen – so vereint man Konsistenz und Flexibilität.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Instanz, Override, lokale Überschreibung, Detach
Was sind Instances und Overrides?
Jedes Mal, wenn man eine Komponente aus dem Assets-Panel in den Canvas zieht oder mit Cmd+D dupliziert, entsteht eine Instance. Eine Instance ist zunächst identisch mit ihrer Main Component und erbt alle Änderungen von dort. Wenn man in einer Instance ein Element verändert – einen Text, eine Farbe, eine Sichtbarkeit – entsteht ein Override: eine lokale Überschreibung, die nur diese Instanz betrifft.
Erklärung
Override-Typen
Figma unterscheidet mehrere Override-Kategorien:
- Text-Overrides: Der Textinhalt einer Instanz wird direkt verändert (Doppelklick auf Text in der Instanz).
- Fill/Stroke-Overrides: Füllfarben oder Rahmenfarben einzelner Elemente in der Instanz werden lokal angepasst.
- Visibility-Overrides: Ein Layer in der Instanz wird ein- oder ausgeblendet.
- Instance-Swap-Overrides: Eine eingebettete Komponente wird durch eine andere ersetzt.
- Style-Overrides: Ein lokaler Stil (Typografie, Farbe) überschreibt den verknüpften Stil der Main Component.
Override-Persistenz
Overrides bleiben in der Regel erhalten, wenn die Main Component verändert wird – solange die betroffene Layer-Struktur unverändert bleibt. Wird in der Main Component ein Layer umbenannt, geht der entsprechende Override verloren (Figma verliert die Zuordnung). Wird ein Layer gelöscht, verschwindet der Override mit ihm.
Reset Overrides
Overrides können einzeln oder vollständig zurückgesetzt werden: Rechtsklick auf die Instanz → Reset All Overrides. Einzelne Properties lassen sich im Panel zurücksetzen, indem man auf den entsprechenden Wert rechtsklickt → Reset to Main Component.
Propagation Logic
Ändert man die Main Component, übernimmt die Instanz die Änderung – aber nur für nicht überschriebene Properties. Hat man z. B. den Textinhalt einer Instanz überschrieben, bekommt diese Instanz keine Textupdates aus der Main Component mehr. Farb- oder Strukturänderungen in der Main Component propagieren aber weiterhin.
Nested Instance Overrides
In einer Instanz können auch eingebettete (nested) Instanzen überschrieben werden. Wechselt man z. B. in einem Card-Component den eingebetteten Button von „Primary" auf „Secondary", ist das ein Nested Instance Override. Diese sind im Allgemeinen stabil gegenüber Main-Component-Updates.
Detach from Component
Mit Detach Instance (Cmd+Alt+B / Ctrl+Alt+B) wird die Verbindung zur Main Component dauerhaft getrennt. Die Instanz wird zu einem normalen Frame. Alle aktuellen Overrides bleiben als feste Werte erhalten, zukünftige Updates der Main Component kommen aber nicht mehr an. Detach sollte sparsam eingesetzt werden – in der Regel für einmalige Ausnahmen.
Instance-Swap
Über Rechtsklick → Swap Instance oder das Instance-Swap-Panel kann man eine Instanz durch eine andere Komponente ersetzen. Overrides werden dabei – soweit möglich – auf die neue Komponente übertragen (z. B. gleichnamige Text-Layers).
Beispiele
- Komponenten-System: In einem Formular werden 10
Input-Instanzen verwendet. Jede hat einen anderen Placeholder-Text-Override. Die Struktur (Rahmen, Farbe, Typografie) ist zentral in der Main Component gesteuert. - Responsive Design: Ein
Card-Component wird auf Mobile (Instanz 1) und Desktop (Instanz 2) eingesetzt. Mobile-Instanz hat einen Image-Visibility-Override (kein Bild), Desktop-Instanz zeigt das Bild. - Prototyping/Handoff: Entwickler sehen im Dev-Mode direkt, welche Properties in der Instanz lokal überschrieben sind (als geänderte Werte markiert).
- Team-Workflow: Designer nutzen Overrides für Page-spezifische Anpassungen, die nicht in die Bibliothek gehören – z. B. Campaign-spezifische Hero-Texte.
- Kombination mit Variants: Variant-Switches in einer Instanz sind ebenfalls Overrides und können separat zurückgesetzt werden, ohne andere Overrides zu verlieren.
In der Praxis
Instanz einfügen: Assets-Panel öffnen (Shift+I) → Komponente in Canvas ziehen Text-Override setzen: Doppelklick auf Text in der Instanz → Text editieren Alle Overrides zurücksetzen: Rechtsklick auf Instanz → Reset All Overrides Instanz swappen: Rechtsklick → Swap Instance → Komponente auswählen Detach: Rechtsklick → Detach Instance (Cmd+Alt+B) Main Component aufrufen: Im Panel → „Go to Main Component" (lila Arrow-Icon)
Vergleich & Abgrenzung
Overrides in Figma sind granularer als in Sketch (Symbols): In Sketch können Text-Overrides und Symbol-Swaps, aber keine freien Fill-Overrides gesetzt werden. Figma erlaubt Overrides auf nahezu jedes Property – was mehr Flexibilität, aber auch mehr Verantwortung bedeutet. Im Vergleich zu Adobe XD States sind Figma-Overrides persistenter und stabiler gegenüber Component-Updates.
Häufige Fragen (FAQ)
Warum verliere ich Overrides nach einem Bibliotheks-Update? Wenn die Main Component einen Layer umbenennt oder entfernt, kann Figma die Zuordnung nicht mehr herstellen. Um das zu vermeiden, sollten Layer-Namen in der Main Component stabil gehalten werden. Eigene Layer-Namen in Instanzen (die man in der Instanz lokal umbenannt hat) sind von Updates nicht betroffen.
Kann ich Overrides von einer Instanz auf eine andere übertragen? Nicht direkt. Man kann aber eine Instanz kopieren – dabei werden alle Overrides mitkopiert. Alternativ kann man Styles oder Variables nutzen, um Werte systemweit zu steuern, ohne Overrides zu benötigen.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/360039150733
- Figma (2024): Override properties. Figma Docs.
- Online: UX Collective – „Managing Figma Component Overrides at Scale"
