Wer diese Funktion nutzen kann

Enthalten in allen Teams und Abos.

Alle Nutzer*innen mit Schreibzugriff können interaktive Komponenten erstellen.

Alle Nutzer*innen mit Schreibzugriff auf die Datei können Komponenten in einer Bibliothek veröffentlichen.

Noch nicht viel Erfahrung mit Prototyping? Dann sieh dir unsere Einführung in Prototyping in Figma → an.

Mit interaktiven Komponenten kannst du Prototypeninteraktionen zwischen Varianten in einem Komponentensatz erstellen. Jedes Mal, wenn du eine Instanz zu deinen Designs hinzufügst, werden diese Interaktionen eingerichtet und können verwendet werden. Damit sparst du Zeit bei der Erstellung von Prototypen und verhinderst unnötiges Chaos.

• Erstelle interaktive Elemente, die automatisch zwischen Varianten wechseln, wie z. B. Schaltflächen, die vom Hover- in den Gedrückt-Halten-Modus wechseln.
• Lege Standardinteraktionen auf Komponentenebene fest und mache Schluss mit dem Rätselraten beim Erstellen von Prototypen.
• Reduziere die Anzahl der Rahmen und Verbindungen, die zur Prototypisierung von Eingabefeldern wie einer Gruppe von Kontrollkästchen oder Schaltern benötigt werden.

Vor der Interaktion mit Variablen

Im folgenden Beispiel haben wir alle möglichen Verbindungen hinzugefügt, um einen Rahmen mit fünf Kontrollkästchen zu prototypisieren. Ohne interaktive Komponenten müssten wir den gleichen Rahmen 32 Mal duplizieren und 160 Verbindungen zwischen ihnen erstellen, um jede mögliche Kombination zu prototypisieren.

Mit variablen Interaktionen

Mit interaktiven Komponenten müssen wir nur eine Instanz des Kontrollkästchens unserem Design hinzufügen, und seine Varianteninteraktionen sind einsatzbereit. Wenn wir den Prototyp anzeigen, wechselt Figma automatisch zwischen den geprüften und nicht geprüften Varianten.

Interaktive Komponenten erstellen

Du kannst interaktive Komponenten nur erstellen, indem du Varianten aus demselben Komponentensatz nutzt. Wenn du keinen Komponentensatz hast, mit dem du arbeiten kannst, musst du zuerst einen erstellen. Erfahre, wie du Varianten erstellst →

Variable Interaktionen erstellen

interaktive Komponenten führen eine neue Prototyp-Aktion ein: Change to (Ändern in).

1. Wähle die Startvariante für die Interaktion aus dem Komponentensatz aus.
2. Navigiere zum Tab Prototype (Prototyp) in der rechten Seitenleiste.
3. Klicke auf das auf der rechten Seite des Begrenzungsrahmens und ziehe es zur Zielvarianten. Du kannst auch auf das im Bereich Interactions (Interaktionen) des Bedienfelds Prototype (Prototyp) klicken, die Aktion auf Change to (Ändern in) setzen und dann die Zielvariante über das Dropdown-Menü auswählen.
4. Sobald die Verbindung hergestellt wurde, passe den Auslöser und die Aktion über das Bedienfeld Interaction details (Interaktionsdetails) an.

Du kannst auch die Aktion Change to (Ändern in) auf einer verschachtelten Instanz verwenden, um die Variante der übergeordneten Komponenten zu ändern. Im folgenden Beispiel ist eine Variante aus dem Komponentensatz Show details (Details anzeigen) in einem anderen Komponentensatz Container verschachtelt. Eine Change to-Interaktion wird auf der verschachtelten Instanz platziert, um die übergeordnete Komponente von ihrer Collapsed-Variante auf ihre Expanded-Variante zu ändern.

Interaktive Komponenten verwenden

Füge Instanzen interaktiver Komponenten zu deinen Designs hinzu, wie jede andere Komponente auch. Der einzige Unterschied besteht darin, dass die Instanzen bereits Interaktionen für das Prototyping haben.

