Variants (Figma) – Component-Zustände in einer Komponente verwalten

Variants in Figma fassen mehrere Zustände und Ausprägungen einer Komponente – wie Default, Hover, Active, Disabled oder verschiedene Größen – in einem einzigen Component Set zusammen, das im Assets-Panel als eine Einheit erscheint.

Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Component Variants, Component Set; seit 2020 in Figma verfügbar

Was sind Variants?

Vor der Einführung von Variants im Jahr 2020 mussten Designer für jeden Zustand einer Komponente (z. B. Button Default, Button Hover, Button Disabled) separate Komponenten anlegen. Das führte zu unübersichtlichen Component-Libraries mit Dutzenden von fast identischen Einträgen. Variants lösen dieses Problem: Alle Zustände einer Komponente werden in einem Component Set gebündelt, das im Assets-Panel nur einmal auftaucht. Im Instanz-Panel kann dann per Dropdown-Menü zwischen den Varianten gewechselt werden.

Variants sind heute der Standard-Ansatz für das Designen von UI-Komponenten mit verschiedenen Zuständen oder Ausprägungen und sind das Rückgrat moderner Design-Systeme in Figma.

Erklärung

Component Set erstellen

Es gibt zwei Wege, ein Component Set zu erstellen:

Weg 1 – Aus bestehenden Komponenten:

1. Mehrere Main Components auswählen (die zusammengehören sollen).
2. Im rechten Panel auf „Combine as Variants" klicken.
3. Figma fasst sie in einem lila umrahmten Component Set zusammen.

Weg 2 – Neue Variante hinzufügen:

1. Ein Component Set auswählen.
2. Im rechten Panel auf das +-Symbol neben „Variants" klicken.
3. Eine neue Variante (Kopie der ersten) wird hinzugefügt.

Das Component Set ist erkennbar am gestrichelten lila Rahmen auf der Canvas.

Properties und Values

Jede Variante hat Properties (Eigenschaften) und Values (Werte). Beispiel für einen Button:

Diese Properties und Values werden im rechten Panel definiert. Der Name jeder Variante setzt sich aus den Property-Value-Paaren zusammen: Type=Primary, State=Default, Size=Medium

Figma zeigt diese Properties im Instanz-Panel als Dropdowns an, über die der Nutzer intuitiv zwischen Varianten wechseln kann.

Benennung und Kompatibilität

Die Benennung der Properties folgt dem Schema PropertyName=Value und kann durch Komma getrennte Paare kombiniert werden: State=Default, Size=Medium

Wenn man bei der Benennung konsistent ist, erkennt Figma beim Switchen zwischen Varianten, welche Kombination zutrifft, und wechselt direkt zur korrekten Variante – auch wenn nicht jede Kombination explizit existiert.

Interaktive Varianten (Interactive Components)

Seit 2022 können Variants auch Prototyping-Interaktionen intern verwalten: Man kann innerhalb eines Component Sets definieren, dass bei Hover-Zustand automatisch zur Hover-Variante gewechselt wird. Diese Interaktionen vererben sich auf alle Instanzen, ohne dass man in jedem Prototyping-Frame erneut Verbindungen ziehen muss.

Um eine Interaktion innerhalb eines Component Sets zu definieren:

