Zum Inhalt springen
Leitfaden6 Min. Lesezeit

Figma-Make-Demovideo

Zeigen Sie einen Figma-Make-Ablauf so, wie er sich verhält, nicht wie unterstellt.

Verwandeln Sie eine Figma-Make-App in ein geprüftes Demovideo, unter Berücksichtigung dessen, was ihre Abläufe zwischen Besuchen speichern.

Ansehen, wie es funktioniertDie ersten 60 Sekunden Video sind kostenlos, mit Wasserzeichen. Bestätigen Sie Ihre E-Mail-Adresse, um es herunterzuladen.

Ein Figma-Make-Build beginnt sein Leben oft als ein zum Leben erwecktes Design statt als vollständig entwickelte Anwendung. Diese Unterscheidung ist für ein Demovideo wichtiger als für die meisten anderen Ersteller-Plattformen, denn das, was auf dem Bildschirm wie eine funktionierende Funktion aussieht, verhält sich dahinter nicht immer wie eine. Bevor Sie irgendetwas aufnehmen, lohnt es sich zu bestätigen, was der geplante Ablauf tatsächlich tut, nicht nur, wie er beim einmaligen Durchklicken wirkt.

GogoScreen nimmt eine Web-App-URL und einen einzeiligen Hinweis darauf, was gezeigt werden soll, entgegen und gibt dann ein erzähltes MP4 mit automatischer Bearbeitung zurück: Zooms bei Klicks, geglättete Mauszeigerbewegung, entfernte Stillephasen und eingebrannte Untertitel. Es kann ein Demokonto verwenden, wenn eine Route hinter einer Anmeldung liegt, obwohl viele Figma-Make-Builds ohne eine solche veröffentlicht werden, da sie häufig für einen Design- oder Prototypzweck erzeugt werden statt als vollständige kontogestützte Anwendung. Nichts davon ist ein Versprechen, dass ein bestimmter Figma-Make-Build oder ein erster Renderdurchlauf brauchbar ausfällt. Prüfzeit gehört unabhängig davon in den Zeitplan.

Was tut der Ablauf tatsächlich, sobald die Aktion ausgeführt wird?

Klicken Sie sich selbst durch den geplanten Ablauf, bevor Sie entscheiden, dass er ins Video gehört. Fügen Sie den Artikel hinzu, senden Sie das Formular ab, oder lösen Sie aus, was auch immer die Demo zeigen soll, und laden Sie dann die Seite neu oder besuchen Sie die Route erneut. Wenn das Ergebnis verschwindet oder zurückgesetzt wird, sagt Ihnen das, dass die Interaktion visuell statt durch dauerhafte Speicherung gestützt sein könnte, und das Video sollte entsprechend gerahmt werden, statt zu unterstellen, die Änderung sei irgendwo gespeichert worden.

Was zu prüfen istWarum es bei einem Figma-Make-Build wichtig istWas zu tun ist, wenn es fehlschlägt
Übersteht das Ergebnis der Aktion ein NeuladenUnterscheidet eine echte Zustandsänderung von einer rein visuellen InteraktionEine andere Aktion wählen, oder das Video um die Interaktion selbst rahmen
Braucht die Route eine AnmeldungNicht jeder Figma-Make-Build enthält KontoverwaltungVor dem Schreiben eines Hinweises bestätigen, der eine solche voraussetzt
Funktioniert der Ablauf beim zweiten Besuch genausoManche Prototypen sind auf einen einzigen Durchlauf abgestimmtZweimal testen, bevor Sie dem Ablauf für die Aufnahme vertrauen

Ein Leitfaden zum Demovideo aus einer Website-URL behandelt die umfassendere Frage der Vorbereitung eines URL-basierten Ablaufs für die Aufnahme, was hier neben der plattformspezifischen Persistenzprüfung gilt.

Welcher Ablauf ist es wert, gezeigt zu werden?