So verwendest du interaktive Komponenten:

1. Füge eine Instanz einer interaktiven Komponente zu einem Rahmen in deinem Design hinzu.
2. Wenn du bereit bist, dein Design zu prototypen, navigiere zum Tab Prototype (Prototyp) auf der rechten Seitenleiste.
3. Erstelle deinen Prototypen.
4. Führe eine Vorschau von Designs und Interaktionen in der Präsentationsansicht aus.

Weitere Interaktionen hinzufügen

Wenn du einen Prototyp mit interaktiven Komponenten erstellst, kannst du reguläre Interaktionen zusätzlich zu den Varianteninteraktionen hinzufügen.

In dem unten stehenden Beispiel haben wir eine Interaktion mit einem Klick-Auslöser zusätzlich zur Varianteninteraktion mit Verzögerung hinzugefügt.

Die Reihenfolge der Interaktion hängt davon ab, ob die Auslöser, die du verwendest, dieselben Auslöser wie die Varianteninteraktionen sind. Erfahre mehr über Prototypen-Auslöser →

Gleiche Auslöser

Wenn beide Interaktionen denselben Auslöser verwenden, wird Figma die Prototyp-Interaktion verwenden und die Varianten-Interaktion ignorieren.

Zum Beispiel:

1. Ein Kippschalter hat eine Varianteninteraktion On click (Beim Klicken) → Change to (Ändern in) zwischen den Varianten On (Ein) und Off (Aus) in seinem Komponentensatz.
2. Du fügst eine Interaktion On click (Beim Klicken) → Navigate to(Navigieren zu) vom Kippschalter zu einem anderen Rahmen hinzu.

Figma navigiert zum nächsten Rahmen, wenn Nutzer*innen auf den Kippschalter klicken.

Verschiedene Auslöser

Wenn du eine Interaktion mit einem anderen Auslöser hinzufügst, spielt Figma sowohl die Interaktion als auch die Varianteninteraktionen ab.

Zum Beispiel:

1. Eine Schaltfläche hat eine Varianteninteraktion On hover (Beim Hovern) → Change to(Ändern in) zwischen den Varianten Standard und Hover.
2. Du fügst eine Interaktion On click (Beim Klicken) → Navigate to(Navigieren zu) hinzu, wenn du deinen Prototyp erstellst.

Figma wird zur Hover-Varianten auf Hover wechseln und anschließend zum nächsten Rahmen On click (Beim Klicken) navigieren.

Interaktionen anzeigen

Wenn du interaktive Komponenten verwendest, siehst du die separaten Bereiche Interactions (Interaktionen) und Variant interactions (Varianteninteraktionen) im Tab Prototype (Prototyp) der rechten Seitenleiste.

• Verwende den Bereich Interactions (Interaktionen), um Prototyp-Interaktionen und Animationen zu erstellen
• Verwende den Bereich Variant interactions (Varianteninteraktionen), um die Details einer Varianteninteraktion anzuzeigen.

Varianteninteraktionen bearbeiten

Du kannst eine Varianteninteraktion für eine Instanz in deinem Prototyp überschreiben. Wenn du eine Varianteninteraktion für die Hauptkomponente bearbeiten möchtest, musst du dies aus der Quelldatei tun.

Um auf einen Komponentensatz von einer Instanz zuzugreifen und deine Änderungen vorzunehmen:

1. Wähle die Instanz aus.
2. Klicke auf im Bereich Instanz der rechten Seitenleiste.
3. Wähle Go to main component (Gehe zur Hauptkomponenten).
4. Navigiere zum Tab Prototype (Prototyp) der rechten Seitenleiste.
5. Bearbeite deine Varianteninteraktionen.

Zustandsmanagement über Rahmen hinweg

Deine Prototypen beinhalten wahrscheinlich Interaktionen über mehrere Rahmen hinweg. Standardmäßig verwendet Figma Zustandsmanagement-Kontrollen, um festzulegen, wie interaktive Komponenten über mehrere Rahmen hinweg funktionieren.

