Variants in Figma sind Gruppen von Komponenten-Variationen, die in einem Component-Set organisiert werden – so lassen sich alle Zustände (Default, Hover, Disabled …) eines UI-Elements über Properties gezielt auswählen.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Komponentenzustände, Component-Set, Varianten
Was sind Variants?
Variants sind eine Erweiterung des Component-Systems in Figma. Statt für jeden Zustand eines Buttons (Default, Hover, Focused, Disabled, Loading) eine separate Komponente zu pflegen, werden alle Zustände in einem einzigen Component Set zusammengefasst. Über definierte Properties und Werte kann man im Instanz-Panel mit wenigen Klicks zwischen den Zuständen wechseln.
Erklärung
Component Set erstellen
Um ein Variant-Set zu erstellen, markiert man mehrere Komponenten, die logisch zusammengehören, und klickt im Panel auf „Combine as Variants". Figma hüllt alle Komponenten in einen violetten gestrichelten Rahmen – das Component Set.
Properties und Values
Jede Variante wird durch eine Kombination von Property-Value-Paaren identifiziert. Beispiel für einen Button:
- Property
Variant→ Values:Primary,Secondary,Ghost - Property
State→ Values:Default,Hover,Disabled - Property
Size→ Values:Small,Medium,Large
Aus drei Properties mit je drei Werten entstehen theoretisch 27 Varianten. Man muss jedoch nicht alle erstellen – nur die tatsächlich benötigten Kombinationen.
Property-Benennung und Shortcuts
Figma erkennt gängige Property-Namen und bietet optimierte Steuerelemente:
- Boolean Properties (Werte
true/false) werden als Toggle dargestellt. - Properties mit dem Wert
true/falseerscheinen im Instanz-Panel als Checkbox. - Kombiniert mit Component Properties (seit 2022) können Properties direkt im Panel bearbeitet werden, ohne in die Komponente hineinzuklicken.
Naming Convention
Die Property-Werte in den Komponentennamen werden durch Kommata getrennt: Type=Primary, State=Default, Size=Medium. Figma parst diesen String beim Erstellen des Component Sets automatisch. Alternativ können Properties im rechten Panel manuell hinzugefügt und umbenannt werden.
Interactive Components
In Kombination mit Prototyping können Variants „interaktiv" werden: Mit Interactive Components werden Übergänge zwischen Zuständen (z. B. Button Default → Button Hover bei Mouse Enter) direkt in der Komponente definiert. Jede Instanz erbt dann automatisch dieses Verhalten im Prototype-Modus – kein Manuell-Verbinden jedes einzelnen Buttons im Prototype nötig.
Variant Switching in Instanzen
In der Instanz wechselt man Variants über das Instanz-Panel. Dort erscheinen alle definierten Properties als Dropdown- oder Toggle-Felder. Ein Klick auf den Wert wechselt die Variante, ohne die restlichen Overrides (z. B. Text-Content) zu verwerfen.
Beispiele
- Komponenten-System: Ein Button-Set mit Properties
Type(Primary/Secondary/Danger),State(Default/Hover/Focused/Disabled) undIcon(true/false) deckt alle möglichen Button-Erscheinungsformen ab. - Responsive Design: Ein Card-Component mit Property
Layout(Horizontal/Vertikal) erlaubt die Verwendung desselben Datenbasis-Elements in Liste und Grid. - Prototyping/Handoff: Interactive Components simulieren Hover-States und Fokuszustände direkt im Prototype – Entwickler sehen alle Zustände im Dev-Mode auf einen Blick.
- Team-Workflow: Das Design-System-Team definiert alle Varianten einmalig; Produkt-Designer wechseln Zustände mit einem Klick, ohne die Bibliothek zu öffnen.
- Fortgeschrittene Kombination: Variants können mit Conditional Prototyping kombiniert werden, sodass ein Formular-Validierungs-State (Error) nur erscheint, wenn eine Variable einen bestimmten Wert hat.
In der Praxis
Variants erstellen: Mehrere Komponenten auswählen → Panel: „Combine as Variants" Properties bearbeiten: Component Set auswählen → im rechten Panel unter „Variants" Properties und Werte anpassen Variante hinzufügen: Im Component Set auf das +-Icon klicken oder per Drag-and-Drop eine weitere Komponente in den violetten Rahmen ziehen Variant in Instanz wechseln: Instanz auswählen → im Panel die Property-Dropdown-Felder nutzen Interactive Components aktivieren: In der Komponente Prototype-Verbindungen zwischen Variants setzen → im Presentation-Modus automatisch aktiv
Vergleich & Abgrenzung
Ohne Variants müsste man für jeden Zustand eine eigene, unverbundene Komponente pflegen. Mit Variants sind alle Zustände in einem Set, und Instanzen tragen den Zustand als Property – das macht Suche, Dokumentation und Handoff drastisch einfacher. Sketch kennt nativ keine Variants; Plugins wie „Sketch Variants" bieten ähnliches, aber weniger tief integriert. Adobe XD hat States, die funktional ähnlich, aber weniger mächtig als Figmas Property-System sind.
Häufige Fragen (FAQ)
Wie viele Variants kann ein Component Set haben? Figma erlaubt theoretisch unbegrenzte Varianten, empfiehlt jedoch aus Performance-Gründen nicht mehr als 40 pro Set. Bei komplexen Systemen lohnt es sich, Properties aufzuteilen (z. B. eigenes Set für Größen, eigenes für Farben).
Kann ich Properties umbenennen, ohne Instanzen zu verlieren? Ja, seit Figma 2023 merkt sich Figma beim Umbenennen einer Property den Zusammenhang. Bestehende Instanzen behalten ihre gesetzten Werte. Ändert man jedoch die Werte (z. B. von „Primary" zu „Brand"), müssen Instanzen manuell aktualisiert werden.
Was ist der Unterschied zwischen Variants und Component Properties? Variants sind spezielle Instanzen derselben Basiskomponente in unterschiedlichen Ausprägungen. Component Properties (Text, Boolean, Instance Swap) sind Attribute einer einzelnen Komponente, die in der Instanz editierbar sind. Beide Systeme ergänzen sich und werden in der Praxis gemeinsam eingesetzt.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/360056440594
- Figma (2024): Create and use variants. Figma Docs.
- Online: Zeroheight Blog – „How to structure component variants"
