Leitfaden6 Min. Lesezeit

Portfolio Demo für Figma Make

Zeigen Sie den laufenden Build im Portfolio, nicht nur einen Screenshot davon.

Zeigen Sie einen laufenden Figma Make Build im Portfolio statt eines statischen Screenshots und belegen Sie den Ablauf, bevor jemand danach fragt.

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

gogoscreen.com

Die stärkste Interaktion benennen

Benennen Sie die stärkste Interaktion im Build, bevor Sie irgendetwas aufnehmen.

Den Vorschau Link vorbereiten

Bereiten Sie den Vorschau Link so vor, dass er kalt öffnet und kein unfertiger Zustand sichtbar ist.

Den Hinweis schreiben und den Render prüfen

Schreiben Sie den Hinweis, der den Ausgangszustand, die Interaktion und das Ergebnis benennt, und prüfen Sie den Render, bevor Sie ihn veröffentlichen.

Ein Portfolio Eintrag, der um einen Screenshot herum aufgebaut ist, verlangt von einer prüfenden Person, darauf zu vertrauen, dass auch alles unterhalb des sichtbaren Bereichs funktioniert. Ein Screenshot beweist Layout. Er beweist nicht, dass ein Button etwas tut, dass ein Formular validiert, oder dass die Interaktion, die einer Personalverantwortlichen tatsächlich wichtig ist, sich so verhält, wie es das Standbild andeutet. Die Lücke zwischen "sieht fertig aus" und "funktioniert" ist genau das, was ein Video schließt, und sie ist der größte einzelne Unterschied zwischen einem Portfolio Eintrag, der einen zweiten Blick bekommt, und einem, an dem vorbeigescrollt wird. Eine prüfende Person, die sich durch einen Stapel Bewerbungen arbeitet, hat selten Zeit, jedes verlinkte Projekt zu öffnen, sodass die Einträge, die diesen ersten Durchgang überstehen, jene sind, die die Funktionsfrage beantworten, ohne einen Klick zu verlangen.

Ein Figma Make Build eignet sich dafür gut, weil das Ergebnis ein funktionierender Prototyp unter einem teilbaren Vorschau Link ist, keine Designdatei, für deren Ansicht Figma selbst geöffnet werden muss. Dieser Link ist meist ohne Login erreichbar, da die meisten Figma Make Projekte Prototypen sind und keine Software mit einem vollständigen Kontosystem dahinter, was bedeutet, dass der im Video gezeigte Ablauf derselbe Ablauf ist, den eine prüfende Person direkt nach dem Ansehen selbst öffnen und ausprobieren könnte.

Was sollte eine Portfolio Demo beweisen?

Eine Portfolio Demo sollte die eine Interaktion beweisen, die das meiste Urteilsvermögen gekostet hat, um sie richtig hinzubekommen. Das ist selten der Login Bildschirm oder die Navigationsleiste. Meist ist es ein bestimmtes Stück Logik: ein Formular, das intelligent auf Eingaben reagiert, ein Layout, das sich auf eine Weise umformt, die echte Iteration brauchte, oder ein Ablauf, der ein wirklich unangenehmes Interface Problem löst. Benennen Sie diesen Moment, bevor Sie irgendetwas aufnehmen, genauso wie Sie den einen stärksten Punkt einer schriftlichen Fallstudie benennen würden.

Ein Launch Galerie Video muss die Aufmerksamkeit einer fremden Person in den ersten zwei Sekunden gewinnen. Eine Person, die ein Portfolio betrachtet, hat sich bereits entschieden, genauer hinzusehen, meist weil ein Lebenslauf oder ein Link sie dorthin gebracht hat, sodass sich das Video einen etwas längeren Bogen leisten kann: einen Anfang, der das Problem aufbaut, eine Mitte, die die Interaktion zeigt, und ein Ende, das den gelösten Zustand zeigt.

