Creación de prototipos avanzados y diseño de interacción en Figma para diseñadores de UI/UX

1. Einführung: Wenn Sie ein UI-UX-Designer sind und Ihre Fähigkeiten im UI-Design auf die nächste Stufe heben möchten , indem Sie Prototyping und Interaktionsdesign beherrschen , ist dieser Kurs genau das Richtige für Sie. Hallo, mein Name ist Arash und ich bin ein UI UX Designer. Ich unterrichte auch UI UX Design an der Universität für Wirtschaft und Humanwissenschaften in Warschau. In den letzten Jahren habe ich über 40.000 Studenten auf der ganzen Welt dabei geholfen , Designer zu werden und ihre Designkarriere zu beginnen. Mir wurde klar, dass viele Nachwuchsdesigner Fähigkeiten im Bereich Prototyping und Interaktionsdesign mögen. Welche sind heutzutage für jedes Projekt unverzichtbar. diesem Grund habe ich diesen praktischen Kurs Design A speziell entwickelt, um Ihnen zu helfen , wie Sie interaktive Elemente in Figma wie ein Profi prototypisieren und entwerfen . Wir beginnen mit den Grundlagen des Prototyping und Animation, z. B. was es ist und warum es wichtig ist, wie Animationen in Figma erstellt werden und welche Arten von UI-Animationen es gibt. Dann werden wir zu fortgeschritteneren Themen übergehen und Sie erfahren mehr über die besten Prototyping-Praktiken in Figma, wie Sie komplexe Mikrointeraktionen erstellen und wie Sie Ihre UI-Elemente interaktiv gestalten können. Darüber hinaus werden wir beliebte fortschrittliche Animationen und Interaktionen erstellen, die von Apple-Produkten inspiriert sind. Am Ende dieses Kurses werden Sie in der Lage sein, über 20 verschiedene Arten von Mikrointeraktionen und Animationen für verschiedene Anwendungsfälle zu erstellen Mikrointeraktionen und . Wenn du bereit bist, Prototyping und Interaktionsdesign zu beherrschen , sehe ich dich im Unterricht. 2. Kursstruktur: [MUSIK] Hallo, willkommen zur ersten Lektion dieses Kurses. In diesem Video werde ich Sie durch die Struktur des Kurses damit Sie wissen, was Sie erwartet und wie Sie das Beste daraus machen können. Der Kurs ist in drei praktische Abschnitte unterteilt: Grundlagen, Mittelstufe und Fortgeschrittene. Wir werden mit den Grundlagen des Prototyping beginnen , z. B. was es ist und warum es wichtig ist, wie Animationen erstellt werden usw. Sie werden über verschiedene Arten von Prototyping lernen und wir werden beginnen, grundlegende Prototypen in Figma zu erstellen. Dann werden wir zur Zwischenstufe übergehen , wo Sie die besten Praktiken des Prototypenbaus im UI/UX-Design kennenlernen . Am Ende dieses Abschnitts werden Sie in der Lage sein, verschiedene Arten von Prototypen einschließlich Mikrointeraktionen zu erstellen . Sobald Sie die Grundlagen des Prototypenbaus erlernt haben, ist es an der Zeit, mit dem Abschnitt für Fortgeschrittene fortzufahren. In diesem Teil des Kurses lernen Sie, wie Sie komplexe Prototypen und Mikrointeraktionen erstellen , die Ihre Designprojekte von gut zu beeindruckend machen . Wenn Sie mit Figma und seinen Prototyping-Tools vertraut sind, können Sie den grundlegenden Abschnitt überspringen und mit den Abschnitten für Fortgeschrittene und Fortgeschrittene fortfahren. Um das Beste aus diesem Kurs herauszuholen, sollten Sie das, was Sie in den Videos lernen, üben da Sie sonst Ihre Prototyping-Fähigkeiten nicht beherrschen können . Ich weiß, dass das Prototyping für manche Leute etwas kompliziert sein kann, aber du musst dir keine Sorgen machen, denn du kannst dich jederzeit an mich wenden und ich helfe dir, es herauszufinden. Wenn du bereit bist, lass uns gleich loslegen. 3. Was ist Prototyping: [MUSIK] Bevor wir uns mit der Erstellung von Prototypen befassen, ist es wichtig zu wissen, was Prototyping eigentlich bedeutet. Prototyping ist ein Prozess , mit dem UI-UX-Designer Ideen für Benutzeroberflächen und -erlebnisse schnell testen . Es ermöglicht ihnen, interaktive Wireframes oder Mockups zu erstellen , um Feedback von Benutzern zu erhalten , bevor sie sich mit teurer Entwicklungsarbeit befassen Aber warum sollten sie sich mit dem Prototyping beschäftigen? Testen von Prototypen können Sie Zeit und Geld sparen Durch das Testen von Prototypen können Sie Zeit und Geld sparen, da keine kostspielige Codierungszeit erforderlich ist und das Risiko ein Produkt oder eine Funktion zu veröffentlichen, die niemand möchte. Es hilft auch, Ihre Ideen auf interaktive Weise zu präsentieren , sodass Sie wertvolles Feedback von Interessenvertretern, potenziellen Kunden und anderen wichtigen Entscheidungsträgern erhalten wertvolles Feedback von Interessenvertretern, , bevor Sie zu viel Zeit und Geld in die Entwicklung investieren . Wie geht man am besten beim Prototyping vor? Im Allgemeinen haben wir zwei Arten von Prototyping. Nummer 1, Prototyping auf Papier. Dies ist eine kostengünstige und schnelle Möglichkeit Ideen schnell zu testen, jeden Bildschirm Ihrer Benutzeroberfläche auf Papier zu zeichnen und ihn dann als Grundlage für Benutzertests zu verwenden. Es eignet sich hervorragend, um zu Beginn des Designprozesses Feedback zu generieren , aber möglicherweise nicht immer realistisch genug, wenn es darum geht , reale Nutzungsszenarien zu simulieren. Nummer 2, digitales Prototyping. dieser Art des Prototyping werden Tools wie Figma oder ProtoPie verwendet , um digitale Modelle zu erstellen, die wie echte Benutzeroberflächen aussehen und sich auch so anfühlen. Sie sind viel realistischer als Papierprototypen. Sie erleichtern es, die Benutzerfreundlichkeit zu testen und Erkenntnisse von Benutzern zu gewinnen. In diesem Kurs konzentrieren wir uns auf digitales Prototyping, da es für jedes UI UX-Designprojekt unerlässlich ist . Im nächsten Video werden wir über die verschiedenen Arten von UI-Animationen sprechen . Wir sehen uns dort. 4. Arten von UI Animation: [MUSIK] In diesem Video werden wir über verschiedene Arten von UI-Animationen sprechen . Von der südländischen Animation , die Sie auf Instagram sehen, bis hin zu fortgeschrittenen Scroll-Animationen, die Sie auf der Website von Apple sehen, Animationen eine wichtige Rolle beim UI-Design, da sie nicht nur dazu beitragen, Aufmerksamkeit zu erregen und Benutzer durch die Benutzeroberfläche zu führen, sondern auch dazu beiträgt, ein einprägsameres und angenehmeres Benutzererlebnis zu schaffen . Im Allgemeinen gibt es vier Arten von UI-Animationen Laden und Fortschritt, Statusänderungen, Navigation und Mikrointeraktionen. Beginnen wir mit dem Laden und dem Fortschritt. Diese Art von Animation weist darauf hin, dass ein Prozess im Hintergrund abläuft , und sie kann eine gute Möglichkeit sein, den Benutzer zu motivieren und ihn darüber auf dem Laufenden zu halten , was passiert. Es kann verwendet werden, während der Benutzer auf eine Antwort vom Server wartet oder während er eine lange Aufgabe ausführt. Fahren wir nun mit der Zustandsänderungsanimation fort. Benutzeroberflächenelemente können mehrere Zustände haben, z. B. schweben, gedrückt, deaktiviert usw. Statusanimation zeigt an, wann ein Benutzer eine Aktion ausführt , z. B. den Mauszeiger über eine Schaltfläche bewegen oder auf eine Schaltfläche klicken. Betrachte diese Schaltfläche. Was Sie sehen, ist der Standardstatus. Aber sieh dir an, was passiert , wenn ich den Mauszeiger darüber schwebe. Siehst du, es wurde heller. Hier hatten wir also einen Übergang vom Standardzustand zum Hover-Zustand. Als nächstes haben wir den Navigationstyp. Navigationsanimationen werden verwendet, um Benutzern die Navigation durch die Benutzeroberfläche zu erleichtern. Es dient als visuelles Signal und trägt dazu bei, ein reibungsloseres Erlebnis beim Navigieren durch die verschiedenen Bereiche einer App oder einer Website zu schaffen ein reibungsloseres Erlebnis beim Navigieren . Schauen wir uns ein Beispiel an. Hier haben wir den App Store und wir haben hier ein paar Karten. Schau, was passiert , wenn ich auf eine Karte tippe. Siehst du, ich wurde auf die Detailseite weitergeleitet, aber der Übergang verlief so reibungslos. Stellen Sie sich vor, wir hatten diesen reibungslosen Übergang nicht. Wir könnten immer noch finden, wonach wir suchen, aber die Erfahrung wäre nicht so unterhaltsam. Schließlich haben wir Mikrointeraktionen. Mikrointeraktionsanimationen werden verwendet, um dem Benutzer Feedback zu bestimmten Aktionen zu geben. Es könnte wie eine Impulsanimation sein wenn Sie auf eine Schaltfläche klicken oder eine Ziehanimation, wenn Sie versuchen, ein Element aus einer Liste zu entfernen. Um Ihnen ein Beispiel zu geben, schauen wir uns diesen Button an. Wenn ich darauf klicke, ändert sich seine Form und wir sehen diesen Ladespinner und schließlich erscheint dieses Symbol. Diese Animationssequenz ist eine Mikrointeraktionsanimation. Jetzt, wo Sie die verschiedenen Arten von UI-Animationen besser verstehen , können wir beginnen, über den Prototyping-Prozess zu sprechen. Wir sehen uns im folgenden Video. 5. Grundlagen des Prototypings in Figma: In diesem Video werden wir anfangen, über den Prototyping-Prozess in Figma zu sprechen . Aber bevor wir unseren allerersten Prototyp in Figma erstellen, wollen wir uns ansehen, wie Animationen auf Computern erstellt werden. Was ist Animation im Grunde? Nun, es ist eine Reihe von Standbildern, die in schneller Abfolge nacheinander angezeigt werden , die uns von einem Punkt zum anderen führen und uns die Illusion von Bewegung vermitteln. Um diesen Animationseffekt zu erzielen, verwenden Computer sogenannte Keyframes, denen es sich im Grunde um Schnappschüsse verschiedener Momente oder Zustände im Animationsprozess handelt. In der Vergangenheit mussten Animatoren jedes dieser Frames manuell zeichnen, was ziemlich zeitaufwändig war. Aber jetzt können Keyframes schnell und einfach in der Designsoftware erstellt werden . Viele Animatoren zeichnen immer noch jedes Animationsbild, und das wird Stop-Motion-Technik genannt. Lassen Sie mich Ihnen ein Beispiel geben. Nehmen wir an, wir wollen dieses Auto in zwei Sekunden von Punkt A nach Punkt B bewegen . Das einzige, was wir tun müssen, ist, zwei Keyframes zu erstellen , um den Startpunkt und den Endpunkt anzugeben . Alle Keyframes dazwischen werden automatisch generiert. So einfach ist das. Ich nenne es gerne das Reisekonzept. Aber warum sprechen wir über all das? Weil das gleiche Konzept bei der Erstellung von Prototypen in Figma angewendet werden kann . Werfen wir einen Blick auf diese beiden Bildschirme. Was wir erreichen wollen, ist, diese Schaltfläche interaktiv zu gestalten , sodass ich, wenn ich darauf klicke , zur nächsten Seite weitergeleitet werde. Lassen Sie uns hier das Reisekonzept verwenden. Was brauchen wir? Wir brauchen den Startpunkt , der zufällig der linke Bildschirm ist. Wir benötigen auch den Endpunkt oder das Ziel, das ist der rechte Bildschirm. Schließlich müssen wir die Dauer dieses Übergangs angeben und wir sind fertig. Wenn ich jetzt auf diese Schaltfläche klicke, werde ich sofort zum Endpunkt weitergeleitet. Dies ist die einfachste Form der Animation. Wenn Sie dieses Reisekonzept wirklich verstehen, versichere ich Ihnen, dass Sie problemlos komplexe Prototypen erstellen können. Lassen Sie uns nun eine neue Designdatei in Figma erstellen und sehen, wie Sie einen einfachen Prototyp erstellen können. Da das Hauptziel dieses Kurses nicht darin besteht, Ihnen UI-Design beizubringen, habe ich die Designdateien bereits vorbereitet, sodass wir uns einfach auf den Prototyping-Prozess konzentrieren konnten. Um mit dem Kurs fortzufahren, müssen Sie das Projekt, das ich für Sie vorbereitet habe, herunterladen und in Figma importieren. Dazu müssen Sie diese Datei nur ziehen und in Ihr Figma-Dashboard ziehen. Öffnen wir es jetzt und schauen wir, was wir hier haben. Für jede Lektion gibt es hier eine Seite, und auf jeder Seite finden Sie die für diese Lektion erforderlichen Ressourcen. in dieser Projektdatei Wenn Sie in dieser Projektdatei zum Abschnitt Seiten gehen und diese Seite, Grundlagen des Prototypenbaus in Figma, öffnen , finden Sie diese Rahmen auf dieser Seite, die ich bereits für Sie vorbereitet habe. Hier unten haben wir noch einen Rahmen. Aber im Grunde werden wir diese Frames verwenden , um einen einfachen Prototyp zu erstellen. Eine Sache, die Sie bei der Erstellung von Prototypen in Figma beachten müssen , ist, dass Sie Prototypen mithilfe von Rahmen erstellen können . Sie können in Figma nicht einfach eine einfache Form mit einer anderen Form verbinden . Es wird nicht funktionieren, denn so erstellt Figma Prototypen. Wann immer Sie einen Prototyp erstellen möchten, müssen Sie sicherstellen, dass Sie einen Rahmen haben. Wie Sie sehen, habe ich hier einen Homepage-Frame und dieses Symbol in der Liste der Ebene zeigt an, dass es sich um einen Rahmen handelt, nicht um ein Rechteck. Beginnen wir mit der Erstellung eines sehr einfachen Prototyps, eines Navigationsprototyps. Es ist ziemlich beliebt. Stellen Sie sich vor, Sie entwerfen diese Website und hier haben Sie ein paar Karten, hier haben Sie diese Navigationsleiste und Sie haben diese Links, und Sie möchten diese Seiten miteinander verbinden. In diesem Fall können Sie einen Navigationsprototyp erstellen, und das ist ganz einfach. Das einzige, was Sie tun müssen, ist das Reisekonzept zu verwenden. Sie müssen Ihren Startpunkt und das Ziel kennen und eine Verbindung zwischen diesen beiden Punkten herstellen . Hier haben wir diese Schaltfläche „ Kontaktieren Sie uns“ direkt in der Navigationsleiste. Es sollte sich so verhalten. Wenn ich darauf klicke, sollte ich zu dieser Kontaktseite weitergeleitet werden. Lassen Sie uns diese einfache Interaktion erstellen. Zuerst müssen wir diese Schaltfläche als unseren Auslöser auswählen, da die meisten Interaktionen einen Trigger benötigen. Es gibt einige Ausnahmen, über die wir in den kommenden Videos sprechen werden , aber meistens benötigen wir einen Auslöser. In diesem Fall wird diese Schaltfläche „ Kontaktieren Sie uns“ umsetzbar sein. Das wird unser Auslöser sein. Ich wähle es hier aus. Dann gehe ich hier zum Tab Prototype. Sobald Sie zur Registerkarte Prototyp wechseln und den Mauszeiger über die Grenze dieses Elements bewegen, dieses Plussymbol angezeigt. diesem Plus-Symbol können Sie eine Verbindung zwischen dem Startpunkt und dem Ziel herstellen eine Verbindung zwischen dem . Jetzt werde ich die Ansicht verkleinern. Unser Ausgangspunkt hier ist dieser Homepage-Frame. Wir müssen nichts ändern und unser Ziel wird diese Kontaktseite sein. Solange diese Schaltfläche ausgewählt ist, bewege ich den Mauszeiger über diese Schaltfläche. Ich klicke auf dieses Plus-Symbol und ziehe es einfach so. Sobald Sie das getan haben, erscheint dieser Pfeil, mit dem Sie diese beiden Rahmen miteinander verbinden können . Wenn ich nun den Mauszeiger über diesen Rahmen bewege, sind sie, wie Sie sehen können, einfach so miteinander verbunden. Sobald ich es dort ablege, erscheint dieses Fenster mit den Interaktionsdetails. Ich werde es vorerst schließen. Wir werden in ein paar Minuten darauf zurückkommen. Wir haben gerade eine sehr einfache Interaktion erstellt. Wie Sie jetzt hier direkt neben dem Namen dieses Rahmens sehen können , haben wir diese Box und darin haben wir Flow One. Wir haben einen Flow erstellt, aber was ist ein Flow? Stellen Sie sich vor, Sie haben ein vollständiges Design, es könnte eine Website oder eine App sein, und Sie möchten alle Seiten miteinander verbinden. Normalerweise erstellen wir verschiedene Flows innerhalb unseres Prototyps, sodass wir bei Bedarf einen bestimmten Flow abspielen können . Ein Flow ist im Grunde ein Netzwerk von Frames, die miteinander verbunden sind. Stellen Sie sich vor, Sie haben eine App entworfen und möchten den Anmelde- und Registrierungsprozess prototypisieren . Sie möchten die gesamte User Journey für diesen bestimmten Flow prototypisch erstellen . In diesem Fall erstellen Sie einen Flow zum Erstellen eines Kontos zum An- und Abmelden. Für einen anderen Teil dieser App können Sie einen weiteren Flow erstellen, z. B. wenn der Benutzer auf ein Produkt klickt und er oder sie zur Detailseite dieses Produkts weitergeleitet werden soll . Es könnte ein völlig anderer Ablauf sein. Es ist innerhalb dieses Prototyps, aber Sie haben unterschiedliche Abläufe. Wenn Sie nur eine Vorschau eines bestimmten Ablaufs benötigen, müssen Sie nicht einfach am Startpunkt Ihres Prototyps beginnen und einfach alle Seiten durchgehen. Deshalb haben wir diese Flows. Jetzt klicke ich genau dort auf die Play-Schaltfläche und wir werden zur Vorschauseite weitergeleitet. Wenn ich nun den Mauszeiger über diese Schaltfläche bewege, ändert sich mein Cursor, wie Sie sehen können, zu diesem Zeigersymbol, was bedeutet, dass dieses Element jetzt umsetzbar ist. Es ist interaktiv. Hier, ich werde darauf klicken. Da haben wir es. Ich wurde auf die Kontaktseite weitergeleitet. Dies ist die einfachste Form eines Prototyps in Figma. Wir haben gerade diese Verbindung zwischen diesen beiden Seiten hergestellt. Aber was ist, wenn wir es auf die nächste Stufe bringen wollen? Was ist, wenn wir es animieren wollen? Denn im Moment gibt es hier keine Animation. Schau, wie du siehst, sobald ich darauf klicke, werde ich sofort zu dieser Kontaktseite weitergeleitet. Dazu müssen wir die Präferenzen unserer Interaktion anpassen. Hier haben wir diese Interaktion erstellt und jetzt ist es an der Zeit, die Einstellungen anzupassen. Dazu müssen Sie nur diese Schaltfläche auswählen , diese Schaltfläche „ Kontaktieren Sie uns“. Ordnung, stellen Sie sicher, dass es in der Ebenenliste ausgewählt ist . Wie Sie sehen können, haben wir hier auf der rechten Seite diesen Interaktionsbereich. Direkt darunter haben wir diese Klick-Interaktion , die wir gerade erstellt haben. Wenn ich einfach darauf klicke, erscheint dieses Fenster mit den Interaktionsdetails. Alternativ können Sie einfach auf diesen Pfeil klicken und dieses Fenster wird geöffnet. Das liegt ganz bei dir. Mal sehen, was wir hier haben. Ganz oben haben wir dieses Drop-down-Menü, in dem wir die Art des Triggers angeben können , nach dem wir suchen. Wir haben verschiedene Arten von Auslösern. Wir haben Beim Klicken, Beim Ziehen, Beim Schweben, Beim Drücken der Taste, Gamepad, Maus, Enter, Verlassen der Maus usw. Hier haben wir diesen Auslöser nach der Verzögerung , der standardmäßig nicht aktiviert ist. Wir werden in den kommenden Videos darüber sprechen . Mach dir keine Sorgen. Für diese Interaktion benötigen wir diesen On-Click-Trigger, da wir sicherstellen möchten, dass dieser Button anklickbar ist. Wir möchten den Trigger nicht auf Beim Schweben setzen , denn wenn ich ihn auf Beim Schweben setze, ich auf die Kontaktseite weitergeleitet, sobald ich den Mauszeiger über diese Schaltfläche werde ich auf die Kontaktseite weitergeleitet, sobald ich den Mauszeiger über diese Schaltfläche bewege, und das ist nicht, was ich möchte. Der Trigger ist Auf Klick. Hier haben wir die Art des Übergangs. Wie Sie sehen können, heißt es Navigate to, wir haben wieder verschiedene Arten von Übergängen. In den meisten Fällen müssen wir es auf Navigate to setzen, da wir vom Startpunkt zum Ziel gebracht werden möchten und, wie Sie sehen können, das Ziel angegeben ist . Kontaktieren Sie uns. Sie können es anpassen, wenn Sie möchten, aber da wir diese Schaltfläche mit dieser Kontaktseite verbunden haben, haben wir hier Kontakt. So weit, so gut. Hier unten haben wir diesen Animationsbereich, der sehr wichtig ist. In diesem Abschnitt können Sie die Art der Animation anpassen, nach der Sie suchen. Hier ist es standardmäßig auf Instant eingestellt. Deshalb wurde ich, als ich hier auf die Schaltfläche „Kontakt“ geklickt habe, sofort auf diese Seite weitergeleitet, da die Art der Animation hier auf „Sofort“ eingestellt ist. Wenn ich es öffne, können Sie sehen, dass wir verschiedene Arten von Animationen haben. Wir haben Dissolve, wir haben Smart Animate, Move In, Move Out, Push, Sliding In und Slide Out. Nun, ändern wir es für eine Sekunde so, dass es sich auflöst. Sobald ich das mache, erscheinen diese beiden Optionen. Hier haben wir die Lockerungsmethode oder die Geschwindigkeit unserer Animation. Wir werden in ein paar Minuten darüber sprechen. Moment werde ich es nicht ändern, und hier haben wir die Dauer. Wenn es um die Erstellung von Mikrointeraktionen geht, ist die Einheit normalerweise Millisekunden, also haben wir hier 300 Millisekunden. Wenn Sie möchten, können Sie es erhöhen oder verringern. Wenn ich möchte, dass dieser Übergang in genau einer Sekunde erfolgt, muss ich diesen Wert einfach so auf 1.000 Millisekunden erhöhen . Nun, wenn ich diesen Flow noch einmal spiele, schau, was passiert. Ich klicke auf diese Schaltfläche „Kontaktiere uns “ und los geht's. Jetzt sehen wir diese Auflösungsanimation, und sie ist in genau einer Sekunde passiert. Die Dauer dieses Übergangs betrug eine Sekunde. Je nachdem, wie schnell oder wie langsam Ihre Animation sein soll, können Sie diesen Wert hier anpassen. Lassen Sie uns nun die Art der Animation hier ändern, um fortzufahren. Sobald ich das mache, haben wir, wie Sie sehen können, diese Pfeile. Hier können Sie die Richtung dieser Animation angeben. Hier in diesem Fenster können Sie eine Vorschau Ihrer Animation anzeigen. Wie Sie sehen können, wird angezeigt, dass B von rechts nach links in den A-Bildschirm wechselt . Sie können es so einstellen, von links nach rechts, von oben nach unten und von unten nach oben. Ich lasse es so, wie es ist, und wenn ich jetzt einfach auf diese Schaltfläche „Kontakt“ klicke, schau, was passiert. Da haben wir es. Diese zweite Seite wird auf unsere erste Seite verschoben. Wir können es auch so einstellen, dass es sich bewegt , drückt, rutscht und herausrutscht, aber das ist nicht so wichtig. Sie können weitermachen und sie ausprobieren. Lassen Sie uns nun eine weitere einfache Interaktion erstellen. Wie Sie sehen können, haben wir hier diese Projektseite und hier auf der Homepage haben wir diese aktuellen Projekte. Stellen Sie sich vor, Sie möchten diese Karte, dieses Projekt, eine Karte interaktiv machen . Dazu müssen Sie, wie Sie wissen, nur diese Gruppe auswählen, Projekt 1, und während Sie sich auf der Registerkarte Prototyp befinden, müssen Sie einfach eine einfache Interaktion erstellen und sie wie folgt mit Ihrer Projektseite verbinden. Auch hier müssen Sie den Trigger angeben. Ich werde es so einstellen, dass es nicht angeklickt wird. Das ist in Ordnung. Der Typ wird Instanz sein. Ich werde es jetzt nicht animieren. Hier, wenn ich jetzt einfach auf diese Karte klicke, wie Sie sehen können, ist sie interaktiv. Bisher hast du gelernt, wie man eine einfache Verbindung zwischen zwei verschiedenen Frames herstellt. Jetzt werden wir über eine weitere Funktion von Figma sprechen, nämlich diese intelligente Animationsoption. Es ist sehr mächtig. Es ermöglicht Ihnen, komplexe Mikrointeraktionen in Sekundenschnelle zu erstellen . Lassen Sie uns weitermachen und sehen, wie es funktioniert. Nun, ich werde hier nach unten scrollen und wie Sie sehen können, habe ich diesen Rahmen bereits vorbereitet. Im Inneren haben wir diesen Kreis, und wir haben auch zwei Textebenen, A und B. Hier ist nichts Besonderes. Nun, lassen Sie uns sehen, was wir erreichen müssen. Stellen Sie sich vor, Sie möchten diesen Kreis von Punkt A nach Punkt B verschieben . Wie sollen wir das machen? Nun, denken Sie nur an das Reisekonzept, über das wir zuvor gesprochen haben. Für jede Animation benötigen Sie den Startpunkt und den Endpunkt, und schließlich müssen Sie sie verbinden und die Dauer oder sagen wir die Geschwindigkeit Ihrer Animation angeben . Nun, hier haben wir unseren Ausgangspunkt. Dieser Kreis befindet sich genau hier bei Punkt A. Jetzt brauchen wir das Ziel. Dafür wähle ich diesen Frame aus, diesen intelligenten animierten Frame, und ich werde ihn duplizieren. Drücken Sie Strg D oder Command D. Hier haben wir jetzt zwei identische Frames. In diesem zweiten Frame auf diesem duplizierten Frame wähle ich diesen Kreis und verschiebe ihn zu Punkt B. Halten Sie die Umschalttaste gedrückt und bewegen Sie ihn einfach so auf die rechte Seite. Jetzt haben wir unseren Startpunkt und unser Ziel, unseren Endpunkt, und als Nächstes müssen wir diese beiden Frames einfach miteinander verbinden. Aber was sollte der Auslöser dieser Animation sein? Vorerst wähle ich diesen Kreis als unseren Auslöser aus. Sobald ich darauf klicke, sollte es zu Punkt B verschoben werden. Jetzt wähle ich es aus und gehe zum Prototyp-Tab und verbinde diese beiden Frames miteinander. Um es leicht zu verstehen, wähle ich diesen Frame hier aus und benenne ihn in der Liste der Ebene als Startpunkt in A um und dieser erhält den Namen B. Wir haben diese Interaktion erstellt. Der Trigger ist Unclick, das ist in Ordnung, aber der Animationstyp ist auf Instant eingestellt. Ich werde es auf Smart Animate ändern. Diese intelligente Animation funktioniert so , als ob sie Ihren Startpunkt und Ihr Ziel nimmt und die Keyframes dazwischen automatisch erstellt . Sie müssen sich keine Gedanken darüber machen, was dazwischen passiert. Du musst Figma nur sagen, das wird unser Ausgangspunkt sein und das wird mein Ziel sein. Führe diesen Kreis zum Beispiel in einer Sekunde oder weniger zu diesem Punkt . Hier werde ich die Dauer nicht ändern, das ist in Ordnung. Jetzt haben wir den zweiten Flow. Ich klicke auf Play und lass uns sehen, wie es funktioniert. Wie Sie hier sehen können, haben Sie eine Liste von Flows, sodass Sie problemlos zwischen diesen Flows wechseln können , wenn Sie möchten. Hier, wenn ich auf diesen Kreis klicke, was passiert? Los geht's, es hat sich von Punkt A nach Punkt B bewegt . Es funktioniert perfekt. Stellen Sie sich nun vor, Sie möchten diese Animation schneller machen. Dazu müssen Sie nur Ihre Interaktion auswählen und diese Dauer hier anpassen. Ich werde diesen Betrag auf 500 Millisekunden reduzieren. Lass es uns versuchen. Da haben wir es. Es ist jetzt viel schneller. Es gibt einen wichtigen Punkt , den Sie bei dieser intelligenten animierten Funktion beachten sollten . Nun, wenn Sie Smart Animate verwenden, ist der Name Ihrer Ebenen wichtig. Hier ist der Grund, warum wir hier auf diesem A-Rahmen, wie Sie sehen können, den Kreis, wir haben diese beiden Textebenen. Auf dieser zweiten Seite haben wir auch die Kreise A und B. Deshalb funktioniert die Animation einwandfrei. Wenn ich den Namen dieses Kreises auf diesem zweiten Bildschirm auf diesem B-Frame in etwas anderes ändere, ändern wir ihn in, sagen wir, Kreis 2. Jetzt haben wir gerade die Verbindung zwischen diesen beiden Elementen unterbrochen. Figma denkt jetzt, dass diese beiden Kreise zwei separate Kreise sind, und das wollen wir nicht. Schau, was passiert, wenn ich diese Animation jetzt spiele. Ich werde darauf klicken. Siehst du, wir haben diese Animation nicht mehr, weil wir gerade die Verbindung zwischen diesen beiden Bildschirmen unterbrochen haben. Sie müssen diesen Punkt im Hinterkopf behalten. Viele Menschen machen diesen Fehler. Sie erstellen ihren Startpunkt, sie erstellen ihren Endpunkt und sie verbinden alles richtig, aber die Animation funktioniert nicht. liegt daran, dass sie auf diesen beiden Bildschirmen nicht dieselben Ebenennamen haben . Bitte beachten Sie diesen Punkt, er ist sehr wichtig. Jetzt, wo Sie gelernt haben, wie der Smart Animate funktioniert. Lassen Sie uns hier über die Lockerungsmethode sprechen, diese Option, die wir übersprungen haben. Wenn ich dieses Drop-down-Menü öffne, haben wir, wie Sie sehen können , viele verschiedene Optionen und diese sind sehr wichtig, insbesondere wenn Sie eine realistische Mikrointeraktion erstellen möchten . Aber warum sind diese so wichtig? Nun, standardmäßig ist diese lineare Option wahrscheinlich für Sie ausgewählt. Nun, diese Lockerungsmethoden definieren die Beschleunigung Ihrer Animation, aber was bedeutet das? Es ist so verwirrend. Lass mich das erklären. Wenn ich es hier auf linear stelle und jetzt spiele, klicke ich jetzt auf diesen Kreis. Wir haben vergessen, den Namen hier zu ändern, also lass mich diese beiden hier entfernen, einfach so, und ich werde noch einmal darauf klicken. Da haben wir es. Ich bin mir nicht sicher, ob du es bemerkt hast oder nicht, aber jetzt hatten wir eine lineare Bewegung. Was heißt das? Das bedeutet, dass die Geschwindigkeit dieser Animation konstant ist und nicht realistisch ist , da sich Objekte nicht mit einer konstanten Geschwindigkeit bewegen. Deshalb haben wir all diese anderen Optionen. Wenn ich nur diese Interaktion auswähle, haben wir hier leichtes Ein- und Aussteigen, ein leichtes Ein- und Aussteigen usw. Hier haben wir sanftes, schnelles, federndes, langsames, benutzerdefiniertes Springen. Diese verschiedenen Lockerungsmethoden ermöglichen es uns, unsere Animation viel realistischer aussehen zu lassen . Wenn ich diese Lockerungsmethode jetzt auf einfach ändere, wird diese Animation wie folgt abgespielt Sie beginnt mit einer niedrigeren Geschwindigkeit und wird dann , wenn sie sich dem Ziel nähert. Einfach so, siehst du, es ist viel realistischer, nicht wahr? Wenn Sie die Lockerungsmethode von Ease In auf Ease Out ändern , wird das Gegenteil erreicht. Es fängt schnell an und wird dann langsamer. Lass es uns versuchen. Da haben wir es. Natürlich können Sie je nach Anwendungsfall jeden einzelnen von ihnen ausprobieren . Sie können diese Lockerungsmethode auf eine beliebige Lockerungsmethode ändern . In den kommenden Videos werde ich einige davon verwenden , um Ihnen zu zeigen, wie Sie sie richtig einsetzen und Ihre Mikrointeraktionen realistischer aussehen lassen können richtig einsetzen und . Wenn Sie jedoch die Definition jeder einzelnen dieser Lockerungsmethoden erhalten möchten , können Sie die Figma-Website besuchen. Hier haben sie einen Blogbeitrag, in dem sie jede einzelne dieser Lockerungsmethoden erklärt haben. Wie Sie sehen können, haben wir diese lineare Bewegung. Wir haben es leicht, einfach so. Dann haben wir Ease Out und so weiter und so weiter. Sie können sich diese Seite ansehen, wenn Sie möchten. Ich füge den Link als Referenz in den Ressourcenbereich ein, und hier dreht sich im Grunde alles um intelligente Animationen. In den kommenden Videos erfahren Sie, wie Sie diese intelligente Animation richtig einsetzen , um komplexe Animationen zu erstellen. Wir sehen uns im nächsten Video. 6. Animierte wie Taste: [MUSIK] Willkommen zurück. In diesem Video werden wir diesen animierten Like-Button in Figma erstellen. Das werden wir erreichen. Ich möchte dieses Symbol animieren. Wenn ich darauf klicke, wird diese Animation genau so abgespielt . Lass uns darauf eingehen. In der Projektdatei, Sie bereits nach Figma importiert haben, möchte ich, dass Sie diese Seite finden : Animated Like Button. Im Inneren finden Sie zwei verschiedene Symbole. Hier haben wir zwei Arten von Symbolen: Wir haben ein Gliederungssymbol und ein solides Symbol. Wir benötigen diese beiden Symbole für diese Animation. Warum? Weil wir zwei verschiedene Staaten brauchen. Lassen Sie uns fortfahren und einen Rahmen erstellen. Ich drücke A auf meiner Tastatur, um das Rahmenwerkzeug auszuwählen. Hier erstelle ich einen Rahmen in benutzerdefinierter Größe, so etwas sollte funktionieren. Lassen Sie mich diesen Rahmen als Ausgangspunkt in A umbenennen . Ich werde weitermachen und dieses Symbol duplizieren und es in diesen Rahmen bringen. Achte darauf, dass es in deinem Rahmen platziert ist , wenn du dir deine Ebenenliste ansiehst. Ich werde weitermachen und es einfach so an der Mitte im Ausrichtungsbereich ausrichten . Das wird unser Ausgangspunkt sein. Wenn Sie nun über das Reisekonzept nachdenken, über das wir zuvor gesprochen haben, wissen Sie, dass wir auch ein Ziel benötigen. Für das Ziel wähle ich diesen Rahmen aus. Ich drücke Strg D oder Befehl D, um es zu duplizieren. Hier im Ziel benötigen wir dieses durchgehende Symbol. Ich werde es duplizieren und gleich hierher bringen. Ich werde sicherstellen, dass es direkt über diesem Gliederungssymbol in der Liste der Ebene platziert ist. In der Liste deiner Ebenen musst du so etwas haben. Herzförmiger Festkörper, der sich über dem umrissenen Herzen befindet. Ich nenne diesen Rahmen B. Wir haben unseren Ausgangspunkt, wir haben auch unser Ziel. Hier ist das Ding. Wenn ich dieses Symbol auswähle und es interaktiv mache, bekommen wir diese Animation nicht einfach so. Warum? Denn hier in unserem Startpunkt haben wir dieses solide Symbol nicht. Wir haben nur dieses Gliederungssymbol. Lass mich dir zeigen, wie es funktioniert. Wenn ich dieses Gliederungssymbol einfach interaktiv mache, wähle ich es aus und gehe hier zum Tab Prototyp. Ich werde hier mit der Maus über diese Grenze und versuchen, diese beiden Frames einfach so zu verbinden. Sobald dieses Fenster mit den Interaktionsdetails angezeigt wird, stelle ich sicher, dass der Trigger auf Beim Klicken eingestellt ist. Weil ich möchte, dass dieses Symbol anklickbar ist. Hier heißt es navigiere zu. Hier haben wir unseren Zielrahmen B. Das ist in Ordnung. Der Animationstyp sollte Smart Animate sein. Aber hier ist die Sache, wenn ich einfach weitermache und diesen Flow spiele, schau, was passiert. Lass mich es ein bisschen größer machen. Ich werde dafür sorgen, dass es den Bildschirm einfach so ausfüllt . Ich werde darauf klicken. Du siehst, dass es einfach einblendet. Weil wir diese feste Schicht nicht als Ausgangspunkt haben . Wie können wir das beheben? Um das zuerst zu beheben, müssen wir einfach das durchgezogene Symbol nehmen, es kopieren C drücken. Ich wähle diesen Rahmen aus und füge ihn hier ein, drücke Strg V oder Befehl V. Aber wir möchten nicht, dass er auf dieser Seite sichtbar ist. Was können wir tun? Wir müssen es irgendwie verschwinden lassen. Wenn Sie sich diese Animation hier ansehen, sehen Sie, dass unser solides Symbol schnell vergrößert wird und wir dann diesen Status sehen. Ich wähle hier dieses solide Symbol aus. Ich drücke K auf meiner Tastatur, um das Skalierungswerkzeug auszuwählen. Wenn ich zurück zum Designinspektor gehe, sehen Sie, dass dieser Skalenabschnitt hier erscheint. Ich setze die Skala hier auf 0,01, um sicherzustellen, dass dieses durchgehende Symbol nicht sichtbar ist. Sie müssen sicherstellen, dass die Namen Ihrer Ebenen auf beiden Seiten identisch sind . Siehst du, hier habe ich ein solides Herz, hier habe ich auch ein solides Herz. Herz umrissen und Herz umrissen. Das ist so wichtig. Sonst kann Figma es nicht herausfinden. Schauen wir es uns jetzt an und sehen, wie es funktioniert. Ich werde darauf klicken, soweit so gut. Wir haben unser solides Symbol, das einfach so skaliert. Aber hier haben wir ein paar Probleme. Erstens ist es so langsam. Wenn es um Mikrointeraktionen geht, kommt es auf Geschwindigkeit an. Andernfalls werden Sie, anstatt ein gutes interaktives Element zu erstellen, ein gutes interaktives Element zu erstellen, eine schlechte Benutzererfahrung da niemand darauf warten möchte , dass dieses Symbol langsam animiert wird. Es sollte schnell gehen. Lass uns zuerst die Geschwindigkeit festlegen. Ich wähle das aus, gehe zum Prototyp. Ich klicke hier auf meine Interaktion und lasse mich die Geschwindigkeit hier auf 100 Millisekunden statt 300 Millisekunden ändern die Geschwindigkeit hier auf . Versuchen wir es noch einmal. Viel, viel besser. Aber wenn Sie sich dieses Symbol ansehen , das ich Ihnen bereits gezeigt habe, gibt es einen Unterschied zwischen diesem Symbol und dem , das wir gerade erstellt haben. Wenn Sie genug aufpassen, können Sie sehen, dass dieses Symbol nach oben und dann ein wenig nach unten skaliert wird , um diesen Bounce-Effekt zu erzielen. Wie können wir das schaffen? Nun, um das zu erreichen, könnten Sie sagen, dass wir hier die Geschwindigkeit ändern können . Anstatt nachzulassen. Sie können sagen, wir können es auf Hüpfkraft stellen. Mal sehen, ob es funktioniert. Sie sehen das Problem. Wir bekommen unseren Bounce-Effekt. Wie Sie jedoch sehen, wiederholt sich dieser Bounce-Effekt einige Male schnell. Das wollen wir nicht. Ich möchte nicht, dass es sich mehrmals wiederholt. Das möchte ich erreichen. Wenn ich darauf klicke, wird es einfach nach oben und nach unten skaliert. Diese Gleichgewichtseffekte können wir hier nicht wirklich nutzen. Ich werde es zurückstellen, um es etwas ruhiger zu machen. Was wir tun können, ist das. Wir könnten hier eine dritte Seite haben, einen dritten Staat. Ich wähle diesen B-Frame aus, dupliziere ihn , drücke Strg D oder Command D und nenne ihn C. Du musst sicherstellen, dass es keine Verbindung zwischen dieser Seite und dieser C-Seite gibt . Wir wollen von A nach B gehen. Dann werde ich hier auf dem B-Frame dieses solide Symbol vergrößern. Ich wähle dieses durchgehende Symbol aus, drücke K und skaliere es hier einfach, vielleicht auf 54 oder so. Dann werden wir schnell von B nach C gehen. Wir klicken darauf, unser durchgezogenes Symbol vergrößert und die Dimension wird auf 54 mal 54 geändert. Dann gehen wir von hier nach hier und es skaliert auf 44 44 Pixel, unsere ursprüngliche Dimension. Damit dies ordnungsgemäß geschieht , benötigen wir einen After Delay-Trigger. Dazu wähle ich den gesamten Rahmen innerhalb dieses Symbols aus. Ich gehe zum Prototyp und verbinde dann diese beiden Rahmen einfach so miteinander. Hier ist der Trigger standardmäßig auf Bei Klick gesetzt. Ich ändere es auf Verspätung. Es sollte Smart Animate und die Dauer wird 100 Millisekunden betragen. Jetzt sollte es richtig funktionieren. Lass es uns versuchen. Ich werde darauf klicken. Hier haben wir ein Problem. Das Problem ist das nach der Verzögerung. Wir müssen es auf eine Millisekunde setzen , weil wir sofort von diesem Zustand in diesen Zustand wechseln wollen . Wir brauchen keine Verzögerung dazwischen. Versuchen wir es noch einmal. Da haben wir es, aber es ist immer noch zu langsam, findest du nicht? Lass uns das reparieren. Ich wähle dieses Gliederungselement hier aus, gehe zu Interaktionen und klicke darauf. Hier haben wir 300 Millisekunden. Ich werde es auf 100 Millisekunden reduzieren. Mal sehen, ob es gut funktioniert. Jetzt funktioniert es einwandfrei. Aber ich möchte, dass es in beide Richtungen funktioniert. Wenn ich auf dieses durchgehende Symbol klicke, möchte ich zu meinem Startpunkt zurückkehren können. Ich wähle diesen Festkörper aus und wir müssen nur eine Verbindung von C nach A herstellen. Es wird On click, Smart Animate und 100 Millisekunden sein. Ich denke, wir sind jetzt fertig. Ich werde darauf klicken. Da haben wir es. Es funktioniert einwandfrei. So können Sie im Grunde einen animierten Like-Button erstellen. Aber hier ist die Sache. Wir haben dieses Symbol interaktiv gemacht. Aber wie können wir dieses interaktive Element wiederverwenden? Denn wenn Sie diesen Ansatz verwenden möchten, wir es jedes Mal, wenn wir dieses Symbol verwenden möchten, müssen wir es jedes Mal, wenn wir dieses Symbol verwenden möchten, jedes Mal, wenn wir es in unserem Projekt verwenden möchten, immer wieder animieren , was sehr mühsam und zeitaufwändig ist und keinen Sinn ergibt. Stattdessen müssen wir einen Weg finden, es einmal interaktiv zu machen und dieses interaktive Element mehrfach wiederverwenden zu können. Dazu müssen wir sogenannte interaktive Komponenten verwenden . Wenn Sie nichts über Komponenten, Varianz und interaktive Komponenten wissen , machen Sie sich keine Sorgen. Im nächsten Video zeige ich Ihnen, welche Varianten gibt und wie Sie Ihre Komponenten interaktiv gestalten können. Wir sehen uns im nächsten. 7. Varianten und interaktive Komponenten: [MUSIK] Da sind wir. Ich habe eine neue Designdatei erstellt und werde fortfahren und eine Schaltfläche erstellen. Aber bevor wir unseren Button erstellen, werde ich erwähnen, dass wir tatsächlich zwei verschiedene Arten von Varianz haben . Wir haben eindimensionale Varianz und zweidimensionale Varianten. Wir beginnen mit Beispielen für eindimensionale Varianten. Wenn Sie sich dann an Varianten gewöhnen, werden wir über die fortgeschritteneren und zweidimensionalen Varianten sprechen auch über die fortgeschritteneren und zweidimensionalen Varianten sprechen. Um eine Schaltfläche zu erstellen, können Sie dazu neigen, ein Rechteck zu erstellen, dann eine Bezeichnung hinzuzufügen und es zu formatieren. Das ist in Ordnung. Es gibt jedoch einen besseren Weg, dies zu tun, und zwar indem Sie einen Rahmen erstellen. Zuerst drücke ich T auf meiner Tastatur, um das Textwerkzeug auszuwählen. Ich werde gleich hier eine Textebene erstellen. Lass mich hineinzoomen und ich werde Button schreiben. Lassen Sie mich zum Textabschnitt auf der rechten Seite gehen. Hier werde ich das Gewicht auf wahrscheinlich mittel und eine Größe auf 17 Punkte einstellen wahrscheinlich mittel und eine Größe und hier kann ich die Höhe vorerst auf 100 Prozent einstellen . Ich werde die Ausrichtung ändern, um sie in der Mitte auszurichten. Jetzt, wo unser Label fertig ist, werde ich ein automatisches Layout hinzufügen, um es responsiv zu gestalten. Dazu drücke ich Shift und A auf meiner Tastatur. Sobald ich das mache, wird dieses Etikett in einen Rahmen gesteckt. Wie Sie hier sehen können, heißt es Frame 1 und hier haben wir diesen Frame 1 auch in der Liste der Ebene. Nun, im Bereich Autolayout auf der rechten Seite ändere ich die Ausrichtung auf die linke Mitte. Auch hier können wir die horizontale Polsterung, die vertikale Polsterung und auch den Abstand zwischen den Elementen anpassen . Lassen Sie mich zunächst fortfahren und diesem Frame ein Feld hinzufügen. Ich füge hier ein Feld hinzu und lasse mich die Farbe so anpassen , dass sie etwa lila ist. Vielleicht sollte so etwas funktionieren, nett. Dann ändere ich hier die Farbe der Textebenen. Ich werde es auf Weiß stellen, um einen besseren Kontrast zu haben. Schließlich wähle ich meinen Rahmen aus und erhöhe hier den Eckenradius, um ihn etwas abgerundet zu machen, wahrscheinlich etwa vier Pixel. Lassen Sie mich diesen Rahmen in Button umbenennen. Perfekt. Lassen Sie uns nun die Polsterung hier anpassen. Ich werde die vertikale Polsterung auf 16 Pixel und die horizontale Polsterung auf 32 Pixel einstellen . Unser Button ist fertig und vollständig responsiv. Ich kann weitermachen und das Etikett anpassen. Ich werde es jedoch vorerst so lassen, wie es ist. Stellen Sie sich nun vor, Sie möchten verschiedene Zustände für diese Schaltfläche erstellen und alles organisieren. Um das zu tun, um diese Schaltfläche wiederverwenden zu können , müssen wir sie zunächst in eine Komponente konvertieren. Dazu müssen wir es auswählen und können hier einfach so auf dieses Komponentensymbol klicken. Wie Sie nun sehen können, wurde der Rahmen, diese Grenze lila. Hier können Sie in der Ebenenliste sehen, wir auch dieses Symbol mit vier Diamanten haben, was darauf hinweist, dass es sich jetzt um eine Komponente handelt. Sie können ganz einfach zu Assets gehen und Ihre lokalen Komponenten finden. Wir können Instanzen dieser Komponente wiederverwenden. Aber wie können wir Varianten erstellen? Nun, es gibt viele Möglichkeiten, Varianten zu erstellen. Zunächst können Sie verschiedene Komponenten erstellen, sie benennen und sie dann alle in einen Komponentensatz umwandeln. Oder Sie wählen hier einfach Ihre erste Komponente aus und klicken Sie einfach auf diese Schaltfläche Variante hinzufügen direkt in der Werkzeugleiste. Lassen Sie mich das machen. Sobald ich auf diese Schaltfläche geklickt habe, können Sie sehen, dass dieser Komponentensatz erstellt wurde. Hier haben wir diese gestrichelte Grenze , die darauf hinweist, dass es sich um einen Komponentensatz handelt. Hier in der Ebenenliste können Sie sehen, dass der Name unseres Komponentensets Button lautet. Im Inneren haben wir zwei Varianten. Wir haben Standard. Dies ist unsere Basisvariante. Außerdem haben wir Variante 2. Es wurde für uns dupliziert, weil wir hier auf diese Schaltfläche geklickt haben , Variante. Jetzt können wir das Design dieser zweiten Variante anpassen . Aber bevor wir das tun, werde ich Ihnen erklären, wie Varianten funktionieren. Nun, ein Komponentensatz hat, wenn Sie ihn nur auswählen, unterschiedliche Eigenschaften. Wenn Sie sich nur den richtigen Inspektor ansehen , können Sie diesen Abschnitt mit den Eigenschaften sehen, und hier haben wir Eigenschaft 1. Wenn Sie möchten, können Sie es umbenennen, und das werden wir tun, um alles zu organisieren. Varianz funktioniert jedoch so, dass Sie verschiedene Eigenschaften erstellen und dann unterschiedliche Werte für diese Eigenschaften festlegen . Nehmen wir an, Sie möchten verschiedene Zustände für diese Schaltfläche erstellen . Standard, hover, gedrückt, deaktiviert usw. Der Name unserer Immobilie wird State sein. Nachdem mein Komponentensatz ausgewählt ist, gehe ich hier zu diesen Eigenschaften über. Wir haben bereits diese Immobilie 1. Figma hat es bereits für uns erstellt. Ich doppelklicke darauf und benenne es in State um. Der Name der Immobilie ist Staat. Wenn ich hier einfach auf dieses Symbol klicke, Eigenschaft bearbeiten, können Sie sehen, dass der Name dieser Eigenschaft state ist und wir zwei Werte darin haben, Standard hier, den ersten und Variante 2. Eine Eigenschaft kann mehrere Werte haben, zum Beispiel default, hover, pressed, disabled usw. Nun müssen wir, wie Sie sich vorstellen können , unsere zweite Variante auswählen. Hier werde ich es statt Variante 2 einfach so in Pressed umbenennen. Ich werde weitermachen und die Farbe anpassen. Ich füge eine Overlay-Ebene hinzu. Die Opazität ist auf 20 Prozent eingestellt. Das ist in Ordnung. Jetzt haben wir zwei verschiedene Varianten. Aber was ist, wenn Sie mehr hinzufügen möchten? Nun, Sie können einfach dieses Komponentenset auswählen und hier auf diese Plus-Schaltfläche klicken. Oder Sie können eine dieser Varianten auswählen und auf Ihrer Tastatur auf Command D oder Control D drücken auf Ihrer Tastatur auf Command D oder Control D sie zu duplizieren. Das liegt an dir. Jetzt haben wir State 3. Siehst du, ich wähle es aus und passe seinen Wert auf Hover an. Dann lass mich weitermachen und das Feld hier wechseln. Ich werde die Farbe dieser Overlay-Ebene auf Weiß ändern . Das wird unser Schwebezustand sein. Ich werde noch einen erstellen. Ich drücke Strg D, um zu duplizieren. Hier werde ich diesmal eine deaktivierte Variante erstellen. Ich wähle es aus. Lassen Sie mich weitermachen und den Wert auf deaktiviert ändern. Dann werde ich weitermachen und die Farbe auf wahrscheinlich hellgrau ändern , so etwas sollte funktionieren. Wenn ich nun diesen Komponentensatz auswähle und auf dieses Symbol klicke, können Sie sehen, dass dieser Eigenschaftsstatus vier verschiedene Werte hat: Standard, gedrückt, Hover und Deaktiviert. Aber wie können Sie diese Varianten nutzen? Das ist so einfach. Genau wie bei der Verwendung einer Komponente können Sie einfach zu Assets gehen. Von hier aus erstellen Sie einfach so eine Instanz Ihrer Komponente. Hier haben wir unseren Button und auf der rechten Seite können Sie sehen, dass wir diese staatliche Eigenschaft haben, und hier haben wir dieses Drop-Menü. Wir können es auf gedrückt ändern, wir können es auf Hover oder Deaktiviert ändern. Können Sie sehen, wie einfach es ist , Varianten in Figma zu erstellen? Das ist großartig. Das war ein Beispiel für eindimensionale Varianten. Aber wie kann man multidimensionale Varianten oder zweidimensionale Varianten erstellen ? Ich werde weitermachen und diese Komponenten auf die linke Seite verschieben und sie ein bisschen vergrößern. Stellen wir uns nun vor, Sie möchten eine neue Version dieser Schaltflächen erstellen . Dieses Mal müssen Sie ihm jedoch möglicherweise ein Symbol hinzufügen. Was ich tun werde, ist das. Ich wähle sie alle aus. Natürlich kannst du das eins nach dem anderen machen, aber ich bevorzuge es, sie alle auszuwählen. Dann dupliziere ich sie, drücke Strg D oder Command D und verschiebe sie einfach hierher. Jetzt brauchen wir eine Ikone. Sie können jedes gewünschte Symbol verwenden. Ich werde weitermachen und das Content-Real-Plug-In hier ausführen. Lass mich das schnell machen. Mit diesem Plug-in füge ich meinem Projekt hier ein paar Symbole hinzu. Lass mich zu Icon, Feld gehen. Ich finde, dieses Symbol sieht gut aus. Ich werde es hier per Drag & Drop ziehen. ziehe ich ein weiteres Symbol per Drag & Drop Für unser nächstes Beispiel ziehe ich ein weiteres Symbol per Drag & Drop. Lass mich einfach nach einer guten Ikone suchen. Suchen wir nach dem Home-Symbol, dieses, es sieht sehr gut aus. Großartig. Stellen wir uns nun vor, Sie möchten dieser Schaltfläche ein Symbol hinzufügen. Da wir diese Schaltfläche mit automatischem Layout erstellt haben, können wir diesen Rahmen einfach auswählen und ihn einfach per Drag & Drop in unsere Schaltfläche ziehen. Aber ich werde weitermachen und es zuerst duplizieren weil ich diese Symbole für unser nächstes Beispiel benötige , und dann werde ich es hier ziehen und dort ablegen. Sobald ich das mache, können Sie sehen, dass auch die Höhe meiner Knöpfe angepasst wurde. Das will ich nicht, ich möchte nur, dass dieser Button horizontal wächst. Um dieses Problem zu beheben, müssen wir diese Schaltfläche auswählen und von hier aus ändere ich die Option zur vertikalen Größenänderung auf feste Höhe. Wenn ich dieser Schaltfläche mehr Komponenten oder mehr Elemente hinzufüge, wächst sie auf diese Weise Schaltfläche mehr Komponenten oder mehr Elemente hinzufüge, wächst sie auf diese nur horizontal, nicht vertikal, und genau das brauche ich. Wenn ich es nun einfach in dieses Muster ziehe und dort ablege , wie Sie sehen können, bleibt die Höhe gleich, und lassen Sie uns dasselbe für diese Schaltflächen tun. Ich wähle sie alle ändere diese Option auf feste Höhe. Wählen wir nun dieses Symbol aus, ändern wir seine Farbe in Weiß Außerdem wähle ich diese Schaltfläche aus und setze diesen Abstand zwischen den Elementen auf acht Pixel. Ich kann all diese Tasten auswählen und diesen Wert auf acht setzen. Jetzt wähle ich dieses Symbol aus, kopiere es, drücke „Strg“ „C“ oder „Command“ „C“. Wählen Sie diese Schaltfläche, halten Sie die Umschalttaste gedrückt und wählen Sie diese beiden aus. Drücken Sie dann „Strg“ „V“ oder „Command“ „V“. Wir müssen jedoch ihre Position anpassen. Während sie ausgewählt sind, drücke ich die linke Pfeiltaste auf meiner Tastatur, um sie auf die andere Seite meines Labels zu legen . Wie Sie sehen können, sind meine Tasten bereit. Wir sind jedoch noch nicht fertig. Wir müssen eine weitere Eigenschaft für diesen Komponentensatz erstellen , da wir die State-Eigenschaft erstellt haben. Jetzt müssen wir eine weitere Eigenschaft für Symbole erstellen. Wie können wir das machen? Wie ich bereits erwähnt habe, , um eine Eigenschaft zu erstellen müssen Sie, um eine Eigenschaft zu erstellen, zuerst Ihren Komponentensatz auswählen Dann klicke ich hier auf diese Plus-Schaltfläche, und hier heißt es Neue Eigenschaftsvariante erstellen. Ich klicke auf diese Option „Variante“ und dieses Fenster erscheint. Ich benenne es mit dem Symbol und dann für den Wert, anstatt es Standard oder was auch immer zu nennen, werde ich es wahr nennen und dann diese Eigenschaft erstellen. Ich werde dir gleich erklären, was das bedeutet. Nachdem wir diese neue Eigenschaft erstellt haben, müssen wir unsere Varianz, diese Schaltflächen, auswählen und den richtigen Wert für diese neue Eigenschaft festlegen . Diese vier Schaltflächen haben kein Symbol. Ich halte die „Shift“ -Taste gedrückt und wähle sie alle aus und setze dies mit dem Symbolwert auf Falsch. Für diese Schaltflächen sind sie bereits auf true gesetzt, aber hier haben wir ein anderes Problem. Wie Sie sehen können, wird der Wert auf State8 gesetzt, sobald ich diese Schaltfläche für die Eigenschaft state auswähle der Wert auf State8 gesetzt, sobald ich diese Schaltfläche für die Eigenschaft state . Wir müssen es auf die Standardeinstellung setzen. Dieses müssen wir auf gedrückt stellen. Dieses müssen wir auf Hover setzen und schließlich dieses auf deaktiviert. Lassen Sie mich Ihnen nun zeigen, wie diese wahren falschen Werte funktionieren. Diese werden als boolesche Werte bezeichnet, und sie funktionieren so. Wenn ich diese Instanz dieser Schaltfläche auswähle, können Sie jetzt sehen, dass ich zwei Eigenschaften habe. Ich habe den Status, ich kann ihn auf Standard setzen. Jetzt habe ich das mit der Symboleigenschaft, und hier habe ich anstelle eines Drop-Menüs diese Umschalttaste. Der Grund, warum ich diese Umschalttaste habe, ist , dass ich den Wert wahr und falsch benannt habe. Figma versteht automatisch, dass Sie möglicherweise einen Schalter für diese wahren und falschen Werte benötigen, diese booleschen Werte, und das ist so hilfreich, weil ich es hier einfach so ein- und ausschalten kann , und es funktioniert für all diese Zustände. Siehst du? So können Sie in Figma multidimensionale Varianz erzeugen. Lassen Sie mich Ihnen jetzt ein anderes Beispiel zeigen. Nehmen wir an, Sie möchten ein Optionsfeld erstellen. Lass es uns sogar zusammen machen. Ich werde weitermachen und einen Rahmen erstellen. Wenn ich auf meiner Tastatur „A“ drücke, kann ich das Rahmenwerkzeug auswählen und Umschalttaste gedrückt halten, mit der linken Maustaste klicken und ziehen, um einen Rahmen zu erstellen. Ich stelle die Rahmengröße auf 16 mal 16 Pixel ein, lasse mich einfach hineinzoomen, und dann werde ich es komplett abgerundet machen. Ich werde den Wert für den Eckenradius erhöhen und ihn in ein Optionsfeld umbenennen lassen. Jetzt füge ich einen Strich hinzu und lasse mich die Farbe in unser Lila ändern. Dies wird die ungeprüfte Variante sein. Ich werde es duplizieren, auswählen, „Strg“ „D“ oder „Command“ „D“ drücken, um es zu duplizieren. Jetzt muss ich die geprüfte Version erstellen, also benötige ich möglicherweise eine Ellipse. Ich halte „Alt“ und „Shift“ gedrückt, um eine Ellipse proportional zu erstellen, und lasse mich sie einfach genau in der Mitte ausrichten , einfach so. Ich werde es ein bisschen größer machen und dann werde ich auch seine Farbe in unser Lila ändern. Ich zeige Ihnen jetzt die andere Möglichkeit , einen Komponentensatz zu erstellen. Lassen Sie mich fortfahren und dieses Optionsfeld auswählen, und ich benenne es hier um. Hier haben wir das Optionsfeld und dann den Schrägstrich deaktiviert. Für den anderen schreibe ich das Optionsfeld mit einem Schrägstrich markiert. Mit dieser Namenskonvention können Sie ganz einfach verschiedene Komponenten erstellen und diese dann in einen Komponentensatz umwandeln . Figma erstellt automatisch Eigenschaften für Sie. Lass mich dir zeigen, wie es funktioniert. Ich wähle dieses aus, verwandle es in eine Komponente, auch dieses, verwandle es in eine Komponente, also haben wir hier zwei verschiedene Komponenten. Wenn ich nun beide auswähle, wird hier diese Option angezeigt. Da steht Kombinieren als Varianz. Wenn ich darauf klicke, schau was passiert, da ist es. Jetzt haben wir einen Komponentensatz mit zwei Varianten. Der Name unseres Komponentensatzes wäre , den wir vor dem Schrägstrich geschrieben haben. Wie Sie sich erinnern, haben wir das Optionsfeld mit Schrägstrich markiert und dann das Optionsfeld mit Schrägstrich ohne Häkchen geschrieben . Optionsfeld wird der Name unseres Komponentensatzes sein und was auch immer wir nach dem Schrägstrich geschrieben haben , wird der Wert unseres Eigentums sein. Wir haben keine Immobilie erstellt, Figma jedoch automatisch. Wenn ich diesen Komponentensatz auswähle, können Sie sehen, dass wir Eigenschaft 1 haben und zwei Werte haben, aktiviert und deaktiviert. Hier kann ich es einfach in state umbenennen und jetzt kann ich einfach eine Instanz dieses Optionsfeldes erstellen und hier haben wir zwei verschiedene Zustände, aktiviert und deaktiviert. Das ist unglaublich, nicht wahr? Aber Sie fragen sich vielleicht, können wir diese Umschalttaste auch hier verwenden ? Ja, wenn wir die Werte unserer Eigenschaft auf wahr und falsch ändern , können Sie auch hier genau den gleichen Umschaltknopf verwenden. Lass mich dir das beweisen. Wenn ich diese auswähle und den Zustandswert auf False setze und dann diesen auswähle und den Zustandswert auf True setze, kann ich jetzt diese Instanz auswählen, und da ist sie, wir erhalten diese Umschalttaste. Sie nun verstehen, wie Varianten funktionieren, werde ich darüber sprechen, wann Sie Varianten nicht verwenden sollten. Nun, ich kann mir vorstellen, dass viele Designer den Fehler machen, Hunderte von Varianten mit unterschiedlichen Symbolen zu erstellen. Nehmen wir an, Sie erstellen diese Schaltfläche mit diesem Symbol und entscheiden sich dann verschiedene Varianten dieser Schaltfläche mit 5, 10, 20 verschiedenen Symbolen. In diesem Fall ist es keine gute Idee, Varianten zu verwenden, denn anstatt ein Problem zu lösen, erstellen Sie ein neues Problem. Auf diese Weise wird es so schwierig sein, alles zu organisieren. Stattdessen können Sie eine Komponenteneigenschaft verwenden da wir Varianteneigenschaften und auch Komponenteneigenschaften haben. Wir haben über Varianteneigenschaften gesprochen, wir haben hier einige erstellt, wie Sie sich erinnern. Lassen Sie uns nun über Komponenteneigenschaften sprechen. Nehmen wir an, Sie möchten diese beiden Symbole verwenden. Es könnten so viele Symbole sein, wie Sie möchten, aber in diesem Beispiel sind zwei ausreichend. Ich wähle diesen aus. Lassen Sie mich weitermachen und es in Icon/Checkmark umbenennen. Dieses, ich werde es in Icon Forward Slash Home umbenennen . Jetzt wähle ich beide aus und ändere auch ihre Farbe in Weiß. Dann werde ich sie in eine Komponente verwandeln. Ich wähle dieses aus, verwandle es in eine Komponente, auch dieses. Wenn ich zu Assets gehe, habe ich jetzt auch dieses Symbol, diese Symbolkategorie. Jetzt werde ich diese Komponenten in meinem Button verwenden. Ich werde weitermachen und diese Häkchen hier einfach so von meinen Buttons entfernen . Lassen Sie mich eine davon auswählen, wahrscheinlich diese, duplizieren, um eine Instanz zu erstellen, und sie einfach per Drag & Drop in unsere Schaltfläche ziehen. Jetzt doppelklicke ich auf dieses Symbol und gehe zu diesem Abschnitt. Wenn ich hier einfach auf diese Schaltfläche klicke, öffnet sich dieses Fenster mit der Aufschrift „Komponenteneigenschaft erstellen“. Ich nenne es Icon. Hier, für den Wert, können Sie sehen, dass wir dieses Drop-Menü bereits haben. Es hat ein Häkchen und ein Zuhause. Wenn ich auf die Schaltfläche „ Immobilie erstellen“ klicke, siehst du hier dieses lila Etikett. Da steht Icon. Nun, während dieses Symbol ausgewählt ist, drücke ich „Strg-C oder Befehl C“, dann wähle ich all diese Tasten aus, halte die Umschalttaste gedrückt, um sie gleichzeitig auszuwählen, drücke „Strg-V oder Befehl-V wähle ich all diese Tasten aus, halte die Umschalttaste gedrückt, um sie gleichzeitig auszuwählen, “ und drücke dann die linke Pfeiltaste auf Ihrer Tastatur, um die Position dieser Häkchen zu ändern. Lassen Sie mich Ihnen jetzt zeigen, was der Unterschied ist. Wenn ich diese Instanz unserer Schaltfläche auswähle , die wir bereits erstellt haben, hier auf der rechten Seite, haben wir eine weitere Eigenschaft. Dies ist eine Komponenteneigenschaft. Wenn ich das Symbol dieser Schaltfläche ändern möchte, kann ich es einfach hier nach Hause anpassen. Sie sehen, ich habe mit diesem neuen Symbol nicht vier weitere Varianten in meinem Komponentensatz erstellt . Das ergibt keinen Sinn. Denken Sie an dieses Beispiel, wenn Sie ein riesiges Designsystem erstellen möchten . Das wird so hilfreich sein. Sie haben diese verschiedenen Sätze dieser Schaltfläche erstellt. Jetzt willst du sie animieren. Normalerweise duplizieren wir unseren Bildschirm , passen unsere Schaltfläche an und verbinden diese Bildschirme miteinander. Aber das ist nicht mehr der Fall, weil wir diese tolle Funktion oder Figma haben diese tolle Funktion oder , die als interaktive Komponenten bezeichnet wird. Lass mich dir zeigen, wie es funktioniert. Hier in unserem Komponentensatz wähle ich meine Basistaste aus, diese. Dann gehe ich zum Tab Prototype. Von hier aus erstelle ich einfach so eine Verbindung zwischen diesen beiden Schaltflächen. Hier auf dieser Seite mit den Interaktionsdetails setze ich den Trigger auf on click, da dies unsere gedrückte Variante ist. Wie Sie sehen, haben Sie hier auch Zugriff auf die Eigenschaften, die Sie gerade erstellt haben. Das ist großartig, nicht wahr? Dann gehen wir zu Animate und ich setze es auf Smart Animate. Hier stelle ich es so ein, dass das Ein- und Aussteigen erleichtert wird, 300 Millisekunden sind in Ordnung. Jetzt erstelle ich eine weitere Interaktion. Ich verbinde diese Basistaste mit unserer Hover-Schaltfläche. Dieses Mal setze ich den Trigger auf, während wir schweben, weil dies unser Schwebezustand ist und die Animation intelligent animiert sein wird und wir startklar sind. Lassen Sie mich nun diese Schaltfläche hier auswählen. Ich werde seinen Status auf Standard ändern. Das Symbol wird ein Häkchen sein. Lassen Sie uns nun weitermachen und sehen, wie es funktioniert. Aber bevor wir das tun, sie zunächst in einem anderen Frame platzieren, um eine Vorschau dieser Komponente anzeigen zu können müssen wir sie zunächst in einem anderen Frame platzieren, um eine Vorschau dieser Komponente anzeigen zu können. Ich drücke „A“ auf meiner Tastatur, erstelle einen Rahmen und lege ihn einfach so hinein. Jetzt wähle ich diese Schaltfläche aus und entferne ihr Symbol, da wir diese Varianten noch nicht prototypisiert haben. Ich werde diesen Button testen. Wählen wir jetzt diesen Frame und klicken Sie hier auf die Play-Taste. Schauen wir uns nun an, was passiert, wenn ich den Mauszeiger über diesen Button bewege. Sie sehen, wir haben jetzt diesen interaktiven Button. Sie nun etwas über interaktive Komponenten und Varianz gelernt haben , möchte ich Ihnen zeigen, wie Sie dieses Symbol mithilfe interaktiver Komponenten animieren können , anstatt diesen Ansatz zu verwenden , der überhaupt nicht gut ist. Ich werde all diese Frames loswerden. Stattdessen verwenden wir hier einfach diese beiden Symbole. Folgendes werden wir tun. Ich wähle dieses Gliederungssymbol und gehe zu meiner Werkzeugleiste und klicke einfach auf dieses kleine Symbol mit der Aufschrift „Komponenten erstellen“. Jetzt habe ich eine Komponente. Wenn Sie sich die Ebenenliste ansehen, sehen Sie, dass sich das Symbol geändert hat. Außerdem haben wir diese violette Farbe, was darauf hinweist, dass wir jetzt eine Komponente haben. Wenn ich diese Komponente auswähle und zur Werkzeugleiste gehe, sehen Sie, dass wir dieses neue Symbol mit diesem Plus-Symbol in der Mitte haben . Es heißt „Variante hinzufügen“. Jetzt fügen wir dieser Komponente eine Variante hinzu. Jetzt haben wir diesen Komponentensatz. Unser Komponentenname ist Herz, das ist in Ordnung. Wir haben hier ein Grundstück. Wir haben Eigenschaft 1, und der Wert dafür ist skizziert. Dann haben wir Eigenschaft 1 und der Wert dafür ist Variante 2. Ich werde weitermachen und diese Eigenschaften und ihre Werte umbenennen . Ich fange mit diesem an. Wenn ich einfach auf den Namen dieser Ebene doppelklicke, ändere ich ihn auf Status ist standardmäßig gleich. Für den nächsten gebe ich state equals to pressed ein. Wir brauchen eine weitere Variante, genau wie wir es zuvor getan haben. Ich wähle zum Beispiel einfach dieses aus und klicke auf dieses kleine Symbol. Alternativ können Sie „Strg D“ drücken, um es zu duplizieren. Ich werde diesen Staat hier oder hier umbenennen. Es spielt keine Rolle, es abzuschließen. Das wird unser Ziel sein. Was müssen wir tun? Genau wie zuvor mit drei verschiedenen Frames gehen wir hier von unserem Startpunkt zum Ziel. Ich muss dieses solide Symbol in alle einfügen. Lass mich es einfach ziehen und sicherstellen, dass du es in dieser Variante hier ablegst und es einfach an der Mitte ausrichtest. Es wurde hier platziert. Ich drücke „Strg C“, um es zu kopieren, wähle diese gedrückte Variante aus und drücke hier „Strg V“, um sie einzufügen. Aber in diesem Zustand müssen wir es ein bisschen größer machen. Ich drücke „K“, um das Skalierungswerkzeug auszuwählen und es einfach viel größer zu machen, etwa so. Fügen wir es auch in diese Standardvariante ein. Ich werde es verkleinern. Wenn es ausgewählt ist, geben Sie hier einfach 0,01 ein, um es verschwinden zu lassen. Wenn Sie nun zu Assets wechseln, finden Sie diese Herzkomponente unter diesem animierten Like-Button hier. Sie können anfangen, es zu benutzen. Um das zu tun, brauchst du nur einen Rahmen. Drücken Sie einfach „A“ und erstellen Sie einfach einen Frame wie diesen. es per Drag & Drop hinein. Aber es ist noch nicht interaktiv. Wenn ich diesen Frame auswähle und auf „Abspielen“ klicke, kannst du sehen, dass er nicht interaktiv ist. Wenn ich einfach darauf klicke, passiert nichts, weil wir keine Verbindungen zwischen diesen Staaten hergestellt haben. Lass uns weitermachen und das tun. Wir müssen nur diesen Standard auswählen, zum Prototyp gehen und ihn nur mit dieser zweiten Variante verbinden , diese gedrückte. Vergewissern Sie sich, dass Sie den Status auf gedrückt gesetzt haben. Verbinde es nicht mit diesem soliden Herzen, sonst funktioniert es nicht richtig. Hier müssen Sie State, Pressed und Smart Animate 100 Millisekunden haben. Das ist in Ordnung. Jetzt wähle ich diese Taste stelle eine Verbindung zwischen diesen beiden her. Jetzt, hier, haben wir den Status abgeschlossen. Das ist in Ordnung. Intelligente Animation, 100 Millisekunden. Der Trigger sollte jedoch von einem Klick auf nach der Verzögerung geändert werden, und die Verzögerung sollte auf eine Millisekunde eingestellt werden. Schließlich müssen wir diesen vollständigen Status auswählen und ihn einfach wieder mit unserem Standardstatus verbinden. Es sollte standardmäßig 100 Millisekunden beim Klicken sein. Wenn Sie nun versuchen, eine Vorschau anzuzeigen, sollte es einwandfrei funktionieren. Siehst du das? Ab sofort ist eine Instanz dieser Komponente standardmäßig interaktiv , wenn Sie sie an einer beliebigen Stelle in Ihrem Projekt verwenden dieser Komponente standardmäßig interaktiv , wenn Sie sie an einer beliebigen Stelle in Ihrem Projekt . Das ist alles für diese Lektion. Wir sehen uns im nächsten. 8. Animierte Buttons: [MUSIK] In diesem Video werden wir gemeinsam einen interaktiven Button erstellen. Obwohl Sie bereits im Video über interaktive Komponenten gelernt haben, wie Sie Ihre Schaltflächen interaktiv gestalten können, haben wir uns nicht wirklich Erstellung einer fortschrittlichen interaktiven Schaltfläche befasst, wie wir sie hier haben. In dem Video über interaktive Komponenten haben Sie gelernt, wie Sie den Status Ihrer Schaltfläche von Standard auf Hover ändern können, indem Sie einfach die Farbe Ihrer Schaltfläche ändern. Aber in diesem Video werden wir es auf die nächste Stufe bringen. Folgendes werden wir bauen. Sobald ich den Mauszeiger über diese Schaltfläche bewege, ein Kreis vergrößert, um den verfügbaren Platz innerhalb dieser Schaltfläche zu füllen , und auch die Textfarbe sollte geändert werden. Wenn ich darauf klicke, sehe ich den gedrückten Zustand. Das ist genau das, was wir schaffen werden. Wenn Sie in der Projektdatei auf die Seite Animierte Schaltflächen gehen , finden Sie diese Schaltfläche. Ich habe dafür kein automatisches Layout verwendet , da ich Ihnen zunächst die einfachste Form der Erstellung einer interaktiven Schaltfläche zeigen werde . Dann zeige ich Ihnen, wie Sie einen Autolayout-Rahmen auch interaktiv gestalten können . Lassen Sie uns zuerst sehen, was wir brauchen. Wenn ich den Mauszeiger über diese Schaltfläche bewege, können Sie sehen, dass ein Kreis schnell vergrößert wird. Wir brauchen einen Kreis im Standardzustand, aber er sollte nicht sichtbar sein. Im Schwebezustand benötigen wir dann diesen Kreis, um ihn zu vergrößern und den gesamten verfügbaren Platz innerhalb dieser Schaltfläche auszufüllen. Mal sehen, wie wir das machen können. Zuerst werde ich diese Gruppe in eine Komponente verwandeln. Wenn ich in der Werkzeugleiste einfach auf diese Schaltfläche „ Komponente erstellen“ klicke in der Werkzeugleiste einfach auf diese Schaltfläche „ Komponente erstellen“ und dann auf diese Plus-Schaltfläche klicke, um eine Variante hinzuzufügen und im Grunde einen Komponentensatz zu erstellen. Hier haben wir eine Eigenschaft mit zwei verschiedenen Werten. Ich werde diese Eigenschaft 1 umbenennen . Ich sie einfach in State equals to Default um. Dann werde ich für den zweiten Fall State so setzen, dass Hover gleichgestellt ist. So weit, so gut. Wir benötigen eine weitere Varianz für unsere gepressten Zustände, aber wir werden sie in ein paar Sekunden erstellen. Lassen Sie uns zunächst diesen Kreis erstellen. Dazu erstelle ich einfach einen perfekten Kreis außerhalb dieses Komponentensatzes. Halten Sie die Umschalttaste gedrückt, um einen perfekten Kreis zu erstellen. Einfach so. Dann werde ich es weiß machen. Dann ziehe ich es in der Ebenenliste per Drag & Drop in meinen Standardstatus. Einfach so. Wir können es nicht sehen, weil wir es genau hierher bewegen müssen. Wie Sie sehen können, befindet sich dieser Kreis innerhalb dieser Varianz. dieser Schaltfläche ist es jedoch nicht maskiert. Das wollen wir nicht. Wir möchten, dass es in dieser Schaltfläche maskiert ist. Wir müssen diesen Bereich außerhalb dieser Schaltfläche nicht sehen. Um dieses Problem zu beheben, können wir einfach diese Variante in der Liste der Ebene auswählen und zum Designinspektor wechseln. Wie Sie hier sehen können, haben wir ein Kontrollkästchen mit der Aufschrift Clip Content. Wenn ich es nur überprüfe, haben wir es. Jetzt haben wir diesen Kreis in dieser Schaltfläche maskiert. Das ist genau das, was wir brauchen. Als Nächstes müssen wir diesen Kreis dramatisch verkleinern , damit er verschwindet. Ich drücke „K“ auf meiner Tastatur um das Skalierungswerkzeug auszuwählen. Auf der rechten Seite fange ich einfach an, 0,01 zu tippen. Drücken Sie „Enter“. Wie Sie sehen können, ist es nicht mehr sichtbar. Dann wähle ich diese Ebene Ellipse 1 aus und drücke „Strg C oder Befehl C“. Wählen Sie diesen Hover-Status, diese Hover-Variante, und fügen Sie ihn dort Drücken Sie „Strg-V oder Command V“. Es ist genau da, aber wir können es nicht sehen. In diesem Zustand drücke ich auf meiner Tastatur „K“ , um das Skalierungswerkzeug auszuwählen. Ich werde es einfach so skalieren, bis es den gesamten verfügbaren Platz innerhalb unserer Schaltfläche einnimmt . Vergessen Sie jedoch nicht, Ihre Varianz auszuwählen und dieses Kontrollkästchen für den Clip-Inhalt zu aktivieren. Hier haben wir ein Problem. Dieser Kreis befindet sich über unserer Textebene. Das ist nicht gut. Ich werde weitermachen und hier werde ich diesen Kreis auswählen und ihn nach unten ziehen und ihn unter unsere Textebene in der Ebenenliste legen , das Gleiche gilt auch hier. Aber wir können unsere Texte immer noch nicht sehen und das liegt daran, dass unsere Texte hier ebenfalls weiß sind. , sollte unser Text nun im Hover-Zustand Wie Sie sehen können, sollte unser Text nun im Hover-Zustand dunkelgrau sein. Ich gehe hier einfach in den Feldbereich und mache es einfach sehr dunkelgrau, einfach so. So weit so gut. Aber was ist mit dem gepressten Zustand? Für den gedrückten Zustand benötigen wir nur eine dunklere Version unseres Schwebezustands. Dazu wähle ich einfach diesen Hover-Status aus und drücke „Strg D oder Command D“, um ihn zu duplizieren. Dann ändere ich hier den Wert dieser Zustandseigenschaft auf gedrückt. Als Nächstes doppelklicke ich einfach darauf, um unseren Kreis auszuwählen, diese Ebene von Ellipse 1, gehe darauf, um unseren Kreis auszuwählen, diese Ebene von Ellipse 1, zum Abschnitt Felder und klicke auf diese Plus-Schaltfläche, um dieser speziellen Variante eine Overlay-Ebene hinzuzufügen . Stellen Sie hier sicher, dass dieses neue Feld, das zu dieser speziellen Variante hinzugefügt wurde , schwarz ist , und erhöhen Sie einfach die Opazität auf 30 Prozent. Jetzt haben wir drei verschiedene Staaten. Wir haben Standard, hover und gedrückt. Das einzige, was noch übrig ist, ist, diese drei verschiedenen Staaten zu verbinden. Ich fange mit der Standardeinstellung an. Ich wähle es aus, gehe zum Prototyp-Tab und verbinde diese beiden einfach so. Hier heißt es Change to state hover, smart animate. Wenn ich es auf 100 Millisekunden setze, wäre es zu schnell. Es wäre ziemlich schwierig, die Animation wirklich zu sehen und zu sehen, was vor sich geht. Ich denke, 200 Millisekunden sind dafür ein guter Ort. Ich werde es so lassen wie es ist. Als Nächstes wähle ich die Hover-Variante verbinde sie mit der gedrückten Variante. Hier nochmal die gleichen Einstellungen, und klicken Sie auf Ändern zu gedrückt, intelligent animieren. Um nun zu sehen, ob diese Schaltfläche wie erwartet funktioniert oder nicht, müssen wir hier nur einen Rahmen erstellen. Ich drücke „A“ auf meiner Tastatur und erstelle einen einfachen Rahmen. Gehen Sie zur Registerkarte Assets, ziehen diese Komponente einfach per Drag & Drop in diesen Rahmen. Ich werde es an der Mitte ausrichten. Ich wähle diesen Frame aus und drücke die Play-Taste, um eine Vorschau dieser bestimmten Interaktion anzuzeigen. Ich werde den Mauszeiger darüber schweben. Wie Sie sehen können, passiert nichts. Ich schätze, wir haben den Trigger nicht geändert, um hier zu schweben. Lassen Sie mich das auswählen. Ja, es sollte beim Schweben auf geändert werden und jetzt sollte es einwandfrei funktionieren. Cool. Da die Hintergrundfarbe jedoch weiß ist, können wir sie nicht richtig sehen. Ich wähle diesen Rahmen aus und mache ihn einfach schwarz. Jetzt sollte es für Sie viel einfacher sein zu sehen, was vor sich geht. So weit, so gut. Wir haben unseren Standardstatus, wir haben unseren Hover-Status. Wenn ich einfach darauf klicke, los geht's. Wir haben auch unseren bedrängten Staat. Aber hier ist die Sache, wenn ich diese Schaltfläche einfach so lasse, wenn mein Cursor diese Schaltfläche verlässt, passiert nichts. Das ist nicht das, was ich will. Wenn mein Cursor diese Schaltfläche verlässt, möchte ich, dass diese Schaltfläche zum Startpunkt zurückkehrt, was diesem Standardstatus entspricht. Nun, leider funktioniert der On-Click-Trigger nicht so wie beim Schweben. Denn hier, wie Sie sehen können, wenn ich nur für eine Sekunde in den Standardzustand zurückkehre, können Sie sehen, dass es in beide Richtungen funktioniert. Dies ist jedoch beim On-Click-Trigger nicht der Fall . Hier ist ein Trick, den ich für meine Projekte verwende. Ich werde diesen gedrückten Zustand wieder mit dem Standardzustand verbinden . Ich ändere die drei hier von Bei Klick auf Verlassen mit der Maus. Jetzt weiß Figma, dass, wenn mein Cursor dieses Element verlässt, es in den Standardzustand versetzt werden sollte. Mal sehen, ob es richtig funktioniert oder nicht. Ich werde den Mauszeiger darüber schweben. Ich werde darauf klicken. Gut. Jetzt werde ich meine Maus einfach so bewegen. Da haben wir es. Wir sind gerade wieder in den Standardzustand zurückgekehrt. So weit so gut. Sie haben gelernt , wie man diese Interaktion erstellt. Wenn wir jedoch eine Schaltfläche erstellen möchten, verwenden wir normalerweise das automatische Layout, um sie responsiv zu gestalten. Normalerweise verwenden wir keine Gruppe und kein Rechteck darin. Es könnte ein bisschen schwierig sein, eine solche Interaktion zu erstellen , wenn Sie ein automatisches Layout haben. Ich werde Ihnen zeigen, wie Sie eine solche Interaktion erstellen können , wenn Sie einen automatischen Layoutrahmen haben. Ich werde diese Schaltfläche mithilfe des automatischen Layouts erstellen. Ich erstelle hier einfach eine Textebene und lasse mich einfach get started eingeben. Um ein automatisches Layout hinzuzufügen, drücke ich „Shift und A“. Lassen Sie mich die Polsterung für meine vertikale Polsterung auf 16 und für die horizontale Polsterung auf 32 einstellen . Ich füge eine Füllung hinzu. Es sollte genau so blau sein. Hier haben wir nur eine Textebene und das ist nur eine ansprechende Schaltfläche. Lassen Sie mich es jetzt einfach in Button umbenennen und ich werde es in eine Komponente verwandeln. Lassen Sie mich eine Variante hinzufügen. Bisher hat alles perfekt funktioniert. Aber jetzt lassen Sie uns weitermachen und diesen Kreis hinzufügen. Ich werde einfach einen Kreis wie diesen erstellen und ihn weiß machen. Schau, was passiert, wenn ich versuche , es in eine dieser Varianten zu integrieren, vielleicht in diese Standardvariante. Schau, was passiert. Siehst du, es hat unseren Knopf zerstört. Wir werden das reparieren, mach dir keine Sorgen. Der Grund, warum es sich so verhält, ist, dass, wenn wir ein automatisches Layout oder sagen wir ein responsives Element haben , wenn wir etwas anderes hinzufügen, es versucht , etwas Platz einzunehmen, und das ist nicht das, was wir wollen. Wir wollen nicht, dass dieser Kreis hier Platz einnimmt. Wir wollen, dass es schwebt. Um dies zu erreichen, müssen wir es nur hier auswählen. Gehen Sie zum Designinspektor und Sie sehen diesen Plus-Button hier. Da steht Absolute Position. Wenn ich darauf klicke, schau, was passiert. Nun, dieser Kreis nimmt hier keinen Platz ein, und genau das brauchen wir. Vergessen Sie nicht, Ihre Variante auszuwählen und die Häkchen für den Clip-Inhalt zu markieren. Alles andere sollte genauso gemacht werden , wie wir es gerade besprochen haben. Ich werde nicht alle Schritte wiederholen. Das ist alles für dieses Video und wir sehen uns im nächsten. 9. Animierte Schalter: [MUSIK] Willkommen zurück. In diesem Video zeige ich Ihnen, wie Sie einfach so einen interaktiven Wechsel vornehmen können . Lass uns darauf eingehen. Bitte gehen Sie zur Seite mit animierten Schaltern in der Designdatei. Wie Sie hier sehen können, habe ich bereits zwei Schalter mit zwei verschiedenen Zuständen entworfen . Es ist so einfach. Ich verwende einfach das Rechteck wie für den Hintergrund und hier einen Kreis. Außerdem habe ich es mit automatischem Layout responsiv gemacht. Wenn ich diesen Ausschaltzustand auswähle, können Sie sehen, dass die Ausrichtung auf links eingestellt ist. Wenn ich diese auswähle, wird die Ausrichtung auf rechts gesetzt. Aber das Wichtigste ist , dass der Name dieser Elemente, dieses Kreises und dieses Kreises für beide Ebenen identisch ist. Sonst funktioniert es nicht. Der andere Unterschied ist , dass ich für diesen Kreis hier einen Strich verwendet habe und auch die Farbe des Hintergrunds geändert habe. Um es interaktiv zu gestalten, müssen wir nur Folgendes tun. Wir müssen nur diese beiden Schalter auswählen und zur Werkzeugleiste gehen, auf diesen kleinen Pfeil klicken und einfach so einen Komponentensatz erstellen. In unserem Komponentensatz haben wir jetzt zwei Varianten mit einer Eigenschaft. Wir haben Eigentum ein und aus. Lassen Sie mich weitermachen und sie umbenennen. Ich benenne es in State um. Hier haben wir State Off. Das nächste, was wir tun müssen, ist, sie zu verbinden. Ich wähle den ersten aus und gehe zum Prototyp, verbinde ihn mit dem zweiten und stelle nur sicher , dass der Trigger auf on click eingestellt ist. Da wir hier ein und aus benutzt haben, haben wir diesen Schalter auch hier. Das ist unglaublich. Es wird eine intelligente Animation sein und ich belasse es bei 200 Millisekunden. Wir werden es ausprobieren und bei Bedarf können wir später einige Anpassungen vornehmen. Jetzt erstelle ich eine weitere Verbindung zurück in den ausgeschalteten Zustand. Ich werde eine neue Verbindung erstellen. Lass es uns versuchen. Ich werde einen Rahmen erstellen. Ich werde die Farbe des Hintergrunds ändern. Auch von den Assets hier werde ich diesen Schalter einfach so ziehen und ablegen. Wählen wir diesen Rahmen aus. Drücken Sie auf Play und es sollte gut funktionieren. Ich werde darauf klicken. Da haben wir es. Jetzt wissen Sie auch , wie Sie einen interaktiven Switch erstellen. Wir sehen uns im nächsten. 10. Animiertes Slider: In diesem Video werden wir gemeinsam einen interaktiven Slider erstellen , genau wie das, was Sie hier sehen. Wie Sie sehen können, können wir leicht mit diesem Slider interagieren. Auf der rechten Seite siehst du diese Nummer, die mit unserem Slider verbunden ist , einfach so. Lassen Sie uns beginnen und sehen, wie Sie eine erstellen können. Bitte fahren Sie fort und suchen im Figma-Projekt nach dieser animierten Slider-Seite. Wie Sie sehen können, habe ich hier zwei verschiedene Slider erstellt. Lassen Sie mich es zunächst für Sie aufschlüsseln. Ich habe hier kein abgerundetes Rechteck. Es ist wie mein Hintergrund komplett abgerundet, und wenn ich diese Ellipse nur verschiebe, siehst du, dass ich hier eine doppelte Ebene meines Hintergrunds habe , und ich habe die Breite einfach auf fünf reduziert. Diese Ebene ist im Grunde das, was wir animieren werden , um so etwas zu erhalten. Hier haben wir also zwei Rechtecke übereinander. Aber dieser, der Slider genannt wird, hat eine viel geringere Breite. Es ist so einfach. Wenn Sie diesen Slider erstellen möchten, müssen Sie sicherstellen, dass dieser Kreis perfekt zu den anderen Elementen ausgerichtet ist . Sonst funktioniert es nicht. Für diesen zweiten Schieberegler wurden lediglich die Position dieses Kreises geändert und auch die Breite dieser Schiebereglerebene wurde auf 237 geändert, um den Endpunkt hier zu erreichen. Aber wir müssen hier auch eine Nummer haben. Wie können wir das also schaffen? Lass mich dir zeigen, wie es gemacht wird. Zuerst erstelle ich eine Textebene, drücke T und erstelle eine Textebene. Hier werde ich unterschiedliche Werte haben. Ich gehe von 0-10 bis 20, bis hin zu 100. Folgendes werde ich tun. Ich tippe Null ein. Ich drücke die Eingabetaste , um eine neue Zeile zu erstellen. Dann tippe ich 10 und mache einfach damit weiter. Ich werde diesen Prozess beschleunigen. Da haben wir es. Wir haben 0, 10, 20 bis 100 und stellen Sie sicher, dass Sie Ihren Text so ausrichten, dass er hier geschrieben wird. Genau wie bei unserem Slider benötigen wir also auch für diese Textebene zwei verschiedene Zustände für diese Zahl. Hier, in unserem ersten Slider, sollten wir Null sehen. Hier sollten wir 100 sehen und alles andere wird von Figma automatisch animiert. Dazu müssen wir diese Textebene nur in einen Rahmen verwandeln, um diese Zahlen maskieren zu können. Ich klicke mit der rechten Maustaste darauf und klicke auf die Rahmenauswahl. Wie Sie nun in der Ebenenliste sehen können, sich diese Textebene in diesem Frame 1, und ich werde diesen Frame 2-Text umbenennen. Als Nächstes werde ich die Höhe dieses Frames einfach so verringern , und um diese Zahl zu maskieren, müssen wir, wie Sie wissen, nur die Häkchen für den Clip-Inhalt einfach so ankreuzen. Jetzt richte ich diesen Rahmen an diesem Schieberegler und dupliziere ihn, drücke Strg D, bringe ihn hierher und richte ihn auch an diesem Schieberegler aus. Stellen Sie sicher, dass Sie in diesem Text den gleichen Abstand zwischen den Schiebereglern haben. Wenn ich hier nur die Alt-Taste auf meiner Tastatur oder die Optionstaste gedrückt halte , kann ich sehen, dass der Rand auf 12 eingestellt ist. Hier muss ich sicherstellen , dass ich auch 12 habe. Es ist acht, also muss ich es nach oben verschieben, und jetzt kann ich diese beiden auswählen, diesen Schieberegler und diese Textebene, und Strg-G drücken, um sie zu gruppieren und auch diese beiden auszuwählen. Drücken Sie Strg G, um sie zu gruppieren. Jetzt werde ich diese Gruppen erweitern und sicherstellen, dass meine Ebenen in beiden Gruppen den gleichen Namen haben. Hier habe ich Slider 100, Slider 0. Ich werde es für diese beiden Gruppen auf Slider ändern . Ich möchte nicht auf Probleme stoßen wenn ich Verbindungen herstelle. Dann haben wir Text und Text, und alles andere sieht gut aus. Bevor wir diese beiden Gruppen in einen Komponentensatz umwandeln, wähle ich diese Textebene in diesem speziellen Rahmen hier und verschiebe sie nach oben, da wir hier 100 und nicht Null sehen müssen. Sie können also die Umschalttaste gedrückt halten und die Pfeiltasten auf Ihrer Tastatur verwenden, um sie nach oben zu bewegen. Einfach so, so etwas sollte funktionieren und wir können loslegen. Jetzt wähle ich diese beiden Gruppen aus und erstelle einfach einen Komponentensatz wie diesen und jetzt können wir diese beiden verbinden. Folgendes müssen Sie beachten. Wenn Sie diese beiden verbinden möchten, müssen Sie sicherstellen, dass Sie diesen Kreis hier in diesem Schieberegler auswählen . In meinem Fall ist es Ellipse 1, sonst funktioniert es nicht. Stellen Sie sicher, dass Sie dieses Element hier auswählen, dann gehen Sie zum Prototyp, erstellen Sie eine Verbindung und verbinden Sie es mit dieser Gruppe 2. Der Trigger sollte von und klicken auf Ziehen geändert werden , da wir in der Lage sein sollten dieses Element hin und her zu ziehen, intelligent animieren, und 300 Millisekunden sehen gut aus. Ich mache dasselbe für dieses Element hier, Ellipse eins hier, und stelle einfach eine Verbindung zurück zu unserer ersten Gruppe her und ziehe, und alles andere sollte intakt sein. Jetzt probieren wir es aus. Es sollte gut funktionieren. Ich werde hier einen Rahmen erstellen. Lass uns den Hintergrund einfach so schwarz machen. Gehen Sie zu Assets, ziehen Sie diese Komponenten per Drag & Drop. Gut. Ich wähle einfach den Frame aus und klicke auf Play. Okay, schauen wir mal, ob es funktioniert. Da haben wir es. Sie sehen, dass alles wie erwartet funktioniert. Wenn du irgendwo in der Nähe anhalten willst, vielleicht bei 20 und dann bei 40 oder 60 usw., musst du sicherstellen , dass es eine andere Varianz gibt. Anstelle von Null und 100 benötigen Sie also einige Varianten zwischen diesen beiden Werten. Vielleicht kannst du zwei weitere Varianten hinzufügen und 0-30 und dann von 30-70 und 70-100 gehen 0-30 und dann von 30-70 , was auch immer du brauchst. Leute, das ist alles für dieses Video und wir sehen uns im nächsten. 11. Animierte Karte: [MUSIK] Willkommen zurück. Wenn Sie in den App Store gehen, sehen Sie normalerweise einige Karten, die sich auf verschiedene Apps beziehen. Wenn Sie eine dieser Karten berühren, werden Sie diesen reibungslosen Übergang sehen. Diese Kartengrenze wird erweitert, sodass sie die gesamte verfügbare Breite des Bildschirms ausfüllt die gesamte verfügbare Breite des , und dann bewegen sich alle Elemente, einschließlich der Bild - und Textebenen, einschließlich der Bild - und Textebenen, nach oben und ordnen das gesamte Layout des Bildschirms neu an. Wenn Sie es schließen möchten, können Sie es einfach nach unten ziehen und es wird eingeklappt. In diesem Video zeige ich Ihnen, wie Sie genau dieselbe Interaktion in Figma replizieren können. Lass uns eintauchen. Hier habe ich diese App entworfen und hier haben wir ein paar Karten. Wenn ich darauf klicke, schau, was passiert. Sie sehen, wir werden hier genau die gleiche Interaktion bekommen. Wenn ich darauf klicke, wird es erweitert. Dann bewegen sich der Text und das Bild hier nach oben. Wenn ich auf dieses Linkspfeilsymbol klicke, wird es ausgeblendet. Auch wenn ich es einfach hierher ziehe, kann ich es einfach selbst zusammenklappen. Es ist so glatt und so einfach zu erstellen. Lass uns anfangen. Wenn Sie hier auf die Seite mit den animierten Karten gehen, werden Sie sehen, dass ich diese beiden Bildschirme für Sie vorbereitet habe. Hier auf der Homepage haben wir diese Karte und innerhalb dieser Kartengruppe haben wir ein paar Elemente. Wir haben diese Gruppe 2, das ist diese Textgruppe. Außerdem haben wir diese Textebene und dann haben wir unsere Form und unser Bild und den Schatten hinter diesem Bild. Das einzige, was Sie hier tun müssen , ist, auf beiden Seiten genau dieselben Ebenen zu haben. Hier auf der Detailseite habe ich auch die Kartengruppe und darin habe ich auch diese Gruppe. Aber ich entferne diesen Preistext und alles andere ist genau das Gleiche. Ich habe Rechteck 4, Rechteck 3, Rechteck 5. Es ist so wichtig, dass die Namen intakt bleiben, sonst funktioniert es nicht und der Rest wird von Figma erledigt. Jetzt müssen wir nur noch diese Karte auswählen, zum Prototyp-Tab gehen und einfach diese beiden Bildschirme verbinden. Der Auslöser wird ein Klick sein. Es wird intelligenter animiert sein. Ich werde die Geschwindigkeit hier belassen, um sie vorerst zu verringern Später müssen wir sie möglicherweise anpassen. Dann wähle ich diesen Button hier und verbinde ihn einfach wieder mit meiner Homepage. Klicken Sie erneut auf Smart Animate. Wenn ich hier einfach auf die Play-Schaltfläche klicke, um meinen Flow abzuspielen, schauen wir uns eine Vorschau an und sehen, wie er funktioniert. Ich werde auf diese Karte klicken. Es funktioniert einwandfrei. Aber um es auf die nächste Stufe zu bringen, möchte ich diesen Bounce-Effekt hinzufügen, einfach so. Es ist so glatt und so befriedigend. Dazu müssen wir nur diese Karte hier auswählen. Ich werde auf diese Interaktion klicken. Anstatt es zu lockern, ändere ich es zu schnell. Ich werde dasselbe für diese Interaktion tun. Ich wähle diese Schaltfläche und ändere sie auf Schnell. Versuchen wir es noch einmal. Ich werde darauf klicken. Da haben wir es. Es sieht viel besser aus. Aber was ist mit der Drag-Interaktion? Im Moment funktioniert es nicht. Lass es uns erstellen. Wir müssen nur diese Karte hier auf der Detailseite auswählen. Ich werde eine Verbindung zurück zu meiner Homepage herstellen. Aber diesmal sollte der Trigger auf On Drag geändert werden. Außerdem sollte es schnell gehen damit wir nichts anderes anfassen müssen. Jetzt sollte es gut funktionieren. Es war ziemlich einfach, nicht wahr? Ordnung Leute, lasst uns dieses Video abschließen und wir sehen uns im nächsten. 12. Animierte Text: Wollten Sie schon immer eine professionell aussehende Textanimation in Figma erstellen ? Wenn ja, haben Sie das richtige Video ausgewählt, denn in diesem Video zeige ich Ihnen, wie Sie diese fortgeschrittene Textanimation in Figma in nur fünf Minuten erstellen diese fortgeschrittene Textanimation können. Lass uns anfangen. Um diesen Effekt zu erzeugen, benötigen wir zwei verschiedene Textebenen. Wir benötigen die Textebene als unseren statischen Text und wir benötigen eine weitere Textebene als unseren beweglichen Text. Ich werde eine Textebene erstellen. Lass mich schreiben, verwalte deine Projekte einfach so. Ich werde es fett machen, dann werde ich seine Breite so verringern und hier werden wir unsere beweglichen Texte platzieren. Jetzt dupliziere ich diesen Text, verschiebe ihn auf die rechte Seite und hier werde ich einfach so schneller schreiben. Dieses Mal können wir den Typ dieses Textes so auf automatische Breite ändern . Lassen Sie mich diesen Text nach unten bringen, richten Sie ihn einfach an Ihrer anderen Textebene aus. Lassen Sie mich als Nächstes fortfahren und die Farbe ändern. Ich werde einen Farbverlauf für diesen Text haben. Lassen Sie mich schnell einen Farbverlauf erstellen. Ich werde lila und dieses hellviolette verwenden , einfach so. Mach dir keine Sorgen um die Farbe. Sie können es später jederzeit anpassen. So etwas sollte sehr gut funktionieren. Jetzt doppelklicke ich auf diesen Text. Ich drücke die Eingabetaste, um eine neue Zeile zu erstellen , und lass uns unser zweites Wort schreiben. Lass uns mit Leichtigkeit schreiben. Drücken Sie die Eingabetaste und lassen Sie uns effizient schreiben. Jetzt müssen wir hier irgendwie eine Maske erstellen. Wir können eine Maske benutzen, aber stattdessen zeige ich dir einen guten Trick. Anstatt eine Maske zu verwenden, können wir einfach mit der rechten Maustaste auf diesen Text klicken und auf die Rahmenauswahl klicken. Wir werden diesen Text im Grunde in einen Rahmen einfügen. Sie sehen jetzt, wir haben hier Bild eins. Dann werde ich die Höhe dieses Rahmens einfach so verringern und einfach dieses Kontrollkästchen mit der Aufschrift Clip-Inhalt hier ankreuzen. Im Grunde maskieren wir hier die anderen beiden Wörter, und genau das brauchen wir. Jetzt wähle ich diese beiden Texte aus. Im Grunde haben wir einen Rahmen und eine Textebene. Klicken Sie hier mit der rechten Maustaste und erneut auf diese Rahmenauswahl, um ein weiteres Bild zu erstellen. Benennen wir es in Frame One um. Jetzt können wir es duplizieren. Drücken Sie Strg D oder Befehl D und duplizieren Sie es erneut. Als Nächstes müssen wir Folgendes tun. Wir müssen in diesem Rahmen, den wir erstellt haben, auf unsere Textebene doppelklicken diesem Rahmen, den wir erstellt haben, und sie einfach nach oben verschieben. Ich kann die Pfeiltasten auf meiner Tastatur verwenden, um diesen Text einfach so nach oben zu bewegen. Wenn Sie es perfekt an dieser Textebene ausrichten möchten, können Sie es einfach außerhalb dieses Rahmens platzieren und es an der Grundlinie dieses anderen Textes ausrichten und es einfach so wieder hineinlegen . Machen wir dasselbe für die anderen Texte. Ich wähle es aus und verschiebe es einfach so nach oben. Lassen Sie mich das schnell ausrichten. Es ist perfekt ausgerichtet und ich werde es in diesen Rahmen legen. In Ordnung, soweit so gut. Jetzt müssen wir diese drei Frames auswählen. Wir müssen zur Werkzeugleiste gehen und auf diesen kleinen Pfeil klicken. Dieses Drop-Menü wird geöffnet und wir müssen auf Komponentensatz erstellen klicken. Sobald ich das getan habe, wird dieses Komponentensatz erstellt und darin haben wir unsere Varianten. Wenn Sie nicht wissen, was Varianten sind, schauen Sie sich unbedingt mein Video über Varianten an. Sie finden den Link in der oberen rechten Ecke. Aber im Moment müssen wir hier nur zum Prototyp-Tab gehen hier nur zum Prototyp-Tab und sie interaktiv gestalten. Wir müssen hier eine Interaktion schaffen. Wie können wir das machen? Es ist sehr einfach. Ich wähle den ersten aus. Ich klicke mit der linken Maustaste auf diesen Plus-Button und versuche , ihn hier mit der nächsten Variante zu verbinden. Dieses Menü mit den Interaktionsdetails wird angezeigt. Von hier aus ändere ich den Trigger auf After Delay. Die Dauer ist auf 800 Millisekunden festgelegt. Es ist in Ordnung. Ich werde den Animationstyp von Instant auf Smart Animate ändern . Hier stelle ich es so ein, dass es das Ein- und Aussteigen erleichtert. Sie können hier wählen, welche Option Sie möchten. Du kannst zum Beispiel Bouncy Quick wählen, es liegt ganz bei dir, aber ich bevorzuge diesen wirklich. Es sieht sehr gut aus. Lassen Sie mich die Dauer auf vielleicht 600 Millisekunden anpassen. Jetzt müssen wir diesen Vorgang für die anderen Varianten wiederholen diesen Vorgang für die anderen Varianten Ich werde diesen Rahmen jetzt auswählen. Ich werde einfach so eine neue Interaktion erstellen. Ändern Sie hier den Trigger auf After Delay. Ändern Sie diese Dauer hier nicht , da wir möchten, dass sie gleich ist. Wir müssen nichts anderes ändern. Schließlich wähle ich diesen , den letzten, aus und verbinde ihn mit unserem ersten Frame. Ändern Sie einfach den Trigger auf After Delay und der Rest ist in Ordnung, und wir sind im Grunde fertig. Lassen Sie mich Ihnen jetzt zeigen, wie Sie es verwenden können. Ich gehe zu Assets. Von hier aus ziehe ich meine Komponente per Drag & Drop direkt in mein Design. Falls Sie die Farben hier ändern möchten, können Sie einfach hier zu den Auswahlfarben wechseln und die Farbe nach Ihren Wünschen anpassen. Sie können auch den Farbverlauf ändern. Lassen Sie mich weitermachen und die Steigung schnell ändern. Ich mag diesen wirklich. Jetzt probieren wir es aus und sehen, wie es aussieht. Ich wähle meinen Rahmen aus und schaue ihn in der Vorschau an. Da haben wir es. Hier ist unsere schöne und flüssige Animation. 13. Interaktives Dropdown Menü: [MUSIK] Willkommen zurück. In diesem Video zeige ich Ihnen, wie Sie dieses interaktive Drop-down-Menü erstellen . Sobald ich hier auf dieses Drop-down-Menü klicke, wird es geöffnet und wir sehen diese Optionen, sodass wir zwischen diesen Sprachen wählen können. Wir benötigen eine Flagge und auch eine einfache Textebene, und wie Sie sehen können, haben wir unterschiedliche Zustände dieser Optionen. Wir haben den Hover-Status und können diese Sprachen auch auswählen. Wenn ich einfach auf dieses Englisch klicke, los geht's, unser Platzhaltertext wurde geändert und wir bekommen diese Flagge auch hier. Es ist vollständig interaktiv und es ist sehr nützlich zu lernen, wie Sie eine so komplexe interaktive Komponente in Figma erstellen können . Wenn du bereit bist, lass uns loslegen. Für dieses Element habe ich beschlossen, zu zeigen, wie Sie es von Grund auf neu erstellen. Denn wenn Sie nicht verstehen, wie dieses Drop-down-Menü erstellt wird, wäre es für Sie ziemlich schwer zu verstehen, wie wir es interaktiv gestalten. Wir werden es von Grund auf neu erstellen. Aber wenn Sie einfach auf die interaktive Drop-down-Menüseite im Figma-Projekt gehen , werden Sie sehen, dass ich diese Flaggen bereits für Sie vorbereitet habe. Wir haben vier verschiedene Flaggen mit unterschiedlichen Namen. Der erste Schritt besteht darin, diese Flaggen in Komponenten umzuwandeln. Ich wähle sie einfach alle aus und gehe hier zur Werkzeugleiste. Ich klicke auf diesen Abwärtspfeil, Ich klicke auf um dieses Drop-down-Menü zu öffnen. Hier klicke ich einfach so auf Create Multiple Components. Jetzt ist jede einzelne dieser Flaggen eine Komponente. Das ist gut. Der nächste Schritt besteht darin, den Artikel zu erstellen. Was Sie hier sehen, jede einzelne dieser Optionen wird in unserem Drop-down-Menü als Element bezeichnet. Dafür brauchen wir nur eine einfache Textebene, eine Flagge daneben, und sie sollte rechteckig sein. Ich drücke „T“ auf meiner Tastatur und die Schriftgröße könnte 18 Punkte betragen, und ich tippe Englisch. Als Nächstes füge ich ein anderes Layout , um es responsiv zu gestalten. Drücken Sie Shift und A, und wie Sie jetzt sehen können, wurde es zu Frame 1 geändert, sodass es jetzt responsiv ist. Dafür benötigen wir eine Hintergrundfarbe, also werde ich auch eine Füllung hinzufügen. Es könnte weiß sein oder es könnte ein sehr heller Blauton sein oder etwas anderes. Ich nehme Blau. Lassen Sie mich die Farbe hier einfach auf einen sehr hellen Blauton ändern , einfach so, und unsere Texte sollten einen sehr dunklen Blauton haben. Ich werde hier dieselbe Farbe wählen und es ziemlich dunkel machen, einfach so. Lassen Sie mich diesen Rahmen auswählen und ich nenne ihn Objekt. Was brauchen wir noch? Wir brauchen hier eine Flagge, also werden wir verschachtelte Komponenten verwenden. Wenn ich hier zum Tab Assets gehe und zum animierten Drop-down-Menü gehe, sehe ich diese Flaggenkategorie und wir sehen alle unsere Flaggenkomponenten. Ich werde diese englische Flagge einfach so in meinen Artikel ziehen und dort ablegen . Wie Sie sehen können, ist unser Artikel responsiv, da wir ihm ein anderes Layout hinzugefügt haben. Jetzt müssen wir nur noch die Ausrichtung ändern. Ich wähle diesen Artikelrahmen und ändere die Ausrichtung hier auf links und mittig, einfach so. Der Abstand zwischen diesen Elementen könnte verringert werden. Ich werde es einfach auf vier Pixel verkleinern. Aber ich werde auch hier die horizontale und vertikale Polsterung ändern . Ich werde die horizontale Polsterung auf 16 und die vertikale Polsterung ebenfalls auf 16 setzen , einfach so. Aber hier ist die Sache. Ich wähle diesen Artikel aus und erhöhe seine Breite ein wenig. So etwas sollte funktionieren, vielleicht 170. Mach dir keine Sorgen um die Dimension , denn das werden wir später ändern. Im Moment möchte ich hier nur einen Musterartikel haben. Gut. Jetzt, wo unser Artikel fertig ist, werde ich ihn in eine Komponente verwandeln. Ich klicke hier auf dieses Symbol. Da haben wir es. Jetzt ist es eine Artikelkomponente, und jetzt ist es an der Zeit, dieser Komponente verschiedene Zustände hinzuzufügen . Dafür brauchen wir eine Variante. Während es ausgewählt ist, klicke ich hier auf dieses kleine Symbol , um eine Variante hinzuzufügen. Wir benötigen eine Eigenschaft in unserem Komponentensatz und sie wird state genannt. Wenn Sie den Eigenschaftsnamen ändern möchten, können Sie einfach den gesamten Komponentensatz auswählen und zum Abschnitt Eigenschaften und auf den Namen doppelklicken. Hier wird der erste Standard sein. müssen wir nicht ändern. Der zweite wird hover sein, also gebe ich hier hover ein, und für diesen Hover-Status werde ich die Farbe ein wenig ändern. Ich füge ein weiteres Feld hinzu und ändere die Farbe auf dieses Hellblau und mache es einfach so etwas gesättigter. So weit, so gut. Jetzt dupliziere ich es, drücke Strg D oder Command D und dieser wird unser ausgewählter Status sein. Denn hier, wenn wir dieses Drop-down-Menü öffnen , müssen wir den Standardstatus haben. Wie Sie sehen können, ist Italienisch jetzt der Standardstatus. Wenn ich den Mauszeiger darüber bewege, sehen wir den Hover-Status, und wenn ich hier darauf klicke, haben wir jetzt den ausgewählten Status. Dafür ändere ich hier seinen Wert, um ihn auszuwählen, und ich werde dieses neue Feld ändern , das wir gerade zu diesem Hover-Status hinzugefügt haben. Ich werde es einfach ein bisschen gesättigter machen , einfach so. Die andere Sache, die wir tun können, ist diesen Text auszuwählen und einfach seine Stärke von normal auf mittel zu ändern , damit wir leicht zwischen diesen verschiedenen Zuständen unterscheiden können. Aber wir sind noch nicht fertig denn sobald wir diesen ausgewählten Status haben, benötigen wir auch einen Hover-Status für diesen ausgewählten Status. Ich weiß, es klingt kompliziert, aber hier ist die Sache. Wir haben einen Hover-Status für diese Standardzustände. Aber wir benötigen auch einen Hover-Status für diesen ausgewählten Staat. Sie sehen, wenn ich den Mauszeiger über diesen ausgewählten Status bewege, wird er etwas dunkler Ich wähle einfach diesen aus, dupliziere ihn und ändere seinen Wert hier auf ausgewählten Mauszeiger. Das einzige, was wir tun müssen, ist die Farbe hier ein wenig zu ändern. So etwas sollte funktionieren. So weit so gut. Wir haben unseren Artikel mit verschiedenen Zuständen und jetzt können wir mit dem nächsten Schritt fortfahren , dem Erstellen einer Liste. Wir müssen diese Liste hier erstellen. Dafür müssen wir nur diese Artikelkomponente verwenden. Wenn ich zu Assets gehe, kann ich hier nach der Artikelkomponente suchen und sie hier per Drag & Drop ziehen. Für die Liste werde ich dieses Element duplizieren, nach unten verschieben und sicherstellen, dass zwischen diesen beiden Elementen kein Rand besteht . Ich werde es zweimal duplizieren, also benötigen wir insgesamt vier verschiedene Artikel, einfach so. Jetzt ändern wir den Inhalt jedes Elements, das zweite wird zum Beispiel italienisch sein, das zweite wird zum Beispiel italienisch sein und da wir die Flaggen in Komponenten umgewandelt haben, kann ich einfach diese Instanz auswählen, zum Designinspektor gehen und über dieses Drop-down-Menü einfach auf Italienisch ändern. Die nächste wird polnisch sein und ich werde auch die Flagge auf Polen ändern, einfach so. Als Nächstes müssen wir Spanisch haben, und ich werde auch die Flagge auf Spanien ändern , einfach so. Jetzt haben wir vier verschiedene Artikel und ich werde diese Liste ebenfalls responsiv gestalten. Ich wähle sie alle aus und füge ihnen ein automatisches Layout hinzu. Ich drücke Shift und A. Los geht's, und lassen Sie uns diesen Frame in Liste umbenennen. Aber unsere Liste ist nicht responsiv. Sie sehen hier, wir haben dieses Problem, wenn ich versuche, die Breite hier zu ändern, passiert nichts, und das ist ein Problem, weil wir sicherstellen müssen, dass unsere Liste responsiv ist. Um das zu beheben, müssen wir nur die Elemente in unserer Liste auswählen und hier die Option zur Größenänderung ändern. Wenn ich zum Design Inspector gehe und dieses Drop-down-Menü standardmäßig öffne, ist es so eingestellt, dass die Breite korrigiert wird. Ich stelle es so ein, dass es den Behälter füllt. Wenn ich jetzt meine Liste hier auswähle, können Sie sehen, dass sie vollständig responsiv ist. Der nächste Schritt besteht darin, diese gesamte Liste ebenfalls in eine Komponente umzuwandeln . Ich klicke hier auf die Schaltfläche Komponente erstellen, um daraus eine Komponente zu machen hier auf die Schaltfläche Komponente erstellen, um , und unsere Hauptelemente sind fertig. Was brauchen wir noch? Für dieses Drop-down-Menü benötigen wir auch dieses Menü mit diesem Platzhaltertext, es heißt Sprache auswählen, und dann benötigen wir dieses Abwärtspfeilsymbol. Lass uns einen erstellen. Ich drücke einfach „T“ auf meiner Tastatur und fange an, die ausgewählte Sprache einzugeben. Lass mich die Farbe auf etwas anderes ändern , vielleicht dieses Blau. Dann werde ich, genau wie bei diesen Elementen, ein anderes Layout hinzufügen. Drücken Sie „Shift und A“. Hier haben wir einen Rahmen. Benennen wir es in Menü um, und dieses Menü muss kein Gefühl haben. Stattdessen füge ich einen Strich hinzu. Füge einfach so einen Strich hinzu und ich kann es auch ein bisschen abgerundet machen. Vielleicht kann ich den Eckenradius auf etwa 16 Pixel erhöhen . Ich ändere die Strichfarbe auf dasselbe Blau. Was brauchen wir noch? Wir brauchen auch diesen Abwärtspfeil. Dafür kann ich ein Plugin verwenden. Hier haben wir Iconsax. Wenn ich es einfach laufen lasse und nach einem Pfeil suche. Hier ziehe ich dieses Pfeilsymbol per Drag & Drop in mein Projekt. Los geht's und jetzt ziehe ich es per Drag & Drop in mein Menü, einfach so. Aber es ist zu groß für dieses Menü. Ich werde es ein bisschen kleiner machen. Ich drücke „K“ auf meiner Tastatur um das Skalierungswerkzeug auszuwählen, und versuche seine Breite und Höhe auf wahrscheinlich 18 Pixel zu verringern. Ich finde 18 sieht gut aus. Als Nächstes ändere ich ihre Ausrichtung, also wähle ich dieses Menü aus und ändere die Ausrichtung auf die linke Mitte . Was den Abstand betrifft, setze ich den vertikalen Abstand auf 16, da wir hier für diese Elemente ebenfalls 16 und den horizontalen Abstand ebenfalls auf 16 verwendet haben . Lassen Sie mich die Farbe dieses Symbols auf dasselbe Blau ändern. Da haben wir es. Aber hier ist die Sache, dieses Menü reagiert nicht, also müssen wir das beheben. Um dieses Problem zu beheben, wähle ich einfach dieses Menü aus und gehe zum anderen Layoutbereich. Klicken Sie auf dieses kleine Symbol, erweiterte Layouteinstellungen, und wie Sie sehen können, ist der Abstandsmodus auf Gepackt eingestellt. Ich ändere es auf Leerzeichen dazwischen, einfach so. Jetzt ist unsere Speisekarte responsiv. Was ist der nächste Schritt? Nun, der nächste Schritt besteht darin, auch hier eine Flagge hinzuzufügen . Aber warum? Weil wir hier keine Flagge haben. Ja, wir haben hier keine Flagge für diesen Platzhaltertext. Sobald wir jedoch eine dieser Optionen auswählen, erscheint, wie Sie sehen können, diese Flagge. Was wir tun müssen, ist Folgendes, ich gehe einfach zu Assets und ziehe eine dieser Flaggen per Drag & Drop in dieses Menü. Da ich dann den Abstand zwischen diesen beiden Elementen verringern werde , wähle ich dieses Kennzeichen aus, halte die Umschalttaste gedrückt, die Umschalttaste gedrückt, wähle diesen Text und drücke die Umschalttaste und A. Jetzt können wir diesen Rand hier angeben ohne den Rand zwischen diesen Elementen zu beeinflussen. Ich setze es auf vier, weil wir hier auch vier verwendet haben. Wir müssen alles konsistent halten. Aber hier ist die Sache, für diesen Platzhaltertext brauchen wir diese Flagge nicht. Im Moment wähle ich diese Flagge einfach so aus und verstecke sie. Es ist da, wann immer wir es brauchen, aber im Moment müssen wir es verstecken. Der nächste Schritt besteht darin, dieses Menü in eine Komponente umzuwandeln. Ich werde dieses Menü einfach so in ein Dropdown-Menü umbenennen und es in eine Komponente verwandeln. Dafür benötigen wir zwei verschiedene Varianten. Zwei Hauptvarianten, geschlossen und offen. Ich werde eine weitere Variante hinzufügen, einfach so. Für diese Varianten benötigen wir zwei Eigenschaften. Ich wähle diesen Komponentensatz aus dem Drop-down-Menü aus, gehe zum Abschnitt Eigenschaften und ändere die erste Eigenschaft in den Status. Wir benötigen hier noch eine Immobilie, also klicke ich auf diesen „Plus“ -Button und dann auf „Variante“. Ich nenne es Platzhalter. Es erzeugt Eigentum, sodass wir insgesamt zwei Eigenschaften haben , Staat und Platzhalter. Für den ersten setze ich den Status auf geschlossen, und der Platzhaltertext sollte auf Standard gesetzt werden. In diesem Fall sollte der Status geöffnet sein und der Platzhalter sollte ebenfalls die Standardeinstellung sein, da wir ihn später ändern müssen. Was brauchen wir noch für diesen offenen Staat? Wir müssen dieses Symbol hier um 180 Grad drehen, also wähle ich es aus und hier setze ich den Drehwert einfach so auf 180. Außerdem müssen wir diese Liste in diese offene Variante einfügen. Ich gehe zu Assets und von hier aus ziehe ich diese Liste hier per Drag & Drop. In unserer Ebenenliste werde ich sicherstellen, dass sie diese Listeninstanz einfach so in meine geöffnete Variante einfügen. Es sieht nicht richtig aus. Das liegt daran, dass es hier Platz einnimmt. Wie Sie sich vielleicht erinnern, können Sie, wenn Sie nicht möchten, dass ein Element Platz einnimmt, es einfach auswählen und auf dieses Plussymbol klicken , absolute Position. Jetzt nimmt es keinen Platz mehr und wir können seine Position angeben. Lassen Sie mich einfach diesen Komponentensatz vergrößern. Ich wähle diese Liste mit den Pfeiltasten ändere ihre Position. Wir müssen sicherstellen , dass es perfekt diesem Drop-down-Menü passt. Ich kann diesen Listenpunkt auswählen, die Alt-Taste auf meiner Tastatur gedrückt halten, und wie Sie sehen können, ist der linke Rand auf 21 gesetzt. Ich verschiebe es nach links, um einen linken Rand von 20 Pixeln zu erhalten. Hier haben wir auch einen linken Rand von 20 Pixeln. Als Nächstes müssen wir die Breite anpassen, also wähle ich diese Liste aus und ändere ihre Breite ebenfalls auf 250. Einfach so. Da wir für dieses Menü abgerundete Ecken haben, können wir auch das Design unserer Liste ändern . Für diese Elemente habe ich einen Wert für den Eckradius von 16 Pixeln verwendet . Wir müssen den gleichen Wert auch für diese Liste verwenden . Was brauchen wir? Diese Ecken müssen abgerundet sein. Ich wähle dieses Top-Element in dieser Liste aus. Wir müssen Zugriff auf einzelne Ecken haben, also klicke ich auf dieses kleine Symbol mit der Aufschrift „Unabhängige Ecken“. Hier müssen wir diese beiden Werte ändern. Ich setze sie auf 16, diesen auch auf 16. Dann müssen wir dieses untere Element auswählen und zu den unabhängigen Ecken gehen. Dieses Mal müssen wir diese beiden Werte ändern. Stellen wir sie auf 16 und los geht's. Jetzt haben wir ein einheitliches Styling. Jetzt haben wir zwei Varianten, sodass wir dieses Drop-down-Menü schließen und öffnen können. Aber was ist, wenn ich auf eine dieser Optionen klicke? Wenn ich eine dieser Optionen auswähle, sollte dieser Platzhaltertext in die von mir gewählte Option geändert werden , und auch die Flagge sollte erscheinen. Was ich tun werde, ist Folgendes, ich werde diese geschlossene Option auswählen. Ich drücke Strg D oder Befehl D, um es zu duplizieren. Es ist genau hier platziert, aber mach dir darüber keine Sorgen. Wir werden es einfach verschieben, also ist es genau hier. Ich wähle es aus und verschiebe es mit den Pfeiltasten auf die rechte Seite. Lassen Sie mich diesen Komponentensatz einfach dramatisch vergrößern, wir benötigen mehr Platz, und ich werde ihn genau hier platzieren. Insgesamt benötigen wir vier Optionen. Wir brauchen eine für Englisch, eine für Italienisch, eine für Polnisch und eine für Spanisch. Hier doppelklicke ich auf diesen Text und ändere ihn auf Englisch Außerdem muss ich diese Flagge einblenden. Ich werde diesen Platzhalterwert einfach so auf Englisch ändern . Als Nächstes werde ich das duplizieren, um vier verschiedene Elemente zu erhalten, und ich werde ihre Texte nacheinander ändern. Der zweite wird italienisch sein. Natürlich sollte auch die Flagge geändert werden. Die dritte wird polnisch sein, lassen Sie mich auch die Flagge ändern. Die letzte wird spanisch sein, und ich werde die Flagge hier auf Spanien ändern. Der nächste Schritt besteht darin, unsere Interaktionen zu erstellen. Ich wähle dieses geschlossene Drop-down-Menü aus. Ich gehe zum Prototyp und verbinde ihn einfach mit diesem offenen Zustand. Es sollte On click sein, und die Animation wird Smart Animate sein. Als Nächstes wähle ich dieses aus und verbinde es wieder mit unserem geschlossenen Zustand. Wir müssen keine dieser Optionen ändern. Aber was ist mit diesen? Ich wähle diesen englischen Artikel und verbinde ihn mit dieser englischen Variante. Ich werde dasselbe für all diese Optionen tun, eine nach der anderen und eine weitere. Wir sind fast fertig, aber es gibt noch eine Sache zu tun. Wenn ich nur dieses Drop-down-Menü öffne, sehen Sie, wann eine Option ausgewählt ist Wenn ich es öffne, sehe ich immer noch diese ausgewählte Option. Das ist genau das, was ich will. Ich möchte nicht, dass es in den Standardzustand zurückkehrt. Immer wenn ich zum Beispiel Englisch auswähle und es öffne, sollte Englisch standardmäßig ausgewählt sein. Dazu müssen wir diese Varianten auswählen und die Umschalttaste gedrückt halten, um sie alle auszuwählen. Dupliziere sie, drücke Strg D oder Befehl D und bewege sie nach unten. Dann müssen wir diese Liste auswählen, kopieren, Strg C oder Befehl C drücken und sie in diese Varianten einfügen. Ich wähle Englisch, drücke Strg V oder Command V, auch Italienisch, Polnisch und Spanisch. Was wir tun müssen, ist den Status dieser Optionen zu ändern. Für dieses Englisch wähle ich es zum Beispiel aus, gehe zu Design und ändere hier den Status von Standard auf Ausgewählt. Ich werde hier dasselbe für Italienisch tun, ich ändere es auf Ausgewählt. Für Polnisch ändern wir es auf Ausgewählt. Schließlich ändere ich es für Spanisch auf ausgewählt. Der letzte Schritt besteht darin, auch diese Varianten zu verbinden. Genau wie das, was wir mit diesen beiden Drop-down-Menüoptionen gemacht haben , werde ich dafür dasselbe tun. Ich wähle diesen aus, gehe zum Prototyp verbinde ihn mit dieser offenen Variante. Mach einfach dasselbe für diesen, verbinde ihn wieder mit Englisch. Ich werde es für all diese Optionen tun, weil es in beide Richtungen funktionieren sollte. Da haben wir es. Jetzt sind wir fertig, unser interaktives Drop-down-Menü sollte perfekt funktionieren. Lassen Sie uns es ausprobieren und sehen, ob es wie erwartet funktioniert. Ich erstelle hier einen Rahmen, drücke A und erstelle einen Rahmen in benutzerdefinierter Größe. Dann gehe ich zu Vermögenswerten. Von hier aus ziehe ich dieses Drop-down-Menü einfach per Drag & Drop. Richten wir es an der Mitte aus, und ich wähle diesen Rahmen aus und drücke auf Abspielen. Jetzt werde ich darauf klicken. Da haben wir es. Unser Drop-down-Menü öffnet sich, aber hier haben wir ein Problem. Wie Sie sehen können, passiert nichts, wenn ich den Mauszeiger über diese Optionen bewege. liegt daran, dass wir diese Zustände innerhalb dieses Artikelkomponentensatzes nicht miteinander verbunden haben. Lass uns das schnell machen. Ich wähle diese Standardeinstellung aus, gehe zum Prototyp und verbinde ihn mit dem Hover. Es sollte While hovering und auch Smart Animate sein. Gut. Für das nächste wähle ich es aus und verbinde es mit ausgewähltem. Es sollte On click, Smart Animate sein. Dann wähle ich für diese Option, die mit dem Mauszeiger ausgewählt wurde , diese aus, verbinde sie einfach so und sie sollte beim Schweben angezeigt werden. Jetzt sollte es funktionieren. Lassen Sie uns dieses Drop-down-Menü öffnen. Ich werde den Mauszeiger über diese Gegenstände bewegen. Wie Sie sehen können, funktioniert es perfekt. Ich wähle jetzt Englisch. Da haben wir es. Wenn ich dieses Drop-down-Menü öffne, ist dieses Englisch standardmäßig ausgewählt. Aber hier haben wir ein anderes Problem. Wenn ich eine Option auswähle, dreht sich dieses Symbol nicht. liegt daran, dass wir vergessen haben, diese Symbole hier zu drehen. Lassen Sie mich sie alle auswählen, halten Sie einfach die Umschalttaste gedrückt und doppelklicken Sie auf diese Symbole. Gehe zu Design und hier werde ich sie um 180 Grad drehen. Jetzt sollte alles gut funktionieren. Lass uns die Seite aktualisieren. Ich werde es öffnen. Ich stelle es auf Italienisch und los geht's. Alles funktioniert wie erwartet. Ordnung Leute, das ist alles für dieses Video. Ich hoffe es hat dir gefallen und wir sehen uns im nächsten. 14. Animierte Benachrichtigung: In diesem Video zeige ich Ihnen, wie Sie in Figma eine animierte Benachrichtigung erstellen. Ich werde damit interagieren können. Wenn ich es einfach auf die linke Seite ziehe, erscheint, wie Sie sehen können, diese Löschtaste und wenn ich auf diese Löschtaste klicke, ist sie weg. Mal sehen, wie wir ein solches interaktives Element erstellen können. im Figma-Projekt Suchen Sie im Figma-Projekt nach der animierten Benachrichtigungsseite. Wie Sie sehen können, habe ich diese Detailseite und diese Benachrichtigungskarte und diese durchsichtige Button-Karte bereits für Sie vorbereitet diese Detailseite und diese Benachrichtigungskarte und diese durchsichtige Button-Karte bereits für Sie . So sollte es funktionieren. Sobald wir nach vielleicht drei Sekunden eine Vorschau dieser Detailseite anzeigen, sollte diese Benachrichtigungskarte eingeblendet werden, und wenn ich sie dann auf die linke Seite ziehe, sollte diese durchsichtige Schaltfläche erscheinen und sie sollte auch interaktiv sein. Was müssen wir tun? Zunächst wähle ich hier diese Benachrichtigungskarte aus. Wie Sie sehen, handelt es sich um einen responsiven Frame, aber ich werde ihn in einen anderen Frame einfügen. Der Grund dafür ist, dass wir als Ausgangspunkt diese Benachrichtigungskarte verschwinden lassen müssen. Wir müssen es irgendwie maskieren und um es richtig zu maskieren, brauchen wir auch einen Rahmen. Ich klicke mit der rechten Maustaste darauf und klicke auf die Rahmenauswahl. Benennen wir es in Benachrichtigung um. Da haben wir es. Als Nächstes werde ich es wie gewohnt in eine Komponente verwandeln, und wir benötigen auch ein paar Varianten. Aber bevor ich eine Varianz erstelle, werde ich die Höhe dieses Frames ändern , da wir diese Benachrichtigung, wie gesagt , an unserem Ausgangspunkt , an unserem Ausgangspunkt überhaupt nicht sehen können sollten. Bevor ich die Varianz erstelle, werde ich die Höhe dieses Frames erhöhen , etwa so. Es sollte funktionieren und dann füge ich einfach so eine Variante hinzu. Wir haben hier zwei Varianten. Für diese Komponente benötigen wir zwei verschiedene Eigenschaften. Wir brauchen das sichtbare Eigentum und das klare Eigentum. Warum brauchen wir diese beiden Eigenschaften? Wie ich bereits sagte, sollte diese Benachrichtigungskarte nicht sichtbar sein und sie sollte nach ein paar Sekunden hineingleiten. Als Ausgangspunkt müssen wir es verstecken. Deshalb benötigen wir die Eigenschaft visible und die Eigenschaft Clear ist dafür da, wann wir diese Schaltfläche ein- oder ausblenden müssen . Lassen Sie uns fortfahren und diese Eigenschaften erstellen. Ich wähle diesen Benachrichtigungskomponentensatz aus und gehe zum Abschnitt Eigenschaften hier im Designinspektor. Lassen Sie uns diese Eigenschaft 1 in visible umbenennen, und dann klicke ich auf diese „Plus“ -Schaltfläche, um eine neue Eigenschaft zu erstellen , und nenne sie einfach so. Insgesamt haben wir zwei Immobilien. Was nun den Startpunkt betrifft, nämlich diese Varianz, werde ich den Wert dieser sichtbaren Eigenschaft auf false ändern dieser sichtbaren Eigenschaft auf , da sie nicht sichtbar sein sollte. In diesem Fall ändere ich die Eigenschaft visible auf true, weil sie sichtbar sein wird , und ich wähle jetzt diese beiden Varianten aus und setze den Wert clear false, da wir diese Schaltfläche zu diesem Zeitpunkt überhaupt nicht sehen können sollten . So weit, so gut. Der nächste Schritt besteht darin, diese Benachrichtigungskarte irgendwie zu maskieren. Die Art und Weise, wie wir das machen, ist so. Da wir diese Node-Urlaubskarte in einem anderen Rahmen platziert haben, können wir sie einfach hier in unserer Variante auswählen, und mit den Pfeiltasten kann ich sie einfach so nach oben bewegen. Es ist jedoch immer noch sichtbar. liegt daran, dass wir hier unsere Varianz auswählen und dieses Kontrollkästchen für den Clip-Inhalt aktivieren müssen . Sobald ich das mache, wie du siehst, ist es weg, also maskieren wir es irgendwie. Ich gehe zum Prototyp-Tab und verbinde diese Variante mit dieser Variante. Der Trigger sollte auf „Nach der Verzögerung“ eingestellt werden. Ich setze es auf 3.000 Millisekunden oder drei Sekunden und hier brauchen wir eine intelligente Animation. Lassen Sie uns diese Benachrichtigungskomponente verwenden und sehen, wie sie funktioniert. Ich werde eine Instanz davon per Drag & Drop hierher ziehen. Richten wir es einfach so am oberen Bildschirmrand aus. Ich wähle diese Detailseite aus und klicke auf „Abspielen“. Hier haben wir ein Problem und ich denke, das liegt daran, dass wir vergessen haben, dieses Kontrollkästchen auch für diese Variante zu aktivieren. Ich werde den Inhalt hier ausschneiden und die Seite aktualisieren. Da haben wir es. Jetzt funktioniert es richtig. Wir müssen jedoch eine gewisse Obermarge haben. Wir haben im Moment keine Marge. Was ich tun werde, ist Ich wähle diese Karte hier in meiner zweiten Variante und richte sie nach unten statt nach oben aus. Wenn ich es jetzt einfach aktualisiere, funktioniert es einwandfrei, aber hier haben wir zu viel Rand sodass ich es vielleicht stattdessen an der Mitte ausrichten kann. Ich denke, jetzt haben wir genug Top-Marge. Der erste Schritt ist getan, aber was ist mit der Drag-Interaktion? Dafür werde ich diesen durchsichtigen Button in diese Variante einbauen. Legen Sie es einfach hinein und richten Sie es einfach der Mitte aus und bewegen Sie es einfach auf die rechte Seite. Als Nächstes werde ich die Opazität auf Null Prozent verringern, um sie unsichtbar zu machen, da hier, wie Sie sehen können, die Eigenschaft clear auf False gesetzt ist sodass wir diese bestimmte Schaltfläche nicht sehen können sollten. Jetzt brauchen wir hier noch eine Variante. Ich wähle diese aus und klicke hier auf dieses „Plus“ -Symbol, um eine weitere Variante hinzuzufügen. Was ich jetzt tun werde, ist Folgendes. Ich wähle diese beiden Elemente aus, die Benachrichtigungskarte und diese Löschtaste, und verschiebe mit den Pfeiltasten alles einfach so nach links. Lassen Sie mich diese Schaltfläche zum Löschen auswählen und die Opazität auf 100 Prozent erhöhen , um sie wieder sichtbar zu machen . Wir müssen sie auf die linke Seite verschieben. Es sieht gut aus. Lassen Sie uns nun eine Interaktion zwischen dieser und dieser Variante erstellen . Um es richtig zu machen, ist es sehr wichtig, diese Benachrichtigungskarte auszuwählen , nicht diese Variante. Warum? Lass mich dir zeigen warum. Wenn ich diese Variante hier auswähle und versuche, sie mit dieser Variante zu verbinden und den Trigger von Unclick auf Undrag ändere , schau was passiert. Sie sehen, sobald ich sie ein wenig ziehe, wird diese Animation abgespielt und sie ist fertig. Das wollen wir nicht. Ich möchte diese Interaktion wirklich selbst kontrollieren können . Deshalb habe ich gesagt, dass wir diese Interaktion zu dieser Benachrichtigungskarte selbst hinzufügen müssen , nicht zur Varianz. Das ist ein sehr wichtiger Punkt, den Sie beachten sollten. Ich werde diese Interaktion entfernen und stattdessen diese Benachrichtigungskarte auswählen und sie mit dieser Variante verbinden. Wenn ich es jetzt auf Undrag setze, sollte alles richtig funktionieren. Ich kann es auf beide Arten machen. Ich kann auch dieses auswählen und es einfach wieder mit diesem verbinden und den Trigger auf Undrag und Smart Animate setzen . Mal sehen, ob es jetzt richtig funktioniert. Jetzt kann ich es einfach so nach links oder rechts ziehen . Es funktioniert einwandfrei. Wir haben hier jedoch ein Problem. Wie Sie sehen können, ist es sowohl auf der linken als auch auf der rechten Seite irgendwie maskiert. müssen wir in Ordnung bringen. Wenn ich einfach diese Instanz auswähle und versuche, die Breite auf diese Weise zu erhöhen , schauen wir, ob das Problem dadurch behoben wird. Es funktioniert gut, aber jetzt haben wir dieses Problem. Wie Sie sehen können, gibt es keinen Abstand dazwischen. Das liegt an unseren Einschränkungen. Hier wähle ich diese Schaltfläche zum Löschen und wie Sie sehen können, sind die Einschränkungen auf oben und links eingestellt. Wenn ich es stattdessen auf oben und rechts setze, auch für diesen setze ich es auch für diesen auf oben und rechts. Mal sehen, ob es funktioniert. Es funktioniert, aber jetzt haben wir zu viel Spielraum. Lass mich es einfach ein bisschen nach links bewegen. Jetzt sieht es viel besser aus, aber es gibt noch einen letzten Schritt, den wir unternehmen müssen. Wir müssen diese übersichtliche Schaltfläche auch interaktiv machen . Lass uns das machen. Das einzige, was wir tun müssen, ist diese Variante auszuwählen und auf diese Schaltfläche mit den Anzeigenvarianten zu klicken. Als Nächstes wähle ich die darin enthaltenen Elemente aus und drücke „K“ um das Skalierungswerkzeug auszuwählen, und ich werde es einfach so verkleinern. Ich setze den Wert auf 0,01. Außerdem werde ich ihre Opazität auf Null Prozent verringern , damit sie vollständig verschwinden. Wenn ich nun diese Schaltfläche zum Löschen auswähle, zum Prototyp gehe und ihn hier mit dieser letzten Variante verbinde, sollte der Trigger Unclick, Smart Animate sein. Jetzt sollte es funktionieren. Lass es uns versuchen. Da haben wir es. Alles funktioniert wie erwartet. Versuchen wir es noch einmal. Unsere interaktive Benachrichtigung ist ebenfalls fertig. Lass uns dieses Video abschließen und wir sehen uns im nächsten. 15. iPhone's Dynamic Island: In diesem Video zeige ich Ihnen, wie Sie diese interaktive dynamische iPhone-Insel erstellen . Lassen Sie uns ohne weitere Umschweife eintauchen. Bitte suchen Sie in der Figma-Designdatei nach der dynamischen Inselseite des iPhones . Wie Sie sehen können, habe ich hier bereits ein Modell für Sie vorbereitet. Außerdem haben wir zwei Varianten unserer dynamischen Insel. Im Grunde haben wir eine nahe dynamische Insel und eine offene dynamische Insel. Was müssen wir hier erreichen? Standardmäßig sollten wir diese geschlossene Version sehen können . Wenn ich darauf klicke, sollte sich der Hintergrund erweitern und wir sollten auch all diese Elemente darin sehen können . Wie Sie sehen können, haben wir hier einen Rahmen und im Inneren haben wir zwei Hauptelemente. Wir haben diese Selfie-Kamera. Ich bin mir nicht sicher, ob du es sehen kannst oder nicht, es ist so klein. Außerdem haben wir diesen Wrapper , der all diese Elemente sammelt, wie zum Beispiel dieses Profilbild und all diese Elemente darin. Wie üblich müssen wir daraus eine Komponente machen, aber bevor wir das tun, möchte ich es in einen anderen Rahmen einfügen. Es ist so wichtig. Wenn Sie es nicht in einen anderen Rahmen legen, können Sie nicht alles perfekt ausrichten. Das ist der wichtigste Punkt hier. Ich klicke mit der rechten Maustaste darauf und klicke einfach auf „ Rahmenauswahl “, um es in einen anderen Rahmen zu legen. Nennen wir es Insel. Perfekt. Jetzt werde ich daraus eine Komponente wie diese machen und wir brauchen eine weitere Variante. Wir müssen sowohl geöffnet als auch geschlossen sein. Dieser Komponentensatz sollte eine Eigenschaft haben. Ich benenne diese Eigenschaft in state um und wähle diese Varianten und ändere diesen Statuswert von Standard auf geöffnet. Ich wähle diese Variante und ändere den Statuswert auf geschlossen. Jetzt werde ich nur noch diesen dynamischen Inselrahmen innerhalb dieser geschlossenen Variante auswählen . Ich werde die Häkchen für den Clip-Inhalt überprüfen. Jetzt kann ich weitermachen und seine Dimension ändern. Wie Sie sehen können, ist diese Hülle im Inneren jetzt maskiert. Warum? Weil wir dieses Kontrollkästchen für den Clip-Inhalt aktivieren. Was sollte die Dimension sein? Lass es mich hier überprüfen. Die Abmessung sollte 125 mal 37 sein. Ich wähle es noch einmal und setze die Breite auf 125 und die Höhe auf 37, einfach so, aber wir sind noch nicht fertig. Zunächst richte ich diesen Rahmen, solange er ausgewählt ist , an der Mitte aus. Es sollte in der Mitte dieses gesamten Rahmens platziert werden . Siehst du den Rahmen? Als Nächstes müssen wir die Selfie-Kamera modifizieren , weil wir sie gerade zerstört haben. Hier haben wir die Selfie-Kamera. Die Größe sollte 13 mal 13 sein. Ich werde seine Dimension auf 13 mal 13 ändern. Da haben wir es. Außerdem müssen wir seine Ausrichtung ändern. Wenn ich dies auswähle und die Alt-Taste oder Wahltaste auf meiner Tastatur gedrückt halte , können Sie sehen, dass der obere Abstand auf 12 und der rechte Abstand auf 133 eingestellt ist. Hier wähle ich das aus und stelle sicher, dass ich genau die gleiche Polsterung erhalte. Lass mich es runterholen. Wie Sie sehen können, haben wir hier eine Dezimalzahl, ich werde sie auch für dieses y entfernen. Jetzt kann ich die Polsterung problemlos auf 12 einstellen und die richtige Polsterung sollte an diesem ganzen Rahmen gemessen werden , diesem äußeren Rahmen, und sie sollte auf 133 eingestellt sein. Da haben wir es. Lassen Sie mich nun diese dynamische Insel hier auswählen. Ich gehe zum Prototyp und verbinde ihn einfach mit diesem. Der Trigger sollte Unclick sein und die Animation sollte smart animate sein. Ich wähle diese, diese Variante aus und verbinde sie einfach so und mit Smart Animate wieder mit dieser geschlossenen Version. Lass es uns ausprobieren und sehen, wie es aussieht. Ich gehe zu Assets. Von hier aus gehe ich zur dynamischen Insel des iPhones. Bring es her. Lassen Sie mich es an der Mitte ausrichten und es sollte genau hier platziert werden. Ich ändere den Standardstatus auf geschlossen. Jetzt wähle ich dieses Modell aus und klicke auf „Abspielen“. Jetzt kann ich darauf klicken. Schau, was passiert. Der Hintergrund ist animiertes Eigentum. Das wollen wir. Wir wollen, dass es expandiert und zusammenbricht, einfach so. Ich möchte jedoch, dass die Elemente dieses Wrappers verkleinert und ausgeblendet wenn wir versuchen, diese dynamische Insel zu schließen. Ich möchte nicht, dass es sich auf die rechte Seite bewegt. Das will ich nicht. Lassen Sie uns das beheben. Hier, in dieser geschlossenen Variante, suche ich nach dem Wrapper und wie Sie sehen können, ist er genau hier platziert. Ich werde es verkleinern. Drücken wir K auf meiner Tastatur , um das Skalierungswerkzeug auszuwählen. Dann setze ich hier den Wert auf 0,01. Außerdem möchte ich, dass es sich genau hier in der Mitte bewegt und dann verschwindet. Ich werde es genau dorthin verschieben. Der letzte Schritt besteht darin, die Opazität der Ebene auf Null zu reduzieren. Versuchen wir es noch einmal und sehen, wie es funktioniert. Da haben wir es. Siehst du jetzt den Unterschied? Das wollte ich. Wir sind fast fertig. Mit der Animation bin ich jedoch nicht zufrieden. Wir haben keinen Bounce-Effekt. Wenn Sie sich diesen nur ansehen, sehen Sie, dass wir diesen Bounce-Effekt haben, wodurch die Animation viel besser aussieht. Lassen Sie uns auch das schnell beheben. Ich wähle diesen aus. Gehe zu Prototype und klicke auf diese Interaktion. Ich ändere die Geschwindigkeit von Ease out auf Quick und das Gleiche gilt für diese Varianz. Ich wähle es aus und ändere die Geschwindigkeit von Ease out auf Quick. Wenn wir es jetzt überprüfen, sollte alles funktionieren. Da haben wir es. Siehst du, jetzt bekommen wir diesen Bounce-Effekt. Das ist alles für dieses Video. Hoffe es hat dir gefallen und wir sehen uns im nächsten. 16. 3D-Animation in Figma: In diesem Video werden wir gemeinsam eine 3D-Animation in Figma erstellen . Hier, wie Sie sehen können, haben wir eine Kreditkarte und schauen Sie, was passiert, wenn ich Maus über diese Karte gehe. Siehst du das? Sobald ich den Mauszeiger über diese Karte bewege wechselt ihre Perspektive zu dieser easometrischen Perspektive, und dann erscheinen zwei weitere Karten. Keine Sorge, es wird viel einfacher sein als du denkst. Lassen Sie uns das noch einmal analysieren. Zuerst müssen wir als Ausgangspunkt nur eine Karte sehen, diese blaue Karte, diese blaue Karte, und wenn ich den Mauszeiger darüber bewege, ändert sich die Perspektive einfach so. Dann werden wir sehen, wie diese beiden Karten erscheinen. Wir brauchen drei verschiedene Schritte. Wir brauchen unseren Startpunkt oder Punkt A, dann brauchen wir Punkt B , der hier ist, und dann brauchen wir Punkt C, der das endgültige Ziel ist. Jetzt fangen wir an, es zu erstellen. Wenn Sie in der Figma-Designdatei nach dieser 3D-Animationsseite suchen , können Sie sehen, dass ich dieses Projekt bereits für Sie vorbereitet habe. Hier haben wir einen Heldenbereich einer Website, und hier habe ich drei verschiedene Kreditkarten vorbereitet. Natürlich können wir diese Interaktion mithilfe von Komponenten und Varianz herstellen . Ich werde Ihnen hier jedoch anhand verschiedener Frames zeigen, wie das gemacht wird, um die Schritte, die wir unternehmen müssen, wirklich zu verstehen. Ich wähle diese drei Karten und verschiebe sie auf meine erste Desktop-Homepage. So weit so gut. Lassen Sie mich sie jetzt einfach so horizontal ausrichten. Was ist mit der Reihenfolge unserer Karten? Zuerst müssen wir diese blaue Karte sehen und dann die lila in der Mitte und schließlich die silberne Karte unten. Ich werde Karte 3 hier oben sehen und Karte 1, die silberne, wird unten sein. Jetzt wähle ich diese drei aus und richte sie dann einfach aus. Dies wird unser Ausgangspunkt sein. Während diese drei Karten ausgewählt sind, drücke ich Strg+C oder Befehlstaste+C, wähle diese zweite Homepage aus, wähle diese zweite Homepage aus, drücke Strg+V oder Befehlstaste+V um sie hier einzufügen, und jetzt ist es an der Zeit, die Perspektive dieser Karten in die easometrische Perspektive zu ändern . Ich bin mir nicht sicher, ob Sie mit dem Begriff Easometrie vertraut sind oder nicht, aber lassen Sie mich Ihnen zeigen, wie Sie das tun können. Um die Perspektive dieser Karten zu ändern, verwenden wir ein Plugin namens Asymmetric. Wenn ich hier auf Ressourcen gehe und wenn ich auf den Tab Plugins gehe, finden Sie hier viele Plug-ins. Wir haben verschiedene Arten von Plugins. Wir haben das easometrische Plugin für easometric. Wenn Sie diese Plugins nicht sehen, ist das in Ordnung, da ich bereits nach diesen Plugins gesucht habe. Aber hier können Sie nach Easometric suchen. Da haben wir es. Hier ist das Plugin, das wir verwenden werden. diesem Plugin können Sie die Perspektive Ihrer Elemente, unabhängig davon, um eine asometrische Perspektive ändern die Perspektive Ihrer Elemente, unabhängig davon, . Sie müssen nur hier auf Run und Open Easometric klicken. Um dieses Plugin verwenden zu können, müssen Sie jedoch sicherstellen, dass Sie jeweils nur einen Frame auswählen. Ich wähle hier Karte 1 aus. Ich gehe zu einem Easometric, drücke Run, öffne Easometric hier und dieses Fenster wird geöffnet. Hier haben wir verschiedene Optionen zur Auswahl. Wir haben links, wir haben oben links, wir haben oben rechts. Ich denke, wir werden oben rechts brauchen. Wie Sie jetzt sehen können, haben wir diese easometrische Perspektive für diese Karte 1. Das ist genau das, was wir brauchten. Als Nächstes wähle ich diese Karte 2 aus und mache dasselbe. Sie können es einfach hier öffnen und oben rechts auswählen. Letzt machen wir es für diese Karte 3. Da haben wir es. Jetzt haben wir drei easometrische Karten und ich wähle sie alle aus und ändere einfach ihre Ausrichtung, wie ich möchte. Als letzten Schritt wählen wir diese Karten hier aus, kopieren sie, drücken Strg+C und fügen sie einfach hier ein, drücken Strg+V oder Befehlstaste+V. Dann müssen wir nur diese Karte 3 auswählen, die Umschalttaste gedrückt halten und sie mit den Pfeiltasten nach oben oder unten bewegen. Ich habe es im Grunde um 80 Pixel nach oben verschoben, jetzt wähle ich diese Karte aus und verschiebe sie um ein Pixel nach unten. Halten Sie die Umschalttaste gedrückt und bewegen Sie sie einfach so nach unten. Jetzt müssen wir unsere Interaktionen erstellen. Ja. Zuerst erstelle ich hier eine Nachverzögerung, und dann erstellen wir auch diesen Hover-Trigger. Ich wähle diese Desktop-Homepage aus, gehe zum Prototyp und verbinde sie einfach mit der nächsten Seite. Der Trigger wird nach Delay, Smart Animate sein und er sollte Ease out sein. Ich werde die Dauer hier erhöhen, sonst wäre es zu schnell. Lassen Sie mich es auf 1.000 Millisekunden erhöhen. Ich klicke hier auf Abspielen, um es für eine Sekunde in der Vorschau anzusehen. Da haben wir es. Wir sind vom Startpunkt zu Punkt B gegangen, und jetzt müssen wir auch zu Punkt C gehen. Hier wähle ich diesen Bildschirm aus und erstelle einfach eine solche Interaktion . Es wird nach Delay sein, Smart animate 1.000 Millisekunden. Für diesen Schritt, bei dem wir von dieser Seite zum Ziel gelangen möchten , brauchen wir überhaupt keine Verzögerung. Ich setze diese Verzögerung auf eine Millisekunde. Lassen Sie mich jetzt die Seite aktualisieren. Jetzt sieht es ziemlich gut aus, aber wir können es auf das nächste Level bringen, indem wir diesen Karten Schlagschatten hinzufügen diesen Karten Schlagschatten versuchen, es realistischer aussehen zu lassen. Ich werde weitermachen und diese Karten auswählen, sie alle gehen zum Design und hier füge ich Effekte hinzu. Ich werde sicherstellen, dass ich den Schlagschatteneffekt habe , und lasse mich die Einstellungen ändern. Hier setze ich die Unschärfe auf 100 und hier wird das Y auf 50 gesetzt , einfach so und die Opazität könnte auf 20 Prozent reduziert werden , ungefähr so. Schauen wir uns jetzt an, wie es aussieht. Sie sehen, dass es viel besser aussieht. Sie haben gelernt, wie man diese Animation erstellt, aber wir haben diesen Trigger nicht. Lassen Sie uns nun die Trigger ein wenig ändern. Hier. Ich wähle diese Seite aus und entferne diese Interaktion auch hier. Jetzt wähle ich diese Karte drei aus und verbinde mich mit der nächsten Seite. Als Trigger wähle ich beim Schweben aus und er sollte smart animate sein, aber von hier bis hier benötigen wir den After Delay-Trigger. Wir mussten das überhaupt nicht entfernen, sondern ließen mich es einfach noch einmal erstellen. Es sollte nach der Verzögerung und einer Millisekunde sein und dann brauchen wir auch hier einen Trigger. Was für ein Auslöser? Dafür könnten wir den Maus-Leave-Trigger verwenden. Also, was ich tun werde, ist das. Ich wähle diese drei Karten und füge allen einen Trigger hinzu. Mal sehen, ob es funktioniert oder nicht. Während sie ausgewählt sind, stellen Sie eine Verbindung zurück zum ersten Bildschirm her und ein Trigger wird ausgelöst , wenn Sie die Maustaste verlassen. Ich werde diesen Flow noch einmal spielen. Ich werde den Mauszeiger darüber schweben. Da haben wir es, und jetzt schauen wir, was passiert. Siehst du das? Es funktioniert ganz gut. Es ist jedoch ziemlich langsam. Ich werde die Dauer hier verkürzen. Lassen Sie mich diesen auswählen und die Dauer von 1.000 Millisekunden auf vielleicht 500 Millisekunden ändern Millisekunden auf vielleicht 500 Millisekunden für diese Trigger setze ich ihn auf 500, diesen ebenfalls auf 500 und schließlich, für diesen, setze ich ihn auf 500. Versuchen wir es noch einmal. Ich werde mit dem Mauszeiger drüber schweben, los geht's. Ich werde gehen. Es sieht wunderschön aus, nicht wahr? Als Herausforderung möchte ich, dass Sie diese Interaktion mithilfe interaktiver Komponenten nachstellen . Wir sehen uns im nächsten Video. 17. Animation laden: [MUSIK] Willkommen zurück. In diesem Video zeige ich Ihnen, wie Sie eine interaktive Schaltfläche mit Ladeanimation erstellen . Schau, was passiert, wenn ich auf diese Zahlungsschaltfläche klicke. Hast du das gesehen? Als ich auf die Schaltfläche „Bezahlen“ klickte, eine Spinner-Animation aber als die Verarbeitung abgeschlossen war, erschien dieses animierte Tickersymbol. Lass mich es noch einmal spielen. Ich werde darauf klicken. Wir sehen diesen Spinner und schließlich diese Tick-Animation. Lass uns eintauchen und es erstellen. in der Figma-Projektdatei Gehen Sie in der Figma-Projektdatei zur Ladeanimationsseite und wie Sie sehen können, ist hier nichts, da ich Ihnen zeigen möchte, wie Sie den Spinner schnell von Grund auf neu erstellen können. Dazu brauchen wir nur eine Ellipse. Ich wähle das Ellipse-Werkzeug, halte die Umschalttaste gedrückt, klicke mit der linken Maustaste und ziehe, um einen perfekten Kreis zu erstellen. Die Größe spielt eigentlich keine Rolle, aber ich werde sie bei 24 mal 24 Pixeln belassen. Als Nächstes zoome ich einfach so hinein und wenn Sie den Mauszeiger darüber bewegen, sehen Sie diesen kleinen Kreis mit der Aufschrift Arc. Ich werde darauf klicken. Jetzt, wo es ausgewählt ist, gehe ich zum Designinspektor Wie Sie hier sehen können, müssen wir einige Eigenschaften ändern. Wenn Sie dieses Nullprozentverhältnis sehen, werde ich es erhöhen. Hier, wenn ich es auf 20 erhöhe, schau, was passiert. Sie sehen jetzt, wir haben ein Loch in der Mitte und wir können dieses Verhältnis leicht kontrollieren. Ich werde die Dicke so ändern. Ich finde, 75 Prozent sehen gut aus und als Nächstes füge ich einen Farbverlauf hinzu. Ich gehe zu Feel und hier ändere ich den Typ von Solid auf Angular. Ich werde nicht linear verwenden, ich werde Angular verwenden, um diesen Gradienten zu erhalten. Das ist genau das, was wir für einen Spinner brauchen. Jetzt ändere ich die Richtung dieses Gradienten einfach so weil der Startpunkt hier sein sollte und wir im Grunde fertig sind. Das wird unser Spinner sein. Ich nenne es Spinner. Jetzt ist es an der Zeit, diese Animation zu erstellen. Diese Spinner-Animation. Dazu verwenden wir wie immer einen Komponentensatz. Lassen Sie mich daraus eine Komponente wie diese machen und dann brauchen wir ein paar Varianten. Ich klicke auf diesen Plus-Button , um eine Variante hinzuzufügen. Was brauchen wir? Wir müssen den Spinner darin auswählen und ihn drehen, aber wir können ihn nicht um 360 Grad drehen. So funktioniert es nicht, denn auf diese Weise Figma nicht die Spinner-Animation erstellen, die Loop-Animation, nach der wir suchen. Was müssen wir also tun? Nun, wir müssen es um 90 Grad im Uhrzeigersinn drehen. Ich werde die Umschalttaste gedrückt halten und sicherstellen, dass Sie diese Spinner-Ebene in Ihrer Variante auswählen. Wählen Sie Ihre Variante nicht selbst aus. Ich wähle diesen Spinner und ändere hier den Drehwert auf minus 90, um ihn im Uhrzeigersinn zu drehen. Als Nächstes wähle ich auch diese Variante und dupliziere sie noch einmal. Hier doppelklicke ich, um den Spinner auszuwählen und ihn einfach um 90 Grad zu drehen. Wir müssen minus 180 bekommen. Hier siehst du 180, denn wenn du 180 über 360 hast, ist es egal, ob du Minus oder Plus hast. Deshalb ändert Figma es automatisch auf 180. Das einzig Wichtige ist , dass Sie diese Form sehen. Als Nächstes wähle ich diese Variante aus, drücke Plus, doppelklicke, um den Spinner auszuwählen, und drehe ihn einfach um minus 90 Grad. Hier müssen wir 90 bekommen. Wir haben vier verschiedene Varianten, und jetzt können wir beginnen, sie zu verbinden. Ich wähle diese Standardvariante aus, gehe zur Registerkarte Prototyp und verbinde sie einfach mit dieser. Es sollte nach der Verzögerung sein, und die Verzögerung wird eine Millisekunde betragen. Hier ändere ich die Dauer auf 300 und wiederhole dasselbe nach einer Verzögerung, einer Millisekunde, und ich werde es auch für diese tun, nach der Verzögerung, eine Millisekunde und schließlich werde ich diese letzte Variante wieder mit unserer ersten Variante verbinden . Weil wir diese Animation wiederholen wollen. Hier nach Verzögerung, eine Millisekunde und wir sind fertig. Lassen Sie uns diese Animation schnell testen. Ich werde einfach so einen Rahmen erstellen. Lassen Sie mich die Hintergrundfarbe auf Schwarz ändern, zu Assets und von hier aus zum Laden der Animation gehen und eine Instanz dieser Komponente hierher ziehen und dort ablegen. Perfekt. Wählen Sie dieses Bild aus und spielen Sie es ab. Es funktioniert, aber ich bin mit seiner Dauer, seiner Geschwindigkeit nicht zufrieden . Ich werde es ein bisschen schneller machen. Ich wähle all diese Varianten aus, gehe zum Prototyp und ändere diesen Wert stattdessen 300 Millisekunden auf 150. Mal sehen, ob es viel besser funktioniert. Es sieht jetzt viel besser aus. Unser Ladespinner sieht gut aus. Jetzt ist es an der Zeit, diesen Button zu erstellen. Dazu drücke ich einfach T auf meiner Tastatur, erstelle eine Textebene und die Schriftgröße wird 17 Punkte betragen und lassen Sie uns Pay eingeben , weil wir eine Zahlungsschaltfläche erstellen, drücken Shift und A, um ihr ein automatisches Layout hinzuzufügen und ich werde es an der Mitte ausrichten. Diese Schaltfläche sollte eine schwarze Hintergrundfarbe haben. Einfach so und auch die vertikale Polsterung wird 16 sein und hier werde ich die horizontale Polsterung vorerst auf etwa 70 erhöhen . Es sieht gut aus. Später können wir einfach die Größe ändern , wenn wir eine Instanz dieser Komponenten erstellen. Dies wird unsere Standardvariante sein. Ich werde es auf Standard umbenennen und ich kann es auch ein bisschen abgerundet machen. Ich setze den Eckenradius auf etwa 12 und lass uns daraus eine Komponente machen. Jetzt brauchen wir ein paar Varianten. Ich werde eine Variante hinzufügen und diese zweite Variante wird loading heißen. Perfekt, und hier müssen wir diesen Ladespinner hinzufügen. Ich gehe zu Assets und ziehe von hier aus diesen Ladespinner einfach per Drag & Drop in meinen Button hier. Aber hier haben wir ein Problem. Wie Sie sehen können, wurde die Breite dieser Schaltfläche geändert. liegt daran, dass die Größenänderungsoption dieser Schaltfläche auf Hupen eingestellt ist. Ich werde es auf feste Breite ändern und einfach die Breite auf 170 verringern, einfach so, stellen Sie sicher, dass Sie auch hier korrigiert haben, und was den Rand zwischen diesen beiden Elementen angeht , werde ich ihn auf vielleicht acht Pixel setzen. Wir haben unseren Standardstatus, wir haben unseren Ladestatus. Lass uns weitermachen und sie verbinden und sehen, wie es funktioniert. Ich gehe zum Prototyp, erstelle eine Interaktion wie diese und der Trigger sollte auf Klick, Smart Animate und eine Dauer von 150 sein, das ist in Ordnung. Jetzt müssen Sie nur noch einen Rahmen erstellen und ihn ausprobieren. Hier haben wir diese Standardschaltfläche. Ich wähle diesen Rahmen aus. Drücke auf Abspielen. Lass mich darauf klicken. Da haben wir es. Es funktioniert, aber hier haben wir ein anderes Problem. Die Höhe unseres Buttons wurde ebenfalls geändert. Wir müssen dieses Problem ebenfalls beheben. Du weißt, was hier zu tun ist. Wie Sie sehen können, ist die Höhe auf 53 eingestellt. Ich ändere die Option zur Größenänderung auf feste Höhe und hier ändere ich sie ebenfalls auf feste Höhe und die Höhe wird 53 sein. Lassen Sie mich die Seite noch einmal aktualisieren. Es sieht sehr gut aus. Was ist der nächste Schritt? Wenn wir auf diese Pay-Schaltfläche klicken Lade-Spinner sehen, müssen wir auch diese Tick-Animation sehen. Wir können diese Tick-Animation in Figma erstellen, aber das wird so zeitaufwändig sein und ist nicht ideal. Stattdessen werden wir ein Plugin verwenden , das Lottie Animation heißt. Lottie stellt Ihnen animierte Elemente zur Verfügung, die Sie in Ihren Projekten verwenden können. Im Grunde können Sie damit eine Animation in eine GIF-Datei konvertieren und sie einfach in Ihrem Projekt verwenden , da Figma GIF-Dateien abspielt. Hier füge ich eine weitere Variante und gehe dann zu Resources, Plugins und suche einfach nach Lottie. Sie sehen hier, wir haben Lottie-Akten. Ich werde es ausführen. Ich bin bereits angemeldet. Stellen Sie sicher, dass Sie ein Konto erstellen und sich bei Ihrem Konto anmelden . Hier in der Suchleiste suche ich nach einem Häkchen. Wie Sie sehen können, haben Sie hier mehrere Möglichkeiten. Sie können zur nächsten Seite gehen und hier einfach verschiedene Optionen erkunden. Ich gehe einfach zur vorherigen Seite und für diese Interaktion verwende ich diese. Ich finde, es sieht ziemlich gut aus. Hier können wir eine Vorschau der Animation und Sie können sie auch anpassen. Wenn Sie möchten, können Sie die Farbe, die Farbe des Hintergrunds, nach Belieben anpassen . Da mein Button hier schwarz ist, ändere ich auch die Farbe des Hintergrunds in Schwarz und füge ihn dann als GIF ein, einfach so. Ich denke, ihre geringe Größe würde funktionieren. Drücken Sie Einfügen und wie Sie sehen können, erhalte ich diesen schwarzen Hintergrund. In Ihrem Fall sehen Sie möglicherweise das Häkchensymbol, aber so können Sie die Vorschau hier ändern. Wenn Sie dies auswählen und zum Feldbereich gehen, klicken Sie einfach hier und Sie sehen diese Option unten. Wenn Sie diesen Schieberegler verwenden, können Sie einfach die Vorschau auswählen, da ich hier eine Vorschau des letzten Frames anzeigen kann, und dann werde ich es verkleinern. Hier sind die Breite und Höhe dieses Spinners auf 24 mal 24 eingestellt. Ich wähle diesen aus und setze die Breite und Höhe ebenfalls auf 24 und ersetze ihn dann durch diesen Spinner, einfach so. Lassen Sie mich hier diesen Spinner auswählen und ihn entfernen. Das einzige, was wir jetzt tun müssen , ist eine Verbindung zwischen diesen beiden herzustellen. Ich werde diese Varianz wählen. Ich gehe zum Prototyp und verbinde ihn einfach mit diesem. Es sollte nach einer Verzögerung erscheinen. Hier stelle ich es nach Verzögerung ein. Achthundert Millisekunden sehen gut aus und es wird intelligent animiert sein. Ich möchte diesen Text auch loswerden, ich werde diesen Text ebenfalls entfernen und jetzt probieren wir es aus und sehen, wie es funktioniert. Ich drücke auf „Bezahlen“. Da haben wir es. Es funktioniert ganz gut. Aber hier haben wir dieses Problem, wie Sie sehen können, es wiederholt sich immer wieder. Das ist das Problem mit Lottie-Animation. Leider konnte ich keine Option finden um dieses Loop-Verhalten zu deaktivieren. Ich konnte dieses Problem jedoch mit einem Trick beheben. Was ich tun möchte ist Folgendes, ich wähle diese aus und füge einfach eine weitere Variante hinzu und dann gehe ich zurück zu den Lottie-Dateien hier und suche einfach nach dieser speziellen Animation. Ich werde nach einer Zecke suchen. Los geht's, öffne es, ändere die Farbe des Hintergrunds. Aber dieses Mal möchte ich es nicht als GIF einfügen. Ich werde es als SVG einfügen. Wenn du es als SVG einfügst, bekommst du im Grunde ein statisches Symbol und genau das brauche ich jetzt, ich füge es als SVG ein. Da haben wir es. Lassen Sie uns diesen loswerden und ich wähle ihn einfach aus und verkleinere ihn. Ich drücke K auf meiner Tastatur, um das Skalierungswerkzeug auszuwählen , und setze die Breite und Höhe auf 24, einfach so. Jetzt wähle ich dieses aus und verbinde es mit der letzten Variante. Hier müssen wir Nachschub haben und es sollte nicht intelligent animiert sein. Ich setze es auf Instanz, denn sobald die Animation fertig ist, möchte ich dieses statische Symbol sofort sehen. Jetzt denke ich, dass es gut funktionieren sollte. Ich werde es noch einmal spielen. Klicken Sie auf Bezahlen. Da haben wir es. Es hat gut funktioniert und diese Schaltfläche reagiert übrigens . Wenn ich nun die Größe ändern möchte, kann ich einfach diese Instanz hier auswählen und ihre Breite einfach nach Belieben anpassen. Ich kann auch die Höhe anpassen und es würde gut funktionieren. Ordnung Leute, lasst uns dieses Video abschließen. Hoffe es hat dir gefallen und wir sehen uns im nächsten. 18. Animierte Mesh: In diesem Video erstellen wir einen animierten Netzverlauf in Figma. Im Grunde ist das, was Sie hier sehen, ein Netzgefälle. Es gibt einige Farbverläufe, die miteinander vermischt sind. Wie Sie sehen können, bewegen sich all diese Farben ständig. Mal sehen, wie Sie diesen animierten Netzverlauf in Figma nachbauen können . Wenn Sie in der Figma-Projektdatei auf die Seite mit animierten Mesh-Farbverläufen gehen , können Sie sehen, dass ich diesen Screenshot dieser Stripe-Website bereits als Referenz erstellt habe. Um diesen animierten Netzverlauf zu erstellen, müssen wir zuerst diesen Netzverlauf erstellen. Dazu benötigen wir einen Rahmen. Ich drücke „A“ auf meiner Tastatur und wähle hier diesen Desktop-Rahmen und erstelle diesen Farbverlauf. Was wir brauchen sind ein paar zufällige Formen, ein paar zufällige Blobs, um diese Blobs zu erstellen . Ich werde ein Plugin namens Blob verwenden. Hier gehe ich zum Plugins-Tab und suche von hier aus nach Blob. Da haben wir es. Dies ist das Plug-in, das ich verwenden werde. Sie können jedes andere Plug-In verwenden, das Sie möchten, oder Sie können sogar zufällige Formen mit dem Stiftwerkzeug erstellen , das Ihnen überlassen ist. Aber ich bevorzuge es, dieses Plug-in zu verwenden , um den Prozess zu beschleunigen. Ich werde es ausführen. Wie Sie sehen können, können wir hier die Komplexität und Einzigartigkeit dieses Blobs kontrollieren . Ich klicke auf „Einfügen“ , um einen Blob hinzuzufügen. Da haben wir es. Ich werde die Komplexität modifizieren, um sie ein bisschen einzigartiger zu machen. Es fügt ein, und ich werde diesen Vorgang immer wieder wiederholen und einfach diese beiden Variablen ändern , um neue und einzigartige Formen zu erstellen. Lass mich das schnell machen. Ich denke, das reicht vorerst. Wir haben viele verschiedene Blobs. Was ich jetzt tun werde, ist diesen ganzen Desktop-Rahmen mit diesen Blobs zu fühlen . Ich werde einen hier hinstellen. Es ist nicht in unserem Rahmen, mach dir keine Sorgen, wir werden sie später hineinbringen. Ich werde eins genau dort hinstellen, vielleicht ein bisschen kleiner machen. Platziere es genau hier und mach das Gleiche für den gesamten Frame. Ich werde diesen Prozess beschleunigen. Da haben wir es. Unser Rahmen ist mit diesen Klecksen gefüllt. Ich wähle sie alle in meiner Ebenenliste aus. Ich werde sicherstellen, dass sie in meinem Rahmen sind. Einfach so. Der nächste Schritt besteht darin, die Farbe dieser Blogs nacheinander zu ändern. Ich wähle diesen aus, gehe rüber, um zu fühlen und benutze diese Pipette, ich wähle diese rote Farbe und ich werde dasselbe für alle anderen Blobs machen. Vielleicht lila für diesen, für diesen nehme ich Gelb. Ich werde diesen Prozess beschleunigen. Da haben wir es. Jetzt haben wir zufällige Farben für diese Blobs. Jetzt müssen wir sie zusammenfügen. Ich wähle sie alle aus und drücke „Strg-G “ oder „Command G“, um sie zu gruppieren. Gehen Sie dann hier zum Effektebereich, klicken Sie auf diese Plus-Schaltfläche und ich füge den Ebenenunschärfeeffekt hinzu, einfach so. In den erweiterten Einstellungen werde ich nun die Stärke der Unschärfe drastisch erhöhen und sicherstellen , dass sie sich reibungslos vermischen. Einfach so. Ich werde es noch weiter erhöhen. So etwas sollte funktionieren. Ich kann jetzt die Größe dieser Blobs ändern und auch ihre Reihenfolge hier ändern, je nach meinen Bedürfnissen. So etwas sollte funktionieren. Wir sind fast fertig. Dieser Gradient sieht jedoch ziemlich flach aus. Es hat keine Textur. Ich werde dazu etwas Noise hinzufügen, ich werde ein anderes Plugin namens Noise verwenden. Lass mich hier danach suchen. Da haben wir es. Ich werde es ausführen. Hier können Sie dieses Geräusch nach Belieben einstellen. Sie können die Dichte ändern, Sie können den Kontrast ändern usw. Moment werde ich nur die Dichte ändern. Ich denke, so etwas sollte funktionieren. Ich klicke einfach so auf dieses Häkchensymbol. Wie Sie jetzt sehen können, wurde dieses Geräusch zu meiner Leinwand hinzugefügt. Es ist noch nicht im Rahmen. Ich werde es einfach so hineinbringen. Ich werde es einfach so vergrößern. Aber es ist schwarz. Es sieht nicht gut aus. Was ich tun werde, ist Folgendes, ich werde die Opazität dramatisch verringern. Ich setze es auf vielleicht 10 Prozent. Ich kann es sogar auf vielleicht sechs Prozent reduzieren , es sieht gut aus. Ich werde es innerhalb dieser Gruppe verschieben. Lassen Sie mich diese Gruppe Gradient nennen. Damit unser Mesh-Gradient fertig ist, es an der Zeit, ihn zu animieren. Das einzige, was wir tun müssen, ist das. Wir müssen einfach diesen Desktop auswählen, duplizieren und dann auf dem nächsten Bildschirm hier als Ziel diese Blobs verschieben. Ich wähle diesen aus, zum Beispiel diesen Vektor, und verschiebe ihn nach unten und verschiebe diesen lila nach oben und mache ihn größer. Einfach so. Ich kann diesen gelben auch nach oben bewegen. Ich kann die Reihenfolge ändern und sie viel größer machen, einfach so. Dann werde ich alles andere nacheinander verschieben. Wir möchten Figma nur wissen lassen, dass diese Blobs verschoben und in der Größe geändert werden sollten. Ich wähle diesen Desktop-Frame aus, gehe zum Prototyp-Tab und stelle einfach eine Verbindung zwischen diesen beiden Frames her . Der Auslöser wird nach der Verzögerung sein. Natürlich wird die Verzögerung eine Millisekunde betragen, und die Art der Animation sollte Smart Animate sein. Hier sollte die Dauer 10.000 Millisekunden betragen weil wir wollen, dass sich diese Blobs so langsam bewegen. Einfach so und um diese Animation zu wiederholen, wähle ich diesen zweiten Frame aus und verbinde ihn wieder mit diesem ersten Frame. Alles andere hier sollte intakt sein. Lassen Sie mich nun auf diese Play-Schaltfläche klicken und sehen wir uns das Ergebnis an. All diese Farben bewegen sich reibungslos. Wenn Sie möchten, können Sie diesem Farbverlauf weitere Farben hinzufügen und diesem Farbverlauf weitere Farben hinzufügen sogar den Grad der Unschärfe anpassen. Lassen Sie uns nun sehen, ob wir diesen Farbverlauf irgendwie maskieren können, wie wir ihn hier auf dieser Stripe-Website haben. Es ist so einfach. Ich erstelle hier ein Rechteck, genau so, genau so und während es ausgewählt ist, ich die Eingabetaste, um in den Bearbeitungsmodus zu gelangen Ich nehme diesen unteren rechten Knoten und halte die Umschalttaste gedrückt und bewege ihn einfach so nach oben. Ich kann mir das auch schnappen und runterbringen. Klicken Sie als Nächstes in der Liste der Ebene auf „Fertig“ Ich werde dieses Rechteck verschieben und es unter unsere Verlaufsgruppe legen. Das sollten wir nicht sehen können. Bevor wir diesen Farbverlauf maskieren, wähle ich diesen rechteckigen aus, drücke „Control C“ und wähle diesen zweiten Frame und drücke „Control V“ und ziehe ihn ebenfalls nach unten, da wir diese Ebene auf beiden Bildschirmen haben müssen. Als Nächstes wähle ich diese beiden Ebenen aus, die Verlaufsgruppe und dieses Rechteck, das wir gerade erstellt haben, gehe zur Werkzeugleiste und klicke einfach so auf diese Schaltfläche. Wie Sie sehen können, haben wir diese Maske. Lass uns dasselbe für diesen Bildschirm machen, gut. Wenn ich einfach diesen Desktop-Modus auswähle und auf „Abspielen“ klicke, wie Sie sehen können, haben wir diesen animierten Netzverlauf in dieser Form maskiert. Leute, das ist alles für dieses Video. Hoffe es hat dir gefallen und wir sehen uns im nächsten. 19. Scroll: [MUSIK] Die Website von Apple war aufgrund ihrer fantastischen Lernseiten mit flüssigen Animationen für viele UI-UX-Designer eine großartige Inspirationsquelle für Design und Interaktion großartige Inspirationsquelle für . In der heutigen Folge werde ich Ihnen zeigen, wie Sie die Apple Studio Display-Lernseite neu erstellen können, einschließlich dieser reibungslosen Animation in Figma. Lass uns eintauchen. Wenn du auf apple.com gehst und hier das Mac-Menü öffnest, kannst du das Menü des Displays öffnen. Wenn Sie von hier aus Studio Display auswählen, wird diese Lernseite geladen. Wenn ich nach unten scrolle, werden Sie sehen, dass diese Animation abgespielt wird. Es ist sehr glatt. werden wir zu diesem Punkt kommen. Wenn ich weiter nach unten scrolle, schau, was passiert. Das Studio-Display erscheint flüssig und schließlich werden diese beiden Textebenen eingeblendet. Lassen Sie es uns zuerst analysieren. Wir müssen sicherstellen, dass wir dieses Bild haben , also habe ich dieses Bild bereits heruntergeladen. Außerdem sollte dieses Studio Display-Bild die gesamte verfügbare Breite und Höhe unseres Bildschirms einnehmen , genau wie das, was wir hier sehen. In der Mitte benötigen wir diese Textebene. Sobald dieser Übergang erfolgt ist, sollte diese Textebene ausgeblendet und dieses Studio-Display verkleinert werden Schließlich sollten diese beiden Textebenen eingeblendet werden. Lassen Sie mich Ihnen zeigen, wie Sie das in Figma schnell machen können. Hier habe ich bereits dieses Apple Studio Display-Bild vorbereitet und auch diese beiden Textebenen vorbereitet. Für diese Animation drücke ich A und erstelle einen Rahmen in benutzerdefinierter Größe. Hier setze ich die Breite und Höhe einfach so auf 1920 x 1080. Dann ziehe ich dieses Bild einfach so in diesen Rahmen und lege es dort ab. Sie müssen sicherstellen , dass es so skaliert , weil wir im Moment nur das Hintergrundbild sehen wollen . Dann müssen wir diesen Text hierher bringen. Lass es mich ziehen und ablegen. Ich werde es so weiß machen und es sowohl horizontal als auch vertikal an der Mitte ausrichten . Das ist Schritt eins. Als Nächstes wähle ich diesen Frame 1 aus, dupliziere ihn, drücke Strg D oder Command D lasse ihn einfach so herunterfahren. In diesem Schritt müssen wir diese beiden Ebenen verkleinern. Ich halte die Umschalttaste gedrückt und wähle beide aus. Jetzt drücke ich K, um das Skalierungswerkzeug auszuwählen, halte die Umschalttaste und die Alt-Taste gedrückt, um sie proportional zu verkleinern, einfach so. Ich werde es verkleinern und sie auch nach oben verschieben. Als Nächstes wähle ich diese Textebene aus und setze ihre Opazität auf Null Prozent da sie verschwinden muss. Als Nächstes werde ich diesen Frame noch einmal duplizieren und ihn herunterziehen. Dieses Mal werde ich diesen Rahmen einfach so nach oben verschieben. Hier müssen wir diese beiden Textebenen platzieren. Also werde ich sie gleich hierher bringen. Es sieht gut aus. Aber um diese Textebenen zu animieren, so wie wir es hier sehen, müssen wir sicherstellen, dass diese beiden Textebenen auch auf dem zweiten Frame platziert werden . Ich drücke Control C oder Command C, wähle Frame 2, wähle Frame 2, drücke Strg V oder Command V, aber diese beiden Textebenen sollten irgendwie maskiert sein. Ich werde die Umschalttaste und die Leertaste auf meiner Tastatur gedrückt halten und sie einfach so herunterfahren. Jetzt befinden sie sich immer noch in Frame 2, aber wir können es nicht sehen. Wir sind fast fertig. Wir müssen nur die Interaktionen hinzufügen. Ich wähle diesen Frame 1 gehe hier zum Prototyp-Tab. Jetzt kann ich diese beiden Bildschirme einfach so verbinden . Ich setze den Auslöser auf Taste. Hier drücke ich die rechte Pfeiltaste auf meiner Tastatur und die Animation wird intelligent animiert, leiser. Stellen wir es auf 1000 Millisekunden, das wird reichen, denke ich. Lassen Sie uns dasselbe für diesen Bildschirm tun. Ich werde sie verbinden. Es wird Key, Smart Animate und 1000 Millisekunden sein. Lass es uns ausprobieren und sehen, wie es aussieht. Gut. Ich drücke die rechte Pfeiltaste auf meiner Tastatur. Nett. Wie Sie sehen können, hatten wir wieder diese flüssige Animation. Hier haben wir ein Problem. Diese Textebenen werden angezeigt, müssen aber eingeblendet werden. Wir müssen hier eine Anpassung vornehmen. Wenn Sie einfach zu Frame 2 gehen und wir diese beiden Textebenen hier auswählen, können wir die Opazität auf Null Prozent verringern. Jetzt sollte es gut funktionieren. Versuchen wir es noch einmal. Gut. Da haben wir es. Jetzt haben wir diesen schönen reibungslosen Übergang. 20. Animierte Tab: [MUSIK]. In diesem Video werden wir gemeinsam eine animierte Tab-Leiste erstellen, genau wie das, was Sie hier sehen. Lassen wir uns behaupten. Hier in der Figma-Projektdatei müssen Sie also nach der animierten Tabbar-Seite suchen . Und drinnen kannst du sehen, dass ich bereits ein paar Icons für dich vorbereitet habe. Normalerweise benötigen wir für einen Tab, oder wir benötigen zwei verschiedene Zustände für unsere Symbole, den Standardstatus und den ausgewählten Status. Aus diesem Grund habe ich hier zwei verschiedene Zeichen für diese Symbole vorbereitet, das Umrisszeichen und das solide Zeichen. Da wir sie in Komponenten umwandeln werden, ist es sehr wichtig zu wissen, wie man sie richtig benennt, da Figma sie anhand ihrer Namen kategorisieren wird . Also hier haben wir Home Forward Slash Solid. Für diesen haben wir Home Forward Slash Outline. Das Gleiche gilt für all diese anderen Symbole. Der erste Schritt besteht also darin, unsere Icons in Komponenten umzuwandeln. Also wähle ich sie alle aus, gehe zur Werkzeugleiste und wähle von hier aus Mehrere Komponenten erstellen aus. Als Nächstes wähle ich diese Gliederungssymbole aus und dupliziere sie, um nur eine Instanz dieser Komponenten zu erstellen. Ich halte die Umschalttaste auf meiner Tastatur gedrückt und bewege sie mit den Pfeiltasten einfach so nach unten. Wie Sie sehen können, sind die Symbole hier unterschiedlich, was darauf hinweist, dass dies die Instanzen dieser Komponenten sind , da wir die Masterkomponenten in unserem Design nicht verwenden möchten . Während sie ausgewählt sind, füge ich ihnen ein anderes Layout hinzu. Also drücken Sie Shift und A. Los geht's. Ich nenne es Tab Bar. Lassen Sie uns für diese Tab-Leiste eine Hintergrundfarbe haben. Ich füge eine Füllung hinzu. Es wird weiß sein. Richten wir alles auf die Mitte aus. Lassen Sie uns hier auch die Polsterung ändern. Ich setze die vertikale Polsterung auf 24. Was die horizontale Polsterung angeht, setzen wir sie auf etwa 66. Das ist in Ordnung. Ich werde den Abstand zwischen auf etwa 54 erhöhen . So weit, so gut. Jetzt mache ich weiter und mache diese Tab-Leiste komplett abgerundet. Später können wir den Stil ändern, aber im Moment bevorzuge ich hier eine abgerundete Tab-Leiste. Lassen Sie uns noch einmal eine Vorschau unserer Tab-Leiste anzeigen, lassen Sie uns sehen, was wir benötigen. Wenn ein Tab ausgewählt ist, sollte das Symbol auf durchgehend geändert werden. Außerdem müssen wir diesen Kreis hinter diesem Tab sehen. Ich beginne damit, hier einen Kreis zu erstellen. Lass mich einen Kreis erstellen. Einfach so. Mach dir darüber einfach keine Sorgen. Es nimmt Platz ein. werden wir reparieren. Wir müssen nur auch die Farbe ändern. Ich ändere es auf Blau, etwa so. Während es ausgewählt ist, drücke ich hier auf diesen Plus-Button, die absolute Position angibt. Da haben wir es. Es nimmt keinen Platz mehr ein. Ich werde sicherstellen, dass es über all diesen Tabs platziert ist . Andernfalls können wir unsere Tabs nicht sehen. Ändern wir seine Dimension auf 40 mal 40. Ich werde sicherstellen, dass es mit meinem Tab hier übereinstimmt. Ich verschiebe es auf die linke Seite. Wenn ich die Alt- oder Wahltaste auf meiner Tastatur gedrückt halte, können Sie sehen, dass wir auf allen Seiten ein Achterpolster haben. Als Nächstes müssen wir dieses Symbol von Kontur zu Vollbild ändern. Es wird so einfach sein, da wir alle unsere Symbole in Komponenten umgewandelt haben alle unsere Symbole in Komponenten umgewandelt Ich wähle dieses aus, Home Outline, und gehe zum Designinspektor. Wie Sie sehen können, haben wir hier dieses Drop-down-Menü, und ich werde es öffnen. Ich ändere es auf solide. Da haben wir es. Als nächstes müssen wir die Farbe auf Weiß ändern und unsere Tab-Leiste ist fertig. Jetzt müssen wir diesen ganzen Tab in eine Komponente umwandeln, da wir ihm mehrere Varianten hinzufügen werden. Ich wähle die Tab-Leiste aus und klicke einfach auf diese Schaltfläche, um sie in eine Komponente zu verwandeln , und klicke auf diese Schaltfläche um ein paar Varianten hinzuzufügen. Insgesamt benötigen wir vier Varianten, da wir vier verschiedene Tabs haben. Gut. Für diesen Komponentensatz benötigen wir eine Eigenschaft, und ich nenne sie Tab. Als Nächstes wählen wir diese erste Variante aus und ändern den Wert auf home, was bedeutet, dass der Home-Tab ausgewählt ist. Ich wähle dieses aus und ändere es in ein Lesezeichen. Gut. Wählen wir diesen aus und ändern den Wert dieser Tab-Eigenschaft in Benachrichtigung. für diesen abschließend Lassen Sie uns es für diesen abschließend in Nachricht ändern. Jetzt müssen wir diese Varianten nacheinander ändern. Also fange ich mit dem Kreis an. Ich wähle es hier aus. Halten Sie die Umschalttaste gedrückt und bewegen Sie sie auf die rechte Seite. Einfach so. Richten Sie es an diesem Lesezeichensymbol aus. Jetzt wähle ich hier das Symbol Mein Zuhause ändere den Typ von Vollton auf Kontur. Hier wähle ich dieses Lesezeichen aus, ändere seinen Typ auf einfarbig und ändere seine Farbe auf Weiß. Ich werde dasselbe für all diese Tabs tun. In diesem Fall wähle ich die Ellipse aus, halte die Umschalttaste gedrückt und verschiebe sie auf die rechte Seite und lege sie hinter dieses Glockensymbol. Da haben wir es. Wählen Sie dieses Startsymbol aus und ändern Sie seinen Typ in Gliederung. Ich wähle dieses Glockensymbol aus und ändere es auf durchgehend und mache es auch weiß. Wählen Sie es schließlich für dieses aus, halten Sie die Umschalttaste gedrückt und platzieren Sie es hinter ein Nachrichtensymbol. Sie einfach sicher, dass es perfekt zu Ihrem Symbol passt. Ändern Sie den Typ dieses Home-Symbols in eine Gliederung. Ich wähle dieses Nachrichtensymbol aus, ändere es auf durchgehend und mache es weiß. Wir haben also unsere Tab-Bars. Jetzt ist es an der Zeit, Verbindungen herzustellen. So werde ich es machen. Ich beginne mit diesem Home-Symbol. Wir müssen dieses Home-Symbol auswählen und es für all diese drei mit dieser ersten Variante verbinden. Sie also, solange es ausgewählt ist Gehen Sie also, solange es ausgewählt ist, zur Registerkarte Prototyp und verbinden Sie es einfach mit diesem , dem ersten. Hier sollte der Trigger auf click smart animate stehen. Ich setze die Dauer auf 300 Millisekunden. Lassen Sie uns dasselbe für diesen tun. Wir müssen nichts anderes ändern und das auch nicht. Als Nächstes mache ich es für das Lesezeichen. Ich wähle diesen aus verbinde ihn mit der zweiten Variante. Wählen Sie auch diese aus, verbinden Sie sie schließlich mit der zweiten Variante, wählen Sie diese aus, verbinden Sie sie mit der zweiten Variante. Jetzt machen wir es für das Glockensymbol. Ich werde es mit der dritten Variante verbinden, auch mit dieser. Endlich dieser. Letzt wählen wir dieses Symbol aus, das mit der letzten Variante verbunden ist, auch diese und diese , einfach so. Jetzt ist es an der Zeit, es auszuprobieren. Ich werde hier einen Rahmen erstellen. Sie können einen Telefonrahmen erstellen. Ich werde vorerst einen Rahmen in benutzerdefinierter Größe erstellen. Machen wir es schwarz, einfach so. Von Assets gehe ich zur animierten Tab-Leiste und ziehe einfach eine Instanz dieser Tab-Leiste hierher, genau so, und richte sie an der Mitte aus. Ich wähle diesen Rahmen aus. Klicken Sie auf Play und lassen Sie uns sehen, ob alles gut funktioniert oder nicht. Hier haben wir unseren Bundesstaat Home Selected. Ich werde auf diesen klicken. Da haben wir es. Es ist vollständig responsiv und interaktiv. Wie cool ist das? Das ist alles für dieses Video. Wir sehen uns im nächsten. 21. Animiertes Bild Carousel: [MUSIK] In diesem Video zeige ich Ihnen, wie Sie dieses animierte Bildkarussell in Figma erstellen , einfach so. Wenn du bereit bist, lass uns beginnen. Ich möchte, dass du weitermachst und dieses animierte Bild als Karussellseite innerhalb des Figma-Projekts öffnest dieses animierte Bild als Karussellseite . Drinnen können Sie sehen , dass ich diese Bilder bereits für Sie vorbereitet habe. Hier haben wir ein paar Apple Watches, und auch hier habe ich diese Textgruppe. Wie Sie sehen können, haben wir hier einen einfachen Titel und einen Untertitel. Das erste, was wir tun müssen, ist einen Rahmen zu erstellen. Ich drücke A auf meiner Tastatur und erstelle einen Rahmen in benutzerdefinierter Größe. Stellen wir die Breite und Höhe einfach so auf 500 Pixel ein. Jetzt wähle ich all diese Bilder aus und füge sie in diesen Rahmen ein. Lass mich sie einfach so nach unten bewegen. Aber der Punkt ist, wir sollten jeweils nur eine Uhr sehen. Ich wähle diesen Frame 1 hier aus und stelle sicher, dass dieses Kontrollkästchen für den Clip-Inhalt aktiviert ist. Andernfalls werden wir diese Uhren sehen können . Stellen Sie sicher, dass Sie diese Häkchen ankreuzen. Ich denke, wir können dieses Bild ein wenig nach oben verschieben. Wo auch immer Sie dieses Bild nach oben verschieben möchten, müssen Sie sicherstellen, dass Sie auch alle anderen Bilder auswählen. Ich wähle sie alle aus und verschiebe sie nach oben. Was brauchen wir hier? Direkt unter diesem Bild benötigen wir diesen Indikator. Sie denken vielleicht, wir brauchen ein paar Kreise und ein Rechteck, aber das ist falsch. Warum? Denn sieh dir an, was hier passiert. Wenn ich dieses Bild ziehe, siehst du, was passiert. Dieser erste Indikator wird zu einem Kreis und dieser zweite wird zu einem Rechteck. Um einen solchen Indikator zu erstellen, müssen wir von Anfang an ein Rechteck verwenden. Wir brauchen keinen Kreis. Lassen Sie mich hier ein Rechteck erstellen, einfach so. Mach es sehr klein, vielleicht 28 mal acht, ungefähr so. Mach es komplett abgerundet. Aber ich werde es genau hier platzieren und dann duplizieren, drücke Strg D oder Command D. Verschiebe es auf die rechte Seite. Nun, dieser sollte ein Kreis sein. Dazu müssen wir nur sicherstellen, dass Breite und Höhe gleich sind. Ich werde die Breite auf acht reduzieren. Jetzt werde ich es noch einmal duplizieren und genau dort platzieren. Jetzt wähle ich sie alle aus und füge ihnen ein automatisches Layout hinzu, also drücke Shift und A. Los geht's. Lassen Sie mich es einfach so in Indikator umbenennen. Dieser erste, der ausgewählte, sollte etwas dunkler sein. Ich werde es auch ein bisschen dunkler machen , einfach so. Unser Indikator ist ebenfalls fertig. Lassen Sie mich es an der Mitte ausrichten. Ich kann es ein bisschen nach oben verschieben. Das nächste, was wir brauchen, sind die Textebenen. Ich werde sie herbringen. Richten wir es an der Mitte und ich werde es ein wenig nach oben verschieben. Wir haben unseren Hauptrahmen erstellt. Jetzt ist es an der Zeit, diesen Frame zu animieren. Dazu werden wir wie gewohnt Varianz und interaktive Komponenten verwenden . Ich wähle diesen Frame 1 aus und verwandle ihn in eine Komponente und füge ihm eine Variante hinzu, einfach so. Lassen Sie mich diesen Komponentensatz auswählen und den Eigenschaftsnamen in Folie ändern. Diese erste Variante wird eine sein. Bei diesem zweiten werden es zwei sein. Wir werden in ein paar Sekunden eine weitere hinzufügen. Aber lassen Sie uns zuerst sehen, was wir hier tun müssen. Wenn ich nur eine Vorschau dieses Karussells ansehe, können Sie sehen, dass, wenn ich dieses Bild auf die linke Seite ziehe, es genau so anfängt, sich zu drehen. Dann kommt die nächste Uhr ebenfalls rotierend in den Rahmen , einfach so. Folgendes müssen wir tun. Wir haben hier unseren Ausgangspunkt und es ist in Ordnung. Für diese zweite Variante wähle ich all diese Bilder aus, auch diejenigen, die sich außerhalb dieses Rahmens befinden. Ich halte die Umschalttaste gedrückt und bewege sie mit den Pfeiltasten einfach so nach links, bis wir unsere zweite Uhr sehen. Als Nächstes wähle ich dieses aus und richte es horizontal in der Mitte aus. Gut. Aber jetzt bewegen wir sie einfach ohne Drehung. Um diesen Rotationseffekt zu erzielen, wähle ich diesen ersten aus. Ich werde es um 30 Grad drehen. Halten Sie die Umschalttaste gedrückt und versuchen Sie, sie hier um 30 Grad zu drehen. Alternativ können Sie den Wert auch einfach hier angeben. Aber was ist mit diesem? Wie Sie sehen können, dreht sich hier die pinke Uhr, als ich versuchte, sie nach links zu ziehen auch die pinke Uhr, als ich versuchte, sie nach links zu ziehen. Um das zu erreichen, muss ich hier zu meiner ersten Variante übergehen. Ich wähle diese zweite aus , unsere pinke Uhr, und drehe sie auf minus 30 Grad, einfach so. Unsere erste und zweite Variante sind fertig. Jetzt brauchen wir eine weitere Variante. Ich wähle diese zweite aus und klicke auf diese Plus-Schaltfläche, um eine weitere Variante hinzuzufügen. Dieser wird Nummer 3 sein. Ich werde das Gleiche wiederholen. Ich werde all diese Bilder einfach so auswählen. Halten Sie die Umschalttaste gedrückt und bewegen Sie sie auf die linke Seite. Da haben wir es. wähle ich diese gelbe Uhr aus und lasse sie in die Mitte laufen . Wählen Sie diese rosafarbene Uhr hier, Nummer 2, und drehen Sie sie um 30 Grad. Einfach so, wie Sie hier sehen können, haben wir 30 und in der zweiten Variante sollten wir auch diese dritte Uhr rotieren. Wir müssen es auf minus 30 Grad drehen. Aber was ist mit unserem Indikator? Der erste ist schon fertig. Ich werde hier hineinzoomen. den zweiten betrifft, Was den zweiten betrifft, so werde ich Folgendes tun Wir können diesen nicht einfach auf die rechte Seite verschieben. Warum? Denn hier, wie Sie sehen können, wenn ich versuche, diese Uhr auf die linke Seite zu ziehen , verwandelt sich dieser Indikator, der erste, einfach in einen Kreis. Ich ändere ihre Position hier nicht und genau das müssen wir tun. Ich wähle diesen zweiten aus. Ich gehe zu Design und setze die Breite auf 28, genau wie wir es hier haben. Ich werde die Farbe auf dieses Dunkelgrau ändern. Dann wähle ich diesen aus, den ersten, und setze seine Breite auf acht und ändere seine Farbe auf dieses Hellgrau. Das müssen wir auch hier tun. Ich wähle diesen Indikator und ich wähle diesen dritten aus, erhöhe die Breite einfach so auf 28. Ändern Sie die Farbe in dunkelgrau. Wählen Sie dieses aus, stellen Sie seine Breite auf acht ein und ändern Sie einfach die Farbe wieder auf hellgrau. Cool. In diesem Beispiel werde ich diese Textebenen wie die Farbe nicht ändern. Es wird so einfach sein, du kannst es einfach auf Rosa, Grün und Gelb einstellen. Der wichtigste Punkt, den Sie hier lernen müssen, ist, wie diese Uhr und auch diesen Indikator animieren. Falls Sie Schwierigkeiten haben diese Uhren zu bewegen, insbesondere wenn Sie diese Uhren draußen nicht sehen können, Folgendes tun: Sie können die Umschalttaste und O drücken, um die Gliederungsansicht aufzurufen. Wie Sie sehen können, sind sogar diese Uhren außerhalb dieses Rahmens für Sie sichtbar, und das wird sehr hilfreich sein , wenn Sie sie bewegen möchten. Um zum normalen Modus zurückzukehren, können Sie erneut Shift O drücken. Aber was ist mit den Verbindungen? Folgendes müssen Sie tun. Viele Leute machen einen sehr häufigen Fehler, wenn sie diese Drag-Animation erstellen wollen . Sie wählen hier ihre Variante aus, zum Beispiel diese, Variante 1. Dann versuchen sie, es mit dem nächsten zu verbinden und ändern einfach den Trigger, um zu ziehen. Das wird nicht funktionieren. Wenn Sie diese beiden Varianten einfach so verbinden, funktioniert die Drag-Animation nicht wie erwartet. Stattdessen müssen Sie dieses Bild auswählen, dieses, und dann versuchen eine Verbindung zwischen diesen beiden herzustellen. Jetzt setze ich den Trigger auf On Drag. Es wird smart animate 300 Millisekunden sein , sieht gut aus. Lass uns hier dasselbe tun. Ich wähle diesen aus verbinde ihn wieder mit der ersten Variante. Es wird wieder Drag-On sein. Verbinden wir diesen mit dem dritten beim Ziehen und den dritten mit dem zweiten, es wird beim Ziehen sein und wir sind im Grunde fertig. Lass es uns ausprobieren und sehen, wie es aussieht. Ich werde hier einen Rahmen in benutzerdefinierter Größe erstellen, 500 mal 500 Pixel, einfach so. Assets suche ich nach animierten Bildkarussell und ziehe dieses in diesen Rahmen und richte es sowohl horizontal als auch vertikal aus. Sie können weitermachen und es in einen beliebigen Rahmen legen. Aber für dieses Beispiel ziehe ich es vor, es in diesen Rahmen zu legen und es einfach in der Vorschau anzuzeigen. Mal sehen, ob es funktioniert. Da haben wir es. Es funktioniert ganz gut. Unsere Anzeige ist animiert und auch diesen Rotationseffekt haben wir hier für diese Uhren. Falls Sie dieses Bildkarussell auf einem Handy verwenden möchten. Was du tun kannst, ist das. Sie können hier einfach so einen Handyrahmen erstellen, zum Beispiel iPhone 14. Dann ziehen Sie es einfach per Drag & Drop hinein und drücken Sie einfach K und skalieren Sie es einfach so. Es würde perfekt funktionieren, wenn ich einfach diesen mobilen Rahmen auswähle und eine Vorschau anzeigen würde. Sie können sehen, dass es gut funktioniert. Das ist das Schöne an der Verwendung interaktiver Komponenten. Leute, ich hoffe, euch hat diese Lektion gefallen. Wir sehen uns im nächsten. 22. Animierte schwimmende Action: In diesem Video zeige ich Ihnen, wie Sie eine animierte schwebende Aktionsschaltfläche wie diese erstellen . Wenn du bereit bist, lass uns loslegen. Hier in der Figma-Projektdatei habe ich diese Buttons bereits für Sie vorbereitet. Um diese Interaktion zu erzeugen, benötigen wir zwei verschiedene Varianten, wir benötigen diese geschlossene Variante und auch diese geöffnete Variante. Folgendes werde ich tun, ich wähle diese Plus-Schaltfläche und verwandle sie in eine Komponente wie diese und ich füge auch eine Variante hinzu, um einen Komponentensatz zu erstellen. Dieser Komponentensatz wird Button genannt und seine Eigenschaft wird auch den Namen state erhalten. Der Wert dieser Eigenschaft für die erste Variante wird geschlossen und für diese wird geöffnet. Also, was brauchen wir? In diesen beiden Varianten benötigen wir auch diese Schaltflächen. Ich wähle diesen Komponentensatz aus und werde ihn vergrößern. Aber sieh dir an, was passiert, das Problem hier ist, dass die Einschränkungen für diese beiden Schaltflächen nicht richtig eingestellt sind. Ich wähle diese aus und ändere die Einschränkungen nach oben und links und stelle sicher, dass auch diese die gleichen Einschränkungen hat. Jetzt können wir diesen Komponentensatz einfach vergrößern. Lassen Sie mich diese Varianten verschieben, irgendwo hier und jetzt wähle ich diese Schaltflächen aus und füge sie in diese geschlossene Variante ein. Stellen Sie sicher, dass Sie sie in dieser Variante platzieren. Jetzt richte ich alles vertikal aus, einfach so und horizontal, und achte darauf, dass du sie genau hier platzierst. Sie müssen es an Ihrer Plus-Taste ausrichten. Als Nächstes verschiebe ich sie und lege sie unter unser Plussymbol und die Plus-Schaltfläche, sodass wir sie auf diese Weise ausblenden können. Jetzt, wo Sie ausgewählt sind, kopiere ich sie, drücke Strg C oder Befehl C und füge sie auch in diese offene Variante ein. Ich wähle diese offene Variante und drücke Strg-V oder Command V und verschiebe sie einfach hierher. Mal sehen, was wir brauchen , wenn es geschlossen ist, müssen wir dieses Plus-Symbol sehen, aber wenn es geöffnet ist, müssen wir stattdessen dieses Symbol zum Schließen sehen und dann sollten diese Schaltflächen erscheinen. Ich werde diese geschlossene Variante etwas nach oben verschieben , um hier mehr Platz zu haben. Als erstes wähle ich dieses Symbol aus und wähle halte einfach die Umschalttaste gedrückt und drehe es um minus 45 Grad, um dieses Symbol zum Schließen zu erhalten. Das ist der erste Schritt. Der nächste Schritt besteht darin, diese Schaltflächen, die Ordnerschaltflächen „Musik“ und „Video“ einzublenden . Lass mich die Reihenfolge hier sehen, wir müssen den Ordner hier haben, die Musik und das Video genau dort. Ich beginne mit dem Ordner, lasse mich ihn hier auswählen, halte die Umschalttaste gedrückt und verschiebe ihn mit den Pfeiltasten einfach so nach oben. Ich halte die Wahltaste auf meiner Tastatur oder die Alt-Taste gedrückt, um den Rand hier zu sehen. Ich setze die Marge auf 16. Als Nächstes wählen wir diese Musiktaste aus, halten die Umschalttaste gedrückt und bewegen sie einfach so nach links, und der Rand wird 16. Schließlich wähle ich diese Videoschaltfläche aus, halte die Umschalttaste gedrückt und bewege sie einfach so nach unten. So weit, so gut, aber es ist nicht genau das, was wir brauchen. Wie Sie hier sehen können, haben wir einen Bogen. Ich werde das hier nach oben verschieben und sie so platzieren. Wir haben unsere offene Variante, wir haben auch unsere geschlossene Variante, jetzt ist es an der Zeit, unsere Verbindungen herzustellen. Ich wähle diese erste aus, gehe zum Prototyp und verbinde sie mit dieser zweiten Variante , der offenen Variante. Der Baum hier sollte in 300 Millisekunden intelligent animiert werden. Ich werde jetzt eine Verbindung zurück zu dieser geschlossenen Variante herstellen . Lassen Sie uns eine Vorschau ansehen und sehen , ob es das ist, was wir wollten oder nicht. Ich werde hier einen Rahmen in benutzerdefinierter Größe erstellen, genau so und aus Assets ziehe ich eine Instanz dieser Schaltfläche per Drag & Drop genau dort hin. Lassen Sie mich es an der Mitte ausrichten, diesen Rahmen auswählen und auf Abspielen klicken. Ich werde darauf klicken und schauen, was passiert. Etwas stimmt nicht, wir haben hier unser animiertes Symbol. Diese Schaltfläche erscheint, aber was ist mit den anderen, lassen Sie uns sehen, was hier falsch ist. Hier ist das Problem, wenn ich diese Knöpfe bewege, habe ich sie versehentlich außerhalb dieser Variante platziert. Ich werde sie wieder reinbringen, und jetzt sollte es funktionieren. Ich werde darauf klicken, los geht's. Wir sehen, wir haben diese Animation, aber es gibt noch eine Sache, die wir tun müssen. Wie Sie hier sehen können, haben wir diesen Bounce-Effekt. Ich denke, es ist eine gute Idee, diesen Bounce-Effekt auch diesem Button hinzuzufügen . Dazu müssen wir nur diesen auswählen, zu Prototype gehen, auf Ihre Interaktion klicken, und von hier aus auf Ihre Interaktion klicken, und von hier aus ändere ich die Geschwindigkeit von leicht auf schnell. Ich möchte nur, dass diese Interaktion diesen Bounce-Effekt hat. Für diese enge Variante dieser Interaktion möchte ich sie so belassen, wie sie ist. Lass es uns versuchen. Da haben wir es. Leute, das ist alles für dieses Video , wir sehen uns im nächsten. 23. Accordion: In diesem Video zeige ich Ihnen, wie Sie für diese Karten einen animierten Akkordeon-Effekt erstellen für diese Karten einen animierten Akkordeon-Effekt , genau wie das, was Sie hier sehen. Hier auf dieser Seite mit Akkordeon-Effekten habe ich bereits diese Karte für Sie vorbereitet. Es ist eine einfache Karte, die ich mit einem anderen Layout erstellt habe. Mal sehen, was drin ist. Im Inneren haben wir diesen Rahmen. Wie Sie sehen können, ist es auch responsiv. Ich habe auch ein anderes Layout hinzugefügt und hier haben wir dieses Symbol und diese Textebene. Das Wichtigste dabei ist, dass die Größenänderungsoption dieses Rahmens auf Hog eingestellt ist , damit diese Karte reagiert, wie Sie es hier sehen. Abgesehen davon haben wir diesen Teiler. Es ist eine einfache Linie und eine weitere Textebene. Für diesen Akkordeon-Effekt benötigen wir nur zwei verschiedene Zustände : geschlossen und geöffnet. Mal sehen, wie wir einen erstellen können. Wir haben diesen offenen Staat. Ich werde daraus eine Komponente wie diese machen und eine Variante hinzufügen. Ich wähle diesen Komponentensatz und ändere den Eigenschaftsnamen in State. Jetzt wähle ich diese erste Variante aus. Es sollte geöffnet werden. Das ist in Ordnung. Ich wähle diesen zweiten und er sollte geschlossen sein. Für diese geschlossene Variante müssen wir diesen Teiler und auch diesen Text ausblenden . Schließlich müssen wir diesen Pfeil um 180 Grad drehen. Da ich für diese Karte ein anderes Layout verwendet habe , ist es ziemlich einfach. Ich wähle es einfach aus und verstecke es einfach in der Ebenenliste. Da haben wir es. Ich wähle auch diesen aus und verstecke ihn. Sie sehen, dass es sehr einfach ist, interaktive Komponenten zu erstellen, wenn Sie ein anderes Layout verwenden , da Ihr Element responsiv ist . Als Nächstes wähle ich dieses Symbol aus, halte die Umschalttaste gedrückt und drehe es um 180 Grad, und wir sind im Grunde fertig. Wir müssen jetzt nur diese beiden Varianten verbinden. Ich wähle diesen aus, gehe zum Prototyp, verbinde ihn damit und er sollte auf Tip und Smart Animate sein. Ich stelle es auf „Schnell“, um diesen Bounce-Effekt zu erzielen , wie Sie hier sehen können. Lassen Sie uns nun dasselbe für diese Varianz tun. Habe gerade wieder mit der Kleidervarianz verbunden und wir müssen hier nichts ändern. Jetzt ist es an der Zeit, es auszuprobieren. Ich werde hier einen Rahmen erstellen. Lassen Sie mich die Farbe des Hintergrunds ändern. Lass mich es auf hellblau ändern, ungefähr so. Ich gehe zu „Vermögenswerte“ und suche von hier aus nach meiner Karte. Ziehen wir es einfach so hinein und ich ändere seinen Status auf geschlossen. Wählen wir nun diesen Frame aus und klicken Sie auf „Abspielen“. Ich werde darauf klicken. Los geht's, es funktioniert wie erwartet. Aber hier ist das Gute an anderen Layouts. Jetzt kann ich diese Karte einfach duplizieren, Control D oder Command D drücken, sie nach unten bewegen, sie ein paar Mal so duplizieren. Vielleicht noch einmal, verschieb es nach unten. Jetzt wähle ich sie alle einfach so und füge allen ein anderes Layout hinzu. Drücken Sie Shift und A. Wenn ich diesen Frame etwas größer mache, einfach so, und versuche, ihn in der Vorschau anzuzeigen, schauen Sie, was wir bekommen. Da haben wir es. Wir haben eine ansprechende Liste von Karten mit diesem Akkordeon-Effekt. Wie cool ist das. In Ordnung Leute. Das ist alles für dieses Video. Wir sehen uns im nächsten. 24. Weitere Kurse: Herzlichen Glückwunsch zum erfolgreichen Abschluss des Kurses. Du hast einen langen Weg zurückgelegt und ich bin so stolz auf dich, aber du fragst dich vielleicht, was der nächste Schritt für dich ist? Stellen Sie zunächst sicher, dass Sie die Projekte, die Sie erstellt haben, auf Skillshare einreichen , da ich gerne sehen würde, was Sie erstellt haben. Als Nächstes würde ich mich freuen, wenn Sie eine ehrliche Bewertung des Kurses hinterlassen könnten , damit ich ihn für Sie verbessern kann. Wenn Sie über die neuesten Kursupdates informiert werden möchten , folgen Sie mir auf Skillshare. Wenn du mehr über UI/UX-Design und Prototyping erfahren möchtest , kannst du auch meinen YouTube-Kanal besuchen, dem ich wöchentlich Videos zum Thema Design veröffentliche. Es war mir eine Ehre, Ihr Lehrer in diesem Kurs zu sein, und ich hoffe, Sie in meinen anderen Kursen zu sehen. Hab einen schönen Tag und tschüss.