Videos in Prototypen verwenden

Vor dem Start

Wer kann diese Funktion verwenden?

Unterstützt werden Dateien in Education-, Professional-, Organization- und Enterprise-Teams.

Jede Person, die Teil eines kostenpflichtigen Teams ist, kann Videos zu Dateien hinzufügen.

Jede Person mit Schreibzugriff kann Videos in Dateien bearbeiten.

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

Füge deinen Prototypen Videos hinzu, um das Erlebnis nachzuempfinden, das deine Nutzer auf einer Website oder in einer App mit einem Video-Playback oder einer Vorschau haben würden.

Videos in Prototypen:

• Unterstützte Formate: .mp4, .mov, .webm
• maximale Größe: 100 MB
• sind Füllungen für Formen und verhalten sich dementsprechend.
• werden in der mobilen Figma-App derzeit nicht unterstützt.

Nachdem du ein Video zu deiner Designdatei hinzugefügt hast, kannst du grundlegende Videoeigenschaften bearbeiten oder anpassen. Danach kannst du Interaktionen zu deinen Videos hinzufügen, um mit dem Erstellen von Prototypen zu beginnen.

Videos zu Dateien hinzufügen

Figma hat keinen bestimmten Ebenentyp für Videos. Stattdessen sind Videos eine Art Füllung. Da Videos als Füllungen gelten, kannst du sie zu jeder Form und zu jedem Vektornetzwerk hinzufügen.

Du hast unterschiedliche Möglichkeiten, Videos zu Designdateien hinzuzufügen:

• A Ziehe eine Videodatei per Drag & Drop von deinem Computer auf die Arbeitsfläche. 

• B Nutze den Video-Importer in der Farbauswahl für die Füllung. Mehr Informationen zum Hochladen von Füllungen →

• C Nutze das Werkzeug „Bild/Video platzieren“, um mehrere Videos gleichzeitig hinzuzufügen. Mehr Informationen zum Werkzeug „Bild/Video platzieren“ →

• C Kopiere ein Video aus einer anderen Ebene in der aktuellen Datei oder aus einer anderen Datei.

• D Füge ein beliebiges Video aus der Zwischenablage in die Arbeitsfläche ein.

Wenn du ein Video direkt in der Arbeitsfläche hinzufügst, erstellt Figma darin ein Objekt mit den Abmessungen der Originaldatei. Wenn du ein Video als Füllung zu einem bestehenden Objekt hinzufügst, nutzt Figma den Namen und die Abmessungen des ursprünglichen Objekts.

Im Bereich Fill (Füllung) in der reichten Seitenleiste kannst du Videofüllungen anzeigen und aktualisieren. In dem Bereich Fill (Füllung) kannst du deine Videofüllung auch abspielen und eine Vorschau anzeigen lassen, zu einem bestimmten Zeitstempel springen oder schnell durch das Video springen.

Du kannst Ebenen mit Videofüllungen auch in der linken Seitenleiste im Ebenen-Tab identifizieren. Objekte mit Videofüllungen werden im Ebenen-Tab mit dem -Symbol angezeigt.

Videos bearbeiten

Nachdem du ein Video zu deiner Datei hinzugefügt hast, kannst du das Video wie folgt bearbeiten:

• Skalieren, drehen und die Abmessungen von Ebenen mit Videos anpassen.
• Auf Ebenen angewendete Videos zuschneiden und sie neu positionieren.
• Videooptionen anpassen, einschließlich Füll-, Rotations- und Mischmodus
• Masken anwenden, um nur einen Teil des Bildes anzuzeigen.

Prototyping mit Videos

Nachdem du ein Video zu einem Rahmen hinzugefügt hast, kannst du in der rechten Seitenleiste zum Prototypen wechseln. Von dort aus kannst du Interaktionen zwischen Rahmen und Videos erstellen.

Erfahre mehr über Prototyping →

Videoeigenschaften

Wenn du ein Video auswählst, öffnet sich im Protoyp-Tab der Bereich Video. In diesem Bereich kannst du das Verhalten eines Videos festlegen, wenn es sich in einem Prototypen zu seinem Rahmen bewegt.

• Aktiviere das Kontrollkästchen, um das Video automatisch abzuspielen.
• Klicke auf das Schleifen-Symbol , um das Video in Schleife abzuspielen.
• Klicke auf Lautsprecher-Symbol , um den Ton des Videos ein- und auszuschalten.

