Prototyping in Figma | Figma für Anfänger #7

Der folgende Artikel ist dem Prototyping in Figma gewidmet. Heute lernen Sie, wie Sie interaktive Komponenten erstellen, Ihre Designs organisieren und Ihre Prototypen teilen. Lesen Sie weiter, um mehr zu erfahren.

Prototyping in Figma – Inhaltsverzeichnis:

1. Usability-Tests
2. Prototypen erstellen
3. Prototypenoptionen
4. Flow
5. Prototypen teilen

Usability-Tests

Interaktive Interface-Prototypen ermöglichen es Ihnen, den Weg der Benutzerreise durch Ihre Anwendung abzubilden. Sie können sie für Forschungszwecke verwenden, um herauszufinden, wie Benutzer mit Ihrem Interface interagieren. Dies wird als Usability-Test bezeichnet und hilft Ihnen, Probleme zu finden, auf die Benutzer stoßen könnten.

Usability-Tests in den frühen Phasen der Entwicklung einer Anwendung helfen, die Verluste zu minimieren, die ein Unternehmen erleiden könnte, indem es eine ungetestete Anwendung auf den Markt bringt. Manchmal stellen sich Ideen, die für Designer großartig erscheinen, als unintuitiv für Benutzer heraus. 

Prototypen erstellen

Sie können Prototypen im Prototyp-Tab im Eigenschaften-Panel erstellen.

Prototypenoptionen

Wenn Sie keine Ebene auswählen, sehen Sie die Einstellungen für den Prototyp im Prototyp-Tab.

• Gerät – wählen Sie Gerät und Modell aus
• Vorschau – hier können Sie sehen, wie sich die Änderungen, die Sie vornehmen, auf das Erscheinungsbild des Prototyps auswirken, den Sie später teilen.
• Hintergrund – Sie können eine Hintergrundfarbe auswählen, um den Prototyp an Ihre Marke anzupassen
• Flows – Sie können den Anfangsrahmen des Prototyps auswählen

Nützlicher Tipp: Ein Startpunkt für einen Flow wird automatisch erstellt, wenn Sie Ihre erste Verbindung zwischen zwei Rahmen hinzufügen.

Flow

Ein Flow ist das Netzwerk von Rahmen und Verbindungen auf einer einzelnen Seite. Sie können mehrere separate Flows erstellen, z. B. einen Flow zum Erstellen eines Kontos, einen weiteren zum Anzeigen von Produkten oder zum Abschließen von Transaktionen. 

Um eine Verbindung zu erstellen, müssen Sie den Prototyping-Tab aktiv haben, dann wählen Sie einen Rahmen oder ein Objekt in einem Rahmen aus und verwenden den kreisförmigen Knoten, um eine Verbindung zu einem anderen Rahmen zu ziehen.

Sie können die Einstellungen der hinzugefügten Verbindungen im Abschnitt Interaktionen des Eigenschaften-Panels anpassen, nachdem Sie auf das verbundene Objekt geklickt haben. Sie können den Typ der Interaktion angeben.

Sobald Sie auf eine bestimmte Interaktion klicken, haben Sie Zugriff auf zusätzliche Einstellungen.

a) Interaktionsdetails – gibt den Typ der Interaktion an (Bei Berührung, Beim Ziehen, Beim Überfahren, Beim Drücken) und was die Interaktion bewirken soll (Navigieren zu, Ändern zu). 

b) Animation – hier können Sie angeben, wie sich das Element nach der Interaktion verhalten soll. 

Um die Verbindung zu entfernen, klicken und ziehen Sie an beiden Enden.

Prototypen teilen

Um einen Prototyp zu teilen, müssen Sie ihn zuerst mit der Schaltfläche Präsentieren in der Vorschau anzeigen. In der Prototypvorschau wird die Schaltfläche Prototyp teilen in der Werkzeugleiste verfügbar sein.

Wenn Sie auf die Schaltfläche Prototyp teilen klicken, öffnet sich ein Fenster, in dem Sie das Zugriffslevel festlegen können (Kann ansehen, Kann bearbeiten) und angeben, wer die Datei öffnen kann (Jeder mit dem Link, Nur Personen, die zu dieser Datei eingeladen sind).

Aufgabe 7. Fügen Sie Verbindungen zwischen Ihren Bildschirmen hinzu. 

• Verlinken Sie die Schaltfläche “Anmelden” mit dem Home-Rahmen.
• Verlinken Sie das Foto und den Produktnamen, die sich im Home-Rahmen befinden, mit dem Produkt-Rahmen.
• Verwenden Sie die Schaltfläche “Zurück” und erstellen Sie eine Verbindung, um zum Home-Bildschirm zurückzukehren.

Nachdem Sie Verbindungen hinzugefügt haben, können Sie diese mit der Schaltfläche Präsentieren in der Vorschau anzeigen und überprüfen, wie Ihr Prototyp funktioniert. 

Sie haben gerade mehr über Prototyping in Figma gelernt. Weitere Ressourcen: Was ist UX-Forschung?

Wenn Ihnen unsere Inhalte gefallen, treten Sie unserer aktiven Community auf Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.