Figma Prototyping und Animationen: Interaktive Prototypen entwerfen

1. Einführung: Hallo Freunde. Mein Name ist Tatiana und heute freue ich mich , Ihnen mein Wissen über die Erstellung von Prototypen und Figma mitzuteilen . Prototyping ist für UX- und UI-Designer zu einer unverzichtbaren Fähigkeit geworden . Wie bei Prototypen können Sie zeigen, wie Ihre Ideen in einer echten App oder mobilen Anwendung funktionieren sollen . Auch beim Prototyping können Sie besser mit Ihren Kunden oder beispielsweise mit Entwicklern kommunizieren , die im wirklichen Leben implementieren oder entwerfen sollten . Grundsätzlich wurde dieser Kurs für alle Niveaus erstellt. Es spielt keine Rolle, ob Sie gerade mit Figma anfangen oder schon eine Weile mit dem Schwefel gearbeitet haben. Wir beginnen mit Grundlagen des Prototypings zur Erstellung grundlegender Interaktionen zwischen Bildschirmen. Und dann gehen wir zu komplizierteren Themen über, wie zum Beispiel das Erstellen von Interaktionen zum Klicken und Ziehen von Hover-Effekten. Wir werden auch über verschiedene Arten von Animationen sprechen , einschließlich Smart Animate. Das Ende. Wir werden darüber sprechen, wie Sie mit interaktiven Komponenten arbeiten , die sehr wichtig sind , um Ihren Prototyping-Prozess zu beschleunigen. Ich hoffe, dass ich dich in meiner Klasse sehe und mein erstes Tutorial genieße. 2. Grundlagen des Prototyping in Figma: In diesem Video werden wir darüber sprechen, wie Sie eine einfache Interaktion zwischen zwei Frames erstellen können. Ich habe bereits zwei verschiedene Designs für eine Hero-Sektion und auch für unsere Produkte vorbereitet . Dies ist nur ein einfacher fiktiver Laden , in dem wir heute Bücher arbeiten werden. Sigma, wie Sie bereits wissen, auf der rechten Geldregisterkarte sehen Sie auf der rechten Geldregisterkarte „Design“. Dies ist im Grunde genommen der Ort, an dem Sie alles tun , was mit Ihrem Design, Ihrer Ausrichtung, Ihren Farben, Ihrer Typografie usw. zu tun hat. Dann haben Sie die Registerkarte „Prototyp“. Und darüber werden wir eigentlich sprechen. Sie und auch in den nächsten Videos prüfen, ob nur aktiviert ist, wenn Sie beispielsweise CSS-Einstellungen anderer Elemente kennen möchten . Wenn Sie sich also in Ihrem Prototypbereich befinden und Ihren Rahmen auswählen, sehen Sie sofort einen Endpunkt oder das Plus-Symbol. Dies ist ziemlich einfach, denn wenn Sie darauf drücken, sehen Sie sofort einen Fehler, den Sie auf einen anderen Frame wie diesen zeigen können . Wenn Sie Ihren Pfeil loslassen, erhalten Sie sofort die Interaktionsdetails , die ziemlich anpassbar sind. In diesem Fall können Sie also Enklave auf dem richtigen Weg auswählen und so weiter. In diesem Video werden wir uns jedoch nur auf die grundlegende Klick-Interaktion konzentrieren und in den nächsten Videos über weitere Details über Animationen und andere Interaktionstypen sprechen weitere Details über Animationen und . Um beispielsweise die Interaktion zu löschen, wählen Sie einen Fehler und drücken Sie auf die Entf-Tastatur. In meinem Fall wird es am sinnvollsten sein, den Shop Now Button mit dem nächsten Frame zu verbinden. Also lasst es uns einfach schnell machen. Wählen Sie die Schaltfläche Jetzt einkaufen und verbinden Sie diese Schaltfläche bis zum nächsten Frame. Der Zoo kann hier sehen, ich kann sofort zu unserem Produktrahmen navigieren. Und wenn Sie verschiedene Frames haben , können Sie auch hier ganz einfach aus der Liste auswählen. Okay, verbinden wir auch das obere Menü in meinem Heldenbereich mit dem nächsten Frame wie diesem. Und natürlich, wenn der Benutzer auf unseren Produkten ist, möchte er oder sie vielleicht zurückgehen. Verbinden wir einfach diesen Button. Gehe zurück zu unserem ersten Frame, der Helden-Sektion und dem gleichen. Wenn der Benutzer auf das Logo drückt, sehen Sie normalerweise diese Richtung, dass Sie zur Hauptseite zurückkehren können , wichtig zu erwähnen, wenn Sie tatsächlich auf einen grauen Hintergrundbereich klicken, Sie kann sofort alle Interaktionen sehen, die zwischen unseren beiden Frames stattfinden. Nehmen wir an, Sie haben sich entschieden, eine Interaktion zu ändern, oder vielleicht haben Sie einen Fehler gemacht. Sie können diese Änderungen ganz einfach vornehmen indem Sie einen Pfeil auswählen und die Einstellungen in den Interaktionsdetails oder in einem Animationsunterabschnitt ändern. Wenn das so ist, schauen wir uns unseren Prototyp und die Interaktion an. Lassen Sie mich dazu die obere Menüleiste gehen und auf das aktuelle Symbol drücken. Okay, also befinden wir uns im Präsentationsmodus und lassen uns schnell testen, ob unsere Interaktion tatsächlich funktioniert. Wenn ich den Mauszeiger hier über meinen unteren Rand fahre, werden Sie sehen, dass sich der Mauspfeil ändert und dass es tatsächlich anzeigt , dass ich darauf klicken kann. So einfach ist das. Ich bin auch zum nächsten Frame zu unseren Produkten navigiert. Ich sehe, dass mein nächster Button zurück tatsächlich auch funktioniert, und so navigiere ich zurück. Lassen Sie uns auch schnell testen, ob dieses Handbuch funktioniert, unsere Produkte. Ja, perfekt, es funktioniert. Und die endgültige Interaktion wird auf unserem Logo liegen. Und ja, wir werden auch auf unsere Homepage weitergeleitet. Im nächsten Video werden wir mehr über die Einstellungen des Präsentationsmodus und auch über Geräte sprechen die Einstellungen des Präsentationsmodus und , mit denen Sie Ihre Prototypen anzeigen können . 3. Präsentationsmodus und Geräte: Hier möchte ich Ihnen ein paar Tricks im Präsentationsmodus mitteilen, mit denen Sie das beste Seherlebnis Ihrer Prototypen erhalten können. Wenn Sie Ihren Frame öffnen, können Sie grundsätzlich damit interagieren. Wenn Sie sich beispielsweise nicht sicher sind oder ob Ihr Benutzer nicht mit der rechten Maustaste rechtsklickt, können Sie einfach auf eine beliebige Stelle auf den Rahmen klicken und Sie erhalten die Hinweise darauf, wo Sie tatsächlich klicken. Dies sind also nur die anklickbaren Bereiche, die Sie verwenden können. Wenn Sie den Mauszeiger über diese Elemente bewegen, können Sie natürlich sehen, dass sie auch anklickbar sind. Sprechen wir hier über verschiedene Optionen. Sie könnten Ihren Rahmen auf die unterschiedliche Breite des Bildschirms anpassen . Die tatsächliche Größe bedeutet also , dass Ihr Rahmen zu 100% davon wird, wie er sein sollte. Wenn Ihr Frame also viel mehr Pixel hat als Ihr tatsächlicher Bildschirm, werden Sie ihn nicht vollständig sehen. Das Beste, was ich gerne machen würde, ist Breite anpassen oder zum Beispiel im Vollbildmodus. Dann siehst du einen allgemeinen Überblick. Kein Bereich Ihres Frames ist ausgezeichnet und Sie können ihn einfach navigieren und testen, indem Sie beispielsweise die Hotspots in onClick deaktivieren können. Wenn Sie also auf Ihren Frame drücken, werden die Nullhinweise mehr angezeigt. Wenn du es aktivierst. Jetzt siehst du die Hinweise auch noch einmal. Sie können die Seitenleiste ausblenden, damit Sie eine bessere Sicht haben. Sie haben mehr Bereich, um Ihren Prototyp zu sehen, was auch sehr nützlich ist. Natürlich ist es das letzte, Figma UI zu zeigen. Wenn du das deaktiviert hast , siehst du nicht mehr viele Einstellungen. Um es wieder zu aktivieren, können Sie den Hinweis von Figma sehen, drücken Sie die Steuer-Schrägstrich drücken, um das Ding meiner Benutzeroberfläche erneut anzuzeigen. Hier sehen wir noch einmal unsere Speisekarte. Was mir auch am Präsentationsmodus gefällt , ist, dass Sie mit Ihren Teammitgliedern oder mit Ihren Kunden zusammenarbeiten können . Das Hauptmerkmal besteht beispielsweise darin, den Prototyp zu teilen. Wenn Sie auf einen scharfen Prototyp drücken, können Sie tatsächlich die E-Mails von Personen hinzufügen, die Sie Ihren Prototyp ansehen oder diesen tatsächlich bearbeiten möchten. Dies ist sehr nützlich, wenn Sie zusammenarbeiten möchten. Noch einfacher, Sie können tatsächlich jemanden mit dem Link sehen oder zum Beispiel in Figma bearbeiten können, in Figma bearbeiten können als gäbe es kostenlose und auch kostenpflichtige Pläne. Und auf den kostenlosen Pflanzen haben Sie eine Einschränkung darauf wie viele Personen bearbeiten und zusammenarbeiten können. Aber wir werden dieses Thema hier nicht behandeln. Sie können es leicht in einem Gesundheitszentrum von Figma lesen und der letzte Punkt, den ich hier zeigen wollte , ist, dass Sie Kommentare zu Ihrem Prototyp in einem Präsentationsmodus abgeben können . Lasst uns zum Beispiel etwas hinzufügen. Wenn Ihr Teammitglied es beispielsweise öffnet, kann es sofort sehen, dass Sie einen Kommentar hinterlassen haben wie: Hey, ich möchte, dass die Farbe dieser Schaltfläche leicht geändert wird. Eine andere Person kann entweder auf Ihren Kommentar antworten oder beispielsweise Markt wie gelöst auch wenn aus dem Präsentationsmodus wechseln, haben Sie einen anderen Satz im Prototyp DEP. Diese Einstellungen sind nur sichtbar, wenn Sie die Auswahl der Frames aufheben. Wenn Sie den Rahmen auswählen, haben Sie hier ganz andere Einstellungen. Also lassen Sie es uns schnell aufheben. Und eine der wichtigsten Einstellungen, die ich dir gerade zeigen werde , ist eigentlich das Gerät. Es ist sehr nützlich , da Sie Ihren Prototyp auf dem realen Gerät in der Vorschau anzeigen können . Und in diesem Fall möchte ich eine Vorschau meiner mobilen Version unseres Produktbildschirms anzeigen. Der Rahmen, den ich erstellt habe, ist das iPhone 11 Pro. Schauen wir es uns an. Sie können sofort die Vorschau sehen wie sie aussehen wird. Sie werden zum Beispiel das Modell ändern. Sie können einen silbernen Raum wählen, Grau, Mitternachtsgrün, aber lassen Sie es uns zum Beispiel Gold behalten. Sie können die Platzierung auch vertikal oder horizontal ändern . Und natürlich konnte man die Ströme sehen. Und genau hier können wir entweder einen Link zu Ihrem Flow kopieren, gezielt den Frame des Flow auswählen. Wie Sie sehen können, wurde der erste Flow sofort zu meinem Hero-Abschnitt-Frame umgeleitet. Und natürlich kannst du es sofort spielen. Ja, mal sehen, wie unser zweiter Flow auf einem echten Gerät angezeigt wird. Genau hier sehen wir tatsächlich, wie unsere mobile Version des Bildschirms auf einem Mobiltelefon angezeigt wird. Und es ist eigentlich ganz schön zu sehen, besonders für die Ränder an den Seitenrändern und den oberen Rändern, um sicherzustellen, dass nichts ausgeschnitten ist und dass Ihr Benutzer die beste Erfahrung aus Ihrem Prototyp. 4. Animation: Erinnern Sie sich an unsere einfache Interaktion zwischen zwei Frames, die wir vor einiger Zeit erstellt haben? Nun, wenn Sie sich richtig daran erinnern, haben wir nicht speziell herumgespielt, hätten Einstellungen der Interaktionsdetails und Animationen. Und heute werde ich Ihnen acht verschiedene Arten von Animationen erklären , die Sie tatsächlich in Ihren Prototypen verwenden können . In Figma ist Ihre Animation standardmäßig sofort und sofort eingestellt. Eigentlich ist Ihr Prototypübergang ziemlich breit. Es hat nicht diesen reibungslosen Übergang, Sie normalerweise in netten Apps und Websites sehen. Um einen reibungsloseren Übergang zu schaffen, empfehle ich immer, mit den Grundlagen zu beginnen. beispielsweise Animation auflösen auswählen, wird die Animation aufgelöst. Sie können diese verschiedenen Kurven haben, die Sie mit verschiedenen Übertragungsarten auswählen können . Standardmäßig ist es so eingestellt, dass es sich lockert. Und hier können Sie verschiedene Arten von Verzögerungen einstellen. Wenn es beispielsweise nur 300 Millisekunden sind, wird der Übergang ziemlich schnell sein. Was ich an Sigma mag, ist, dass genau hier auf dieser Blackbox man genau hier auf dieser Blackbox sofort die Interaktion sehen kann, wie sie aussehen wird. Testen wir es also schnell an unseren Prototypen. Also drücke ich jetzt auf Shop und sehe diesen reibungslosen Übergang, aber es war ziemlich schnell hier. Erhöhen wir es auf 1 Sekunde. Hier ist der Übergang kleiner und viel langsamer. In diesem Fall gilt es nicht wirklich, weil es auf einer Website etwas seltsam aussieht , einen solchen Übergang zu haben. Aber er wird zum Beispiel für Folien nützlich sein. Wenn Sie eine Präsentation machen müssen, wird sie viel, viel besser aussehen als nur eine sofortige Animation. Der nächste Animationstyp, über den ich sprechen möchte , ist smart animate. Smart Animate sucht nach passenden Ebenen zwischen zwei Frames. Es erkennt den Unterschied und animiert diese Ebenen tatsächlich zwischen den Frames. Ich werde Ihnen schnell zeigen, wie es funktioniert, aber wir werden ein weiteres Video haben speziell für Smart Animate gewidmet ist, da es etwas komplex ist und mehr Zeit benötigt, um es zu erklären. Lassen Sie uns also einfach einfach mit 800 Millisekunden auswählen 800 Millisekunden und Sie werden sehen, was passieren wird. Lasst uns unseren Hintern drücken. Du siehst, dass die Animation ziemlich kompliziert war. Also fand Figma diese Kombinationen zwischen Textebenen. Und Sie können sehen, dass wir diese komplizierte Interaktion hatten , bei der die Primärtexte irgendwie nach oben zum nächsten Frame gingen, die nächste Animation bewegt. Und Sie können sehen, dass unser Freund tatsächlich aus verschiedenen Richtungen bewegt wird. Und was mir an dieser Art von Animation gefällt , ist, dass Sie die Richtung auswählen können, egal ob sie von oben, von unten oder von der Seite kommt . Hier sehen Sie, dass unser zweiter Frame von der linken Seite unseres ersten Frames eingezogen wird . Move Out hat eine sehr ähnliche Indirection, aber es funktioniert einfach andersherum. Lassen Sie uns schnell prüfen, wie es aussieht. Bush hat eine ziemlich ähnliche Animation und Interaktion. Sie können auch verschiedene Richtungen auswählen , aus denen der zweite Frame auf die nächste geschoben wird. Aber ich mag es auch sehr, weil es eine sehr gute Interaktion sein kann, besonders wenn Sie eine scrollbare Website haben. Es ist ziemlich genial, aber vielleicht können wir die Verzögerung erhöhen, um es besser zu machen . Erhöhen wir es auf 1600 Millisekunden. Hier ist großartig, dass ziemlich viele Websites sind und heutzutage diesen Trick verwenden, wenn er möchte, dass der Benutzer verschwendet, kann nach unten scrollen und seine coolen Interaktionen bekommen , wenn er auf den Knopf drückt. Es gefällt mir sehr, sehr. Also habe ich nicht genau wie Push by gearbeitet. Es hat dieses Gefühl als Rutsche und es kommt von oben zu unserem Rahmen und bewegt es im Grunde genau hier raus. Sie können auch verschiedene Richtungen auswählen, aber lassen Sie mich schnell zeigen, wie genau es aussieht. Im Grunde kommt unser Rahmen immer noch von oben, aber er drückt den ersten Frame nicht heraus, aber er kommt irgendwie als Folie darüber. Schließlich ist das letzte Ausrutschen wenn das erste Bild herausrutscht und der zweite Frame genau so erscheint. Das war also eine ganz einfache Interaktion genau hier. In der Animation werden Sie verschiedene Arten von Interaktionen haben . Und standardmäßig ist es eine Leichtigkeit, aber Sie können herumspielen und verschiedene Einstellungen auswählen. Wenn Sie zum Beispiel auch eine wirklich erweiterte Animation wünschen, empfehle ich, benutzerdefinierte zu verwenden. Darüber werden wir später ausführlicher sprechen. Aber was für einen Brauch Sie können eine erweiterte Interaktion haben. Genau hier sehen Sie diese Stärkekurve, die Sie zum Beispiel so ändern können . Und Sie werden im Vergleich zum voreingestellten Standardwert eine völlig andere Animation sehen . Genau so. Sie können sehen, dass es zuerst ziemlich schnell war und dann die Verzögerung bekommt. 5. Hover-Effekt: Heute sprechen wir darüber, wie man eine Hover-Animation erstellt. Diese Animation ist extrem einfach zu machen und um ehrlich zu sein, ist meine bevorzugte Art von Animation, die Sie in Sigma machen können. Genau hier habe ich bereits einen Rahmen mit einer Desktop-Größe erstellt und ich habe bereits ein Bild mit einigen Möbeln gefunden. Stellen wir uns also vor, wir erstellen eine Schwebe-Animation für einen Online-Shop, in dem Sie Möbel verkaufen und eine wirklich coole Animation zeigen möchten , bei der jemand im Grunde mit dem Mund schwebt . Lassen Sie uns dieses Bild zunächst schnell außerhalb unseres Frames kopieren . Genau hier werden wir einige Änderungen vornehmen, um unseren Hover-Status anzuzeigen. In meinem Fall möchte ich eine zusätzliche Füllung einer schwarzen Farbe mit dem Opazitätsprozentsatz von 30% hinzufügen. Ich füge auch einen Titel hinzu. Okay, also habe ich im Grunde genommen die Schriftart und die Größe geändert . Lassen Sie uns auch beide Schichten auswählen und den minimalistischen Schwefel mitten in der Architektur platzieren . Und auch wenn Sie einen Online-Shop erstellen ist es sehr wichtig, Call to Action zu tätigen. In meinem Fall erstelle ich eine Schaltfläche mit der Aufschrift Jetzt einkaufen, damit die Benutzer sofort die Auswahl von Schwefel öffnen können , sagen wir, und die einkaufen können, die ihnen gefallen. Verschieben wir unsere Textebene über unsere rechteckige Ebene, damit sie angezeigt wird. Wählen wir natürlich beide Ebenen aus und erstellen eine Ausrichtung in der Mitte. Ich werde diese beiden Ebenen ebenfalls gruppieren und auch die Größe dieser Schaltfläche verringern. Ich wähle mein Bild und auch einen Button aus, um sie beide in einer Mitte zu verbünden. Alles klar, wenn Sie mit dem Erstellen Ihres Hover-Status fertig sind , wählen Sie alle diese Ebenen aus und klicken Sie im Grunde mit der rechten Maustaste und wählen Sie Frameauswahl aus. Es ist wirklich wichtig , dass Sie diese Elemente nicht nur gruppieren, sondern sie als Frame auswählen. Wenn beide Bundesstaaten bereit sind, navigieren wir zur Registerkarte Prototyp und erstellen unsere Interaktion. Natürlich verbinde ich das erste Bild, den Ruhezustand, mit unserem Hover-Status. In den Interaktionsdetails wähle ich beim Schweben aus, was ziemlich logisch ist. Wichtiger Teil hier ist, dass wir nicht zum Kampf navigieren auswählen, aber wir müssen Overlay öffnen auswählen. Bei geöffnetem Überlagerung bedeutet dies, dass der Layer, auf den Sie gerichtet sind , tatsächlich die ersten Ebenen ersetzt. In diesem Fall erhalten wir den perfekten Hover-Effekt. Und natürlich haben Sie in einem Overlay-Bereich mehrere Funktionen. Aber was hier wichtig ist ist manuell, weil wir sicherstellen möchten , dass unser Image eine Führungskraft ist, dieselbe Position wie unsere Wache im Rahmen. Wie Sie sehen können, kann ich die Position meiner Schwebeebene in die unterschiedliche Größe verschieben , was bedeutet, dass sie für unseren Test nicht genau in der Mitte des ersten Bildes für unser Experiment liegt. Lass es uns einfach genau in der Mitte machen. Lass uns sofort sehen, wie es funktioniert. Also hier werde ich mit meiner Maus schweben und einen anderen Schwebezustand sehen , der perfekt ist. Aber wie Sie auch sehen können, ist die Animation nicht ganz glatt. Der Grund dafür ist eigentlich unsere Animationseinstellung, da, wie Sie sich aus früheren Videos erinnern, standardmäßig wie Sie sich aus früheren Videos erinnern, sofort eingestellt ist. Aber in diesem Fall wählen wir auflösen und wir werden es einfach so behalten, wählen wir auflösen und wir werden es wie es ist, mit einer Standardverzögerung von 30 Millisekunden und erleichtern Animation und lassen Sie uns schnell überprüfen, wie es funktioniert. Ja, wie Sie sehen können, ist es viel glatter. Sie sehen, dass die Übertragung viel besser ist und sich natürlicher anfühlt. Das war also das Boreal bei Hover-Animation. Wir sehen uns im nächsten Video. 6. Intelligentes Animation – Teil 1 (Grundlagen): Heute werden wir in Figma etwas über smart animate lernen. Mit Smart Animate können Sie sich mit ähnlichen Frames verbinden und die flüssige Animation zwischen ihnen abrufen. Aber um Ihnen genauer zu veranschaulichen, wie es funktioniert, lassen Sie mich Ihnen schnell ein einfaches Beispiel zeigen. In Sigma. Erstellen wir zwei Frames. Ich werde wie immer den mobilen Rahmen des iPhone 11 Pro Max auswählen . Ich werde diesen Rahmen sofort duplizieren , um die Bequemlichkeit zu gewährleisten. Erstellen wir einfach eine einfache Form, zum Beispiel ein Rechteck. Ich lege mein Rechteckig auf den ersten Rahmen unten. Und ich wähle schnell eine zufällige Farbe aus, die ich füllen soll. Und ich kopiere dieses Rechteck in den zweiten Rahmen, aber ich verschiebe es auch an den oberen Rand des Rahmens. Und auch um Ihnen das Smart zu veranschaulichen , animieren Sie die Animation. Ich drehe diese Form um 180 Grad. Im Moment haben Sie keinen visuellen Unterschied gesehen, aber vertrauen Sie mir, in unserer Präsentation werden Sie das definitiv sehen. Navigieren wir schnell zur Registerkarte Prototyp und verbinden unsere beiden Frames. Also wähle ich einfach beim Tippen aus, ich erstelle eine Animation mit smart animate und was die Standardeinstellungen mit einer Verzögerung von 300 Millisekunden erleichtern . Und lasst uns das Gleiche machen. Wenn Sie auf dieselbe Form zurücktippen, kehren Sie zum ersten Frame zurück. Alles klar, validieren wir schnell unseren Prototyp. Also klicke ich schnell auf mein Shape. Wie Sie sehen können, ist es größtenteils gedreht, aber ich denke, dass die Verzögerung einfach zu schnell war. Gehen wir schnell zu unserer Datei zurück und ändern die Verzögerung in eine größere Zahl. Testen wir es noch einmal. Sie können sehen, dass unsere Form auf kleinere Weise gedreht wird . Und ich mag es wirklich, weil Sie so viele komplexe Animationen mit smart animate erstellen können , aber nur um Ihnen ein anderes Beispiel zum Vergleichen zu geben. Was passiert also, wenn wir unsere Animation einfach auflösen? Wird es einen Unterschied geben? Man könnte denken, dass ja, es wird genau das Gleiche sein, aber tatsächlich wird es ganz anders sein. Also schreibe ich hier, lass uns nochmal auf unsere Form klicken. Und du siehst, dass die Rotation nicht stattfindet. Und wenn es deine Form nicht gedreht hat , spielt es natürlich keine Rolle. Sie sehen nur den reibungslosen Übergang, aber Sie haben diesen fantastischen Animationseffekt nicht so gesehen wie wir es gerade zuvor getan haben. Lassen Sie mich Ihnen auch zeigen, wie smart animate an einem Beispiel aus dem wirklichen Leben funktioniert. 7. Intelligentes Animation – Teil 2 (menu: Stellen Sie sich vor, Sie haben bereits einen Heldenbereich für Ihre Website. In meinem Fall habe ich bereits ein grundlegendes Layout vorbereitet und ihr seid herzlich eingeladen, es einfach zu kopieren oder einen eigenen Heldenbereich zu erstellen. Aber was ich hier veranschaulichen werde, ist, wie sich das Hamburger-Menü mit Smart Animate verhält , wenn der Benutzer darauf klickt. Lassen Sie uns schnell unseren Frame auswählen und duplizieren. Und im zweiten Frame werden wir unsere Interaktion darüber erstellen , wie das Handbuch von der rechten Seite herausrutscht. Zuerst nehme ich dieses Hamburgermenü und drehe es um 90 Grad. Und dann erstelle ich natürlich eine Menübox. Lassen Sie uns schnell auch in einem dunkleren Gelbton färben und vergessen es unter das Hamburgermenü zu bewegen, weil Sie es mit einem Strich sehen möchten. Ich werde auch die Farben modifizieren, damit wir unser Hamburgermenü ganz genau sehen können . Der letzte Schritt wäre, nur ein paar Menüpunkte zu schreiben. Ich wähle alle meine Textebenen zusammen mit einem rechteckigen Feld aus und richte sie auch an der Mitte aus. Wenn wir jetzt unser Hamburgermenü im Prototyp verbinden , werden wir keine spezifische Animation sehen, aber wir werden nur einen sehr schönen Fluss sehen in dem das Geld erscheinen wird. Lassen Sie mich es Ihnen schnell in einem Prototyp-Schritt veranschaulichen, verbinden wir unser Hamburger-Menü erneut onclick mit smart animate mit einer Verzögerung von 800 Millisekunden und dem gleichen hier. Wenn ich zurückklicke, verschwindet mein Menü. Lasst uns schnell mit dieser Spucke machen. Ja. Sie sehen also, dass der Manager im Grunde langsam mit einem reibungslosen Übergang auftauchte. Aber was ich erreichen möchte, ist, dass mein Handbuch von der rechten Seite abgleitet. Um das zu erreichen, nehme ich mein Menü und kopiere es in den ersten Frame. Und lassen Sie uns dieses Menü auswählen, das sich in beiden Frames befindet , und bewegen Sie sie außerhalb unseres Rahmens ist ziemlich wichtig, da Figma Fahrrad alle Interaktionen verfolgt, die passiert. Wenn also unser Geld von der rechten Seite herausrutschen wird , müssen wir es in unserem ersten, in unseren beiden Frames verschieben . Und speziell im zweiten Frame, verschieben wir es einfach so zurück, wie es anfangs war. Lasst uns schnell sehen, ob wir einen besseren Übergang bekommen. Ja, also das ist es, was ich erreichen wollte, ist ganz nett. Und natürlich können Sie mit Smart Animate viel schwierigere und kompliziertere Animationen erstellen . Aber da eine grundlegende Lektion ein guter Anfang für Sie ist , um mit dem Erkunden zu beginnen. Lass es mich wissen, Leute, wenn du es geschafft hast und ich bin neugierig auf deine Arbeiten. 8. Horizontales und vertikales Scrollen – Fotogalerie: Hallo Freunde. Heute werden wir darüber sprechen, wie man eine horizontale und vertikale Animation erstellt . Und speziell für diese Lektion erstellen wir einen einfachen Bildschirm für die Reise-App. Öffnen wir also schnell Sigma, wählen Sie unser Frame-Tool aus und wählen Sie den voreingestellten Telefonrahmen aus. In meinem Fall wähle ich das iPhone Pro Max aus. Ich füge schnell einen Titel hinzu. Lassen Sie uns auch die Größe auf 26 und auch die Dicke von halb fett einstellen . Ich werde auch eine Unterüberschrift erstellen und natürlich ihre Größe und auch die Dicke auf mittel verringern . Der nächste Schritt wäre, eine Reisekarten zu erstellen , die ich weiter animieren und in horizontaler Richtung verfügbar machen möchte animieren und in horizontaler Richtung verfügbar machen . Lasst uns auch die Ecken umrunden. Genau hier. Ich schreibe auch etwas Text. Zum Beispiel New York. Ich werde diese beiden Elemente auch gruppieren und kopieren. In Ordnung, nur der Bequemlichkeit halber werde ich diese Elemente außerhalb des Frames verschieben, werde ich diese Elemente außerhalb des Frames verschieben es sei denn, ich benenne tatsächlich zuerst Rückwürfe um. Ich wähle auch jedes Rechteck und füge das Bild dafür hinzu. Grundsätzlich verwende ich das Unsplash-Plugin dem Sie nach einer Reihe verschiedener Bilder für jede Art von Thema suchen können verschiedener Bilder für jede Art von , das Sie für Ihre Prototypen haben. Fangen wir also mit New York an. Schön. Diese Bilder haben mir sehr gut gefallen. Wählen wir alle diese Karten aus und wählen Sie mit einem Rechtsklick auf unsere Maus Frame Selection aus. Es ist also wirklich wichtig , dass sich unsere Elemente innerhalb eines Rahmens befinden und nicht nur innerhalb einer Gruppe. Ich wähle den Rahmen aus und verschiebe diese Elemente schnell in unsere App, um die Elemente für das vertikale Scrollen zu erstellen , um die Elemente für das vertikale Scrollen Ich kopiere einfach die Unterüberschrift und erstelle die Autos für unser vertikales Scrollen. Gleich nachdem ich es bekommen habe , werde ich alle diese Elemente natürlich außerhalb unseres Rahmens legen, damit ich die Modifikationen erleichtern kann. Lassen Sie uns also auch die Titel und die Bilder für jedes unserer Tiefenelemente ändern . Perfekt. Lassen Sie uns noch einmal alle unsere Elemente auswählen und den Rahmen umwandeln. Und natürlich werde ich in diesem Frame wieder in meinen App-Bildschirm gehen. Perfekt, also ist unser App-Bildschirm fertig. Aber bevor wir fortfahren, das Prototyping, lassen Sie mich Ihnen einen Trick sagen. Sie denken, dass der Rahmen außerhalb des Rahmens unserer App liegt. Um unser horizontales und vertikales Scrollen zu ermöglichen, müssen wir die Ränder dieser Rahmen entsprechend auf die gleiche Breite und Höhe unserer Reise-App ändern . Dies ist wirklich wichtig , denn wenn Sie die Frames außerhalb Ihres App-Frames lassen , funktioniert die Animation. Ich werde es auch so modifizieren. Wenn Sie zur Registerkarte Prototyp gehen und Ihren Rahmen auswählen, können Sie hier sofort sehen , dass die Truhe erscheint. Und standardmäßig sehen Sie kein Scrollen. Das bedeutet, dass keine Scroll-Animation implementiert wird. Wenn ich das Dropdown-Menü öffne. Für diesen Fall wähle ich das horizontale Scrollen. Das Gleiche gilt für den nächsten Frame. Wählt auch das Überlauf-Scrollen zum vertikalen Scrollen aus. Großartig. Mal sehen, wie es in Aktion funktioniert. Perfekt. Das ist unsere App. Ich werde dieses Auto scrollen und es funktioniert über horizontales Scrollen ist ziemlich perfekt. Was ist mit unserem vertikalen Scrollen? Es scrollt auch, aber ich sehe hier etwas Überlauf. Im Grunde geht dieser Rahmen über unseren Untertitel und andere Reisewächter , so sollte er nicht funktionieren. Um dieses Problem zu beheben, kehren Sie zu Ihrem Prototyp zurück wählen Sie den vertikalen Rahmen aus. Und eigentlich ist es im Designbereich sehr wichtig, dass Sie die Clip-Inhaltsfunktion verwenden. Und wenn Sie Inhalte schneiden, bedeutet das, dass das Scrollen im Grunde nicht außerhalb der Frame-Ränder geht, die genau hier definiert sind. Sehen wir uns in unserem Präsentationsmodus die Änderungen an, die wir gerade vorgenommen haben. Wie Sie gerade sehen können, scrolle ich und im Grunde meine Elemente und überlaufen nicht, sie überschreiben meine Opernelemente nicht, was erstaunlich ist. Das war also das Tutorial zur vertikalen und horizontalen Animation in Sigma. 9. Offene Overlay – Banking-App: Heute lernen wir, wie man Overlay-Animationen in Sigma erstellt . Overlay-Animationen sind besonders nützlich für mobile Apps oder für jede Art von Prototypen, bei denen Sie eine Popup-Nachricht anzeigen möchten. Zum Beispiel, um den Benutzer darüber zu informieren, dass die Aktion stattgefunden hat, oder um vor dem Fehler zu warnen, den er gemacht hat und so weiter. Sie arbeiten speziell mit der Finanz-App zusammen, die ich bereits vorbereitet habe, aber dies ist nur ein Beispiel, um Ihnen zu zeigen , wie die Animation funktionieren wird. Lassen Sie uns zusammen eine Benachrichtigung erstellen , wenn der Benutzer auf die sichere Taste drückt Ich erstelle speziell einen neuen Rahmen mit einer zufälligen Größe außerhalb meines mobilen App-Frames. Diese wird also als Benachrichtigung benannt. Lassen Sie uns hier eine Überschrift erstellen, so gut gemacht. In Ordnung, und der letzte Schritt wird darin bestehen tatsächlich einen Call-to-Action-Button zu erstellen , der viel kleiner ist als dieser. Und wir sagen diese Gruppe einfach all diese drei Elemente zusammen und richten sie genau in der Mitte aus. Speziell für diese Benachrichtigung werde ich hier auch die Ecken auf den Wert von zehn abrunden . Und ich werde diesem Frame auch einen Schatten in den Effekten hinzufügen , Lasst uns einen Schlagschatten erstellen. Wenn ich nicht nur hier einige Einstellungen finden wollte, werde ich etwas mehr verschwommen und möglicherweise die Deckkraft der schwarzen Farbe verringern , damit sie ein natürlicheres Aussehen bietet. Okay, wenn Sie also mit Ihrer Benachrichtigung fertig sind, springen wir in den Abschnitt Prototyping für den Typ genau hier. Und wir werden das Gerät entfernen , weil ich vorerst kein Gerät sehen möchte . Verbinden wir unseren Spar-Button mit unseren Benachrichtigungen. Wenn ich also auf diesen Button klicke, würde ich gerne mein Pop-up sehen. In diesem Fall ist die voreingestellte Einstellung, wie Sie in der Interaktion sehen können, wie Sie in der Interaktion sehen können, das Navigationswerkzeug, aber wir möchten es ändern, um Overlay und ein offenes Overlay zu öffnen. Dort fängt der Spaß an. Sie können es in einer Mitte oder z. B. oben links, unten links usw. ausrichten . Lassen Sie uns sehen, was passiert, wenn wir im Grunde dieses zentrale Overlay auswählen. Ich drücke meinen Save Button und sehe meine Benachrichtigung genau in der Mitte, da unser offenes Overlay auf die zentrale Position eingestellt war. Aber wenn ich mehr von einer benutzerdefinierten Position möchte, ändere ich mein Overlay an die manuelle Position. Im Handbuch sehen Sie genau hier meine Benachrichtigung mit diesen Kreuzlinien, was bedeutet, dass dies die Position ist an der ich sie auf meinem Bildschirm einstellen werde. Ich möchte es grundsätzlich genau hierher verschieben. Je mehr der obere Teil meines Prototyps ist, schauen wir uns an, wie es funktioniert. Lassen Sie mich schnell auf Speichern drücken und Sie können sehen, dass meine Popup-Benachrichtigung genau an der Position ist , an der ich sie eingestellt habe. Ich hoffe, dir hat dieses Tutorial gefallen und wir sehen uns in der nächsten Klasse. 10. Auf Drag Animation – Übertragen von App: Früher wurden größtenteils mit Prototyp-Triggern wie Onclick und auch Hover gearbeitet . Aber heute sprechen wir darüber, wie man eine Animation erstellt , die beim Ziehen ausgelöst wird. Diese Art von Trigger ermöglicht es eine Aktion auszuführen, wenn Sie ein Element auf den Bildschirm ziehen, ich erstelle schnell einen Titel. Lassen Sie uns auch die Farbe des Blaues ändern. Lassen Sie uns auch schnell einen Call-to-Action-Button erstellen. Runden wir auch die Ecken auf 20 ab, und nennen wir es auch in die blaue Farbe. Perfektes. Lasst uns nun zum interessantesten Teil kommen. Wir werden einen Schieberegler erstellen, den wir mit Andrex-Animation animieren werden. Ich wähle das rechteckige Werkzeug aus und zeichne ein sehr dünnes Rechteck, in dem wir die Linie unseres Schiebereglers einführen werden. Lassen Sie uns auch die Ecken runden. Ich ändere die Füllung in die hellgraue Farbe. Ich kopiere auch das gleiche Rechteck und ändere es in seiner Breite. Und es ist sehr wichtig für uns, eine Animation zu erstellen, was ein Schieberegler auch eine Farbe ändert, wenn sich der Boden auf die andere Seite bewegt. Füllen wir es schnell auch in die hellblaue Farbe. Ich werde es noch kleiner machen. Und der letzte Schritt wird sein, eine Ellipse zu erstellen. Mit dieser Ellipse werden wir für unsere On-Track-Animation interagieren. Natürlich nicht zu vergessen, müssen wir auch eine Nummer erstellen, im Grunde die Nummer, die wir an jemanden übertragen möchten. Lassen Sie uns schnell einige Fiktion oder Zahlen überarbeiten. Zum Beispiel fünfundzwanzig Dollar. Ich werde es in der Mitte ausrichten, und ich kopiere diese Nummer auch, um diesen crawlbaren Effekt der Zahlen zu erzeugen diesen crawlbaren Effekt der , die sich ändern, während ich meinen Schieberegler ziehe. spielt im Moment keine Diese Position spielt im Moment keine Rolle, denn wir werden sie in den Rahmen gruppieren und ändern. Im Grunde sind die Einschränkungen unterschiedlich und überlappen sich nicht mit anderen Ebenen , die wir auf diesem Bildschirm haben. Ich habe alle meine Textebenen ausgewählt und drücke mit der rechten Maustaste auf meinen Mund und drücke auf die Rahmenauswahl. Und das ist im Grunde positionieren Sie es ein bisschen höher. Was wir also tun werden , ist , dass wir die Ränder unseres Rahmens haben, die blaue Box um alle unsere Elemente herum. Und ich ziehe diese Ränder einfach zurück auf meine ursprüngliche Nummer wie diese. Aber in diesem Fall verschütten wir, sehen andere Zahlen und sie überschneiden sich mit anderen Ebenen. Um dieses Problem zu lösen, schneide ich Inhalte ab. Wie Sie sehen können, sind andere Zahlen einfach verschwunden. Ich habe gerade all diese Elemente gruppiert und werde sie genau in der Mitte ausrichten, vielleicht etwas höher, nur um es optisch ansprechend zu machen. Es sei denn, kopiere diesen Frame schnell und erstelle den nächsten Status unseres Schiebereglers. In diesem Fall verschiebe ich die Ellipse einfach nach rechts, genau hier bis zum Rand. Und sag, was mit unserem zweiten Rechteck der Folie passieren wird . Ich ziehe es einfach mit dem Westen, um mit der Ellipse ausgerichtet zu werden. Und diese ermöglicht es uns , eine schöne Animation zu erstellen , dass sich die Farbe ändert wenn die Ellipse gezogen wird. Und auch, Lass uns schauen, vergiss unsere Nummer. Also hier war es natürlich nach rechts schieben und mischen, unsere Zahl wird ebenfalls steigen. Was ich innerhalb des Rahmens mache, ich habe gerade alle Textebenen ausgewählt und verschiebe sie mit den Pfeiltasten nach oben. Genau so. Im Moment haben wir zwei unserer Frames. Gehen wir zur Registerkarte Prototyp und erstellen tatsächlich unsere Interaktion. Wir werden mit unserer Ellipse arbeiten. Wir werden unseren zweiten Frame in den Interaktionsdetails verbinden , die ich bei Drag auswählen werde. Das wird passieren, wenn wir unsere Ellipse ziehen. Und natürlich werden wir für die Animation für den besseren visuellen Effekt und auch für den besseren visuellen Effekt und auch für den reibungslosen Übergang mit smart animate genauso arbeiten. Wenn ich meine Ellipse zurückziehe, gehe ich natürlich in den Ausgangszustand in meinem ersten Frame, genauso auf der Spur, genauso auf der Spur, navigiere zum Schieberegler ist 0 Frame mit einer intelligenten Animate-Animation mit einer Verzögerung von 300 Millisekunden. Lassen Sie uns also schnell unseren Prototyp im Präsentationsmodus validieren . Genau hier, wo im Präsentationsmodus, und es ist ziemlich aufregend. Versuchen wir also, unseren Schieberegler zu ziehen. Und wie Sie sehen können, ändern sich die Zahlen und auch der Schieberegler wird mit einer hellblauen Farbe gefüllt. Dies ist das perfekte Schaufenster der Arzneimittelwechselwirkung. Und es sieht wirklich gut aus, weil Sie eine so echte Simulation der Interaktion haben können , zum Beispiel für diese imaginäre Bank-App, Wir sehen uns im nächsten Tutorial. 11. Interaktive Komponenten – Social Media App: In diesem Video erstellen wir Animationen mit Hilfe indirekter Komponenten. Interaktive Komponenten ermöglichen es Ihnen, Interaktionen und Animationen zwischen der Varianz im Komponentensatz zu definieren , was bedeutet, dass die Instanzen im Prototyping-Modus sofort lebendig werden . Auf diese Weise können Sie wiederverwendbare indirective Elemente schneller erstellen wiederverwendbare indirective Elemente schneller und auch die Komplexität Ihres Prototypings reduzieren, was Ihren Prototyping-Workflow im Allgemeinen beschleunigt. Lassen Sie uns also schnell unser interaktives Komponentenset erstellen. Öffnen Sie also Ihre Figma-Datei und gehen wir sofort zu Plugins und wählen Sie das Symbol aus. Wenn ich Plug-In möchte ich in diesem Fall ein Hard hinzufügen, das ich kann, weil ich eine Art Social-Media-App erstellen möchte eine Art Social-Media-App erstellen , in der der Benutzer Bilder mögen kann. Importieren wir es schnell und ich kann es hier sehen. Nur für die Zwecke dieses Tutorials werde ich die Gruppierung dieses Frames aufheben und die Gruppierung der Gruppe selbst aufheben. Am Ende habe ich also nur eine Vektorebene. Dies wird ein Leerlaufzustand sein, aber wir müssen zwei weitere Zustände erstellen, was bedeutet, was passiert, wenn der Benutzer den Mauszeiger über das Symbol bewegt und was passiert, wenn der Benutzer auf das Symbol klickt. Lassen Sie uns dieses Symbol zweimal duplizieren. Zuerst arbeite ich mit einem Hover-Status. Also werde ich für diesen Fall erstellen, füllen und wählen Sie nur die Farbe die sinnvoll ist, die schwerste Art von Rosa ist. Aber lassen Sie mich diesen Farbcode einfach schnell für mich selbst kopieren. Und das wird die Deckkraft auf 30% reduzieren. Das Gleiche gilt für den onclick-Status. Ich erstelle, fülle und kopiere dann Paste genau die gleiche Farbe. In diesem Fall wird die Deckkraft jedoch auf 100% gespeist. Wenn Sie mit dem Erstellen Ihres Bundesstaates fertig sind, wählen Sie alle diese Ebenen aus und navigieren Sie zur oberen Menüleiste, in der Komponenten angezeigt werden. Ich kann es öffnen und Komponentensatz erstellen auswählen. Es ist also wichtig, dass Sie keine Komponente aus den drei Elementen erstellen , sondern die Ukraine, einen Komponentensatz. Genau hier sehen Sie sofort die Ränder mit den gestrichelten Linien. Und das bedeutet, dass dies Ihr Komponentensatz erstellt wird. Bevor wir mit dem Prototyping beginnen, ist es klug, unsere Varianz innerhalb der Komponentenstufe umzubenennen . Also wird der erste natürlich Standard sein, aber der zweite, ich werde die Eigenschaft auf schweben setzen. Und der dritte wird das Eigentum haben. Klicken Sie auf. Wenn Sie mit dem Umbenennen Ihrer Varianz fertig sind. Wechseln Sie zur Registerkarte Prototyp und lassen Sie uns unsere Interaktion erstellen. Natürlich bin ich aus dem Ruhezustand auch der Hover-Status, was bedeutet, dass meine Variante beim Schweben die Eigenschaft ändern wird, um zu schweben. Sie können es direkt hier mit einem Dropdown-Menü sehen, Sie können zu einem anderen Einsatz wechseln, aber in diesem Fall ist der Hover am sinnvollsten. Die Animation, die ich auswählen werde, und animiere intelligent mit den Standardeinstellungen „Ease Out“ und einer Verzögerung von 300 Millisekunden. Dann gehen wir natürlich in den nächsten Zustand. Wenn ich darauf klicke, habe ich auch auf den Klick gewechselt. Hier ist smart animate wie im vorherigen Beispiel. Und wenn der Benutzer die Auswahl unseres Symbols aufhebt, wechseln wir natürlich zurück in unseren Ruhezustand, was bedeutet, dass derselbe auf den Klick klickt, dass wir zur Standardeinstellung zurückkehren. Dieses ECS, dass unsere Richtlinienkomponenten genau hier erstellt werden. Und lassen Sie uns schnell einen einfachen Handybildschirm mit unserer grundlegenden Social-Media-App erstellen einen einfachen Handybildschirm . Ich wähle sofort unsere Standardvariante aus und kopiere sie nach außen aus dem Komponentensatz-Frame. Ich drücke auf die Alt und ziehe es in meinen Social-Media-Frame. Und natürlich werde ich beide Elemente auswählen und kopieren, um mehr von der gleichen Varianz zu erzeugen, um einen Social-Media-Feed zu simulieren. Es sieht gut aus. Und der letzte Schritt wird natürlich sein, ein paar Bilder mit meinem Lieblings-Plugin namens Unsplash zu bezahlen . Lassen Sie uns einfach ein paar Bilder hier reinlegen. Perfekt, und wenn wir alles richtig gemacht haben, bedeutet das, dass wir keine Kabel außerhalb unseres Rahmens anschließen müssten . Wir können einfach sofort in den Präsentationsmodus wechseln und sehen, wie unser Icon seinen Status ändert. Großartig. Du siehst, dass ich den Mauszeiger über mich bewege, ich kann klicken, ich kann das Bild mögen. Ich kann einen anderen mögen. Ich kann wieder einen anderen mögen. Und natürlich kann ich es anders machen, wenn ich will. Das ist wirklich erstaunlich, weil mein Workflow viel einfacher ist, als wenn ich einfach einen anderen Frame erstellen würde und jedes Symbol mit diesem Rahmen verbinden würde und so weiter. Was auch an interaktiven Komponenten nützlich ist, ist, dass Sie sie mit Ihrem Team teilen können. Wenn Sie beispielsweise mehrere Seiten in Ihrer Projektdatei haben , können Sie immer noch dasselbe Symbol in Ihren Assets finden. In Ihren Essays sehen Sie die lokalen Komponenten und Sie können sie einfach ziehen und auf einer anderen Seite haben . Dies vereinfacht den Workflow wirklich. Wenn Sie beispielsweise mit verschiedenen Personen zusammenarbeiten, können sie auch dasselbe Symbol verwenden, dieselbe interaktive Komponente über die Datei, an der Sie zusammenarbeiten.