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!