Videointeraktionen

Wenn du eine beliebige Prototyp-Verbindung erstellst, gibt es einen Auslöser, mit dem festgelegt wird, durch welches Ereignis die Interaktion gestartet wird, sowie eine Aktion, mit der festgelegt wird, welche Reaktion auf das ausgelöste Ereignis folgt.

Die folgenden Interaktions-Auslöser sind für Videos verfügbar:

• Nach Zeitstempel – Festgelegte Aktion wird ausgelöst, wenn das Video einen bestimmten Zeitstempel erreicht.
• Mit Ende des Videos – Festgelegte Aktion wird ausgelöst, wenn das Video zu Ende ist.

Die folgenden Interaktions-Aktionen sind für Videos verfügbar:

• Video abspielen/anhalten – Wähle entweder Play video (Video abspielen), Pause video (Video anhalten) oder Toggle play/pause (Umschalten Abspielen/anhalten).
• Video stummschalten/Stummschaltung aufheben – Wähle entweder Mute video (Video stummschalten), Unmute Video (Stummschaltung aufheben) oder Toggle mute/unmute (Umschalten Stummschalten/Stummschaltung aufheben).
• Bestimmte Zeit angeben – Lege einen bestimmten Zeitstempel fest, zu dem das Video springen soll.
• Vor-/Zurückspringen – Wähle entwederJump forward (Vorspringen) oder Jump backward (Zurückspringen), und wähle aus, wie viele Sekunden, du vor- bzw. zurückspringen möchtest.

Wenn du eine Interaktion zwischen zwei Rahmen erstellst, die dasselbe Video aufweisen, gibt es im Bereich Interaktionsdetails die Möglichkeit , den Videostatus zurückzusetzen. Wenn diese Option aktiviert ist, wird das Video zwischen den Rahmen vom Anfang an neu gestartet. Erfahre mehr über die Video-Statusverwaltung → 

Videointeraktionen innerhalb des gleichen Rahmens

Du kannst auf Grundlage von Auslösern, die in dem gleichen Rahmen erstellt wurden, mit Videos interagieren und Prototypen erstellen. Dies kann hilfreich sein, wenn du versuchst, ein interaktives Videoplayer-Erlebnis zu schaffen.

1. Stelle eine Verbindung zwischen deinem Startobjekt und dem Video her.
2. Lege die gewünschte Startaktion fest (z. B. Beim Anklicken). 
3. Wähle deine gewünschte Aktion für das Video aus (z. B. Video stummschalten/die Stummschaltung aufheben). 

Videos und Smart-Animationen

Du kannst die Funktion Smart-Animation nutzen, um bei der Navigation zwischen verschiedenen Rahmen den Fortschritt eines Videos beizubehalten. Wenn du beispielsweise einen Prototypen erstellen möchtest, bei dem ein Video beim Eintreten in einen Rahmen automatisch abgespielt wird, gelangst du durch Klicken auf das Video in einen neuen Rahmen mit einer größeren Ansicht.

1. Du kannst eine Verbindung zwischen zwei Rahmen mit demselben Videotitel herstellen. Achte darauf, dass die Titel der Videoebenen ebenfalls übereinstimmen.
2. Stelle die Animationseinstellung auf Smart-Animation.
3. Deaktiviere im Tab Interaction Details (Interaktionsdetails) die Option Reset video position (Videoposition zurücksetzen).

Videos und interaktive Komponenten

Du kannst interaktive Komponenten nutzen, um Prototypen für Videointeraktionen in einem einzigen Rahmen zu erstellen. So kannst du beispielsweise eine Vorschau abspielen lassen, wenn der Cursor über das Video hovert.

1. Du kannst Komponenten mit Varianten für den Standardmodus und für den Hovermodus erstellen.
2. Im Standardmodus sollte die automatische Wiedergabe aus- und im Hovermodus eingeschaltet sein.
3. Stelle eine Verbindung her, durch die der Standardardmodus in den Hovermodus wechselt, und deaktiviere die Option Reset video position (Videoposition zurücksetzen).
4. Erstelle einen Rahmen mit verschiedenen Komponenteninstanzen und ersetze das Video, um eine Komponente wiederzuverwenden.

Teste weitere Möglichkeiten zum Erstellen von Video-Prototypen mit der Playground-Datei →