Im dritten Teil unserer Best Practices-Serie sehen wir uns das Prototyping im Design Tool Figma genauer an. Diese Funktion der Prototypes von Figma bietet die Möglichkeit Ideen zu Papier bzw. auf den Bildschirm zu bringen, ohne viel Aufwand dafür aufwenden zu müssen. Wir führen dich Schritt für Schritt durch die Funktion. Hier findest du alles, was du zum Thema Prototyping wissen musst.
Du bist neu hier? Hier ein kurzer Recap: Im ersten Best Practice Beitrag geht es um die XD-Konvertierung, Gruppen und Frames. Im zweiten Beitrag behandeln wir die Themen Komponenten, Stile und Bibliotheken. Um ein vollständiges Verständnis zu erhalten, empfehle ich, beide Artikel zuerst zu lesen dann bist du bestens vorbereitet. Okay, bist du ready? Los geht's!
Was ist ein Prototyp?
Ein Prototyp in Figma ist eine Art „Vorschau“ oder „Testversion“ einer App oder Website, die du erstellen möchtest. Ein Beispiel: Du willst ein Haus bauen. Bevor du das Haus tatsächlich loslegst und blind darauf los baust, legst du (in den meisten Fällen) ein Modell oder eine Zeichnung an, um zu sehen, wie es final aussehen wird. Ein Prototyp in Figma ist wie dieses Modell oder die Skizze, aber für digitale Dinge, wie Apps oder Websites.
Ziel beim Prototyping ist es, deine Designs vorab zu testen, bevor du mit dem stylen oder programmieren loslegst. Damit vermeidest du Fehler und ersparst dir mühevolle Arbeit, falls das Design nicht passen sollte. Klingt einfach, oder?
So funktioniert es
Bildschirme / Frames gestalten
Frame erstellen: Ein „Frame“ ist in Figma einfach gesagt ein Bildschirm deiner App oder Website, also das was du auf einer Seite siehst. Um einen Frame zu erstellen, klicke auf das Frame-Werkzeug (hier markiert in blau) in der linken Werkzeugleiste und ziehe damit einen Rahmen auf deiner Fläche. Das ist dein erster Bildschirm.
Elemente hinzufügen: Jetzt kannst du verschiedene Elemente zu deinem Bildschirm hinzufügen, z.B. Texte, Bilder, Buttons. Dafür nutzt du die Werkzeuge auf der linken oberen Seite (Text, Rechteck, Kreis, usw.).
Weitere Bildschirme hinzufügen
Wiederhole diesen Schritt, um weitere Bildschirme zu erstellen. Denk an alle Seiten oder Bereiche, die deine App oder Website haben soll und gestalte jeden dieser Bildschirme. Jeder Bildschirm kann als weitere Unterseite der Website oder neues Fenster deiner App angesehen werden.
Bildschirme verknüpfen (Interaktiv machen)
Prototyping-Modus aktivieren: Wechsle oben rechts in Figma in den Prototyping-Modus, indem du auf das „Prototype“-Tab klickst.
Verbindungen herstellen: Klicke auf ein Element, z.B. einen Button, und ziehe dann den blauen Punkt, der erscheint, auf den Bildschirm, zu dem dieser Button führen soll. Du wirst eine Linie sehen, die die beiden Bildschirme verbindet. Damit kannst du die Seite zum gewünschten Punkt springen lassen.
Interaktionen einstellen: Wenn du die Verbindung gezogen hast, öffnet sich ein kleines Fenster, in dem du einstellen kannst, was passieren soll (z.B. „On Click“ bedeutet, dass beim Klick auf den Button zum nächsten Bildschirm gewechselt wird). Du kannst auch einstellen, wie der Übergang aussehen soll (z.B. mit einer Animation).
Prototyp in Figma testen
Play-Button drücken: Oben rechts gibt es einen Play-Button. Klicke darauf, um deinen Prototyp in Aktion zu sehen. Das ist besonders wichtig, da du hier nachvollziehen kannst, ob dein Design auch so funktioniert, wie du es dir vorstellst. Achtung: Stelle sicher, dass du den gewünschten Bildschirm bzw. Frame ausgewählt hast, bevor du auf den Play-Button klickst.
Durchklicken: Jetzt kannst du durch die einzelnen Bildschirme bzw. Frames klicken und sehen, wie alles zusammenpasst. Achte darauf, ob alles wie gewünscht funktioniert und die User Experience deinen Vorstellungen entspricht.
Feedback einholen und Änderungen vornehmen
Teilen: Du kannst deinen Prototyp in Figma ganz einfach mit anderen teilen. Klicke dafür auf die Option "Share Prototype". Diese findest du oben rechts in Figma. So kannst du andere Teammitglieder oder auch Kund:innen um Feedback bitten und sie das Design vorab sehen lassen.
Nachdem du darauf geklickt hast, erscheint ein Pop-up-Fenster. Da kannst du einstellen, wer alles auf deinen Prototypen Zugriff hat. Klicke auf „can view“, um die Einstellung zu ändern. So stellst du sicher, dass nur die gewünschten Personen, deine Designs sehen und deine Arbeit sicher ist.
Du kannst einstellen, ob der Link innerhalb der Organisation bzw. des Teams in Figma geteilt werden soll oder an externe Personen. Danach speicherst du und gehst auf die vorherige Seite zurück. Dort kannst du den Link oben rechts kopieren und teilen.
Feedback einholen: Lass andere Personen den Prototyp testen und frage nach ihrer Meinung. Sie können direkt im Design Kommentare in Figma hinterlassen, was es besonders einfach für dich macht. So sind alle Änderungswünsche an einem Ort. Wenn du Feedback bekommst, kannst du leicht Änderungen in Figma vornehmen, indem du die Bildschirme oder Verbindungen anpasst. Das Feedback von außen hilft dir, die User Experience zu verbessern und das beste aus deinen Designs herauszuholen.
Mit dieser Anleitung solltest du in der Lage sein, deinen ersten Prototypen in Figma zu erstellen! Falls du ein Video brauchst, um es dir bildlich vorstellen zu können, habe ich hier ein Video von Figma für dich. Dort wird der Prozess bildlich erklärt und du kannst die einzelnen Schritte besser nachvollziehen.
Hauptvorteile von Prototyping
- Schnelles Ausprobieren von Ideen: In deinem Kopf hast du bereits eine Idee für eine App oder Website? Mit einem Prototyp kannst du diese Idee schnell und einfach testen, ohne sie komplett bauen bzw. programmieren zu müssen. Es ist wie eine Skizze, die lebendig wird – du kannst sehen, wie deine Idee in der Realität aussehen könnte.
- Einfach Änderungen machen: Mit einem Prototyp kannst du verschiedene Dinge ausprobieren. Das ist viel einfacher, als wenn du erst nach der Programmierung feststellst, dass etwas nicht passt. Manchmal merkt man erst, dass etwas nicht richtig funktioniert, wenn man es vor sich sieht.
- Verständnis für alle: Ein Prototyp kann helfen, die Vision einer App oder Website klarzumachen und bildlich darzustellen. Wenn du deine Idee anderen Personen zeigst, können sie direkt sehen, wie es aussehen und funktionieren könnte. Das ist viel anschaulicher als statische Bildschirme, die die gewünschte User Experience nicht wirklich vermitteln können.
- Zeit und Geld sparen: Durch Prototypes in Figma kannst du alles in Ruhe testen. Denn wenn du vorher weißt, was funktioniert und was nicht, vermeidest du teure Fehler und sparst dir Zeit und Nerven. Es ist viel günstiger und schneller, Probleme im Prototyp zu lösen, als später im fertigen Produkt. Und wer möchte schon ineffizient arbeiten?
- Besseres Feedback bekommen: Mit einem Prototyp können du und andere Kolleg:innen die App oder Website richtig ausprobieren. Das bedeutet, dass du ehrliches und hilfreiches Feedback bekommst. Und zwar, bevor du mit der eigentlichen Umsetzung startest. So kannst du sicherstellen, dass die App oder Website wirklich benutzerfreundlich ist und alle Funktionen auch ihre Zwecke erfüllen.
6 nützliche Tipps
Wireframes erstellen
Start mit Wireframes: Bevor du in die Details gehst, erstelle einfache Wireframes. Wireframes sind grundlegende, strukturierte Skizzen, die den Aufbau einer Benutzeroberfläche oder Webseite veranschaulichen. Sie konzentrieren sich auf die Platzierung von Elementen, die Hierarchie der Inhalte und die grundlegende Funktionalität, ohne sich mit visuellen Details oder Design-Ästhetik zu befassen. Wenn du mehr über Wireframes erfahren möchtest, dann lese diesen Artikel durch.
Konzentriere dich auf die Benutzerführung: Achte darauf, dass die Navigation und der Ablauf logisch und intuitiv sind. Ein Beispiel für intuitive Benutzerführung ist, dass ein Klick auf das Unternehmenslogo in der oberen linken Ecke immer zur Startseite führt. Dies hilft Nutzer:innen, schnell zur Homepage zurückzukehren.
Auf Konsistenz achten
Design-System verwenden: Nutze wiederkehrende Elemente wie Buttons, Schriftarten und Farben. Das sorgt für ein einheitliches Aussehen und erleichtert die Navigation für den/die Benutzer:in. Mehr dazu findest du im zweiten Teil unserer Best Practice Figma Reihe.
Komponenten in Figma: Verwende Figma-Komponenten, um wiederholbare Elemente zu erstellen, die du einfach aktualisieren kannst. Wenn du eine Komponente änderst, wird sie überall aktualisiert.
Interaktionen und Übergänge realistisch gestalten
Natürliches Verhalten simulieren: Verwende Übergänge und Animationen, die das Verhalten der finalen App oder Website realistisch nachahmen. Zu viele Effekte können jedoch überladen wirken und können die User Experience schmälern, also setze sie gezielt ein.
Microinteractions einbauen: Kleine Animationen wie das Ändern der Farbe eines Buttons beim klicken machen die Prototypes lebendiger und realistischer. Hier kannst du dich austoben.
Interaktive Elemente klar kennzeichnen
Benutzerführung erleichtern: Mache deutlich, welche Elemente interaktiv sind (z.B. Buttons oder Links). Du kannst etwa Farbakzente oder Hervorhebungen verwenden, um klickbare Bereiche hervorzuheben. In dieser Abbildung ist es leicht zu erkennen, dass das Wort "Slot" ein Link ist, weil es hervorgehoben ist.
Hinweise: Wenn es notwendig ist, füge Hinweise hinzu, die dem Benutzer erklären, was er tun soll. So stellst du sicher, dass die Nutzer:innen deine zukünftige App oder Website richtig benutzen.
Vermeide Überladung und halte es einfach
Keep it simple: Halte das Design einfach und fokussiere dich auf die Hauptfunktionen. Zu viele Details können ablenken und machen es schwieriger, das eigentliche Ziel des Prototyps zu erkennen.
Nicht alles "prototypisieren": Du musst nicht jede einzelne Funktion oder jedes Detail in deine Prototypes einbauen. Konzentriere dich auf die wichtigsten Bereiche und Benutzerpfade, damit du deine Designs in Figma effizient gestaltest.
Regelmäßig testen und Feedback einholen
Früh testen: Teste deinen Prototypen regelmäßig, selbst in frühen Stadien. So vergewisserst du dich, dass deine Designs klar sind und du potenzielle Fehlerquellen früh entdeckst. Auch Feedback von außen ist in der Anfangsphase wichtig. Je früher du Feedback bekommst, desto einfacher kannst du Änderungen vornehmen und deine Designs immer weiter optimieren.
Externes Feedback: Hol dir Rückmeldungen von Leuten, die nicht direkt am Projekt beteiligt sind. Diese können oft frische Perspektiven und wertvolle Einsichten bieten.
Zusammengefasst
Prototyping in Figma ist viel mehr als nur etwas designen. Damit kannst du ein interaktives Modell deiner App oder Website erstellen. Es ist so, als würdest du eine „Testversion“ bauen, mit der man herumspielen kann, aber ohne den ganzen Aufwand, sie komplett zu programmieren.
Das Prototyping spart Zeit, Geld und Nerven, weil du schon früh im Prozess herausfinden kannst, was gut funktioniert und was nicht. Es macht deine Ideen greifbarer und sorgt dafür, dass das Endprodukt so gut wie möglich wird. Wir finden diese Funktion von Figma besonders spannend und nutzen sie laufend, um unsere Arbeit effizient zu gestalten.
Du brauchst Hilfe beim Design deiner Website oder App? Kein Problem! Schreib uns und unsere Designer:innen helfen dir mit ihrer Expertise weiter.
