Varianten in Figma: Optimierung von UI-Komponenten für Effizienz

Was sind Varianten?

Varianten ermöglichen das Gruppieren mehrerer Ausprägungen einer Komponente, wie verschiedene Stile oder Zustände eines Buttons, in einem einzigen Container. Beispielsweise können dunkle, helle und grüne Versionen eines Such-Buttons in einem Variantensatz zusammengefasst werden, was die Verwaltung und Nutzung von Assets vereinfacht.

Erstellen eines Variantensatzes

• Eine Gruppe von Komponenten auswählen.
• Im Design-Panel die Option Komponentensatz erstellen wählen, um die Komponenten zu einer einzigen Variante zu gruppieren.
• Schrägstriche verwenden (z. B. button/dark/default), um Eigenschaften wie Stil (dark, light, green) und Zustand (default, hover) zu organisieren.
• Eigenschaftsbezeichnungen zur besseren Übersicht umbenennen, z. B. "Property 1" in Stil und "Property 2" in Zustand ändern.

Verwalten von Varianten

Instanzen von Varianten können erstellt werden, indem eine beliebige davon kopiert wird. Die Eigenschaften jeder Instanz lassen sich im Design-Panel anpassen, sodass zwischen verschiedenen Stilen oder Zuständen gewechselt werden kann. Um weitere Varianten hinzuzufügen, das Plus-Symbol unter dem Variantensatz verwenden, um zusätzliche Ausprägungen einzufügen.

Erstellen von Interaktionen

Für interaktive Prototypen einen Standard-Button mit seinem Hover-Zustand im Prototype-Tab verbinden. Den Trigger auf "While Hovering" und die Animation auf "Dissolve" mit einer Dauer von 500 ms setzen. Mit dem Vorschau-Button in der Nähe des Startpunkts des Flows können Interaktionen direkt getestet werden.

Diese strukturierte Vorgehensweise erleichtert das Verständnis und die Umsetzung. Geben Sie Bescheid, falls weitere Anpassungen benötigt werden!