Figma UI/UX: Entwurf eines kompletten E-Commerce-App-Projekts für Schuhgeschäfte mit erweitertem Prototyping

1. Einführung: Willkommen zu diesem Kurs. Freust du dich darauf, deine App-Design-Ideen in FiCMA zum Leben zu erwecken Egal, ob Sie mit UIUX noch nicht vertraut sind oder bereits über Designerfahrung verfügen, dieser Kurs soll Sie Schritt für Schritt begleiten und Ihnen helfen, Konzepte in echte professionelle Designs für mobile Apps umzusetzen Hallo, mein Name ist YatanHotri und ich freue mich sehr, diesen Kurs gemeinsam mit Abdu Salamhab zu unterrichten diesen Kurs gemeinsam mit Abdu Salamhab . Wir werden Sie von den Grundlagen von FIGMA bis hin zur Entwicklung fortschrittlicher interaktiver Prototypen führen . Wir werden Sie von den Grundlagen von FIGMA bis hin zur Entwicklung fortschrittlicher interaktiver Prototypen , die Sie stolz in Ihrem Portfolio präsentieren können. Im ersten Teil des Kurses werde ich Sie mit den Grundlagen von FIGMA werde ich Sie werden lernen, Ihr Projekt effizient einzurichten, alle wichtigen Tools kennenzulernen und einige Paul-Prototypen zu erstellen , mit denen Sie Ihre Ideen zum Leben erwecken können Diese grundlegenden Fähigkeiten werden es Ihnen später im Kurs leichter machen , komplexere Designherausforderungen zu bewältigen , komplexere Designherausforderungen Dann übernimmt Abd Sala Mahbub die Leitung und führt Sie durch die Gestaltung einer kompletten mobilen E-Commerce-App für Schuhgeschäfte Sie lernen, wie Sie eine App von Anfang bis Ende nach branchenüblichen Praktiken strukturieren Ende nach branchenüblichen Praktiken und ein ausgefeiltes Benutzererlebnis schaffen Er zeigt Ihnen, wie Sie wiederverwendbare Komponenten entwerfen, einheitliche Systemdesigns beibehalten und fortschrittliche interaktive Prototypen erstellen , die sich wie eine echte App anfühlen. In diesem Kurs werden wir uns auch darauf konzentrieren, umfassende Styleguides zu erstellen, Typografie und Farbsysteme zu implementieren und Designelemente so zu organisieren , dass Ihre Arbeit skalierbar und professionell Sie werden auf allen wichtigen Bildschirmen in einer echten E-Commerce-App arbeiten , von Produktlisten und Produktdetailseiten bis hin zu Karten-, Checkout-, SARS- und Kategorienavigationsbildschirm Am Ende dieses Kurses haben Sie gerade einen fertigen App-Prototyp und verfügen über das Wissen und das Selbstvertrauen, verfügen über das Wissen und das um Ihr eigenes Projekt mit STRS zu entwerfen Sie werden verstehen, wie Sie ein einheitliches Designsystem aufbauen, eine reibungslose Benutzererfahrung schaffen und professionelle interaktive Prototypen präsentieren, und professionelle interaktive Prototypen präsentieren die Ihr Portfolio verbessern und potenzielle Kunden oder Arbeitgeber beeindrucken können Ihr Portfolio verbessern und potenzielle Kunden oder Arbeitgeber beeindrucken potenzielle Kunden oder Wenn Sie also bereit sind, in FICMA einzutauchen, verbessern Sie Ihre UIUX-Fähigkeiten und erstellen Sie einen Prototyp mit vollem Funktionsumfang verbessern Sie Ihre UIUX-Fähigkeiten und erstellen Sie einen Prototyp mit vollem Funktionsumfang . Dieser Kurs ist für dich Schließen Sie sich uns an und lassen Sie Ihre Designfähigkeiten auf die nächste Stufe bringen. Wir können es kaum erwarten zu sehen, was Sie kreieren werden. Lass uns anfangen. 2. Erstellen einer Figma-Datei und einer Grundstruktur von Figma: Willkommen zu dieser Vorlesung. In diesem Teil werden wir anfangen, an unserer Figma zu arbeiten. Wenn Sie sich also auf dieser Figma-Site anmelden, sollten Sie diese Art von Oberfläche sehen Wenn Sie neu sind und an keinem Projekt gearbeitet haben, sollten Sie einen leeren Bereich oder vielleicht ein integriertes Figma-Projekt sehen oder vielleicht ein integriertes Figma-Projekt Aber im Allgemeinen sollten Sie oben diese Optionen sehen, und von hier aus müssen Sie auf das Design klicken, um mit dem Figma-Projekt zu beginnen Wenn Sie also hier sind, werden Sie diese Art von Schnittstelle sehen Also als Erstes werde ich euch einen Überblick über die Figma geben euch einen Überblick über , damit ihr versteht, wie sie funktioniert und welche Optionen wir hier haben. Zum Beispiel haben wir auf der Website diesen Bereich, in dem wir die Seiten und Ebenen sehen können der rechten Seite werden wir dieses Design und einige variable Stile und einige andere Optionen haben einige variable Stile und einige , die hier angezeigt werden , sowie den Prototyp, und unten haben wir diese Werkzeugleiste. Lassen Sie uns also zuerst über diese wenigen Dinge wie die grundlegenden Dinge sprechen . Und nachdem wir all diese grundlegenden Dinge geübt haben, werden wir anfangen, an einem echten Walt-Projekt zu arbeiten , damit ihr klare Vorstellungen habt , wie diese Figur funktioniert und wie ihr in einem echten Walt-Projekt arbeiten könnt Auf der linken Seite haben Sie diese Optionen. Eines heißt Datei und eines heißt Assets. In den Tests werden wir also alle Bibliotheken und die Komponenten haben , die wir vorbereiten werden Und im Dateibereich werden wir zwei Optionen haben Eine besteht aus Seiten und eine aus Ebenen Sie können mehrere Seiten hinzufügen. Sie können so viele Seiten haben, wie Sie möchten, zum Beispiel eine Seite, auf der Sie die Typografie auf einer Seite vorbereiten möchten , Sie möchten Farben vorbereiten, und ein Durchgang Low-Fi-Design und eine Pay-Fi-Design, oder Sie können so ziemlich alles haben Und natürlich können Sie diese Dinge umbenennen. Sie haben also diese Optionen. Sie können den Ortsnamen umbenennen. Ich würde zum Beispiel sagen, dass der Name der Vergangenheit Farbe für diesen ist , ungefähr so. Und dann funktioniert es so. Und ganz unten haben wir alle Tools, die in Figma verfügbar sind Hier sehen Sie zum Beispiel das Handwerkzeug diese Dinge, und hier haben wir dieses Rahmenprofil und das Schnittwerkzeug Und hier haben wir Rechtecke, Linien, Pfeile, Linien, Polygone, Ester und Bilder Jedes der Tools hat unterschiedliche Verwendungszwecke. Also werden wir all diese Dinge eins nach dem anderen lernen, und dann ist das für das Textwerkzeug, und das ist für Kommentare und Aktionen, und das sind die Optionen. Und in der rechten Seitenleiste haben Sie einige Optionen. Sie können in den Stilen sehen, dass Text, Farbeffekt und weitere Optionen angezeigt werden, wenn wir einen Rahmen hinzufügen . Nehmen wir zum Beispiel an, wir befinden uns jetzt in Phase zwei. Okay. Um mit dem echten Figma-Projekt zu beginnen, zum Beispiel, wenn Sie eine mobile App entwerfen möchten, UIUX, oder wenn Sie eine Web-App entwerfen möchten, UUX, also zuerst müssen Sie einen Rahmen erstellen Und hier werden Sie diese Optionen sehen. Wenn Sie also auf den Rahmen in der rechten Seitenleiste klicken, werden Sie hier viele APR-Optionen sehen. Zum Beispiel für das Telefon, dann haben sie diese Optionen, Android, iPhone, und Sie können eine davon auswählen. Für Tablets haben sie diese Optionen. Und für Dkstop, wenn Sie beispielsweise für das Design von Webprojekten arbeiten, können Sie diese Optionen haben Sie können eine dieser Zeitungen, sozialen Medien, die Fika-Community oder irgendetwas anderes wählen sozialen Medien, die Fika-Community oder Okay. Sie haben hier also viele Möglichkeiten. Lassen Sie uns zunächst sehen, wie ein Telefonrahmen aussieht. Wenn ich beispielsweise das iPhone 16 P auswähle und darauf klicke, wird hier ein Rahmen angezeigt. Das ist also das Layout. Dies ist der Rahmen, den Sie festlegen können. Und Sie haben die Möglichkeit, ihn zu vergrößern, verringern oder so Sie können diesen auch entfernen Wählen Sie ihn einfach auf der Tastatur drücken Sie einfach die Zurück-Taste oder die Delight-Taste. Also noch einmal, ich werde hier einen Rahmen hinzufügen, und sagen wir, dieses Mal werde ich iPhone 6 wählen. So wird der iPhone Six Frame aussehen. Auf diese Weise haben Sie also mehrere Optionen. Ich kann hier mehr Rahmen hinzufügen. Zum Beispiel werde ich hier Android Android Medium hinzufügen . So wird es also aussehen. Auf diese Weise können Sie also mehrere Frames haben. Lassen Sie uns diesen entfernen. Und wenn Sie zum Beispiel sagen, ich möchte ein iPhone 14 Plus haben , dann wird es so aussehen. Entweder können Sie von hier aus einfach eine andere Art von Rahmen hinzufügen , indem Sie auf diese Optionen klicken , oder Sie können auch einen Rahmen duplizieren. Nehmen wir zum Beispiel an, wir möchten in unserem Projekt für mobile Apps denselben Rahmen für den gesamten Bildschirm und alle Seiten haben . In diesem Fall können wir also einfach diesen auswählen und Strg D drücken, können wir also einfach diesen auswählen und um ihn zu duplizieren. Also dann habe ich jetzt zwei. Dann kann ich das wieder duplizieren. Ich kann Strg D auf der Tastatur drücken, dann reicht es. Es wird dasselbe duplizieren. Und du kannst es auch von hier aus machen, zum Beispiel iPhone 16 so, oder es war so. Und wenn du diese Dinge fallen lässt, zeigt Pigma dir solche Dinge wie den Weltraum und all das Wenn Sie hier einen Rahmen auswählen, stehen Ihnen hier viele Optionen zur Verfügung. Sie haben beispielsweise Optionen zur Positionierung dieses Elements, zur Drehung, zum Layout, zum Clip-Inhalt, zum Erscheinungsbild, zur Farbe und zu den Stricheffekten. All diese Optionen müssen Sie also verwenden, wenn Sie etwas entwerfen möchten. Und von hier aus haben Sie auch die Möglichkeit, diesen umzubenennen. Okay? Also kannst du das einfach reinlegen und dann kannst du es ausleihen Dieser ist zum Beispiel für die Homepage. Vielleicht können wir Homepage sagen oder wir können Startbildschirm sagen oder was auch immer du willst. Und dann können wir vielleicht dieses sagen Detailbildschirm, Detailbildschirm. Und vielleicht ist dieser so , wie er genannt wurde? Vielleicht ein Bildschirm. Nur ein zufälliger Name, ein echter Name. Ich gebe nur, um dir eine Vorstellung davon zu geben , wie es funktioniert, okay? Und lassen Sie mich diesen entfernen, wir brauchen das alles nicht. Jetzt haben wir diesen Baumbildschirm hier, okay? Und hier können wir mehrere Designs haben. Nehmen wir zum Beispiel an, wir wollen einen Kreis haben. Um also einen Kreis zu haben, haben wir ein Werkzeug namens Ellipse-Werkzeug. Wenn Sie also darauf geklickt haben, haben Sie einen solchen Cursor auf Ihrer Maus, und dann können Sie einfach diesen runden Koch hinzufügen. Das kannst du einfach zeichnen Du kannst damit herumspielen. Du kannst diese Dinge einfach tun. Du kannst diesen haben. Sobald es zum Beispiel hier ist, können Sie es auch so anpassen, wie Sie möchten. Jetzt haben wir also diesen. Standardmäßig hat es also eine Farbe, und in diesem Fall ist die Farbe Grau. Nun, wenn Sie diesen in der rechten Seitenleiste auswählen , nicht nur für diesen Alles, was Sie in Ihrem Frame oder irgendwo hinzufügen Ihrem Frame oder irgendwo oder vielleicht eine Komponente erstellt haben, dann haben Sie alle Designoptionen auf der rechten Seite Sie werden diese Optionen also hier sehen. Sie können hier die Abmessungen und das Aussehen und auch die Farbe sehen . Nehmen wir zum Beispiel an, wir möchten die Farbe ändern. Okay? Also das ist der Artikel, also werde ich darauf klicken und dann erscheint hier ein Farbdisplay, und dann haben Sie Optionen, um die Farbe zu ändern Sehen Sie jetzt, wie sich die Farbe ändert. Auf diese Weise können Sie Farbe hinzufügen. Und nehmen wir an, wir wollen eine Grenze um diese Ecke in den Routen haben , wie um all diese Ecken herum. Also, wie wir das machen können. Um also einen Rahmen hinzuzufügen, haben Sie diese Option namens Estrok Sie klicken auf dieses Plus-Symbol Okay. Und du wirst die Möglichkeit haben, das Estroklor zu wählen Nehmen wir zum Beispiel an, ich möchte das als Estrokelor haben und dann ist es im Moment nicht deutlich sichtbar, weil es wirklich Also, was können wir hier tun? Wir müssen das Gewicht des Schlaganfalls ändern. Nehmen wir an, es ist jetzt fünf. Okay. Jetzt werden Sie sehen, dass wir einen solchen Schlaganfall haben. Oder vielleicht ändern wir die Strichfarbe auf Schwarz oder Rot. Ja, sagen wir, es ist rot, dann siehst du diese Dinge. Okay? Jetzt werden wir die Möglichkeit haben, diese Optionen wirksam zu machen. Zum Beispiel wollen wir einen Schatten haben. Der Effekt ist also etwas , das wir hier haben. Als ob du den Schlagschatten sehen kannst. Es werden dieser Schlagschatten, Hintergrundunschärfe, das Rauschen und andere Optionen angezeigt Nehmen wir an, wir haben diesen Schatten. Jetzt hat er einen Schatten erzeugt. Lass mich diesen Schlag entfernen. Sobald Sie also etwas hinzugefügt haben und dieses entfernen möchten, stehen Ihnen diese Optionen zur Verfügung. Es gibt also ein Entfernen, es gibt ein Minuszeichen, sodass Sie einfach darauf klicken und dann loslegen können. Okay? Jetzt haben wir das und du kannst diesen kleinen Schatten sehen. Und lass uns diesen Schatten hinzufügen. Sie haben die Möglichkeit, den Schatten zu positionieren. Sie können also den Wert ändern, zum Beispiel fünf und dann fünf und dann fünf. Und es hat auch diese Optionen. Sie können auch die Bibliothek verwenden, o und dann haben Sie Optionen, um die Farbe des Schattens festzulegen. Jetzt sieht der Schatten also so aus. Auf diese Weise können Sie diese Optionen anpassen. Ordnung. Nehmen wir jetzt an, wir wollen hier mehr Optionen haben. Vielleicht wollen wir etwas haben. Nehmen wir an, wir möchten einen Text innerhalb dieses Kreises haben. Um also einen Text hinzuzufügen, klicken wir einfach auf dieses T und dann drücken wir darauf. Wenn Sie also darauf drücken, haben wir die Möglichkeit, den Text einen Moment lang zu schreiben. Also ist es so ausgewählt. Wählen wir also zuerst das aus und dann wählen wir es hier aus. Sie werden also diesen Indikator sehen und dann können Sie den Text hier hinzufügen. Nehmen wir zum Beispiel an, wir möchten Apple sagen. Oh, tut mir leid. Nehmen wir an , wir sagen, es ist Apple. Und jetzt, sobald dieser Apfel hier erscheint, können wir ihn in die Mitte ziehen. Aber Sie werden feststellen , dass er sehr klein ist, sodass wir ihn vergrößern können. Also hier, auf der rechten Seite, wieder, wie gesagt, jedes Design, das Sie machen, kommt auf der rechten Seite. Hier sehen Sie also die Optionen 12, Sie können die Größe erhöhen. Sagen wir 24. Okay. Also, wenn ich 24 ausschlage, habe ich hier diese Optionen. Der Apfel befindet sich jetzt also in der Mitte dieses Kreises. Und du hast auch viele Möglichkeiten. Sie können beispielsweise einfach den typografischen Stil ändern. Sie können zum Beispiel diesen Bolt Semi Bolt ändern, und er hat eine Menge Schriftstil Sie können hier also definitiv all diese Optionen wählen. Und es hat einige andere Schriftarten. Sie können diese Schriftarten also definitiv auswählen , wenn Sie sie verwenden möchten. Okay, zum Beispiel das, das, das und vielleicht das. Lassen Sie uns vorerst eine normale, extra fette Schrift verwenden. In Ordnung, jetzt haben wir also diesen Apple und diesen Kreis. Sie haben also gelernt, wie Sie ein Projekt erstellen können und wie Sie mehrere Seiten haben können, und Sie können Rahmen hinzufügen, wie Sie einige Tools verwenden und dieses hinzufügen können Du hast also ein paar grundlegende Ideen, okay. Und auf der Laborseite in der Ebene werden all diese Elemente hinzugefügt, die Sie hinzufügen. Sie sehen also diesen A-Bildschirm, Endbildschirm, Startbildschirm. Auf dem Startbildschirm haben wir zwei Optionen. Einer ist dieser Text und einer ist dieser LLF-Hocker. Das erscheint also in deinem Hintern. Sie können diese Optionen also auch hier gezielt auswählen und dann, wenn Sie möchten, können Sie auch den Namen von hier aus ändern Okay. Also werde ich dieses Video für diese Vorlesung hier beenden und wir werden mit der nächsten Vorlesung weitermachen . 3. Verwendungsmöglichkeiten von Figma-Tools: Willkommen zurück noch einmal. In diesem Teil werden wir wieder weiterarbeiten. In unserem Vorwort haben wir also besprochen, wie wir ein FIMA-Projekt erstellen können, und dieser Grundrahmen Okay, jetzt in diesem Teil werden wir mehr über diese Tools von FICMA besprechen Lassen Sie uns also über dieses rechteckige Tool sprechen. Rechteckwerkzeug ist also etwas , mit dem Sie ein Rechteck wie dieses erzeugen können. Okay. Also kannst du es auf diese Weise haben. Wenn Sie zum Beispiel eine Schaltfläche haben , sieht eine Schaltfläche so aus. Und sobald Sie dies ausgewählt haben, können Sie diese Art von Design mit einem Rechteck erstellen. Und auf der rechten Seite haben Sie viele Optionen. Sie können das Weiß also auch von hier aus anpassen. Ich möchte zum Beispiel Weiß 100 haben und dann 100 hier eingeben, und dann reduziert sich das hier. So können Sie also auch Ihre Tools oder jedes Design über die Layout-Option steuern . Auf diese Weise können Sie es auch ein wenig erhöhen. Und im Feld haben Sie diese Optionen, um der Schaltfläche die Hintergrundfarbe hinzuzufügen. Sie können eine beliebige Farbe wählen. Das ist kein Problem. Das ist also die Farbplatte dafür, und Sie haben diese Optionen. Jetzt haben Sie auch die Möglichkeit, mit dieser Art von Farbverlauf zu spielen, der zum Beispiel einen linearen, radialen Verlauf hat , und solche Dinge können Sie definitiv wählen. Und vielleicht eckig so und der Diamant sieht dann so aus. Also diese Art von Koch kannst du auch daraus hinzufügen. Okay? Also, du klickst darauf, gehst zu diesem Feld und wählst die Farbe von hier aus, und dann hast du hier diese Optionen. Sie können auch die Farbe für dieses Design wählen, und hier gibt es noch einige andere Optionen für Bilder und alles. Wenn du also zum Beispiel dieses Radio auswählen möchtest, dieses Radio auswählen möchtest sieht es so aus und jetzt kannst du auch die Farbe für diesen bestimmten Radialkoch ändern , okay? Auf diese Weise können Sie auch damit spielen, es wird jetzt so aussehen. Es hat viele Optionen, sodass Sie alles auswählen können, was Sie benötigen. Und okay, lass mich zurück zum roten gehen. Okay? Dieses kleine Licht, und es sieht besser aus. Okay, jetzt hast du dieses Rechteck und kannst von hier aus auch einen Rand hinzufügen. Sie können hier auch den Effekt festlegen, zum Beispiel den Schatten, wir können Schlagschatten hinzufügen und dann können wir den Randradius wählen. Ich möchte zum Beispiel einen Grenzradius von allen vier Ecken haben . Hier werden Sie also sehen, dass es eine Option namens Eckenradius gibt. Also hier, wenn ich 20 wähle, dann erhalte ich einen Rand von allen Ecken. Okay. Sie haben aber auch die Möglichkeit, die Ecke zu wählen. Wenn Sie also darauf klicken, nicht hier, sondern hier, wenn Sie darauf klicken, haben Sie diese Option, um den Rand zu kontrollieren. Zum Beispiel möchte ich in der linken Ecke nur zwei haben, und dann sieht die Unterseite so aus. Nehmen wir an, ich möchte auch zwei von der unteren rechten Ecke haben . Sagen wir zwei. Und jetzt wird der Button so aussehen. Auf diese Weise können Sie Ihr Design anpassen. Also klickst du darauf und spielst dann mit diesen Dingen herum. Sie haben also auch diese Optionen, um das Gegenteil davon zu ändern, aber das ist okay, denke ich vorerst Und so haben wir von hier aus gelernt, wie man die meisten dieser Optionen verwendet . Wir haben das Layout. Das ist die Breite und Höhe, und das ist die Position. Wenn ich also dieses Ding ziehe, kannst du an der Position sehen, sich diese Dinge ändern. Das sind also die Positionen, und Sie haben auch die Möglichkeit, von hier aus zu rotieren. Also, wenn ich es so mache, so, und du kannst diese Dinge drehen. Und dann werdet ihr sehen, dass diese Rotation geändert wird, und ihr habt auch die Möglichkeit, mit dieser zu spielen. Ihr lernt also die Verwendung aller Tools kennen. Das kann dir also auch gefallen. Es ist für die Flif-Horizontale und für das Flaif-Partikel Sie können diese Dinge also auch so steuern. Und das sind die Optionen für die Ausrichtung. Wenn Sie also zum Beispiel ausrichten möchten, lassen Sie mich es drehen. Machen wir es auf Null, wie bei einem normalen Wert. Und wenn ich es auf Null setze und dann sieht es so aus, und jetzt nehmen wir an, Sie haben diesen Knopf hier und jetzt möchten Sie ihn richtig ausrichten. Hier haben Sie also die Option Alignment. Also wenn ich das Erste zuerst , möchte ich zum Beispiel nichts für dieses Design entworfen haben. Ich möchte ein Design für dieses haben. Okay, also schiebe ich diesen hier rein und klicke dann auf die Ausrichtung Also klicke ich auf die Ausrichtung. Links, es geht nach links. Ich klicke oben, wie in der Mitte, Horizontal zentriert ausrichten, siehst du, es geht hierher und es geht auf die rechte Seite. Und es geht nach oben, wenn ich das hier platziere. Und es hat den Namen. Sie können sehen, wie Sie die Partikel nach oben ausrichten und dann nach unten ausrichten. Siehst du, es heißt Align Bottom. Okay? Auf diese Weise können Sie auch dieses Ausrichtungswerkzeug verwenden, und dann können Sie sagen, in der Mitte. Okay? Jetzt lernen wir, wie dieses Werkzeug hier verwendet wird, Ausrichtung, Position, Drehung, Layout, Aussehen, Farbe, Kontur und auch diesen Eckenradius. Okay. Also haben wir das UJS des Rechteckwerkzeugs gelernt Lassen Sie uns nun darüber sprechen, dass wir das Ellipse-Tool bereits verwenden. Die Linienwerkzeuge sehen also so aus. Es geht also nur darum, eine Linie zu ziehen. Und sobald Sie eine Linie haben, haben Sie auch die Möglichkeit , sie zu steuern. Das Gewicht ist also hier, sagen wir, ich möchte es auf fünf setzen. Also so wird das Linienwerkzeug funktionieren. Jetzt haben wir dieses Pfeilwerkzeug. Das Pfeilwerkzeug sieht also so aus. Es wird im Grunde einen Pfeil entwerfen. Sobald Sie dieses Tool ausgewählt haben, haben Sie auch die Möglichkeit , dieses zu ändern. Nehmen wir an, das Gewicht ist fünf. Jetzt wird es so aussehen. Und auf die gleiche Weise haben Sie auch all diese Optionen zum Spielen. Jetzt haben wir bereits mit dem Ellie-Tool gearbeitet. Lassen Sie uns nun über das Polygon-Tool sprechen. Das Polygonwerkzeug hat also diese Art von Koch, diese Art von Form Und wenn Sie darauf doppelklicken, werden Ihnen Optionen wie diese vier Ecken angezeigt, und dann können Sie einfach das Aussehen dieser Ecke und dann können Sie einfach ändern, wenn Sie möchten Und dann hast du das. Und jetzt können Sie auf die gleiche Weise auch die Hintergrundfarbe der Tools wie folgt ändern . Jetzt haben wir das und Sie können es auch erhöhen, indem Sie diese Dinge tun. Jetzt werden wir also das Ester-Tool verwenden, also wird es im Grunde genommen einen Ester-Chef erstellen, sonst nichts. Sobald Sie also diesen Ester-Koch erstellt haben, werden Sie Optionen haben, um die Farbe zu ändern. Also, du hast die Optionen. Sie können einfach ändern , um die Farbe zu ändern. Auch die Anzahl, zum Beispiel, wir haben jetzt fünf Ecken, eins, zwei, drei, vier, fünf, also kannst du diese Ecke ändern, sagen wir mal acht, und dann setze ich es so. Dann wurde es zu acht Ecken geändert. Wir haben diese Dinge. Außerdem kannst du die Höhe des angezeigten Timon, die Rotation und die Ausrichtung ändern und alles in der Art. Wir haben also die meisten Tools von hier gelernt, und dann haben wir ein Textwerkzeug Dieses Textwerkzeug wird hauptsächlich zum Hinzufügen eines Textes verwendet. Sie möchten also einen Text hinzufügen, Sie wählen ihn aus, dann klicken Sie darauf und dann können Sie einfach einen beliebigen Text schreiben, einen neuen Text. Oder irgendein Text, den du hinzufügen möchtest. Sobald Sie einen Text hinzugefügt haben, können Sie ihn einfach per Drag & Drop an eine beliebige Stelle ziehen und positionieren. Und hier haben wir ein Stiftwerkzeug und ein Bleistiftwerkzeug. Ein Stiftwerkzeug ist also etwas , mit dem Sie so zeichnen können. Vielleicht befinden Sie sich also in einer Situation, in der Sie einen benutzerdefinierten Bereich oder Kreis benötigen, um so zu zeichnen, um eine Form, um eine Form wie diese , wie diese, so zu zeichnen. Sie können also einfach auf das Stiftwerkzeug klicken und dann Ihr Design nach Ihren Wünschen zeichnen und es dann am Ende fertigstellen. Jetzt hast du dieses F und machst es zu Ende. Jetzt hast du diesen Kreis. Und jetzt, sobald Sie diese Dinge haben, können Sie einfach das gesamte Design hinzufügen. Sie haben auch diese Option. Okay, lassen Sie uns diese Dinge tun, und jetzt können Sie einfach die Strichfarbe ändern. Diese Linien werden also als Strich bezeichnet. Okay? Also kannst du die Farbe einfach so ändern. Dies ist die Strichfarbe, und wir können auch das Gewicht des Strichs ändern. Also ist es eins, und wenn ich es dann fünf gebe, dann wird es so aussehen. Also der Schlaganfall sieht so aus. Okay? Und jetzt haben Sie auch die Möglichkeit, die Füllung hinzuzufügen. Sie können diesen Artikel also einfach ausfüllen. Auf diese Weise können Sie ein individuelles Design haben. Sie können diesen Gegenstand mit diesem Stiftwerkzeug füllen, und dies ist das Bleistiftwerkzeug Sie können es also einfach wie einen normalen Bleistift zeichnen. Sonst nichts. Sobald du damit etwas zeichnest, dann hast du auch Optionen. Du kannst einfach deine Strichfarbe und die Nassfarbe ändern und dann diese Dinge. Zum Beispiel: Okay, tut mir leid, lass uns das auswählen und dann hast du diesen Stift. Sie können also die Stiftfarbe so wählen, dass sie so aussieht, nur ein normaler Stift, den wir in anderer Software haben. Das ist vorerst alles für all diese grundlegenden Tools. Ich hoffe, ihr habt allgemeine Ideen, wie wir diese Tools verwenden können und wie wir das können. Sobald Sie also diese Werkzeuge weglegen, Ihre Maus immer diese Optionen. Im Allgemeinen können Sie dann auf diesen klicken. Dann haben Sie diese regulären Optionen, normale Maustastatur, wie das Maussymbol. Ich hoffe also, ihr habt alle Tools gelernt, und im nächsten Teil werden wir anfangen, mehr Techniken zu lernen. Also werde ich diese Vorlesung gleich hier beenden . Wir sehen uns in der nächsten Vorlesung. 4. Gruppieren von Elementen in Figma: Willkommen zu dieser Vorlesung . In diesem Teil werden wir anfangen, einige andere Techniken und Werkzeuge zu erlernen. Zum Beispiel haben wir also alle Tools gelernt. Jetzt müssen wir also einige Abkürzungen und die grundlegenden Tipps oder die grundlegenden Techniken lernen einige Abkürzungen und die grundlegenden Tipps oder die grundlegenden , um eine komplexe mobile App, UIUX oder WebApp UIUX, zu entwerfen UIUX oder WebApp UIUX Eine regelmäßige Sache, die wir lernen müssen, ist das Gruppieren. Okay, was ist also eine Gruppierung? Wenn wir also mehrere Elemente verwenden, z. B. mehrere Tools, und wir möchten sie gruppieren, um diese Dinge zu wiederholen Zum Beispiel haben wir diesen Apfel hier und einen Text hier. Nun, das ist im Moment keine Gruppe. Wenn ich also diese Dinge duplizieren möchte, zum Beispiel dasselbe, das ich hier zweimal schreiben muss, vielleicht dreimal, viermal, dann kann ich das nicht tun. Wenn ich diesen entferne, zum Beispiel ops. Also, wenn ich diesen entfernen möchte, dann wirst du sehen, dass der Text nicht hier ist und der Text ist genau hier, okay? Und das ist der Kreis. Also müssen wir diesen Text und den runden Kreis mit der Ellipse gruppieren . Also, wie wir es machen können Lassen Sie mich es also an die vorherige Position bringen. Jetzt haben wir also diese Position. Also ich möchte diese beiden Dinge gruppieren, damit ich sie wiederverwenden oder sie überall zusammen platzieren kann. Um diese Dinge zu tun, muss ich diese beiden Optionen auswählen. Es können mehrere Elemente sein, nicht nur zwei. Im Moment haben wir also nur diese beiden Optionen wie diesen Text und diese Ellipse Wir können also einfach die Strg-Taste drücken und dann diesen und auch den Text auswählen Okay, oder du kannst es auch von hier aus auswählen. Sie können beispielsweise die Strg-Taste drücken dann den Text und die Ellipse auswählen, und dann werden diese beiden ausgewählt Jetzt können Sie mit der rechten Maustaste klicken. Wenn Sie also mit der rechten Maustaste klicken, werden Sie viele Optionen sehen. Hier erfahren Sie es also, was als Gruppenauswahl bezeichnet wird. Hier können Sie also auch die Tastenkombination sehen. Sie können also einfach Strg plus G auf Ihrer Tastatur drücken , um diese Dinge zu gruppieren, oder Sie können auch diese beiden Optionen oder was auch immer Sie in einer Gruppe haben möchten, auswählen diese beiden Optionen oder was auch immer Sie in einer Gruppe haben möchten, dann auf diese Gruppenauswahl drücken. Okay? Jetzt werden diese Dinge zu einer Gruppe. Also hier kannst du die Gruppe sehen und wenn ich jetzt darauf klicke, sind diese beiden Dinge in der Gruppe und standardmäßig gibt es einen Gruppennamen. Also, wenn du willst, kannst du auch den Gruppennamen ändern. Sie werden also diese Optionen mit dem Namen Namen haben. Anstatt Gruppe eins müssen Sie also immer einen aussagekräftigen Namen schreiben. Wenn Sie beispielsweise an einem echten Projekt arbeiten, werden Sie ein anderes Szenario haben. Sie müssen verschiedene Elemente gruppieren. Sie werden also natürlich einen aussagekräftigen Namen angeben, damit Sie ihn später immer identifizieren und je nach Kundenanforderung oder Projektanforderungen bearbeiten oder aktualisieren können . Wenn Sie also zufällig Gruppe eins der Gruppe drei zuordnen, die verschiedenen Gruppen, dann wissen Sie tatsächlich was sich in Gruppe eins befindet oder was Gruppe zwei ist. Also müssen wir ihm ein aussagekräftiges M geben . Zum Beispiel können wir es sagen, ähm, wir können Kreis sagen oder vielleicht können wir Fruchtliste, Obst, Artikel sagen. Alles, was von Bedeutung ist, denn wir haben Apfel als Frucht und wir können von Obst sagen. Ganz einfach. Jetzt haben wir jetzt, wenn ich diese Dinge gruppiere, dann kannst du hier feststellen , wann immer ich auf diese Dinge klicke, es wählt das Ganze aus. Also kann ich es einfach hierher ziehen, ich kann es hierher ziehen, ich kann es überall hinziehen Das ist also der Vorteil der Gruppierung. Es gruppiert also all diese beiden Dinge zusammen. Okay. Jetzt kann ich auch sagen, ich möchte zwei, drei oder vier Dinge hier haben, wie ich diese Dinge machen kann. Also kann ich diesen einfach als Gruppe auswählen. Jetzt kann ich Strg D drücken, um diesen zu duplizieren. Also habe ich Strg D auf meiner Tastatur gedrückt und dann wurden zwei Objekte dupliziert Sie sehen also, es sind duplizierte Elemente. Und wenn ich jetzt erneut Strg D drücke, werden hier weitere Optionen wie diese hinzugefügt . Ich kann es duplizieren. Und das kannst du auch besonders sehen. Wenn ich jetzt noch einmal Strg D drücke, werden weitere Optionen und weitere Elemente wie dieses dupliziert . Auf diese Weise können Sie Elemente duplizieren. Das Gleiche, was Sie duplizieren können. Lassen Sie mich das jetzt neu arrangieren. Lass mich diese Dinge entfernen. Ich denke, es ist besser. Wir brauchen es nicht mehr. Also werde ich diese Dinge entfernen und dann werde ich sie hier platzieren. Jetzt können wir das so duplizieren. Wenn Sie also Strg D drücken und erneut Strg D drücken, wird es einfach so aussehen. Okay? So und du kannst es neu anordnen, wie du willst. Okay? Das ist der Vorteil der Gruppierung. Das kannst du haben Und jetzt willst du, wenn du für jedes Gruppenelement eine andere Farbe haben willst für jedes Gruppenelement eine andere Farbe , dann kannst du das auf jeden Fall tun. Und hier werden Sie sehen, dass wir dasselbe mehrfach dupliziert haben und dass Sie darin sehen werden, dass diese Gruppe mehrfach dupliziert wurde In jeder Gruppe haben wir diese Optionen. Jetzt können wir auch eine Sache tun. Wir können auch die Farbe dieses Modells ändern. So möchten wir zum Beispiel eine andere Farbe für diese Gruppe haben. Sie können also auf jeden Fall die Farbe dieser Gruppe ändern, sodass wir diese Gruppe auch haben können. die gleiche Weise können Sie auch die Textfarbe oder den Textstil ändern , sodass Sie ihn einfach von hier aus ändern können. Auf diese Weise gruppieren Sie diese doppelten Dinge und haben immer noch all diese Optionen sie zu duplizieren oder irgendein Design zu erstellen. Das ist also der Vorteil der Gruppierung von Elementen, okay? Ordnung, wir haben also gelernt, wie wir Dinge gruppieren können, wie wir Elemente duplizieren können und wie wir auch diesen Namen und all diese Elemente ändern können Okay? Nun wollen wir darüber sprechen, ähm, wie wir eine Komponente erstellen und diese verwenden können Zum Beispiel sind wir jetzt in Phase eins. Vielleicht werden wir in Phase drei einen anderen Bildschirm haben. Lassen Sie uns also in Phase drei einen weiteren Frame erstellen. Zum Beispiel dieser Frame, wir können Iphone 16 sagen, und das ist der Frame. Nehmen wir an, wir haben und wir können ihm einen Produktnamen oder so etwas geben. Okay? Also auf Seite drei, und wir können ihm auch einen Namen geben. Also lass uns das umbenennen statt pase. Wir können vorerst zum Beispiel Produkt-Pase sagen , und das heißt, wir können es Min Home-Pase nennen Hauptplatz oder was auch immer. Vorerst geben wir diesem zufälligen Namen. Aber wenn wir an einem echten Projekt arbeiten, werden wir Optionen wie Farbe, Typografie, Low Flity, High Flity und dann Systemdesign und den Namen Eternal Okay, wir haben gelernt, wie wir diese Dinge duplizieren können, diese Artikel und alles, wie wir mehrere Produkte haben können Jetzt möchte ich etwas haben. Ich möchte dir eine Sache beibringen, zum Beispiel dieses Design oder vielleicht eine Schaltfläche, die wir auf mehreren Seiten in mehreren Frames verwenden müssen , wie wir das machen können. Offensichtlich macht es keinen Sinn, immer wieder dasselbe zu entwerfen. Aus diesem Grund haben wir Optionen namens Komponente vorbereiten, haben wir Optionen namens die hier erscheinen, und dann haben wir Optionen oder Sie können sagen, es ist eine Art Bibliothekssache, und dann können wir sie überall in unserem Projekt oder auf unseren Seiten verwenden . Also werden wir es in der nächsten Vorlesung besprechen. Ich werde hier damit aufhören und euch in der nächsten Vorlesung sehen. 5. Lernen Sie, wiederverwendbare Komponenten in Figma zu erstellen: Oh, willkommen wieder einmal. In diesem Teil werden wir lernen, wie wir ein Bauteil vorbereiten können. Was ist also eine Komponente? Eine Komponente ist eine Art Bibliothek , sodass wir sie auf mehreren Seiten wiederverwenden können. Wir haben zum Beispiel diese Produktseite, und wenn wir jetzt dieselbe Schaltfläche haben möchten, haben wir keine Möglichkeit, von dieser Seite aus auf das Design zuzugreifen . Okay? Aus diesem Grund müssen wir lernen, wie wir eine Komponente für alles erstellen können. Zum Beispiel kann es eine Schaltfläche sein, es kann eine untere Leiste, eine Navigationsleiste oder etwas anderes sein , das auf mehreren Seiten oder mehreren um, mehreren Frames wiederverwendet wird. Also hier im Asset wird unsere Komponente erscheinen. Im Moment haben wir also keine Komponente. Dies ist nur eine eingebaute Komponente, die in Bibliotheken eingebaut ist und von Figma stammt Also werde ich jetzt zuerst hierher kommen und diese Button-Komponente erstellen Also werde ich zuerst einen Text für diese Schaltfläche hinzufügen. Also werde ich diesen Text hier eingeben. Ich kann also sagen, dass es ein Absenden ist. Okay, das ist also eine Schaltfläche zum Absenden. Ich kann es hier in der Mitte platzieren. Jetzt ist es keine Gruppe, sodass Sie den Text sehen können und das Rechteck ist separat. Bevor wir also eine Komponente erstellen oder vorbereiten, müssen wir sie zunächst zu einer Gruppe machen. Und dann mache ich daraus eine Gruppe. Wir können Gruppenauswahl sagen. Und hier werde ich diesen umbenennen. Ich kann also einfach sagen, dass es sich um eine Schaltfläche zum Absenden handelt. Jetzt kann ich als Gruppe einfach an eine beliebige Stelle ziehen, und es bleibt gleich. Und ich werde diese Dinge duplizieren. Lassen Sie uns also eine weitere Zurück-Schaltfläche erstellen. Also werde ich sagen, das ist eine B-Taste. Das ist also ein Zurück-Knopf, und ich werde ihn in die Mitte stellen. Und lassen Sie uns auch den Gruppennamen ändern, weil das nicht die Schaltfläche Absenden ist, also muss ich aussagekräftige Namen eingeben. Anstatt der Schaltfläche „Senden“ wird es unsere Schaltfläche „Zurück“ sein. Es wird also unser Zurück-Button sein. Jetzt möchte ich eine andere Hintergrundfarbe für die Zurück-Schaltfläche haben , wählen Sie die B-Taste, und dann können Sie hier in den Farbbereich kommen und hier können Sie diese Farbe ändern. Also werde ich vielleicht diese Farbe wählen. Es sieht nett aus. Also diese Farbe , nur um ein anderes Aussehen zu haben. Also, das ist jetzt eine Gruppe und das ist eine Gruppenschaltfläche, aber im Moment ist es keine Komponente. Um es also zu einer Komponente zu machen , muss ich zuerst darauf klicken, und dann werde ich hier eine Option namens Komponente erstellen sehen. Also werde ich auf diese Komponente erstellen klicken. Und dann wird es zu einer Komponente, und dann sehen Sie, dass es ein anderes Symbol hat und es heißt, es ist eine Komponente. Wenn ich nun zu diesem Asset-Verzeichnis komme, dann werden Sie hier sehen , dass in dieser Datei eine Komponente erstellt wurde Ich klicke darauf, dann wird diese Option hier angezeigt. Lassen Sie uns diese Schaltfläche nun auch zu einer ähnlichen Komponente machen. Also werde ich eine Komponente erstellen und sie erscheint hier. Diese beiden Schaltflächen werden hier also eine Komponente sein. S, und das Symbol wird ebenfalls geändert. Aus dieser Asset-Datei kann ich diese jetzt wiederverwenden. Zum Beispiel diese Zurück-Schaltfläche, ich in diesen Bereich einfügen möchte, und diese Zurück-Schaltfläche, die ich in diesen Bereich einfügen möchte. Wir können es also so oft verwenden, wie wir wollen. Wenn ich nun zu dieser Produktbasis und der Produktbasis komme , haben wir nichts. Wir haben hier kein Design, aber wir haben jetzt eine Komponente. Und wir können diese Komponente einfach hier verwenden. Jetzt haben wir diese Option. Also werde ich hier diesen Absenden-Button hinzufügen. Ordnung. Auf diese Weise können Sie Ihre Komponente wiederverwenden. Und Sie können sehen, dass dies eine Komponente in diesem Raum ist und sie hier erscheint und all diese Dinge. Und natürlich habt ihr die Möglichkeit, diese Dinge zu ändern. Und es ist nicht nur für Buttons, es kann für alles sein. Zum Beispiel möchte ich aus diesem einen Bestandteil machen. Es ist also schon eine Gruppe, siehst du? Wir können es verschieben, und dann werde ich darauf klicken und dann auf die gleiche Weise eine Komponente erstellen. Jetzt komme ich zu dieser Dateiseite. Wenn ich also diese Produktseite hier öffne und auf das Asset klicke, sollten wir jetzt drei Komponenten sehen, und eine davon ist diese, und ich kann sie einfach hierher ziehen. Und genauso kann ich es duplizieren, um mehrere Optionen zu haben. Also, um es mehrmals zu platzieren und ich möchte mehr davon und dann mehr davon haben. Eher so. Und hier so. Auf diese Weise können Sie Ihre Komponente wiederverwenden und haben auch die Möglichkeit, und haben auch die Farbe oder das Design zu ändern, wenn Sie möchten. Zum Beispiel möchte ich dafür eine andere Farbe haben. Sagen wir diesen. Und auch für diesen möchte ich eine etwas andere Farbe haben, vielleicht diese Farbe. So wie das hier. Auf diese Weise können Sie Ihre Komponente wiederverwenden und auch das Design anpassen. Sie haben also gelernt, wie Sie eine Komponente für jedes Design vorbereiten und diesen Artikel wiederverwenden können. Im nächsten Pfad werde ich Ihnen zeigen, wie wir das horizontale Scrollen durchführen können , das Sie beim Entwerfen von Anwendungen häufig benötigen Sie beim Entwerfen von Anwendungen häufig benötigen Also werde ich dieses Video hier beenden und wir werden in der nächsten Vorlesung mit der Arbeit beginnen Wir sehen uns in der nächsten Vorlesung. 6. Figma Grundlegendes Prototyping: Willkommen wieder einmal. In diesem Teil werden wir mit der Arbeit an unserem Prototyping beginnen. Ich wollte Vorlesungen über horizontales Scrollen hinzufügen, aber diese horizontale Scroll-Ansicht hat mit einigen anderen Dingen zu tun , wie beispielsweise der speziellen horizontalen Scroll-Ansicht und der Frage, wie wir all diese Dinge zusammenfügen können Deshalb habe ich beschlossen, dies dem eigentlichen Projekt hinzuzufügen , anstatt es separat hinzuzufügen , weil es nur möglich das reale Szenario zu verstehen Stattdessen werde ich Ihnen in dieser Vorlesung den grundlegenden Teil der Prototypenentwicklung zeigen den grundlegenden Teil der Prototypenentwicklung , der wirklich wichtig ist, aber wir lernen fortgeschrittenes Prototyping in unserem realen Projekt , das wir in diesem Vortrag machen werden In dieser Vorlesung werde ich Ihnen also nur einen allgemeinen Überblick geben, damit Sie eine Vorstellung davon bekommen, wie diese Dinge funktionieren Und dann lernen wir die fortgeschrittenen und realen Einsatzmöglichkeiten von Prototypen in unserer realen Anwendung kennen, die Sie entwerfen werden. In dem Projekt, das Sie entwerfen werden, stehen Ihnen viele Optionen zur Verfügung, wie z. B. die Änderung der Schuhgröße und das Verschieben einem Teil zum anderen mit Animation und mehreren Optionen. Aber bevor wir die fortgeschrittenen Dinge tun, müssen wir die Grundlagen des Prototypings erlernen Fangen wir also mit den Grundlagen an. Wir haben jetzt also drei Bildschirme. Und innerhalb der drei Bildschirme möchte ich nur einen Prototyp erstellen Okay. Bevor wir das tun, möchte ich hier nur einen einfachen Text hinzufügen, damit er besser organisiert ist oder wir verstehen können, in wessen Raum wir uns befinden. Also füge ich hier zuerst ein Rechteck hinzu, ein einfaches Rechteck, und dann füge ich hier einen Randschatten hinzu, und dann füge ich hier einen Text hinzu. Also werde ich sagen, es ist ein Detailbildschirm. Hier ist der Detailbildschirm oder wir können Detailraum sagen. Und das Gleiche, was wir brauchen. Also lass mich das Design ändern, zum Beispiel die Hintergrundfarbe. Vielleicht diese Hintergrundfarbe. Und für den Text werde ich jetzt die Farbe ändern. Statt Schwarz wird die Farbe Weiß sein, und ich kann es einfach etwas größer machen, nicht hier. Also die Schriftgröße werde ich auf vielleicht 32 ändern . Ich habe es so gemacht. Also lass es uns auf 32 ändern. Oh, tut mir leid, ich werde das Weiß, das ich mir ausgesucht habe, entfernen . Und lass uns 36 draus machen. Also Detailraum. Und ich werde daraus eine Gruppe machen, damit ich sie für diese duplizieren kann. Also sage ich dieses Rechteck und dann diesen Detailbereich und drücke dann G. Und ich kann den Namen hier einfach ändern. Ich kann sagen, es ist ein Passtitel, nur ein Beispiel. Und ich werde das auch hier duplizieren. Anstelle von Detailraum kann ich sagen, dass es hier um Pase geht Also mache ich einen Doppelklick und hier ändern wir es auf etwa Perfect ups Okay, wir haben also diese beiden Dinge. Also können wir vielleicht auch die Hintergrundfarbe etwas anders ändern. Okay. Jetzt werde ich Ihnen beibringen, wie wir einige grundlegende Prototypen zwischen diesem Bildschirm hinzufügen können, und lassen Sie mich diese Schaltfläche entfernen Okay, wir können es hier draußen lassen. Okay? Falls Sie es nicht wissen, können Sie Ihr Icon oder Design vielleicht auch außerhalb des Rahmens platzieren und Sie können sehen, dass es wie dieses und all dieses Symbol angezeigt weil wir es für die Komponente vorbereitet haben, und deshalb haben wir dieses Symbol. Okay? Wie dem auch sei, um nun Prototypen zwischen diesen Seiten hinzuzufügen, haben wir diese Prototyp-Optionen hier. Sie kommen also zu diesen Optionen, die als Prototyp bezeichnet werden, und hier werden wir all diese Optionen finden Also wollen wir zum Beispiel von diesem Raum zu diesem Raum einen Prototyp haben. Lassen Sie mich hier etwas Freiraum haben. Wenn Sie also auf die Schaltfläche „Senden“ klicken und einen Prototyp hinzufügen möchten, müssen Sie sich zunächst in den Prototyp-Optionen befinden. Okay, dann wie wir den Prototyp machen wollen . Du musst darüber nachdenken. Also möchte ich einen Prototyp haben. Wenn der Benutzer auf die Schaltfläche klickt, wollen wir zu diesem Bereich gehen, okay? Also, wenn Sie sich in dieser Prototyp-Phase befinden, dann werden Ihnen diese Optionen angezeigt, sehen Sie? Wenn Sie also mit der Maus über diese Schaltfläche fahren, sehen Sie diese Optionen, diese Plus-Schaltfläche und diese Optionen, von vier Ecken von vier Seiten angezeigt werden Aber wenn Sie sich in der Entwurfsphase befinden, dann an Land. Was Sie also gelernt haben, Sie gelernt, als wir uns in der Prototypenphase befinden, wir haben diese Optionen Jetzt kann ich es einfach anklicken und dann kann ich es einfach mit diesem Bereich verbinden Also ist es jetzt mit diesem Raum verbunden. Das heißt also, wenn wir auf diese Schaltfläche klicken, werden wir zu diesem Bereich navigieren, und wie wollen wir nun zu diesem Bereich navigieren? Sie haben also viele Optionen. Es ruft Interaktion auf, ein Popup wird geöffnet, und hier haben Sie die Möglichkeit, diese Optionen anzupassen. Zum Beispiel beim Trigger. Beim Auslösen stehen ihnen viele Optionen zur Verfügung, wenn wir darauf klicken oder auf Drogen oder wenn wir mit der Maus darüber schweben oder auf Drogen oder wenn wir mit der Aber vorerst sollten wir es im Griff behalten. Navigiere jetzt zu zweit. Es zeigt, dass Navigiere zwei oder B oder Ketten oder scrolle zu vielen Optionen, die sie haben, aber wir wollen zu ihnen navigieren. Das bedeutet, dass wir von dieser Seite zu dieser Seite wechseln möchten . Und hier steht das Ziel. Sie können also sehen, dass alle Seiten, die wir haben, der gesamte Rahmen, den wir haben , hier angezeigt werden. Wir können sagen, dass wir diesen Detailbildschirm haben. Wir haben auch diesen obigen Bildschirm. Okay, wir haben auch Optionen, um diese Taste zu verbinden. Dafür wollen wir in den Detailbereich wechseln, und er wird erkannt, weil wir ihn von hier nach hier ziehen. Jetzt Animationen, es bietet viele Animationsoptionen. Sie haben also diese Optionen. Also zum Beispiel rein, herausziehen, drücken, rutschen, herausrutschen. Nehmen wir an, ich wähle das Sliding aus, und sobald es gleitet, dann hast du Möglichkeit, zu sehen, wie es aussieht. Schieben bedeutet also, dass es so aussehen wird. Und dann haben wir diese Optionen , um die Dauer zu ändern. Sie können mit der Dauer spielen. Sie können die Dauer erhöhen. Und dann gibt es einfach rein, einfach raus, einfach rein und raus und viele Optionen. Also so, es wird so funktionieren , wenn du dich so entscheidest. Und es gibt dir eine Vorschau. Aber wenn du dich für Genta entscheidest, dann wird es so funktionieren, so Also kannst du einfach damit spielen. Also was die Grenzen angeht, würde es so aussehen. Also können wir einfach damit herumspielen und EZ rein, ich werde so wählen Okay? Jetzt werde ich diesen Prototyp ausführen. Also, wie können wir den Prototyp ausführen? Also schleifen wir den ganzen Rahmen und dann kommen wir hierher und dann klicken wir auf die Vorschau Wenn Sie also auf die Vorschau klicken, wird angezeigt, dass wir uns in diesem Tempo befinden Nun, wenn wir zum Beispiel zu diesem Objekt springen, wird es nicht angezeigt, es wird nicht das Handsymbol angezeigt , das quasi ein anklickbares Symbol ist wird es jedoch nicht für die Maus angezeigt , da wir für all diese Artikel kein Prototyping hinzugefügt haben Aber wir haben Prototyping für diese Taste hinzugefügt. Und für diesen Knopf steht das, wie dieses Handsymbol, das Sie sehen können Wenn ich also darauf klicke, wechseln wir zu diesem Detailbereich. Aber wenn ich jetzt auf die Zurück-Schaltfläche klicke, tut es nichts, okay? Es macht also nichts, weil wir keine Animation und kein Prototyping hinzugefügt haben Jetzt möchte ich wechseln. Ich möchte vom Detailbereich zum Startbereich wechseln , wenn ich auf die B-Taste klicke Also, wie ich diese Dinge machen kann, ich kann einfach auf die Zurück-Schaltfläche klicken, und dann kommt es hierher, und dann kann ich einfach zu diesem Startbildschirm springen. Und dann kommt wieder dieses Pop-up. Und in diesem Fall werde ich sagen, dass es einfach ist, so draußen zu sein. Und du kannst definitiv alles wählen. Die Animation ist Slide In. Animation ist Slide-Out. Ich kann wählen oder vielleicht vielleicht drücken oder vielleicht. Okay, lassen wir es so. Jetzt werde ich diese Vorschau ausführen auf die Schaltfläche „Senden“ klicken. Es kommt zum Ditaspace und klicke auf die Rückseite und es geht wieder zur Homepage Das. Siehst du? Also auf diese Weise kannst du so spielen. Nehmen wir an, wir wollen hier eine weitere Schaltfläche hinzufügen und kommen zum Design hier, und dann werde ich das duplizieren. Ich kann das duplizieren und werde es hier hinzufügen. Und anstatt einzureichen, werde ich sagen, es ist für, sagen wir, es ist für ungefähr. Okay? Also, wenn du auf diese A-Schaltfläche klickst, wollen wir zu diesem Info-Bildschirm wechseln. Okay? Jetzt kommen wir zum Prototyp, klicken auf diese Schaltfläche und okay, es zeigt also, dass er schon da ist, weil wir dieselbe Schaltfläche dupliziert Also werde ich zuerst diesen entfernen. Okay? Also jetzt hat es nichts damit zu tun. Aber dieser ist mit dem Detailbildschirm verbunden, aber dieser Button ist nicht mit dem Digail-Bildschirm verbunden Also was ich tun kann, ich kann einfach diesen auswählen und ich kann einfach zu diesem Info-Bildschirm kommen Jetzt ist es mit diesem Info-Bildschirm verbunden, und Sie können diese Animations-Dinge einfach machen. Und wenn wir auf der Rückseite sind, wenn Sie auf die Zurück-Schaltfläche klicken, für diesen Info-Bildschirm möchten wir für diesen Info-Bildschirm zum Startbildschirm wechseln. Ja. Und dann wird es hier angezeigt, wir gehen zum Startbildschirm und ich bin auch, wir können sagen, auflösen, nur als Beispiel. Auf diese Weise können Sie die Animation also immer steuern. Und ich klicke auf diesen. Also werde ich jetzt auf den Summit-Button klicken. Wir sind im Ditalbereich und jetzt werden alle verbundenen Daten angezeigt Und dann klicken Sie auf die Schaltfläche B, klicken Sie auf die Schaltfläche Zurück. Es zeigt die Schaltfläche Senden und die Schaltfläche Summit. Wir sind in Ditilspace, klicken Sie auf die B-Schaltfläche. Wir sind auf der Homepage. Und wenn ich jetzt auf die Schaltfläche Ace About klicke, sind wir im At Paseo Und wenn ich jetzt auf die Schaltfläche Zurück klicke, sind wir auf der Startseite Sie sehen also, es hat eine andere Animation, aber es hat eine andere Animation, aber es hat eine andere Animation. So können Sie also Prototypen hinzufügen, und Sie können auch Animationen und alles andere hinzufügen Wenn Sie also beim Hinzufügen von Prototypen zwischen Ihrem gesamten Bildschirm ein Update oder so benötigen , wird es immer so angezeigt Also dieser ist mit diesem verbunden, dieser ist mit diesem verbunden, dieser ist mit diesem verbunden, und auch dieser Knopf ist mit diesem verbunden Nehmen wir an, Sie haben einen Prototyp hinzugefügt und möchten jetzt später einige Änderungen vornehmen, vielleicht für Animationen oder so. Sie können also einfach auf diese Zeile klicken. Sie können diese Linie sehen. Dann erscheint dieses Feld wieder hier, und dann können Sie einfach zu einem anderen wechseln. Zum Beispiel rutscht es jetzt. Okay? Also, wenn ich diesen starte, dann klicke ich auf den Körper, jetzt verschiebt er sich anders. Hier entlang. Auf diese Weise wird es sich immer so zeigen. Ich hoffe also, dass ihr kleine Ideen zu diesem Prototyping habt, wie ihr Verbindungen herstellen könnt, wie ihr Animationen verwenden könnt, wie ihr verschiedene Arten von Animationen wählen könnt und welche Bedeutungen diese Dinge haben und wie sie funktionieren Aber das ist nur, um dir eine allgemeine Vorstellung zu geben, wie du dich einfach kennenlernen kannst , dass all diese Dinge hier im Prototyp-Bereich verfügbar sind und du kannst einfach eine Verbindung herstellen und damit die Grundkonfiguration vornehmen Aber wir werden Details und Erklärungen für den gesamten Prototyp-Bereich haben . Mit einer realen Anwendung werden Sie eine Menge Dinge anhand von Beispielen aus der realen Welt lernen , die Ihnen definitiv helfen werden, das gesamte Szenario zu verstehen. Außerdem wirst du verschiedene Dinge wie Auslöser, Aktionen, Animationen und mehr üben verschiedene Dinge wie Auslöser, Aktionen, . Also werde ich dieses Video hier beenden und wir sehen uns in der nächsten Vorlesung. 7. Schuhgeschäft E-Commerce-App Figma-Projekt einrichten: Hallo zusammen. Ich hoffe es geht euch allen gut. In dieser Videoserie werden wir eine Schuhshop-Anwendung von Grund auf neu entwerfen. Und die Software, mit der wir unsere App entwerfen werden, heißt Figma Und in Figma werden wir sehen, wie wir eine App von Grund auf neu entwerfen können Um in Figma zu arbeiten, müssen wir also zunächst eine neue Designdatei erstellen, oder Nachdem wir also zu Figma gekommen sind, werden wir diese Art von Schnittstelle sehen Und zuerst müssen wir eine neue Designdatei erstellen. Also klickst du hier und dieses Fenster öffnet sich, oder? Und das ist unsere Zeichenfläche. Wir werden hier arbeiten. Also kann ich diesen Titel wie Shoe Shop App oder Shoe Shop Mobile App umbenennen Shoe Shop App oder , oder? Okay. Also das ist unser Projekttitel. Um also eine Schuhshop-Anwendung zu entwerfen, müssen wir unser Projekt organisieren, oder? Also zuerst, in der linken Ecke, können wir hier einige Seiten sehen. Also müssen wir einige Seiten selbst erstellen. Also die erste Seite, ich gebe den Namen. Es wird Style Guide sein. Und als Nächstes können wir dem Low-Fidelity-Frame den Namen geben . Als Nächstes können wir High-Fidelity-Wireframe geben. Und das letzte wird unser Designsystem sein, oder? Also ja, wir werden auf diesen vier Seiten oder vier Tabs arbeiten und manuell unseren Styleguide, Low-Fidelity Wareframe, dann High Fidelity Wareframe und ein Designsystem für dieses Projekt erstellen Low-Fidelity Wareframe, dann High Fidelity Wareframe und ein Designsystem Also habe ich das App-Design bereits erstellt. Lassen Sie mich Ihnen zeigen, dass unsere endgültige App so aussehen wird, ungefähr so. Ja. Und wir werden diese ganzen Apps von Grund auf neu erstellen oder entwerfen. Also dieses Video, ich werde hier rein. In diesem Video habe ich Ihnen gerade gezeigt, wie wir ein Projekt in Figma erstellen können und was wir eigentlich erstellen müssen, und was wir um unser Projekt zu starten Sehen Sie sich das im nächsten Video an. Bis dahin, pass auf dich auf. Tschüss. 8. Erstellen eines Farbstilleitfadens: Hallo, alle zusammen. Willkommen zurück. In diesem Vortrag werden wir sehen, wie wir unseren Styleguide für dieses Projekt erstellen können. Um einen Styleguide zu erstellen, müssen wir also berücksichtigen, dass ein Styleguide grundsätzlich aus zwei Arten von Elementen besteht, nämlich einem Farb-Styleguide und einem typografischen Styleguide In dieser Vorlesung werden wir also sehen, wie wir einen Farb-Styleguide erstellen können Um also einen Farb-Styleguide zu erstellen, nehmen wir zunächst einen Rahmen wie diesen und können ihn vielleicht wie Clortyle Okay umbenennen, also müssen wir in einem Farb-Styleguide einige Arten von Farben haben Wir müssen uns für einige Arten von Farben entscheiden. Wir werden in diesem Projekt verwenden. Nehmen wir an, wir brauchen eine Primärfarbe, wir brauchen einige Sekundär-, Tertiär- und einige Graufarben Also werde ich diese Namen zuerst schnell schreiben. Diese Arten von Farben werden wir verwenden. Also okay, ich habe bereits alle Arten von Farben aufgeschrieben , die ich in diesem Projekt verwenden möchte. Jetzt müssen wir also einige Farben entsprechend den von uns festgelegten Farben kreieren . Wie können wir also diese Farben kreieren? Dafür werden wir also ein Plug-In verwenden, und um diese Plugins zu verwenden, müssen wir zum Plug-In-Bereich gehen. Wenn wir also in der oberen linken Ecke dieses Symbol sehen, klicken wir hier und wir können sehen, dass es Plugin-Optionen gibt und wir werden nach Rückenwind suchen CSS-Farbgenerator, richtig? Also werden wir dieses Plug-In sehen und wir werden hier doppelklicken. Und hier müssen wir unseren Farbcode einfügen, den wir verwenden möchten. Also habe ich mich für dieses Projekt entschieden, diese Farbe zu verwenden. Nehmen wir an, ich verwende für die Primärfarbe diese, für die Sekundärfarbe diese und für die Tertiärfarbe diese Also werde ich diesen kopieren. Und ich werde es hier einfügen. Sie werden also feststellen, dass automatisch einige Farbtöne generiert werden , die unserer Grundfarbe entsprechen. Also werde ich es wie Primärfarbe umbenennen. Ich nehme diese Markierung und wähle Cut Styles. Nachdem ich darauf geklickt habe, werden die Farben automatisch generiert, falls Sie es bemerken. Was wir also tun können, wir können die Größe so ändern, dass sie auf unseren Bildschirm passt Also so etwas. Okay. Also hier ist unsere Grundfarbe. Auf die gleiche Weise werden wir also unsere sekundäre Tertiär- und Graufarbe erzeugen Also werde ich es schnell weiterleiten, um uns Zeit zu sparen. Okay, wir haben also die Shirts für unsere Primär-, Sekundär- und Tertiärfarbe erstellt , und für die graue Farbe wählen wir hier einen schwarzen Farbton und es werden automatisch die grauen Farbshirts dafür generiert die grauen Farbshirts dafür Also geben wir dieser grauen Farbe einen Namen und wir werden Styles generieren. Okay, wir holen unsere Grautöne und ich werde sie einfach platzieren und anpassen. Ja. Dann können wir das Etikett mit der richtigen Anpassung anpassen. Okay, also los geht's. Wir haben bereits unseren Color Style Guide erstellt. Und auf diese Weise können wir mit diesem Plug-In ganz einfach unseren Farb-Styleguide erstellen. Deshalb werde ich diesen Vortrag hier beenden und in der nächsten Vorlesung werden wir sehen, wie wir unseren Typografie-Steelguide erstellen können Also bis dahin, wir sehen uns. Tschüss. 9. Erstellen eines Typografie-Styleguides: Jeder wird wiederkommen. In der letzten Vorlesung haben wir unseren Color Style Guide erstellt. In dieser Vorlesung werden wir also versuchen, unseren Typografie-Styleguide zu erstellen also ohne weitere Umschweife Lassen Sie uns also ohne weitere Umschweife unseren typografischen Styleguide entwerfen Also werde ich zuerst einen Rahmen nehmen. Ich werde es umbenennen in Jetzt werden wir ein Plug-In verwenden. Also gehen wir hier hin, wir gehen zur Plugin-Registerkarte und wir werden nach Typenskalen suchen. Also doppelklicken wir hier. Dann wird dieses Pop-up kommen. Also werde ich die Basisgröße bei 16 behalten und ich werde die Skala 1,2 und die Zeilenhöhe beibehalten, ich werde sie auf 1,4 setzen und dann auf Generieren klicken. Dann können Sie also sehen bereits ein Rahmen erstellt wurde, oder? Wir brauchen diesen Rahmen also nicht. Also können wir das löschen. Also kann ich es hier behalten und es in Typo gra so richtig umbenennen es in Typo gra so richtig Also was ich jetzt tun werde, ich werde all diese Ebenen auswählen, diese eine, und ich werde Strg+Shift drücken, damit ich jede dieser Ebenen auswählen kann, zwei, drei, vier Und ich werde das alles duplizieren, also werde ich die Alter-Taste drücken und all diese Elemente aus diesem Rahmen herausnehmen. Und dann drücke ich Shift A, um das alles zu einem Oto zu machen. Shift A, richtig? Jetzt ist es unter einem Rahmen, und dann werde ich es füllen, und ich kann auch etwas Polsterung von beiden Seiten geben, etwa 2020, ich kann den Rahmen so anpassen, dass er gut passt Wir brauchen diesen Rahmen also nicht mehr. Also kriege ich das hin, oder? Also werde ich es hier anpassen und dann kann ich es umbenennen. Also habe ich den Namen kopiert, jetzt werde ich ihn einfügen. Also bis der Typografie-Stil das. Was wir nun tun werden, wenn wir darauf klicken, können wir in der linken Ecke sehen, wir neun verschiedene Textebenen haben, rechts, also müssen wir das umbenennen Also wähle ich zuerst die 51 aus und drücke dann die Strg-Taste, um sie auszuwählen. Also zwei, drei, vier, fünf. Dann drücke ich Strg R. Und das ist jetzt unsere Überschrift, richtig? Also H, dann gebe ich dem Dollarzeichen Dollar N, richtig? Also können Sie sehen, dass die Seriennummer automatisch erstellt wurde. Also umbenennen. Also diese fünf werden unser Header eins, zwei, drei, vier, fünf sein, dann die nächsten beiden. Also wähle ich diese beiden, Control R. Das wird unser Titel sein. Dann Dollarzeichen. Und so, okay. Also das wird unser Haupttext sein. Das wird unsere Bildunterschrift sein. Text. Okay. Also was ich jetzt tun werde, ich werde den Rahmen auswählen. Ich werde die Eingabetaste drücken, um die inneren Ebenen auszuwählen. Treten Sie ein. Und jetzt brauchen wir fette Textstile für all diese neun Ebenen, richtig? Also werde ich Strg D drücken , um all diese Ebenen noch einmal zu duplizieren. Und was ich jetzt tun werde, ich werde es fett machen. Richtig. Und wir müssen das auch umbenennen, oder? Also drücke ich Strg R. Ich nehme den aktuellen Namen all dieser Textebenen und füge zuletzt Fett hinzu. Und noch etwas, das wir tun müssen , ist der Name unseres Textstils zu ändern. Also wähle ich den Rahmen aus, drücke die Eingabetaste, um alles auszuwählen, und wir werden ihn in Hopins ändern Okay. Und dann können wir den Rahmen ansprechen. Okay, so weit, so gut. Also haben wir fast unsere Textstile für unsere Typografie erstellt. Für die richtige Dokumentation werden wir jedoch ein anderes Plugin verwenden, das als Textkachelgenerator bezeichnet wird als Textkachelgenerator bezeichnet Also gehe ich hier hin, Textile Generator, und ich wähle Generate Textiles aus. Sie können also feststellen, dass unsere Textilien automatisch erstellt wurden. Deshalb werden wir jetzt ein weiteres Plug-In verwenden, um eine ordentliche Dokumentation für unseren Typografie-Styleguide Also werde ich nach dem Typografie-Stil suchen. Also werde ich das auswählen. Jetzt können Sie sehen, dass es automatisch eine richtige Typografie-Dokumentation für uns generiert hat eine richtige Typografie-Dokumentation für uns Wir brauchen diesen also nicht. Ich kopiere einfach den Namen. Ich lösche diesen Frame und füge ihn einfach hier ein, richtig? Wenn Sie also feststellen, dass es automatisch eine richtige Dokumentation für unseren Typografie-Styleguide mit der richtigen Überschrift, dem Namen des Textils, dem Pixel, der richtigen Farbe, allem erstellt eine richtige Dokumentation für unseren Typografie-Styleguide mit der richtigen Überschrift, dem Namen des Textils, dem Pixel, der richtigen Farbe, allem So können wir also unseren Typografie-Styleguide erstellen, und damit sind wir fertig mit der Erstellung unseres Styleguides Also werde ich diesen Vortrag hier beenden. In der nächsten Vorlesung werden wir sehen, wie wir unser Low-Fidelity-Wireframe erstellen können Also bis dahin sehen wir uns in der nächsten Vorlesung. Tschüss. 10. Erstellen eines Startbildschirms und eines Startbildschirms: Hallo, alle zusammen. Willkommen zurück. In der letzten Vorlesung haben wir unseren Styleguide für unseren Farb-Styleguide und Typografie-Styleguide erstellt unseren Styleguide für unseren Farb-Styleguide und Typografie-Styleguide Und ab dieser Vorlesung werden wir mit der Erstellung unseres Low Fiddle Tier-Rahmens beginnen Bevor wir uns also mit der Gestaltung unseres Hauptdesigns oder unseres High-Fiddly-Tour-Rahmens befassen , müssen wir unseren Rahmen mit niedriger Geigenbauweise erstellen Ich habe also bereits unseren Rahmen mit hohem Falturrahmen entworfen, oder? Unser Hauptdesign wird also so aussehen. Ja. Zunächst haben wir also unseren Begrüßungsbildschirm, Startbildschirm mit den Produktdetails und wir haben unseren Kartenbildschirm. Und wir haben endlich unseren Bildschirm mit erfolgreicher Bestellung, oder? Für den Begrüßungsbildschirm haben wir also ein vollständiges Hintergrundbild dahinter. Hier gibt es einen Text. Wir haben auch einen Text in der Mitte und eine Schaltfläche. Lassen Sie uns also zunächst unseren Startbildschirm, Low Fiddle, nach WRFrame gestalten Low Fiddle, nach WRFrame Also gehen wir von unserer Low Fiddle to Wireframe-Seite. Wir nehmen einen Frame, der unser 14-Plus-Frame sein wird. Ich werde es auf einen Begrüßungsbildschirm ändern. Dann können wir die Farbe in etwas wie Grau ändern . Okay. Wir haben also ein Hintergrundbild in voller Größe, sodass ich ein Hintergrundbild in voller Größe schreiben kann. Cc, also wird es unser vollständiges Zellenhintergrundbild sein. Dann haben wir hier etwas Text, sodass wir sie durch eine gerade Linie kennzeichnen können. Also erstens wähle ich all diese aus und gehe hier hin, und ich wähle Vertikalen Abstand verteilen, richtig? Also dann werde ich einfach LN verringern. Ich werde einfach LN verringern. Okay. Also von links werden wir einen Abstand von 32 haben. Okay. Dann haben wir in der Mitte auch einen Text. Also gebe ich einfach einen Text. Okay, dann haben wir hier einen Button, oder? Also nehme ich ein Rechteck , um diese Knöpfe zu kennzeichnen. Diese Schaltfläche wird so aussehen. Ich werde die Farbe auf etwas Ähnliches ändern. Okay, so weit, so gut, wir haben unseren Begrüßungsbildschirm mit niedriger Auflösung erstellt. Dann werden wir unseren Startbildschirm haben. Schauen wir uns also an, wie unsere Startbildschirmstruktur aussehen wird. Wir werden hierher gehen. Auf dem Startbildschirm haben wir hier ein Menüsymbol. Das Logo hier, wir haben hier ein Kartensymbol, dann eine Suchleiste, dann unseren Kategorienbereich, Bestseller-Bereich mit einigen Karten, und endlich haben wir eine untere Navigationsleiste. Also lass es uns erstellen. Wir gehen zu unserem LofilFrame, nehmen ein Bild von iPhone 14 Plus ändern den Namen in Startbildschirm Ändere die Farbe auf diese. Okay, jetzt haben wir hier ein Icon, Min-Icon, ein Logo und Cardagon Also markiere ich sie hier mit diesem Mini-Symbol, ändere die Farbe Dieser. Dann haben wir hier ein Logo. Nun, hier wird es ein Logo sein. Dann haben wir hier ein Kartensymbol. Von links werden es 32 sein. Also von der rechten Seite werden es 32 sein. Von links werden es auch 32 sein. Dann haben wir eine Suchleiste. Geben wir also diese Suchleiste an. Das ist also unsere Suchleiste. 32, 32, ändere die Farbe. Dieser. Okay. Dann haben wir unseren Kategorienbereich. Ich werde Kategorie schreiben. Im Kategorienbereich haben wir eine horizontal scrollbare Option Also werde ich sie einfach mit mehreren Rechtecken kennzeichnen. Dann haben wir also unseren Bestseller-Teil, oder? 32. Okay. Also wird es unser Bestseller sein. Also Bestseller. Also im Bestseller haben wir ein paar Karten. Also würde ich sie mit einem großen Rechteck kennzeichnen. Okay. Also wähle ich einfach diese beiden aus und verschiebe A, diese beiden und Schicht A, und ich wähle diese und diese eine und Schicht A. Also passen wir sie jetzt 32, 32 an, ein bisschen. 22. Ich wähle das alles aus und verschiebe A, um das Layout zu ändern, es nach oben. Okay. haben wir unsere untere Navigationsleiste, oder? Also werde ich ein Rechteck erstellen. Und wir haben hier fünf Tabs, oder? Also werde ich sie mit klein kennzeichnen . Ich werde all dies auswählen, indem ich die Umschalttaste drücke. Und dann drücke ich Shift A, um das Layout automatisch zu gestalten und den Abstand zwischen ihnen zu verringern. Okay. Also ja, wir haben unseren Begrüßungsbildschirm und unseren Startbildschirm mit Low-Fidelity-Wireframe erstellt unseren Begrüßungsbildschirm und unseren Startbildschirm mit Low-Fidelity-Wireframe Also werde ich diesen Vortrag hier beenden. In der nächsten Vorlesung werden wir von hier aus weiter mit der Erstellung unseres Low-Fidelity-Wireframes Also bis dahin pass auf dich auf. Tschüss. 11. Erstellen des Bildschirms Produktdetails, Warenkorbbildschirm, Bildschirm Kauferfolg: Eon, willkommen zurück. In der letzten Vorlesung haben wir unseren Startbildschirm und unsere Startbildschirme mit niedrigem Fiddle-Diaframe erstellt Startbildschirme mit niedrigem Fiddle-Diaframe In dieser Vorlesung werden wir also unsere restlichen Bildschirme mit niedrigem Geigendiaframe erstellen Bildschirme mit niedrigem Geigendiaframe Unser nächster Bildschirm wird also unser Produktdetailbildschirm sein Also nehmen wir den Frame oder wir können diesen Frame tatsächlich duplizieren, also Control D. Wir können den Namen in Quadrat mit Produktdetails ändern . Wir können das auswählen und Ender drücken, um das gesamte Objekt darin auszuwählen. Wir können das löschen, indem wir auf das Bein drücken, oder? Also, okay. Also, das meiste von dem, was im oberen Teil ist, ist dasselbe. Also können wir diese drei Dinge kopieren und hier einfügen. Wir haben ein großes Bild in der Mitte, oder? Also kann ich das mit einem größeren Rechteck angeben. Jetzt haben wir hier einen großen Text, die Beschreibung. Dann haben wir die Salzfarbe, Größe, das Preisschild und eine Schaltfläche ausgewählt. Also können wir darauf hinweisen Dann haben wir etwas Text. Kleiner Text, oder? Eins zu. Dann haben wir unseren Bereich „Farben auswählen“. Es wird also unsere ausgewählte Farbe sein. Wir haben hier einige Optionen, oder? Also ich werde sie auf Autoship A setzen. Dann haben wir unsere Option Größe auswählen. Ich werde diesen ganzen Abschnitt einfach noch einmal kopieren. Größe wählen. Und in der Option Größe auswählen haben wir mehrere Optionen zur Auswahl. Also wähle ich einfach den letzten und drücke Strg D, um viel Zeit zu duplizieren. Eins, zwei, drei, vier. Jetzt haben wir hier ein Preisschild und eine Bestätigungsschaltfläche. Also mache ich es einfach ein bisschen kleiner. Ich wähle die untere Taste platziere sie etwas nach oben. Dann haben wir hier ein Preisschild, oder? Ich kopiere einfach den richtigen Preis. Und beim Preis können wir gerade Linien angeben. Dann haben wir hier einen bestätigten Button. Ich mache einfach einen Button. Okay, so weit, so gut, wir haben unseren Produktdetailbildschirm erstellt, Low Fidelity Grape. Dann haben wir tatsächlich unseren nächsten Bildschirm, der unser Kartenbildschirm sein wird. Also werde ich es einfach noch einmal duplizieren. Und ich drücke einfach die Eingabetaste, um die inneren Elemente auszuwählen, und ich drücke Delight. Lassen Sie uns also den Namen in Kartenbildschirm ändern. Wir werden diese Artikel erneut kopieren. Control C, und wir testen es mit Control V. Dann haben wir unsere Liste. Wir können also angeben, dass wir mit Tangle in der Liste Tangle in der Liste ein Bild haben, dann haben wir einen Titel, den Typ, dann haben wir eine Schaltfläche zum Vergrößern oder Verkleinern und hier haben wir unseren Preis. Also werde ich einfach all das auswählen und eine Gruppe bilden. Also Control G, ich werde es noch einmal duplizieren. Und ich werde es ein anderes Mal duplizieren, indem Strg G drücke. Dann haben wir unseren gesamten Abschnitt. Ich werde dann einfach unseren bestätigten Schmerzknopf haben . Okay, so weit so gut. Also sind wir damit fertig unseren Low-Felty-Warenrahmen für unseren Kartenbildschirm zu erstellen Jetzt haben wir nur noch einen Bildschirm übrig , der unser Bildschirm für die erfolgreiche Bestellung sein wird Also werde ich es einfach noch einmal duplizieren. Ich werde es ändern, um die Bestellung erfolgreich aufzugeben. Narr, okay. Ich drücke die Eingabetaste und lösche das alles. Wir haben hier eine große Ikone. Wir haben hier einen großen Text, oder? Wir haben hier einen kleinen Text. Dann haben wir unseren Zurück zur Home-Taste. Also ja, unser Bildschirm „ Bestellung erfolgreich aufgeben“ wird so aussehen. Also das ist es. Wir haben alle unsere Bildschirme für unseren Low-Fidelity-Waframe entworfen unseren Low-Fidelity-Waframe und ich werde diesen Vortrag hier beenden, und ab der nächsten Vorlesung werden wir mit der Entwicklung unseres High-Fidelity-Warframes fortfahren Wir sehen uns also in der nächsten Vorlesung. Bis dahin, pass auf dich auf. Tschüss. 12. Entwerfen eines Splash-Bildschirms: Hallo zusammen. Willkommen zurück. Ausgehend von dieser Vorlesung werden wir mit der Erstellung unseres High-Fidelityerframes oder High-Fidelity-Designs beginnen unseres High-Fidelityerframes oder High-Fidelity-Designs Also gehe ich zuerst zum High-Fiddltyerfame und dann nehme ich einen Frame, der als Startbildschirm dient einen , richtig. Also gebe ich ihm eine Kurve auf 30 oder 50. Okay. Jetzt haben wir also ein vollständiges Hintergrundbild, oder? Also werde ich hierher gehen. Ich werde zu dieser Bildoption gehen. Ich werde das Bild wählen. Ich habe das Bild bereits heruntergeladen. Dieser. Siehst du, jetzt haben wir ein vollständiges Hintergrundbild. Um es etwas dunkler zu machen, können wir jetzt ein Rechteck verwenden. Ich belasse es einfach bei einer Kurve bei 50, mache die Farbe schwarz und reduziere die Deckkraft auf etwa vier bis vier Okay, jetzt haben wir hier einen Text, richtig? Also werde ich eine SMS annehmen. Okay, wir können diese Schrift Busts verwenden. Du benutzt diese Schrift. Sie vergrößern die Größe. Geben Sie von links die Polsterung auf 32. Und wenn wir wollen, können wir das verringern. Okay, so weit, so gut. Also geben wir jetzt eine Verlaufsfarbe an. Also werde ich diesen Farbverlauf wählen. Ich wähle diese Farbe mit etwas wie Ja, Orange. Stimmt das? Wir können es so machen. Wir können die Größe ein wenig erhöhen. Okay. Okay, so weit, so gut. Jetzt haben wir hier einen Text, richtig? Also nehme ich eine SMS. Und ich werde die Größe verringern. Ich habe den Text kopiert und werde ihn hier testen. Und das ist hier. Okay, wir haben also unseren Text. Wir können es ein bisschen leiser machen. Und jetzt müssen wir unseren Button erstellen. Also lass es uns erstellen. Ich nehme ein Rechteck. Ich nehme einen Kreis. Jetzt muss ich eine Ikone mitbringen. Also, von wo aus wir ein Symbol haben können. Also gehen wir hierher. Wir gehen zu unserem Plugin und suchen nach dem Federsymbol, oder? Also werden wir hier doppelklicken. Jetzt werden wir dieses Symbol verwenden. Ich werde darauf klicken. Sie können sehen, dass wir hier unser Symbol haben. Also werde ich es einfach hier platzieren. Also können wir es hier platzieren. Ich werde die Farbe ändern. Ich wähle diese beiden aus und werde die Farbe auf diese ändern . Und jetzt wähle ich diesen und diesen Kreis aus und G, um eine Gruppe zu bilden. Okay. Also werde ich jetzt hier einen Text schreiben. Es wird unser Einstieg sein. Das ist richtig. Ich erhöhe das , mach es etwas mutiger. Also, ich wähle diesen aus, verschiebe diesen, verschiebe diesen und mache daraus eine Gruppensteuerung G. Also haben wir unsere Taste, also wird es unsere Taste sein und sie wird ein bisschen gestartet sein, richtig? Okay. Also haben wir unseren Button erstellt. Das ist also unser High-Fidelity-Design für den Begrüßungsbildschirm. Also werde ich diese Vorlesung hier beenden, und ab der nächsten Vorlesung werden wir versuchen, unseren Startbildschirm zu gestalten. Also bis dahin, pass auf dich auf. Tschüss. 13. Entwerfen einer Suchleiste: Vivon, willkommen zurück. In der letzten Vorlesung haben wir unseren Startbildschirm erstellt, und in dieser Vorlesung werden wir versuchen, unseren Startbildschirm zu gestalten Lassen Sie uns zunächst sehen, wie unser Startbildschirm aussehen wird. Wenn wir also unsere Low-Fidelity-Struktur sehen, können wir hier sehen, dass wir ein Hauptsymbol haben, hier haben wir ein Logo und in der rechten Ecke haben wir ein weiteres Kartensymbol. Dann haben wir eine Suchleiste, dann einen Kategoriebereich, dann unseren Bestseller-Bereich, dann haben wir unsere untere Navigationsleiste. Also lasst uns entwerfen. Also nehmen wir zuerst einen Frame. Wir werden es Startbildschirm nennen. Wir geben eine Obergrenze von 50. Dann brauchen wir hier tatsächlich eine obere Leiste. Wir müssen unsere obere Leiste also nicht wirklich entwerfen. Wir können es von unserer Figma-Community bekommen. Wir können also hierher gehen, zu unserem Startbildschirm. Wir können die Community erkunden. Wir können hier nach IOS 14 suchen. Du gibst es für Figma, damit wir es doppelt anklicken können. Dann können wir in Figma öffnen. Also hier können wir unseren Top-Nevar suchen. Wir können es zoomen und sehen, ob wir es von hier aus bekommen können. Also werden wir einfach versuchen, es zu bekommen. Okay. Wir kopieren es einfach. Steuerung C. Wir kehren zu unserem Design zurück. Wir können es hier einfach hinter uns lassen, Control V. C, dann können wir es einfach anpassen. Richtig. Dann können wir 50 eine Schnitzerei geben Wir können das entfernen, wenn wir wollen. Also entferne es einfach. Und ich denke, diese 50 Kohlenhydrate sind viel, also geben wir die Kurve einfach auf 30. Und auch für diesen geben wir die Zahl auf 30. Geben Sie der Kurve den Wert 30. Okay. So weit so gut. Und was die Höhe angeht, können wir sie auf 44 bringen, oder? Und für die Hintergrundfarbe können wir der Hintergrundfarbe ein bisschen grau geben. Also wähle ich einfach diesen. Okay, jetzt haben wir ein Menüsymbol. Also, was das Symbol angeht, gehen wir hier hin. Wir werden zu unserer Federikone gehen. Wir wählen ein Menü. Also vielleicht können wir diesen wählen. Also wähle diesen. Also haben wir unser Menüsymbol, dann haben wir unser Logo. Ich habe also bereits alle Bilder gesammelt, und ich habe bereits unser Logo erstellt, und ich habe sie in unserem Designsystem behalten. Mach dir keine Sorgen. Ich zeige Ihnen, wie Sie an diese Bilder kommen, und wir zeigen Ihnen auch, wie wir unser Designsystem gestalten können . Mach dir keine Sorgen. Wir haben unsere Vorlesungen über Designsysteme kurz gehalten. Deshalb habe ich vorerst alle Bilder gesammelt, die wir in dieser Serie verwenden werden . Das ist also unser Logo. Ich kopiere es einfach von hier und gehe zurück zu unserem versteckten Rahmen und füge es einfach hier ein. Okay, ich platziere es einfach an der richtigen Stelle. Okay. Dann haben wir unser Kartensymbol. Ich gehe wieder zu Feather Icon. Ich suche nach Card. Ich wähle das aus. Ich werde es auf den Startbildschirm ziehen. Wir müssen noch etwas auf unserer Karte haben , nämlich unsere Nummer, richtig? Also werde ich hier einfach einen Kreis zeichnen. Es kann diese Farbe sein, und wir können hier eine Zahl haben. Es wird Null sein. Damit ich die Größe verringern kann. Und platziere es hier. Ich mache daraus eine Gruppe, kontrolliere das G. Ich mache daraus auch eine Gruppe, also kontrolliere das G. Jetzt haben wir unsere Karte. Okay, so weit, so gut. Also jetzt sind wir fast fertig mit unserem oberen Teil. Dann haben wir unsere Suchleiste, oder? Lassen Sie uns also unser Suchboard erstellen. Ich nehme ein Rechteck Okay, 25 ist okay, denke ich. Jetzt haben wir also unser Suchsymbol. Ich werde hierher gehen. Weitere Suche nach Symbolen. Also werde ich auf dieses Rechteck klicken. Ich werde Strg oder G drücken, um daraus einen Frame zu machen. Und dieses Suchsymbol ziehen wir unter diesen Rahmen. Jetzt ist es also unter diesem Rahmen. Siehst du? Nein, immer noch nicht, also ziehen wir es einfach hierher. Jetzt ist es unter dem Rahmen. Okay. Ich platziere es einfach an der richtigen Stelle und gebe ihm eine kleine dunkelgraue Farbe. Ich wette auf diesen. Oh Mann, der ist okay. Okay. Also, jetzt werden wir einen Text haben. Also werde ich auf diesen klicken und ich klicke auf diesen und ich drücke Shift A, um ihn so weit wie möglich zu machen. Okay. Und so haben wir unsere Suchleiste erstellt. Also kann ich es in Suchleiste umbenennen, oder? Also werde ich diesen Vortrag hier beenden. Ab der nächsten Vorlesung werden wir von hier aus unseren Startbildschirm weiter gestalten. Also bis dahin, pass auf dich auf. Tschüss. 14. Entwerfen eines Kategoriebereichs: Jeder. Willkommen zurück. In der letzten Vorlesung haben wir am Ende hier entworfen. Ab dieser Vorlesung werden wir also von hier aus unseren Startbildschirm weiter gestalten. Also nehme ich einen Text, frage ab und wähle von hier aus unsere Textilien aus, so etwas wie dieses. Dann haben wir unseren horizontal scrollbaren Kategorienbereich Also werden wir ihn entwerfen. Zuerst nehme ich ein Rechteck. Dann werde ich hier einen Kreis zeichnen. Okay. Dann mache ich es auch weiß und gebe dir einen Schlagschatten, keinen inneren Schatten, und es werden zwei sein. Und es wird ungefähr so sein. Und wir werden hier ein Bild platzieren. Also gehe ich zu unserem Designsystem und mache ein Foto. Das hier, ich werde es kopieren. Hier drüber, und ich platziere es hier. Also 24. Vier. Nein, es werden 24 und 20 sein. Okay. Also ja, ich werde auf diesen und diesen Kreis klicken und daraus eine Gruppe machen. Ich mache daraus einen Frame, also kontrolliere Alter G, und ich werde diesen innerhalb von Frame drei platzieren und ihn zur Kategorie eins machen. Ich werde hier den Namen der Kategorie aufschreiben, damit es unser Lebensstil sein wird. Wir können es so ändern. Wir können also die Farbe in etwas Graues ändern. Und wir werden es nicht fett machen. Wir machen es einfach, oder? Okay, können wir es also etwas kleiner machen? Das ist in Ordnung. Ja, ich denke, das ist okay. Es sieht gut aus. Okay. Jetzt ist es perfekt. Also werden wir kreieren, also Kategorie eins. Also werde ich es jetzt noch einmal duplizieren. 16, duplizieren Sie es noch einmal. Und ich gebe ihm den Namen. Okay. Ich gebe dem Namen auf einer Seite Football. Ich werde löschen. Dieses Bild, ich werde dieses Bild löschen. Ich werde zwei weitere Bilder aus unserem Designsystem machen, also werde ich vielleicht das eine mitbringen, die Kopie. Post 24, 20. Lass uns hier sein ist okay. Dann haben wir unseren Fußball. Dann bringen wir diesen mit. Bewältigen. Platz 24. Funkeln Jetzt wähle ich diesen und diesen und mache es automatisch raus Shift A, Alt, Cat Cory-Bereich. Wenn ich will, kann ich dann noch einen duplizieren Also werde ich es einfach noch einmal duplizieren. Steuerung D, richtig? Also werde ich es jetzt aus dem Rahmen nehmen. Ich kann den Namen in Basketball ändern. Okay. Jetzt lassen wir dieses Bild noch einen Schuh mitbringen, kopiere das. Jetzt wähle ich das alles aus, mache es wieder automatisch losen und benenne es in Kategorie um. Jetzt werde ich es an der richtigen Stelle platzieren. 32 28. Ich drücke einfach Control und ändere die Größe so. Und ich gehe zum Prototyp und aktiviere das horizontale Scrollen Okay, jetzt wird es horizontal scrollbar sein, oder? Okay, also beenden wir diese Vorlesung hier und werden in der nächsten Vorlesung mit der Gestaltung des restlichen Teils des Startbildschirms fortfahren nächsten Vorlesung mit der Gestaltung des restlichen Teils des Startbildschirms Also bis dahin, pass auf dich auf. Tschüss. 15. Entwerfen eines Warenkorbabschnitts: Jeder wird wiederkommen. In der letzten Vorlesung sind wir hier gelandet. Jetzt, nach unserem Kategorienbereich, haben wir unseren Bestseller-Bereich. Also werde ich es schreiben. Dann müssen wir ein paar Karten erstellen, oder? Also nehme ich das Rechteck. Jetzt haben wir hier ein großes Bild, dann haben wir unseren Titel, den Schuhtyp, dann unseren Preis. Und wir haben unser Zu - oder Abnahmemuster. Also lass uns jetzt das Foto machen. Also werde ich es einfach kopieren. Ich gehe zum hohen FiideLtorFrame, ich füge es hier ein. Okay, jetzt müssen wir den Namen des Schuhs aufschreiben, damit er unser sein wird. Dann haben wir noch einen Text, es wird Dann haben wir noch einen Text, Und wir haben unseren Preis hier, oder? Also werde ich diesen einfach in das automatische Layout setzen. Steuerung A. Okay. Jetzt haben wir unsere Butter zu erhöhen oder zu reduzieren. Also werde ich es mir einfach ein wenig ausdenken. Ich werde dieses Rechteck zu einem Rahmen machen, die Kontrolltaste ein G. Ich lege alle Elemente in diese Karte. Jetzt müssen wir also unsere Schaltfläche zum Erhöhen oder Verkleinern erstellen. Also mache ich das Häkchen Ich gebe diesem und diesem eine Füllfarbe von diesem und diesem gebe ich ihm. Jetzt müssen wir hier ein Plussymbol und ein Minussymbol hierher bringen . Also werde ich hier ein weiteres Symbol, Plus und ein Minus angeben. also Wir haben also eine Textur, oder? Also wäre es Null. Ich platziere es an der richtigen Stelle. Ich mache das einfach zu einer Gruppe. Also wird es das sein. Okay. Also werde ich jetzt einfach diesen auswählen. Dieser. Nein. Diese Gruppe, diese Gruppe, diese Gruppe. Ich werde eine BR-Karte erstellen, richtig. Mal sehen, ob es funktioniert oder nicht. Ja. Also werde ich jetzt überprüfen , ob es funktioniert oder nicht. Also ja, wir haben unsere erste Karte erstellt. Jetzt mache ich einfach ein Duplikat davon wähle diese beiden aus. Shift A, ich werde es erneut duplizieren. Und ich wähle diesen und diesen aus und verschiebe ihn erneut. Es wird also unser Kartenbereich sein. Deshalb haben wir unseren Bestseller-Bereich eingerichtet. Jetzt haben wir gerade unsere untere Navigation verlassen. Also werde ich diesen Vortrag hier beenden. werden wir unsere untere Navigation weiter gestalten In der nächsten Vorlesung werden wir unsere untere Navigation weiter gestalten. Also bis dahin, pass auf dich auf. Tschüss. 16. Entwerfen einer unteren Navigationsleiste: Jeder. Willkommen zurück. In der letzten Vorlesung haben wir unsere Bestseller-Abschnitte erstellt. Jetzt müssen wir nur noch unsere untere Navigationsleiste auf dem Startbildschirm gestalten . Lassen Sie uns es also ohne weiteres entwerfen. Also werde ich zuerst ein Rechteck nehmen. Okay. Jetzt haben wir zuerst unseren Home-Tab, also nehme ich einfach ein Home-Symbol. Ich nehme es mit nach Hause. Dann haben wir unser Kartensymbol. Dann haben wir keine Benachrichtigung. Dann haben wir unser Personensymbol, richtig? Wir haben also vier Tabs, nicht fünf. Also werde ich sie einfach trennen. Also zuerst ist das unser Auto zu Hause, richtig. Also, was ich tun werde, ich werde hier einen Kreis drehen. Zuerst mache ich einen Kreis , der 46 46 sein wird. Ich werde die Farbe so ändern. Jetzt nehme ich eine Ellipse und mache daraus 11, zwei, 72. Ich werde dir einen Schlaganfall geben und es wird so sein Also werde ich das kopieren und mehrmals hier klicken und ich werde es hier einfügen. Also können wir das jetzt machen, Siehst du? Wir können das so machen. Auch von hier aus. Um das zu mögen . Ja. Ja, wir müssen es vor die Epsi stellen. Und jetzt können wir es füllen, den Strich entfernen, und diese Füllung sollte diese sein Siehst du, es sieht so aus. Wir können es ein bisschen runter schaffen. Wir können es ein bisschen okay machen. Wir können das jetzt bringen. Dann in die Mitte. Wir können sie einer Gruppe zuordnen, Konto G. Außerdem können wir sie zu einer Gruppe zusammenfassen , Konto G. Es wird unser Zuhause sein. Dann müssen wir platzieren dann müssen wir unsere anderen Icons platzieren. Also wähle ich einfach diese drei aus und gebe Shift 8 ein, um das Layout automatisch zu gestalten. Und wenn ich will, kann ich einfach das automatische Layout entfernen und die Gruppierung Okay. Und hier haben wir einen Text. Also schreibe ich den Text einfach so, dass er Okay hält , dann wählen wir dieses Rechteck aus und verwandeln es in einen Rahmen. Also kontrolliere Alter G und ich werde alle Elemente in den Rahmen einfügen. Also dieses Zuhause, es wird in dem Rahmen sein , der Text dieses Symbols. Also das alles wird im Rahmen sein. Und ich ändere es in die untere linke Leiste. Sehen Sie jetzt, wir haben unsere untere Navigationsleiste auf diesem Startbildschirm erstellt . Also haben wir endlich unsere untere Navigationsleiste gestaltet. Damit haben wir die Gestaltung unseres Startbildschirms abgeschlossen. Deshalb werde ich diesen Vortrag hier beenden und in der nächsten Vorlesung werden wir unseren Bildschirm mit den Produktdetails gestalten. Also bis dahin, pass auf dich auf. Biene. 17. Entwerfen eines Bildabschnitts: Hallo, alle zusammen. Willkommen zurück. In der letzten Vorlesung haben wir unseren Startbildschirm gestaltet. In dieser Vorlesung werden wir versuchen, unseren Detailbildschirm zu gestalten. Fangen wir ohne weitere Verzögerung an. Zuerst nehme ich ein Bild. iPhone 14 plus. Ich gebe 113. Ich bin unser Bildschirm mit den Produktdetails. Ich kopiere diesen einfach und teste ihn hier, richtig? Okay, wenn wir also unseren Produkt-DTS-Bildschirm sehen, haben wir hier ein Symbol. Es wird unser Rückpfeil sein. Wir haben hier etwas Text und wir haben hier ein weiteres Symbol. Es wird unser Hardicon sein. Dann haben wir ein großes Bild, dann etwas Text, Silet-Farbbereich, Schluff, Größenauswahl, Preis und Button Also lass es uns entwerfen. Also gehe ich zu unserer Federikone. Wir werden diesen B-Pfeil wählen. Ich mache 32 oder 36. Ich werde es hier hinstellen. Okay. Lass uns sehen. Das sollte es sein. Okay. Also dann haben wir hier einen Text und wir haben hier ein Symbol. Also werde ich zuerst das Symbol hinzufügen, damit wir wieder zum Federsymbol gehen können . Wir können das Herz suchen. Mir wird es gut gehen. Dann haben wir eine Textur, oder? Dann dein Bett. Also. Wir können den Text auswählen. Mach diesen. Spur, such dir diesen aus. Denk nach. Ja. Okay, also lege ich es einfach in die Mitte und ändere die Farbe auf diese. Okay, dann haben wir ein großes Bild, oder? Also gehe ich zu Artisans System, wo ich unsere Bilder aufbewahrt habe. Ich kopiere das einfach. Ich werde es hier testen und die Größe erhöhen. So etwas wie das hier. Dann haben wir hier einen Schatten, oder? Also werde ich einen Schatten hinzufügen. Ich füge eine Kontur, einen Schlagschatten oder eine Ebenenunschärfe Ich werde es einfach so machen. Und ich werde einfach die Farbe verringern . Okay. Jetzt haben wir Pfeil, Kreis, Pfeil, um diesen Schuh zu drehen. Also, wie kann ich dem zustimmen? Wir können das durch eine Ellipse oder einen Kreis erzeugen das durch eine Ellipse oder einen Kreis Also diese Farbe, ich gebe sie dem Farbverlauf Also sollte dieser weiß sein. Und dieser sollte aus dem Schuh genommen werden. Also wäre es dieser. Okay. Also können wir es so machen. Okay, ja. Wir können es so machen. Dann müssen wir hier einen Kreispfeil erstellen . Also nehmen wir einen Kreis. Also dann nehme ich diese und diese Gruppe und mache wieder eine Gruppe daraus. Ich werde es darunter platzieren. Okay, so weit, so gut, wir haben unseren oberen Teil erstellt. Also werde ich diese Vorlesung hier beenden und ab der nächsten Lektion werden wir den Rest dieses Bildschirms erstellen. Also, Tin, pass auf dich auf. Tschüss. 18. Entwerfen eines Abschnitts mit Produktdetails: Jeder. Willkommen zurück. In der letzten Vorlesung sind wir hier gelandet. Jetzt werden wir unseren Vortrag von hier aus fortsetzen. Nach diesem Teil haben wir also unseren Titel Shom. Also schreiben wir ihn, dann haben wir den reduzierten Text, ich schreibe ihn einfach Wir wählen diesen aus und machen ihn so klein oder wir können ihn einfach plattieren. Wir können das kopieren. Wir können es einfügen. Und wir können einfach diese beiden auswählen und Shift A ein- oder ausschalten, das verringert die Zahl um vier. Wir können es fett machen. Okay. Und wir können diese Farbe in Grau ändern. Dieses Grau. Also platziere ich es einfach hier und wir haben hier ein Sternsymbol, richtig? Also lass es uns erstellen. Und wir können das auch löschen und es wieder schaffen. Ich schaffe es. Vier. Okay. So weit, so gut. Dann haben wir einen Beschreibungstext, oder? Ich habe den Beschreibungstext kopiert, also werde ich ihn jetzt hier testen. also Dann haben wir unseren Bereich „Farbe auswählen“, oder? Also lass uns kreieren. M. Jetzt kann ich einen auswählen, diesen und diesen, und es automatisch für Sie übernehmen. Ich kopiere einfach diesen . Schreib einfach. Also müssen wir jetzt unsere Größenoption erstellen. Ich nehme ein Rechteck. Also machen wir jetzt eine Gruppe daraus. Also werde ich es einmal duplizieren. Ich werde die Größe auf 38 reduzieren und ich werde die Größe des Textes auf diesen reduzieren. Es wird hier sein. Ich kopiere es einfach einmal und ich werde es einfach mehrmals duplizieren. Also werde ich jetzt einfach den Namen ändern oder die Nummer ändern. Ich werde das alles behalten. Mm hmm. Mm hmm Außerhalb des Rahmens und mach es bei. Shift A, ich ändere es auf 45, richtig? Dann wechsle ich einfach gegen diesen, ich gebe ihm einfach ein Gefühl. Wenn Sie den Strich entfernen, ist die Füllfarbe die Textfarbe weiß. Ich werde es hier platzieren. Und ich werde diesen anpassen. Und ich gehe einfach zum Prototyp und aktiviere das horizontale Scrollen. Okay. Also, jetzt haben wir unseren Preis hier und wir haben unseren bestätigten Button, richtig? Also dann lass uns zum Preis kommen. Dann haben wir unseren bestätigten Button, oder? Mach eine Gruppe draus. Aber so haben wir die Gestaltung unseres Produktdetailbildschirms abgeschlossen. Also werde ich diese Vorlesung hier beenden, und ab der nächsten Vorlesung werden wir mit der Gestaltung unseres Kartenbildschirms beginnen, richtig? Also bis dahin pass auf dich auf. Tschüss. 19. Entwerfen eines Warenkorbbildschirms: Hallo, alle zusammen. Willkommen zurück. In der letzten Vorlesung haben wir unser Produkt TTS Screen entworfen In dieser Vorlesung werden wir also Gestaltung unseres Warenkorbbildschirms beginnen Also werde ich es zuerst duplizieren. Ich wähle innerhalb der Materialien aus, also wähle ich den Rahmen aus und drücke die Eingabetaste, und alles wird ausgewählt. Also werde ich das alles einfach löschen. Und ich kopiere einfach, diesen und diesen und diesen. Ich werde sie einfach alle duplizieren und sie einfach an ihren Platz stellen. Okay. Also werde ich diesen löschen. Ich werde Checkout schreiben. Und hier müssen wir unsere Artikel zählen lassen. Also werde ich diese 10 nehmen. Nun, duplizieren Sie es, schreiben Sie es einzeln auf. Ich werde es ändern in Also werde ich es einfach hier platzieren. Ich werde es einfach hier platzieren. Ich wähle diese beiden aus und drücke Shift A, um ein Layout zu erstellen , das Tribs zählt Okay, ich platziere sie einfach. Okay, so weit, so gut. Jetzt müssen wir unsere Liste haben. Also werde ich zuerst eine Symbolkarte erstellen, wenn unser Top-Karten-Bildschirm leer ist. Also nehme ich ein Rechteck. Dann müssen wir eine Einkaufsikone mitbringen. Ich gehe hierher, geh Karte. Also das wird unser Symbol sein , mach dieses Rechteck zum Rahmen, also kontrolliere er G. Also platziere ich diesen hier und ich platziere diesen Einkaufswagen unter diesem Rahmen Das und ich werde die Größe auf 40 erhöhen , ungefähr so Okay, so weit, so gut. Dann müssen wir unsere zur Karte hinzugefügte Liste erstellen. Also h. Dann haben wir unser Nemo Pho Richtig. Dann haben wir unsere Art davon, klar. Dann müssen wir dieses Symbol von unserem Startbildschirm holen. Also werde ich einfach auf Alter drücken und es auf diesen Bildschirm duplizieren und versuchen, es hier zu platzieren. Also wird es platziert. Okay. Dann haben wir unseren Preis. Also der Preis hier. Okay, so weit, so gut. Also werde ich es einfach noch zweimal duplizieren . Dann wähle ich diesen , diesen, diesen und diesen aus und drücke Shift A, um daraus ein Layout zu machen. Ich werde den Abstand zwischen ihnen verringern. Ich werde diesen entfernen. Dann müssen wir unseren gesamten Abschnitt erstellen. Ich würde einfach dann unsere bestätigte Zahlung haben. Diese Schaltfläche wird also so aussehen. Ich werde diesen einfach kopieren. Ich werde beide Seiten vergrößern. Wir haben also erfolgreich unseren Warenkorbbildschirm erstellt . Es wird so aussehen. Also werde ich diese Vorlesung hier beenden und in der nächsten Lektion werden wir unseren letzten Bildschirm erstellen. Das wird unser Bildschirm für erfolgreiche Bestellungen sein. Wir sehen uns also im nächsten Video. Tim, dann pass auf dich auf. Tschüss. 20. Entwerfen eines Auftragserfolgsbildschirms: Jeder, willkommen zurück. In der letzten Vorlesung haben wir unseren Kartenbildschirm gestaltet. In dieser Vorlesung werden wir also unseren letzten und letzten Bildschirm entwerfen , der unser Bildschirm für die erfolgreiche Bestellung sein wird. Ich werde diesen auswählen und ihn noch einmal duplizieren. Ich werde einfach schreiben Lass uns bestellen. Das ist gut. Okay. Jetzt wähle ich einfach den Rahmen aus und drücke Enter, um alle Dinge auszuwählen, und drücke ihn einfach weiter. Okay. Jetzt werden wir versuchen, nach dem Feiersymbol oder dem Häkchen zu suchen. Also gehe ich zu Chrome und suche nach dem Plat-Symbol. Also hier kann ich nach Caret suchen. Dann können wir jedes Symbol auswählen, das uns gefällt. Also werde ich diesen wählen. Also hier ist ein Trick. Wie können wir das Symbol im SVG-Format herunterladen? Um ein beliebiges Symbol von einem flachen Symbol im ABG-Format herunterzuladen. Wir müssen die Premium-Version kaufen, aber es gibt einen Trick Wir können es kostenlos machen. Also gehen wir zu diesem Bearbeitungssymbol. Dann werden wir klicken und prüfen , wir werden versuchen, das SVG-Tag zu finden. Also finde ich hier. Also klicken wir einfach darauf und kopieren Control C. Wir kommen zurück zu unserem Figma und testen es hier mit ControlV Siehst du? Jetzt ist dieses Symbol in unserem SVG-Format erhältlich. Also werde ich es einfach in der Größe ändern. Jetzt werden wir nach einem anderen Symbol suchen, das unser Feiersymbol sein wird oder so, ähm. Also bringen wir das zerbrochene Symbol vor dieses Feiersymbol Und was wir tun werden, wir werden dies und das auswählen und das wird es ein bisschen kleiner machen Wir können es so machen und wir können es hierher bringen. Wir können es anpassen. Dann können wir das auf die gleiche Weise auswählen. Ich wähle das aus. Ich werde die Größe einfach so Ich werde es herbringen. Ich nehme es einfach so. Bring es her. Bring dich an dich , ja, so weit, so gut. Dann haben wir hier einen Text. Unser Text wird also so sein , jetzt haben wir hier einen anderen Text. Dann haben wir endlich unsere Schaltfläche Zurück zur Startseite, und diese Schaltfläche ist ungefähr so. Ich kopiere es einfach von hier nach hier. Die Höhe, ich erhöhe die Höhe um vier. Ich werde die Breite erhöhen, ungefähr so. Mach es in die Mitte. Ich werde es schreiben. Okay, wir haben unser Okay erstellt, wir können die Höhe ein wenig um vier erhöhen. Okay, wir haben unseren Bildschirm „Bestellung erfolgreich aufgeben“ erfolgreich erstellt . Auf diese Weise haben wir am Ende unser gesamtes gehyptes T-Design entworfen Ab der nächsten Vorlesung werden wir also mit der Gestaltung unseres Designsystems beginnen Also werde ich diesen Vortrag hier beenden und wir werden es im nächsten Video sehen. Bis dahin, pass auf dich auf. Tschüss. 21. Erstellen von Image- und Symbolkomponenten: Hallo, alle zusammen. Willkommen zurück. Ausgehend von diesem Vortrag werden wir mit der Erstellung unseres Designsystems beginnen Erstellung unseres Designsystems Bevor wir also unser Designsystem erstellen, müssen wir wissen, warum wir eigentlich ein Designsystem benötigen Ein Designsystem besteht also im Grunde aus vielen Komponenten, Variablen und Varianten. Und wenn wir unseren Hype um unseren Rahmen bemerken, haben wir viele Buttons, Karten, einige Elemente, einige Kartenlisten und andere Dinge Also Ikonen. Also einige Icons und Buttons werden mehrfach wiederholt und wir haben sie tatsächlich erstellt. Also erstellen wir unser Tian-System tatsächlich so, dass wir die wiederholte Aufgabe nicht mehrmals ausführen müssen. Und wir können die Elemente ändern oder wir können etwas ändern , wenn wir es brauchen. Deshalb brauchen wir unser Tian-System. Fangen wir also an, unser Designsystem zu entwerfen. Fangen wir also an, unser Designsystem zu erstellen. Wenn Sie also feststellen, dass wir unser Bild tatsächlich im Designsystem erstellt haben, die Bilder, die wir verwendet haben, aber wir müssen sie auf den Komponenten konvertieren , damit wir etwas leicht ersetzen oder ändern können. Wenn wir es also auf unserem Bildrahmen sehen, haben wir ein paar Bilder. Also werde ich zuerst klicken. Also werde ich zuerst auf eine klicken, und hier oben können wir sehen, wie Komponenten erstellt werden. Ich werde es einfach in eine Komponente konvertieren, also werde ich einfach auf die Komponente klicken. Ich werde das für alle Bilder tun. Also haben wir Komponenten für unsere Bilder erstellt. Jetzt müssen wir eine Sammlung unserer Icons erstellen. Diese wurden für unser High-Fidelity-Design verwendet, oder? Also nehmen wir einen Rahmen und nennen ihn Icons. Schauen wir uns also an, welche Symbole wir verwendet haben. Also haben wir zuerst dieses Symbol verwendet. Also kopieren wir es einfach und fügen es in unser Designsystem ein. Das ist unser einziges Symbol. Ich werde es einfach in eine Komponente umwandeln. Dann werden wir wieder hierher zurückkehren. Wir haben ein Menüsymbol. Ich werde es einfach kopieren und in unser Designsystem einfügen . Komponente. Auf die gleiche Weise werden wir es für jeden von ihnen tun. Mm hmm. Mm. Mm. Mm. Mm. Mm. Mmm. Mmm Mm. Mm. Mmm. Also haben wir erfolgreich die Komponenten für unsere Icons erstellt Jetzt können wir sie ganz einfach über unseren Asset-Tab verwenden. Sie können sehen, ob wir in den Symbolen zu dem Asset wechseln, wir können alle Symbole sehen, die wir haben. Wir können es also einfach verwenden, indem wir es ziehen. Also werden wir es später benutzen. Jetzt werde ich diesen Vortrag hier beenden und wir werden von hier aus unser Designsystem weiterentwickeln . Also siehe im nächsten Video. Sag es ihnen, pass auf dich auf. 22. Schaltflächenkomponenten erstellen: Mann, wir kommen zurück. In der letzten Vorlesung haben wir unsere Komponenten für Bilder und Icons erstellt. Jetzt werden wir damit beginnen, unsere Komponenten und Varianten für unsere Buttons, Karten und andere Teile zu erstellen unsere Komponenten und Varianten für unsere Buttons, . Also nehme ich den Rahmen benenne ihn in Längen und Varianten um, oder? Jetzt werden wir also zunächst unsere Komponenten für unsere Buttons erstellen . Schauen wir uns also an, welche Art von Knöpfen wir haben. Also zuerst haben wir diese Schaltfläche „Erste Schritte“, dann haben wir diese Schaltfläche „ Bestätigen“, dann „Zahlung bestätigen“ und dann „Zurück zu C“. Also nehmen wir es. Ich kopiere einfach diesen. Ich gehe zurück zu unserem Designsystem und füge es hier ein. Jetzt werde ich es einfach in eine Komponente umwandeln, oder? Also ja, jetzt werde ich drei Varianten davon machen. Also werde ich es einfach noch einmal drücken. Okay. Zuerst setzen Diese Variante wird auch so sein. Du wirst hier sein. Und dieser Text wird uns willkommen heißen. Text, er wird in der Mitte sein. Oder wenn ich will, kann ich es hier ein bisschen machen. Dann können wir endlich eine Variante erstellen und wir werden diese löschen. Das brauchen wir nicht. Wir werden die Farbe dieses Rechtecks zu weiß ändern und wir werden die Farbe des Textes so ändern, wir werden zu diesem Rechteck hinzufügen, wir können einen Strich hinzufügen, ich sage Strich dieser Farbe. Okay. Okay, jetzt werden wir all diese Varianten umbenennen. Diese Variante ist also unsere Standardvariante. Das wird unser Slider sein wenn wir diesen Slider verschieben, und das wird unser Slide sein Okay. Deshalb haben wir die Komponenten und Varianten für die Schaltfläche mit dem Startdatum erstellt Varianten für die Schaltfläche mit dem Startdatum Lassen Sie uns nun diese Bestätigungsschaltfläche erstellen. Ich werde das einfach kopieren. Ich werde es hier testen. Machen Sie es zu einem Bestandteil, ich werde eine Variante davon erstellen und ihr den Namen geben. Wenn wir mit der Maus darüber schweben, wird es etwas dunkler sein, und es sollte einen Schatten Okay. Also haben wir eine Variante dafür gemacht. Noch eine, diese bestätigt die Zahlung. Kopieren Sie, erstellen Sie eine Komponente, fügen Sie eine Variante hinzu, genauso wie wir das tun werden, es wird einen Effekt geben, und der Name dieses Zustands wird Huber sein. Okay. Und endlich müssen wir aufhören, um Hamby den Rücken zu kehren Es ist eine Kopie. Erstellen Sie die Komponente bei Variante Over. Ich ändere einfach die Farbe auf weiß und die hier auf schwarz-schwarz und es entsteht ein äußerer Strich. Davon. Okay. Okay. Jetzt haben wir also alle Komponenten und Varianten für unsere Buttons erstellt . Jetzt werden wir diese Tasten durch unseren High-Feltalframe ersetzen . Also gehen wir zu unserem High FDL Dual Frame über. Wir gehen zu diesem Asset-Tab und wir werden zu unseren lokalen Komponenten gehen, und wir werden sehen alle Komponenten und Varianten hier hinzugefügt wurden. Ich werde es einfach hierher ziehen. Ich werde es einfach schneiden. Ich gehe hierher und wähle einfach den Ort aus, der ersetzt werden soll, damit es automatisch ersetzt wird. Das Gleiche werden wir für den Rest der Tasten tun. Also haben wir alle Dinge ersetzt, die automatisiert sind. In dieser Vorlesung haben wir also Komponenten und Varianten für unsere Buttons erstellt, und ich werde diese Vorlesung hier beenden. Ab der nächsten Vorlesung werden wir Komponenten und Varianten für den Rest der Dinge erstellen . Also bis dahin pass auf dich auf. Tschüss. 23. Erstellen einer Kategorieabschnittskomponente: Einer wird zurückkommen. In der letzten Vorlesung haben wir die Komponente und Varianz unserer Buttons erstellt Und in dieser Lektion werden wir die Komponenten des Kategorienbereichs und diese untere Navigationsleiste erstellen Komponenten des Kategorienbereichs und diese untere Navigationsleiste Lassen Sie uns also unsere Komponenten für diese Kategorie und die untere Navigationsleiste entwerfen . Also kopieren wir einfach dieses Konto C und optimieren es hier Wir werden eine Rahmengröße anpassen. Okay. Jetzt werden wir es zu einer Komponente machen, dann werden wir Varianten hinzufügen. Eins. Okay. Also dieser, wir machen daraus diese Farbe, diesen Text, wir machen ihn zu Null. Und wir können es so aussehen lassen , dass es ausgewählt ist, oder? Wir können also diese zweite Variante so nennen , dass das Leben ausgewählt ist, oder? Dann machen wir noch eine. Und die Variante, richtig? Also wählen wir diese aus und gehen genauso zu ihr über, wie wir diese Farbe erstellen werden , wir werden sie weiß geben, ihr einen Schatten geben. Okay. Wir geben diesen Namen. Diese Running-Variante. Wird ausgeführt, ausgewählt. Stimmt? Dann können wir genauso eine andere Variante machen. Ändern Sie auf diese Weise die Farbe und die Textfarbe so. Und wir können einen Effekt darauf haben. Und endlich werden wir noch einen machen. Also einfach eine andere Variante erstellen Elepth one, warum Effect warum Dieser. So weit, so gut, und dieses Lernen wird sich lohnen. Basketball. Und diese vier Okay, also haben wir diesen Kategorienabschnitt Komponenten und Varianten erstellt . Und was wir jetzt tun werden, werden wir zu unserem hohen Filz oder Frame übergehen zu unserem hohen Filz oder Frame übergehen Wir gehen zu unserer Anlage und wir können sehen, dass wir hier unsere Abschnitte haben Wir ziehen es einfach hierher und schneiden es ab. Wir gehen hierher und wir werden es einfach durch dieses ersetzen und wir werden es so anpassen. Und wir werden Horizontalscin aktivieren, richtig? Wir haben sie also schon in einen Scone verwandelt. Also ist es okay. Deshalb haben wir unseren Kategorienbereich Komponenten und Varianten erstellt , und in der nächsten Lektion werden wir versuchen, unsere untere Navigationsleiste zu erstellen. Also bis dahin, pass auf dich auf. Tschüss. 24. Erstellen einer Komponente für die untere Navigationsleiste: Einer wird zurückkommen. In der letzten Vorlesung haben wir unsere Komponenten und Varianten für den Kategorienbereich erstellt . In dieser Vorlesung werden wir nun unsere Komponenten für die untere Navigationsleiste erstellen . Also werde ich diesen kopieren und zum Designsystem wechseln, erhöhen die Rahmengröße erhöhen und sie hier einfügen. Das werden also unsere unteren Navigationsleisten sein. Ich werde es zu einer Komponente machen. Ich werde eine Variante davon machen. Was ich nun tun werde, ich werde einfach diesen und diesen Kreis auswählen. Ich werde hier sein. Okay. Also dann wähle ich das einfach aus und verschiebe es hierher. Ich werde die Farbe auf Weiß ändern. Und ich werde es auch hierher verschieben. Karte gerade richtig ausgerichtet. Und was das Haus angeht kann ich einfach die Farbe auf Grau umstellen. Ich werde es hierher verschieben. Okay, das ist also unser Kartentab. Das ist unser Home-Tab. Okay, dann werden wir eine weitere erstellen , dann werden wir eine weitere Variante davon erstellen. die gleiche Weise wähle ich diesen Kreis, diesen und diesen aus und ziehe ihn einfach von hier nach hier. Ich wähle das aus und platziere es in der Mitte. Ändere die Farbe auf Weiß, ändere es so, dass es kein Ausbleichen ist Ändere die Farbe auf Grau. Platziere es in der Mitte. Okay. Okay, jetzt werden wir es in Notification Tap umbenennen. Also werden wir unsere letzte Variante erstellen, die von uns ausgewählt wird , oder? Wählen Sie auf die gleiche Weise diesen Kreis aus. Diesen und diesen. Platziere es hier. Weiß. Ich zähle auf die richtige Ausrichtung. Und wir werden es platzieren. Ändere die Farbe auf Grau. Okay, jetzt werde ich es in Konto-Tab umbenennen. Jetzt haben wir die Komponenten und Varianten unserer unteren Navigationsleiste erstellt . Also gehe ich zurück zu unserem High-Fidelity-Frame, gehe zum Asset, ziehe es hierher, schneide es aus und ich werde es ersetzen. Ersetze das Okay, so weit, so gut. Deshalb haben wir dieses Teil erfolgreich für Komponenten und Varianten erstellt . In der nächsten Vorlesung werden wir weiterhin weitere Komponenten und Varianten für unser Designsystem erstellen . Also bis dahin, pass auf dich auf. Tschüss. 25. Erstellen von Kartenkomponenten mit Abschnitt mit Größe wählen: Alle zusammen, willkommen zurück. In der letzten Vorlesung haben wir unsere Komponenten und Varianten für diese untere Navigationsleiste auf dem Startbildschirm erstellt Varianten für diese untere . In dieser Vorlesung werden wir nun die ausgewählten Größenkategorien Komponente und Variante erstellen . Also werde ich es einfach von hier kopieren. Ich werde es testen. Hier. Manche sind so. Ich passe die Größe an. Okay. Also werde ich es jetzt zu einer Komponente machen, dann werde ich eine Variante davon machen. Und ich werde das einfach auswählen und diese Artikel ändern. 38. Es wird 39 sein. Dann der Kumpel. werden es 39 sein, dann werden es 40 sein. Dann noch einer Also haben wir unsere Komponenten und Varianten dafür erstellt und das werde ich also werde ich jetzt zu unserem Hochfeld-Dover-Frame zurückkehren, und ich werde einfach zu unserem Asset gehen Ich ziehe es hierher, schneide es aus. Ich werde es einfach ersetzen. Ich werde die Größe anpassen und zum Prototyp übergehen, und er ist schon horizontal quadratisch, oder? Also haben wir unsere Komponenten dafür erstellt. Jetzt werden wir versuchen, Komponenten für diese Karte zu erstellen. Also gehe ich einfach zum Designsystem. Ich platziere es hier. Dieses Bild, wir müssen das Bild von unseren Komponenten verwenden . Also werden wir dieses verwenden. Ich werde das einfach kopieren und hier einfügen, ersetzen, richtig? Jetzt wähle ich diese Karte aus, ich mache sie zu einem Bestandteil. Dann machen wir diesen Titel zu dieser Kategorie, dem Text, Preis, allem, automatisch wechselnden Komponenten. Wie können wir das also machen? Dafür müssen wir also lokale Variablen erstellen. Okay, also gehen wir zu den lokalen Variablen oder wir erstellen eine Sammlung. Also werde ich diese Sammlung in Produkt Okay umbenennen. Also werden wir eine Sammlung erstellen. Also werden wir eine Variable erstellen. Und der erste Variablenname ist Duct, A. Also nenne ich sie ni ax tom set and zero. Und ich werde demselben den Namen Al geben. Dann werde ich noch einen erstellen. Es wird unser Hype sein. Der erste wird also unser Don So sein. Okay. Dann haben wir unseren Preis. Das ist eine Zahl, oder? Das ist der Preis, es werden 220 sein, oder? Dann haben wir die Anzahl unserer Artikel. Dies ist unsere Artikelanzahl. Also lasse ich einen weiteren Artikel Null zählen. Und noch eins, das wir machen müssen, ist, dass dieser Artikel zur Karte hinzugefügt wird oder nicht. Also müssen wir das Goldbarreneigentum oder den Bollan variabel machen , der der Karte hinzugefügt wird Also sollten es Pelze sein. Also, jetzt müssen wir für all diese vier Karten etwas kreieren, richtig Eins, zwei, drei, vier, also lasst uns kreieren. Also noch eins, wir können es benennen. Soren M ist da. Dieser hier, das wird unser Lieblingsschuh sein. Der Preis wird 350 sein, und das wird auch so bleiben. Wir werden noch einen erstellen. So weit, so gut. Wir haben alle Variablen erstellt, die wir benötigen. Also, was werden wir jetzt tun? Wir werden zu diesem Text gehen. Wir werden hier hingehen und es mit unserem Produktnamen verbinden. In diesem Fall binden wir es mit unserem Produkt zusammen. Geben Sie ein. Hier müssen wir das ein bisschen modifizieren. Das wird ein Duplikat davon machen und ich werde es einfach immer noch tun. Und dafür werde ich es einfach so machen. Das sind also unsere beiden Tags, richtig? Das hier binde ich mit der Presse zusammen. Und ich werde diesen Text mit unserer Artikelanzahl variabel gestalten. Okay. Und noch etwas müssen wir hier für das Bild tun, wir werden die Instant-Swap-Eigenschaft anwenden. Also werde ich das Bild auswählen. Ich werde hierher gehen. Ich schreibe ein Bild und füge die Kollektion für die WinSHRT-Schuhe Ich werde diesen und diesen blauen Schuh auftragen . Ja. Ich werde einfach diese Immobilie erstellen. Jetzt kehren wir zu unserer High-Fidelity oder Frame zurück und gehen zum Asset und fügen es hier hinzu. Schneide es aus und ich wähle das alles aus. Eins, zwei, drei, vier und ich werde das alles ersetzen . Dann wurden auf diese bereits die Variablen angewendet. Und jetzt wähle ich das aus und wir können sehen, dass wir den Schuh wechseln können. Wir können hier zu den Produkten gehen und das zweite auswählen Dadurch werden automatisch der Titel, der Schuhtyp und alles andere geändert . Das Gleiche werden wir hier tun. Erfahren Sie, wie wir Komponenten einfach gewichten können. Anhand der lokalen Variablen können wir unsere Karten einfach ändern und modifizieren. Deshalb werde ich diesen Vortrag hier beenden. Ab der nächsten Lektion werden wir unser Designsystem von hier aus weiter unser Designsystem von hier verbessern. Also bis dahin, pass auf dich auf Tschüss. 26. Erstellen von Warenkorblistenkomponenten: Ian wird zurückkommen. In der letzten Vorlesung haben wir diese Kartenkomponenten und Varianten mit unseren lokalen Variablen erstellt . Jetzt kehren wir zu unserem Hypedl-Design zurück. Und in dieser Vorlesung werden wir diese Kartenlisten-Komponenten erstellen Also werde ich das einfach kopieren. Ich werde es hier testen. Was wir nun für dieses Bild tun werden, wir werden es durch die Komponenten ersetzen, die wir erstellt haben. Also, wenn ich das einfach kopiere, gehe ich hierher. Ich werde das einfach ersetzen. Okay. Wir werden tatsächlich weitere lokale Variablen für unseren Kartenbildschirm erstellen . Also werde ich einfach eine Sammlung erstellen. Es wird unsere Karte sein. Was wir nun tun werden, wir werden eine weitere Kartensammlung erstellen. Also werden wir sie Karte nennen, dann werden wir einige Variablen erstellen. Also ist eine der Variablen tatsächlich leer oder nicht. Also werden wir es standardmäßig wahr machen. Nun, was wir tun werden, wir werden diesen Wert verknüpfen und eine Variable im Produktnamen anwenden, diesen Namen, den Produkttyp und diesen mit unserem Preis. Und diesen werden wir mit unserer Artikelanzahl verknüpfen, richtig? Falls Sie also hier feststellen sollten, dass wir unser Dollarzeichen nicht haben. Also was wir tun werden, wir werden einfach ein 1-Dollar-Zeichen erstellen und es hier einfach anpassen. Und wir können es hier ein wenig anpassen. Wir können das anpassen, oder? Also, so weit, so gut. Also werden wir es jetzt zu einer Komponente machen. Für dieses Bild müssen wir unsere Instant-Swap-Eigenschaft anwenden. Also werden wir hier auf Bilder klicken. Wir werden eine Sammlung für dieses Bild hinzufügen. Dieser und unsere schwarze Schuhkollektion, richtig? sind kleine, oder? Okay, tolles Anwesen. Nun, was wir tun werden, werden wir zu unserem High-Pedal-Intervaframe übergehen unserem High-Pedal-Intervaframe Wir werden zu unserer Anlage gehen. Wir ziehen es hierher, wir schneiden es ab. Wir wählen diese beiden und ersetzen sie wie folgt. Okay. Also jetzt ist der erste Teil okay. Aber beim zweiten können wir hier hingehen und diesen auswählen. Und dafür können wir einfach das zweite Werk auswählen. Siehst du, es hat sich automatisch geändert. Okay. So können wir ganz einfach Komponenten für unsere Warenkorb-Bildschirmliste erstellen. Auf diese Weise haben wir unsere Komponenten und Variablen erstellt unsere Komponenten und Variablen erstellt und unser Designsystem erfolgreich für dieses Projekt entworfen. Also werde ich diese Vorlesung hier beenden und in der nächsten Vorlesung werden wir mit der Prototypenentwicklung beginnen Also werde ich diese Vorlesung hier beenden, sehen uns in der nächsten Vorlesung, bis dahin kümmere 27. Prototyping von Splash-Screens und Startbildschirmen: Hallo, alle zusammen. Willkommen zurück. In der letzten Vorlesung haben wir die Gestaltung unseres Designsystems erfolgreich abgeschlossen. Ab dieser Vorlesung werden wir mit dem Prototyping beginnen. Fangen wir also an, unser Prototyping vom Startbildschirm aus durchzuführen , Also haben wir hier einen Button. Wann immer wir also zu diesem spritzigen Bildschirm kommen, müssen wir diese Schaltfläche von links nach rechts ziehen diese Schaltfläche von links nach rechts und wir erhalten einen Willkommenstext Um dieses Prototyping durchzuführen, müssen wir also zu unserem Designsystem zurückkehren Und wir müssen dieses Prototyping hier in den Hauptkomponenten Also was wir tun werden, wir werden das auswählen. Wir werden in den Prototypmodus gehen. Also werden wir diese auswählen und zur zweiten Variante übergehen. Und hier wählen wir nach dem richtigen Weg aus, oder? Und wir wählen Smart Animation is out, es ist okay. Dann wählen wir von hier nach der Verzögerung und es wird draußen sein, also ist alles okay. Also, wenn wir zurückgehen und nachschauen, ob es perfekt funktioniert oder nicht. Dann können wir von diesem zu diesem zu unserem Startbildschirm gehen. Okay. Also jetzt, wie wir unser Prototyping überprüfen werden Also werden wir diesen Rahmen auswählen. Wir werden Shift Space drücken. Dann wird hier eine Vorschau angezeigt und wir können sehen. Also werden wir es von hier nach hier ziehen. Das kannst du sehen. Jetzt ist es willkommen, und wenn wir klicken, kehren wir zu unserem Startbildschirm zurück. Also ja, es funktioniert perfekt. Dann müssen wir auf dem Startbildschirm einige Prototypen erstellen Gehen wir also zurück zu unserem Designsystem und machen wir hier zunächst das Prototyping. Wenn wir uns also für diesen Lebensstil entscheiden, werden wir zu unserer Lifestyle-Variante übergehen Wenn wir auswählen, wann wir dieses Laufen auswählen, wechseln wir zu unserer Laufvariante. Wenn wir diesen Fußball auswählen, gehen wir zu unserer Fußballvariante über. Basketball-Variante. Und alles wird eine intelligente Animation sein. Oder wir können es sofort, sofort geben. Nicht klug. Wir werden all das dem sofortigen Übergang widmen. Es wird unser Moment sein. Es wird unser Moment sein. Also werden wir dasselbe für den Rest des Artikels tun. Okay. So weit, so gut, wir haben Prototyping 1 gemacht. Also lass uns nachschauen. Wir kehren zu unserem High FDL Dower-Rahmen Wir wählen diesen Rahmen aus und verschieben einfach die Leertaste. Und wir können sehen, dass wir dieses Ding buchstabieren können, oder? Wenn wir also diesen auswählen, wird er ausgewählt. Dieser, er wird ausgewählt. Dieser wurde ausgewählt, dieser wurde ausgewählt. Es funktioniert also perfekt. Okay, also können wir den Rest des Prototypings machen. Wir haben dieses Menü, diese untere Navigationsleiste, richtig? Also müssen wir das Prototyping dafür machen. Also wähle ich das aus. Wenn wir dieses Kartensymbol auswählen, müssen wir zu diesem gehen. Sofortig. Okay. Ja. Ja, wenn wir hier hingehen, geben wir nicht sofort nach. Wir werden das der intelligenten Animation widmen. Wenn wir hierher gehen, werden wir diese auswählen, die Smart-Animation. Dieser wählt diesen für die Smart-Animation aus. Machen wir also dasselbe für den Rest dieser Option. Mm hmm. Mm hm. Mm. Also wähle ich wieder diesen Startbildschirm, den geformten Raum. Also, das haben wir schon gemacht, richtig. Lassen Sie uns jetzt überprüfen, ob wir diesen auswählen. Eins. Dieser funktioniert perfekt, oder? Und dann müssen wir dafür unser Prototyping machen. Wir werden diesen Artikel auswählen und zu diesem Produktdatenbildschirm wechseln Okay. In diesem Vortrag haben wir also unser Prototyping für den Startbildschirm und den Startbildschirm durchgeführt für den Startbildschirm und den Startbildschirm In der nächsten Vorlesung werden wir unser Prototyping für den Rest des Bildschirms durchführen. Also bis dahin, pass auf dich auf Tschüss. 28. Produktdetails Bildschirmprototyping: Jeder. Willkommen zurück. In der letzten Vorlesung haben wir diesen Prototyp für die untere Navigationsleiste entworfen. Und jetzt in dieser Vorlesung werden wir versuchen, diese Komponente zu entwerfen, oder wir werden versuchen , unser Prototyping auf diese Komponente anzuwenden Fangen wir also an. Also bevor wir weitermachen, müssen wir all diese Varianten umbenennen, oder? Also sollte die erste Variante als 38 benannt werden. Dieser sollte den Namen 39 haben. Okay, was wir jetzt tun werden, werden wir zu unserer Prototypen-Stimmung übergehen Wann immer wir diese 39 auswählen, sollten wir zu dieser wechseln 40, wir sollten zu dieser 40 übergehen und sie auf Instant ändern. Auch bei dieser sollten wir sie auf Instant umstellen. Okay, dann sollte 41 uns zu diesem bringen. 42 sollte uns zu diesem führen. 43 sollte uns dazu führen. 44, dieser, 45, dieser. Okay, dann diese zweite Reihe. Om hmm. Mmm. Also haben wir unser Prototyping für diese Elemente gemacht und mal sehen, wir werden zu unserem High-Fid-Tier-Frame zurückkehren Wir werden zu unserer Anlage gehen. Und wir wählen diesen aus. Wir werden es schneiden und wir werden es ersetzen. Ich werde es einfach ersetzen. Ich werde die Größe ändern Ich werde zum Prototyping gehen, und es ist bereits horizontal scrollbar Also werde ich jetzt überprüfen, ob es perfekt funktioniert Also verschiebe den Raum. Also kannst du das scrollbar sehen und wir können jedes davon auswählen, richtig? Also ja Also werde ich diesen Vortrag hier beenden. Wir werden ab der nächsten Vorlesung mit der Prototypenentwicklung für die restlichen Elemente Also bis dahin, pass auf dich auf. Tschüss. 29. Vollständige Produktdetails Bildschirmprototyping: Jeder, willkommen zurück. In der letzten Vorlesung haben wir unser Prototyping für diese Elemente durchgeführt Nun gehen wir zu unserem hohen Fetalhirnkörper und wir können sehen, dass wir für dieses Exemplar Prototypen entwickelt haben In dieser Vorlesung werden wir also versuchen, das Prototyping für die restlichen Elemente durchzuführen Also gehen wir in den Prototyping-Modus. Nachdem wir auf die Bestätigungsschaltfläche geklickt haben, gehen wir zu dieser über, oder? Lass uns sehen. Haben wir Prototypen auf diese Knöpfe angewendet? Nein. Also lass uns zurückgehen. Wann immer wir das auswählen, sollten wir zu diesem übergehen. Es sollte unsere intelligente Animation und unser Hover sein, ja. Wenn wir schweben, während wir schweben. Ja. Das Gleiche werden wir für den Rest der Tasten tun. Beim Schweben. Intelligente Animation? Okay. Sie sollten so sein. Während Hering. Intelligente Animation. Okay. Also lass uns jetzt zurückgehen. Also haben wir Prototypen für diesen, diesen gemacht, und jetzt müssen wir das Prototyping für diesen Farbbereich anwenden , richtig? Also was ich tun werde, wir müssen zwei weitere Seiten mit Varianten für diese Produktdetailseite erstellen zwei weitere Seiten Varianten für diese Produktdetailseite Also werde ich diese beiden ein wenig verschieben. Ich werde das 12 mal duplizieren, eins , zwei, ein bisschen mehr. Okay, also was ich tun werde, wann immer wir das bekommen, müssen wir zu dieser Seite oder zu diesem Bildschirm wechseln. Okay? Es sollte unser Moment sein. Okay, so weit, so gut. Und wann immer wir auf diesen klicken, diesen schwarzen, sollten wir zu diesem gehen. Jetzt müssen wir also die Schuhfarbe und den Schuhtyp ändern , alles, richtig? Also werde ich diesen Schuh wechseln. Also, was wir jetzt tun können, wir können das alles löschen. Also werde ich diesen Schatten hier ein wenig trennen. Ich werde diesen, diesen und diesen löschen . Jetzt werde ich zu unserem Asset gehen. Ich werde diesen auswählen. Ich werde die Größe anpassen. Ich werde diesen auch hier anpassen, mal sehen, ob er unter diesem Produktbildschirm ist. Okay. Also jetzt sieht es gut aus. Also für diesen werden wir tatsächlich die Farbe ändern. Also werden wir diese Farbe so ändern, und wir werden diese Farbe so ändern, vielleicht etwas dunkler. Okay. Jetzt wählen wir den blauen Schuh aus. Ich werde hierher gehen. Ich gehe zu diesem und ziehe es einfach hierher. Mal sehen, wie groß dieser 377, 308 ist. Also 377308. Okay. Und wir werden diesen Schatten einfach von hier nach hier ziehen, können wir? Ich kopiere einfach diesen Schatten. Und ich werde ihn hier einfügen. Okay. Also ist es gut. Ich werde es auch hier einfügen. Und für diesen können wir die Farbe auf Schwarz ändern. Dieser sollte schwarz sein und dieser sollte auch schwarz sein. Ordnung. Also werden wir jetzt unseren schwarzen Schuh wählen. Also hier ist unser schwarzer Schuh. Die Größe wird 377 und 308 sein. Okay. Ich finde, es sieht ein bisschen groß aus, also werde ich es etwas weiter verkleinern. Okay, so weit so gut. Also, wann immer wir auf diesen klicken , gelangen wir zu diesem Frame oder zu diesem Bildschirm. Immer wenn wir auf diesen klicken , gelangen wir zu diesem Bildschirm. Also sollten wir hier dasselbe tun. Also werde ich, was ich tun werde, ich werde es einfach hierher verschieben. Ich werde es dieser Farbe geben und diesem, ich werde es dieser Farbe geben. Okay. Bedeutet, dass es hier ausgewählt ist. Das Gleiche werde ich tun, ich werde es dieser schwarzen Farbe geben. Ich werde es dieser blauen Farbe geben, und ich werde es dieser grünen Farbe geben. Okay. Also, was wir jetzt tun werden, werden wir auch hier Prototyping anwenden Wenn wir das auswählen, gehen wir zu diesem Frame Wenn wir Schwarz auswählen, sollten wir uns auf diesem Bildschirm befinden. Wenn wir diesen Bildschirm auswählen, sollten wir zu diesem Bildschirm wechseln. Dieses Blau sollte zu diesem Bildschirm führen. Okay, so weit, so gut. Jetzt sind wir fast fertig mit dem Prototyping, und endlich können wir Prototyping anwenden, Prototyping auf diese Zurück-Schaltfläche anwenden, auch auf den Zurück-Pfeil , wo unser Zurück-Pfeil ist Dieser ist unser Rückpfeil. Wenn wir darauf klicken, sollten wir also auf die gleiche Weise zum Startbildschirm wechseln. Wenn wir dies auswählen, sollten wir zu diesem Startbildschirm gelangen. In Ordnung. die gleiche Weise müssen wir dann das Prototyping für diese Bestätigungsschaltfläche durchführen Wann immer wir also endlich auf die Bestätigung klicken, sollten wir zum Startbildschirm zurückkehren , zum Startbildschirm zum Startbildschirm zurückkehren Wir sind also fast fertig mit dem Prototyping. Also lass uns das jetzt überprüfen Ich wähle einfach den Startbildschirm aus und drücke Shift Space. Und nehmen wir an, wir haben diese Karte ausgewählt, dann werden wir zu diesem Produktionsdatenbildschirm weitergeleitet. Jetzt kann ich die Größe und die Farbe auswählen. Und es bestätigt. Okay. Also jetzt funktioniert es perfekt. Jetzt wähle ich das alles nochmal aus und trage Horogen auf das Ganze auf Okay. Also werde ich diese Vorlesung hier beenden, und ab der nächsten Vorlesung werden wir unser Prototyping von hier aus fortsetzen Also bis dahin pass auf dich auf. Tschüss. 30. Prototyping von Kartenkomponenten: Alle zusammen, willkommen zurück. In der letzten Vorlesung haben wir Prototypen für unseren Bildschirm mit Produktdetails erstellt Jetzt müssen wir also die Prototypen für diese Karten, diese speziellen Karten und unseren Kartenbildschirm machen, richtig Also werden wir anfangen unser Prototyping anhand der Hauptkomponenten durchzuführen Wir können uns also auf zwei Arten mit den Hauptkomponenten befassen Wir können das Designsystem wählen, oder wir können dieses auswählen. Und hier können Sie sehen, dass wir zur Hauptkomponente gehen können. Wenn wir dies auswählen, werden wir zur Hauptkomponente weitergeleitet Jetzt werden wir unser Prototyping darauf anwenden. Also jetzt, was wir tun werden. Ich werde diesen einfach kopieren, ihn hier und auch hier ersetzen. Richtig? Was wir nun tun werden, wo auch immer wir sind, wie Sie sehen können, haben wir bereits unsere lokalen Variablen erstellt. Wenn Sie feststellen, dass wir Produkte haben. Wir haben Produkte, Kollektionen. Wir haben bereits unsere lokalen Variablen erstellt. Was wir also tun werden, wenn wir diese Zeichen auswählen oder wann immer wir darauf klicken, müssen wir eine Interaktion erzeugen Wir müssen durch eine gewisse Interaktion fertig werden. Also werde ich diesen Bericht auswählen, um die Variable festzulegen. Und wir müssen die Anzahl unserer Artikel erhöhen. Also Artikelzahl die Artikelanzahl plus eins, richtig? Also haben wir unsere Addition genauso vorgenommen , wie wir es für diese tun müssen. Also Interaktion, Variable setzen, Artikelanzahl, Artikelanzahl, Subtraktion minus eins, richtig? Aber hier ist der Leckerbissen. Wenn wir auf das Minus klicken , gelangen wir möglicherweise zur Anzahl der Elemente mit dem Minuswert. Also müssen wir es einschränken, oder? Also müssen wir eine Bedingung stellen. Also werden wir eine Bedingung anwenden, also gehen wir hier hin, wir wenden eine Bedingung an, wenn unsere Artikelanzahl größer als Null ist, richtig? Wenn unsere Artikelanzahl größer als Null ist, können Sie diese Zellvariable anwenden. Also werde ich es einfach hier knacken. Also lass uns das jetzt überprüfen. Wir gehen zu unserem Türrahmen mit hohem Futtereingang. Wir können jetzt sehen, ob wir diese Schichtbasis wählen, ob Sie das Plus, sehen und Minus minus Minus sehen. Aber wenn Sie erneut darauf klicken, aber es geht nicht zurück, weil wir eine Bedingung gesetzt haben. Es funktioniert also perfekt. Also, was wir jetzt tun werden , müssen wir für unser Auto variabel einstellen, richtig? Also werden wir hier weitermachen, lokale Variablen. Wir müssen zu unserer Kartensammlung gehen. Hier müssen wir eine weitere Variable erstellen, die jetzt unsere Karte C sein wird jetzt unsere Karte C Wir werden hier und hier weitermachen. Wenn du hier siehst, doppelklicken wir auf diese Zahl. Wir werden die Kartenanzahl anwenden. Wir müssen unsere Kartenanzahl hier anwenden. Aber wie können wir all diese Artikelzahlen insgesamt berechnen all diese Artikelzahlen und dies auf unserer Kartenanzahl ausweisen Dafür müssen wir unsere Bedingung auf die Plus-Schaltfläche anwenden , oder? Also lass uns zurückgehen. Was wir jetzt tun werden, wir werden hierher gehen. Jetzt werden wir wieder eine Variable setzen und dieses Mal ist es für unsere Kartenanzahl, Kartenanzahl. Ist eigentlich Artikelanzahl, Artikelanzahl plus Artikelanzahl plus Artikelanzahl. Und diese Artikelzahl ist tatsächlich der erste Artikel. Dies ist der zweite. Das ist das dritte und das ist das vierte, da wir vier Elemente oder vier Karten auf unserem Bildschirm haben , richtig? Also das Gleiche werden wir für unseren Minus-Zustand tun. Wir werden eine Variable setzen. Diesmal bezieht sich unsere Variable auf die Kartenanzahl. Es entspricht unserer Artikelanzahl plus Artikelanzahl plus Artikelanzahl plus Artikelanzahl Das gleiche Web, erster Artikel, zweiter Artikel, dritter Artikel und vierter Artikel, richtig? So weit so gut. Also lass uns nachschauen. Wenn wir uns in unserem Home-Screen Shift-Bereich befinden, nehme ich an, Sie haben bemerkt, dass sich eins ändert, zwei, drei, vier, fünf, sechs. Wenn wir jetzt minus fünf, vier einrichten , dann funktioniert es perfekt. Richtig? Wenn wir also endlich auf diesen klicken, sollten wir zu unserem Kartenbildschirm gelangen. Das alles. Okay, wir haben also getippt. Also werde ich diesen Vortrag jetzt hier beenden. In der nächsten Vorlesung werden wir sehen, wie wir diesem Kassettenbildschirm Prototyping spielen können Also werde ich diese Vorlesung hier beenden , wir sehen uns in der nächsten Vorlesung Bis dahin, pass auf dich auf. Tschüss. 31. Prototyping von Warenkorbbildschirmen: Alle zusammen, willkommen zurück. In der letzten Vorlesung haben wir unser Prototyping für diese Teile durchgeführt Jetzt werden wir mit dem Op-Prototyping für unseren Kartenbildschirm beginnen Op-Prototyping für unseren Kartenbildschirm Zuerst werde ich diese Nummer mit unserer Kartenanzahl verknüpfen. Ja. Und dann wähle ich diese Karte draußen und füge diesen Dingern zwei weitere Primzahlen hinzu. Es tut mir leid Okay, jetzt werde ich es in der Mitte platzieren und den Rahmen anpassen und ich werde ihn von hier aus ändern. Für diesen werde ich diesen schwarzen wählen. Und ich wähle den für diesen, ich wähle den blauen. Ich wähle das, ich wähle. Okay, so weit so gut. Und was ich tun werde, ich werde diese Rahmenseite anpassen , auf den Inhalt klicken. Ich werde es hierher bringen. Du schaffst es. Nun, was wir tun werden, wenden wir hier unsere Variablen an, die booleschen Für diesen werde ich hierher gehen. Ich werde mit der rechten Maustaste auf dieses Symbol klicken und ich werde anwenden, dass es leer ist. Ich gehe hier hin, wir bewerben uns bei zwei Karten, weil sie falsch sind, also wird sie hier nicht angezeigt. Für diese Karte klicken Sie also mit der rechten Maustaste auf zwei Karten. Jetzt können wir sehen, dass kein Element hinzugefügt wurde, sodass es nicht angezeigt wird, und wir müssen weitere Variablen in unserer Kartensammlung erstellen. Das wird unsere Gesamtzahl sein, die Null ist. Ich werde mich auf diesen Text oder die Gesamtvariable beziehen. Jetzt müssen wir diese Kartenliste von unserer Hauptkomponente aus steuern . Also gehen wir zurück. Gehen wir zur Prototyping-Stimmung über. Und wenn wir auf unser Plus-Symbol klicken, müssen wir die Variable setzen , mit der wir zwei Karten hinzugefügt Entschuldigung, zwei hinzugefügte Karten sollten wahr oder falsch sein, oder? Und wir müssen eine weitere Variable setzen. Unser Wert „leer“ sollte falsch sein , weil wir dieses leere Kartenelement nicht haben wollen. Also müssen wir in unserem Minus-Zustand dasselbe tun. Wenn wir also auf unser Minus stoßen, müssen wir uns daran erinnern, dass, wenn unsere Artikelanzahl gleich Null ist und unsere Artikelanzahl gleich Null ist, unser Wert, der zur Karte hinzugefügt wurde, falsch sein sollte, oder? Wir sollten diese Karte nicht verpassen, eine bestimmte Karte. Eine weitere Variable, die wir hinzufügen müssen, ist unsere Gesamtkarte. Unsere Kartenanzahl entspricht dem O. Dann ist es leer. Unsere leere Angabe sollte nicht wieder wahr sein. Wir sollten unser leeres iPhone vorzeigen. Mal sehen, ob es perfekt funktioniert oder nicht. Also kehren wir zu unserem High-Fidelity-Frame zurück. Also, wir können uns hier um diese Homizel bewerben. Mm hmm. Und endlich können wir das anwenden denn jetzt prüfen , ob es einwandfrei funktioniert oder nicht Also gehe ich hierher, Shift Space. Lassen Sie uns zunächst sehen, dass wir, wenn wir das überprüfen, kein Objekt zur Cloud hinzugefügt haben , also gehen wir zurück. Wenn wir dies auswählen, können Sie sehen, dass ein Element hinzugefügt wurde. Wenn wir dieses C auswählen, werden drei Elemente hinzugefügt. Wenn wir nun auf diesen klicken, wird er gleich Null sein, oder? Die Anzahl der Kurvenelemente wird Null sein. Es wird also verschwinden. Sieht Vanish. Das ist Vanish Siehst du, es sind zwei, das ist Ngansh und dieses Symbol wird angezeigt. Es funktioniert also perfekt. Was wir jetzt tun müssen, müssen wir den Preis aller Artikel berechnen und in der Summe angeben. Also lass es uns tun. Also gehen wir wieder hierher zurück. Und in der Klasse werden wir, was wir tun werden, unsere Variable setzen. Und dieses Mal ist es unsere Summe, oder? Es ist also unsere Summe. Und diese Summe ist eigentlich unsere Artikelanzahl, multipliziert mit Preis plus Artikelanzahl, multipliziert mit Preis, plus ich zähle, multipliziere plus, tut mir leid, ich zähle, multipliziere mit dem Preis. Wir müssen es viermal machen. Warum? Weil wir vier Artikel haben, oder? Der erste wird also dieser eine sein , der Preis wird der erste sein, der zweite. Also dritter, dritter, vierter und vierter. Da wir jetzt diese Berechnung haben. Wir müssen dasselbe für R minus tun. Also, weißt du, geh hierher und setze unsere Variable für die Summe. Okay. Also lass uns das jetzt überprüfen. Jetzt werden wir hierher gehen und Shift Space drücken. Wenn wir dann sehen, dass keine Elemente ausgewählt sind, ist die Summe also Null. Wir können einen Artikel, zwei Artikel, drei Artikel oder Artikel hinzufügen , wir können hier hin. Wir können sehen, dass es perfekt angezeigt wird. Nehmen wir an, das ist so, das ist die Summe davon. Wenn wir das nicht wollen, dann die Summe davon. Wenn wir nichts wollen, können wir wieder Itans Wiens hinzufügen und bestätigen, dass wir uns auf den Weg zum Five Hoar Squad Endlich können wir das zu unserem Heimatplatz hinzufügen. Also ja. Also werde ich diesen Vortrag hier beenden. In der letzten Vorlesung werden wir sehen, wie unser finaler Prototyp aussehen wird. Also werde ich diesen Vortrag bis dahin hier beenden. Tschüss. 32. Endgültige Prototypenerstellung: Hallo, alle zusammen. Willkommen zurück. In der letzten Vorlesung haben wir unser Prototyping für alle Bildschirme abgeschlossen unser Prototyping für alle Bildschirme In dieser Vorlesung werden wir nun sehen, wie unser endgültiger Prototyp aussehen wird und wie diese Anwendung tatsächlich funktioniert Also werde ich das auswählen. Ich gehe in den Prototyping-Modus und wähle die Klasse Jetzt können wir sehen, dass wir einen schönen Begrüßungsbildschirm haben. Jetzt ziehe ich es einfach von hier nach hier. Wir haben eine Willkommensnachricht erhalten. Ich werde es anklicken. Wir werden zu unserem Startbildschirm wechseln. Angenommen, ich habe diesen ausgewählt. Ich möchte die Details dieses Artikels sehen. Ich werde das auswählen. Wir können die Details sehen. Wir können die Farbe ändern. Wir können die Größe wählen. Wir werden finanzieren. Und wenn wir zu unserer Karte gehen, haben wir bis jetzt keine Artikel hinzugefügt Also werden wir jetzt unseren Artikel hinzufügen. Wir können also von hier aus Artikel hinzufügen, und wir haben eine interaktive untere Navigationsleiste. Siehst du? Was wir jetzt tun werden, wir werden Artikel hinzufügen. Also werde ich diesen hinzufügen, diesen, diesen, diesen. Und wenn wir hier hingehen, können wir sehen, dass wir unsere Artikel hinzugefügt haben. Also vielleicht fügen wir diesen auch hinzu. Wir können sehen. Wir haben eine Gesamtskala. Wir haben zwei Schichten, nehmen wir an, ja, dann können wir das bestätigen. Okay. Unsere Bestellung wurde erfolgreich aufgegeben. Wir können zu unserer Vorführung zurückkehren. Das ist es. So wird unser finaler Prototyp aussehen, und so werden unsere Apps funktionieren. Das war also unser ganzes Projekt, und ich hoffe, Ihnen hat dieses Projekt gefallen und Sie haben gelernt, wie wir eine komplette Schuhladen-Anwendung von Grund auf neu entwerfen, fortgeschrittene Prototypen erstellen und ein interaktives Designsystem erstellen können eine komplette Schuhladen-Anwendung von Grund auf neu fortgeschrittene Prototypen erstellen und ein interaktives Designsystem erstellen Also werde ich diese Serie beenden, von der ich hoffe, dass sie Ihnen viel Spaß gemacht hat. Also bis dahin pass auf Wiedersehen auf Wiedersehen.