Portfolio Moment	Was er beweisen sollte	Was wegzulassen ist
Aufbau	Das Problem, das die Interaktion löst	Eine Tour durch unzusammenhängende Seiten
Interaktion	Die spezifische Logik oder Layout Entscheidung	Jeder alternative Pfad durch denselben Bildschirm
Auflösung	Der Zustand, der zeigt, dass die Interaktion funktioniert hat	Eine narrationslastige Verkaufsansprache

Wie bereiten Sie den Build für die Aufnahme vor?

Öffnen Sie den Vorschau Link so, wie eine prüfende Person es täte, kalt, ohne Annahmen darüber, in welchem Zustand er sein sollte. Prüfen Sie auf alles, was unfertig wirkt: Platzhaltertext aus einem früheren Entwurf, eine leere Liste ohne Inhalt, oder eine Komponente, die noch Standardwerte statt der beabsichtigten Inhalte zeigt. Eine prüfende Person, die einen Portfolio Eintrag beurteilt, sucht bereits nach Gründen, zum nächsten überzugehen, und ein offensichtlich unfertiges Detail liefert diesen Grund kostenlos.

Öffnen Sie den Vorschau Link kalt und bestätigen Sie, dass nichts wie ein früherer Entwurfszustand wirkt.
Füllen Sie jede Liste, jedes Formular oder jede Tabelle mit Inhalten, die absichtlich wirken, nicht leer.
Testen Sie die spezifische Interaktion vollständig, bevor Sie den Hinweis für den Render schreiben.
Entfernen Sie alles, was wie die Daten einer echten Person wirkt, selbst Platzhaltertext, der zu spezifisch aussieht.

Füllen Sie Daten ein, die die Interaktion unterstützen, ohne die Informationen einer echten Nutzerin vorzutäuschen. Ein Kalender ohne Termine oder ein Dashboard ohne Zahlen gibt einer prüfenden Person nichts, worauf sie reagieren kann, während Daten, die offensichtlich ein Platzhalter sind, die Interaktion trotzdem klar lesbar lassen.

Den Ablauf in eine Reihenfolge zu bringen hilft, das Video von Anfang an richtig eingegrenzt zu halten:

Benennen Sie die stärkste Interaktion im Build, bevor Sie irgendetwas aufnehmen.
Bereiten Sie den Vorschau Link so vor, dass er kalt öffnet und kein unfertiger Zustand sichtbar ist.
Schreiben Sie den Hinweis, der den Ausgangszustand, die Interaktion und das Ergebnis benennt, und prüfen Sie den Render, bevor Sie ihn veröffentlichen.

Wie konkret sollte der Hinweis sein?

Schreiben Sie den Hinweis genauso, wie Sie das Stück einer prüfenden Designperson im Vorstellungsgespräch beschreiben würden. Benennen Sie den Ausgangszustand, die Interaktion und das Ergebnis. "Vom leeren Formular aus einen Wert eingeben, der die Validierungsmeldung auslöst, dann den korrigierten Zustand zeigen" ist konkret genug, dass GogoScreens Render ein klares Ziel hat und konkret genug, dass eine prüfende Person des fertigen Videos den Render gegen den Hinweis abgleichen kann.

GogoScreen liefert einen erzählten, geschnittenen MP4 aus diesem Hinweis und der URL, mit Zooms auf den entscheidenden Klick, geglätteter Cursorbewegung, herausgeschnittener Stille und eingebrannten Untertiteln. Nichts davon ersetzt die Wahl der richtigen Interaktion. Eine sauber geschnittene Aufnahme eines generischen Bildschirms bleibt ein generischer Portfolio Eintrag, und prüfende Personen, die viele davon an einem Tag ansehen, bemerken den Unterschied zwischen einer spezifischen und einer allgemeinen Aussage schnell.

Was gehört um das Video herum ins Portfolio?