1. Component Set auswählen.
2. Im Prototyping-Tab (rechtes Panel) auf eine Variante klicken.
3. Eine Interaktion zum nächsten Zustand definieren (z. B. „On Hover → Change To → Hover Variant").

Component Properties vs. Variants

Nicht alles sollte als Variant modelliert werden. Seit der Einführung von Component Properties (2022) gilt:

• Variants: Verwenden, wenn sich Farbe, Form oder Struktur des Elements ändert (z. B. Button Types).
• Boolean Property: Verwenden, wenn ein Element einfach ein- oder ausgeblendet wird (z. B. ein Icon neben dem Text).
• Text Property: Verwenden, wenn nur der Text-Content geändert wird (z. B. Button-Label).
• Instance Swap Property: Verwenden, wenn ein verschachteltes Element durch eine andere Komponente ersetzt werden soll (z. B. verschiedene Icons).

Zu viele Varianten erzeugen einen „Variants Explosion" – unübersichtliche Component Sets mit hunderten von Kombinationen. Cleveres Kombinieren von Variant Properties und Component Properties hält das Component Set überschaubar.

Beispiele

1. Button-Component-Set: Properties: Type (Primary, Secondary, Destructive), State (Default, Hover, Pressed, Disabled), Size (SM, MD, LG) → 36 Varianten, aber ordentlich strukturiert.
2. Input-Field: Properties: State (Empty, Focused, Filled, Error, Disabled), Type (Text, Password, Search) → der Nutzer wechselt im Prototypen per Interaktion zu „Focused", wenn er in das Feld klickt.
3. Toggle/Switch: Properties: State (On, Off), Size (SM, LG) → 4 Varianten, einfach per Klick-Interaktion wechselnd.
4. Avatar: Properties: Size (XS, SM, MD, LG), Type (Image, Initial, Icon) → 12 Varianten statt 12 separate Komponenten.
5. Alert-Banner: Properties: Type (Success, Warning, Error, Info) → 4 Varianten mit verschiedenen Farben und Icons.

In der Praxis

Shortcuts:

• Neue Variante hinzufügen: Component Set auswählen → +-Button im Panel
• Zwischen Varianten im Prototypen wechseln: Im Prototyping-Tab eine Change To-Interaction auf eine Variante setzen

Best Practices:

• Property-Namen konsistent halten (immer State, nicht manchmal Status).
• Varianten von links oben nach rechts unten in logischer Reihenfolge anordnen – Figma zeigt sie im Panel in dieser Reihenfolge.
• Nicht mehr als 3–4 Properties pro Component Set – sonst wird es unübersichtlich.
• Variants mit Interactive Components kombinieren für realistische Prototypen.
• Vor dem Erstellen von Varianten die Struktur planen: Welche Properties gibt es? Welche Values pro Property?

Häufige Fehler:

• Properties zu vage benennen (z. B. V1, V2 statt State=Default, State=Hover).
• Varianten für reine Text-Änderungen erstellen statt Text Properties zu verwenden.
• Inkonsistente Strukturen zwischen Varianten – jede Variante sollte dieselbe Layer-Hierarchie haben.

Vergleich & Abgrenzung

In Sketch gibt es seit Version 60 ebenfalls eine Symbol-Override-Logik, aber keine echten Variants mit Property-Matrix. Adobe XD hat seit 2021 ähnliche States, aber ohne die Tiefe der Figma-Variant-Properties. Figma war das erste große Design-Tool, das Variants in dieser Form einführte (2020), und hat damit den Industriestandard gesetzt. Storybook (Entwickler-Tool) kennt ein ähnliches Konzept: „Controls" entsprechen den Variant Properties.

Häufige Fragen (FAQ)

Wie viele Varianten kann ein Component Set haben? Technisch gibt es keine Obergrenze, aber Figma empfiehlt aus Performance- und Übersichtlichkeitsgründen, das Component Set überschaubar zu halten. Bei mehr als ca. 40 Varianten sollte man überlegen, ob das Set aufgeteilt werden kann.

Kann ich nachträglich Properties zu einem Component Set hinzufügen? Ja, im rechten Panel auf ein bestehendes Component Set klicken und Properties hinzufügen oder umbenennen. Bestehende Varianten behalten ihre Werte, neue Properties erhalten einen Default-Wert.

Wie interagiert eine Variante mit Overrides in der Instanz? Beim Wechsel zwischen Varianten (z. B. von Default zu Hover) versucht Figma, Overrides beizubehalten, wenn die Layer-Namen in beiden Varianten identisch sind. Unterschiedliche Layer-Namen führen dazu, dass Overrides nicht übertragen werden.

Verwandte Einträge

• Components
• Instances & Overrides
• Variables
• Styles

Weiterführend

• Figma Help Center – help.figma.com/de
• Figma-Dokumentation: „Create and use variants" – help.figma.com/hc/en-us/articles/360056440594
• Florian Kiem: „Figma Variants Masterclass" (YouTube, 2023)