Instances sind Kopien einer Main Component in Figma, die mit ihr verknüpft bleiben; Overrides sind lokale Anpassungen an einer Instanz (z. B. anderer Text, andere Farbe), die bestehen bleiben, auch wenn die Main Component aktualisiert wird.
Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Component Instance, Symbol Instance (Sketch); Overrides auch: lokale Anpassungen, Instance Overrides
Was sind Instances und Overrides?
Das Instance-Override-System ist das Herzstück des komponentenbasierten Designs in Figma. Eine Instance ist eine Kopie einer Main Component, die alle Eigenschaften der Main erbt, aber lokal überschrieben werden kann. Overrides sind diese lokalen Überschreibungen: Sie ermöglichen es, den Text eines Buttons, die Farbe eines Icons oder das Bild einer Karte spezifisch für eine Instanz zu ändern – ohne die Main Component zu berühren und ohne die Verbindung zur Main zu verlieren.
Wenn die Main Component später geändert wird (z. B. neue Schriftgröße), erhalten alle Instanzen das Update – aber ihre individuellen Overrides (z. B. der spezifische Button-Text) bleiben erhalten, sofern sich die Layer-Struktur nicht geändert hat.
Erklärung
Instanz erstellen
Eine Instanz entsteht durch:
- Kopieren der Main Component (
Strg+C/Cmd+C→Strg+V/Cmd+V) - Drag & Drop aus dem Assets-Panel auf die Canvas
- Duplizieren einer bestehenden Instanz (
Strg+D/Cmd+D)
Im Layer-Panel ist eine Instanz an dem hohlen Rauten-Icon (◇) erkennbar, während die Main Component ein ausgefülltes Rauten-Icon (◆) trägt.
Override-Typen
1. Text Overrides: Der Text-Inhalt eines Text-Layers kann direkt in der Instanz geändert werden, indem man per Doppelklick in den Text-Layer geht. Der neue Text bleibt bei Main-Component-Updates erhalten, solange der Layer-Name unverändert ist.
2. Fill/Color Overrides: Farben (Füllungen, Strokes) können in einer Instanz überschrieben werden. Im Design-Panel die Farbe einer Instanz ändern – diese Änderung gilt nur für diese Instanz.
3. Visibility Overrides: Einzelne Layer innerhalb einer Instanz können ein- oder ausgeblendet werden. Dies ist nützlich für optionale Elemente wie Badges oder Icons.
4. Image/Fill Overrides: Bilder oder Füllmuster können instanzspezifisch ausgetauscht werden. Ideal für Produktkarten mit unterschiedlichen Produktbildern.
5. Instance Swap: Ein verschachteltes Component innerhalb einer Instanz kann durch eine andere Komponente ersetzt werden. Beispiel: Ein Icon in einem Button kann durch ein anderes Icon-Component ersetzt werden. Dies geschieht über das kleine „Austauschen"-Symbol im Design-Panel neben dem verschachtelten Component.
6. Component Property Overrides: Wenn die Main Component Component Properties besitzt (Text Properties, Boolean Properties, Variant Properties), werden diese übersichtlich im Design-Panel der Instanz angezeigt und können dort direkt bearbeitet werden – ohne in die Layer-Hierarchie eintauchen zu müssen.
Override-Vererbung bei Main-Component-Updates
Wenn die Main Component aktualisiert wird, gilt folgende Logik:
- Gleichnamige Layer: Updates werden übernommen, lokale Overrides bleiben erhalten.
- Umbenannte oder gelöschte Layer: Overrides auf diesen Layern gehen verloren, da Figma die Verbindung nicht mehr herstellen kann.
- Neu hinzugefügte Layer in der Main: Werden zur Instanz hinzugefügt, ohne bestehende Overrides zu beeinflussen.
Das bedeutet: Layer-Namen in der Main Component sollten nie leichtfertig geändert werden, wenn Instanzen im Projekt existieren, die Overrides auf diesen Layern haben.
Overrides zurücksetzen
Einzelne Overrides oder alle Overrides einer Instanz können zurückgesetzt werden:
- Rechtsklick auf die Instanz → „Reset All Changes" → alle Overrides werden auf den Main-Component-Zustand zurückgesetzt.
- Individuelle Overrides: Im Design-Panel auf den Rückgängig-Pfeil neben dem geänderten Wert klicken.
Go to Main Component / Go to Instance
- Von der Instanz zur Main Component: Rechtsklick → „Go to Main Component" (oder im Design-Panel auf den Link klicken).
- Von der Main Component zu einer Instanz: Rechtsklick auf die Main → „Select All Instances" oder „Go to Instance".
Push Overrides to Main Component
Eine nützliche Funktion: Overrides, die man an einer Instanz vorgenommen hat, können auf die Main Component „gepusht" werden. Rechtsklick auf die Instanz → „Push Changes to Main Component". Dadurch wird die Main Component mit den Override-Werten aktualisiert und alle anderen Instanzen erhalten das Update.
Beispiele
- Karten-Reihe: Eine Produktkarten-Instanz wird 8 Mal platziert. Jede Instanz erhält einen anderen Produktnamen (Text Override), ein anderes Produktbild (Fill/Image Override) und einen anderen Preis (Text Override) – alle behalten die Verbindung zur Main Card-Component.
- Navigation mit aktivem Tab: Eine Nav-Bar-Instanz auf dem „Home"-Screen hat den Text-Override „Home" und die Icon-Override mit ausgefülltem Icon. Auf dem „Profile"-Screen dieselbe Instanz mit anderem Text und anderem aktiven Icon.
- Button mit verschiedenen Labels: 12 Instanzen des Primary-Button-Components mit unterschiedlichen Text-Overrides: „Anmelden", „Weiter", „Abbrechen", „Kaufen" – alle werden automatisch aktualisiert, wenn der Main Button ein neues Padding-System erhält.
- Icon-Tausch: Ein Alert-Banner-Component hat ein Icon-Sub-Component. Per Instance Swap wird das Standard-Info-Icon durch ein Warning-Icon ersetzt, ohne einen neuen Variant zu benötigen.
- Badge sichtbar/unsichtbar: Ein App-Icon-Component hat ein Notification-Badge, das über Visibility Override in einigen Instanzen ausgeblendet wird.
In der Praxis
Shortcuts:
- Zur Main Component navigieren: Rechtsklick auf Instanz → „Go to Main Component" (oder
Strg+Alt+Klick/Cmd+Option+Klickauf die Instanz) - Alle Overrides zurücksetzen: Rechtsklick → „Reset All Changes"
- Instanz von Main trennen:
Strg+Alt+B/Cmd+Option+B
Best Practices:
- Layer innerhalb von Main Components immer aussagekräftig benennen (z. B. „icon", „label", „background") – das ist die Grundlage für stabile Override-Verbindungen.
- Component Properties verwenden statt auf rohe Override-Editierung angewiesen zu sein – das Interface ist übersichtlicher.
- Overrides mit Bedacht einsetzen: Zu viele manuelle Overrides können schnell unübersichtlich werden. Überlegen, ob eine neue Variante sinnvoller wäre.
Häufige Fehler:
- Layer in der Main Component umbenennen, nachdem Instanzen mit Overrides auf diesen Layern existieren – das bricht die Override-Verbindungen.
- „Detach Instance" verwenden, wenn nur lokale Änderungen benötigt werden – stattdessen Overrides nutzen.
Vergleich & Abgrenzung
Sketch hat ein ähnliches Override-System für Symbols, aber weniger mächtige Instance-Swap-Funktionen. In Adobe XD gibt es States statt Overrides – ein konzeptuell anderer Ansatz, bei dem Zustände in der Komponente selbst definiert werden. React als Entwicklungs-Analogie: Instances entsprechen React-Komponenten mit Props; Overrides entsprechen den Props-Werten, die von der Parent-Komponente übergeben werden. Das Figma-Override-System ist konzeptuell direkt auf Props-basiertes Component-Design gemappt.
Häufige Fragen (FAQ)
Bleiben Overrides erhalten, wenn ich zwischen Varianten wechsle? Figma versucht, Overrides beim Varianten-Wechsel beizubehalten, wenn die Layer-Namen in beiden Varianten übereinstimmen. Wenn eine Variante einen anderen Layer-Namen hat (z. B. „icon-filled" statt „icon"), geht der Override verloren. Konsistente Layer-Benennung über alle Varianten hinweg ist daher entscheidend.
Kann ich Overrides von einer Instanz auf eine andere kopieren? Ja, über Rechtsklick → „Copy/Paste Properties" oder Strg+Alt+C / Cmd+Option+C (Eigenschaften kopieren) und Strg+Alt+V / Cmd+Option+V (Eigenschaften einfügen). Das überträgt alle Overrides der einen Instanz auf die andere.
Was passiert, wenn ich die Main Component in eine andere Datei verschiebe? Die Instanzen verlieren die Verbindung zur Main Component, wenn die Datei nicht als Library eingebunden ist. Über Shared Libraries kann die Verbindung wiederhergestellt werden.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/de
- Figma-Dokumentation: „Override properties of a component" – help.figma.com
- Design System University: „Component Overrides Masterclass" (Online-Kurs, 2024)