Kombinieren Sie das Video mit einer kurzen schriftlichen Notiz, die das Problem, die Entscheidung und den Grund dafür benennt, dass diese Entscheidung die richtige war. Das Video zeigt das Ergebnis. Der Text erklärt das Denken dahinter, was oft genau das ist, wonach eine Personalverantwortliche oder ein Kunde tatsächlich sucht. Halten Sie beides getrennt, statt Prozessnarration über die laufende Interaktion zu legen, da eine prüfende Person, die gleichzeitig die Oberfläche beobachten und eine Erklärung lesen soll, meist beides schlecht aufnimmt.

Prüfen Sie den fertigen Render gegen das tatsächliche Verhalten der Interaktion, bevor Sie ihn irgendwo veröffentlichen. Etwa einer von fünf Renderdurchläufen benötigt einen erneuten Versuch oder schlägt fehl, und Zeit wird nur verbraucht, wenn ein Renderdurchlauf gelingt, also bauen Sie eine kurze Prüfrunde in den Prozess ein, statt die erste eingehende Datei zu veröffentlichen. Diese Prüfrunde ist auch der Punkt, an dem eine Abweichung zwischen dem Hinweis und der Oberfläche meist sichtbar wird, weshalb es sich lohnt, den ganzen Clip einmal anzusehen, bevor er als fertig für den Livegang gilt.

Wie fügt sich das zu benachbarten Guides?

Für eine prüfende Person, die vor dem Launch des Builds freigeben muss, statt ihn als Portfolio Stück zu beurteilen, deckt der Figma Make App Review Walkthrough dieses andere Publikum und das Übergabeproblem ab, das vor einem Portfolio Eintrag steht. Für eine vergleichbare Behandlung bei einem anderen Builder vergleichen Sie ein Bubble Demo Video, ein Bubble Landing Page Video, ein Bubble Product Hunt Launch Video, und ein Bubble Projekt mit einem Kunden teilen, da Bubble Apps standardmäßig häufiger hinter einem echten Login liegen.

Um ein bestimmtes Interaktionsergebnis statt eines allgemeinen Ablaufs zu beweisen, decken der AI Agent Test Result Demo Video Guide und der AI Agent QA Demo Video Guide verwandte Nachweisformate ab. Ein eingebettetes Produkt Demo Video ist nützlich, sobald der Portfolio Eintrag in eine Seite eingebettet statt verlinkt werden muss, ein Lovable App Demo Video deckt die entsprechende Aufgabe für diesen Builder ab, und ein breiterer Produkt Walkthrough für ein SaaS ist das richtige Format, sobald der Eintrag mehr als eine Interaktion abdecken muss. Für einen Vergleich von Aufnahmetools für diese Art von Arbeit lesen Sie GogoScreen gegen Clueso. Starten Sie auf der GogoScreen Startseite, prüfen Sie die Preise, durchsuchen Sie die vollständige Guides Bibliothek, oder sehen Sie sich den Rest der Vergleiche an.

Klarstellungen

Bevor Sie beginnen

Warum reicht ein Screenshot für einen Portfolio Eintrag nicht aus?

Ein Screenshot beweist nur, dass die Oberfläche in einem eingefrorenen Moment korrekt angeordnet ist. Er kann nicht zeigen, ob die Interaktion tatsächlich funktioniert, was meist genau das ist, was ein Prüfer beurteilen möchte.

Sollte das Portfolio Video den Figma Make Prozess oder die fertige App zeigen?

Zeigen Sie die fertige App bei der Arbeit, für die sie gebaut wurde. Der Prozess gehört in eine Fallstudie neben das Video, nicht in denselben Clip, da eine Vermischung beides verwässert.

Brauche ich echte Daten in der Demo, damit sie überzeugend wirkt?

Sie brauchen plausible Daten, keine echten Daten. Platzhalterinhalte, die absichtlich wirken, reichen aus, um die funktionierende Interaktion zu zeigen, und echtes Kundenmaterial ist für einen öffentlichen Portfolio Eintrag nicht angemessen.

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.

Preise ansehen Leitfäden lesen