Figma Music Player Web App -UI/UX. Gestalten einer kompletten Web-App für den Musikspieler

1. Einführung: Willkommen zu diesem figma UI UX Designkurs. Mein Name ist ja dann jede Zeile drei und Albert-Instruktor in diesem Kurs. Im Figma-Kurs lernen Sie, wie Sie eine komplette Web-App entwerfen. Sie ein UX UI-Design einer vollständigen Miss it Clear Web-App in diesem Kurs Werfen wir einen Blick auf das Projekt, das Sie in diesem Kurs entwerfen werden . Dies ist also das Bankdesign unserer Web-App, das Sie in diesem Kurs entscheiden werden . Du siehst, dass wir unsere nette Sidebar haben. Sie werden also lernen, wie man verschiedene Kw-Graffiti abfinden kann. Und dann haben wir hier unsere nette Rubrik, und danach haben wir unsere Abteilung für magische Gegenstände. Und wenn ich jetzt auf dieses Plus-Symbol klicke und dann kann ich diese schöne Modellbox sehen. Und wenn ich nach draußen klicke, wird es entfernt. Und wenn wir auf den geschlossenen Zyklus klicken, wird er hier entfernt. Während Sie dies als Web-App, Sie oder UX entwerfen, werden Sie auch lernen, wie Sie mit Neutippen arbeiten und Prototypen machen. Und es kann hier eine andere Art von Animation hinzufügen. Ich habe mein Bestes versucht, jeden einzelnen Teil dieser App zu erklären , den Sie werden aus dieser Praxis lernen, diese Technikkomponente, eine andere Art, Ihnen bei der Organisation Ihres Projekts zu helfen um noch viel mehr Dinge zu tun. Deshalb empfehle ich Ihnen dringend , diesen Kurs zu genießen. 2. Sidebar: Willkommen zu diesem Video. In diesem Teil beginnen wir mit der Gestaltung unserer Audioplayer-App. Dies ist also die grundlegende App , die wir entwerfen werden. In erster Linie öffne ich unsere neue Designdatei und Figma. Klicken Sie also auf diese neue Designdatei. Und ich werde es schaffen und bin bereit, mich mit dem Audiodatei-Audioplayer zu treffen. Du kannst ihm einen beliebigen Namen geben. Okay, also müssen wir in erster Linie hier einen Frame hinzufügen. Also wähle ich diesen Frame und dann dieses Deck stopp 1440 und dann 24. Ich wähle dieses aus. Wenn du willst. Sie können den Namen auch ändern, aber es ist okay. Wir werden nur einen haben. Lass es mich ändern. Das können wir sagen. Okay, also in unserem Design haben wir die Seitenleiste, wir haben diese Albumliste und dann haben wir diese Liste von Musikplayern. So schnell, lass mich zuerst diese 1 zeichnen und dann schaffe ich es, okay, einen Moment. Also nehme ich Hilfe von diesem Rechteck und zeichne dieses Design. Es sollte genau so sein. Und los geht's. Also haben wir dieses Design. Und jetzt können wir dafür eine Farbe hinzufügen. Also haben wir diese Art von Farbe hier. Also lass mich die Farbe ändern. Und tatsächlich kann ich die Farbe aus dieser Datei kopieren. Kopieren Sie erneut diese Farbe, die ich bereits erstellt habe. Was kann ich also tun? Ich kann das vorherige Design öffnen, das ich bereits gemacht habe. Irgendwas. Dieser ist hier. Oder wenn Sie möchten, können Sie jede Farbe wählen , was immer Sie wollen. Aber ich mag diese Farbe. Es gibt einen Grund, warum ich diese Farbe aus meinem vorherigen Design kopieren werde. Und der Farbcode wird es sein. Dies ist also der Farbcode dieses Artikels. Ich kopiere diesen Farbcode und mache es mit farbigem Teller-Design. Was kann ich also tun? Ich kann kreieren, ich kann hier unsere Farben erstellen. Nennen wir es also Sidebar Color. Und dann erstelle einen Stil. Aber wir müssen diesen Farbcode in diesen Farbcode ändern. Jetzt sieht es genauso aus, wie wir gerade hier haben . Und noch ein Farbcode, den ich von hier kopieren möchte , der dieser Farbkurs sein wird. Ich kopiere diesen Farbcode von hier und erstelle eine andere Farbe und einen anderen Stil für diesen Artikel, und dann werden wir ihn später verwenden. Also nenne ich es, ich werde sagen: Oh, Musik, spiele Karten und kreiere hier einen Stil. Und dann ändere ich hier die Farbe in diese Farbe. Aber keine Sorge, wir können, wir können diese Farbe hier auswählen. Aber was ist hier passiert? Dies ist unsere Sidebar-Farbe. Okay, also haben wir hier einen Fehler gemacht, oder wir müssen ihn ändern. Also diese Seite pro Farbe, und das ist die Musikfarbe. Für die Musikfarbe werden wir diese finden, die so aussehen wird. Und für die Farbe der Seitenleiste müssen wir sie in diese Farbe ändern, die diese Farbe ist. Ich kopiere es. Und dann ändere ich es von hier aus in diese Farbe. Jetzt können wir es einfach entweder dieses oder dieses benutzen. Wenn ich diesen Artikel für diese Farbe auswähle, wird es diesen auswählen, aber es wird diesen auswählen, aber wir brauchen diesen Artikel hier. Alles klar, jetzt können wir diesen Frame hier hinzufügen. Wir können dieses Design hier hinzufügen. Wir haben das, wir haben dieses EMS und dann eine Artikelliste dafür. Schnell, lass mich unseren Kreis zeichnen. Also werden wir die Hälfte dieses Ellipsen-Tools hier nehmen. Und dann zeichne ich dieses Ellipsenwerkzeug und mache es gleich gehärtet und weiß, damit es kreisförmig aussieht. Und davor lass es mich laufen, damit wir wissen können , wie es in einem echten Gerät aussieht. Und es sieht so aus. Ich entferne dieses Icon hier. Es sieht so aus. Und ich werde das Wild ein bisschen mehr vergrößern. Und dann füge ich es hier zur Mitte hinzu. Und was kann ich dann tun? Ich kann hier einfach einen Schlaganfall hinzufügen und dieser Vortrag wird drei sein. Und dann ändere ich die Farbe des Strichs in weiße Farbe. Und hier werden wir unser Bild hier platzieren. Also klicke ich auf diesen Ort EMS. Und dann wähle ich aus und wähle dieses Bild aus. Los geht's. Also wird es die MS hinzufügen und wenn ich dann, jetzt haben wir diese hier. Wenn ich darauf klicke. Okay, aus irgendeinem Grund hat es nicht funktioniert. Okay, so wütend auf unser Image. Und jetzt sollte ich dieses Bild hier sehen können . Jetzt haben wir unseren Text hier, damit wir sagen können, dass der Name Zhan tun wird. Und wir werden es in die Mitte stellen. Und Schriftgröße mit zwei Zufällen, ich wähle es auf 20 aus. Und wenn du willst, dann kannst du definitiv einen anderen Stil hinzufügen. Es wird hier nicht gut aussehen. Es kann dies wählen oder Sie können anderes Design wählen, was auch immer Sie möchten. Ich wähle aus. Vielleicht können wir das behalten. Und danach, was wir haben, danach haben wir diese beiden Gegenstände, haben wir diese beiden Gegenstände, Musik am wenigsten unser herzlicher Favorit und dann den Lockout. Also was ich tun werde, füge ich hier einen Text hinzu und ich werde Musikliste sagen. Und für diese 1 muss ich zuerst den Textstil ändern. Wir werden es in dieses ändern. Sie können eine beliebige Liste auswählen und einen beliebigen Textstil haben. Das ist kein Problem, also können wir es behalten, du kannst es von hier aus starten. Und danach nehmen wir die Hälfte dieses Plugins. Also Filtersymbol und ich habe dieses Plug-In namens Feeder-Symbole bereits installiert. Wenn Sie dieses nicht haben, können Sie es einfach aus der Plugin-Community installieren. Und dann sage ich, ich nehme diese Ikone hier. Dieser befindet sich jetzt außerhalb des Hauptrahmens. Das ist der Grund, warum ich es hierher stellen werde. Und jetzt ist es da. Und ich lege es genau hier hin. Und jetzt kann ich die Farbe einfach auf Weiß ändern. Was kann ich jetzt tun? Und wir müssen das nur haben oder nicht, tun Sie das nicht. Wir brauchen diese musikalische Liste und das, das nicht diese Ellipse, wir brauchen diese Musikliste und diese hier. Und dann, okay, also ist es schon da. Was können wir jetzt tun? Grundsätzlich können wir für diese beiden Gegenstände einen Groove machen. Und eine andere Sache ist so schnell, lass mich es gruppieren. Ich nenne es Befehl Z. Und offensichtlich Wachstum werde ich den Namen der Gruppe umbenennen. Ich drücke Command Control R und die Tastatur. Sie können aber auch mit der rechten Maustaste klicken und es umbenennen. Und ich sage Sidebar Item. Und jetzt müssen wir den Stil und die Schriftgröße dieses ändern . Wir brauchen diese größere Schriftgröße nicht. Was kann ich also tun? Wir können es hier machen. Warum wird es nicht angezeigt? Also müssen wir diese beiden wählen. Und dann statt 16 statt 20 wähle ich es auf 16 aus. Mal sehen, wie es aussieht. Es sieht gut aus, aber was können wir jetzt tun? Wir können 60 in Ordnung sein. Es sieht gut aus. Kein Problem. Aber ich wollte nur wissen , dass wenn es die gleiche Größe hat, okay, also ist es in derselben Zeile. Cool. Jetzt können wir unsere Gruppe duplizieren. Was kann ich also tun? Ich drücke Command D, um ein Duplikat zu erstellen. Und ich füge es hier auf diese Weise hinzu. Dann drücke ich Command D. Ich glaube, wir haben drei Punkte. Einer ist L1, dann Favorit. Dann füge ich hinzu, dass der Name hier Album sein wird. Album. Und was haben wir dann sonst noch? Wir haben unseren Favoriten. Und was kann ich dann hier machen? Ich schreibe Stoff. Es ist also immer eine gute Idee, alle Gruppen so zu erstellen , dass Sie dasselbe Design duplizieren können. Jetzt können wir sehen, dass wir eine Art Design haben und genau aus der gleichen Position, in der es kommt. Und ja, aber dieses Ding ist jetzt, ich denke, ich muss es anpassen, weil es nicht von der Mitte aus beginnen wird , weil dieses Feld, aber Text etwas länger ist. Jetzt ist es in der gleichen Position. In Ordnung, jetzt unten haben wir noch ein Feld namens. Wir haben noch ein Feld genannt. Okay, eine andere Sache ist , dass ich unseren Rahmen anpassen werde , weil die Höhe des Rahmens wirklich groß ist. Also werde ich nur ein bisschen hinzufügen , damit wir das gleiche Design haben. Okay, also unten haben wir eine Option namens, wir können auch nur diese hinzufügen. Mit diesem hier. Jetzt haben wir eine andere Option namens Lockout. Also zeichne ich hier ein Rechteck. Ich zeichne hier ein Rechteck. Und was ich dann machen werde, werde ich hier und hier einen Schlaganfall machen. Von hier aus können Sie festlegen, von wo aus Sie einen Strich wünschen. Sie möchten den Strich von allen Seiten oder von oben oder unten oder links. Derzeit wird unser Schlaganfall von allen Seiten sein, aber ich möchte nur von oben einen Schlaganfall haben. Und es gibt einen Grund, warum ich dieses Top auswähle. Und ich will auch diesen Strichstil. Anstatt solide, füge ich es zu Strich hinzu. Und was können wir dann tun? Wir können das ändern. Wie kann ich diese Farbe ändern? Wir brauchen also das gleiche Design, aber zum Glück haben wir bereits unsere Farbe, haben wir bereits unsere Farbe die wir kreiert haben. Unsere Farbe ist immer noch. Dies ist also der Vorteil der Verwendung der Farbe darin , dass Sie den Farbcode nicht immer wieder kopieren müssen . Sie erstellen Ihre Farbe ist ihnen zu sagen, dass Sie sie einfach wiederverwenden. Jetzt haben wir dieses farbige Zeug. Eine andere Sache, die wir hier ändern müssen , müssen wir unsere Strichfarbe in Weiß ändern. Jetzt sieht es gut aus. Jetzt können wir hier unser Icon und den Abmelde-Button setzen. Eine andere Sache, an die du dich hier erinnerst , wir haben die Seitenleiste , wir haben diese, und wir haben uns so schnell entmutigt, lass mich den Namen dieses ändern. Wir können „Lockout Guard“ sagen. Und hier fügen wir unser Icon hinzu. Also wähle ich das Symbol aus, logout. Sie haben möglicherweise ein Abmeldesymbol, das dieses Symbol sein wird. Ich werde es zuerst nur ins Haus stellen. Und dann bringe ich es hier hin. Und wir können die Größe und das Gewicht auf 35 mal 35 ändern und dann die Farbe in Weiß ändern. Dann sind wir schon hier. Lass es mich überprüfen, wie es aussieht. Es sieht gut aus. Wir können aber auch von dieser Position ausgehen , da unser Artikel von dieser Position stammt. Jetzt hat es die gleiche Position. Und hier können wir einen Text hinzufügen und wir können ausloggen. Logout. Jetzt haben wir diesen Gegenstand und lassen Sie mich diesen anpassen. Oder wir können es anpassen. Wir können es auf diese Weise ansprechen. Jetzt müssen wir also drücken, wir müssen sie zu einer Gruppe machen. Also unsere Rechteckkarte, unser Lockout-Icon und Abmeldetext. Und ich schaffe es zur Gruppe. Ich kann sagen, ausloggen. Okay, also haben wir dieses Design. Bisher haben wir ein sehr gutes Design für unsere Sidebar gemacht. Und im nächsten Teil werden wir anfangen, für den Rest des Teils zu arbeiten. Ich werde dieses Video gleich hier beenden. Wir sehen uns in der nächsten Vorlesung. Tschüss. 3. Album: Willkommen zu dieser Vorlesung. In diesem Teil werden wir mit der Gestaltung unserer Albumliste beginnen. Dafür werde ich in erster Linie erstellen, damit wir diese Artikelliste hier haben. Okay, so schnell, lass mich dieses Rastersystem hinzufügen. Also Layout-Raster werde ich hinzufügen, also werde ich es anstelle dieses Rasters auf sechs ändern und dann unser Raster in Spalte R ohne sechs ändern. Also müssen wir 1815 haben. Alles was du brauchst, um drei zu haben. Wir müssen haben, dass 1515 gut sein wird. Das ist also unser Netzsystem. Und von hier aus können wir uns leicht identifizieren, wir werden anfangen, unsere Karte oder alles zu entwerfen. Also fangen wir an, von hier oder von hier aus zu arbeiten . Ich denke, es wird gut aussehen. Und wir werden diesem folgen. Und wir werden bekommen, wir werden diesen Raum haben, oder wir können von hier aus anfangen, und wir werden diesen Raum behalten. Okay, so schnell haben wir hier eine SMS. Also füge ich hier einen Text hinzu. Ich sage Albumliste, VM-Liste. Adelman-Liste wird also hier sein. Und ich werde den Textstil ändern, nicht in diesem. Vielleicht können wir dieses oder etwas Mutiges geben. Es hat fast das gleiche Design. Und das nicht. Ich verstehe diesen Text nicht einmal. Es hat diesen mathematischen Begriff. Das ist kein Punkt. Vielleicht können wir diese eine Albumliste geben. Und diesen Alumnus werden wir hier mitnehmen. Und danach haben wir unsere Rechteckkarte. Also ziehe ich die Karte von hier auf diese Karte. Und wir haben hier ein bisschen Grenzradius. Also behalte ich es fünf. Und dann haben wir diesen Abwurf jetzt. Jetzt denke ich, dass es sehr groß und größer ist. Wir werden es ein bisschen schaffen. Und darüber hinaus brauchen wir eine weitere Karte. Also werde ich, was ich tun werde, ich werde diese Karte hier duplizieren. Und ich werde es kleiner machen. Dann kann ich es mit diesem hinzufügen , damit wir genau das Gleiche bekommen. Okay, also haben wir uns jetzt verworfen. Lassen Sie mich hinzufügen, lassen Sie mich die Hintergrundfarbe dafür ändern , damit wir es verstehen können. Also haben wir jetzt eine andere Karte, aber sie sollte jetzt im selben Liberalen sein. Okay, also ich, was ich damit meine, wir hätten von dieser Seite aus anfangen sollen. Es wird so aussehen. Jetzt haben wir das hier. Jetzt können wir die Größe dieses vergrößern und es wird so aussehen. Alles klar, jetzt haben wir diese Karte, wir haben diese Karte. So schnell. Lassen Sie mich die Hintergrundfarbe dieser Farbe ändern. Ich werde die Hintergrundfarbe dieses Artikels ändern wird weiß sein. Dann müssen wir hier einen Effekt hinzufügen. Jetzt wird es gut aussehen. Also haben wir diese Karte, wir haben diese Rechteckkarte und diese Karte ist hier. Danach müssen wir richtig sein? Ich kann die Farbe hier ändern, vielleicht diese Farbe und ich füge hier einen Text hinzu. Es wird r sein, l. Nicht auflisten. Und wir können Popmusik sagen. Und ich behalte die gleiche Schriftgröße bei, die ich verwende. Beide Musik. Und hier werden wir noch einen Text haben, den ich von hier aus anfangen werde, von dieser Zeile aus. Und ich sage 20 Lieder. Dass ich 20 Lieder sagen werde. Jetzt sieht es echt gut aus. Was können wir also, was können wir hier sonst noch tun? Wir können hier das 01 weitere Icon hinzufügen, das Musik-Icon sein wird. Also was kann ich, wie kann ich das hinzufügen? Ich öffne das Plug-In dieses Feeder-Symbole. Und hier gehe ich zu Sars Music, also ziehe ich, ich nehme das hier hin. Und ich ziehe es her. Ich halte es hier fest. Und jetzt sieht es richtig schön aus, dass wir diese Musik haben. Was ich jetzt tun werde, werde ich alles für diese Karte gruppieren. Machen Sie sie also in Gruppe und benennen Sie die Gruppe um, und wir können es sagen. Was können wir sagen? Wir können sagen, wir können hier Albumliste, L bum, bum item sagen . Also ich ein Gegenstand. Dann haben wir einen Abwurf, also können wir jetzt mehrere Karten erstellen. Also drücke ich Befehl D und wir werden es auf diese Weise schaffen. Und ich drücke Control D, um das zu kontrollieren. Wir werden diese Karte hier also nicht benötigen da wir hier weitere Karten hinzufügen müssen, also werde ich diesen Artikel entfernen. Eine andere Sache ist das, also sagen wir, ich werde es auf diese Weise hinzufügen. Okay, also wie du das hier organisieren wirst. Um diesen zu organisieren, können Sie einfach das, was ich mit organisiert meine, ich meine, ich möchte sagen, Sie haben so, als ob Sie sehen können, dass dieser Honda dies hat und das hat den gleichen Abstand zu diesen Gegenständen, aber dieser hat eine kräftige und größere Distanz. In diesem Fall können wir dieses hier gezeigte Modell verwenden . Du siehst aufgeräumt. Was wir also aufgeräumt, ich werde für uns tun, wird unseren Wagen organisieren. Und es wird uns das gleiche Gewicht und die gleiche Größe und den gleichen Platz von jeder einzelnen Karte geben. Sie können jetzt sehen, dass wir diese 19 haben und wir haben diese 19 von hier aus. Und dann werde ich, für diese Karte, muss ich es horizontal machen, als würde ich es nur zu einem Maulwurf machen. Nun, wenn ich will, kann ich einfach Änderungen an diesem vornehmen. Also werde ich dieses hier noch einmal auswählen. Und wenn ich diesen Aufräumen drücke , haben wir hier kein Problem. Wenn es sichtbar ist, bedeutet dies, dass Ihre Daten bereits vorhanden sind. Es hat die gleiche Distanz, die man 1990 sehen kann. Und jetzt, wenn ich die Entfernung ändern möchte, kann ich es einfach machen und es wird sich automatisch für mich anpassen. Jetzt haben wir den gleichen Abstand, 111111111. Also was ich tun werde, werde ich es so behalten. Ich gebe es 14. So sieht es aus. Es sieht so aus. Also mache ich ein Duplikat dieses Artikels. Wir haben dieses Album. Wir haben diesen Albumartikel. Jetzt schaffe ich es zu einem weiteren Gegenstand und dupliziere. Also weil wir die gleiche Höhe brauchen. Und ich werde es 14 bis 14 behalten. Und jetzt brauchen wir diesen Text nicht mehr hier. Ich entferne diesen Text. Ich werde diesen Text und diesen Artikel entfernen. Tut mir leid, ich muss das Ganze von hier entfernen. Und auch das, auch diese Top-Karte. Stattdessen werde ich dieses Rechteck für dieses Rechteck auch von hier entfernen. Jetzt haben wir diese nur eine Karte, und ich werde Änderungen an diesem Design vornehmen. Wir brauchen also einen Schlaganfall für diese Gegenstände. Also füge ich hier einen Schlaganfall hinzu. Und ich brauche Bindestriche, tut mir leid, ich brauche einen Strichstrich. Also ändere ich den Strichstil Solid in Strich. Das sieht jetzt gut aus. Und wenn ich will, kann ich den Strich auch auf drei ändern , damit ich mehr Platz bekomme. Und in diesem Fall werde ich drücken, ich werde es tun, ich werde ein Plus entwerfen oder ich kann einfach das Plus-Symbol drücken wird auch funktionieren. Aber in diesem Fall muss ich eine Menge Font-Style geben, vielleicht 96, um es größer zu machen. Wir können es auch auf diese Weise machen. Also haben wir dieses Plus-Symbol hier. Es bedeutet, dass wir es können, okay, also müssen wir es in der Mitte schaffen. Ich meine, dass wir diesen Radius nicht haben müssen . Wir können es in der Mitte behalten, damit es blastes Symbol aussieht. Unsere Albumliste ist also fertig. Was kann ich jetzt tun? Ich kann das Auge ändern enthält die Farbe des Albumelements. Wir können in dieser Farbe auswählen, nicht diese Farbe. Sie können einfach etwas Farbe hinzufügen und je nach Ihrer Wahl wähle ich nur eine zufällige Farbe aus. Und dann kann ich von hier aus diesen auswählen. Okay, in Ordnung, also sieht es gut aus. Was kann ich jetzt tun? Ich kann einfach Rockmusik sagen. Rock-Musik. Sie können einfach verschiedene Arten von Musiklisten oder Musiknamen hinzufügen . Es spielt keine Rolle. Wir lernen, wie wir es gestalten können, aber Text kann alles sein. Also jetzt noch eine Sache, ich kann es auf 60 ändern. Für diesen kann ich es auf 50 ändern, dann kann ich es auf 70607050 oder rechts ändern. Perfekt. Also haben wir dieses Design und wir können es vernünftiger machen. Ich denke, wir sind fertig für dieses Album, diesen Teil hier müssen wir noch etwas arbeiten. Wir müssen unser Model hinzufügen, ihre Liebe zu dieser Anzeigenalbumliste. Also werde ich dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. Wir sehen uns in der nächsten Vorlesung. Tschüss. 4. Modales Dialogdesign und Overlay: Willkommen wieder einmal zurück. In diesem Teil werden wir unsere Modellbox für diesen entwerfen . Also entwerfen wir diese Art von Modellbox für das Erstellen eines Albums, wenn der Benutzer auf diese Schaltfläche klickt. Dafür müssen wir in erster Linie einen Rahmen erstellen. Also wähle ich hier einen Rahmen aus und ich werde es einfach hier zeichnen , anstatt einfach aus auszuwählen, wir können einfach in diesem Formular auswählen. Auf diese Weise schaffe ich es auf zehn bis Radius. Und lassen Sie uns den Namen dieser Familie ändern kann Albummodell sagen. Also werden wir das haben. Jetzt. Wir können das auf diese Weise machen. Also können wir diesen Text hier hinzufügen. Ich füge das Create-Album hinzu. Dies ist, dies ist nur ein normaler Text, den wir hinzufügen können. Aber wenn Sie möchten, können Sie die Epigraphie, den Schriftstil, ändern . Aber ich werde dein Gefühl von 16 behalten. Ich füge es hinzu. 14, schätze ich. Okay, also lasst es uns in die Mitte stellen. Und jetzt müssen wir unseren Eingabefilter entwerfen, die Eingabefüllung entwerfen. Ich nehme die Hälfte dieses Rechtecks und dann können wir es auf diese Weise gestalten. Und lasst uns das auf zehn ändern. Oder wenn du willst, können wir es auch an 20 geben. Und jetzt füge ich hier einen Schlaganfall hinzu, wird der Schlaganfall einer sein. Und für diese Füllfarbe ändere ich sie in Weiß. Was können wir dann tun? Wir können einen Platzhaltertext in diesem Text hinzufügen. Wir können den Albumnamen sagen. Es ist eine Art Platzhaltertexte, die wir hier haben. Und was kann ich von dort aus tun? Ich kann hier noch einen Button hinzufügen und hier kann ich 20 hinzufügen. Und jetzt machen wir es gleich groß. Wenn Sie sehen, dass diese Größe von dieser Größe kommt , bedeutet dieses Symbol, dass es die gleiche Größe hat. Trotzdem können wir Layout und Layout-Raster hinzufügen. Also können wir eine Spalte hinzufügen. Die Kolumne wird fünf sein. Jetzt können wir leicht verstehen, ob es die gleiche Knotengröße hat. Wenn es also auf diese Weise ist, wenn Sie sehen, dass dieses Zeichen erscheint, bedeutet dies, dass es in der gleichen Größe begonnen hat. Wir können auch die Höhe dieses einen kleinen Stücks ändern. Okay, jetzt brauchen wir diese Raster-Show nicht mehr. Also mache ich die Kugel. Und jetzt füge ich Farbe dieser Gruppe hinzu. Also gehe ich in dieser Farbe oder vielleicht in dieser Farbe. Und dann können wir hier einen Text hinzufügen. Also können wir Save sagen. Und wir können diesen Namen hier angeben. Okay, also werden wir es jetzt nicht sehen können , weil wir diesen nicht verbunden haben. Und hier möchte ich eine Schaltfläche „Schließen“ haben , damit wir unseren modalen Dialog deaktivieren können, wenn der Benutzer darauf klickt . Dafür können wir auch einfach Hilfe von diesem Plug-In in Anspruch nehmen. Ich sage hier „ close icon“. Ich fange an. Und sie haben diese enge Ikone. Wir können diesen auswählen. Und wir können es hierher stellen. Aber ich würde gerne die Größe bei diesem erhöhen . Vielleicht diese Größe. Und dann, okay, so schnell müssen wir es in dieses Modell stecken. Und dann können wir hier nur ein bisschen hinzufügen. Ich denke, wir werden es hier anpassen. Cool, es sieht echt gut aus. Aber eine andere Sache ist , dass wir die Schriftgröße unserer Platzhalter ändern müssen , da wir im Gefängnis die Schriftgröße eine kleinere Größe benötigen. Wir können wählen. Unser 2416 ist immer noch größer, also sage ich 12. Ich denke, für diese Mustertexte können wir es auf 20 halten. Trotzdem sieht es echt gut aus. Jetzt ist es an der Zeit, dieses Prototyping für dieses Modell hinzuzufügen. Wie kann man es machen? So schnell, schnell am Prototyp. Und wenn der Benutzer auf diese Schaltfläche klickt, zeigen wir diesen modalen Dialog. Also haben wir diese Interaktionen jetzt klicken Sie auf diese. Klicken Sie hier. Jetzt auf Klick, es ist völlig in Ordnung. Anstatt die Marine zu erreichen, werden wir offene oder offene Mittel zeigen. Wir werden zeigen, dass der modale Dialog irgendwie Pop-up-Modal im gleichen Tempo ist . Wenn ich also darauf klicke, dann werde ich nach dem Ziel fragen, wo, welches Modell ich unserem modernen Namen zeigen möchte , ist das Erstellen eines Albummodells. Jetzt ist es mit diesem verbunden. Jetzt haben wir hier ein paar Möglichkeiten. Was genau ist es? Also. Mach es vorher, lass uns versuchen, was wir hier sehen können? Jetzt haben wir dieses und wir können dieses Modell sehen, aber wir können nicht richtig modelliert sehen. Aber normalerweise ist unser Hintergrund, wenn wir ein Modell öffnen , irgendwie dezibel. Okay? Eine andere Sache ist, dass wenn ich auf diese Schaltfläche klicke, diese nicht deaktiviert wird. Wenn ich auf klicke, ist es nicht sichtbar. Aber wir sollten diese Funktionalität hinzufügen, wie können wir das machen? Hier haben wir also eine Option , die als Hintergrund hinter Overlays hinzufügen bezeichnet wird. Das brauchen wir also. Jetzt können wir den zerstreuten Satz ändern. Jetzt sollten wir in der Lage sein, wenig Hintergrundfarbe zu sehen , die wir normalerweise haben. Wenn Sie jedoch möchten, wenn Sie mehr Farbe benötigen, können Sie diese auf 50% ändern. Jetzt werden wir hier mehr grauen Hintergrund sehen können. So wird das funktionieren, aber er war gegangen. Also das ist hier, was wir haben, okay, also können wir es jetzt schaffen. Aber wenn ich jetzt nach draußen klicke, wird es nicht dezibellieren, aber normalerweise sollte es deaktiviert werden, wenn ich nach draußen klicke. Dafür gibt es eine andere Option, die beim Reinigen schließen genannt wird. Also, wenn ich diesen auswähle und dann wenn ich darauf klicke, wirst du einfach deaktivieren , wird es doppelt tun, aber unser Icon funktioniert nicht. Dafür müssen wir also tun. Klicken Sie nun auf dieses Icon. Hier. Wir müssen auf die Interaktionen klickenKlick. Und hier haben wir Kleider ausgezogen und Option. Jetzt gehen wir nirgendwohin. Es gibt einen Grund, warum wir nicht zum Overlay navigieren oder öffnen müssen . Vielmehr müssen wir Gloss over wählen. Das bedeutet, dass wir unseren modalen Dialog schließen wollen. Jetzt können wir also nahes Overlay sehen. Wir haben das hier. Wenn ich jetzt darauf klicke, wird es geschlossen. Wenn ich auf klicke, wird es geschlossen. Wenn ich darauf klicke, wird es geschlossen. Okay, also jetzt noch eine Sache, wir haben auch hier irgendeine Erwähnungsoption. Hier haben wir also die Animationsoption, wie Sie sie sofort zeigen, auflösen oder bewegen möchten. Also wenn ich das Morphium wähle, und dann haben wir hier diese Optionen. Sind, wir können diesen aus „Tough“ auswählen , wenn Sie es wollen. Und wir können die Höhe auch auf 600 MS ändern . Jetzt sehen wir, wie es aussieht. Ich kann sehen, dass unsere Modalbox vom Tough kommt. Es läuft hart. Anstatt also einfach rein und raus zu gehen, können wir es einfach schaffen, dass es drin ist. Jetzt. Ich denke, wir werden dieses Ding nicht sehen können. Okay, also ziehe ich mich leicht ein. Und hier haben wir diese ist in 600 Metern. Wenn Sie es von der linken Seite aus tun möchten, können Sie die linke Seite auswählen, dann wird es von der linken Seite kommen. Sie können sehen, dass eine modale Stimme von der linken Seite kommt und sie nach links geht. Dies sind die Optionen, die wir in unserer Figma haben. Wenn du sie von unten willst und dann kannst du es tun. Es wird von unten kommen und unser Hintergrund ist deaktiviert. Das ist das Schöne an Figma-Prototyping, also hat es mir sehr gut gefallen. Also wähle ich dieses Top anstelle von 34 und wähle es dann auf 300 aus. Und mal sehen, wie es aussieht. Es sieht echt nett aus. Und wenn ich darauf klicke, geht es los. Okay, also haben wir unser übermäßig offenes System für Prototyping implementiert . Und ich werde dieses Video gleich hier beenden. Wir werden mit der nächsten Vorlesung fortfahren. 5. Musikplayer und List: Willkommen zu dieser Vorlesung. In diesem Teil werden wir versuchen, unseren Rest der Teile zu entwerfen. Jetzt müssen wir unseren Musikwagen entwerfen, in Ordnung, damit wir wissen, welchen vorherigen Teil wir bisher diese Modellbox fertiggestellt haben und es sieht wirklich gut aus. Wir haben ein sehr gutes Design gemacht. Und jetzt werden wir versuchen, diesen Teil hinzuzufügen. Okay, also was können wir dafür tun? Lassen Sie uns jetzt zum Designteil übergehen. Jetzt werden wir unseren Warenkorb schnell gestalten. Also müssen wir unsere Karte von hier aus entwerfen, die wir studieren werden. Also nehme ich Hilfe von diesem Rechteckwerkzeug. Und von hier aus nehme ich dieses Design bis zu dieser Karte. Und es sollte so aussehen. Und ich füge das zu zehn hinzu. Mal sehen, wie diese Karte aussieht. Es hat also dieses Design und es hat diese graue Farbe. Das ist kein Problem. Also haben wir dieses Kartendesign und in der gleichen Größe und der gleichen Entfernung haben wir es. Also wollte ich nur wissen , dass wenn wir es hinzugefügt haben, okay, also haben wir dieses in gleicher Größe und Gewicht. Jetzt müssen wir unser so gestalten, dass wir den Namen dieses Rechtecks ändern können. Wir können es umbenennen und wir können diese Musikkarte sagen. Jetzt müssen wir unser Icon hinzufügen. Dafür füge ich dieses Plugin und dann diese Füllersymbole hinzu. Von hier aus kann ich Musik sagen. Dann sollte ich das ganze Icon sehen können . Also haben wir dieses Tool-Symbol und dann haben wir in der Mitte dieses 1. Zuerst nehme ich das hier. Und dann bringe ich es ins Haus. Und dann müssen wir die Höhe und das Weiß an diesem ändern, vielleicht 35 mal 35. Jetzt kann ich es, ich kann das ziehen. Ich kann das hier hinziehen. Und dann wähle ich dieses eine Icon aus. Und wieder müssen wir es in dieses Haus legen. Und wir können es auch, dann können wir es in den Mittelpunkt stellen. Danach müssen wir, wir können dieses nehmen oder wir können diesen auch drehen. Aber es ist besser, dieses zu nehmen , da Sie dieses Symbol bereits im Plug-In haben. Wenn Sie also irgendeine Art von Web entwerfen und versuchen, verschiedene Arten von Pluging zu verwenden, macht es Ihre Arbeit selten einfach. Sie müssen diese Art von Icon nicht immer wieder entwerfen . Sie müssen also nur diesen verwenden, damit wir Sie entwerfen können . Ich arbeite sehr schnell. So können Sie das auch verstehen, wenn Sie genau die gleiche Höhe und Breite haben. Cool, also sieht es so aus. Also zuerst werde ich es tun, also was kann ich jetzt tun? Wir können diese drei Symbole auswählen und dann können wir diese Aufräumung spielen , damit wir sicherstellen können, dass wir genau den gleichen Draht zwischen diesen drei Symbolen haben . Man sieht, dass es sich angepasst hat. Jetzt können wir hier auch sehen, dass es die gleiche Höhe und Breite hat und genau den gleichen Abstand zwischen beiden Seiten von diesen beiden Seiten hat. Also werde ich hier keine Änderungen vornehmen einfach werde ich sie zu einer Gruppe machen. Und dann sage ich hier Musik-Ikone. Cool. Jetzt haben wir unsere Dauer, Albumnamen und dieses eine Icon. Dafür nehme ich Hilfe von diesem d-Tool. Dann lege ich die SMS ein. Also haben wir das, wir haben das. Wir haben diese größere Schriftgröße. Jetzt. Also lass es mich zuerst ausbessern. Zuerst. Ich muss die Schriftgröße dieses Schriftstücks auf 20 ändern , schätze ich. Und dann können wir es hier anpassen. Und ich kann einfach sagen, Steve, 0,56. Und es sollte von hier aus beginnen. Es sieht gut aus, aber lassen Sie es mich versuchen, wenn wir hier ein paar Dinge reparieren können, sollte es von der Größe ausgehen , damit es in der Mitte ist. Nein, es ist nicht in der Mitte, weil wir dieses Symbol größer als dieses haben, also sollten wir es vom Endergebnis fernhalten. Aus dieser Zeile. Ich meine, von dieser Linie aus. Jetzt sieht es gut aus, aber es ist immer noch, es wird hier nicht gut aussehen. Jetzt ist es in der Mitte. Also haben wir diesen Zwang hier gezeigt und wir können machen, wir können die Farbe der Dauer ändern. Vielleicht können wir diese Farbe wählen und wir reparieren sie später. Lassen Sie mich vorher versuchen, hier noch einen Text hinzuzufügen, also werde ich diesen Text duplizieren. Tut mir leid, es hat nicht funktioniert. Also drücke ich Befehl D. Also muss ich nur dieses T auswählen und dann duplizieren. Und jetzt lege ich es genau in die gleiche Entfernung. Vielleicht kann ich es hier sagen. Und hier sage ich den Namen der Musik. können wir sagen. Wir werden Rockmusik sagen, wie sie aussieht. Es sieht also so aus, aber wir müssen die Schriftgröße ändern. Wir brauchen keine 0,21 Dollar. Wir müssen 15 Schriftgröße haben. Jetzt haben wir dieses Design. Okay, cool. Also haben wir diesen Flip in der Schriftgröße. Jetzt. Ich denke, wir können es auf 14 ändern. Und dann können wir es auf diese Weise behalten , damit es im Mittelpunkt steht. Es ist im Zentrum. Und noch eine Sache , die wir hier tun können, können wir hier unser Icon hinzufügen, das dieses Musiksymbol sein wird. Ich überprüfe das 1. Zuerst. Legen wir es ins Haus und ziehen es dann her. Und wir können, wir haben diese 190 bis 192 oder wir können einfach r, wir können es aufräumen, damit wir die gleiche Distanz bekommen. Und was ist das? Diese Musikikone, diese Musikeiche in der Musik-Symbol. Und dann diese Rockmusik als die Dauer. Und jetzt können wir aufräumen. Jetzt haben wir den gleichen Abstand. Ziel, wir haben jetzt die gleiche Distanz. Und jetzt ändere ich die Farbe dieses Artikels. Um also die Farbe des Textes zu ändern. Wir können es auf diese Weise schaffen. Und dafür können wir dieses Symbol behalten. Aber eine andere Sache, die wir tun können, ist hier. Jetzt haben wir diese Option. Jetzt haben wir unsere Musik. Um diese Farbe dieser Musikkarte zu ändern, oder wir können versuchen, ein bisschen von dieser Farbe hinzuzufügen. Und mal sehen, wie es aussieht. Es sieht so aus, aber wir können unser lineares Verlaufssystem anwenden. Jetzt sieht es so aus, es sieht nicht gut aus. Wir können es auf diese Weise behalten. Ich versuche nur, eine andere Art von Hintergrundfarbe hinzuzufügen . Und wie kann man das erforschen? Wenn Sie also benötigen, wenn Sie einen linearen Farbverlauf hinzufügen möchten , können Sie dies auf diese Weise tun. Okay? Also können wir das auf diese Weise benutzen. Aber wenn wir dieses bisschen dunkel hinzufügen, wird es so aussehen. Und das werden auch diese sein. Stimmt's? Also haben wir diese Option hier. Es sieht ziemlich gut aus. Wir können diese Farbe behalten. Jetzt können wir all diesen Gegenstand in einer Gruppe erstellen. Also ist alles in Gruppen. Ich mache es zu einer Gruppe. Ich kann Musik-Item sagen. Jetzt kann ich einfach prüfen lassen, ob wir diese Farbe wirklich ausgewählt haben. Also was wir in diesem hatten, in diesem hatten wir diese Farbe. Aber jetzt habe ich diese Farbe hinzugefügt. Ich denke, es sieht echt gut aus. Wir können diese Farbe behalten, aber eine Sache, die ich hier ändern kann, kann ich die Farbe dieser Farbe ändern. Anstelle dieser Farbe. Vielleicht würde diese schwarze Farbe hier richtig gut aussehen. Okay, jetzt haben wir diesen Musikinhalt. Und jetzt mache ich ein Duplikat. Und dann lege ich es hier in diese Distanz. Mal sehen, wie es aussieht. Es sieht gut aus. Jetzt kann ich duplizieren, duplizieren und mehrmals versuchen, dieses hinzuzufügen. Also haben wir jetzt und hier diese Musikliste und das letzte Symbol für diese, wie ich bereits aus diesem Farbstil ausgewählt habe, werde ich es behalten. Und was hier passiert ist, warum wir diesen ganzen Gegenstand verloren haben. Und das haben wir hier. Okay, also habe ich hier einen Fehler gemacht weil wir nur diesen anstelle dieser Farbe auswählen müssen . Also drücke ich Command J it. Okay, also was ich getan habe, habe ich diese Hintergrundfarbe eher für den integralen Teil ausgewählt , ich muss nur diese Karte auswählen. Und dann werde ich von hier aus diese Farbe immer noch diese auswählen. Jetzt ist es immer noch, wir können unser Design sehen. Also gefällt mir das wirklich. Es ist okay, eine Sache, die ich tun kann, ich kann diese schwarze Farbe hier in weiße Farbe ändern. Und es sieht gut aus. Ich kann diese Farbe auch für diesen Artikel in weiße Farbe ändern . Und wir können diese Musik auch ändern. Sie können diese Gruppe auswählen und diese Farbe für diese in Weiß und auch dieses Symbol in weiße Farbe ändern diese Farbe für diese in Weiß . Und eine andere Sache , die wir jetzt tun müssen , ist, dass wir diese ändern müssen. Also eine Sache, die ich hier machen muss, lass mich mit 35 versteinert werden. Ich werde das von hier entfernen, und ich gehe zu diesem hier. In Ordnung? Also werde ich sagen, ich füge ein anderes Icon für diesen Musikplayer hinzu. Ich sage diesen Gegenstand hier. Und ich werde sagen, dass Sie von der D5 angeheuert haben. Und dann zieh es einfach her. Jetzt haben wir dieses Design. Es scheint also, dass wir unser Design erfolgreich abgeschlossen haben . Und wenn ich darauf klicke, sehen wir unser Create-Album hier. Eine andere Sache ist, dass Sie von hier aus Ihr Projekt teilen können , um es für den Entwickler zu verwenden. Und wenn Sie auf den Inspect klicken, können Entwickler sich für die Karte verstecken und alles hier wird sich ändern. Man kann den Wind sehen und sich auf diesem Kerl verstecken. 1031031. Hi, D6 ist fünf, Höhe ist sechs ist fünf. Und alles, was Sie mit dem Team teilen können. Und jetzt exportieren wir dieses Design. Was können wir tun, um dieses Design zu exportieren? Jetzt brauchen wir diese Rasteroption nicht mehr. Ich entferne das hier. Exportieren wir dieses Design. Was kann ich also tun? Ich kann auf Export klicken und dann PNG JPEG auswählen. Und dann kann ich sagen, nach Hause exportieren, es wird exportiert. Und wenn ich darauf klicke, sollten wir unser neues schönes Design sehen können , das wir gerade gemacht haben. Okay, ich lade dieses Design hoch. Ich werde dieses Design teilen. Jetzt. Wenn ich diesen exportieren möchte, wähle einfach diesen aus. Und dann klicke auch auf das JPEG und exportiere das Create-Album. Und wir haben dieses Design. Und um das Projekt zu teilen. Du hast diesen Sheriff immer mit einem Team gezeigt. Sie können einfach den Namen ziehen und Sie können den Link einfach senden oder einfach kopieren. Okay, wir haben dieses schöne Design fertiggestellt. Ich werde dieses Video gleich hier beenden. Tschüss.