Wählen Sie die Interaktion, die am besten zeigt, dass sich die Oberfläche so verhält, wie sie entworfen wurde, unabhängig davon, ob sie danach Daten speichert. Ein Figma-Make-Build wird oft danach beurteilt, wie sich die Interaktion anfühlt, statt nach der Vollständigkeit des Backends, daher zeigt eine Aktion mit klarem visuellem Feedback, wie ein animierter Übergang oder eine offensichtlich sichtbare Zustandsänderung, das Produkt meist gut, selbst wenn dahinter nichts gespeichert wird. Achten Sie nur darauf, in der Erzählung genau zu sein, was geschieht, statt eine Formulierung zu wählen, die eine nicht bestätigte Persistenz unterstellt.

Hier zählt auch die spätere Reaktion des Prüfers. Jemand, der bereits eine vollständig unterstützte Anwendung genutzt hat, nimmt vielleicht reflexartig an, dass jede überzeugende Oberfläche darunter mehr tut, als sie tatsächlich tut. Eine ehrlich gerahmte Interaktion zu wählen und sie genau zu beschreiben, schützt das Video davor, dass diese Annahme später fehlschlägt, wenn der Betrachter dieselbe Aktion selbst ausprobiert und ein anderes Ergebnis erhält als das auf dem Bildschirm angedeutete.

Gehört der Anmeldeschritt ins Video?

Wenn der Build ein Kontosystem enthält, entscheiden Sie, ob dieser Bildschirm dem beabsichtigten Betrachter etwas hinzufügt. Wenn nicht, und viele Figma-Make-Builds lassen die Kontoverwaltung standardmäßig aus, kann das Video direkt auf der Oberfläche selbst öffnen, ohne einen Anmeldeschritt zu berücksichtigen. So oder so, vermeiden Sie es zu raten. Bestätigen Sie, was der tatsächliche Build erfordert, bevor Sie den Hinweis schreiben, denn die Annahme einer Anmeldung, die nicht existiert, erzeugt einen Hinweis, dem die Route nicht folgen kann.

  • Testen Sie die geplante Aktion zweimal und prüfen Sie, ob das Ergebnis ein Neuladen der Seite übersteht.
  • Bestätigen Sie, ob der Build überhaupt eine Anmeldung erfordert, bevor Sie annehmen, dass ein Demokonto nötig ist.
  • Bereiten Sie benötigte Daten von Hand vor, statt zu erwarten, dass sie bereits existieren.
  • Schreiben Sie den Hinweis rund um das, was Sie tatsächlich bestätigt haben, nicht um das, was die Oberfläche unterstellt.

Wie sollte der Hinweis für diese Art von Build geschrieben werden?

Halten Sie den Hinweis auf die eine von Hand bestätigte Interaktion begrenzt: den Ausgangsbildschirm, die eine Aktion und das sichtbare Ergebnis, formuliert so, wie die Oberfläche selbst die Dinge benennt. Ein Hinweis, der ein Backend-Verhalten annimmt, das der Build nicht hat, wie „die gespeicherte Bestellung in der Kontohistorie zeigen“, erzeugt einen verwirrenden oder fehlgeschlagenen Renderdurchlauf, wenn keine solche Historie existiert. Schreiben Sie den Hinweis so, dass er dem entspricht, was tatsächlich getestet wurde, nicht dem, was eine ähnliche App auf einer anderen Plattform tun könnte.

Was ist die Kurzfassung dieses Prozesses?

  1. Bestätigen Sie, ob die geplante Aktion nach dem Ausführen tatsächlich erhalten bleibt, bevor Sie den Hinweis darauf aufbauen.
  2. Öffnen Sie die genaue Route zuerst in einem Browser und prüfen Sie, was ein neuer Besuch tatsächlich zeigt, bevor Sie aufnehmen.
  3. Schreiben Sie einen einzeiligen Hinweis, der Start, Aktion und Ergebnis benennt, und prüfen Sie dann den fertigen Kandidaten gegen das, was Sie von Hand bestätigt haben.

Was sollten Sie prüfen, bevor das öffentlich wird?

