Figma-Prototypen: Eine schnelle, Schritt-für-Schritt-Anleitung zu nützlichen Modellieren

Figma -Prototyping: Umwandlung statische Modelle in dynamische interaktive Erfahrung

Kernpunkte:

• Figma -Prototyping konvertiert statische Modelle in dynamische, interaktive Prototypen, um Entwicklern zu helfen, die Benutzerprozesse, Funktionen und Gefühle des Designs zu verstehen.
• Zu den Schritten zum Erstellen eines Figma -Prototyps gehören: Erstellen eines horizontalen Scrolling -Frameworks, Erstellen von Kunstboardübergängen, Erstellen der Funktion der Rückkehr zum vorherigen Kunstboard und Erstellen komplexer Timing -Animationen. Jeder Schritt umfasst spezifische Einstellungen und Interaktionen, um reibungslose Übergänge und Animationseffekte sicherzustellen.
• Figma -Prototypen sind interaktiv und können mit anderen zur Vorschau und Sammlung von Feedback geteilt werden. Diese Funktion verbessert die Zusammenarbeit und ermöglicht Verbesserungen basierend auf dem erhaltenen Feedback. Figma unterstützt auch komplexere Animationen durch Plugins wie LotTiefiles.

Prototyping ist der Prozess der Umwandlung statischer Modelle in interaktive und dynamische Modelle (bekannt als Prototypen ). Ein statisches Modell in die Realität umzusetzen ist zweifellos eine der aufregendsten (wenn nicht die aufregendsten) Schritte in einem Design -Workflow. Für Entwickler ist es wichtig, die Benutzerprozesse, Gefühle und Funktionen des Designs zu verstehen. Was gibt es Schöneres als die Verwendung von Figma, was laut der Umfrage von 2020 Design Tools das beste Design -Tool der Welt ist?

Wenn Sie die Methode der Prototypierung von Figma beherrschen, finden Sie sie einfach und einfach zu bedienen und angenehm. Kopieren Sie zuerst dieses statische Modell (klicken Sie auf "eine Reihe von Interaktionen" und klicken Sie dann auf "Kopieren Sie meinen Entwurf"). Im gesamten Tutorial werden wir immer mehr funktionale Treue hinzufügen. Ihre lokale Kopie sollte so aussehen:

Hinweis: Ich gehe davon aus, dass Sie zumindest einige Kenntnisse über moderne UI -Design -Tools wie Figma oder Skizze verfügen.

Schritt 1: Erstellen Sie einen horizontalen Bildlaufrahmen

Beginnen wir mit der artboard 1, um eine Kartenauswahl zu ermöglichen, um horizontal zu scrollen. Dies ist eine Möglichkeit, unser Modell dynamisch zu machen, ohne das zu erstellen, was Figma als "Verbindung" bezeichnet. Die Verbindung leitet uns in die neue Kunstkarte, aber das ist nicht das, was wir in Schritt 1 tun werden.

Wählen Sie zuerst Karten aus der Ebenenschicht (linker Seitenleiste) aus und ändern Sie dann mit dem Dropdown-Menü die Gruppe der Gruppen, um aus dem Entwurfsfeld zu rahmen (diesmal die rechte Seitenleiste).

Ich werde nicht ausführlich darauf eingehen, aber der Hauptunterschied zwischen einer Gruppe und einem Rahmen besteht darin, dass eine Gruppe ihre untergeordneten Elemente eng umhüllt, während der Rahmen jede Größe haben kann. Dies bedeutet:

• Die untergeordneten Elemente der Gruppe werden mit der Gruppe skaliert, während die untergeordneten Elemente des Rahmens störrischer sind (dies ist eine Funktion, kein Fehler)
Die untergeordneten Elemente des Rahmens sind relativ zu seinem Rahmen ausgerichtet, während die Kinderelemente der Gruppe im Verhältnis zu ihrer Kunstboard immer noch ausgerichtet sind
Der Rahmen kann Überlaufinhalt enthalten, der horizontal oder vertikal scrollen kann (das ist es, was wir versuchen)

Warten Sie, bedeutet dies, dass die Kunstkarte tatsächlich ein Rahmen ist? In der Tat: Andere UI -Design -Tools werden Artboards genannt, und Figma nennt sie Frames

. Dies kann daran liegen, dass in Figma Frames in anderen Rahmen verschachtelt werden können, was sich etwas von Artboards in anderen Werkzeugen wie Sketch, Adobe XD unterscheidet.

