Figma-Varianten richtig ordnen – sonst wächst jede Schaltfläche zum Sonderfall

Erstelle zuerst eine stabile Hauptkomponente. Fasse nur echte Ausprägungen derselben Schaltfläche in einem Komponentenset zusammen und trenne Größe, Stil und Zustand in eigene Varianteneigenschaften; Beschriftung, Icon-Sichtbarkeit und austauschbare Icons steuerst du mit Text-, Boolean- oder Instanztausch-Eigenschaften.

Diese Trennung verhindert, dass jede Änderung zur Sondervariante wird. Mit jeder zusätzlichen Variantenachse wächst die Zahl möglicher Kombinationen; ein klar begrenztes Modell hält die Auswahl verständlich und vermeidet nahezu identische Buttons, die getrennt gepflegt werden müssten.

Mit einer stabilen Hauptkomponente beginnen

Baue zunächst eine Schaltfläche mit der gemeinsamen Grundstruktur: Container, Beschriftung und bei Bedarf eine verschachtelte Icon-Instanz. Richte Auto Layout, Abstände und Größenverhalten ein, bevor du Varianten erzeugst. Sonst überträgst du strukturelle Fehler auf jede Ausprägung.

Eine Hauptkomponente legt die gemeinsamen Eigenschaften fest, während verknüpfte Instanzen ihre Aktualisierungen übernehmen. Die Einführung in Figma-Komponenten bestätigt außerdem: Zum Erstellen und Bearbeiten ist Schreibzugriff nötig; Lesezugriff auf die Originaldatei genügt, um Komponenten aus ihrer Bibliothek zu verwenden.

Nenne das Komponentenset nach seiner Funktion, beispielsweise Button, nicht nach einer einzelnen Darstellung wie Blue Button. Der Name beschreibt, was das Element ist; Größe, Stil und Zustand gehören in getrennte Eigenschaften. So bleibt der Bibliothekseintrag stabil, wenn später ein Wert ergänzt oder umbenannt wird.

Größe, Stil und Zustand als Varianten aufbauen

Für ein durchgehendes, ausdrücklich vereinfachtes Beispiel genügen zwei Größen, zwei visuelle Stile und vier Zustände: Size mit Small und Large, Style mit Primary und Secondary sowie State mit Default, Hover, Pressed und Disabled. Diese drei Achsen beantworten unterschiedliche Fragen und lassen sich unabhängig wählen.

1. Dupliziere die vorbereitete Hauptkomponente nur für tatsächlich benötigte Ausprägungen.
2. Markiere die Komponenten und fasse sie als Varianten zu einem Komponentenset zusammen.
3. Benenne die Varianteneigenschaften eindeutig als Size, Style und State.
4. Weise jeder Variante genau eine Kombination der vorgesehenen Werte zu.
5. Ordne die Varianten als Matrix an, damit fehlende und doppelte Kombinationen auffallen.
6. Platziere die gebräuchlichste, sicher nutzbare Ausprägung oben links.

Das Beispiel umfasst rechnerisch 2 × 2 × 4, also 16 Kombinationen. Fügt man „Icon sichtbar“ als weitere Variantenachse hinzu, verdoppelt sich die Matrix auf 32. Die Rechnung ist kein Figma-Limit, sondern zeigt, warum jede Achse eine fachliche Begründung braucht.

Die Figma-Praxisregeln für Varianten empfehlen sie für ähnliche Ausprägungen mit gemeinsamen Merkmalen wie Zustand, Größe oder Layout und warnen vor einer unbeherrschbaren Zahl von Permutationen. Beim Zusammenführen werden zudem mit Schrägstrichen gebildete Gruppen aus Ebenennamen in Werte von Varianteneigenschaften umgewandelt; bereinige bestehende Namen deshalb vorher.

Veränderliche Inhalte nicht vervielfältigen

Nicht jede sichtbare Änderung rechtfertigt eine Variante. Die Dokumentation zu Komponenteneigenschaften unterscheidet Boolean-, Instanztausch-, Text- und Varianteneigenschaften; sie nennt ein einblendbares Schaltflächen-Icon ausdrücklich als Anwendungsfall für Boolean und bestimmt die Variante oben links als Standard eines Komponentensets.