Sehen Sie sich den Kandidaten gegen das an, was Sie zuvor von Hand bestätigt haben. Prüfen Sie, dass die Erzählung nicht mehr behauptet, als die Oberfläche tatsächlich tut, besonders zur Frage, ob etwas gespeichert wurde. Wenn der Kandidat nicht zur beabsichtigten Aufgabe passt, passen Sie den Hinweis an und versuchen Sie es erneut, statt ihn unverändert zu veröffentlichen. Etwa einer von fünf Renderdurchläufen braucht genau diese Art von erneutem Versuch, planen Sie diese Erwartung also von Anfang an in den Zeitplan ein.

Jedes neue Konto erhält einmalig 60 Sekunden Video mit Wasserzeichen und erforderlicher E-Mail-Bestätigung vor dem Download. Danach zahlen Sie für Videozeit: Starter kostet $29 für 15 Minuten im Monat, Pro $79 für 45 Minuten und Business $199 für 120 Minuten, und Aufladungen gibt es ab $10, etwa $2,07 pro Minute, und sie verfallen nie. Zeit wird nur verbraucht, wenn ein Renderdurchlauf gelingt; sie wird beim Einreichen reserviert und bei einem fehlgeschlagenen Renderdurchlauf automatisch zurückgegeben.

Wohin geht dieses Video als Nächstes?

Sobald ein Kandidat die Prüfung bestanden hat, ordnen Sie ihn der Fläche zu, die ihn braucht. Das eigene Landingpage-Video des Builds möchte meist einen kürzeren Schnitt desselben Ablaufs oberhalb des ersten Bildschirmrands. Ein Product-Hunt-Launch-Video hat eigene Längen- und Seitenverhältnisvorgaben für die Galerie. Den Build mit einem nicht technischen Prüfer zu teilen wird im Leitfaden dazu behandelt, wie man ein Figma-Make-Projekt mit einem Kunden teilt, ein Portfolio-Eintrag möchte meist die laufende Oberfläche zeigen statt sie zu beschreiben, und ein formaler Prüfungsrundgang rahmt den Ablauf um das, worum gebeten wurde.

Verwandte Leitfäden, die sich zu lesen lohnen, sind der Leitfaden zum Demovideo für eine Landingpage, der Leitfaden zum Investoren-Demovideo, der Leitfaden zum Demovideo für einen Beta-Launch und der Leitfaden zum Demovideo für einen KI-Agenten-Launch. Vergleichen Sie direkte URL-Optionen bei GogoScreen im Vergleich zu ngram, prüfen Sie Preise, bevor Sie sich für einen Plan entscheiden, oder durchsuchen Sie die übrigen Leitfäden und Vergleiche von der Startseite aus.

Klarstellungen

Bevor Sie beginnen

Was sollte ein Figma-Make-Demovideo zeigen?

Eine Nutzeraufgabe von einem erkennbaren Ausgangsbildschirm bis zu einem sichtbaren Ergebnis, genau wie bei jeder Web-App-Demo. Bestätigen Sie zuerst, ob dieses Ergebnis tatsächlich erhalten bleibt, nachdem die Interaktion stattgefunden hat, denn ein Figma-Make-Build behält Zustände nicht immer so, wie es eine vollständig unterstützte App tun würde.

Braucht eine Figma-Make-App eine Anmeldung für die Demo?

Nicht immer. Viele Figma-Make-Builds werden ohne Kontosystem veröffentlicht, da sie oft für einen Design- oder Prototypzweck erzeugt werden statt als vollständige Anwendung mit Nutzerkonten.

Zeigt der erste Renderdurchlauf die App immer korrekt?

Nein. Etwa einer von fünf Renderdurchläufen schlägt fehl oder muss wiederholt werden, genau wie bei jeder anderen Web-App. Prüfen Sie den Kandidaten, bevor er öffentlich irgendwohin gelangt.

Fügen Sie eine URL ein, beschreiben Sie einen Ablauf und erhalten Sie ein Demovideo Ihrer Webanwendung.

Die ersten 60 Sekunden Video sind kostenlos, mit Wasserzeichen. Bestätigen Sie Ihre E-Mail-Adresse, um das Video herunterzuladen.