Wer diese Funktion verwenden 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 Frames 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 Frame mit fünf Kontrollkästchen zu prototypisieren. Ohne interaktive Komponenten müssten wir den gleichen Frame 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: Ändern in.

1. Navigiere zum Tab Prototyp der rechten Seitenleiste.
2. Klicke auf das im Frame-Begrenzungsrahmen und ziehe es zur Zielvariante. Du kannst auch auf den im Bereich Interaktionen des Prototypen-Tabs klicken, die Aktion auf Ändern in setzen und dann die Zielvariante über die Dropdown-Liste auswählen.
3. Sobald die Verbindung hergestellt wurde, verwende das Bedienfeld Interaktion, um den Auslöser und die Aktion anzupassen.

Du kannst auch die Aktion Ändern in bei einer verschachtelten Instanz verwenden, um die übergeordnete Komponentenvariante zu ändern. Im unten stehenden Beispiel ist eine Variante aus einer Komponentengruppe in einer anderen Expandable-Komponentengruppe verschachtelt. Eine Ändern in-Interaktion ist auf der verschachtelten Instanz platziert, um das übergeordnete Element von seiner eingeblendeten Variante in seine ausgeblendete 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 Frame in deinem Design hinzu.
2. Wenn du bereit bist, dein Design zu prototypen, navigiere zum Tab 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.

Im folgenden Beispiel haben wir eine Interaktion mit einem Hover-Auslöser zusätzlich zur Varianteninteraktion mit Klick-Auslöser 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.

Beispiel:

1. Ein Kippschalter hat eine Varianteninteraktion Beim Klicken → Ändern in zwischen den Varianten Ein und Aus in seinem Komponentensatz.
2. Du fügst eine Interaktion Beim Klicken → Navigieren zu vom Kippschalter zu einem anderen Frame hinzu.

Figma navigiert zum nächsten Frame, 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.

Beispiel:

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

Figma wird zur Hover-Varianten auf Hover wechseln und anschließend zum nächsten Frame beim Klicken navigieren.

Interaktionen anzeigen

Wenn du interaktive Komponenten verwendest, siehst du die separaten Bereiche Interaktionen und Varianteninteraktionen im Tab Prototyp der rechten Seitenleiste.

• Verwende den Bereich Interaktionen, um Prototyp-Interaktionen und Animationen zu erstellen
• Verwende den Bereich 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 im Designmodus die Instanz aus.
2. Klicke oben in der rechten Seitenleiste auf .
3. Wähle Gehe zur Hauptkomponente aus.
4. Navigiere zum Tab Prototyp der rechten Seitenleiste.
5. Bearbeite deine Varianteninteraktionen.

State-Management über Frames hinweg

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

• State-Memorisierung: 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.

• Status teilen: Figma teilt den Status zwischen übereinstimmenden interaktiven Komponenten. Der Status 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 Frames. Wenn du die interaktive Komponente auf dem ersten Frame auf die geprüfte Variante setzt und dann zum zweiten Frame navigierst, wird auch die entsprechende Komponente auf dem zweiten Frame auf die geprüfte Variante gesetzt.

Wenn du den Status nicht über Frame hinweg beibehalten möchtest, deaktiviere Komponentenzustand zurücksetzen im Bedienfeld Interaktionsdetails der Prototypeninteraktion.

Erfahre mehr über das Prototyp-State-Management →

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:

• Die Variante wird 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 Fonts für Prototypen, die mit Betrachter*innen geteilt werden, die möglicherweise keinen Zugriff auf benutzerdefinierte Schriftarten in Ihren Designs haben. Wenn dein Team das Organisation oder Enterprise-Abo nutzt, kannst du sicherstellen, dass Prototypen-Viewer Zugriff auf benutzerdefinierte Schriftarten haben, indem du sie als freigegebene Schriftarten hochlädst.