• Zustandsspeicherung: Figma speichert die letzte gespeicherte Variante der interaktiven Komponente.

  Zum Beispiel kann eine interaktive Komponente für ein Kontrollkästchen vorhanden sein. Wenn du die interaktive Komponente auf die markierte Variante einstellst, speichert Figma den Status dieser Variante. Das heißt: Wenn du aus dem Frame herausnavigierst und später zu ihm zurückkehrst, verbleibt die interaktive Komponente im markierten Status.

• Zustand teilen: Figma teilt den Zustand zwischen übereinstimmenden interaktiven Komponenten. Der Zustand wird erst geteilt, wenn bereits eine erste Interaktion mit der Komponente stattgefunden hat.

  Zum Beispiel kann eine interaktive Komponente für ein Kontrollkästchen vorhanden sein, mit einer Instanz der Komponente auf jedem der beiden Rahmen. Wenn du die interaktive Komponente auf dem ersten Rahmen auf die geprüfte Variante setzt und dann zum zweiten Rahmen navigierst, wird auch die entsprechende Komponente auf dem zweiten Rahmen auf die geprüfte Variante gesetzt.

Wenn du den Zustand nicht über Rahmen hinweg beibehalten möchtest, deaktiviere Komponentenzustand zurücksetzen im Bedienfeld Interaction details (Interaktionsdetails) der Prototypeninteraktion.

Erfahre mehr über das Prototyp-Zustandsmanagement →

Mit Variablen verwenden

Wende Variablen auf interaktive Komponenten an, um ihre Leistung noch weiter zu verbessern.

Wenn du auf eine interaktive Komponente mit einer angewendeten Variablen klickst:

• Wird die Variante aktualisiert
• Die Variable wird aktualisiert, was wiederum alle anderen Elemente aktualisiert, die an diese Variable gebunden sind

Erfahre mehr über die Verwendung von Variablen mit interaktiven Komponenten →

Interaktive Komponenten mit benutzerdefinierten Schriftarten

Bei der Verwendung von benutzerdefinierten Schriftarten für Texte in interaktiven Komponenten denke daran, dass Prototyp-Betrachter*innen diese benutzerdefinierten Schriftarten möglicherweise nicht auf ihren Geräten installiert haben. In diesen Fällen verwendet Figma zwischengespeicherte Informationen über Varianten interaktiver Komponenten, um benutzerdefinierte Schriftarten bei der Darstellung eines Prototyps korrekt anzuzeigen, kann aber eine Schriftart durch Inter ersetzen, wenn wir nicht gleichzeitig Textüberschreibungen beibehalten und die Schrifteinstellungen für eine Interaktion ändern können.

Nehmen wir zum Beispiel an, dass die Person, die deinen Prototyp anschaut, die benutzerdefinierte Schriftart, die du verwendest, nicht auf ihrem Gerät installiert hat. Wenn eine Instanz einer interaktiven Komponente eine Textüberschreibung hat:

• Figma kann die benutzerdefinierte Schriftart durch Inter ersetzen, wenn die Änderung der Varianten eine Schrifteinstellung wie Gewicht oder Unterstreichung beinhaltet.
• Figma zeigt die richtige Variable an, wenn die Änderung der Variante nicht mit einer Schriftart-Einstellung zusammenhängt, wie z. B. der Hintergrundfarbe einer Schaltfläche.

Wir empfehlen die Verwendung von Google-Schriften für Prototypen, die mit Betrachter*innen geteilt werden, die möglicherweise keinen Zugriff auf benutzerdefinierte Schriften in deinen Designs haben. Wenn dein Team auf dem Organisations- oder Enterprise-Abo ist, kannst du sicherstellen, dass Prototyp-Betrachter*innen Zugriff auf benutzerdefinierte Schriften haben, indem du sie als gemeinsam genutzte Schriften hochlädst.