• Texteigenschaft: für die bearbeitbare Beschriftung der Schaltfläche.
• Boolean-Eigenschaft: für ein optional sichtbares Icon oder eine andere ein- und ausblendbare Ebene.
• Instanztausch-Eigenschaft: für ein verschachteltes Icon, das gegen vorgesehene andere Instanzen ausgetauscht werden darf.
• Varianteneigenschaft: für definierte Größen, Stile oder Zustände, deren Gestaltung systematisch voneinander abweicht.

Damit bleibt „Icon vorhanden“ eine Eigenschaft derselben Schaltfläche, statt eine vollständige zweite Variantenreihe zu erzeugen. Soll nicht nur die Sichtbarkeit, sondern das konkrete Symbol wählbar sein, kombiniere eine verschachtelte Icon-Instanz mit einer Instanztausch-Eigenschaft.

Beim Prototyping gilt eine Grenze: Verbindungen benötigen zwei unterschiedliche Objekte. Werden zwei zuvor verbundene Komponenten über eine Boolean-Eigenschaft zu einem Objekt zusammengeführt, gehen diese Verbindungen verloren. Für interaktive Übergänge wie Hover oder Pressed sind getrennte Zustandsvarianten deshalb die passende Struktur.

Namen müssen jeweils eine Frage beantworten

Eigenschaftsnamen sollten stabile Fragen formulieren: Welche Größe? Welcher Stil? Welcher Zustand? Die Werte beantworten jeweils nur diese eine Frage. Mischwerte wie Primary Hover oder Large Disabled verbinden zwei Achsen und machen spätere Ergänzungen unnötig kompliziert.

Halte die Begriffe innerhalb der Bibliothek konsistent. Wenn die Implementierung Size, Style und State verwendet, kann dieselbe Sprache in Figma die Abstimmung erleichtern. Entscheidend ist nicht Deutsch oder Englisch, sondern dass Default, Normal und Rest nicht gleichzeitig denselben Zustand bezeichnen.

Vermeide Namen wie Version 2, New oder Special. Sie erklären weder Zweck noch Abweichung und verlieren schnell ihren Bezug. Ist ein Element fachlich anders – etwa ein reiner Icon-Button mit eigener Geometrie, Bedienlogik und Anforderungen an die Zugänglichkeit –, bleibt ein separates Komponentenset klarer als eine weitere Style-Ausprägung des normalen Buttons.

Variante, Eigenschaft oder separate Komponente wählen

Die Entscheidung folgt drei Arbeitsfragen. Sie sind eine Modellierungshilfe, keine technische Beschränkung von Figma:

• Neue Variante: Bleibt es dieselbe Komponente, aber mit einem begrenzten, bewusst angebotenen Zustand, einer Größe oder einem Stil? Dann ergänze eine Variante beziehungsweise einen Wert.
• Andere Eigenschaft: Ändert sich nur der Text, die Sichtbarkeit einer Ebene oder eine verschachtelte Instanz? Dann verwende die passende Komponenten-Eigenschaft.
• Separate Komponente: Ändern sich Zweck, Anatomie oder Nutzungsregeln deutlich? Dann trenne das Element, statt die Variantenmatrix mit einem Sonderfall zu verbiegen.

Prüfe vor der Veröffentlichung jede Achse gegen reale Anwendungsfälle und entferne unzulässige Kombinationen. Kontrolliere die Standardvariante und konfiguriere eine Instanz ausschließlich über die freigegebenen Eigenschaften. Wenn dafür keine Ebeneneingriffe und keine Kenntnis interner Namen nötig sind, ist die Struktur für eine gemeinsame Bibliothek verständlich angelegt.

Lesen Sie auch:

• Ein Viertel arbeitet hybrid – ohne gemeinsame Regeln wächst die Ungleichheit
• AWS und SANS ordnen Agentenrisiken – Identitäten werden zum blinden Fleck
• Microsoft und HUMAIN schicken Ingenieure zum Kunden – das Modell ist der Engpass