Was sind Varianten?

Varianten ermöglichen es, mehrere Ausprägungen einer Komponente, wie verschiedene Stile oder Zustände eines Buttons, in einem einzigen Container zu gruppieren. 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 Variante 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 einstellen. 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 Nachverfolgung des Prozesses. Geben Sie Bescheid, falls weitere Anpassungen benötigt werden!