zum Prototypenmodus ( ⌥ 9

) wechseln Sie jetzt die Einstellung des Überlaufverhaltens und ändern Sie die Dropdown-Option von keinem Scroll in horizontale Bildlauf.

Jetzt werden Sie feststellen, dass der Schatten vom neu konvertierten Rahmen seltsam abgeschnitten wird, aber dies ist eigentlich das Standardverhalten überfüllter Inhalte, der relativ leicht behoben werden kann.

Da der Schatten eine Unschärfevariable von 30 hat und der Rahmen jede Größe haben kann, müssen wir den Rahmen ändern, damit ein zusätzlicher Abstand um seine Kanten gelassen wird. Gröze ( Verschiebung ⌘ ↑ ↓ ← → → ) und Feinsteuer ( verschieben ↑ ↓ ← → →

) Objekte Es sollte einfach sein.

Sie können übrigens bemerken (wenn Sie auf den Rahmen klicken), können die Karten und deren Abstand leicht neu ordnet. Dies hat nichts mit dem Tutorial selbst zu tun, aber es ist immer noch großartig.

Schritt 2: Erstellen Sie den Übergang

Versuchen wir für den nächsten Schritt eine Interaktion, die eine Kunstboote mit einem anderen verbindet, auch als "Verbindung" bezeichnet.

Wählen Sie den Rahmen "Karten" aus (ja, den gesamten Rahmen, da es keine Rolle spielt, auf welche Karte jetzt geklickt wird). Angenommen, Sie befinden sich noch im Prototypmodus, ziehen Sie den Anschluss (d. H. Der Kreis mit Grenzen, die beim Schweben angezeigt werden) in die Artboard 2. Diese Artboards sind jetzt verbunden.

Nachdem der Anschluss auf die Artboard 2 gesetzt hat, sollte die Einstellung "Verbindung" (die jetzt angezeigt werden sollte) wie folgt aussehen:

• Interaktionsdetails
  • "Wenn geklickt" (Interaktion wird durch Klicks ausgelöst)
  • "Navigation zu" / "altboard 2" (klicke den Benutzer zum Navigieren zu der Kunstboard 2)
• Animation
  • "pushen" / "←" ("Paper 2" wird von der rechten Seite zum Bildschirm pushen)
  "Langsam" / "300 ms" (innerhalb von 300 ms beginnt die Animation schnell und verlangsamt sich dann allmählich)
  Wählen Sie das Kontrollkästchen "Smart Animation Match Layer" aus (wenn es unverändert bleibt, sind gemeinsame Elemente wie Back -Tasten und Navigation nicht animiert)

Möchten Sie sehen, was wir bisher getan haben? Klicken Sie in der oberen rechten Ecke auf die Schaltfläche "Demo" (d. H. Das Symbol

abspielen). Wenn Sie Figma in Ihrem Webbrowser verwenden, öffnet dies eine neue Registerkarte.

Tipp: Drücken Sie

r , um den Prototyp neu zu laden. Schritt 3: Zurück!

Bevor wir uns mit komplexeren Verbindungen befassen, können wir in die Kunstkarte 1 zurückkehren (oder welche Art, aus dem wir stammen). Erstellen Sie eine andere Verbindung, diesmal beginnend mit der Schaltfläche zurück und eingestellt wie folgt:

Interaktionsdetails

• "Wenn geklickt"
  • "zurück"

Die Animationseinstellungen sind diesmal nicht verfügbar, da die Optionen behoben sind. Insbesondere wird der Übergang umgekehrt animiert. Wenn wir beispielsweise "Push ←" verwenden, um in die Kunstkarte zu wechseln, werden wir "Push →" zum Übergang verwenden.

Schritt 4: (relativ) komplexe Timing -Animation

erstellen

Im nächsten letzten Schritt werden wir eine einzige Animation erstellen, die mehrere Artboards umfasst und mehrere Objekte separat anstelle des gesamten Kunstboards animiert. Insbesondere drehen wir die erweiterte Karte nach dem Klicken auf die Schaltfläche nach links und stellen dann den Timer so ein, dass sie nach rechts drehen, und kehren dann zu seinem ursprünglichen Status zurück.

im Wesentlichen ist dies eine Swing -Animation.

Wählen Sie das Objekt "Schaltfläche" in der ARTBOD 2 aus und erstellen Sie einen mit der ARTboard 3 verbundenen Anschluss. Verwenden Sie die folgenden Einstellungen:

Interaktionsdetails

• "Wenn geklickt"
  • "Navigation zu" / "Paper 3"
  Animation
• "Smart Animation"
  • "langsam aus" / "300 ms"

Hinweis: Da wir "Smart Animation" als Animationstyp gewählt haben . Wenn sie nicht konsistent sind, versteht Figma nicht, dass diese Schichten die gleiche Schicht sind und sie nicht richtig animieren.

Im Entwurfsfeld sollten Sie sehen, dass ich den Hintergrund der Taste auf #ff0000 eingestellt habe und die Karte nach links gedreht habe.

Wie drehen Sie jedoch die 300 ms "linke Animation drehen" nach rechts, nachdem sie ausgeführt wird? Nun, hier werden zeitgesteuerte Animationen benötigt. Wiederholen Sie die obigen Schritte, diesmal ist die Verbindung von ARTboard 3 mit der artboard 4 "nach Verzögerung" / "300 ms" der einzige Unterschied. Um die Interaktion zu vervollständigen, verbinden Sie die ARTboard 4 wiederholt erneut mit der ARTboard 5.

So führen wir Animationen kontinuierlich aus. In unserem Beispiel aktiviert die anfängliche Klick -Interaktion die "ROTLE -Animation links" und die nachfolgende Animation folgt automatisch dem Timer.

Figma -Prototyping macht Spaß, oder?

Wir haben dieses Tutorial jetzt abgeschlossen. Die Figma -Datei sieht tatsächlich nicht anders aus (mit Ausnahme einiger sichtbarer Anschlüsse, wenn sie den Prototypmodus verwenden). Es wird jedoch eine ganz andere Funktion im Demo -Modus haben. Wenn Sie nicht dem Tutorial folgen, lesen Sie die "dynamische" Version, in der Sie die Endergebnisse testen können.

Es ist cool, oder?

Während wir uns sicherlich komplexere Animationsstile und Interaktionstypen vorstellen können, sollte das, was wir hier sehen, über 99% von dem abdecken, was Sie wissen müssen. Wenn es um Interaktion geht, ist die Einfachheit immer besser!

Für Animationen, die Komplexität erfordern, gibt es ein sauberes Figma -Plugin namens Lottiefiles, das definitiv einen Versuch wert ist.

Weitere Informationen zu Figma finden Sie auch über die Verwendung von Figma für das Design von Drahtgas.

häufig gestellte Fragen zu Figma -Prototypen

Was ist der Figma -Prototyp? Der Figma -Prototyp ist eine interaktive Darstellung eines Designs, das mit Figma, einem kollaborativen Design -Tool, erstellt wurde. Es ermöglicht Designer, die Wirksamkeit ihrer Designs zu demonstrieren und zu testen und ein dynamischeres und benutzerorientierteres Erlebnis zu bieten.

Wie erstelle ich einen Prototyp in Figma? Um einen Prototyp in Figma zu erstellen, entwerfen Sie einen Bildschirm oder einen Rahmen und verwenden Sie den Prototypenmodus, um diese Frames miteinander zu verknüpfen, um Interaktionen, Übergänge und Animationen zu definieren, um die Benutzererfahrung zu simulieren.

Kann ich vor dem Teilen meinen Figma -Prototyp vorschauen? Ja, in Figma können Sie Ihren Prototyp direkt im Figma -Editor vorschauten. Geben Sie einfach den Prototypenmodus ein und klicken Sie auf die Schaltfläche „Demo“, um Ihre Designinteraktion zu erleben.

Wie kann ich meinen Figma -Prototyp mit anderen teilen? Sie können Ihren Figma -Prototyp teilen, indem Sie gemeinsam genutzbare Links generieren. Gehen Sie zum Menü Freigabe, passen Sie die Freigabeinstellungen an und kopieren Sie den Link. Jeder mit diesem Link kann Ihren Prototyp anzeigen und interagieren.

Gibt es eine Möglichkeit, Feedback zu meinem Figma -Prototyp zu sammeln? Ja, Figma unterstützt Kommentare zu Designs und Prototypen. Teilen Sie Ihre Prototyp -Links weiter, und die Zuschauer können Kommentare direkt zu bestimmten Elementen oder Bereichen des Designs hinterlassen und die Zusammenarbeit und Feedback -Sammlung erleichtern.

Das obige ist der detaillierte Inhalt vonFigma-Prototypen: Eine schnelle, Schritt-für-Schritt-Anleitung zu nützlichen Modellieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!