Was sind Varianten?

Varianten ermöglichen es Ihnen, mehrere Variationen einer Komponente, wie verschiedene Stile oder Zustände eines Buttons, in einem einzigen Container zu gruppieren. Zum Beispiel können dunkle, helle und grüne Versionen eines Suchbuttons in einem Variantensatz gruppiert werden, was die Verwaltung und Nutzung von Assets vereinfacht.

Erstellen eines Variantensatzes

• Wählen Sie eine Gruppe von Komponenten aus.
• Gehen Sie zum Design-Panel und wählen Sie Komponentensatz erstellen, um die Komponenten in einer einzigen Variante zu gruppieren.
• Verwenden Sie Schrägstriche (z.B. button/dark/default), um Eigenschaften wie Stil (dunkel, hell, grün) und Zustand (Standard, Hover) zu organisieren.
• Benennen Sie Eigenschaftsbezeichnungen zur Klarheit um, z.B. "Eigenschaft 1" in Stil und "Eigenschaft 2" in Zustand ändern.

Verwaltung von Varianten

Instanzen von Varianten können erstellt werden, indem eine beliebige von ihnen kopiert wird. Eigenschaften jeder Instanz können im Design-Panel angepasst werden, sodass Sie zwischen verschiedenen Stilen oder Zuständen wechseln können. Um weitere Varianten hinzuzufügen, verwenden Sie das Plus-Symbol unter dem Variantensatz, um zusätzliche Variationen einzuschließen.

Erstellen von Interaktionen

Für interaktive Prototypen verbinden Sie einen Standardbutton mit seinem Hover-Zustand im Prototyp-Tab. Setzen Sie den Auslöser auf "Beim Hover" und die Animation auf "Auflösen" mit einer Dauer von 500ms. Verwenden Sie den Vorschau-Button in der Nähe des Fluss-Startpunkts, um Interaktionen direkt zu testen.

Diese optimierte Struktur macht den Prozess leichter verständlich und nachvollziehbar. Lassen Sie mich wissen, wenn Sie weitere Anpassungen benötigen!