Kurz gesagt
- Figma kann einen Prototyp nicht selbst aufnehmen: Du spielst ihn in der Präsentationsansicht ab und nimmst dieses Fenster mit einem Screen Recorder auf.
- Leg Gerät, Hintergrund und Flows vor der Aufnahme im Tab „Prototyp“ fest und blende die Figma-Oberfläche aus, damit der Kunde nur das Design sieht.
- Beweg dich langsamer als allein: Halte auf jedem Screen kurz an, hovere bewusst und warte, bis Verzögerungen und Übergänge fertig sind.
- Nimm das Fenster auf, nicht den ganzen Bildschirm, und erklär die Entscheidungen, nicht die Klicks.
- Schick den Video-Link mit einer klaren Frage, damit der Kunde weiß, was du von ihm brauchst.
Um einen Figma-Prototyp aufzunehmen, öffnest du ihn in der Präsentationsansicht, legst im Tab „Prototyp“ Gerät und Flows fest, blendest die Figma-Oberfläche aus und nimmst dieses Fenster mit einem Screen Recorder auf, während du erzählst. Figma selbst hat keinen Videoexport. Wie gut die Tour wird, hängt also davon ab, wie du den Prototyp vorbereitest und wie langsam du klickst.
Dieser Leitfaden ist für das Video, das du einem Kunden vor einem Review-Call oder statt eines Review-Calls schickst: „Hier ist der neue Checkout-Flow, und darum funktioniert er so.“ Kein aufpolierter Werbefilm, sondern eine klare Erklärung.
Bereite den Prototyp vor, bevor du aufnimmst
Die meisten chaotischen Prototyp-Videos sind chaotisch wegen der Prototyp-Einstellungen, nicht wegen der Aufnahme. Fünf Minuten hier ersparen dir drei Takes.
Gerät und Hintergrund festlegen
Die Prototyp-Einstellungen findest du in der rechten Seitenleiste. Klick auf eine leere Stelle der Arbeitsfläche, damit nichts ausgewählt ist, und öffne dann den Tab . Dort findest du:
- Gerät: Typ, Ausrichtung und Modell für die Präsentationsansicht. Ein Handy-Modell legt einen realistischen Rahmen um mobile Designs, das hilft dem Kunden, sich das echte Produkt vorzustellen.
- Hintergrund: die Farbe hinter dem Prototyp in der Präsentationsansicht. Wähl etwas Neutrales, das nicht mit dem Design konkurriert.
- Flows: die Startpunkte der Abläufe auf der aktuellen Seite.
Bei Desktop-Designs stört ein Geräterahmen meistens. Wähl stattdessen oder , damit das Design das Fenster ausfüllt.
Gib jedem Ablauf einen eigenen Flow
Ein Flow-Startpunkt sagt Figma, wo ein Ablauf beginnt, und du kannst mehrere haben. In der Präsentationsansicht erscheinen die Flows mit ihren Beschreibungen in einer Seitenleiste links.
Benenn sie so, wie der Kunde denkt: „Registrierung“, „Checkout“, „Buchung ändern“. Dann startet jede Aufnahme an einem sauberen Punkt, und mit R springst du an den Anfang des aktuellen Flows zurück, wenn du neu beginnen musst.
Prüf Hover- und Verzögerungs-Interaktionen
Interaktionen, die vom Timing abhängen, wirken im Video oft kaputt. Spiel jeden Flow vor der Aufnahme einmal durch und prüf diese drei Auslöser:
| Auslöser | Was er in Figma tut | Was du im Video tust |
|---|---|---|
| Beim Hovern | Zeigt einen Zustand nur, solange der Zeiger auf dem Hotspot bleibt, und springt zurück, wenn er ihn verlässt | Auf das Element fahren, stillhalten, sagen, was sich geändert hat |
| Maus hineinbewegt | Löst einmal aus, wenn der Zeiger zum ersten Mal in den Hotspot kommt | Einmal bewusst hineinfahren und nicht wieder hinausrutschen |
| Nach Verzögerung | Geht nach einer festgelegten Zeit auf dem Frame von selbst weiter, in Millisekunden | Die Verzögerung für die Aufnahme verlängern oder auf einen Klick umstellen |
Die Screens mit „Nach Verzögerung“ sind die übliche Falle: Sie gehen weiter, während du sie noch erklärst.
Die Präsentationsansicht einrichten
Öffne den Prototyp über Präsentieren in der Werkzeugleiste oder mit ⌘⌥Return. Dann räumst du auf:
- Schalte die Hotspot-Hinweise aus. Deaktiviere . Sonst blinken bei jedem Klick außerhalb eines Hotspots blaue Kästen über dem Design, und im Video sieht das wie ein Fehler aus.
- Blende die Figma-Oberfläche aus. Wähle , um Werkzeugleiste und Fußzeile zu entfernen.
- Wähl eine Skalierung. Ohne Geräterahmen hast du „Tatsächliche Größe (100 %)“, „Responsiv“, „Breite anpassen“, „Breite und Höhe anpassen“ oder „Bildschirm füllen“. Mit Geräterahmen bietet der Geräteumschalter unten Optionen wie „Gerät an den Bildschirm anpassen“. Mit Z schaltest du durch.
- Wechsle in den Vollbildmodus, wenn du den ganzen Bildschirm aufnimmst. Nutze dafür das Vollbildsymbol in der Präsentationsleiste.
- Starte beim Flow. Wähl den Flow in der Seitenleiste und blende die Seitenleiste dann aus, damit sie nicht im Bild ist.
Nimm das Fenster auf, nicht den Bildschirm
Nimm nur das Browser- oder Figma-Fenster auf, das den Prototyp zeigt. Aufnahmen des ganzen Bildschirms erwischen dein Dock, deine anderen Tabs und die Mitteilung, an die du nicht gedacht hast.
Unter macOS geht das mit der App „Bildschirmfoto“: Drück ⌘⇧5, wähl das Werkzeug, das einen Bereich des Bildschirms aufzeichnet, und zieh den Rahmen um den Prototyp. Unser Leitfaden, wie du nur ein Fenster oder einen Bereich des Bildschirms aufnimmst, erklärt die Optionen, auch mit mehreren Monitoren. Wenn du am Mac zum ersten Mal aufnimmst, fang mit Bildschirm am Mac aufnehmen an.
Bevor du startest, geh die 60-Sekunden-Checkliste vor der Videoaufnahme durch: Mitteilungen aus, fremde Tabs zu, Testinhalte im Design statt der Daten eines echten Kunden.
Klick langsamer, als es sich natürlich anfühlt
Du weißt, wo jeder Hotspot ist. Dein Kunde nicht. Im Video wirkt dein normales Tempo hektisch.
- Halte auf jedem Screen ein, zwei Sekunden an, bevor du klickst. Sag, wofür der Screen da ist.
- Fahr den Zeiger erst zum Ziel, dann klick. So sieht der Zuschauer, wohin du willst, bevor es passiert.
- Hovere mit Absicht. Bei Hover-Zuständen fährst du auf das Element, hältst still und sagst, was sich ändert.
- Warte auf Übergänge. Animierte Übergänge und Overlays brauchen einen Moment. Wenn du während einer Animation klickst, kann sie übersprungen werden, oder du triffst den falschen Hotspot.
- Scroll nicht zu schnell. Wenn ein Frame scrollt, scroll in kleinen Schritten und halte dort an, wo der Kunde hinschauen soll.
Wenn der Kunde vielleicht am Handy schaut, helfen hervorgehobene Klicks und ein wenig Zoom bei kleinen Bedienelementen. Wann das hilft und wann es schwindlig macht, steht in Auto-Zoom in Bildschirmaufnahmen.
Erklär die Entscheidungen, nicht die Klicks
„Jetzt klicke ich auf Weiter“ sagt dem Kunden nichts, was er nicht selbst sieht. Der Wert einer Tour liegt in den Gründen, die du sonst in einem Meeting erklären würdest.
Eine einfache Struktur für jeden Flow:
- Wofür dieser Flow da ist: „So ändert ein wiederkehrender Kunde eine Buchung.“
- Die Entscheidung dahinter: „Wir haben die Datumsauswahl in den ersten Schritt verschoben, weil laut Briefing die meisten Änderungen das Datum betreffen.“
- Was noch offen ist: „Der Stornierungs-Screen ist ein Platzhalter, bis wir den Text der Stornobedingungen haben.“
- Was du zurück brauchst: „Kannst du die Formulierung in Schritt zwei prüfen?“
Tour durch den Prototyp, erste Runde
Du schickst einen klickbaren Prototyp zum ersten Review · Etwa 3 Minuten
Hi Markus, das ist die erste klickbare Version des Buchungs-Flows. Ich gehe einmal von Anfang an durch, danach kannst du selbst über den Link unten durchklicken.
Wir starten auf der Buchungsseite. Die wichtigste Änderung gegenüber den Wireframes: Das Datum kommt zuerst, weil die meisten Leute genau das ändern. Wenn du auf ein Datum tippst, erscheinen darunter die verfügbaren Uhrzeiten, ohne neuen Screen.
Zwei Dinge sind noch Platzhalter: die Bestätigungs-E-Mail und der Text der Stornobedingungen. Was ich von dir brauche, ist ein Ja oder Nein zur Reihenfolge mit dem Datum zuerst, und jede Formulierung, die du im Schritt mit der Zusammenfassung ändern würdest.
Mehr dazu, wie du eine Designpräsentation aufbaust, auch für Runde zwei und Vorher-nachher-Vergleiche, findest du in Design dem Kunden präsentieren – ganz ohne Meeting. Wenn das Video Feedback ist und keine Präsentation, hat Design-Feedback per Video geben eine andere Struktur.
Schick es mit dem Prototyp-Link
Wenn du fertig bist, schick zwei Dinge in einer Nachricht: das Video und den Prototyp-Link von Figma für Kunden, die selbst herumklicken wollen. Schreib die Frage, auf die du eine Antwort brauchst, auch in die Nachricht, nicht nur ans Ende des Videos.
Hi Markus, hier eine kurze Tour durch den Buchungs-Flow. Den Prototyp-Link findest du unten, falls du selbst durchklicken willst. Eine Frage: Passt es für dich, dass das Datum zuerst kommt? Ein Ja oder Nein bis Freitag hält uns im Zeitplan.
https://justrec.app/v/k3f9Qa
Wenn du solche Videos oft verschickst, erklärt unsere Seite zum Versenden von Videos an Kunden, wie Link und Kundenseite funktionieren, und der Leitfaden zur asynchronen Kommunikation mit Kunden per Video zeigt, wann ein Video einen Call ersetzt.
Quellen
- Figma Hilfe-Center: Prototypen abspielen, geprüft im November 2026.
- Figma Hilfe-Center: Gerät- und Hintergrundeinstellungen für Prototypen festlegen, geprüft im November 2026.
- Figma Hilfe-Center: Prototypen-Auslöser, geprüft im November 2026.
- Apple Support: Bildschirmfotos oder Bildschirmaufnahmen auf dem Mac erstellen, geprüft im November 2026.
Häufige Fragen
Kann Figma einen Prototyp als Video aufnehmen?
Nein. Figma spielt Prototypen in der Präsentationsansicht und in der Inline-Vorschau ab, hat aber keinen eingebauten Videoexport. Du nimmst das Präsentationsfenster mit einem Screen Recorder auf, etwa mit der macOS-App „Bildschirmfoto“, mit QuickTime oder mit einer eigenen App.
Wie blende ich die Figma-Werkzeugleiste beim Präsentieren eines Prototyps aus?
Öffne in der Präsentationsansicht das Optionsmenü und wähle „UI ausblenden“. Das blendet Werkzeugleiste und Fußzeile aus und fügt der URL außerdem einen Parameter hinzu, sodass jeder, der diesen Link öffnet, den Prototyp ohne Oberfläche sieht.
Wie zeige ich einen Figma-Prototyp ohne Geräterahmen?
Heb jede Auswahl auf der Arbeitsfläche auf, öffne in der rechten Seitenleiste den Tab „Prototyp“ und wähle statt eines Handy- oder Tablet-Modells eine Geräteoption ohne Rahmen, etwa „Benutzerdefinierte Größe (angepasst)“ oder „Präsentation (vollständig)“.
Wie lang sollte ein Video durch einen Prototyp sein?
So kurz wie die Entscheidung, die du brauchst. Ein Flow mit den Gründen dahinter passt meist in zwei bis vier Minuten. Wenn du mehrere Flows hast, nimm ein Video pro Flow auf, damit der Kunde jeden einzeln beantworten kann.
Soll ich den Figma-Link oder ein Video schicken?
Am besten beides zusammen. Das Video erklärt, warum das Design so funktioniert, wie es funktioniert, der Prototyp-Link lässt den Kunden danach selbst herumklicken. Viele Kunden schauen nur das Video, es sollte also für sich allein vollständig sein.
