23 Prototyping-Ressourcen, die du als Lesezeichen setzen solltest
Das Prototyping ist in jeder Phase der Produktentwicklung ein wichtiges Instrument und kann daher sehr unterschiedlich aussehen. Diese Ressourcen helfen dir, deinen Prozess zu verbessern, egal ob du neu im Prototyping bist oder dein Wissen vertiefen möchtest.
23 Prototyping-Ressourcen, die du als Lesezeichen setzen solltest teilen
Vom Aufpeppen einer Präsentation über die Durchführung von Benutzerforschung bis hin zum Feedback von Stakeholdern: Prototyping hilft deinem Team entscheidend dabei, sich auf eine gemeinsame Vision zu einigen Prototyping, once an eleventh-hour nice-to-have, has risen to become a critical tool at multiple points in the product development workflow.
Why cultivating a prototyping culture will help you build better products
Nach einer Reihe von Verbesserungen für das Prototyping We’re making it easier for you to bring your designs to life across mobile, tablet, and watch interfaces with a series of prototyping updates.
Behind the feature: Inline device frames
Die Grundlagen
Beginne mit diesen Grundlagen, um zu erfahren, wie du Prototyping nutzen kannst, um den Produktentwicklungsprozess zu kalibrieren und zu beschleunigen.
Video: Build prototypes (8 Minuten)
Hier erhältst du einen Überblick über die Erstellung eines interaktiven Prototyps, einschließlich Animationen und der Nutzung des Feedbacks deiner Tester*innen.
Video: Prototyping playlist (50 Minuten)
Sieh dir die praktisch portionierte YouTube-Wiedergabeliste an, in der du Kurven, Übergänge, Smart-Animation, Scrollen und Geräterahmen und vieles mehr kennenlernst.
Video: Prototyping 101 (63 Minuten)
Hier erfährst du Grundlegendes über die Navigation von Rahmen zu Rahmen in Prototypen, aber auch über fortgeschrittene Möglichkeiten, die du mit Funktionen wie interaktiven Komponenten erhältst.
Video: Learning Figma as a product person (Teil 1) (7 Minuten)
Erfahre, wie du als Nicht-Designer, der in der Produktentwicklung arbeitet, einen einfachen Prototyp erstellst, und lerne Schritt für Schritt anhand der Community-Datei unten.
Video: Learning Figma as a product person (Teil 2) (1 Minuten)
Im zweiten Teil der Serie erfährst du, wie du Übergänge, Smart-Animationen, Scroll-Verhalten und andere nützliche Funktionen nutzen kannst, um deinen Prototypen zum Leben zu erwecken.
Community-Datei: barrierefreie Prototypen in Figma
Entdecke den barrierefreien Modus von Figma für Prototypen, mit dem Screenreader wie VoiceOver (Mac) und JAWS (Windows) Informationen über Designs lesen können, wenn du sie im Prototyping-Modus präsentierst.
Mehr Pep für deine Präsentationen
Beim Prototyping geht es nicht nur darum, ein Produkt zu modellieren – es kann dir auch dabei helfen, deine Botschaft in einer Präsentation für eine Vorstandsetage oder ein Klassenzimmer effektiv zu vermitteln.
Video: Presenting with Figma (70 Minuten)
Nutze Prototyping, um dynamische Folienpräsentationen zu erstellen, die dein Publikum beeindrucken.
Video: Tips for presentations (2 Minuten)
Integriere interaktive Elemente – wie einen Mobilgeräte-Bildschirm, der tatsächlich scrollt – in deine Präsentation, indem du Prototypen in Folien einbettest.
Video: Presenting with the Figma app (2 Minuten)
In diesem Video erfährst du, wie du mithilfe der Figma-App für Mobilgeräte durch deine Folien navigieren kannst.
Alles über Video, Bewegung und Flow
Mit diesen Tipps und Tutorials kannst du Videos in die Arbeitsfläche integrieren, deine Prototypen animieren und dynamische Übergänge erstellen.
Video: Using video in Figma prototypes (52 Minuten)
Verleihe einem Prototyp mehr Feinschliff und Realismus, indem du Videos hinzufügst und gleichzeitig das Statusmanagement und die Kontinuität über Frames hinweg sicherstellst.
Entdecke den Workshop mit dieser Starterdatei.
Video: Sections and prototyping (2 Minuten)
Nutze Abschnitte in einem Prototyp, um die Position eines Nutzers/einer Nutzerin im Flow zu erhalten, damit er/sie den Prototyp verlassen und wieder aufrufen kann, um dort weiterzumachen, wo er/sie aufgehört hat.
Community-Datei: Spring-Animationen
Füge mit unseren voreingestellten Optionen Spring-Animationen zu Prototyp-Übergängen hinzu.
Mach die ersten Schritte mit dieser Community-Datei.
Video: Micro animations (8 Minuten)
Erlerne die Feinheiten der Mikro-Animation, indem du ein Herzsymbol erstellst, das beim Anklicken wackelt.
Video: Prototyping overlay transitions (8 Minuten)
Nutze interaktive Komponenten, um Prototypen für Overlay-Übergänge für Miniaturansichten zu erstellen.
Video: Sticky scroll (5 Minuten)
Richte haftendes Scrollen für persistente Banner und andere Elemente in deinen Prototypen ein.
Blühende-Blume-Effekt
Gestalte ein Blumenfeld, das aus der Figma-Arbeitsfläche sprießt.
Mehr Power durch Variablen
Erstelle fortschrittlichere Prototypen mit Variablen, die die Komplexität verringern, indem sie die Anzahl der Bilder reduzieren, die du für die Umsetzung deiner Vision brauchst.
Video: Prototype with variables (13 Minuten)
Beginne hier, wenn du dich zum ersten Mal an Variablen heranwagst. Dies ermöglicht zwei neue Prototyping-Aktionen: Variable setzen (den Wert einer Variable ändern) und Bedingung (If/else-Logik hinzufügen).
Video: Advanced prototyping (56 Minuten)
Vertiefe deine Kenntnisse über Variablen und andere fortgeschrittene Prototyping-Funktionen, indem du eine E-Commerce-Umgebung erstellst.
Erlerne in dieser Arbeitsdatei den Umgang mit Variablen, bedingter Logik und Ausdrücken.
Video: Using variables in prototypes 101 (30 Minuten)
Hier lernst du alle aktuell verfügbaren Variablentypen kennen – Boolesche Variablen, Zahlen, Zeichenketten und Farben – und erfährst, wie du Zeichenfolgen an interaktive Komponenten binden kannst.
Video: Variables in prototypes 201 (34 Minuten)
Lerne, wie man Variablenmodi und bedingte Logik einsetzt, um einen realistischeren Warenkorb-Prototyp zu erstellen, der echte Mathematik verwendet.
Sprechzeiten nachholen
Wir halten oft Live-Sitzungen ab, um neue Funktionen vorzustellen, externe Experten hinzuzuziehen und Probleme zu beheben. Hier findest du einige davon.
Video: Prototyping and user testing AMA (52 Minuten)
Hier findest du Tipps für die erfolgreiche Durchführung von Remote-Nutzertests mit Prototypen.
Video: Get started with interactive components (52 Minuten)
Lerne, wie du deine Prototypen mit wiederverwendbaren, gemeinsam nutzbaren interaktiven Komponenten aufwerten kannst.
Video: Game UI prototyping with the prototyper plugin (57 Minuten)
Erfahre von Aashrey Sharma, UX-Designer bei Epic Games, wie du das Prototyper-Plug-in nutzen kannst, um Prototypen für Spieledesigner zu erstellen.
Herzlichen Glückwunsch, dass du deine Designs und Präsentationen mit Prototyping auf die nächste Stufe hebst. Welche anderen Ressourcen würdest du gerne sehen? Teile uns deine Vorschläge auf X mit!
