So entwirft und animiert man eine zusammenklappbare Sidebar in Figma

1. Willkommen im Kurs: In diesem Kurs zeige ich Ihnen, wie Sie eine zusammenklappbare Seitenleiste in Figma entwerfen und animieren Dies ist ein sehr praktischer Kurs, dem Sie lernen, wie Sie etwas entwerfen, auf das Sie in Ihrer Designkarriere höchstwahrscheinlich stoßen werden, und ich zeige Ihnen die besten Tools und Techniken, mit denen Sie dies schnell und effizient tun können In diesem Kurs lernen Sie einige der leistungsstärksten Funktionen von Figma Ich zeige Ihnen, wie Sie mithilfe des automatischen Layouts dafür sorgen, dass alles perfekt aufeinander abgestimmt ist, wie Sie mit Variablen und Ebenenstilen Zeit sparen und wie Sie Ihren Arbeitsablauf mit Komponenten und Varianten optimieren können Außerdem werden wir uns mit einigen fortgeschrittenen Prototyping-Techniken befassen , mit denen Sie die Seitenleiste problemlos zwischen dem reduzierten und dem erweiterten Zustand animieren reduzierten und dem erweiterten Zustand Hallo zusammen, falls wir uns noch nicht getroffen haben, mein Name ist Adi. Ich bin ein freiberuflicher Webdesigner und Entwickler mit über zehn Jahren Erfahrung. Jetzt werden wir dieses Designprojekt mit einer Reihe von Wireframes und einigen Markenelementen beginnen mit einer Reihe von Wireframes und einigen Markenelementen Und ich zeige Ihnen, wie Sie die verschiedenen bereitgestellten Logos richtig verwenden , wie Sie die richtigen Farben aus der uns zur Verfügung gestellten Palette auswählen , wie Sie das richtige Icon-Set und die richtige Typografie auswählen und wie Sie alles in einem zusammenhängenden Design zusammenführen in einem zusammenhängenden Design zusammenführen Da es sich um einen sehr praxisnahen Kurs handelt, können Sie mir folgen, indem Sie die Wireframes und die Markeninhalte herunterladen und mit mir zusammenarbeiten. Dies ist ein fantastisches Projekt, um Ihre Fähigkeiten zu üben und es sogar in Ihrem Portfolio zu präsentieren Also bereit einzutauchen? Lass uns anfangen. 2. Das Kursprojekt: Das Klassenprojekt ist einfach. Sie müssen in Figma eine zusammenklappbare Seitenleiste entwerfen und animieren eine zusammenklappbare Seitenleiste In der Klassenbeschreibung finden Sie nun einen Link zu Im Inneren finden Sie drei Wireframes, von denen jedes eine andere Struktur und jedes speziell für eine andere Marke hergestellt wurde Sie finden auch die Ressourcen für alle drei Marken. Diese sind natürlich fiktiv und enthalten die Logo-Suites, die Markenfarben und einige Informationen zur Typografie Ihre Aufgabe ist es also, eine dieser drei Marken auszuwählen und die entsprechende Seitenleiste zu entwerfen In der Klasse werde ich die für Shop Mingle entwerfen, aber du kannst wählen, was du willst Sie können sogar alle drei auswählen und drei Seitenleisten entwerfen , das liegt ganz bei Ihnen Wenn du fertig bist, exportiere dein Design als Bild und poste es als Klassenprojekt Ich freue mich darauf zu sehen, was Sie sich einfallen lassen. Und denken Sie daran, dass Sie im Laufe Zeit gerne Fragen stellen können. Ich bin hier um zu helfen. Fangen wir jetzt mit dem Unterricht an. 3. Auswahl von Symbolen: Der allererste Schritt, den wir unternehmen müssen, ist Auswahl von Symbolen für unser Projekt, und das ist sehr wichtig, da Symbole die Links in der Seitenleiste ergänzen. Auf diese Weise können Benutzer das Layout einfacher scannen und auch schnell feststellen, worum es bei jedem Link geht. Nun ist es wichtig, dass wir bei der Auswahl von Symbolen ist es wichtig, dass wir bei der Auswahl von ein Gestaltungsprinzip berücksichtigen, das als Konsistenz bezeichnet wird. Das bedeutet im Grunde, dass alle Symbole den gleichen Stil haben sollten. Entweder sind sie konturförmig oder zweifarbig oder einfarbig, sie müssen den gleichen Stil haben. Wenn wir also zum Beispiel einige Gliederungssymbole für einige Links auswählen , sollten wir nicht, sagen wir, durchgehende Symbole für die anderen Links auswählen . Alle Symbole sollten den gleichen Stil haben. Und der einfachste Weg, dies sicherzustellen , besteht darin, Symbole aus demselben Satz auszuwählen. Nun, es gibt ein paar Sets, die ich dir empfehlen kann, und sie sind alle kostenlos. Ich werde sie nur schnell durchgehen. Das erste ist Untitled Icons von Jordan Hughes, und du findest einen Link dazu in der Klassenbeschreibung Dann haben wir Font Awesome, das über 2000 kostenlose Icons enthält Sie finden dies auf fontawesome.com. Dann sind Bootstrap-Symbole auch eine gute Option . Sie finden sie unter icons dotgtbootstrap.com. Und schließlich haben wir die Google-Materialsymbole. Gehe einfach zu fonts.google.com und gehe zu Icons. Und hier findest du ein paar davon. Ja, du kannst nach verschiedenen Symbolen suchen. Sie können hier sogar das Gewicht des Symbols ändern, was sehr interessant ist. Und all diese können kostenlos genutzt werden. Nun, für das Design, das ich in diesem Kurs erstellen werde, werde ich die Symbole ohne Titel verwenden weil ich denke, dass sie sehr gut zu dem Projekt oder der Marke passen sehr gut zu dem Projekt , für die wir entwerfen Und wo wir gerade davon sprechen, lassen Sie mich Ihnen zeigen, was ich kreieren werde Also habe ich die Datei bekommen, die Ressourcendatei für Schüler, die ich Ihnen in den vorherigen Lektionen gezeigt habe. Und hier können Sie sehen, dass wir alle drei Markenressourcen haben. Und heute werde ich für Shop Mingo entwerfen, eine E-Commerce-Plattform, die sich auf Social Shopping konzentriert Natürlich ist das eine fiktive Marke, aber wir bekommen hier so ziemlich alles, was wir brauchen Wir bekommen die verschiedenen Logos und die Farbkombinationen , die verwendet werden können Und wir haben auch Farben mit Variationen für hellere oder dunklere. Und wir haben auch einige Informationen zur Typografie. Dies sind nur die Schriften, die im Logo-Design verwendet wurden. Das bedeutet nicht unbedingt, dass wir sie in unserem UI-Design verwenden werden, aber sie dienen im Grunde genommen als Richtlinie Um es für mich und auch für Sie einfacher zu machen, habe ich viele Variablen für alle Farben erstellt , die ich verwenden werde. Wie Sie sehen können, haben wir hier Variablen für alle Variationen der Farben, die in den Marken-Assets verwendet werden. Für alle drei Marken. Darüber hinaus habe ich auch Farbstile erstellt, die Sie hier in der Seitenleiste sehen können, und die Arbeit mit Farbstilen ist wirklich einfach Wenn ich hier zum Beispiel ein Rechteck zeichne und die Hintergrundfarbe zu einer dieser vordefinierten Farben hinzufügen oder ändern möchte zu einer dieser vordefinierten Farben hinzufügen oder ändern , muss ich hier nur zur Füllung gehen, Stile und Variablen anwenden und einfach darauf klicken Ich wähle die gewünschte Farbe aus der Liste aus, und jetzt wird zum Beispiel Blue Lagoon 500 verwendet . Das spart mir einfach eine Menge Zeit bei der Farbauswahl, weil ich nicht mit Hex-Codes herumfummeln oder, wissen Sie, sofort Farbtöne oder Schattierungen dieser Farben erzeugen oder Schattierungen dieser Farben Es ist alles gespeichert und kann von mir verwendet werden. Lassen Sie uns nun die Symbole auswählen, die wir für unser Designprojekt benötigen. Also werde ich, wie gesagt, für Shop Mingle entwerfen. Also gehe ich auf die Wireframe-Seite und hole mir Wireframe zwei, das ist das, was Und ich gehe einfach auf diese Seite hier und lass uns einfach das Hier. Ich werde einen Frame, Control oder Command R zum Umbenennen erstellen, und ich werde diese beiden Symbole umbenennen. Dies ist nur ein Ort, an dem ich alle meine Symbole speichern werde. Also lass uns sehen, was wir haben. Wir haben eine Suchleiste, also brauchen wir ein Suchsymbol. Also, zurück zu Untitled, ich werde, ich weiß nicht, nach Small suchen oder MD suchen, eines davon Klicken Sie hier, um zu kopieren, und ich werde es einfügen und es in Suchen umbenennen Als Nächstes haben wir drei Links , die zur Produktkategorie gehören. Also Symbol für alle Produkte. Lass uns nach Grid suchen. Und das wird mir dieses Symbol geben. Lassen Sie uns das kopieren, einfügen und in Grid umbenennen. Und die Art und Weise, wie Sie diese Symbole auswählen , ist wohl subjektiv. Es hängt wirklich davon ab, wie Sie einen bestimmten Link interpretieren. persönlich, wenn ich an alle Produkte denke, denke ich an, du weißt schon, eine Kollektion, richtig, eine Gruppe von etwas. Also habe ich das Rastersymbol ausgewählt, weil es auch eine Gruppe von etwas darstellt, oder? Es ist nur eine Sammlung einzelner Artikel. Meiner Meinung nach funktioniert das sehr gut für eine Seite, funktioniert das sehr gut auf der mehrere Produkte angezeigt werden. Als Nächstes haben wir die Kategorienliste. Nun, hier könnten wir uns für so etwas wie eine Liste entscheiden , aber ich werde tatsächlich nach einer Datenbank suchen, und das wird mir dieses Ergebnis geben. Und Datenbank, ich denke, das funktioniert wieder, wirklich gut für den Kategorien-Link, weil er eine Liste von Elementen symbolisiert, eine Sammlung von Es wird also wirklich gut funktionieren. Lassen Sie uns das auch umbenennen. Als nächstes kommen Neuankömmlinge. Wenn ich also an Neuankömmlinge denke, sage ich: Okay, neu, ich muss benachrichtigt werden, weil es neu ist. Suchen wir nach einer Benachrichtigungsglocke oder so, oder? Suchen Sie also nach Bell und ich werde mir Bell 03 schnappen. Hier eingefügt. Lass uns weitermachen. Bestellungen. Wir haben eine Bestellhistorie. Wenn ich also an Geschichte denke, denke ich an Vergangenheit, Timer , Uhr, so etwas. Also lass uns nach Uhr suchen. Und lassen Sie uns die Uhr zurückspulen und zurückspulen , weil wir über die Vergangenheitsform sprechen, richtig? Geschichte. Ich denke, das würde wirklich gut funktionieren. Benennen Sie das in Uhr um. Als Nächstes verfolgen Sie die Bestellung. Was gibt mir Tracking also? Ein genauer Standort, oder? Und wenn ich an den Standort denke, denke ich an eine Kartennadel, richtig, oder, Sie wissen schon, eine dieser Stecknadeln, die Sie auf eine Karte setzen , um einen bestimmten Ort zu markieren. Suchen wir also nach einer Stecknadel. Und los geht's mit diesem Marker Pin 06. Kopieren, einfügen, umbenennen. Lass uns weitermachen. Rücksendungen und Rückerstattungen Rückgabe ist also, wenn Sie etwas zurückschicken, Rückerstattung ist, wenn Sie Geld zurückschicken Also lass uns über etwas mit Pfeilen nachdenken, oder? Suchen wir also nach Pfeil und nach Pfeil, scrollen Sie einfach nach unten. Mal sehen, wie mehr Icons geladen werden. Ich denke, das funktioniert ziemlich gut. Horizontal schalten. Holen wir uns das. Lass uns in Switch umbenennen. Okay, chatte als Nächstes mit dem Support. Was denken wir also, wenn wir an Chat denken? Nachricht. In Ordnung. Also nehmen wir eine dieser Sprechblasen, in der etwas drin ist, vielleicht dieses eine Quadrat mit Nachrichtentext. Also lasst uns das kopieren. Basiert auf der Umbenennung in Nachricht. Als Nächstes FAQs. FAQs sind häufig gestellte Fragen. Also suchen wir nach Fragen. Also lass uns das Fragezeichen benutzen. Dieser hier, hilf Circle. Ich denke, das würde gut funktionieren. Umbenennen, um zu helfen. Als Nächstes ist das Help Center dran. Ich glaube, ich habe diesen Life Boy gesehen. Das würde gut funktionieren. Lassen Sie uns das umbenennen, um zu helfen. Und was sonst? Wir haben Einstellungen. Einstellungen, ziemlich einfach. Wir suchen hier nach Einstellungen und bekommen dieses Zahnradsymbol die Dinge normalerweise So machen wir die Dinge normalerweise, oder, du weißt schon, wir könnten uns etwas davon oder etwas davon schnappen Es gibt viele Symbole, die wir hier auswählen können, aber das Zahnradsymbol ist für jeden, der nach der Einstellungsseite sucht , sofort erkennbar der Einstellungsseite sucht , Lassen Sie uns also diese beiden Einstellungen umbenennen. Mal sehen, wir haben alle Links hier. Wir brauchen auch ein Symbol für das Zusammenklappen und Erweitern, oder? Wenn wir also denken, reduzieren oder erweitern, erweitern, die Seitenleiste, wissen Sie, wird die Seitenleiste, wissen Sie, größer, und wenn Sie zusammenklappen, wird die Seitenleiste kleiner Wir haben es also mit der Richtung zu tun , nach rechts, entweder nach links oder nach rechts Suchen wir nach Arrow und schauen wir, was wir hier finden. Scrollen wir also einfach nach unten. Also so etwas. Sie sehen dieses Download-Symbol. Das könnte ziemlich gut funktionieren, außer dass ich es drehen müsste. Lass uns nach der Ausrichtung suchen. Vielleicht finden wir dort etwas. Ja, da haben wir's. Also eine Linie links und eine Linie rechts. Ich brauche beide. Eine Linie links und eine Linie rechts. Okay, eine Linie links verwenden wir für den Fall dass wir zusammenbrechen wollen , weil die Richtung so ist, und eine Linie nach rechts, wir verwenden sie zum Erweitern, weil sie sich nach rechts ausdehnt. In Ordnung. Also das sind alle Icons, die wir brauchen. Lass uns das ein bisschen aufräumen. Nachdem der Symbolrahmen ausgewählt ist, gehen wir hier nach oben und fügen Autoayout In Ordnung. Und lass mich das bewegen, damit du es besser sehen kannst Und ich werde Rap als Richtung verwenden, und ich werde, sagen wir, 64 Pixel zwischen diesen Elementen und 64 Pixel Abstand auf allen Seiten festlegen 64 Pixel zwischen diesen Elementen und 64 Pixel Abstand auf allen Seiten Alle Symbole werden also gut in einem Raster angezeigt, etwa so. Ordnung. Nun, eine letzte Sache, die ich hier tun möchte, ich möchte mein Leben auf lange Sicht einfacher machen Also werde ich jedes dieser Symbole in eine Komponente umwandeln. Auf diese Weise kann ich die Sofortaustausch-Funktion für Infigma-Komponenten verwenden , wenn ich ein Symbol von einem zum anderen ändern möchte , und das werde ich Ihnen in der nächsten Lektion zeigen Aber lassen Sie uns zunächst alle diese Symbole auswählen, und ich möchte sie alle umbenennen Also klicke ich mit der rechten Maustaste auf Umbenennen und wähle zwei Symbole, Schrägstrich umbenennen und dann den aktuellen Namen Okay, das heißt, sie werden einfach umbenannt Icon Slash Search, IconLahGrid, Icon Slash Database und so weiter und so fort Jetzt, wo diese umbenannt sind, kann ich sie alle in Komponenten umwandeln. Um das zu tun, wähle ich hier in der Seitenleiste drei Punkte und wähle Mehrere Komponenten erstellen aus So wie es ist. Dadurch wird jedes dieser Symbole zu einer eigenen Komponente. Und der Grund, warum ich sie im Namen des Symbols wie Icon-Schrägstrich benannt habe , ist, dass der Icon-Schrägstrich es Figma ermöglicht , diese Symbole zu gruppieren Ich möchte jetzt zum Beispiel eine dieser Komponenten zu meiner Leinwand hinzufügen und gehe hier zum Bedienfeld „ Elemente“. Sie können sehen, dass meine Symbole jetzt unter Symbol gruppiert sind jetzt unter Symbol gruppiert Sie können sie alle hier sehen. Wenn Sie jedoch mehrere Komponenten haben, ist es viel einfacher, sie so zu kategorisieren Unter „Lokale Elemente“ sind also alle meine Symbole, die ich gerade erstellt habe, alle meine Komponenten jetzt im Unterordner „Icon“ gruppiert , was sehr, sehr praktisch sein kann In Ordnung, jetzt haben wir also die Icons. Wir haben die Komponenten erstellt, also ist es an der Zeit, die Menüelemente zu entwerfen Das kommt als Nächstes. 4. Entwerfen der Menüelemente: Da wir nun mehrere Menüelemente haben , die ungefähr dieselbe Struktur haben, ist es eine gute Idee, Komponenten zu verwenden. Auf diese Weise können wir Menüelemente wiederverwenden. Und wenn wir uns irgendwann dazu entschließen, etwas zu ändern, machen wir das einfach einmal auf der Master-Komponente. Lassen Sie mich Ihnen zeigen, wie wir das machen können. Schauen wir uns hier die Menüstruktur an. Also haben wir natürlich den Text. Lassen Sie uns tatsächlich eine Kopie davon hierher bringen und die Breite auf Auto ändern. Jetzt brauchen wir neben dem Text auch ein Symbol, oder? Also schnappen wir uns eines der Icons. Sagen wir den ersten, und ich werde ihn hier einfügen. Und wenn Sie nicht wissen, wie Komponenten in Figma funktionieren, ist es wirklich, wirklich einfach Jede Komponente besteht also aus zwei Teilen. Nehmen wir an, Sie haben die Hauptkomponente und dann haben Sie die Instanz, okay? Die Hauptkomponente ist sozusagen die einzige Quelle der Wahrheit. Die Instanz ist im Grunde eine Kopie. Die Idee ist also, dass unabhängig von der Änderung die Sie an der Hauptkomponente vornehmen, , die Sie an der Hauptkomponente vornehmen, diese Änderung übernommen und auf jede andere Kopie davon angewendet wird Änderung übernommen und auf jede andere Kopie davon angewendet Hier haben wir zum Beispiel die Hauptkomponente , die Icon Slash Grid genannt wird Und beachten Sie das Symbol, das es verwendet. Es ist wie ein vollständiges Diamantensymbol. Das hier, ja, ist eine Kopie dieser Komponente. Und im Ebenenbedienfeld können Sie sehen, dass es ein anderes Symbol hat. Es ist ein leerer Diamant. Wenn ich jetzt also die Hauptkomponente auswähle und zum Beispiel ihre Farbe ändere, werden Sie sehen, dass die Kopie oder jede andere Kopie davon diese Änderung erhalten hat. Sie hat die andere Farbe. Wenn ich das also wieder zu dem mache, was es war, werden sich auch die Instanzen ändern. So funktionieren Komponenten in FigMA im Grunde. Natürlich gibt es komplexere Anwendungen, wie Sie in diesem Kurs sehen werden, aber auf der Basisebene läuft es darauf hinaus Lassen Sie uns nun diesen Menüpunkt erstellen. Wir haben also ein Symbol und wir haben den Text. Lassen Sie uns den Text auf Inter setzen. Dies ist die Schriftart , die wir für das UI-Design in diesem Projekt verwenden werden für das UI-Design in diesem Projekt Inter ist eine kostenlose Schriftart, die bei Google erhältlich ist. Es hat viele verschiedene Gewichte und wurde speziell für diese Art von Anwendung entwickelt. Wir verwenden also regelmäßig 16 Pixel und eine Zeilenhöhe von 150% Nachdem diese beiden ausgewählt sind, drücke ich Shift A, um einen automatischen Layoutrahmen zu erstellen, und stelle den Abstand zwischen ihnen auf 12 Pixel Also der Abstand zwischen Text und Symbol auf 12 Pixel. Ich werde auch einen Abstand von 12 Pixeln links und rechts vom Inhalt und acht Pixeln oben und unten festlegen Das wird mir ermöglichen, dem Inhalt dieses Menülinks etwas Luft zum Atmen zu verleihen etwas Luft zum Atmen Inhalt dieses Menülinks etwas Luft zum Atmen zu Lassen Sie uns diesen Frame in Menü-Link umbenennen. Wenn es ausgewählt ist, machen wir daraus eine Komponente. Also gehe ich zur Seitenleiste, erstelle eine Komponente oder verwende die Tastenkombination Control AK unter Windows oder die Befehlsoption K auf einem Mac Großartig. Jetzt möchte ich natürlich in der Lage sein, diese Komponente zu duplizieren und mehrere Instanzen davon zu erstellen. Und auch für jeden möchte ich den Text und das Symbol ändern. Lassen Sie uns dafür einige Überschreibungen hinzufügen. also der Text in der Hauptkomponente ausgewählt ist, gehe ich in die Seitenleiste wo es heißt, Texteigenschaft erstellen Klicke darauf. Geben wir ihm einen Namen. Es kann sein, was immer du willst. Ich belasse es einfach bei Text, erstelle Eigentum. Als Nächstes wähle ich das Symbol aus und wähle in der Seitenleiste die „Instanztauscheigenschaft erstellen“. Ich werde diese Eigenschaft nennen. Lass es mich dir tatsächlich zeigen. Ich nenne es Icon. Machen Sie sich hier keine Gedanken über den Wert oder die bevorzugten Werte. Klicken Sie einfach auf „ Eigenschaft erstellen“. In Ordnung. Jetzt können wir diesen Menü-Link nehmen, ihn kopieren und in einen anderen Frame einfügen. Und das werden wir verwenden, um unser Seitenleistendesign zu erstellen. Dies ist jetzt eine Instanz der Komponente, die wir gerade erstellt Lassen Sie uns das Wireframe hier etwas näher bringen , damit wir sehen können, was wir tun Und fangen wir an, die Menüelemente zu erstellen. Also der erste Link alle Produkte. Gut. Lass uns das duplizieren. Das nächste werden Kategorien sein. Wenn die Instanz ausgewählt ist, kann ich hier nach oben gehen. Ich kann den Text in Kategorien ändern. Und ich kann sogar das Symbol ändern, und Figma verwendet jetzt die Symbolkomponenten, oder es zeigt mir die Symbolkomponenten , die ich in der vorherigen Lektion erstellt habe Wir können sie alle hier sehen. Wir können sogar nach einem bestimmten Symbol suchen. Also kann ich das einfach auswählen und Figma wird es in meiner Instanz automatisch ersetzen . Wie cool ist das? Ich verwende also eine Kopie der Hauptkomponente, eine Instanz, aber ich kann das mit meinen eigenen Inhalten oder mit unterschiedlichen Inhalten für jeden einzelnen personalisieren meinen eigenen Inhalten oder mit unterschiedlichen Inhalten für jeden einzelnen Lass uns weitermachen. Dieser, Neuankömmlinge, und ich werde die Glocke wählen. Lassen Sie uns diese beiden noch einmal duplizieren und die restlichen Menüelemente ausfüllen. H Jetzt haben wir also die anderen Menüelemente erstellt, alle mit ihrem eigenen Text und Symbol personalisiert sind. Eine Änderung, die ich nun vornehmen möchte, ist, die Symbole ein wenig zu verkleinern Standardmäßig sind sie 24 Pixel groß. Machen wir sie also zu 20 Pixeln. Nun, da ich Komponenten verwendet habe, diese Änderung, wenn ich diese 20 Pixel mache wird diese Änderung, wenn ich diese 20 Pixel mache, auf jede einzelne Komponenteninstanz angewendet , super cool. Übrigens verwende ich das Skalierungswerkzeug, um die Größe des Symbols zu reduzieren. Sie drücken einfach K auf Ihrer Tastatur und schon erhalten Sie diese Oberfläche , in der Sie die Breite oder Höhe oder die Größe ändern können die Breite oder Höhe oder die Größe ändern , indem Sie einen Faktor verwenden. Jetzt gibt es zwei weitere Varianten dieser Menüelemente, die wir erstellen müssen. Der erste ist der aktive. Was passiert also, wenn wir tatsächlich einen bestimmten Menüpunkt auswählen oder darauf klicken und dieser ausgewählt wird, oder? Wenn das passiert, gehen wir wie folgt vor. Wir wählen die Hauptkomponente und können hier nach oben gehen und Variante hinzufügen wählen. Dadurch wird eine Kopie dieser Komponente erstellt, aber es handelt sich nicht um eine Instanz. Es ist eigentlich eine Variante, eine Variante dieser Komponente. Und jetzt verpackt Figma diese Varianten in diese gepunktete Linie. Wählen wir nun die Hauptkomponente aus und dort, wo Eigenschaft eins steht, doppelklicken wir darauf und benennen sie in Typ Und dann wählen wir die erste und belassen sie einfach auf der Standardeinstellung. Und auf den zweiten doppelklicken wir und benennen ihn in aktiv um. Für die aktive Farbe möchte ich also eine Farbe aus unseren Markenressourcen verwenden. Gehen wir also zur Seite mit den Marken-Assets und ich möchte diese Primärfarbe verwenden. Es ist also Blue Lagoon 500. Also wählen wir das aus und dann ganz unten unter Füllen. Ich suche nach Blue Lagoon und wähle 500 aus. Das wird also diese Farbe als Füllung hinzufügen. Aber ich möchte auch das Symbol und die Textfarbe ändern. Nun, ich könnte dafür Weiß verwenden, und das wird in Ordnung sein, aber ich möchte eine Variante dieser Primärfarbe verwenden. Also gehe ich zurück und sehe, dass Blue Lagoon 50 die hellste Farbe der Gruppe ist. Also werden wir den benutzen. Also nochmal, in Figma, wenn sowohl das Symbol als auch der Text ausgewählt sind, gehe ich zu Auswahlfarbe Klicken Sie darauf und wählen Sie Blue Lagoon 50. Wählen Sie nun die Variante aus und fügen Sie einen Randradius von acht Pixeln hinzu. Also, wie hilft mir das genau? Nun, hier ist der coole Teil. Nehmen wir an, ich möchte die Instanz „Alle Produkte“ zur aktiven Variante machen . Alles, was ich dafür tun muss, ist hier oben zu gehen, wo Typ steht, und statt Standard wähle ich aktiv, und das war's. Ich kann das für jeden der anderen Links tun. Und dann ist die andere Variante, die ich erstellen muss, die mit dem Badge. Beachten Sie also einige dieser Links, denen Nummern beigefügt sind. Und ich möchte diese Nummer als eine Art Ausweis hinzufügen. Also lass uns das machen. Wir wählen die erste Variante aus. Wir klicken auf das Plus-Symbol. Das wird eine Kopie davon machen. Und ich werde das auf Standard mit Badge umbenennen . Also schnappen wir uns diese Nummer. Und lass es uns hier einfügen. Lass uns diesen Behälter etwas größer machen. Ich werde Inter diesmal fett verwenden, 12 Pixel, die gleiche Zeilenhöhe von 150% Und ich werde das zu einem eigenen automatischen Layoutrahmen hinzufügen eigenen automatischen Layoutrahmen , weil ich ihm einen Hintergrund hinzufügen möchte Also werde ich Shift A drücken, und das wird mir ermöglichen, dem Bild eine Polsterung hinzuzufügen Aber zuerst fügen wir eine Füllfarbe hinzu. Und ich gehe zurück zu den Markenwerten und sehe, dass wir dieses Korallenrot als Sekundärfarbe haben. Wählen wir also Korallenrot 100 als Hintergrund und dann 600 oder 700 als Textfarbe. Also suche ich hier unter Füllen nach Korallenrot und wähle 100 aus. Und für den Text machen wir Korallenrot, 600 oder 700. Ich denke, 700 funktioniert viel, viel besser. Und wenn das ausgewählt ist, fügen wir ihm auch etwas Polsterung hinzu Also mache ich acht Pixel links und rechts, zwei Pixel oben und unten Lassen Sie uns hier die Breite ändern, um den Inhalt zu vereinheitlichen. Und Inhalt umarmen bedeutet im Grunde , dass der Rahmen seine Größe automatisch an seinen Inhalt anpasst. Es wird nicht größer oder kleiner als das, was es enthält. Und wenn Sie mehr über das automatische Layout erfahren möchten, habe ich einen sehr ausführlichen Kurs zur Verfügung, in dem es nur um das automatische Layout geht. Es gibt viele Beispiele, und ich gehe sehr ausführlich auf dieses Thema ein. Schauen Sie sich einfach die Links an oder schauen Sie in meinem Profil nach, um diesen Kurs zu finden. Jetzt haben wir diesen Stapel erstellt. Geben wir ihm tatsächlich einen Randradius und wählen wir den Text darin aus, und ich werde ihn auf automatische Breite setzen. Das Textfeld entspricht also der Breite des Textes selbst. Außerdem möchte ich hier eine Mindestbreite hinzufügen, denn wenn ich den Text ändere, können Sie sehen, dass wir eine Pillenform haben. Aber wenn ich nur eine einzelne Ziffer habe, ist es fast wie ein Kreis. Ich möchte also, dass das immer wie eine Pillenform aussieht. Also dafür gehe ich zum automatischen Layout. Ich klicke darauf und füge eine Mindestbreite von, sagen wir, 32 Pixeln hinzu. Das ist also viel, viel besser. Jetzt können wir zu unseren Instanzen zurückkehren und die Menüelemente auswählen , für die die Badges benötigt Zum Beispiel bei Neuankömmlingen werde ich den Typ auf Standard mit Badge ändern Chat würde dieselbe Story unterstützen, standardmäßig mit Badge. Aber ich brauche eine Möglichkeit, den Text dieses Ausweises, die Nummer, zu kontrollieren . Gehen wir wieder rein und wähle den Text in der Hauptkomponente aus, den Badge-Text, und hier unten wähle ich den Text in der Hauptkomponente aus, den Badge-Text, Texteigenschaft anwenden, Eigenschaft erstellen aus, und wir nennen diese Ausweisnummer. Okay. Wenn wir diese Instanzen jetzt erneut auswählen, haben wir ein Feld mit einer Badge-Nummer , das wir ausfüllen können, oder? Also vier sind okay für Neuankömmlinge, aber hier sollten zwei verwendet werden Und lass es mich dir tatsächlich zeigen. Cool. Zum Schluss noch eine letzte Sache: Sie werden feststellen, dass, wenn wir eine dieser Instanzen auswählen und sie vergrößern, die Badge-Nummer direkt hinter dem Text steht, und das will ich nicht. Ich möchte, dass die Badge-Nummer ganz rechts angezeigt wird , wie wir es im Wireframe getan haben Der Weg, das zu tun, besteht also darin, eine automatische Lücke zwischen dem Abzeichen und dem Text hinzuzufügen eine automatische Lücke zwischen dem Abzeichen und dem Text Kehren wir also zu dieser Variante zurück und nehmen hier eine kleine Änderung vor. Wir wählen den Haupttext und das Symbol aus. Wir drücken Shift A, um sie zu ihrem eigenen automatischen Layoutrahmen hinzuzufügen . Dann wähle ich den Hauptrahmen und ändere den Lückenwert hier von 12 auf Automatisch. Dadurch kann ich die dieser Instanz auf eine beliebige Größe ändern, und Figma setzt den Abstand zwischen diesen Elementen und dem Badge automatisch auf den höchsten Wert Und das funktioniert auch hier, wie Sie sehen können. Und damit sind die Menüpunkte fertig. Wenden wir uns also dem Rest der Seitenleiste zu. Demnächst werden wir den Rest der Elemente entwerfen. 5. Entwerfen der beiden Sidebars: Es gibt noch ein paar weitere Elemente, die wir in der erweiterten Version der Seitenleiste erstellen müssen , und natürlich müssen wir auch die reduzierte Version entwerfen auch die reduzierte Version Fangen wir also mit dem ersten an. Was die Elemente angeht, schauen wir uns das Wireframe an Wir müssen das Logo noch hinzufügen. Gehen wir also zurück zu den Marken-Assets, und ich nehme einfach das reguläre Logo für Shop Mingle und füge es einfach hier Also drücke ich K und ändere die Größe auf eine Höhe von 56 Pixeln Gut. Nehmen wir das und benennen wir es in ein Logo um. Als Nächstes haben wir eine Suchleiste, oder? Nehmen wir also all diese, verschieben sie ein wenig nach unten und ändern wir auch die Größe dieses Rahmens wir für die Suchleiste Nehmen wir für die Suchleiste den Suchtext und fügen ihn hier Und wir brauchen ein Suchsymbol, oder? Gehen wir also zu Assets und ich nehme das Suchsymbol und ziehe es hinein. Lassen Sie uns die Größe auf 20 Pixel ändern, sodass es mit den übrigen Symbolen in meiner Seitenleiste übereinstimmt, und wählen wir dann beide aus Drücken Sie die A-Taste, um sie zu einem automatischen Layoutrahmen hinzuzufügen. Und ich werde eine Füllfarbe hinzufügen und wir werden die Holzkohle verwenden. Wenn wir einen Blick zurück auf die Farben unserer Marke werfen. In der Farbpalette haben wir eine Anthrazitfarbe. Das ist im Grunde für Grau. Also verwenden wir das für Text und für die neutraleren Elemente der Benutzeroberfläche, wie den Hintergrund eines Formularelements, richtig? Also werden wir Holzkohle verwenden, weißt du, 50 oder 100, hängt davon ab, was für uns am besten aussieht. Wählen wir das aus und wir wählen „Füllen“. Wir suchen nach Holzkohle und schauen uns Charcoal 50 an. Ja, das sieht ziemlich gut aus. Also behalten wir das. Aber ich werde auch die Farbe der anderen Elemente ändern. Das Symbol wird also Charcoal 500 sein. Wir werden das auch für den Rest des Textes verwenden. Und den Suchtext, weil es normalerweise ein Platzhalter ist, wie wir ihn ausdrücken, werden wir eine hellere Version von Holzkohle verwenden, nämlich 300, nur eine gedämpftere Jetzt verwende ich oder wir verwenden das automatische Layout für dieses Element Lassen Sie uns also tatsächlich acht Pixel als Lücke definieren. Das ist der Abstand zwischen dem Symbol und dem Text. Und wir werden rundum 12 Pixel für die Polsterung verwenden. Großartig. Und jetzt fügen wir endlich einen Randradius von acht Pixeln hinzu. Wir passen also den Randradius der anderen abgerundeten Elemente an. Großartig. Jetzt können wir es einfach nehmen und auf jede gewünschte Größe skalieren Das ist also die Suchleiste. Als Nächstes hat jede Gruppe von Menüelementen diesen Text als eine Art Gruppenkopfzeile. Also schnappen wir uns das. Wir fügen es hier ein. Lass uns die Breite automatisch machen. Und wir werden hier die Typografie-Eigenschaften so ändern , dass sie fett eingegeben Lassen Sie mich hier tatsächlich hineinzoomen, damit Sie es sehen können. Ich bleibe bei 12 Pixeln als Schriftgröße, 150% Zeilenhöhe und mache Großbuchstaben Außerdem werde ich den Buchstabenabstand etwas vergrößern Ihnen also, den Buchstabenabstand zu vergrößern Ich empfehle Ihnen also, den Buchstabenabstand zu vergrößern, wenn Sie kleinen Text und fett gedruckte Großbuchstaben haben und wenn Sie den Abstand zwischen den Buchstaben vergrößern, ist der Text nur ein bisschen lesbarer Also lass uns das hier nach oben verschieben. Und außerdem habe ich die Farbe vergessen, oder? Also die Farbe des Textes. Wir werden einen Charcoal 300 verwenden, also einen sehr, sehr hellen Text, und wir werden die Opazität einfach wieder auf Okay. Lassen Sie uns nun einige dieser Links gruppieren. Also wähle ich diese drei aus, verschiebe A, und das fügt sie zu ihrem eigenen automatischen Layoutrahmen hinzu. Und ich kann den Abstand hier auf Null setzen, und ich möchte sicherstellen, dass diese nach links ausgerichtet sind. Und ich möchte alle Elemente hineinnehmen und ihre Breite oder ihre horizontale Größenänderung einstellen, dass sie den Container füllen. Also, wann immer ich die Größe des übergeordneten Elements ändere, wird auch die Größe der darin enthaltenen Elemente geändert Und noch eine letzte Sache, die wir tun müssen, ist, eine kleine Lücke zwischen dem Gruppenkopf und den restlichen Elementen hinzuzufügen dem Gruppenkopf und den restlichen Elementen Und wenn ich einfach die Lücke in den Eigenschaften des automatischen Layouts ändern würde , würde das den Abstand zwischen jedem einzelnen Element ändern. Das können wir tun, indem wir das Objekt zunächst wieder auf Auto setzen und es ausgewählt haben, Shift A drücken, um es zu einem automatischen Layoutrahmen hinzuzufügen. Und da es sich jetzt in einem automatischen Layoutrahmen befindet, kann ich ihm eine Polsterung hinzufügen Also gehe ich gleich hier in den Inspektor und ändere den unteren Abstand auf 16 Pixel Das wird also nur ein bisschen Abstand zu einem kleinen Abstand hinzufügen , im Grunde nur zu diesem kleinen Text, wodurch der Abstand entsteht, den wir brauchen Das ist ein netter kleiner Trick. Lassen Sie uns als Nächstes dasselbe für die anderen tun. Also schnapp dir das, füge es hier ein. Und das sollte Befehle heißen. Und lassen Sie uns Shift A wählen Stellen Sie sicher, dass die Richtung auf Vertikal eingestellt ist. Lücke ist auf Null gesetzt, und die Objekte im Inneren sind so eingestellt, dass sie den Behälter füllen. Und schließlich ist die dritte Gruppe zur Unterstützung da. Gleiche Geschichte, alles auswählen, Shift A, Gap auf Null setzen, alle Menüelementinstanzen auswählen, deren Größe einstellen, um den Container zu füllen. Nun, zwei Dinge hier , die ich vergessen habe zu tun. Wählen Sie zunächst den Suchtext und legen Sie seine Größe auf 16 Pixel statt auf 12 fest. Und dann ändern wir die Farbe des Symbols und des Textes diesen Menüelementen, weil ich vergessen habe, das zu tun. Derzeit wird Schwarz verwendet. Wählen wir also beide Varianten aus, und ganz unten unter Auswahlfarben sollte für jeden Artikel, der Schwarz verwendet, Charcoal 500 verwendet werden. So wie das. Also das ist viel, viel besser. Ich bin kein großer Fan davon, in jedem Layout nur reine schwarze Textfarbe zu verwenden . Es ist einfach ein zu großer Kontrast, ein zu großer Kontrast. Und schließlich haben wir für diesen Bereich die Benutzerinformationen, richtig? Wir haben ein Bild des Benutzernamens und der E-Mail-Adresse. Also lass uns das einfügen. Und fangen wir mit dem Avatar an. Lass uns das 48 mal 48 machen. Fügen wir einen Randradius von etwa acht Pixeln hinzu , um das Ganze zu vervollständigen. Und lassen Sie uns das Bild im Inneren ändern. Nun, das funktioniert in Figma so dass Sie eine Form haben und eine Füllung hinzufügen, und die Füllung kann farbig sein, und es kann unter anderem auch ein Bild sein Sie können das also manuell tun oder ein Plugin verwenden. Ich habe ein Plugin, das ich regelmäßig verwende und es heißt Unsplash Das lädt im Grunde einfach, weißt du, Bilder von Unsplash und wendet sie direkt als Füllung auf deine Form an Suchen wir also nach einem Porträt, und ich werde dieses auswählen Genau hier. Und das ist es. Das ist alles was du tun musst. Als Nächstes nehmen wir diese beiden Elemente und ändern ihre Größe auf 16 Pixel. Und lassen Sie uns die Breite zwei automatisch ändern. Lassen Sie uns Shift A drücken und sie zu ihrem eigenen automatischen Layoutrahmen hinzufügen. Wir setzen den Abstand auf Null und ändern die Zeilenhöhe wie folgt auf 150%. Wir wählen den Namen Command B , um die fettgedruckte Schriftstärke zu verwenden Und lassen Sie uns den Text hier für den Namen ändern. Wir werden Charcoal 500 für die E-Mail-Adresse verwenden. Ich möchte, dass das etwas gedämpfter ist. Ich werde Charcoal 300 so verwenden. Wählen Sie abschließend sowohl den Avatar auch den Text aus. Shift A erneut. Stellen Sie sicher, dass die Ausrichtung hier auf die Mitte eingestellt ist und wir legen den Abstand zwischen ihnen auf 12 Pixel fest. So wie das. Und zum Schluss lassen Sie uns diesen Menüpunkt zum Ausblenden etwas gedämpfter gestalten Menüpunkt zum Ausblenden etwas gedämpfter weil er eher eine funktionale Sache ist, die mit der Seitenleiste zusammenhängt, nicht unbedingt Teil der Hauptgruppe der Lassen Sie uns also seine Farbe ändern. Wir gehen von Charcoal 500 aus , das Sie hier sehen können. Wir gehen zu 300 und auch zur Ikone. Also lass uns sehen, was wir haben. Haben wir etwas vom Wireframe verpasst? Nein, wir haben alles, was wir brauchen. Jetzt geht es nur noch darum , ein richtiges Layout zu erstellen und eine angemessene Ausrichtung und Abstände für all diese Elemente hinzuzufügen . Wählen Sie also alles aus. Shift A, um sie zu ihrem eigenen automatischen Layoutrahmen hinzuzufügen. Jetzt, wo die Option ausgewählt ist, setze ich den Abstand zwischen den Elementen auf 48 Pixel und verwende einen Abstand von 24 Pixeln sowohl und verwende einen Abstand von 24 Pixeln sowohl oben als auch unten Außerdem füge ich einen Randradius von acht Pixeln und füge dem gesamten Container einen Schatten hinzu Für den Schatten werde ich also tatsächlich ein anderes Figma-Plugin namens Smooth Shadow verwenden ein anderes Figma-Plugin namens Smooth Shadow Und Smooth Shadow fügt dem gewünschten Objekt im Grunde einen geschichteten Schatten hinzu Also werde ich auf Schatten anwenden klicken. Und weil wir keine Füllfarbe haben , die den Schatten auf jedes einzelne Objekt im Rahmen anwendet den Schatten auf jedes einzelne Objekt , aber das ist in Ordnung. Wir können einfach eine weiße Füllung hinzufügen, und jetzt ist der Schatten sichtbar. Schau dir an, wie glatt dieser Schatten ist. Ordnung, jetzt wählen wir hier den Hauptrahmen aus und stellen seine horizontale Größenänderung so ein, dass er sich an den Inhalt anpasst. Sie wissen also, es entspricht der Breite und Höhe seiner Inhaltselemente Nehmen wir hier die Gruppen von Menü-Links und legen ihre Größenänderung so fest, dass sie den Container füllen. Also, weißt du, wann immer ich die Größe ändere, werden sie auch die Größe ändern Und lassen Sie uns die Suche starten und das so einstellen, dass der Container gefüllt wird. Und schließlich möchte ich etwas weniger Abstand zwischen dem Logo und der Suchleiste haben. Also gruppieren wir sie, wählen beide aus, verschieben A, um sie zu ihrem eigenen Frame hinzuzufügen, und wir setzen den Abstand zwischen ihnen auf 24. Das ist also die erweiterte Version der Seitenleiste. Lassen Sie uns nun die zusammengeklappte Version erstellen. Lassen Sie uns also diesen Befehl D oder Control D duplizieren, und die zusammengeklappte Version ist im Grunde genommen eine sehr kleine. Es ist sehr schmal, okay? Um das zu ermöglichen, müssen wir unsere Elemente so gestalten , dass sie in einen sehr engen Raum passen. Für die Menüelemente bedeutet das, den Text loszuwerden. Wir behalten einfach das Symbol, das Logo Möglicherweise müssen wir es entweder verkleinern oder eine andere Version des Logos verwenden. Die Suchleiste, wir ersetzen sie durch eine Schaltfläche und die Liste kann weitergehen. Also lass uns an die Arbeit gehen. Fangen wir von oben an. Und wir werden das Logo tatsächlich ersetzen. Wenn wir zu den Marken-Assets für Shop Mingle zurückkehren, haben wir zwei Versionen des Logos, die Standardversion und eine kleinere Version, nur die Symbolversion, richtig? Also schnappen wir uns diesen. Das ist perfekt für diesen Anwendungsfall. Also wählen wir den Rahmen hier aus, fügen ihn ein und ich drücke K, um die Größe zu ändern, und ich setze die Breite auf 48 Pixel Jetzt löschen wir das alte Logo. Wir verschieben es nach oben, indem wir in diesem Fall einfach die Aufwärts- und Abwärtspfeiltaste oder die Aufwärtspfeiltaste drücken , und wir benennen es in Logo um. Suchleiste können wir einfach den Suchtext löschen und die Eingabe hier auswählen. Anstatt auszufüllen, stellen wir ihn so ein, dass er den Inhalt umarmt Oder noch besser, um sicherzustellen, dass wir die gleiche Breite für diese Elemente haben , können wir die Größe auf 48 Pixel ändern und sicherstellen, dass die Elemente zur Mitte ausgerichtet sind Als Nächstes wählen wir die Rahmen aus, die die Gruppenüberschriften enthalten, und wir werden sie einfach ausblenden Und was ist dann mit den Menüelementen? Wir brauchen eine Version davon , in der es nur das Symbol ist. Gehen wir also zurück zu unserer Hauptkomponente des Menülinks. Wir wählen die Standardversion aus. Wir klicken auf das Pluszeichen und benennen es in die Standardeinstellung „Ausblenden“ um. Und alles, was wir hier tun müssen, ist einen Text auszuwählen, ihn auszublenden und dann das Hauptelement auszuwählen. Stellen wir eine Breite von 48 Pixeln und richten wir alles in der Mitte aus. Jetzt können wir hier reingehen und „Standard reduziert“, „ Standard reduziert“ auswählen. Und wieder hier. Was ist mit dem Auserwählten? Fügen wir eine weitere Variante hinzu. Also werde ich das auswählen, Variante hinzufügen. Ich sage ausgewählt, zusammengebrochen. Und dieselbe Geschichte. Wir wählen den Text hier aus, wir verstecken ihn. Wir wählen das Hauptelement aus. Wir setzen die Breite auf 48 und richten alles in der Mitte aus. Jetzt können wir also zurückgehen und diesen ausgewählten Ordner auswählen, oder ich hätte sagen sollen, aktiv reduziert, nur um mit der Namenskonvention Schritt zu halten. Also aktiv ist zusammengebrochen. Großartig. Schließlich brauchen wir noch eine Variante, und das ist die reduzierte Version des Menüelements mit einem Badge. Lassen Sie uns diese also tatsächlich duplizieren. Wir nennen es zusammengebrochen mit Abzeichen. Und lassen Sie uns einen Kreis zeichnen , der acht mal acht groß ist. Und weil es sich um einen automatischen Layoutrahmen handelt, positioniert Figma ihn automatisch, aber das wollen wir nicht Also gehe ich gleich hier hin und wähle Ignorieren, Entschuldigung, hier oben, falsch. Ignoriere das automatische Layout. Okay. Und das ermöglicht es mir im Grunde , dieses Element an einer beliebigen Stelle innerhalb eines automatischen Layoutrahmens zu positionieren. Verschieben wir es also dorthin und dann eins, zwei, drei, vier, eins, zwei, drei, vier. Und lassen Sie uns eine passende Farbe hinzufügen. Wenn wir hier zum Farbschema zurückkehren, möchte ich das sekundäre, das Korallenrot, verwenden. Also suche ich nach Korallenrot und verwende 500, die Grundfarbe. Also gehen wir im Grunde von hier zu hier und von hier zu hier. Eine Sache, die ich hier ändern möchte ist, alles auszuwählen und die Breite so einzustellen, dass sie sich an den Inhalt anpasst Sie werden also in ihrer normalen Größe angezeigt. Ich werde das für sie alle tun. Inhalt umarmen Da haben wir's. Okay. Und diese sollten 48 Pixel breit sein, und im Moment sind sie 44. Warum passiert das also? Also 48, 48, 48. Oh, okay, das liegt also daran, dass die Breite unterschiedlich sein kann. Also muss ich die Breite hier tatsächlich manuell auf 48 Pixel einstellen. Das ist in Ordnung. Das ist keine so große Sache. 48 und 48 auch hier. Ordnung. Also sind wir auf dem Weg dorthin Lassen Sie uns all diese Elemente auswählen und sie einfach wieder auf den Inhalt umarmen Machen Sie sich keine Sorgen um diese rosafarbene Linie hier. Es ist nur ein Artefakt , das ich seit diesem neuen Figma-Update immer wieder gesehen Okay. Und lassen Sie uns auch diese Version ändern. Also werde ich es von Standard auf Standard reduziert ändern , und ich werde auch das Symbol auf eine Linie nach rechts ändern. Und zum Schluss möchte ich den gesamten Rahmen ausblenden. Also alles, was hier noch übrig ist, ist der Avatar. Das ist also unsere zusammengeklappte Version der Seitenleiste. Das ist die erweiterte, das ist die zusammengeklappte. Das war nicht allzu schwer. Es. Sie können sehen, wie schnell das geht wenn Sie die Dinge vorher richtig eingerichtet haben, mit, Sie wissen schon, Ebenenstilen und Farben und Komponenten und Varianten und all dem Zeug. Es geht einfach darum, ein paar Dinge zu ändern, ein paar Dinge zu verstecken. Und Sie können in diesem Fall ganz einfach von einer erweiterten Version der Seitenleiste zu einer reduzierten Version wechseln in diesem Fall ganz einfach von einer erweiterten Version der Seitenleiste zu einer reduzierten Version Nun, da wir diese beiden haben, wollen wir uns ansehen, wie wir den Wechsel zwischen den beiden Zuständen animieren können , und das ist in Kürze 6. Animieren der Sidebar: Nun werden wir den Wechsel zwischen eingeklappter und erweiterter Ansicht und umgekehrt mithilfe von Prototypen animieren zwischen eingeklappter und erweiterter Ansicht und umgekehrt mithilfe von Und wenn Sie noch nie Prototyping in Figma verwendet haben, Es ist super, super einfach. Prototyping ist eine Möglichkeit , bestimmte Elemente interaktiv zu machen Und das tun Sie, indem Sie Auslöser und Aktionen verwenden. Ein Auslöser ist etwas, das ein Benutzer tut, indem er auf etwas klickt, zu etwas scrollt , eine Taste drückt Eine Aktion ist etwas , das als Reaktion auf einen Auslöser passiert als Reaktion auf einen Auslöser Beginnen wir also damit unsere beiden Seitenleisten zu erstellen oder in eine Komponente umzuwandeln. Um das zu tun, wählen wir beide aus. Lassen Sie uns sie tatsächlich aus diesem Rahmen herausziehen. Und lassen Sie uns das in erweitert umbenennen , und lassen Sie uns das in reduziert umbenennen. Wählen Sie nun beide aus. Und lassen Sie uns hier in der Seitenleiste einen Komponentensatz erstellen Okay? Wenn wir das tun, wird Figma eine Komponente mit diesen beiden Elementen als Varianten erstellen diesen beiden Elementen als Varianten Okay? Lassen Sie uns die Komponente in Sidebar umbenennen und wenn sie ausgewählt ist, benennen wir diese Eigenschaft tatsächlich um indem wir auf den Status doppelklicken Natürlich können Sie sie nach Belieben umbenennen. Jetzt haben wir also eine Seitenleiste mit zwei Zuständen. Erweitert und zusammengebrochen. Wenn ich also zu diesem Bild hier zurückkehre, kann ich zu meinen Vermögenswerten zurückkehren. Ich kann zu lokalen Assets gehen und die Seitenleiste hierher ziehen . Und das ist natürlich ein Beispiel. Es ist eine Kopie meiner Originalkomponente. Aber wenn die Option ausgewählt ist, kann ich ganz einfach hier nach oben gehen und den gewünschten Status auswählen. Das ist also der erweiterte Modus, aber ich kann leicht zum ausgeblendeten Modus wechseln und umgekehrt. Lassen Sie uns nun die Animation erstellen , die diese Änderung nahtloser macht. Wir kehren also zur Hauptkomponente zurück und drücken Shift E. Dadurch wird zwischen dem Prototypmodus und dem Designmodus umgeschaltet Sie können diese Änderung auch vornehmen indem Sie auf diese beiden Schaltflächen hier in der Seitenleiste Sobald wir uns im Prototypmodus befinden, müssen wir den Auslöser auswählen, oder? Was wird also passieren, um diese Animation auszulösen? Nun, sagen wir, wenn wir auf den Link zum Zusammenklappen klicken, möchte ich, dass diese Seitenleiste zur reduzierten Version wechselt, okay? Also mit meinem Mauszeiger. Ich werde hier mit der Maus über das Pluszeichen fahren, klicken und in den Rahmen ziehen Nun, das wird zu einer Interaktion führen, oder? Der Auslöser ist also ein Klick , wenn ich auf diese Schaltfläche klicke. Die Aktion besteht darin, dass ich in den zusammengeklappten Zustand wechsle und dann die Animation auswählen kann. Damit es sich um eine sehr flüssige Animation handelt, wählen wir Smart Animate Und Smart Animate schaut sich im Grunde an, wie sich ein Element im Zustand A befindet, und dann schaut es sich an, wie sich dasselbe Element im Zustand B befindet Es erkennt also die Unterschiede und erstellt eine Animation für die Änderung der Eigenschaft, richtig? also beispielsweise ein Element, wenn dasselbe Element lang ist, sagen wir, im Zustand A breiter und im Zustand B kürzer ist, animiert die intelligente Animation die Breiteneigenschaft Es wird das Element verkleinern. Es wird die Änderung dieser Breite animieren. Also werden wir Smart Animate wählen. Für die Kurve wählen wir „Sanft“ und behalten die Dauer von 800 Millisekunden Lassen Sie uns jetzt das Gegenteil tun. Wenn ich also im Zustand „Zusammenklappen“ bin und den erweiterten Zustand zurückkehren möchte, werde ich eine weitere Interaktion erstellen, und diese wird ebenfalls per Mausklick ausgeführt, und wir wechseln zu erweiterten und gleichen Eigenschaften, intelligente Animation, sanfte 800 Millisekunden Okay. Also, lassen Sie uns das etwas kleiner machen und die Instanz hier auswählen und sie zentrieren. Und wenn wir zum Prototypmodus zurückkehren, fügen wir einen Flow-Startpunkt hinzu, und Sie können ihn tatsächlich genau hier sehen. Dadurch wird dieser Frame nur als Flow One markiert. Wenn ich also Shift und Leertaste drücke , wird Flow One abgespielt. Da ist also meine Seitenleiste. Und jetzt, wenn ich auf „Zusammenklappen“ klicke, ändern sich die Dinge, oder? Es geht von der erweiterten Version zur reduzierten Version. Und umgekehrt, wenn ich darauf drücke, geht es von reduziert zu erweitert über. Und ich kann damit herumspielen, so viel ich will. Aber es ist eine sehr flüssige Animation. Das Logo ändert sich ebenfalls. Beachten Sie hier. Das Logo ändert sich von diesem Teil zum anderen, weil sie den gleichen Namen haben, richtig? Und Smart Animate schaut sich die Namen der Ebenen an. Da ich also beiden Ebenen den Namen Logo gegeben habe, animiert es den Wechsel zwischen ihnen. Wie einfach ist das? Und natürlich können Sie, Sie wissen schon, hier mit den verschiedenen Animationseigenschaften herumspielen. Sie können auf eine dieser Nudeln doppelklicken und, wissen Sie, Sie können zum Beispiel die Kurve zwischen, Sie wissen schon, sanft bis schnell ändern die Kurve zwischen, Sie wissen schon, , sagen wir mal. Es wird eine etwas andere Lockerung sein. Lass uns das auf schnell ändern. Verschieben Sie jetzt die Leertaste und die Animation wird etwas anders aussehen. Und das ist es wirklich. So können Sie in Figma eine zusammenklappbare Seitenleiste entwerfen und animieren eine zusammenklappbare Seitenleiste Sie jetzt nur sicher, dass die beiden Versionen der Seitenleiste Varianten innerhalb eines Komponentensatzes sein müssen, damit das gesamte Prototyping-System ordnungsgemäß funktioniert die beiden Versionen der Seitenleiste Varianten innerhalb eines Komponentensatzes sein müssen , das gesamte Prototyping-System ordnungsgemäß Prototyping-System Nachdem das geklärt ist, schließen Sie sich mir bitte in der nächsten Lektion an, um das Fazit und einige abschließende 7. Schlussbemerkung und abschließende Gedanken: Hallo, herzlichen Glückwunsch zum Abschluss dieses Kurses und vielen Dank fürs Zuschauen. Ich hoffe, Sie fanden ihn nützlich und wertvoll und haben etwas Neues gelernt. Ich habe es wirklich genossen, diesen zu erstellen, und ich kann es kaum erwarten, Sie im nächsten zu sehen. Also, was solltest du als Nächstes tun? Also, ich würde mich freuen, wenn Sie sich einen Moment Zeit nehmen und eine Bewertung für diesen Kurs hinterlassen würden . Es hilft mir wirklich, in Zukunft bessere Kurse zu erstellen, und dein Feedback ist sehr wichtig. Äh, schauen Sie sich auch gerne mein Profil an, um meine anderen FigMA-Kurse zu sehen Einer von ihnen widmet sich zu 100% dem automatischen Figma-Layout und bietet viele Beispiele und Aufgaben aus der realen Welt Schauen Sie sich das also unbedingt an. Ich betreibe auch einen YouTube-Kanal , auf dem ich Inhalte zum Thema Webdesign mit Fokus auf Figma teile auf dem ich Inhalte zum Thema Webdesign mit Fokus auf Figma Du kannst mich auch über die üblichen sozialen Netzwerke kontaktieren über die üblichen sozialen Netzwerke Links findest du auf meiner Profilseite. Und nachdem das gesagt ist, ist es Zeit für mich, mich abzumelden. Nochmals vielen Dank fürs Zuschauen und freue mich darauf, Sie in meinem nächsten Kurs zu sehen . Tschüss fürs Erste.