Das Geheimnis guten Interface-Designs besteht nicht darin, denselben Button hundertmal neu zu zeichnen; es besteht darin, ihn einmal richtig zu bauen und überall wiederzuverwenden. Genau hier kommt das System aus Figma component und Variant ins Spiel. Mache aus einem Element eine Single Source of Truth, gruppiere seine Zustände (Hover, Disabled, Primary/Secondary) als Varianten, und dein Design wird zu einer konsistenten, schnellen und leicht wartbaren Bibliothek. In diesem Artikel begleite ich dich von einer leeren Canvas bis zu einem wirklich skalierbaren Komponentensystem.
Was ist eine Komponente und warum ist sie wichtig?
In Figma ist eine Komponente die Hauptkopie eines Designelements, das du wiederverwenden möchtest. Jede davon abgeleitete Kopie heißt Instance. Wenn du die Hauptkomponente änderst, fließt diese Änderung automatisch in jede Instance ein. Passe einmal den Eckenradius eines Buttons oder seinen Farb-Token an, und du musst nicht hunderte Verwendungen im Datei manuell korrigieren.
Um ein Element in eine Komponente umzuwandeln, wähle es aus, klicke mit der rechten Maustaste und wähle Create component (Tastenkürzel: ⌥⌘K auf macOS, Ctrl+Alt+K unter Windows). Es ist nun mit einem violetten Rauten-Symbol markiert, und du kannst es aus dem Assets-Tab im linken Panel überallhin ziehen.
- Konsistenz: eine Quelle, überall dasselbe Erscheinungsbild.
- Geschwindigkeit: du beginnst nie wieder bei null für einen neuen Screen.
- Wartung: Markenfarbe geändert? Einmal korrigieren, es verbreitet sich überallhin.
Zustände mit Varianten kombinieren
Ein Button hat eigentlich nicht nur einen Zustand: Default, Hover, gedrückt, Disabled... Statt aus jedem eine eigene Komponente zu machen, heißt die Struktur, die sie alle in einem Component Set zusammenfasst, Variant. Varianten halten die verschiedenen Zustände derselben Komponente logisch zusammen.
Wähle mehrere Komponenten aus und klicke im rechten Panel auf Combine as variants; Figma umschließt sie mit einem gestrichelten violetten Rahmen. Dieser Rahmen ist nun ein Component Set. Du gibst jeder Variante über den Abschnitt „Properties" des Panels aussagekräftige Eigenschaftsnamen und -werte.
Varianten-Eigenschaften richtig benennen
Die Stärke des Variantensystems entsteht aus einer soliden Eigenschaftsstruktur. Stell dir eine Eigenschaft als Achse vor: Für einen Button könntest du beispielsweise zwei Achsen definieren.
Type= Primary, Secondary, GhostState= Default, Hover, Pressed, Disabled
Kombiniere diese beiden Eigenschaften und du erhältst 3 × 4 = 12 mögliche Kombinationen, die alle in einem Component Set leben. Wenn ein Designer eine Instance verwendet, wählt er Type: Primary und State: Hover aus Dropdowns im rechten Panel, und die korrekte Variante erscheint sofort.
Sei bei der Benennung konsistent. Schreibe Eigenschaftsnamen und -werte in jeder Komponente identisch; wenn sich State mit state oder Disabled mit disable vermischt, behandelt Figma sie als separate Eigenschaften und das Set zerfällt. Halte Werte kurz, lesbar und logisch.
Boolean- und Instance-Swap-Eigenschaften
Varianten sind nicht der einzige Eigenschaftstyp. Figma bietet mehrere Typen, die eine Komponente flexibler machen:
- Boolean-Eigenschaft: schaltet eine Ebene ein oder aus. Erstelle zum Beispiel einen Schalter namens
Has icon, um das Icon innerhalb eines Buttons anzuzeigen. - Instance-Swap-Eigenschaft: erlaubt es, eine verschachtelte Instance durch eine andere Komponente zu ersetzen. Du kannst den Avatar innerhalb einer Karten-Komponente zum Zeitpunkt der Verwendung gegen einen anderen Avatar tauschen.
- Text-Eigenschaft: erlaubt es, den Inhalt einer Textebene aus dem rechten Panel zu bearbeiten, ohne in die Ebene eintauchen zu müssen, um sie zu finden.
Kombiniere diese Eigenschaften mit Varianten, und eine einzige Karten- oder Button-Komponente deckt im Alleingang dutzende verschiedene Szenarien ab.
Schritt für Schritt: eine Button-Komponente bauen
Bringen wir die Theorie in die Praxis. Eine Button-Komponente mit Zustandsvarianten baut man von Grund auf in dieser Reihenfolge:
- 1. Zeichne einen Frame mit Auto Layout (Kürzel
Shift+A): platziere Text und ein optionales Icon darin. Lass Auto Layout Padding und Ausrichtung verwalten, damit der Button wächst, wenn der Text länger wird. - 2. Wandle diesen Frame in eine Komponente um (
⌥⌘K/Ctrl+Alt+K). - 3. Dupliziere die Komponente, verdunkle ihre Farbe und mache daraus den „Hover"-Zustand. Wiederhole dies für „Pressed" und „Disabled".
- 4. Wähle sie alle aus und klicke auf
Combine as variants. - 5. Benenne im rechten Panel die Eigenschaft
State; gib als Werte Default, Hover, Pressed, Disabled ein. - 6. Statt Farben von Hand einzugeben, binde eine color variable (Farb-Token). So aktualisiert das Ändern der Markenfarbe jede Variante.
Während diese Bibliothek wächst, offenbart das Definieren von Farben und Abständen als Variablen den wahren Wert von Komponenten: Dein Designsystem wird aus einer einzigen Quelle gespeist.
Häufige Fehler
Es gibt einige Fallstricke, in die man beim Aufbau eines Komponentensystems gerät. Sie zu vermeiden hält deine Datei langfristig sauber.
- Zu viele Varianten: mach nicht aus jedem kleinen Unterschied eine Variante. Fünf Achsen und 60 Kombinationen werden unbeherrschbar; löse manche Unterschiede stattdessen mit Boolean oder Instance Swap.
- Die Detach-Gewohnheit: eine Instance abzulösen und von Hand zu bearbeiten bricht die Verbindung. Verwende stattdessen Overrides (Text, Farbe, Swap).
- Inkonsistente Benennung: Groß-/Kleinschreibungs-Inkonsistenz in Eigenschafts- und Wertnamen spaltet das Set.
- Keine Variablen verwenden: Farben als feste Hex-Werte einzugeben macht spätere Sammelaktualisierungen unmöglich.
Häufige Fragen
Was ist der Unterschied zwischen einer Komponente und einer Variante?
Eine Komponente ist ein einzelnes wiederverwendbares Hauptdesignelement. Eine Variante ist die Struktur, die verschiedene Zustände derselben Komponente (zum Beispiel Default und Hover) in einem Component Set gruppiert. Jede Variante ist also eigentlich eine Komponente; das Variantensystem hält sie logisch zusammen.
Beeinträchtigen Varianten die Leistung?
In der Praxis beeinflusst eine vernünftige Anzahl von Varianten die Leistung nicht. Probleme entstehen bei unnötigen Multi-Achsen-Sets, die hunderte Kombinationen erzeugen. Die Achsenzahl begrenzt zu halten und Boolean-/Instance-Swap-Eigenschaften zu nutzen hält die Datei leichtgewichtig.
Kann ich Varianten später ändern?
Ja. Du kannst ein Component Set auswählen, um neue Varianten hinzuzufügen, Eigenschaften umzubenennen oder Werte zu bearbeiten. Änderungen verbreiten sich auf alle verknüpften Instances, weshalb es wichtig ist, die Benennung von Anfang an konsistent aufzusetzen.
Möchtest du Ordnung in dein Designsystem bringen? Ich kann dir helfen, eine wiederverwendbare, variantenbasierte Figma-Komponentenbibliothek aufzubauen oder deine bestehende Datei aufzuräumen. Nimm Kontakt auf und lass uns über dein Projekt sprechen.