Figma 2025 meistern: Web- und Mobile-App-Design von Grund auf

1. Kurs-Promo: Nein , ja. Hallo, Designer. Willkommen zur Figma-Meisterklasse. Ihre schrittweise Anleitung zur Beherrschung von Figma und zur Verbesserung Ihrer Designfähigkeiten Als ich vor vielen Jahren anfing, Figma zu verwenden, wusste ich nicht, wie ich jedes Tool, das es zu bieten hat, optimal nutzen sollte, und manchmal brauchte ich Stunden, um eine einfache Seite zu entwerfen Nach vielen, vielen Stunden, in denen mir Tutorials angesehen, an der Konfiguration teilgenommen, experimentiert und meine Fähigkeiten verfeinert hatte, habe ich alles in einem Kurs mit den neuesten Updates und Funktionen Nima Tahami. Ich bin dein Lehrer für diesen Kurs In den letzten mehr als 12 Jahren habe ich Dutzende erfolgreicher Produkte entwickelt und entworfen. Im Laufe der Zeit hatte ich auch das Glück, mehr als 15.000 Designern beizubringen und ihnen zu helfen, intelligenter und nicht härter mit FigMA zu arbeiten In diesem Kurs werden wir nun eine Reisebuchungs-App von Anfang bis Ende entwerfen eine Reisebuchungs-App von Anfang bis Ende Sie werden lernen, wie man Wireframes erstellt, Komponenten erstellt, das automatische Layout nutzt sogar Variablen und Prototyping-Funktionen beherrscht , um eine komplette App zusammenzustellen . Übrigens werden wir Figma AI nutzen, um erste Entwürfe, Bilder und Texte zu generieren, was uns Texte das Entwerfen ein Am Ende dieses Kurses werden Sie die Besonderheiten von FGMA kennen und die Fähigkeiten erwerben, um schneller zu entwerfen und Designs vertrauensvoller an Ihre Teammitglieder, Kunden usw. zu liefern vertrauensvoller an Ihre Teammitglieder, . Dieser Kurs richtet sich an Designer, die wachsen möchten, die in das Produktdesign oder ihr Handwerk und Design schneller und intelligenter verfeinern möchten ihr Handwerk und Design schneller und intelligenter Also, wenn das nach dir klingt, dann spring gleich rein und wir sehen uns im Kurs. 2. Einführung: Hallo zusammen. Willkommen zum Kurs. Sie haben heute einen großen Schritt gemacht, um das nächste Level in Ihrer Designkarriere indem Sie Ihre Figma-Fähigkeiten verbessert haben, und ich kann nicht ausdrücken, wie sehr ich mich freue , Sie in diesem Kurs zu haben In diesem Kurs lernen Sie die neuesten Funktionen von FigMA kennen, darunter UI Three, FGM AI und all die anderen Tools , die es bereits bietet, wie Komponenten, automatisches Layout, Variablen, erweitertes Prototyping, erweitertes Prototyping, Um diese Tools und Konzepte zu erlernen, werden wir dies in der Praxis tun und gleichzeitig eine echte Web- und Mobil-App zusammenstellen Diese App ist eine Reisebuchungs-App namens Wander Wise. Es ist ein fiktiver Kunde, aber es ist super aufregend und definitiv einer, den Sie nach diesem Kurs in Ihr Portfolio aufnehmen können nach diesem Kurs in Ihr Portfolio aufnehmen gehen wir die Schritte in diesem Kurs durch und beginnen mit den Grundlagen Nun, ich empfehle jedem, dies durchzugehen, auch wenn Sie über Figma-Kenntnisse verfügen, nur um alle kleinen Details aufzufrischen die Sie möglicherweise nicht über die neuen Benutzeroberflächenfunktionen wissen Wir werden dann zum Wireframing übergehen. Also verwenden wir ein iPad, Stift und Papier oder sogar Figma selbst, um Wireframes für die Bildschirme für unser Projekt zusammenzustellen Wireframes für die Bildschirme für unser Projekt zusammenzustellen Einrichtung eines Designsystems, der Verwendung von Variablen und dem Stil für Farbe und Schrift fortfahren Verwendung von Variablen , werden wir dann mit der Erstellung unserer ersten Modelle in Figma beginnen und unseren gesamten Buchungsablauf von Anfang bis Ende gestalten, von der Anmeldung bis zum Abschluss einer Buchung in der Reise-App Abschluss einer Buchung in der Reise-App Wir erstellen eine mobile Version und lernen, wie man responsive Designs erstellt, bevor wir dann mit der Erstellung Ihres Prototyps beginnen Dann nehmen wir unseren Prototyp erweitern ihn mit Variablen, intelligenten Animationen usw., sodass Sie ihn mit Ihren Freunden und Kollegen teilen und ihnen zeigen können , wie cool eine App ist, die Sie erstellt haben. unserem letzten Abschnitt erfahren Sie, wie Sie in Figma intelligenter arbeiten und besser mit Teammitgliedern zusammenarbeiten können Lassen Sie uns nun mit unseren Figma-Grundlagen beginnen und von dort aus weitermachen 3. Erste Schritte : Gehen Sie zu figma.com um ein Konto zu erstellen, falls Sie noch keines haben Gehen Sie weiter und melden Sie sich an oder wenn Sie sich bereits angemeldet haben, sollten Sie dann zu Ihrer Homepage weitergeleitet werden , die ungefähr so aussehen könnte Jetzt befinden Sie sich möglicherweise im Ordner „Resents“ oder „Drafts“. Das ist völlig in Ordnung. Von hier aus können Sie Ihre Dateien erkunden. Nun, eine Sache, die ich empfehle, ist, wenn Sie Desktop-Apps auf Ihrem Computer verwenden möchten, Sie können weitermachen und im Menü hier oben auf Desktop-App herunterladen klicken . Für den Rest des Kurses werde ich die Desktop-App von Figma verwenden Es ist ziemlich identisch. Es gibt keinen großen Unterschied zwischen ihnen. Wenn Sie über die Desktop-App verfügen, sind einige Optionen jedoch sind einige Optionen über das Menü oben zugänglich. Wenn Sie lieber mit Desktop fortfahren möchten, hier eine Pause und laden Sie diese App herunter. Andernfalls können Sie gerne im Browser fortfahren. Von oben sehen Sie Ihr Profil, dem Sie sich bei mehreren Konten anmelden können. Sie sehen hier eine Benachrichtigungsglocke, die Ihnen alle Aktivitäten anzeigt , die in Ihren Dateien stattfinden. Normalerweise beginnen wir im Entwurfsordner , wenn wir neue Projekte starten. Sie können ein neues Projekt erstellen, Sie können ein neues Projekt erstellen indem Sie hier oben auf Neu erstellen klicken Wenn Sie jetzt auf den Abwärtspfeil klicken, können Sie eine andere Art von Projekten erstellen Wenn du an einem FIC Jamboard oder einem Slidedeck arbeitest, kannst du das auch von hier aus tun Wenn du aus einer FIC-Punkt-Datei importierst , die du hast oder sogar skizziert hast, kannst du auch importieren, indem du hier klickst. Sie werden aufgefordert, alle Skizzendateien, Bilder, PDFs usw. abzulegen , um sie Ihren Entwürfen hinzuzufügen Sie können Ihre Dateien anders organisieren, indem sie als Liste oder als Raster Mir persönlich gefällt die Rasteroption ein bisschen besser. Und auf der linken Seite siehst du verschiedene Teams , denen du angehörst. Jetzt kannst du hier jederzeit neue Teams erstellen, aber das ist nicht notwendig. Ich werde hier und in meinem Entwurf mit der Clover School weitermachen Ich kann entweder von hier aus eine neue Datei erstellen , indem ich auf Plus klicke, oder erneut, von hier oben, kann ich eine neue Datei erstellen Von hier unten aus können Sie auch die Community erkunden, über die Sie auf die Dateien zugreifen können, die von anderen Figma-Benutzern geteilt werden Dazu gehören Dinge wie Folien, Designressourcen, Plugins usw., auf die wir im Kurs näher eingehen Im Moment klicke ich auf Neue Datei erstellen, Datei entwerfen, und das bringt uns zu einer neuen Datei. Und wieder mache ich weiter und mache in der Desktop-App weiter, öffne dieselbe Datei und komme im nächsten Abschnitt zurück, um mehr über die verschiedenen Bedienfelder zu erfahren 4. Dateilayout: Wir sind in einer neuen Datei. Lassen Sie uns untersuchen, worauf wir Zugriff haben. Ausgehend von der linken Leiste hier drüben. Das Wichtigste zuerst, falls du merkst, dass meine Figma im Dunkelmodus ist Dies ist meine Präferenz für Verwendung von Figma im Dunkelmodus, beginnend hier oben links Sie erhalten Zugriff auf das linke Bedienfeld von wo aus Sie auf die FIGMA-Menüoptionen zugreifen können FIGMA-Menüoptionen zugreifen Sie können auf Ihre Dateioptionen zugreifen und beispielsweise die Datei duplizieren, Dateien umbenennen, verschieben oder löschen Sie können Ihrer Datei einen solchen Titel geben und sehen, wo sich Ihre Datei Im Moment befindet sie sich in meinem Entwurfsordner. Direkt darunter sehen Sie zwei Tabs. Sie können entweder zwischen der Registerkarte „Datei“ oder der Registerkarte „Assets“ wechseln. Jetzt gehen wir zum Tab „Assets“ und erfahren, wie Sie von dort aus auf Ressourcen zugreifen können. Einfach ausgedrückt: Sie erhalten Zugriff auf Ressourcen, auf die Sie Zugriff haben. Von hier aus können Sie die vorhandenen Designsystemkomponenten sowie andere Komponenten, die Sie zu Ihren Projekten hinzugefügt haben, durchsuchen Designsystemkomponenten sowie andere Komponenten, die Sie zu Ihren Projekten hinzugefügt haben, zu Ihren Projekten hinzugefügt z. B. die, die Figma Ihnen bereits zur Verfügung stellt In der Datei können Sie die Seiten sehen , die Sie in Ihrem Design haben Ihre Designs können beliebig viele Seiten haben, indem Sie hier auf dieses Plus-Symbol klicken und neue Seiten hinzufügen. nun unter Ihrem Ebenenbedienfeld beginnen, Wenn Sie nun unter Ihrem Ebenenbedienfeld beginnen, Dinge auf der Leinwand hinzuzufügen, werden sie im Ebenenfenster angezeigt. Nur als Beispiel werde ich ein Rechteck erstellen, indem ich R auf meiner Tastatur drücke und hier ein Rechteck zeichne Wie Sie sehen können, wird es in meinem Ebenenfenster angezeigt . Wenn ich nun dieses Rechteck einrahme, indem ich F drücke und den Rahmen darum ziehe, können Sie sehen, dass indem ich F drücke und den Rahmen darum ziehe, hier in meinem Ebenenbedienfeld eine Hierarchie platziert wird , wo wir einen Rahmen mit einem Rechteck darin haben . Jedes Mal, wenn Sie Ebenen mit Einrückungen sehen, bedeutet das, dass Sie sich unmittelbar neben einer anderen Ebene wie diesem Rahmen einen Rahmen auswählen, können Sie jederzeit Dinge wie diesen Text hinzufügen Dinge wie diesen Text Sie können jederzeit Dinge außerhalb von Frames oder zurück in die Frames selbst verschieben . Ich habe Tastenkombinationen verwendet, aber wenn Sie auf alle Tools zugreifen möchten , auf die Sie in Figma Zugriff haben, können Sie das über die Werkzeugleiste hier unten tun Über die Werkzeugleiste haben Sie Zugriff auf mehrere Verschiebewerkzeuge wie das standardmäßig ausgewählte MVTol, dem Sie Dinge verschieben können Handwerkzeug, wenn Sie nur stöbern möchten, aber nicht versehentlich Dinge verschieben möchten Und ein Skalierungswerkzeug, wenn Sie Objekte skalieren möchten, was wir im Laufe des Kurses tun werden. Ich werde zum Verschieben-Tool wechseln. Und von hier aus haben Sie Zugriff auf den Rahmen, um Rahmen , also Container für Ihre Designs, sowie Abschnitte und Folien zu erstellen , also Container für Ihre Designs, . Direkt daneben finden Sie mehrere Formwerkzeuge, von Rechtecken bis hin zu Ellipsen und Es gibt ein Stiftwerkzeug, wenn Sie benutzerdefinierte Formen erstellen möchten, und ein Textwerkzeug, mit dem Sie Ihren Projekten Text hinzufügen können Wenn Sie die Registerkarte oder das Bedienfeld „ Kommentare“ öffnen möchten. Sie können das von hier aus tun, und hier finden Sie das Aktionsfenster, das Sie auch öffnen können, indem Sie Command K auf Ihrer Tastatur oder Control K unter Windows drücken. Von hier aus erhalten Sie Zugriff auf einige KI-Funktionen, wieder auf Ihre Ressourcen sowie auf Plugins und Widgets. Wann immer Sie mit Entwicklern zusammenarbeiten, möchten sie wahrscheinlich den Entwicklungsmodus verwenden, also können sie das tun, indem sie hier in den Entwicklungsmodus wechseln Wir werden uns später mit DevMode befassen. Im Moment verschaffen wir uns nur einen Überblick . Jetzt enthält die rechte Seite alle Eigenschaften Ihrer Objekte. Was auch immer Sie auf Ihrer Leinwand auswählen, Sie können die Eigenschaften auf der rechten Seite sehen. Und im Moment haben wir keine Stile. Andernfalls würden sie auch hier auftauchen. Von hier aus können wir die Farbe der Leinwand selbst steuern, sie heller oder dunkler machen. Und ich kann von hier aus auch jederzeit zu den Einstellungen des Prototyps gehen . Sobald Sie ein Element in Ihrem Frame ausgewählt haben, haben Sie hier Zugriff auf viel mehr Optionen, angefangen bei der Position. Wo sich dieses Objekt innerhalb des Rahmens befindet, haben Sie auch Zugriff auf Beschränkungsoptionen, Layoutoptionen, also die Größe dieses Elements, zum Beispiel das Aussehen, die Füllung, also die Farbe, Kontur, Effekte und Exportwerkzeuge, um dieses Rechteck von hier aus zu exportieren Wenn ich nun den Text auswähle, stehen mir hier etwas andere Optionen zur Verfügung , z. B. Typografieoptionen Jetzt werden wir all das untersuchen und wir werden es in unserem Kurs häufig verwenden Seien Sie also gespannt, wie Sie alle Optionen nutzen können, auf die Sie Zugriff haben. Lassen Sie uns nun in der nächsten Vorlesung zurückkommen , um mit unserem Projekt zu beginnen. 5. Unser Projekt starten: Die Grundlagen sind aus dem Weg geräumt. Denken Sie jetzt daran, dass wir, wenn wir mit der Arbeit an unserem Projekt beginnen , eine Menge mehr über all die Tools, Plugins und Komponenten usw. lernen über all die Tools, Plugins und Komponenten usw. werden, während wir das Projekt durchführen. Deshalb springen wir jetzt direkt in unser Projekt, damit wir am meisten lernen können. Hier drüben habe ich ein Dokument mit Produktanforderungen geöffnet. Das ist normalerweise das, was ein Unternehmen ein Kunde oder Ihr Produktmanager in einem Unternehmen, in dem Sie arbeiten, mit Ihnen teilen würde , wenn es ein neues Projekt gibt, an dem Sie arbeiten müssen. Für diesen Fall haben wir ein Projekt namens Wander Bye Wander Boise ist eine Web-App, mit der Benutzer Reisen auf der ganzen Welt entdecken und buchen konzentriert sich auf ein nahtloses Benutzererlebnis und eine intuitive Benutzeroberfläche und hilft Benutzern dabei, Manda Boye konzentriert sich auf ein nahtloses Benutzererlebnis und eine intuitive Benutzeroberfläche und hilft Benutzern dabei, ihre Traumurlaube zu finden, zu planen und zu buchen. Ziemlich einfach. Wir haben eine App, eine Reise-App, die eine Web-App ist. Ziel dieser Plattform ist es, Benutzern die Möglichkeit zu geben, spannende Ziele zu erkunden, ihre Reisen individuell zu gestalten und ihre Buchungen zu verwalten. Im Wesentlichen erstellen wir eine Plattform für die Buchung von Reisen. In diesem Dokument mit den Produktanforderungen gibt es in der Regel einen Überblick, ein Ziel und dann gibt es Kernfunktionen und Seiten, die wir entwerfen müssen. Sie können es natürlich in den Ressourcen herunterladen , um es genauer durchzugehen. Nur auf oberster Ebene benötigen wir einige Seiten zur Benutzerauthentifizierung, eine Onboarding-Seite, eine Profilverwaltungsseite und die Zielerkennung. Ich glaube, die Zielerkennung. Ich glaube das ist der Hauptbildschirm, auf den Benutzer schauen werden weil sie dort Reisen finden, die sie unternehmen mit der Option, nach Preis, Ort, Aktivität, Art usw. zu filtern Ort, Aktivität, Art usw. Wir benötigen auch die Detailseite der Destination damit sie sich bestimmte Ziele genauer ansehen können , damit sie sich bestimmte Ziele genauer ansehen können, eine Buchungsverwaltung, eine Buchungsseite, auf der Pakete, Termine, Unterkünfte usw. ausgewählt werden können , ganz einfach, Bestätigungs - und Filterfunktionen, Zahlung und Check-out, Favoriten- und Wunschlistenseite , Bewertungen und Bewertungen, natürlich als Teil der App. Dann haben wir hier, die Designziele sind eine intuitive Benutzeroberfläche, eine kreative, visuell ansprechende und einfach zu bedienende Oberfläche, Konsistenz und Konsistenz der Designelemente, einschließlich Farben, Schriftarten, Symbolen usw. natürlich sicher, dass es für alle Benutzer zugänglich ist und unterschiedlichen Bedürfnissen gerecht Ihre Zielgruppe sind Reisende , die nach Inspiration und Reisebuchungen unterschiedlichen Alters, die nach Inspiration und Reisebuchungen suchen und nach maßgeschneiderten Reisepaketen suchen Ihre Zielnutzer sind also im Wesentlichen Menschen , die schnell Reisen buchen möchten, ohne viel Recherche oder viel separate Arbeit anstellen zu müssen, um einzelne Teile der Reise zu buchen Sie möchten eine Option, bei der sie problemlos eine Reise buchen können, und sie sind startklar, ohne dass sie noch viel mehr Arbeit mit ihrer Reiseplanung erledigen müssen. Nun heißt es, dass es sich um eine webbasierte, responsive App handelt, also können wir sie so gestalten, dass wir zuerst mit der Desktop-Version beginnen, an den Desktop-Designs arbeiten, bevor sie dann auch für Mobilgeräte benutzerfreundlich gestalten und die Integration mit Drittanbieter-APIs für Zahlungen vornehmen. Damit haben wir meiner Meinung nach genügend Informationen, um mit der Einrichtung unseres Projekts zu beginnen. Zuallererst werden wir diese Anforderungen, die wir haben, in Wireframes umwandeln In diesem Schritt versuchen wir, eine Vorstellung davon zu bekommen , was wir auf jeder Seite aufnehmen wollen, wie wir diese Benutzerabläufe auf hoher Ebene definieren wollen , ohne zu spezifisch zu werden, da wir darauf eingehen werden, während wir die Modelle erstellen Aber vorerst wollen wir sofort mit Wireframing beginnen und mit jeder Seite beginnen Ich werde einfach direkt mit meinem iPad einsteigen und auf meinem iPad weitermachen Fühlen Sie sich frei, Stift und Papier zu verwenden. Fühlen Sie sich frei, Figma selbst oder Fikjam zu verwenden. Welche Methode Sie auch immer am besten finden, wenn es darum geht, Ideen schnell zu skizzieren, ohne zu nehmen. Entscheiden Sie sich für diese Option Verbringen Sie nicht zu viel Zeit mit diesem Schritt, denn es ist nicht der Schritt, für den es sich lohnt , zu viel Zeit aufzuwenden. Es liegt nur an uns, uns einen umfassenden Überblick darüber zu verschaffen, was wir auf jeder Seite aufnehmen müssen, wo wir es platzieren möchten, und mit dem Brainstorming und der Ideenfindung beginnen, für wen diese App überhaupt aussehen und sich so anfühlen soll Lassen Sie uns ohne weitere Umschweife gleich loslegen. 6. Inspiration finden: Das Wichtigste daran, ein effizienter Designer zu sein, ist, von anderen Designern lernen zu können. Einfach ausgedrückt, um ein ausgezeichneter Designer zu sein, müssen Sie das Rad nicht unbedingt ständig neu müssen Sie das Rad nicht unbedingt erfinden Tatsächlich ermutige ich Sie, bei Ihren Designs kreativ zu sein. Für die meisten Teile des Bildschirms müssen wir uns keine neue innovative Art und Weise einfallen lassen, wie Benutzer mit dem Produkt interagieren können. Ein Großteil der App, wie die Anmeldeseiten oder die Pop-ups, die wir anzeigen werden, usw., wurde in vielen Apps und in vielen Produkten bereits so definiert vielen Apps und in vielen Produkten dass es am besten ist, wenn wir uns etwas entscheiden, von dem wir uns inspirieren lassen. Und natürlich nehmen wir das und implementieren unser eigenes Styling und unser eigenes Design und unseren eigenen Twist. Und genau so definiere ich es, ein ausgezeichneter Designer zu werden, wenn man in der Lage ist , diesen Prozess schnell und immer ein ausgezeichneter Designer zu werden, wenn man in der Lage ist , diesen Prozess schnell wieder für verschiedene Designs, Ideen oder Anforderungen durchzuführen. Nach alledem gibt es drei Ressourcen, die ich als Inspiration verwende , wenn es darum geht, Designs zusammenzustellen. Bevor ich mit einem Projekt beginne, ich Designern, sobald ich das Dokument mit den Produktanforderungen empfehle ich Designern, sobald ich das Dokument mit den Produktanforderungen habe, einige Plattformen wie diese hier, nämlich collec.com, zu besuchen einige Plattformen wie diese hier, nämlich collec.com, Nun, wenn es um Inspiration geht, hier sind drei Ressourcen, die ich verwende, und ich empfehle Ihnen, sie sich anzusehen Die erste, collecti.com. Mit diesem Tool kannst du sehen, wie verschiedene Designer Sachen hochladen, und du kannst sogar, sagen wir, nach Anmeldeseiten filtern und dir verschiedene Anmeldeseiten ansehen , die Leute hier hochgeladen haben Nehmen wir an, Sie entwerfen eine Speise- und Getränkekarte. Sie können sogar sowohl in Papierversionen als auch in App-Designs auf Speisen - und Getränkekarten zugreifen . Es gibt also eine Auswahl verschiedener Designs, von denen einige älter, neuer sind und auf die Sie über diese Plattform zugreifen können . Schau es dir auf jeden Fall an Nun, dieser bietet Ihnen spezifische Komponenten. Wenn Sie zum Beispiel eine Preisseite entwerfen möchten , können Sie einfach zu den Preisseiten gehen und sich all die verschiedenen Ressourcen ansehen , die sie hier für die Preisgestaltung haben, und sich wirklich von ihnen inspirieren lassen und welche Elemente Sie von jeder Seite einbeziehen möchten und Ihre Designs mit Hilfe von Designs zusammenstellen, die herausfinden, welche Elemente Sie von jeder Seite einbeziehen möchten, und Ihre Designs mit Hilfe von Designs zusammenstellen, die bereits veröffentlicht wurden und eine Menge Recherchezeit Entwurfszeit. Und nicht zuletzt mobile.com. Jetzt benutze ich dieses Konto ständig und habe sogar ein kostenpflichtiges Konto bei ihnen, aber Sie müssen nicht unbedingt ein kostenpflichtiges Konto erstellen Sie müssen lediglich nach verschiedenen Apps oder verschiedenen Seitentypen suchen verschiedenen Apps oder verschiedenen , nach denen Sie suchen. Nehmen wir an, ich suche nach Inspiration für unsere Reise-App. Ich kann einfach durch die Suche nach Reisen andere Reisewebsites sehen. So kann ich sogar zu einem von ihnen gehen und auf ihre Bildschirme schauen. Nach der Anmeldung können Sie jetzt die Designs dieser bestimmten App sehen , die Sie geöffnet haben. Sie haben verschiedene Ziele und Hotels, aus denen Sie wählen können, die super cool sind. Wir werden uns das genauer ansehen. Das ist großartig. Und wir können sogar Reisen oder Reiseziele buchen. Mal sehen, was passiert , wenn wir nichts haben. Suchen wir einfach nach Buchungsbildschirmen oder Buchungsreservierungsströmen Sie können verschiedene Websites mit Buchungsströmen sehen und sehen, wie sie aussehen welche Elemente sie enthalten Hier finden Sie eine Mietwagenoption Reservieren Sie Ihr Zimmer bei Expedia, buchen Sie ein Interview oder buchen Sie einen Termin Es gibt verschiedene Arten von Buchungen, die Sie sehen können. Das ist interessant, da wir hier eine Reise-App haben. sich also gerne Nehmen Sie sich also gerne Zeit für diese App und lassen Sie sich inspirieren. Ich werde das tun, während ich meine eigenen Wireframes zusammenstelle, werde ich das auch tun Aber behalte diese drei Ressourcen zur Seite, wenn du Inspiration brauchst In der nächsten Vorlesung werden wir uns ansehen, wie wir diesen GPT tatsächlich nutzen können , um uns auch Inspiration einfallen zu 7. ChatGPT für Wireframing verwenden: Ich habe HGPT verwendet, Sie haben wahrscheinlich HGPT verwendet und wir haben alle HGBT Es ist eines der Tools, von denen wir nicht mehr genug bekommen können , und tatsächlich gibt es eine Möglichkeit, wie es uns bei der Drahtgestaltung helfen kann . Nun, wie machen wir das? Wir müssen lediglich die App definieren , die wir entwerfen, und HGPT Ideen dafür entwickeln lassen , was wir auf jeder Seite aufnehmen sollten Nehmen wir als Beispiel an, wir arbeiten zuvor an einer Seite zur Entdeckung von Reisezielen. Ich werde die zur Entdeckung von Reisezielen. Ich werde Übersicht hier aus unserem Dokument mit den Produktanforderungen kopieren und sagen, wir entwerfen eine App mit folgenden Übersicht aus der PRD, geben uns Ideen, was auf einer Destination Discovery-Seite enthalten sein soll, auf der Benutzer Übersicht hier aus unserem Dokument mit den Produktanforderungen kopieren und sagen, wir entwerfen eine App mit der folgenden Übersicht aus der PRD, geben uns Ideen, was auf einer Destination Discovery-Seite enthalten sein soll, auf der Benutzer Suchen Sie nach Reisen, die Sie für das Wireframe buchen Eine einfache Aufforderung wie diese gibt uns eine Aufschlüsselung dessen, was auf dieser Seite enthalten Wir haben also bereits einen Heldenbereich mit besonderen Zielen. Im Grunde genommen ist es sehr wichtig, ein rotierendes Karussell beliebten saisonalen Reisezielen einzurichten, eine Suchleiste, die gut sichtbar angezeigt wird Call-to-Action-Buttons mit übersichtlichen Schaltflächen zum Erkunden von Reisezielen oder Entdecken von Angeboten, Suchfilteroptionen mit Suchfilteroptionen mit allen Details, was wir einbeziehen sollten, bis hin zu Wetterpräferenzen, Art von Erlebnissen, Reisedauer und Zielkarte, Grid Slash Carousel, personalisierte Empfehlung, personalisierte Empfehlung, interaktive Kartenansichtsoptionen Das ist also cool. Vielleicht möchten wir es Benutzern ermöglichen, auch eine Karte von jedem Ziel zu haben , damit sie klicken und sehen können , wohin jedes Ziel sie führen würde. Bereich Inspiration und Erfahrung. Nutzerrezensionen und Testimonial-, Buchungs- und Verfügbarkeitsindikatoren Es gibt Ihnen sogar eine Vorstellung davon, wie Sie bei Benutzern Knappheit schaffen können, was eine großartige UX-Taktik ist Nur noch drei Plätze übrig. Wir haben das auf anderen Airline-Plattformen und Buchungsplattformen wie diesen gesehen , Vergleichen und Bookmarking-Tools Das gibt Ihnen also eine Menge Dinge, die Sie in Ihre Seite aufnehmen Und wenn das zu detailliert ist, können Sie es wahrscheinlich bitten, Ihnen eine Zusammenfassung zu geben. Geben Sie mir eine kurze Zusammenfassung der Dinge in Stichpunkten. Auf dieser Seite aufnehmen. Wenn Sie also eine zusammenfassendere Version haben möchten , sind wir hier. Es gibt Ihnen im Aufzählungsformat all die kleinen Dinge, die Sie aufnehmen können. Während wir also unser Wireframe durchgehen, können wir HGBT auf jeden Fall nutzen , um Ideen zu entwickeln, was wir einbeziehen sollten, um sicherzustellen, dass uns nichts in unseren Designs fehlt Und obwohl das großartig ist, können wir noch einen Schritt weiter gehen, indem wir FiCMA AI verwenden , um uns auch bei der Erstellung erster Entwürfe zu helfen Und das werden wir während des gesamten Kurses tun. Lassen Sie uns zunächst mit den Wireframes beginnen, die auf all den Inspirationen und Ressourcen, die wir bisher haben, sowie auf unserem Dokument mit den Produktanforderungen basieren all den Inspirationen und Ressourcen, die wir bisher haben, sowie auf unserem Dokument mit den Produktanforderungen und von dort aus beginnen und dann alle Seiten durchgehen, die wir entwerfen müssen , und von dort aus beginnen und dann alle Seiten durchgehen, die wir entwerfen müssen . Also sehe ich dich als Nächstes 8. Wireframe für die Anmeldeseite: Erwähnt, ich mache meine Wireframes in Fig Jam auf Du kannst das machen. Wenn du ein iPad hast. Wenn Sie das nicht tun, können Sie Stift und Papier verwenden, Sie können einfach FIG Jam auf Ihrem Computer machen. Es liegt wirklich an Ihnen, wie auch immer Sie das Drahtrahmen machen. Nochmals, verbringe nicht viel Zeit mit diesem Schritt. Das ist ein Low-Fidelity-Wireframe, den wir zusammenstellen , nur um zu wissen, was wir auf jeder Seite einbauen, wo es ersetzt wird, und um all die kleinen Details zu notieren, die wir vielleicht vergessen werden, wenn das Prototyping oder die Mockups Als Erstes nehme ich das Zeichenstift-Werkzeug und bei eingeschaltetem Lineal zeichne ich einfach ein Rechteck, um meine Drahtgitter darzustellen, und repariere es hier zeichne ich einfach ein Rechteck, um meine Drahtgitter darzustellen , Muss nicht perfekt sein. Wie Sie sehen können, bin ich nicht der Beste darin , diese Rechtecke zu zeichnen, auch nicht mit eingeschaltetem Lineal, aber auch hier machen wir nur einen groben Entwurf. Was ich jetzt tun werde, ist, dieses Tool hier zu verwenden, um hier alles auszuwählen und dann auf Kopieren und Einfügen zu klicken . Ich denke, ein Kopieren und Einfügen wie dieses könnte funktionieren Auf diese Weise haben wir also mehrere , die wir für verschiedene Bildschirme verwenden können. Der erste Bildschirm, auf den wir uns konzentrieren unsere Authentifizierungsseiten. Dies wird unsere Anmeldung sein. Bildschirm, hier werden sich die Benutzer für die App anmelden. Normalerweise können wir auf einer Seite wie dieser entweder ein kleines Bild an der Seite haben oder wir können einfach ein Feld mit den Eingaben für ihre Benutzer haben ein Feld mit den Eingaben für : die E-Mail-Adresse des Benutzers, das Passwort. Jetzt ist es wirklich wichtig, sich die PRD oder die Dokumente mit den Produktanforderungen anzusehen Dokumente mit den Produktanforderungen , um sicherzustellen, dass Sie alles enthalten Ich möchte also, bevor ich überhaupt anfange, etwas im Fenster zu skizzieren , eine Art Aufzählungsformular schreiben Was brauche ich auf dieser Seite? Also das Wichtigste zuerst, wir brauchen E-Mail. Wir brauchen ein Passwort. Wir brauchen das Logo, das vorerst der Name der Firma Wonder Wise sein wird . Dann lese ich gerade die PRD, speziell, wir wollen auch soziale Konten Es wird nicht spezifiziert, welches, also sollten Sie das mit Ihrem, Sie wissen schon, PM oder Ihrem Kunden abklären , ob Sie tatsächlich an einer echten App arbeiten Dies ist nur ein fiktives Unternehmen, also werden wir uns vorerst dafür entscheiden, es auch bei Google zu unterschreiben , und es gibt auch eine Option, die Telefonnummer zu verwenden Machen wir das zweite Feld mit der Telefonnummer. Als Möglichkeit, sich einzuloggen. Und das sollte die meisten Dinge abdecken, die wir hier brauchen. Optional können wir wieder ein Bild haben oder wir können einfach eine Box zum Einloggen haben. Nun zu dieser App, ich denke, es wäre cool Teil davon ein Bild von reisenden Personen oder ähnlichem zeigt , und dann wäre die Hälfte des Bildschirms die Anmeldeoptionen. Also vielleicht kann ich die Seite aufteilen, weißt du, zwei Drittel bis ein Drittel, ungefähr so. Wo auf dieser Seite des Bildschirms wird es ein Bild sein. Und dann werden auf der anderen Seite alle Inhalte sein , die wir besprochen haben. Also vielleicht mit dem Logo hier anfangen. Vielleicht möchten wir eine kurze Beschreibung dessen, was Wander Weiss macht? Wenn ich das nur durch die kleine Sloganzeile von Wander Weiss hier drüben ersetzen kleine Sloganzeile von Wander Weiss hier drüben Dann wollen wir das E-Mail-Postfach. Auch das muss nicht perfekt sein, solange du dein Schreiben lesen kannst, was für mich manchmal ein schwieriges Passwort ist, und dann brauchen wir vielleicht eine Option oder melde dich mit deiner Telefonnummer, Telefonnummer oder Google an. Ich setze hier einfach ein kleines G ein. Nun, ich möchte sie nach unten verschieben , um hier einen Button einzufügen , und ich mache einfach den Button hier drüben, um mich anzumelden. Nun, irgendwo sollten wir auch angeben, dass, wenn Sie ein Konto haben , der Link zum Anmelden ist. Wenn der Benutzer also bereits ein Konto hat, sollten wir auf eine Anmeldeseite verlinken. Ich werde die Anmeldeseite nicht mit einem Wireframe versehen, weil wir so ziemlich das Gleiche tun Also nenne ich dieses eine Signulash Log In einfach so. Aber natürlich werden wir weitermachen und die Änderungen und die Mockups vornehmen, sobald wir anfangen, die sobald wir anfangen Ähm, also ja, wir wollen einen Link zum Einloggen, falls Ihr Benutzer bereits ein Konto hat Sie können zum Anmeldebildschirm gehen, anstatt sich anzumelden. Und wenn sie dann zum nächsten Schritt übergehen, je nachdem, welchen Schritt sie durchlaufen, sagen wir, sie gehen die Telefonnummer durch, dann benötigen wir von der Telefonnummer aus auch eine Bestätigung oder eine Möglichkeit, benötigen wir von der Telefonnummer aus auch eine Bestätigung oder uns mit der Telefonnummer anzumelden. Und in der Regel ist dies ein Bestätigungscode , der gesendet wird. Wahrscheinlich wird unser zweiter Bildschirm die Anmeldung verifizieren, und wir werden in der nächsten Vorlesung darauf zurückkommen um auch dieses Design zusammenzustellen 9. Verifizierungscode-Wireframe: Alles klar für unser verifizierendes Login, es ist Wir werden einem ähnlichen Layout folgen. Wir werden das Bild auf der einen Seite haben und dann den Bestätigungscode hier drüben. Dann machen wir hier den Bestätigungscode. Sie müssen hier also einige Ziffern eingeben, und dann nennen wir es die Schaltfläche Weiter. Es ist eine Schaltfläche, um mit dem nächsten Schritt fortzufahren und dann die Anmeldung zu überprüfen oder etwas Ähnliches. Also wollen wir ein Feld da drin haben. Wir wollen einen Knopf da drin, und das ist so ziemlich alles. Vielleicht auch ein Button hier, um den Code erneut zu senden. Also irgendwo hier drüben, Code erneut senden. Wenn sie es beim ersten Mal nicht erhalten haben, können sie es erneut erhalten Das würde also unsere Authentifizierungsseiten vervollständigen. Die nächsten Seiten , die wir danach haben , sind Profilverwaltung und Zielerkennung. Ich werde in der Reihenfolge vorgehen, in der wir uns das wünschen. In der Regel möchten wir, dass die Benutzer hier die Anmeldeseiten durchgehen und dann auf die Hauptseite unserer App springen . Diese Hauptseite dient der Reisezielsuche, denn hier können Nutzer Ziele entdecken, ihr bevorzugtes Reiseziel eingeben und Filter anwenden usw. bevor sie tatsächlich eine Reise buchen. Dann machen wir weiter und zeichnen hier ein weiteres Rechteck. Und das wird für die R-Zielseite sein. Also ganz oben, Ziel. Discovery, nennen wir es. Wie auf der anderen Seite werden wir auch hier aufschreiben, was wir brauchen. Ich werde auf die Ressource verweisen , die wir mit HatGBT durchgesehen haben, wo wir uns einige der Dinge angesehen haben, die wir benötigen, sowie die PRD, die vom Kunden geteilt wurde Wir werden uns also beide und die Art der Querverweise sowie unsere eigenen Ideen und unsere eigene Inspiration ansehen, sowie unsere eigenen Ideen und unsere eigene die wir auf anderen Websites gefunden haben , wie denen, die ich Fühlen Sie sich frei, hier eine Pause einzulegen. Schauen Sie sich einige ähnliche Websites an. Ich empfehle sogar Expedia, Booking.com oder eine andere Plattform, die Sie für die Buchung von Reisen verwenden, zu besuchen und vielleicht zu sehen, was sie auf diesen Seiten zur Entdeckung von Reisezielen anbieten diesen Seiten zur Entdeckung von Reisezielen Wie sieht ihr Buchungsfluss aus? Dies wäre ein guter Zeitpunkt, um so etwas offline auf eigene Faust zu erledigen . Und dann fahren Sie fort, Elemente von diesen Websites zu zeichnen und auch in Ihre eigene App einzufügen . Auch hier gilt: Um ein großartiger Designer zu sein, müssen Sie das Rad nicht ständig neu erfinden In der Tat ist es genau das Gegenteil. Je mehr Sie andere Designs nutzen und verwenden können, die bereits von anderen Designern entwickelt und entworfen wurden, desto besser werden Sie sein, desto schneller können Sie Wireframes, Modelle und Prototypen ziemlich schnell zusammenstellen Wireframes, Modelle und Prototypen ziemlich schnell zusammenstellen und Prototypen ziemlich 10. Ziel-Erkennungs-Wireframe: Diese Seite besteht aus zwei Komponenten . Es gibt den Teil, der sich auf bestimmte Dinge bezieht, die sich auf das Ziel beziehen. Also werden wir wahrscheinlich oben eine Navigationsleiste haben , die Dinge wie, du weißt schon, Navigationen zu verschiedenen Stellen der App sowie zurück zur Startseite enthält du weißt schon, Navigationen zu verschiedenen Stellen der App sowie zurück zur Startseite Also werden wir wahrscheinlich das Logo hier haben , das uns zurück zur Homepage bringt, wo auch immer wir sind, und dann eine Reihe von Links auf der rechten Seite, die ich vorerst nicht hinzufügen werde Willst du hier verschiedene Karten haben. Wir wissen also definitiv, dass wir einige Zielkarten wollen. Wahrscheinlich sollten diese Karten etwas niedriger sein , damit wir oben etwas Platz für Eingaben haben. Sie möchten Ihre Liste der Dinge, die Sie benötigen, in zwei verschiedene Kategorien unterteilen. Die erste befindet sich auf der Seite selbst, die zweite auf der Karte selbst. In der Karte, die wir Details zu bestimmten Zielen aufnehmen möchten, möchten wir also Details zu bestimmten Zielen aufnehmen möchten, für jedes Ziel zwei separate Listen erstellen. Lassen Sie uns zunächst die Entdeckungsseite selbst erstellen. Wir möchten hier eine Suchleiste haben , um nach Zielen zu suchen. Also wollen wir, dass sie schreiben , was ihr Ziel ist. Da wir keine Flüge für sie buchen, müssen wir nicht unbedingt wissen, woher sie kommen. Wir müssen nur die Ziele kennen. Und als Teil dieser Suchleiste möchten wir wahrscheinlich einige Datumsfilter. Deshalb möchten wir, dass Datumsauswähler sie fragen, wann sie müssen oder wann sie reisen möchten Jetzt wollen wir auf dieser Seite auch Sortieroptionen haben. Wir möchten sie nach Beliebtheit, Preis und Bewertungen sortieren lassen. Und wieder kommen die meisten davon von Chat GPT. Wir wollen auch Filteroptionen. Für die Filter wollen wir ein Budget angeben, das wir können , wir haben bereits einen Zeitraum , sodass wir nur die Dauer der Reise angeben können. Also, wie lang sollen die Reisen vom Typ Erlebnis sein? Auch hier können wir diese später jederzeit ändern. Es ist einfach gut, eine Vorstellung davon zu haben , womit wir zunächst beginnen wollen zumindest auch, ob wir bevorzugen. Das sind einige gute Filtermöglichkeiten. Also brauchen wir diese als Teil der Seite. Vielleicht möchten wir eine Kartenansicht hinzufügen, also ist das eine gute Idee, darüber nachzudenken. Ich tendiere eher dazu, hier keine Kartenansicht einzufügen , nur weil es den Zielen nicht um bestimmte Orte handelt Es werden nur bestimmte Städte sein. Also wir wollen wahrscheinlich keine Karte, es sei denn, sie suchen sich, du weißt schon, einen Ort für ihre Unterkunft aus. Also können wir vielleicht auf der Detailseite eine Karte mit verschiedenen Übernachtungsmöglichkeiten und so weiter hinzufügen. Aber für die Seite selbst glaube ich nicht, dass wir eine Karte brauchen. Aber auch dies sind Teil der Funktionen, die wir später jederzeit hinzufügen können. Oder wenn wir mit unserem Kunden zusammenarbeiten, können wir das auf jeden Fall mit ihm besprechen. In einem realen Szenario wird das also ein bisschen anders sein. Vielleicht wollen wir jetzt auch verschiedene Kategorien von Optionen. Also vielleicht eine Kategorie oder wir können es thematische Sammlungen nennen. Und dies könnten Gruppen von Kategorien von Reisezielen sein , die sie sehen können , indem sie dort klicken und sich Ziele ansehen, bei denen es sich beispielsweise um romantische Kurzurlaube oder Urlaubsreisen handelt, oder um verschiedene Kategorien, in die wir Reisen einordnen können Falls sie also sehen wollen, was in diesen Kategorien beliebt ist, können sie das auch tun Ich denke, das sind zumindest vorerst gut , um damit anzufangen. Für unsere Entdeckung unseres Reiseziels. Nun zur Karte selbst. In der nächsten Lektion können wir noch eine Liste der Dinge zusammenstellen, die wir wollen, bevor wir den Rest dieser Seite zusammenstellen. Dies ist wahrscheinlich eine der wichtigsten und am häufigsten besuchten Seiten unserer App. Es ist also gut, sich Zeit dafür zu nehmen und diese detaillierte Planung nicht überstürzt zu überspringen Kommen wir also in der nächsten Vorlesung zurück, um mit der Planung unserer Zielkarten zu beginnen Planung unserer Zielkarten 11. Zielort-Discovery-Karten-Wireframe: Zielkarten. Was wollen wir in jeder Zielkarte haben? Wir brauchen den Namen der Stadt und des Landes. Ich will wahrscheinlich die Bewertung. Wir benötigen irgendeine Art von Kosten für diese Reise, und wahrscheinlich wird es so etwas wie ein Preis pro Tag oder pro Nacht sein so etwas wie ein Preis pro Tag oder pro , es sei denn, sie geben ein bestimmtes Datum ein. In diesem Fall können wir ihnen den Gesamtbetrag für ihre Reise zeigen. Also mache ich Slash Total. Wir möchten eine Schaltfläche, über die sie weitere Informationen sehen oder das Reiseziel fortsetzen oder buchen Vorerst nennen wir es einfach einen Button. Wir wollen auf jeden Fall ein Bild. Es ist jedoch wichtig, diese Karte nicht zu überladen. Wir könnten ein Beliebtheitsabzeichen haben, wenn wir wollen. Wenn dieses Reiseziel also beliebt ist, können wir das mit einem kleinen Symbol anzeigen. Und wenn Sie dieses Ziel hinzufügen oder mit einem Lesezeichen versehen möchten , können wir es auch mit einem Lesezeichen versehen So können wir es auf unserer Profil - oder Lesezeichenseite speichern und Ich denke also, das sind zunächst gute Dinge, um sie in unsere Zielkarten aufzunehmen Lassen Sie uns nun die Seite selbst mit einem Wireframe versehen. Wir möchten, dass unsere Suchleiste oder die Sortier- und Filteroptionen oben angezeigt werden, irgendwo hier drüben Also würden wir wahrscheinlich die Suchleiste hier mit einem Ziel haben wollen . Nun, warum oben links? Dies ist normalerweise der erste Ort , den sich ein Benutzer ansehen würde. Wir möchten also , dass sie schnell ein Ziel eingeben , wenn sie bereits wissen, wohin sie fahren, oder sie können einfach nach verfügbaren Angeboten suchen . Wir können dann auch unsere Datumsauswahl hier haben, und wir können hier Schaltflächen zum Filtern und Sortieren haben Und wir können die Zielkarten direkt darunter haben. Nun, wir werden ein paar Reihen dieser Zielkarten haben Reihen dieser Zielkarten und wahrscheinlich gleich unten irgendwo, werden wir diese Seite einfach ein wenig erweitern. Direkt weiter unten möchten wir vielleicht thematische Sammlungen hinzufügen. Wir können es einfach Sammlungen nennen und hier verschiedene Zielsammlungen anbieten. Das könnten also Bilder sein, die nur einen Sammlungsnamen haben. Mit der Möglichkeit, alle Reisen in diesen Sammlungen zu durchsuchen. Ich denke, das ist wahrscheinlich ein guter Anfang. Mach dir keine Sorgen über die Navigationsleiste oben. Vorerst kommen wir zurück und verdrahten das zusammen. Wir könnten auch ein Wireframe erstellen , wie diese Zielkarte aussehen könnte Vielleicht könnten wir hier ein Bild des Ziels mit dem Namen City Slash Country Könnten die Bewertung hier machen. Vielleicht ein Preis. Im Moment schreibe ich nur 1.000$ pro Woche, aber auch hier, in den eigentlichen Mockups, werden wir Sie können hier Symbole einfügen. Dies ist ein FR-Symbol, falls es beliebt ist. Vielleicht ein Button hier zum Bookmarkt und dann ein Button hier, um fortzufahren Ich denke, das würde vorerst funktionieren. Nehmen Sie sich gerne einen Moment Zeit wenn Sie mehr Inspiration benötigen, und schauen sich einige ähnliche Apps Karten an und wie sie ihre Karten gestalten. Das habe ich in vielen Apps gesehen und wie sie Dinge präsentieren. Deshalb stelle ich sie schnell zusammen, aber Sie können sich Zeit nehmen und hier eine Pause einlegen, um sich etwas Inspiration anzusehen. Als kleine Übung überlasse ich Ihnen die Zieldetailseite die Sie als Aufgabe selbst erledigen können. Und diese Zieldetailseite ist im Grunde eine detailliertere Seite mit unseren Zielinformationen. Also all diese Informationen, die Sie auf der Karte haben, plus andere Dinge wie ausführliche Bewertungen und Dinge wie Beschreibung der Reise, Buchungsoptionen. Jetzt werde ich das in den Mockups zusammenfügen. Ich selbst, aber Sie können das gerne als kleine Aufgabe erledigen , um Ihre Wireframing-Fähigkeiten zu Dann kommen wir zurück und fahren mit dem nächsten Schritt im Buchungsablauf fort , der Buchungsverwaltung oder der Buchungsseite und dann der Buchungsbestätigung und Zahlung Lassen Sie uns also zurückkommen und diese Seite zusammenstellen. 12. Zieldetails-Wireframe: Richtig, was die Seite mit den Zieldetails angeht, habe ich das als Aufgabe für Sie hinterlassen , wenn Sie möchten. Ich habe meine eigene Seite mit den Zieldetails erstellt. Auch hier könnte deine ganz anders aussehen als meine. Der Hauptteil besteht darin, sicherzustellen, dass es die wichtigsten Komponenten enthält, die wir benötigen. Also einige der Details von der Zielkarte selbst, sowie alles andere, was zweitrangig oder andere wichtige Informationen sein könnte , die wir benötigen, um den Bildschirm irgendwann auch mit dem Buchungsablauf auf dem Buchungsbildschirm zu verbinden den Bildschirm irgendwann auch mit dem Buchungsablauf auf dem Buchungsbildschirm zu . Also für mich, ganz oben, habe ich das Bild hier auf der linken Seite platziert , mit der Möglichkeit , mehrere Bilder zu sehen. Direkt darunter habe ich einige mitgelieferte Dinge platziert, die zu ihrem Bestimmungsort gehören. Das könnte also eine Liste von Annehmlichkeiten sein, und wir können das in einem Symbolformat tun. Hier oben der Name des Reiseziels, die Stadt, ähm, das Land, ähm , die Bewertungen, das Feuersymbol und hier die Schaltfläche mit dem Lesezeichen, wie Sie auch auf der Karte selbst sehen Dort finden Sie also eine kurze Beschreibung, worum es bei eine kurze Beschreibung, worum diesem Reiseziel geht, direkt darunter, und dann eine Schaltfläche oder ein Aufruf zur Aktion, um das Zimmer auszuwählen, denn das ist in der Regel das was Sie auf Buchungsseiten tun können Sobald Sie zu einer Detailseite eines Reiseziels einer Standortseite oder einer Hotelseite gelangen, der nächste Schritt darin, eine Unterkunft auszuwählen. Jetzt könnten sie sich an verschiedenen Orten befinden oder sie könnten sich am selben Ort befinden. Ähm, das könnte also entweder ein Zimmertyp oder sogar ein Hoteltyp sein. Geben Sie vorerst einfach den Zimmertyp ein. Direkt darunter befindet sich auch die Unterkunft mit all den verschiedenen Filtern. Wenn sie also keinen von der vorherigen Seite ausgewählt haben, der Zielentdeckungsseite, wenn sie kein Datum und dergleichen eingegeben haben , können sie das von hier aus tun. Sie können ihre Anzahl an Reisenden hinzufügen und so weiter. Und dann sehen Sie sich die verschiedenen Unterkünfte für diese Reise an. Direkt darunter habe ich ein paar Bewertungen abgegeben. So können Sie sehen, wie die Bewertungen für diese Unterkunft oder das Reiseziel tatsächlich sind Reiseziel tatsächlich sind, und können sie in einem Karussellformat anzeigen Dann sehen Sie direkt darunter einige ähnliche Ziele. Wenn Ihnen das nicht so gefällt, können Sie andere Karten finden, die über die Karten hier verfügbar sind . Dies sind alles Zielkarten, die dieser ähnlich sind. Natürlich können Sie auf dieser Seite noch viel mehr hinzufügen, vielleicht eine Übersicht Dinge wie Richtlinien für - und Auschecken usw. Da kann noch viel mehr drin sein. Im Moment halte ich es einfach. Ich glaube, ich stelle genau die Anforderungen für diese Seite. Wir fahren fort und fahren unserer nächsten Seite im Wireframe fort , der Buchungsseite Diese Buchungsseite ist im Wesentlichen die Buchungsseite , die direkt nach der Auswahl der Unterkunft angezeigt wird direkt nach der Auswahl Wenn ich hier also eine der Unterkünfte auswähle, wird diese Seite geöffnet. 13. Buchungsbildschirm-Wireframe: Ich habe die Artikel aufgelistet , die wir für unseren Buchungsbildschirm benötigen Jetzt habe ich mir dazu andere ähnliche Plattformen angesehen nebenbei auf Chat GBT verwiesen Und hier ist, was ich mir ausgedacht habe. Wir haben die Einzelheiten der Unterkunft. Wir wollen also nur das Zimmer oder das Hotel sehen , das sie buchen oder in dem sie übernachten werden. Es besteht die Möglichkeit, dass sie an mehreren Orten übernachten , wenn dieses Reiseziel, wissen Sie, dieser Ort, den sie mehrere verschiedene, Sie wissen schon, Standorte in den Paketen hat , also sollten wir das vielleicht in das Design aufnehmen, ausgewählten Daten, die B-Schaltfläche und eine Buchungsschaltfläche, einige Zusatzleistungen. In der PRD oder den Produktanforderungen wird also erwähnt, dass zusätzliche Dienstleistungen wie Mietwagen, lokale Führer oder Aktivitäten usw. gebucht werden müssen. Ich habe das auch hier hinzugefügt. Zahlungsinformationen und dann persönliche Daten. Also Name, E-Mail, Telefonnummer und Details zum Ein- und Auschecken. Auf einem Bildschirm wie diesem könnte es schön sein, einige der Unterkunftsdetails auf der einen Seite und dann die restlichen Informationen oder die Eingabe, die der Benutzer eingeben muss , auf einer anderen Seite einzufügen und dann die restlichen Informationen oder die Eingabe, die der . Und normalerweise mag ich es, die Dinge konsistent zu halten. Wenn sie also die Details auf der rechten Seite anzeigen lassen, können sie sehen , welche Unterkunft sie buchen. Und dann können wir auf der linken Seite alle Felder hier haben. Wir können also von der linken Seite aus beginnen, ich füge hier einfach einen Zurück-Button ein und dann direkt darunter, nur einen Titel, um die Buchung zu bestätigen. Dann wollen wir wahrscheinlich hier unsere persönlichen Daten sammeln. Wir nennen es vielleicht nicht persönliche Daten, aber hier füge ich das einfach mit den verschiedenen Feldern E-Mail, Telefonnummer, Vorname, Nachname, E-Mail, Telefon hinzu. Das könnte Teil eines Abschnitts sein. Dann könnte der Abschnitt direkt darunter Zahlungsinformationen sein. Dafür benötigen wir wahrscheinlich eine Kreditkartennummer. Ebenso wie das Ablaufdatum, CVV und wahrscheinlich den Namen der Person auf der Karte Also werde ich das hier einfach hinzufügen, aber in den eigentlichen Mockups werden wir es wahrscheinlich etwas anders platzieren Dann wollen wir unsere Add-Ons hinzufügen, sodass die Add-Ons hier drüben stehen könnten Und wir können kleine Karten wie diese haben , die die verschiedenen kleinen Add-Ons darstellen , die sie zu ihrer Reise hinzufügen können , mit einem Titel und einer kurzen Beschreibung, was das bewirkt. Wir können auch ein Bild hinzufügen, wenn du willst , vielleicht ganz oben. Und was dann noch hier übrig ist. Wir haben unser Datum für die Unterkunft ausgewählt, sodass diese zusammen passen könnten, ebenso wie eine Schaltfläche „Buchen“. Also mache ich einfach weiter und mache das etwas kürzer , damit wir loslegen können. Bild. Der Name. Und was buchen sie dann? Ein Zimmer zum Beispiel und einige Details von der anderen Seite, wie die Daten und die Anzahl der Personen. Und natürlich ist es wirklich wichtig, den Preis mit einzubeziehen. Ich habe hier nichts hinzugefügt, aber wir wollen auf jeden Fall den Preis, den Gesamtpreis und das, was der Benutzer erwarten kann, zu zahlen, anzeigen Gesamtpreis und das, was der Benutzer erwarten kann, zu zahlen, Und wir können dann hier unten auf die Schaltfläche „Buchen“ klicken , um die Buchung abzuschließen Also haben wir den Button da unten. Jetzt haben wir mehr komplexe Seiten zusammen gemacht. Als Aufgabe verlasse ich den Profilbildschirm und den Lesezeichenbildschirm oder die Seite, auf der sie alle Lesezeichenelemente sehen können diesen beiden Seiten überlasse ich Ihnen die Aufgaben In der nächsten Vorlesung kommen wir zurück und beginnen damit, unseren Styleguide für die App zu erstellen unseren Styleguide für die App und unsere App gemeinsam zu gestalten. 14. Auswählen eines Farbschemas: Da unsere Drahtgestelle aus dem Weg geräumt sind, ist es an der Zeit, mit dem nächsten Schritt unseres Projekts fortzufahren, und das bedeutet, einige Stile für das Projekt zu finden. Jetzt sind Stile die Grundlage unseres Projekts, und zu den Stilen gehören Dinge wie das Farbschema, die Typografie, die wir verwenden werden, und in einigen Fällen das Designsystem, das wir verwenden möchten, falls Sie eines verwenden oder eines von Grund auf neu erstellen möchten In diesem Abschnitt des Kurses werden wir uns also darauf konzentrieren, die Grundlagen zu schaffen , damit wir mit der Zusammenstellung der Modelle beginnen können und uns keine Gedanken mehr über Farben und Schrift machen die Grundlagen zu schaffen , damit wir mit der Zusammenstellung der Modelle beginnen können müssen, müssen wenn wir zu diesem Teil des Projekts kommen. Es gibt also ein paar Ressourcen, die ich verwende, wenn es um die Generierung von Farbschemata geht Bevor ich zu den anderen übergehe, möchte ich Ihnen zeigen, dass CHA JBT auch anständige Farbschemata bietet Wenn du ihm sagst, woran du gerade arbeitest, und nach einigen Farben fragst, werden ihm einige schöne Farbtöne einfallen , die du für deine Projekte verwenden kannst Und hier sind einige andere Ressourcen, die ich im Allgemeinen verwende, und ich empfehle Ihnen, sich diese anzusehen Die Links befinden sich auch in den Ressourcen für all diese Tools, die wir durchgehen werden. Einer davon sind Kühler. Sie können hier auf den Generator starten klicken und einfach direkt in die erste Palette springen , die er Ihnen bietet Deine wird wahrscheinlich anders sein als meine. Sie drücken einfach die Leertaste auf Ihrer Tastatur und es werden immer wieder verschiedene Farben erzeugt. Wenn du eine Farbe magst, sagen wir , ich mag dieses Marineblau. Ich kann darauf auf Sperren klicken und dann weiter die Leertaste drücken, um eine Übereinstimmung mit anderen Farben zu erhalten , die ähnlich oder komplementär sind, und ich kann weiterhin verschiedene Farben sperren , die ich für mein Projekt verwenden möchte. Wenn ich also eine schöne Farbe sehe, kann ich dort jederzeit auf Sperren klicken und dann den Rest meiner Palette weiter generieren. Im Allgemeinen benötigen wir nicht mehr als drei Farben in einem Projekt. Eine für Dinge wie Hintergründe oder Warnfelder und ähnliches. Eine andere für primäre Aktionen wie Schaltflächen, eine weitere für sekundäre Aktionen oder sogar eine Akzentfarbe, die für bestimmte Teile des Projekts verwendet werden kann, wie den Text oder möglicherweise einige Hintergründe hier und da und so weiter. Sie benötigen nicht ganze fünf Farbgruppen. Das könnte sogar ein bisschen zu viel werden. Fühlen Sie sich frei, mit diesem Tool zu experimentieren. Es gibt noch einen, ai coolors.co. Dies ist ein von KI generiertes Farbschema. Es gibt Ihnen einige erste denen Sie experimentieren und sehen können , wie es auf einem Dashboard-Display wie diesem hier aussehen würde . Oder Sie können es auch dazu auffordern. Sie können versuchen, nach bestimmten Farben zu suchen. Wenn ich also etwas wie Sonnenuntergangsfarben sage, sagen wir, und dann generiere ich, mache ich weiter und lasse und dann generiere ich, mache ich weiter mir einige Farben einfallen , die mit dem Sonnenuntergang zu tun haben. Und wenn Ihnen einige der Farben, die es sich ausgedacht hat, nicht gefallen, können Sie sie natürlich einige der Farben, die es sich ausgedacht hat, nicht gefallen, ändern. Sie müssen nicht unbedingt genau das Farbschema wählen, das es Ihnen bietet, oder Sie können Dinge wie Ocean machen, da wir eine Reise-App machen, oder lassen Sie uns sogar Strand ausprobieren, um zu sehen, was sich daraus ergibt. Ja, das ist ein bisschen netter. Also zögern Sie nicht, diesen auszuprobieren. Es gibt noch einen anderen namens Colors do MSI. Beschreiben Sie noch einmal den Zweck Ihrer Farbkombination Reisen Sie mit unterschiedlichen Strand- und Wasserfarben Ich habe mir hier nur einen zufälligen Satz ausgedacht , um zu sehen, was er uns geben würde Ja, es gibt uns ein paar helle Blautöne und einige interessante Nuancen. Und Sie können es jederzeit erneut generieren , wenn Ihnen das nicht gefällt. Es sind definitiv einige Blautöne. Wir haben hier ein paar Sandfarben. Das ist nett. Last but not leaves de blank.com hilft Ihnen auch dabei, nicht nur Farben, sondern auch Schriftarten zu finden nicht nur Farben, sondern auch Schriftarten zu Vielleicht probieren wir es mal mit den Schriften aus, wenn es darauf ankommt Lassen Sie uns vorerst die Farben ausprobieren. Schreiben Sie eine Aufforderung, die Ihr Projekt, Ihr Reiseziel und Ihre Buchungs-App mit sonnigen Zielen beschreibt . Auch hier eine völlig zufällige Aufforderung, aber wir haben hier einige interessante Farben. Ich habe mir sogar ein Modell ausgedacht, mit dem Sie sehen können, wie es aussehen würde oder wie die Farbpalette in verschiedenen Projekten aussehen würde . Das ist interessant Und Sie können weitermachen und bestimmte Farben ändern. Wenn du diese Orange nicht magst, kannst du sie heller machen. Und es würde dir projektübergreifend zeigen, es aussehen würde. Nun, ich persönlich neige dazu, Kühler zu verwenden , nur weil ich diese Plattform öfter benutzt habe, aber Sie können natürlich gerne einen verwenden um ein eigenes Farbschema zu erstellen, oder Sie können die Farben, die ich verwenden werde, kopieren können die Farben, die ich verwenden werde Ich werde die Hex-Codes des Farbschemas in der nächsten Vorlesung vorstellen Machen Sie hier eine Pause, wählen Sie ein Farbschema von Ihrer Lieblingsplattform aus, und wir sehen uns in der nächsten Vorlesung. 15. Auswählen eines Typsets: Deshalb habe ich dieses Farbschema ausgewählt , um mein Projekt voranzutreiben Jetzt könnte deins natürlich anders aussehen. Also zögern Sie nicht, Ihrem zu folgen. Ich werde hier das Blau als primäres, sekundäres Orange verwenden und dieses Schwarz für Dinge wie Schriften und Text verwenden. Und dann dieses Weiß hier für Dinge wie Hintergründe oder Kartenhintergründe und so weiter. Nun zu den Schriften, wo wählen wir einen Schriftsatz und auf welche Ressourcen haben wir Zugriff Nun zu dieser, mit Abstand einfachsten und zuverlässigsten, Google Fonts Google Fonts ist jetzt auch in Figma selbst enthalten, sodass Sie keine davon mehr herunterladen oder in Sigma importieren müssen , das ist also großartig Stellen Sie also sicher, dass Sie benutzerdefinierte Schriftarten haben, starten Sie Figma einfach neu, wenn Sie sie nicht sofort sehen Jetzt können Sie gerne in Google Fonts stöbern. Wenn es um Ihre Schriftarten geht, möchten wir zwei Schriftarten auswählen. Eine für den Überschriftentext. Das sind also Dinge wie Titel, der Name der App oder irgendwelche Überschriftentitel und ähnliches. Wir verwenden eine Schriftart für Überschriften. Das könnte also etwas anders aussehen Ihre andere Schriftart, nämlich die Fließschrift. Idealerweise würden wir also zwei verschiedene Schriftarten auswählen wollen. Nun, für eine wirklich vereinfachte App könnten Sie sich durchaus für eine entscheiden, und einige haben unterschiedliche Versionen der Schrift , die Sie verwenden können Sie könnten also zum Beispiel Robotic Condensed für Ihre Überschrift verwenden und dann Roboto Mono für Ihren Körper als Beispiel Ich sage nicht unbedingt, dass du das tun solltest. Aber es gibt jede Menge guter Schriftarten , die Sie hier verwenden können. Die anderen beiden hier , die ich dir gezeigt habe Deblank gibt dir auch Schriften , mit denen du arbeiten kannst Also, wenn ich es öffne und zu den Schriften gehe, gebe ich deine Eingabeaufforderung ein, ich suche einfach hier in der Reise-App und los geht's Sie erhalten verschiedene Schriftkombinationen, mit denen Sie arbeiten können. Sie können es in verschiedenen Farben sehen. Und wenn Sie auf Schrift abrufen klicken, gelangen Sie direkt zu Google Fonts selbst. Und du kannst hier auch etwas eintippen. Natürlich sollten Sie sich überlegen, wie Ihr Branding aussehen soll. Wenn Sie also mit einem Kunden zusammenarbeiten, sollten Sie diesen Teil abarbeiten, bevor Sie zum nächsten Schritt Sie möchten sich wahrscheinlich mit ihm über das Branding beraten , vor allem, wenn er bereits Markenmaterial parat hat, z. B. Schriften, die bereits für Sie verfügbar sind. Nun, hier werde ich einfach weitermachen und zwei Schriftarten auswählen und mit diesen weitermachen. Und diese beiden Schriften werden Libre Baskerville für meine Und für die Fließschriftarten werde ich hier Noto-Sends auswählen Das werden also die beiden Schriftarten sein, die ich verwende. Aber auch hier können Sie gerne Ihr eigenes Schriftpaar verwenden. Wir werden in zukünftigen Vorlesungen darauf zurückkommen, diese tatsächlich als Schriftstile zu unserer App hinzuzufügen. 16. Farbstile erstellen: Ordnung, also habe ich das als mein Farbschema ausgewählt, und ich hoffe, Sie haben auch Ihr eigenes Farbschema festgelegt. Wenn nicht, können Sie gerne mitmachen und dieses verwenden. Grundsätzlich verwende ich das Blau als unsere Primärfarbe und dieses Orange ist eine Sekundärfarbe. Dieses Schwarz als primäre Textfarbe. Der Grund, warum wir uns nicht eine vollständig schwarze Farbe wie Null, Null, Null entscheiden, was den Hex-Code angeht, ist, dass wir etwas Subtiles und ein bisschen weniger dunkel wollen , nur weil es die Augen schont. Und das ist eine gute Hintergrundfarbe, die wir verwenden können. Und natürlich können wir für all diese Farben mehrere Farbtöne erstellen und die passenden Farben verwenden . Nun wollen wir das unsere Figma-Datei verschieben, und bevor wir das in Figma tun, werden wir ein neues Projekt erstellen und es gerne in Ihrem Entwurfsordner oder an einem anderen Ort erstellen Erstellen Sie eine neue Designdatei. Und diese Designdatei wird unser Projekt sein , in dem unsere Stile, unsere tatsächlichen Modelle und alles andere wiedergegeben werden unsere tatsächlichen Modelle und alles andere wiedergegeben Also werden wir weitermachen und es in Manderwis umbenennen. Und für diese erste Seite werden wir sie in unseren Styleguide umbenennen und alle unsere Styles hier platzieren Um nun einen Stil zu erstellen, müssen Sie hier nur noch zu den lokalen Stilen gehen und einen neuen Stil hinzufügen. Jetzt stellen wir gerade den Farbstil zusammen , also fangen wir damit an. Wenn Sie hier klicken, fragen wir uns, wie Sie Ihre Farbe nennen möchten. In diesem Fall können wir ihr tatsächlich einen Namen wie Primary geben . Sie können eine Beschreibung hinzufügen, wenn Sie möchten. Wenn Sie also in einem Team arbeiten und genau beschreiben möchten , wo Sie diese Farbe verwenden , könnte dies nützlich sein. Jetzt kopiere ich den Hex-Code von hier. Sie können sich diese Farbe gerne notieren, wenn Sie dieselbe verwenden möchten. Ich nehme hier den Hex-Code für das Blau. Fühlen Sie sich frei, hier eine Pause einzulegen , um es auch in Ihr Projekt zu schreiben, wechseln Sie wieder hierher und fügen Sie es für die Eigenschaften ein. Und jetzt haben wir den Stil mit dieser Farbe als Primärfarbe und ein freier Treffer erzeugt Stil, der Stil wurde erstellt. Und überall, wo wir ein Objekt haben, sagen wir, wir haben dieses Rechteck und wir möchten diese Füllung anwenden, gehen wir einfach zu, anstatt die Farbe auszuwählen oder jedes Mal, wenn wir den Hex-Code eingeben, müssen wir nur zu „Stile und Variablen anwenden“ gehen Stile und Variablen anwenden und den primären Stil auswählen. Es wurde angewendet. Der Vorteil der Verwendung von Stilen statt der Verwendung von Stilen besteht darin, dass jedes Mal, wenn Sie Ihr Farbschema ändern , sagen wir, ich möchte anstelle dieser Grundfarbe einen anderen Blauton verwenden, dann wird er auch dort geändert, wo Sie diese Farbe verwenden. Wie Sie sehen, ändere ich momentan nur den Farbstil und nicht die Füllung dieses speziellen Rechtecks. Wo auch immer ich diese Farbe verwende , sie ändert sich automatisch. Das ist also der Vorteil der Verwendung von Stilen. Im Moment wollen wir also Stile für alle Farben erstellen, all diese Farben hier drüben. Wir haben also bereits die Primärfarbe alles, was Sie tun müssten, ist diesen Vorgang für eine Sekundärfarbe, für eine Textfarbe und für eine Hintergrundfarbe zu wiederholen für eine Textfarbe . Jetzt belasse ich das als etwas, das Sie tun können. So kreiert man also Farbstile. Jetzt machen wir hier eine Pause und kommen in der nächsten Lektion darauf zurück, wo wir tatsächlich ein Plugin verwenden werden, das uns hilft, dies schneller zu machen und auch Farbtöne in unsere Farbstile einzuführen. 17. Plugins zum Erstellen von Farbstilen verwenden: In der Einführung habe ich erklärt, wie wir Plug-ins hinzufügen können, indem wir hier unten tippen oder indem wir unter Windows die Befehlstaste K oder die Strg-Taste drücken und zu unserem Plugins-Tab wechseln. Jetzt wollen wir verschiedene Schattierungen unserer Primärfarben erstellen , sodass wir verschiedene Farbtöne anwenden können. Wenn Sie ein helleres Blau wünschen, können wir ein helleres auftragen. Wenn Sie ein helleres Grau wünschen, können wir ein anderes Grau verwenden. Auf diese Weise müssen Sie diesen Vorgang nicht mehrmals wiederholen, um verschiedene Stile mit unterschiedlichen Farbtönen zu erstellen. Wir können einfach ein Plugin verwenden , das uns dabei hilft. Um dieses Plug-In zu verwenden, ich einfach das Rechteck und lösche auch den Stil, den wir hier erstellt haben, den lokalen Stil für diese Primärfarbe. Jetzt wird dieses Plugin alles für uns einrichten. Alles was wir tun müssen, ist in unser Aktionsmenü zu gehen, zu Plugins und Widgets zu gehen und nach dem Plugin namens Foundation zu suchen und dieses Foundation-Farbgenerator-Plug-In auszuwählen. Wenn du es öffnest, siehst du, dass du verschiedene Farben hast und sie unterschiedliche Systeme verwenden, von Orbit über Atlassian-System bis hin zu Materialdesign und Design. Das sind unterschiedliche Arten, sind unterschiedliche Arten du die Farben mit unterschiedlichen Namenskonventionen benennen kannst und so weiter Die Farbe, die ich oft als Materialdesign verwende, bei der deine Farbe 500 die Hauptfarbe ist, die du auswählst, und dann entstehen ein paar dunklere und ein paar hellere Nuancen Nun, das ist nicht die Farbe, die wir wollen. Das ist die Farbe, die ich von meinem Farbstil übernommen habe. Das ist also das Blau , das wir eigentlich wollen. Wir können es blau nennen oder wir können es tatsächlich auf primär ändern und dann können wir auf Stile erstellen klicken. Jetzt erstellt dieses Plugin diese Styles Foundation-Ordner hier oder in der Kategorie und unter Primary. Wir haben jetzt all diese Farben. Nun, das Hexcoe, das wir kopiert haben, sind vier primäre 500, und es stammt von diesem Farbstil, den ich erstellt habe Nehmen Sie sich hier ruhig eine Sekunde Zeit und richten Sie das ein. Und was Sie hier auch tun können ist, dass Sie die Palette tatsächlich abrufen können, indem Sie hier auf Palette klicken und dasselbe in Ihre Designdatei einfügen Das macht es Entwicklern einfacher , Ihr Farbschema anzusehen, nachdem Sie es zusammengestellt haben, und ich empfehle, alle Ihre verwendeten Paletten in Ihren Styleguide aufzunehmen Ich werde diesen Vorgang noch ein paar Mal wiederholen, einmal für die Sekundärfarbe, dieses Orange Da haben wir's. Benennen Sie es in sekundär um und verwenden Sie Materialdesign, erstellen Sie Stile, holen Sie sich die Palette, Hoppla Ich füge den Code und stelle sicher, dass ich ihn hier sekundär nenne Dann drücke ich auf „Stile erstellen“ und hole mir die Palette Und es wird einfach über den anderen eingefügt. Wir wollen weitermachen und wir wollen nur, dass es jetzt über das andere geklebt wird, also werde ich es hier aus dem Weg räumen Da haben wir es. Das ist unsere Sekundärfarbe. Ich habe die schwarze Farbe eingegeben, die wir haben, und wir können diesen einen Text benennen und ihn für unsere Textilien verwenden. Jetzt sind diese alle gleich . Wir brauchen sie nicht wirklich. Wir können also tatsächlich weitermachen und einfach alles löschen, was 600-900 Erstellen Sie Stile, holen Sie sich die Palette hier, räumen Sie das aus dem Weg Lassen Sie uns alles zwischen 600 und 900 löschen , weil sie so ziemlich alle den gleichen Farbton Und bei meinem sekundären Text, 600 bis 900, wir Shift und wählen alle aus und löschen diese Stile Das ist alles was wir brauchen. Für die Hintergrundfarbe kopiere ich einfach die Muschelfarbe und füge einen Stil namens Hintergrund und füge den Hex-Code hier Jetzt gefällt mir nicht wirklich, dass es diesen Foundation-Ordner oder diese Kategorie gibt. Wir brauchen ihn nicht wirklich. Also werden wir hier alle primären sekundären Textstile auswählen primären sekundären Textstile und sie außerhalb dieses Ordners oder dieser Kategorie verschieben, und wir werden weitermachen und sie entfernen. Und für diesen werde ich weitermachen und ihn so umschreiben, dass er wie folgt groß geschrieben wird Jetzt haben wir all diese Stile , die dieses Plugin für uns eingerichtet hat Wir haben eine Reihe verschiedener Grautöne für unseren Text, die wir verwenden können, für unsere Sekundär - und Primärfarbe und eine Hintergrundfarbe, die wir verwenden können. Lassen Sie uns für diese einen Abschnitt hinzufügen. Wir können sie zusammenfassen und ein Farbschema wie dieses erstellen . Es ist also übersichtlich organisiert. Und so verwenden wir Plug-ins, um unseren Projekten unsere Stile hinzuzufügen Jetzt sind wir bereit, Farben in unserem Projekt zu verwenden. Lassen Sie uns in der nächsten Vorlesung darauf zurückkommen , auch unsere Textilien anzuwenden. 18. Textstile hinzufügen: Habe unsere Farbstile. Jetzt wollen wir unsere Textilien hinzufügen. Ich habe diese beiden Schriftarten für meine Überschrift und dann diese für meine Hauptschrift ausgewählt . Sie können gerne die Schriftart verwenden , die Sie von früher mögen Ich nehme die beiden. Auch hier können Sie gerne weitermachen und dieselben Farben auftragen. Dies sind Google-Schriftarten, die automatisch zu Ihrer Figma-Datei hinzugefügt werden sollten automatisch zu Ihrer Figma-Datei hinzugefügt werden , sodass Sie keine Schriftarten herunterladen müssen Was tun wir, um diese auf unser Projekt anzuwenden? Zuerst drücke ich die T-Taste auf meiner Tastatur, oder Sie können von hier aus T wählen und hier einen Text und eine Überschrift schreiben. Ich werde meine Überschriftenschriften darauf anwenden und die Schriftgröße auf 16 ändern. 16 ist eine gute Basisschrift, die normalerweise für Web- und Mobilprojekte verwendet wird. Und dann skalieren wir unsere Schrift von 16 Punkten aus nach oben oder unten. Das ist ein gut zu verwendendes System und es funktioniert im Allgemeinen auf den meisten Geräten. Jetzt werde ich diesen duplizieren, indem ich Befehl D drücke, sodass wir ein Duplikat davon haben. Schieb es hierher und ändere es in Körper. Also, indem Sie einfach doppelklicken und den Text ändern. Und alles, was ich tun werde, ist die Schriftfamilie hier in Noto Sans zu ändern , was ich für den Hauptteil verwende Gehen Sie auch hier weiter und wenden Sie Ihre Schriftfamilie an, falls es sich um eine andere Für mich werde ich diese beiden verwenden. Um diese nun in Texte umzuwandeln, müssen wir sie nur noch auswählen, hier zur Typografie gehen, Stile anwenden und Plus drücken Und wir werden weitermachen und aus diesem Text einen Stil erstellen. Und wir können es nennen, sagen wir, auch wenn du willst, kannst du ihm eine Beschreibung geben, du musst es aber nicht und ich erstelle einen Stil. diesem Haupttext ist nun ein Stil geworden, zu dem wir die Verknüpfung von hier aus aufheben können, wenn Sie Änderungen daran vornehmen oder den Stil trennen möchten Änderungen daran vornehmen oder den Stil trennen Oder wenn wir irgendwo auf unserer Leinwand klicken, können wir sehen, dass dieses Textil auch hier hinzugefügt wurde. Eine andere Möglichkeit, ein Textil zu erstellen, besteht darin, hier auf Plus zu klicken und ihm dann einen Namen zu geben die Eigenschaften auszuwählen, also die eigentliche Schriftfamilie. Auf diese Weise müsste ich nach Noto Sans suchen. Nehmen wir an, ich möchte ein mutiges Bild machen. Also wähle ich hier Fett und nenne es dann Fettdruck und wähle die Schriftgröße, die 16 ist. Und so habe ich jetzt zwei Textilien. Einer heißt Körper mit einem Pixeltonsensor mit 16 Punkten, und dann haben wir einen fett gedruckten. Nehmen wir an, ich möchte den Text, den ich hier habe, in den fett gedruckten Text ändern . Wir klicken einfach auf unser angewendetes Textil und ändern es in das fett gedruckte. Nehmen wir an, wir möchten jederzeit Änderungen an diesem fett gedruckten Material vornehmen, wir wollen es noch mutiger machen Das können wir hier tatsächlich anwenden. Und wie Sie sehen können, wurde es auch dort angewendet. Da haben wir es also. Also, so kreiert man Textilien in Figma. Und natürlich gibt es Plugins, die dir helfen, ein System für deinen Text einzurichten , denn im Moment stehen wir am Anfang unseres Projekts und wollen mehrere Schriften, und wollen mehrere Schriften die wir an mehreren Stellen verwenden können Sie möchten also eine größere Schrift, vielleicht für die Titel auf Ihrer Seite, dann möchten wir eine kleinere Schrift oder eine mittelgroße Schrift für, sagen wir, die Beschreibung, und dann möchten Sie eine kleinere Hauptschrift für den allgemeinen Gebrauch. Es ist immer gut, wenn in Ihren Projekten eine Schriftskala oder eine Textskala angewendet wird, und wir werden im nächsten Abschnitt zurückkommen um uns mit Schriftskalen zu befassen und zu sehen wie wir das Plug-In dafür verwenden können , um sie schneller einzurichten. 19. Typescale verwenden: Jetzt haben wir also diese beiden Textilien kreiert. Ich mache weiter und halte die Umschalttaste gedrückt , wähle beide aus und lösche sie. Und auf diese Weise können wir weitermachen und einen mit Typescales einrichten Jetzt gibt es ein Plugin, mit dem Sie das ganz einfach machen können. Alles, was Sie tun müssen, ist auf die Registerkarte Aktionen oder das Aktionsmenü zu gehen die Registerkarte Aktionen oder das Aktionsmenü und nach Typescale zu suchen Ich mag diesen mit dem gelben Hintergrund im Logo Also werde ich weitermachen und das öffnen. Und es gibt verschiedene Systeme, die Sie in Ihrer Typskala verwenden können Wenn Sie jetzt auf typescale.com gehen, können Sie sich das in Aktion ansehen, um zu sehen, wie das aussieht Ich kann es sogar in die Noto Sans-Schriftart ändern, die ich verwende. Nur um zu sehen, wie das aussehen würde. Also das ist meine Schrift. Die Körpergröße beträgt 16 Pixel und ich kann verschiedene Skalen verwenden. Beginnend mit einer kleinen Sekunde , also einer kleineren Lücke zwischen den verschiedenen Größen, gibt es eine große Sekunde mit einem größeren Unterschied. Und wenn Sie zur großen dritten und zur perfekten vierten Stufe aufsteigen, sehen Sie einen größeren Unterschied. Heute sehen wir in der Regel, dass bei Projekten ein großes Drittel, ein perfektes Drittel oder vielleicht sogar ein kleines Drittel verwendet wird. Ich denke, das große Drittel ist eine gute Option. Nun, für unsere Hauptschrift brauchen wir eigentlich nicht so viele Schriften. Es ist wirklich so , dass wir für die Überschrift unterschiedliche Schriftarten benötigen. Oder verschiedene Skalen. Für den Körper könnten wir uns vielleicht einfach für eine etwas größere und eine etwas kleinere entscheiden . Also vielleicht insgesamt drei. Nun zu unserer Überschrift, das wäre also diese hier, Glasfaserbrötchen. Das sind die Schriften , die wir einrichten werden. Sie können sie auch in Pixeln sehen. Und wir können es immer abrunden, also verwenden Sie 61 Pixel für H eins, verwenden Sie 49 Pixel oder 48 Pixel für H zwei, 39 Pixel für H drei und so weiter und so fort. Also wollen wir das mit diesem Typ-Scale-Plug-In einrichten. Figma. Und alles, was wir tun müssen, können wir Text auswählen, den wir haben, was in diesem Fall dieser Überschriftentext mit der ausgewählten Schriftart für die Überschrift von 16 Pixeln ist , und wir werden das große Drittel als Option wählen Und wählen Sie Rund bis zum nächsten ganzen Pixel, sodass wir keine Dezimalzahlen erhalten, und erstellen dann Typescale . Und da haben wir es Das Plug-In wird automatisch in unserem Projekt eingerichtet. Wir können sie einfach alle auswählen und sie hier nach unten verschieben. Und wenn sie alle ausgewählt sind, können Sie sie mit diesem lila Teiler etwas weiter voneinander trennen, indem Sie diesen Teiler hier verwenden Und ich werde diesen sehr kleinen hier loswerden . Das brauchen wir nicht wirklich. Und weil wir hier einen Überschriftentext verwenden, werden wir den 13-Pixel-Text wahrscheinlich auch nicht benötigen. Wir werden diese hier verwenden, beginnend mit H One. Also nennen wir das H eins oder H zwei, H drei, vier, fünf, sechs und dann nennen wir es R sieben, zwei. Das zu tun, weil dieses Plugin momentan keine Styles für uns erstellt. Was wir also tun müssen, ist hier die Schriftart auszuwählen. Und nochmal, geh rüber und nenne das hier H sieben. Kreieren Sie Stil und arbeiten Sie sich bis H eins hoch. Kreieren Sie also ein anderes, nennen Sie es Alter sechs, kreieren Sie Stil. Für diesen machen wir plus H fünf plus H vier. Nehmen Sie sich also eine Sekunde Zeit, um das mit mir zu machen. Drei weitere sind noch übrig. Dieser ist drei Jahre alt. Und das sind die Namen dafür , damit wir wissen, was sie bedeuten, wenn wir sie anwenden . Alter zwei, und dieser wird H eins sein. Hoppla, H eins, da haben wir's. Wenn Sie jetzt auf unsere Leinwand klicken, sehen wir, dass wir auch all diese Textilien haben Sie sind nicht wirklich organisiert. Wir können sie auch zu einer Gruppe zusammenfassen. Und wenn Sie das tun möchten, können wir tatsächlich die erste auswählen, die Umschalttaste gedrückt halten, wie die letzte, rechten Maustaste klicken und Neuen Ordner hinzufügen wählen und diese oder Überschriftenschriften wie diese nennen. Jetzt befinden sie sich also alle unter diesem Überschriftenordner. Wunderschön. Jetzt wollen wir dasselbe mit unserer Körperschrift machen. Lassen Sie uns dieselbe Plugin-Typskala ausführen. Und auch hier wollen wir nur eine Schrift nach oben und eine Schrift nach unten wählen. Wir wollen nicht zu viele machen und auch nicht auf das nächste Pixel runden und auch Major Third machen. Erstellen Sie eine Schriftskala. Jetzt haben wir drei verschiedene, etwas größere, eine etwas kleinere. Ich werde sie wieder ein bisschen voneinander trennen. Und wir werden dasselbe tun. Wir werden den ersten auswählen, diesen unseren Körper nennen, LG, um für Large, Create Style zu stehen , diesen einen. Wir machen Plus und nennen das einfach unseren Körper, kreieren Stil, und wir machen wieder hier Plus und machen Body SM für klein. Oder du kannst diesen Text auch Fußzeilentexte nennen. Wirklich funktioniert beides. Nenn es Footer. Nun, eine Sache, die ich Ihnen empfehle ist, sie zuerst so ordentlich zu organisieren und sie auch für Ihre Textschriften zu duplizieren, und wir werden sie hier alle trennen Wir werden sie alle auswählen und Fett als Stärke festlegen und dann auch die Schraubenstile erstellen Also machen wir bei diesem ersten Exemplar Plus und nennen es Body G Bold. Stil kreieren. Und hier werden wir Stil kreieren, Body Dash Bull, Stil kreieren, und hier werden wir Footer Dash Bull machen , Stil kreieren Nun, sie sehen nicht wirklich gut aus, so wie wir sie hier haben. Es ist nicht wirklich hilfreich. Also statt dieses Platzhaltertextes von Quickfox ändere diesen in H eins, ändere diesen in H zwei. Ändert sich zu H drei. Nochmals, das ist nicht nur für dich. Dies gilt auch für die Entwickler , die sich Ihre Designsysteme ansehen und die Farben und Stile für den Text anwenden werden Ihre Designsysteme ansehen und die Farben und Stile für den Text anwenden , den Sie haben. Damit Sie die Benennungskonvention hier richtig festgelegt haben, werden wir dasselbe tun , ihnen die Namen geben, die sie haben, also das ist der Körper LG. Das ist nur ein Körper. Dieser ist die Fußzeile. Und hier hast du es erraten. Wir werden das in Body G Bold umbenennen . Dieser wird Body Dashbl sein und dieser wird Footer Dashbl sein Organisiere sie ordentlich. Wir werden sie auch alle hier im rechten Eigenschaftenbereich unter dem Haupttext platzieren , einen neuen Ordner hinzufügen und diesen Ordner Body nennen Wir haben also unsere Schriftarten für Überschriften. Wir haben hier unsere Textschriften als Textilien eingerichtet, die sofort verwendet werden können, und organisieren sie alle in einem Abschnitt, zeichnen einen Abschnitt rund um diese Texte und nennen das unsere Textstile. Stellen Sie sie hier einfach ordentlich als Referenz ein. Unser Styleguide ist also so ziemlich fertig. Wir sind bereit, mit der Einrichtung unseres Projekts zu beginnen und unsere Farben und Typen nach Bedarf anzuwenden. Um das zu tun, werde ich hier eine neue Seite einrichten, diese unsere Mockups nennen, und hier werden wir unsere Mockups machen Kommen wir also zurück zur nächsten Vorlesung, um damit anzufangen 20. Stile vs Variablen: Bevor ich fortfahre, möchte ich auch auf lokale Variablen eingehen. Jetzt haben wir Stile und wir haben auch Variablen. In unseren Variablen können wir auch Dinge wie Farbvariablen und Zeichenkettenvariablen einrichten , die wir für Dinge wie Schriftfamilien usw. verwenden können. Nun hat die Verwendung von Variablen zumindest zwei Vorteile gegenüber Stilen für unsere Farben. Und diese beiden sind die Nummer eins Sie können ein komplizierteres Designsystem haben und Variablen miteinander verbinden. Nehmen wir an, Sie erstellen eine Oberflächenfarbe, die Sie für Ihre Schaltflächen verwenden möchten. Indem Sie innerhalb Ihrer Variablentabelle ein Designsystem darauf aufbauen, können Sie genauer festlegen wie diese Farben verwendet werden sollen. Und als Teil davon können Sie auch verschiedene Modi verwenden. Wenn Sie also einen Dunkelmodus wünschen, können Sie diesen mithilfe von Variablen einfacher einrichten als mit Stilen. Und der zweite Vorteil ist, dass Sie tatsächlich das sogenannte Scoping verwenden können tatsächlich das sogenannte Scoping verwenden Wenn Sie also, sagen wir, eine Farbe erstellen möchten, die nur auf Ihre Ränder angewendet werden sollte nur auf Ihre Ränder angewendet werden Das ist also der Umriss, sagen wir Ihre Schaltflächen, Sie können ihn so gestalten, dass Sie mit Variablen angeben, wo diese Farbe verwendet werden soll , sodass es nicht sehr kompliziert ist , Farben auszuwählen. Angesichts dieser Vorteile empfehle ich persönlich, Farben als Variablen einzurichten. Aber das hängt wirklich von Ihren persönlichen Vorlieben ab, und vielleicht arbeiten Sie mit einem Team zusammen, das bereits Stile verwendet und damit gut umgehen kann. Dann kannst du diesen Schritt gerne überspringen und mit Stilen fortfahren. Und falls Sie weiterhin Variablen einrichten möchten, müssen Sie nur nach den Stilen suchen, die wir erstellt haben Sie müssen einfach nach den Stilen für Variablen suchen und diese einstecken. es einrichten, werden wir weitermachen und alle Stile erkennen , die Sie bisher erstellt haben. Sie können ihnen einen Namen für die Sammlung geben, sodass sie sich alle zusammen in der Farbsammlung befinden, und dann Stile in Variablen umwandeln. Wenn ich jetzt dieses Plugin schließe, können Sie unter den Sammlungen hier sehen, dass wir eine Farbsammlung haben, und all diese Schriften sogar ihre Gruppierung, wurden in die Variablentabelle übertragen Jetzt haben wir hier immer noch Stile. Wenn wir also, sagen wir, ein Rechteck erstellen, wenn wir die Farbe auswählen, sehen wir, dass wir diese Variablen haben, und Sie werden wissen, dass es sich um eine Variable handelt, weil sie hier eine quadratische Form hat , und diese mit einem Kreis sind eigentlich Stile. Nun, da ich mit Variablen weitermache, benötige ich keine Stile mehr, also werde ich weitermachen und all diese Stile löschen. Und fahren Sie fort, indem Sie einfach aus den Variablen auswählen. Nehmen wir an, für diese Texte hier werden wir die Textfarben nicht auf eine rechteckige Füllung anwenden . Hier können Sie das Scoping verwenden, indem Sie in Ihre Variablen gehen und dann, sagen wir, zu den Textvariablen Halten Sie die Umschalttaste gedrückt, wählen Sie alle aus und klicken Sie auf diese Option , um den Bereich nur für die Füllung von Texten zu definieren, nicht für Konturen oder Effekte Was jetzt für unser Rechteck passieren wird, ist, dass wir diese Textoption nicht mehr sehen werden. Aber wenn wir einen Text erstellen, sagen wir hier und wählen die Füllung, werden wir diese Textoptionen sehen, und da haben wir sie. Das ist also einer der Vorteile von Variablen und der Grund, warum ich während des gesamten Projekts weiterhin Variablen verwenden werde während des gesamten Projekts weiterhin Variablen verwenden . Aber auch hier geht es richtig los 21. Rahmenlayout-Raster erstellen: Es ist an der Zeit, unsere Modelle für unser Design zusammenzustellen , und ich habe hier meine Wireframes geöffnet. Wenn Sie also Ihre Wireframes griffbereit haben, legen Sie sie einfach vor sich hin damit Sie sie für Ihre Modelle verwenden können Ich werde hier mit der Anmeldeseite beginnen und mich dann für alle anderen Seiten nach rechts vorarbeiten hier mit der Anmeldeseite beginnen und mich dann für alle anderen Seiten nach rechts vorarbeiten mich dann für alle anderen Seiten nach rechts vorarbeiten Und es gibt wahrscheinlich ein paar Seiten , die ich Ihnen als Aufgabe hinterlassen werde damit Sie sie in Ihrer Freizeit erledigen können Gemeinsam werden wir an den Seiten arbeiten , die wir hier haben. beginne also mit der Anmeldeseite und gehe dann zu der Mockups-Seite über, die ich Wenn Sie in Ihrem Projekt keine Mockups-Seite haben, können Sie eine neue Seite erstellen, indem Sie hier auf Plus klicken und eine neue Seite hinzufügen und sie dann in Mockups umbenennen, sodass Sie Ihre Modelle organisieren und alle übersichtlich sie dann in Mockups umbenennen, sodass Sie hier aufbewahren können können Sie eine neue Seite erstellen, indem Sie hier auf Plus klicken und eine neue Seite hinzufügen und sie dann in Mockups umbenennen, sodass Sie Ihre Modelle organisieren und alle übersichtlich hier aufbewahren können. unser Projekt zu starten und unseren Anmeldebildschirm zu erstellen, benötigen wir Frames hilft uns im Wesentlichen dabei, unsere Designs für jeden Bildschirm zusammenzustellen unsere Designs für jeden Bildschirm zusammenzustellen In der Regel verwenden wir also für jeden Bildschirm einen Rahmen. Jetzt können Sie auf Frames zugreifen, indem Sie hier in der Toolbox auf Frame klicken oder F auf Ihrer Tastatur drücken. Und dann finden Sie auf der rechten Seite einige Standardoptionen, die normalerweise angezeigt werden. Sie haben einige Standardgrößen für Android-iPhones und einige Tablet-Größen. Und was uns interessiert, sind die Desktop-Größen. Und normalerweise entscheide ich mich hier für die Desktop-Größe . Da haben wir's. Durch Anklicken habe ich einen Rahmen mit einer Desktop-Größe erstellt. Das sind 14 40 mal 1024 Pixel. Jetzt können Sie natürlich auch Rahmen zeichnen. Wenn Sie also F auf der Tastatur drücken, können Sie einen benutzerdefinierten Rahmen für jede beliebige Größe zeichnen . Wenn Sie also die Umschalttaste gedrückt halten, während Sie Ihren Rahmen, Ihre Rechtecke oder etwas anderes zeichnen, werden Breite und Höhe jederzeit Wenn Sie also die Umschalttaste gedrückt halten, während Sie Ihren Rahmen, Ihre Rechtecke oder etwas anderes zeichnen Ihren Rahmen, Ihre Rechtecke oder gesperrt, werden Breite und Höhe sodass Sie dieselbe Breite und Höhe haben, sodass Sie, wenn Sie möchten, einen quadratischen Rahmen zeichnen können Das ist auch ein praktischer Tipp, den Sie beachten sollten. Mit Shift One können Sie nach Belieben zoomen, um alles zu sehen, was Sie haben. Also bin ich einfach schnell zu diesem Desktop-Rahmen zurückgekehrt , den ich habe. Ich werde hier ein wenig herauszoomen und doppelklicken , um es in Signup umzubenennen Der Name dieses Frames ist jetzt also Anmeldung und auf diese Weise wissen ich und alle anderen , die sich dieses Design ansehen, dass dies die Anmeldeseite ist Und wenn sie es finden müssen, können sie es auch im Ebenenbedienfeld sehen Von dort aus können Sie auch doppelklicken, um den Namen zu ändern. Fantastisch. Was haben wir auf dieser Seite? Wir haben zwei Abschnitte auf der Seite. Wir haben einen Bildbereich hier auf der rechten Seite und dann auf der linken Seite haben wir eine E-Mail. Wir haben den Titel des Unternehmens zusammen mit beschreibenden Text darüber, was Wander Weiss ist oder warum sie ein Konto einrichten sollten, gefolgt von einigen Eingabefeldern und den Anmeldeschaltflächen sowie einigen Oder wir haben ein Google-Zeichen und eine Google-Schaltfläche und dann auch ein Telefonnummernschild und ein Feld. Lassen Sie uns also mit diesem Design beginnen. Als erstes möchten wir unseren Bildschirm in diese beiden Abschnitte aufteilen und diese Frames klar unterteilen. Was wir tun können, ist ein sogenanntes Layoutraster zu verwenden. Um nun ein Layoutraster einzurichten, müssen Sie nur noch auf Ihren Rahmen klicken und dann im Eigenschaftenfenster zu der Stelle gehen, an der dort Layoutraster steht , und dann eines wie dieses hinzufügen. Normalerweise erhalten Sie ein solches Raster, aber was uns interessiert, das am häufigsten verwendet wird , ist ein Stützenraster. Also werden wir den Typ auf ein Stützenraster umstellen. Und dann klicken wir auf die Layoutrastereinstellungen , um einige benutzerdefinierte Einstellungen anzuwenden. Normalerweise sehen wir in einem Webprojekt wie diesem eine Anzahl von 12 für unsere Spalten. Wir haben also 12 Spalten auf der Seite. Und das ist eher eine Standardgröße oder ein Standardraster, aus dem Websites bestehen, das aus 12 Spalten besteht. Und Sie werden Seiten sehen, die diese 12 Spalten unterteilen , sodass auf der rechten Seite, auf der linken Seite und in der Mitte unterschiedliche Inhalte angezeigt auf der rechten Seite, auf der linken Seite und in der Mitte unterschiedliche Inhalte werden. Nun, da die Ränder die Abstände von links und rechts sind , verwende ich normalerweise gerne ein Acht-Punkte-Rastersystem, dem Sie im Grunde alle Abstandsvielfachen der Zahl Acht beibehalten möchten alle Abstandsvielfachen der Zahl Acht Übereinstimmung damit ein Rand von 48 Pixeln ein ziemlich guter Spielraum Jetzt ist Dachrinne der Abstand zwischen den einzelnen Spalten. Und derzeit ist es bei 20. Aber wenn ich dieses Acht-Punkte-Rastersystem verwende, nehme ich acht mal drei oder 24. Wunderschön. Sie können hier auch die Deckkraft verringern oder sogar die Farbe Ihres Rasters ändern, wenn Sie möchten Ich mache 5%, damit es ein bisschen heller ist. Wir brauchen es nicht, dass es so stark ist. Jetzt können Sie Ihr Grid hier jederzeit ein- und ausschalten , sodass Sie es jederzeit aus- oder einschalten können wenn Sie schnell darauf zugreifen möchten Also haben wir unseren Rahmen eingerichtet. Wir haben darin ein Raster eingerichtet. Kommen wir im nächsten Abschnitt zurück, um mit der Zusammenstellung dieser Abschnitte zu beginnen 22. Anmeldeseitenspalten: Zeit, unsere Anmeldeseite zusammenzustellen. Also werden wir hier zwei Frames einrichten, einen für das Bild, das wir auf der rechten Seite haben werden. Also suchen wir uns ein schönes Bild, das wir verwenden können, und dann haben wir die linke Seite , auf der sich der Inhalt befindet. Also zurück zu unserem Projekt. Ich drücke F auf der Tastatur und zeichne einen Rahmen wie diesen. Und jetzt, obwohl du es nicht wirklich sehen kannst , weil es noch keine Füllung gibt. Ich habe hier einen Rahmen und ich ändere ihn, und wir werden hier vier Spalten verwenden. Ich glaube sogar, dass fünf funktionieren. Und Sie werden feststellen , dass bei aktivem Raster die Dinge sofort einrasten, die Dinge sofort einrasten wenn Sie sich den Rändern nähern. Und was die Höhe angeht, Sie sicherstellen , dass sie die volle Höhe hat. Und das können Sie auch von hier aus überprüfen. Sie können sehen, dass es X Null und Y Null ist, was die obere linke Ecke ist. Und für die Höhen sind es auch 1024. Das ist großartig. Also machen wir weiter und drücken F, erstellen einen weiteren Frame, und dieser wird auf der anderen Seite sein. Also hier drüben, das sind sieben Raster. Also haben wir jetzt zwei Frames, die die Seite teilen. Und wir werden weitermachen und vorerst das Raster ausblenden und uns auf unser Design konzentrieren Jetzt haben wir die Aufteilung, wohin das Bild und der Inhalt der Anmeldung gehen sollen Für die Füllung füge ich hier eine Füllung hinzu , damit wir dem Hintergrund unseres Rahmens eine Farbe hinzufügen können . Und ich werde die Hintergrundvariable auswählen , die ich erstellt habe. Das wird also für den Hintergrund verwendet. Anmeldeseite, und dann wollen wir hier ein paar Elemente hinzufügen Also wollen wir hier einen Text hinzufügen, indem wir das Tiki verwenden, um nach rechts zu wandern Und dann wählen wir aus unseren Stilen, versuchen wir es mit H zwei. Das ist eine gute Schriftgröße. H eins ist vielleicht etwas zu groß, daher ist es wahrscheinlich am besten, H zwei für dieses zu wählen. Es sieht gut aus. Jetzt werde ich mir nicht zu viele Gedanken über die Ausrichtung und all das machen. Im Moment werde ich einfach alles auf die Mitte ausrichten. Und ich werde diesen Text duplizieren, indem ich die Alt-Taste gedrückt halte und vom Text wegziehe , sodass ich ihn dupliziere und einen neuen erstelle Und dieser wird als Beschreibung dienen. Also werden wir uns wahrscheinlich für eine H-Six entscheiden, also versuchen wir es mit Body Large für diesen. Und lassen Sie uns ein Buch schreiben. Tolle Reiseziele und Pakete auf einmal. Das wird also der Slogan sein, den wir verwenden werden. Und ich verwende hier Alt, um die Größe dieses Textfeldes von links und rechts Und wir werden den mittleren Text so ausrichten, dass alles, was da drin ist, in der Mitte ausgerichtet ist , was den Text angeht Für die Vanderbis-Font werde ich eine der Sekundärfarben ausprobieren, die wir Ich mag es etwas dunkler, aber nicht ganz so Ich finde, Secondary 800 sieht richtig gut aus für das Logo hier oder den Text. Und wenn wir ein Logo haben, können wir es natürlich hier hinzufügen. Aber für dieses Projekt werden wir den Text als Logo selbst verwenden . Und für den Beschreibungstext verwenden wir Text 400. Es ist also subtil, grau, es ist nicht ganz dunkel. Es ist etwas heller und schont auch die Augen. Okay, das sieht gut aus. Jetzt wollen wir hier zwei Eingänge oder sogar drei, einen für Telefonnummer zwei und dann zwei Tasten hier. Eine Anmeldung, eine Anmeldung bei Google. Diese Eingaben werden nun Teil eines Designsystems, das wir während unseres gesamten Projekts verwenden werden Deshalb ist es wichtig, dass wir eine ansprechende Eingabe entwerfen , die wir überall verwenden können und nicht überall, wo wir eine Eingabe benötigen, neu erstellen müssen Und idealerweise möchten wir Autoayout verwenden , um nicht nur diese Eingabe zusammenzustellen, sondern auch den Inhalt hier mithilfe eines automatischen Layouts einzurichten hier mithilfe eines automatischen Layouts Und wir werden in der nächsten Vorlesung darauf zurückkommen , um die Vorteile dieser Vorgehensweise zu untersuchen und auch unsere Eingabefelder einzurichten 23. Farbkontrastprüfung: Und Sie platzieren Farben übereinander. Als ob wir diesen Text über diesem anderen Hintergrund haben, der eine etwas andere Farbe hat. Es ist immer gut, sicherzustellen, dass wir Kontrast überprüfen, nur um sicherzugehen, dass er zugänglich ist, und diese Farbkombinationen sind wirklich gut zu verwenden, besonders wenn es um Dinge wie Schaltflächen usw. geht , um sicherzustellen, dass die Leute sie tatsächlich sehen können und sie leicht lesbar sind. zu tun, hat Figma diese nette Funktion, mit der Sie alles auswählen können Lassen Sie uns diesen herstellerspezifischen Titel hier auswählen. Wenn Sie zum Abschnitt „Füllen“ gehen. Wenn Sie es jetzt auswählen, werden wir natürlich aufgefordert, aus den Bibliotheken auszuwählen. Wenn Sie jedoch zu Benutzerdefiniert wechseln, sehen Sie dieses kleine Häkchen beim Farbkontrast, das uns diese Linie zeigt, und es zeigt uns, wie das Verhältnis unserer Vordergrundfarbe zu unserer Hintergrundfarbe ist das Verhältnis unserer , und Sie möchten natürlich sicherstellen, dass es dem Kontraststandard entspricht, was in diesem Fall der Fall ist. Nun, Sie müssen das nicht tun, aber wenn Sie, sagen wir, hier eine Farbe auswählen würden, wo sie den Farbkontrast-Check nicht erfüllt, können Sie sehen, dass das Verhältnis viel näher beieinander liegt , und das ist nicht gut. Und Sie werden hier dieses kleine Symbol sehen , das besagt, dass der Kontraststandard nicht erfüllt wurde. Und wenn Sie weitermachen und darauf klicken, wird sichergestellt, dass Ihre Farbe hier dem Farbton entspricht, der dem Standard am nächsten kommt , der hier ungefähr bei drei zu eins liegt. Natürlich können Sie das in diesen Bereichen jederzeit anpassen. Wenn Sie eine dunklere Farbe wünschen oder sagen wir, Sie wählen hier die Farbe , die am ehesten passt, und das Gleiche. Wenn Sie Weiß auswählen, sucht es tatsächlich nach dem Grau , das dem Farbkontrast-Check am nächsten kommt. Das sollten Sie immer im Hinterkopf behalten , wenn Sie mit Ihrem Projekt beginnen und Farben vor unterschiedlichen Farbhintergründen anwenden. Jetzt werde ich Z einfach befehlen all das rückgängig zu machen und zur ausgewählten Farbe zurückzukehren ausgewählten Farbe Lassen Sie uns zurückkommen und auf unserer Anmeldeseite fortfahren 24. Auto-Layout verwenden: habe Designs normalerweise ohne automatisches Layout zusammengestellt , dann hoffe ich, dass dieser Vortrag Ihre Meinung wirklich ändert und Ihnen auch die Vorteile zeigt, warum Sie Autoayout fast überall in Ihren Designs verwenden müssen Autoayout fast überall in Ihren Designs verwenden Nehmen wir als Beispiel an, ich habe hier eine Reihe von Eingaben, die wir in unserem Design platzieren möchten Also erstelle ich die Impos gerade nicht. Ich zeige dir hier nur ein Beispiel. Wenn ich eine Reihe von Eingaben habe, sogar eine Schaltfläche, sagen wir, eine weitere Eingabe hier, sind diese nicht in strukturierten Formaten organisiert. können ein paar Dinge passieren , bei denen ich versehentlich Objekte verlege oder falsch ausrichte Und wenn ich diesen hier hin verschieben möchte, sagen wir, woanders hin, also ich will ihn ein bisschen weiter nach unten verschieben, muss ich diesen auch verschieben Das Gleiche hier. Wenn ich diesen zum Beispiel etwas höher bewegen möchte, müsste ich überall in meinem Design Anpassungen vornehmen. Und wenn das jetzt zu hoch geht, ist das in der Nähe dieser Texte hier und ich muss diese Texte verschieben. Es ist also eine Menge manueller Arbeit erforderlich Rahmen innerhalb Ihrer Designs manuell anzupassen. Selbst in der Entwicklung ist es jetzt systematisierter, wo Dinge in einem strukturierten Format platziert werden Und genau hier hilft das automatische Layout. Wenn ich auf diesen Rahmen klicke und Shift A auf meiner Tastatur drücke, wird der Rahmen in ein automatisches Layout umgewandelt. Wie Sie sehen können, wurde einfach alles übersichtlich organisiert. selbst, und es sieht allerdings nicht ganz so aus, wie wir es wollten Also werde ich Command Z drücken, um das rückgängig zu machen. Ich werde dir einen anderen Weg zeigen , der ein bisschen intelligenter ist. Und wenn Sie mit der rechten Maustaste auf Ihren Rahmen klicken und stattdessen zu weiteren Layoutoptionen gehen und ein automatisches Layout vorschlagen, wird FIGMA weitermachen und tatsächlich hier in Ihren Rahmen schauen und feststellen , dass Sie eine Menge verschiedener Dinge haben, für die möglicherweise ein zusätzliches automatisches Layout erforderlich Nun hat FIGMAS drei automatische Layouts erstellt, eigentlich vier, wenn man bedenkt, dass dies der Hauptrahmen ist, der auch in vier, wenn man bedenkt, dass dies der Hauptrahmen ist, einen automatischen Layoutrahmen umgewandelt wurde umgewandelt Also ich habe hier einen für diese beiden Tasten oder Eingänge oder was auch immer Und diese wurden auch in ein automatisches Layout eingefügt, und sie haben alle ihren eigenen Abstand zwischen ihnen , der für dieses Layout 21 Pixel oder die Lücke tatsächlich beträgt. Und dieser hier hat eine Lücke von 124, also haben sie alle unterschiedliche Lücken dazwischen. Ich erinnere mich, dass ich vor einigen Vorlesungen erwähnt habe, dass ich in der Regel empfehle, das Acht-Punkt-Rastersystem zu verwenden, auch wenn es um den Abstand zwischen den Elementen geht in der Regel empfehle, das Acht-Punkt-Rastersystem zu verwenden . Also hier drüben mit meinem automatischen Layout für die Wander-Ois und dem Untertitel oder der Beschreibung würde ich empfehlen, entweder 16 Pixeln zwischen diesen beiden oder einen Abstand von 24 Pixeln 16 sieht gut aus, also werde ich es bei 16 belassen. Nun zum Inhalt hier drüben, wir können ihn bei 60 belassen. Ich brauche das noch nicht wirklich , weil wir unsere eigenen Eingaben erstellen werden. Nun werden Sie feststellen , dass bei Autolayout, wenn Sie Inhalt löschen, die Größe des automatischen Layoutrahmens entsprechend angepasst wird, sodass Sie alle Eigenschaften eines automatischen Layouts auf der rechten Seite sehen können , angefangen bei der Breite und Höhe sowie den Ausrichtungsoptionen, sodass Sie Objekte in Ihrem automatischen Layout tatsächlich mittig nach oben ausrichten können . Im Moment haben wir keine gleichmäßigen Abstände. Der Abstand zwischen all unseren Elementen in diesem automatischen Layout beträgt also 60 Pixel. Das heißt, wenn ich hier ein Element hinzufüge, wie ein Rechteck, wird es 60 Pixel von anderen Elementen haben . Das ergibt Sinn. Und dann haben wir hier unsere Ränder zwischen jeder Seite, der linken Seite, der Oberseite und der Unterseite. Das ist momentan aktiviert, weil wir so individuelle Abstände zwischen verschiedenen Seiten hinzufügen Das brauchen wir momentan nicht wirklich, also können wir weitermachen und gleichzeitig rechts und links eine Polsterung hinzufügen , indem wir diese Zahl hier verwenden, und wir werden die 48-Pixel-Polsterung verwenden, über die wir Als wir unsere Raster eingerichtet haben, werden wir hier das Gleiche dafür anwenden Aber für unsere vertikale Polsterung werden wir etwas höher ansetzen, also vielleicht 86 oder wir können 96 machen Sie haben also oben und unten mehr Abstand . Normalerweise haben Autolayout-Rahmen flexible Größen. Das heißt, wenn Dinge innerhalb eines automatischen Layoutrahmens schrumpfen, wie wir dieses Textjahr loswerden, wie Sie sehen können, schrumpft das automatische Layout, um dem Inhalt darin Ich drücke Command Z, um das rückgängig zu machen. Das liegt daran, dass wir derzeit Hug hier eingeschaltet haben. Aber wenn Sie tatsächlich zu einer festen Größe wechseln möchten, müssen wir nur Größe unseres Autolayout-Rahmens hier ändern, ihn wieder ganz nach unten bringen, und jetzt hat er eine feste Größe, was wir Aber das ist nicht immer der Fall, wie wir in der nächsten Vorlesung erfahren werden, wenn wir unsere Eingaben zusammenstellen unsere Eingaben Jetzt haben wir hier also einen Auto-Layout-Frame mit 1024 Pixeln als Höhe und einer festen Breite von 594 Pixeln, der formatiert ist Das Layout ist vertikal, was bedeutet, dass es vertikal ausgerichtet wird, wenn ich darin Elemente hinzufüge vertikal ausgerichtet wird Andernfalls, wenn ich horizontal wähle, werden die Dinge in verschiedene Richtungen gehen. Wir werden viele Layouts erstellen , sodass Sie verschiedene Anweisungen zur Verwendung dieser Layouts lernen. Wir können hier die Lücke zwischen verschiedenen Objekten sehen, unseren Rand von der Horizontalen nach links und rechts und den vertikalen Rand oder die Polsterung hier drüben. Das ist es also. Lassen Sie uns zunächst zu noch sexture zurückkehren, um mit der Zusammenstellung unserer Eingaben zu beginnen 25. Eingabefelder erstellen: Ich hoffe, die vorherige Vorlesung hat Ihnen eine Vorstellung davon gegeben , wie Sie Autolayout verwenden können Wenn nicht, mach dir keine Sorgen, wir werden es eine Menge benutzen. Sie werden also auf jeden Fall die Möglichkeit haben , es viel besser zu verstehen. Jetzt wollen wir hier einige Eingabefelder einfügen, eines für E-Mail, für Passwort. Wie machen wir das? Nun, wir können tatsächlich Felder mit Autoayout erstellen Alles, was wir tun müssen, ist T auf unserer Tastatur zu drücken und hier in unserem Frame zu klicken Moment nennen wir es Eingabe Oder noch besser, wir nennen es Platzhalter. Jetzt drücken wir Shift A oder klicken mit der rechten Maustaste und fügen Autoayout Und jetzt haben wir dafür ein automatisches Layout ohne Abfüllung links oder rechts in der Horizontalen oder Vertikalen Also wollen wir das tatsächlich ändern und eine Polsterung bei horizontal haben , lassen Sie uns 16 Pixel machen Und für unsere Vertikale versuchen wir es mit acht Pixeln und schauen, ob das gut ist Jetzt werden wir Umschalttaste gedrückt halten, diesen Titel und den Untertitel auch hier auswählen und erneut die Umschalttaste drücken, um ein weiteres automatisches Layout zu erstellen Auf diese Weise haben wir dieses Element in diesem hier. Jetzt können wir also zur Breite gehen und statt dieser festen Breite wählen wir Container füllen, sodass diese wählen wir Container füllen Eingabe die gesamte Horizontale einnimmt, die dieser gesamte Horizontale einnimmt, die übergeordnete automatische Layoutrahmen einnimmt. Denn auch hier wollen wir, dass alles konsistent ist. Jetzt fügen wir eine Füllung hinzu, sodass unsere Eingabe weiß ist, und wir fügen einen Eckradius von acht Pixeln um sie herum hinzu. Wir halten die Befehlstaste gedrückt, damit wir schnell Elemente innerhalb unseres automatischen Layoutrahmens auswählen können Elemente innerhalb unseres automatischen , wie diesen Text hier. Und statt „Body Large werde ich es auf „Nur Körper“ umstellen. Für unsere Eingabe benötigen wir nicht diese Größe, und wir möchten unseren Text auch linksbündig ausrichten. Ich fange an, zusammenzukommen. Zuletzt werde ich Text schreiben, vielleicht 200 für diese Platzhalterfarbe Und wenn wir dann tatsächlich Text darin geschrieben haben, können wir ihn vergrößern Alles klar, es ist ein bisschen klein für die Texteingabe. Also statt acht Pixeln, also statt acht Pixeln für unten und links für unten und oben, werde ich einen Abstand von 12 Pixeln versuchen, und ich denke, das ist eher eine typische Eingabegröße. Unser Input kommt also zusammen. Möglicherweise möchten wir einen Titel dafür hinzufügen, damit die Benutzer genau wissen, welche Informationen sie hier eingeben müssen. Drücken Sie dazu erneut T und schreiben Sie einen Titel wie diesen und halten Sie die Umschalttaste gedrückt, um diese beiden erneut auszuwählen, diese beiden hier, drücken Sie Shift A, und jetzt befinden sich auch diese beiden in einem Ato-Layout. Wir wollen nicht, dass diese Lücke hier so groß ist. Wir wollen eine kleinere Lücke, also können wir den Abstand hier einfach auf vielleicht acht Pixel ziehen . Sie können diesen Abstand auch von hier aus anpassen. Und dann wollen wir statt einer Ausrichtung von oben in der Mitte eine Ausrichtung von links nach oben vornehmen , sodass innerhalb dieses Layoutrahmens alles links davon ausgerichtet ist. Jetzt haben wir hier also dieses nette Platzhalter-Textfeld oder Eingabefeld mit einem Titel. Es sieht so aus, als ob etwas fehlt, und ich denke, das ist eine nette Umrandung der eigentlichen Eingabe Wählen Sie also das automatische Layout innerhalb dieses übergeordneten Layouts aus , sodass Sie nur die Eingabe selbst wie folgt auswählen und dann einen Strich hinzufügen , um einen Rahmen um sie herum hinzuzufügen. Jetzt haben wir einen schwarzen Strich drum herum. Es ist ein bisschen zu dunkel hier. Wir wollen also etwas mit der Sekundärfarbe machen , die wir haben, vielleicht eine Sekundärfarbe von 700 oder vielleicht noch heller. Ich denke, diese primäre 200 sieht tatsächlich ein bisschen besser aus. Also werde ich mich darauf einlassen. Jetzt haben wir hier einen Input. Das sieht toll aus. Da wir diese Eingabe nun an mehreren Stellen wiederverwenden werden, ist es am besten, sie in eine Komponente umzuwandeln. Und um das zu tun, kommen wir in der nächsten Vorlesung darauf zurück. 26. Komponenten erstellen: letzten Vorlesung haben wir diese Eingabe zusammengestellt und sie mithilfe des automatischen Layouts zusammengefügt. Jetzt wollen wir diese Eingabe tatsächlich in eine Komponente umwandeln , sodass wir diese Komponente an mehreren Stellen wiederverwenden können. Und falls wir hier Änderungen an der Eingabe vornehmen müssen, weil es sich um eine Komponente handelt, können Änderungen viel schneller vorgenommen werden, da Sie sie nur an einer Stelle vornehmen müssen , und das ist die Hauptkomponente und sie wird auf alle Instanzen angewendet. Das wird sinnvoller sein, wenn ich anfange, es zusammenzustellen. Was wir also tun wollen, ist , dass wir hier hineingehen, diese Ebene auswählen, dass wir hier hineingehen, diese Ebene auswählen der der automatische Layoutrahmen den Titel und das Textfeld enthält , und wir wollen Alt Command K auf einem Mac oder Alt Control K unter Windows drücken . Alternativ können Sie jetzt auch hier nach oben gehen und über diese Schaltfläche hier auf Komponente erstellen klicken. Und jetzt wurde daraus eine Komponente. Sie können sehen, dass die Farbe für den Rand nicht lila ist, und auch im Ebenenfenster ist sie hier lila, was darauf hinweist, dass es sich um eine Komponente handelt. Dieses Symbol hier zeigt nun, dass dies tatsächlich die Hauptkomponente ist. Sie möchten also nicht, dass sich Ihre Hauptkomponente wirklich in einem Rahmen befindet. Sie möchten sie an einem anderen Ort separat haben, z. B. auf einer separaten Seite mit all den anderen Designsystemen oder einfach separat mit all Ihren anderen Komponenten platziert werden. Aus diesem Grund ziehe ich das hier raus , außerhalb des Anmelderahmens, und platziere es hier drüben. Und tatsächlich können wir es sogar umbenennen, indem doppelt darauf klicken und es Input Feel nennen. Da haben wir's. Im Moment ist der Titel schwer zu erkennen. Eine Sache, die wir tun könnten, ist einen Abschnitt für unsere Komponenten zu erstellen. Also werde ich hier einen Abschnitt erstellen, damit wir unsere Komponenten einfach in einem Abschnitt mit einer Hintergrundfarbe platzieren können unsere Komponenten einfach in einem Abschnitt mit einer Hintergrundfarbe platzieren . Warum also nicht die Hintergrundfarbe auf Weiß oder noch besser ändern , Sie können sogar die Hintergrundfarbe auf Weiß wählen, und wir werden die Komponenten dieses Abschnitts umbenennen. Also jede Komponente, die wir haben, die Hauptkomponente, werden wir in diesen Komponenten-Abschnitt aufnehmen. Und jetzt haben wir die Hauptkomponente hier , um tatsächlich eine Kopie oder, wie sie heißt, eine Instanz davon hier drin zu haben . Wir können es einfach kopieren und mit Befehl C einfügen . Doppelklicken Sie hier, klicken Sie hier hinein und fügen Sie es mit Befehl V ein. Fantastisch. Und wie Sie sehen können, wurde die Größe geändert, weil in diesem automatischen Layoutrahmen dies die Größe ist, die wir für den Inhalt haben Und standardmäßig füllt das Textfeld den gesamten Container aus, was wir wollen Tatsächlich könnte dies in Bezug auf das Textfeld etwas zu breit sein. Also können wir hier auf unser gesamtes Layout eingehen hier auf unser gesamtes Layout und etwas mehr Rand hinzufügen. Vielleicht können wir statt 48 80 machen, und das ist eine bessere Größe dafür , was den Abstand von links und rechts angeht. Jetzt können Sie anhand dieses Symbols erkennen, dass es sich eine Instanz und nicht um die Hauptkomponente um eine Instanz und nicht um die Hauptkomponente handelt. Es ist nicht dasselbe Symbol wie hier oben , was darauf hinweist, dass es sich um eine Instanz handelt. Was bedeutet das? Das heißt, wenn ich Änderungen, sagen wir, an dem Text hier vornehme und anfange, hier etwas hineinzuschreiben, bleibt meine Hauptkomponente erhalten, und so sieht sie aus. jedoch von meiner Hauptkomponente an, Nehmen wir jedoch von meiner Hauptkomponente an, ich möchte eine Lücke ändern, anstatt einen Abstand von acht Pixeln zwischen dem Titel und dem Feld zu haben, ich möchte einen Abstand von 20 Pixeln haben. Diese Änderung wurde automatisch auch in meiner Instanz widergespiegelt. Ich gehe zu Hi Command Z, um das rückgängig zu machen. Und noch einmal, um die Textänderung hier rückgängig zu machen. Das bedeutet also, dass wir in unseren Instanzen alle Änderungen vornehmen können, die wir wollen, und sie werden nicht auf unsere Hauptkomponente angewendet , was wir wollen. Auf diese Weise können wir also auf den Titel doppelklicken und ihn in E-Mail ändern. Wir können auf den Platzhalter doppelklicken und ihn beispielsweise so ändern, dass er eine E-Mail an at@gmail.com Und jetzt haben wir eine Eingabe für die E-Mail, und wir können sie einfach duplizieren, indem wir Befehl D und eine weitere Kopie erstellen und diese in unser Passwort umbenennen Und hier werden wir mit Alt und Nummer acht ein Platzhalter-Passwort mit Alt und Nummer acht ein Platzhalter-Passwort auf meiner Tastatur eingeben, um hier ein Platzhalter-Passwort zu erstellen Da haben wir es also. Nun, die Kluft zwischen diesen beiden ist ein bisschen zu groß. Wir können sie also auswählen, Shift A drücken und den Abstand auf vielleicht 24 Pixel ändern. Das ist besser. erstellen wir also Komponenten aus Elementen. In Zukunft werden wir eine Reihe anderer Komponenten für andere Dinge wie Schaltflächen und einige Karten erstellen Komponenten für andere Dinge . Und wieder jedes Element, von dem wir glauben, dass wir in unseren Designs häufig wiederverwenden werden. Eine weitere Sache, die ich tun werde, ist diesen Titeltext hier zu ändern. Anstatt schwarz zu sein, werde ich es in unseren Text 500 ändern , der etwas heller ist. Und wieder ist das besser für die Augen. Kommen wir also im nächsten Abschnitt zurück, um die Zusammenstellung unserer Anmeldeseite abzuschließen 27. Buttons hinzufügen: Ordnung. Wenn wir also mit unserer Anmeldeseite fortfahren, haben wir noch ein paar weitere Elemente zu dieser Seite hinzuzufügen. Rückblickend auf die Wireframes haben wir die Felder hier bereits hinzugefügt, was großartig ist Jetzt benötigen wir also einige Schaltflächen, um uns zu registrieren oder mit einer Telefonnummer oder einem Google-Konto anzumelden Also brauchen wir hier ein paar Buttons und wir wollen auch ein Bild. Warum beginnen wir also nicht zuerst mit den Button-Komponenten, erstellen diese, fügen sie zu unserer Seite und kommen dann später für den Bildteil zurück. nun Schaltflächen angeht, ist es am einfachsten Was nun Schaltflächen angeht, ist es am einfachsten, auch eine Schaltfläche mit Autoayout zu erstellen, und das werden wir außerhalb von hier tun, damit wir eine Komponente erstellen können , die während unseres gesamten Projekts wiederverwendet Bei Dingen wie Schaltflächen und Eingaben möchten Sie sie auf jeden Fall als Wenn Sie also Änderungen vornehmen müssen, ist das schnell und einfach und alles an einem Ort. Also, um die Schaltfläche direkt außerhalb meiner Leinwand zu erstellen , werde ich mit dem Tiki auf meiner Tastatur eine Textebene erstellen und nur einen einfachen Platzhaltertext schreiben wie die Schaltfläche funktioniert so Und um daraus ein Autolayout zu machen, kann ich entweder rechten Maustaste klicken und auf oder Layout klicken oder als Tastenkombination Shift A erledigt Da haben wir es also, wir haben jetzt einen Button. Es hat bereits eine gewisse Polsterung an den Seiten , von der wir sehen können, dass sie zehn Pixel von oben und unten und zehn Pixel von rechts und links Wir können das also auf jeden Fall verwenden oder wir können es etwas weiter Also als Erstes werde ich die Ebene in eine Schaltfläche umbenennen und sie mit Alt-Taste K oder Alt-Strg-Taste unter Windows in eine Komponente umwandeln Auch das können Sie tun, indem hier auf diese kleine Schaltfläche klicken Jetzt haben wir diese Schaltflächenkomponente hier, und wir können eine Hintergrund - und eine Textfarbe dafür festlegen. Für den Hintergrund werde ich also eine Füllung hinzufügen und die angewendeten Stile und Variablen verwenden, und wir werden unsere Primärfarbe 500 auch als primäre Schaltflächenfarbe verwenden unsere Primärfarbe 500 . In der Regel möchten Sie Ihre Primärfarbe und eine Sekundärfarbe verwenden , um verschiedene Arten von Schaltflächen und eine unterschiedliche Haptik und Optik zu erstellen . Ich verwende denselben Eckenradius wie das Eingabefeld , das wir erstellt haben, also acht Pixel auch für unsere Schaltflächen. Also einfach, indem Sie darauf klicken und hier zum Aussehen gehen und den Eckenradius ändern. Oder Sie können es auch auf diese Weise auf acht Pixel ziehen. Das funktioniert auch. Jetzt haben wir also diese Schaltfläche und das Schöne an der Verwendung des automatischen Layouts ist , dass, wenn dieser Text wächst oder schrumpft, also sagen wir, wir haben einen längeren Schaltflächennamen, der Hintergrund oder der Container auch der Hintergrund oder der Container wächst und schrumpft Aus diesem Grund möchten Sie ein automatisches Layout für Ihre Schaltflächen einrichten ein automatisches Layout für Ihre Nun, der Abstand von oben und unten ist, würde ich sagen, ziemlich gut, obwohl wir ihn ein wenig auf 12 Pixel erhöhen können und das Gleiche gilt auch für die Seiten Ich denke, wir können das auf 16 oder sogar 24 Pixel erhöhen, das würde großartig aussehen Nun dieser Abschnitt, in dem wir Komponenten haben. Ich werde unseren Button auch hier reinziehen. Jetzt haben wir also diese wunderschöne Button-Komponente. Wir werden später darauf zurückkommen, um weitere Variationen davon zu erstellen . Aber jetzt wenden wir diesen hier an, indem wir ihn kopieren. Also drücke ich Befehl C, gehe in unseren Frame hier drüben wo wir unsere E-Mail und unser Passwort haben, und füge es , indem ich Befehl V drücke. Auch hier ist es unter Windows Control nun die Schaltfläche angeht, wollte ich, was die Breite angeht, den gesamten Raum des Containers einnehmen die Breite angeht, den gesamten Raum des Containers Es gibt also zwei Möglichkeiten, das zu tun. Sie können entweder hierher gehen , wo derzeit Hug steht, und dort die Breite in Pixeln steht Im Moment sind es also 101 Pixel und es steht auf Umarmung. Umarmen bedeutet nun, dass unabhängig von dem Inhalt , der sich im automatischen Layout befindet, was derzeit diese Schaltfläche ist, das automatische Layout sich automatisch an die Größe Also nochmal, wenn der Inhalt länger ist, haben wir einen längeren Button-Text Die Größe des automatischen Layouts wird geändert. Nun können Sie statt des Hütteninhalts Container auffüllen In diesem Fall nimmt der Behälter, wenn wir ihn füllen, die gesamte Breite des Containers ein, in dem er sich befindet. Und weil der aktuelle Container, in dem es sich befindet, dieser hier ist, dieser Autolayout-Frame hier, in dem wir unsere Eingaben haben, nimmt er dieselbe Breite wie diese Eingabefelder an und füllt den gesamten Ab sofort wird die Breite den Container immer vollständig ausfüllen, egal wie lang der Text hier ist wird die Breite den Container immer vollständig ausfüllen, egal wie lang der Text hier ist Jetzt habe ich dir gesagt, dass es einen anderen Weg gibt. Also drücke ich einfach Command Z, um zurück zu gehen. Eine Abkürzung zum Füllen eines Containers besteht darin, die Alt-Taste gedrückt zu halten und hier auf den Rand Ihrer Komponente zu doppelklicken. Wenn ich also doppelklicke, wird es dasselbe tun. Ich werde es ändern, um es zu füllen. Es ist also eine kleine Abkürzung , die ich vor nicht allzu langer Zeit gelernt habe, und sie war wirklich sehr hilfreich. Jetzt wollen wir die Schaltfläche hier umbenennen , indem wir doppelt darauf klicken und sie in „Anmelden“ ändern. Und wenn wir hier zurückschauen, haben wir eine Anmeldeschaltfläche und dann eine Teilung Also kommen wir in einer Sekunde zurück, um den Teiler zu holen. Lassen Sie uns vorerst zwei weitere Schaltflächen hinzufügen. Eine, um mit der Telefonnummer fortzufahren , und die andere , um sich bei Google anzumelden. Also werde ich doppelklicken und zweimal Befehl D drücken, um zu duplizieren. In diesem Fall werde ich es ändern, sodass ich mich mit der Telefonnummer anmelde, und für mit der Telefonnummer anmelde, dieses Mal melde ich mich bei Google an. Nun, eine Sache, die an diesem Design falsch ist , ist, dass alle unsere Tasten gleich aussehen. Wir möchten verschiedene Varianten von Schaltflächen erstellen , sodass wir an einigen Stellen, an denen eine Aktion als zweitrangig angesehen wird, einen sekundären Schaltflächentyp verwenden einigen Stellen, an denen eine Aktion als zweitrangig angesehen wird, einen sekundären Schaltflächentyp . Zum Beispiel sind die Schaltflächen „ Mit Telefonnummer anmelden “ und „Bei Google registrieren “ nicht die am häufigsten verwendeten Schaltflächen, oder selbst wenn sie es sind, möchten wir sie von dieser Anmeldeschaltfläche trennen. Deshalb machen wir zwei Dinge. Erstens möchten wir die Farbe dieser Tasten vom primären Blau, das wir verwenden, entweder zur sekundären oder vielleicht zu einer weißen Taste ändern primären Blau, das wir verwenden, entweder zur . Und die andere Sache, die wir tun möchten, ist diesen Teiler hinzuzufügen. Kommen wir also zurück zu Execture, um diese beiden Dinge zu tun. 28. Button-Varianten: Zwei Dinge, die wir tun möchten, sind, diese Schaltflächen in einen sekundären Typ zu ändern und auch einen Teiler hinzuzufügen Ich beginne damit, zuerst einen Teiler hinzuzufügen, und dazu werden wir auch Autoayout verwenden und Linien und einen Text verwenden Um also eine Linie hinzuzufügen, können Sie L auf Ihrer Tastatur drücken, oder wenn Sie hier zu Ihren Formen gehen, Ihrem Formwerkzeug, können Sie von hier aus auch auf Linie klicken Wenn Sie nun eine Linie zeichnen, wenn Sie sie irgendwo zeichnen, sagen wir hier drüben, können Sie zufällig eine Linie wie diese zeichnen. Ich mache es rückgängig oder wenn Sie die Umschalttaste gedrückt halten, können Sie gerade Linien zeichnen. Und diese geraden Linien haben dann einen Winkel von Null Grad, 45 Grad, 90 Grad, und schon haben Sie den Punkt. Also wollen wir eine gerade Linie. Also lass ich einfach hier drüben los. Die Breite ist nicht wirklich wichtig, und ich ziehe das hier in unseren automatischen Layoutrahmen. Jetzt haben wir hier also diese schwarze Linie. Du kannst es sehen. Es ist sehr klar. Jetzt wollen wir zwei davon , damit wir einen Text dazwischen legen können. Deshalb drücke ich Befehl D, indem ich ihn auswähle. Wenn sich ein Objekt innerhalb eines Rahmens oder unseres Layoutrahmens oder einer Gruppe oder eines Containers befindet, das schnell ausgewählt werden soll, können Sie die Befehlstaste gedrückt halten und das Objekt direkt auswählen. Andernfalls müssen Sie in diesen Rahmen doppelklicken , bis Sie ihn erreichen, und beide Methoden funktionieren. Aber die Verwendung von Befehl und Klick ist einfach schneller. Also werde ich jetzt Befehl D drücken, um diese beiden zu duplizieren. Ich werde auch einen Text für das O hinzufügen, also werde ich T auf meiner Tastatur drücken und eingeben. Fantastisch. Nun, was wir tun wollen, wir wollen , dass all diese Dinge in derselben Zeile stehen. Da unser automatisches Layout momentan auf ein vertikales Layout eingestellt ist , läuft alles in vertikaler Richtung. Was wir tun können, ist, automatische Layouts ineinander zu erstellen , wie wir es hier getan haben. Wir haben hier ein automatisches Layout für den übergeordneten Frame. Dann haben wir zwei drin, einen hier drüben und einen hier drüben. Wir können also tatsächlich eine weitere hinzufügen, um unsere Trennlinien und den Text hier zu halten. Und dazu können Sie auf einfachste Weise doppelklicken, um Ihre Linie auszuwählen. Oder wenn Sie das nicht möchten, können Sie es auch in Ihrem Ebenenfenster auswählen. Halten Sie die Umschalttaste gedrückt und wählen Sie den Otext und die zweite Zeile aus, ohne die Umschalttaste loszulassen Drücken Sie nun Shift A, um hier ein weiteres automatisches Layout zu erstellen, und wir können hier sehen, dass wir das getan haben , dass wir statt eines vertikalen Layouts Sie vermuten, dass wir statt eines vertikalen Layouts ein horizontales Layout verwenden werden . Und das sieht gut aus. Es gibt ein paar Dinge, die wir dagegen tun können. einen liegt es derzeit außerhalb unseres übergeordneten automatischen Layouts. Und ein weiterer Grund dafür ist, dass die Elemente im Inneren eine feste Breite haben, mit Ausnahme dieser Textur. Unsere Linien haben also eine feste Breite von 188. Jetzt willst du das nicht mehr manuell ändern. Was Sie tun möchten, ist, diese so zu ändern , dass sie den Behälter füllen, in dem sie sich befinden. Egal, um welchen Container es sich handelt, wir möchten, dass diese das darin enthaltene automatische Layout gleichmäßig ausfüllen. Aber um das zu tun, sollten wir hier zuerst den teilenden automatischen Layoutrahmen auswählen . Anstatt zu umarmen, möchten wir einen Behälter füllen wählen. Also, wie du siehst, füllt es jetzt nur den Behälter, in dem es sich befindet, was großartig ist Und jetzt wollen wir die Zeile und diese Zeile auswählen , und ich verwende den Befehl, um verschiedene Elemente in meinem RIS-Bedienfeld auszuwählen . Und statt einer festen Breite werden wir sie ändern, um den Behälter zu füllen. Und jetzt haben sie die gleiche Breite und nehmen so viel Platz wie möglich im Container ein, wenn man den Abstand oder die Lücke berücksichtigt , die sie hier haben. Wenn Sie also den Abstand verringern möchten, also von 24 Pixeln, gehen Sie runter auf acht Pixel Wie Sie sehen können, gibt es weniger Abstand zwischen dem Text und den Zeilen, was ein bisschen zu wenig ist. Ich denke also, dass 16 Pixel eine gute Lücke zwischen ihnen sind. Nun, eine andere Sache, die wir tun wollen , ist, dass wir es tatsächlich so machen wollen , dass sie alle vertikal in der Mitte liegen. Die Linien befinden sich jetzt also oben, weil die Ausrichtung im Auto-Layout-Frame standardmäßig oben links ausgerichtet ist. Wir möchten die Mitte so ausrichten , dass alles sowohl vertikal als auch horizontal an der Mitte ausgerichtet ist . Jetzt, im Moment, ist es ein bisschen zu stark. Also wollen wir die schwarze Farbe in etwas anderes ändern . Derzeit ändern wir die Farbe von allem, also den Text und die Linien denn wenn wir den automatischen Layoutrahmen auswählen, uns die Farben angezeigt die darin verwendet werden, und wir können schnell die neue Farbe einstellen sodass wir so etwas wie sekundäre 200 machen können. Ich denke, dieser Text 100 passt gut zu den Trennlinien. Für den Text selbst können wir ihn jedoch etwas dunkler machen, also funktioniert vielleicht Text 400 oder tatsächlich ein bisschen hellerer Text 300. Nett. Jetzt haben wir also diese Trennlinie. Wir wollen noch eine Sache machen, und das ist, eine weitere Variante unserer Buttons zu erstellen , und das können wir hier oben machen. Indem wir auf unsere Komponente für die Schaltfläche klicken, möchten wir eine weitere Variante erstellen, ohne jedoch eine weitere Komponente erstellen zu müssen. Manchmal haben wir Komponenten mit unterschiedlichen Variationen, wobei die Hauptsache eine etwas andere Hintergrundfarbe oder geringfügige Unterschiede sind, bei denen wir eine weitere Variante davon haben möchten, aber wir möchten nicht unbedingt eine weitere Komponente erstellen. Deshalb können wir die Komponenten auswählen und hier können wir tatsächlich eine Eigenschaft hinzufügen. Jetzt gibt es verschiedene Eigenschaften, und wir werden sie gleich durchgehen. Moment sind wir jedoch an einer anderen Variante dieser Schaltfläche interessiert . Wenn Sie bei der Variante auf Plus klicken, haben wir diese Eigenschaft jetzt hier. Standardmäßig heißt sie nur Eigenschaft eins und der Wert ist Standard. Aber wir können das für alles verwenden, was wir wollen. In diesem Fall möchte ich also eine Eigenschaft erstellen, diese auf unsere primäre Schaltfläche als Wert dieser Eigenschaft setzen als Wert dieser Eigenschaft und dann eine weitere mit weißem Hintergrund erstellen und diese als sekundäre Schaltfläche oder etwas Ähnliches festlegen . Wir wollen hier bei der Variante auf Plus klicken. Jetzt haben wir also eine weitere Variante dieses Buttons. Und wir werden auf den übergeordneten Container klicken und diese Eigenschaft durch Doppelklicken ändern und sie in Typ ändern, sodass wir sie einfach Typ nennen. Dies ist unser Standardtyp, aber wir möchten ihn auf diese Weise auf primär ändern, sodass der Wert primär ist. Und diesen werden wir als sekundär bezeichnen. Und wir werden die Füllung ändern. Vielleicht funktionieren diese primären 50 anstelle der weißen Füllung. Und wir können die Textfarbe ändern sodass wir auf den Text doppelklicken können. Ändern Sie die Textfarbe auf vielleicht Text 500. Wenn wir jetzt hier nach diesen beiden Schaltflächen suchen, können wir sie tatsächlich anklicken. Und jetzt bekommen wir in unserer Instanz diese Option namens Typ, und wir können primär oder sekundär wählen. Und wenn ich genauer darüber nachdenke, denke ich, dass es vielleicht besser aussieht, einfach einen einfachen weißen Knopf zu verwenden. Vielleicht möchten Sie ihm einen Strich hinzufügen und den Strich auf 100 primär setzen. Wir werden darauf klicken und auch diesen auf sekundär ändern . Jetzt haben wir diese beiden Knöpfe hier und es sieht langsam gut aus. Lassen Sie uns also in der nächsten Vorlesung zurückkommen, um ein Bild zu finden, das wir hier auf der rechten Seite verwenden können. 29. Bilder zur Verwendung finden: Auf der rechten Seite möchten wir ein Bild platzieren , das mit Wander Wise und ihren Aktivitäten zu tun hat Buchen Sie jetzt mit Wonder Wise tolle Reiseziele und Pakete und alles ist möglich. Wir wollen also ein Reisefoto machen, und wir können eines natürlich bei Google oder anderen Orten finden, wo wir die tatsächliche Lizenz des Bildes im Projekt verwenden können . Oder eine andere Möglichkeit ist die Verwendung von Plugins. Und eines der Plugins, das ich wirklich mag, wenn du auf den Tab Plugins und Widget und nach Unsplash suchst, bekommst du hier dieses Plugin, mit dem du auf viele Fotos zugreifen kannst, die du verwenden kannst Und wenn Sie darauf klicken, wird es geöffnet und wir zeigen Ihnen zunächst einige zufällige Bilder, aber Sie können es tatsächlich eingrenzen und nach bestimmten Bildern suchen Und so kannst du hier nach, sagen wir, Reisen suchen, Enter drücken, auf Suchen klicken und schon bekommst du all diese coolen Bilder. Und du kannst sie wirklich durchstöbern und herausfinden , welches für dein Projekt am besten aussieht. Und ich denke, für mich nehme ich eines der Bilder hier. Das sieht nach einem ziemlich tollen Reiseziel aus, also werde ich dieses Bild hier hinzufügen. Das musst du nicht genau machen. Du kannst machen, was du willst. Einer sieht einfach wunderschön aus. Ich möchte auf jeden Fall jetzt dort sein. Also wollen wir das hier in einen Container ziehen, aber wie Sie sehen können, befindet sich dieses Bild eigentlich nicht einmal in unserem Anmelderahmen. Um das zu beheben, haben wir, wie Sie sich erinnern, in unserem Anmelderahmen diesen zweiten Frame erstellt Was Sie also tun müssen, ist dies innerhalb dieses Rahmens zu ziehen und sicherzustellen, dass es in den zweiten Rahmen gezogen wird Der einfachste Weg, das zu tun, unser Bild einfach auf diesen zweiten Frame zu ziehen Da haben wir's. Jetzt ist es innerhalb dieses Rahmens und wir können es bewegen, wie wir wollen. Es hat also die schöne Ernte, die wir uns wünschen. Das sieht toll aus. Es fängt schon an, wirklich nett auszusehen. Das einzige, was ich empfehle, ist eine kleine Trennlinie zwischen dem Container hier oder dem Rahmen und dem Bild. Im Moment ist es so, als würde man es ein bisschen mischen, und vielleicht können wir das verbessern, indem wir eine Trennlinie hinzufügen Klicken wir also hier auf diesen Frame, in dem er alle Anmeldeelemente enthält , und machen einen Strich Aber jetzt wirst du bei einem Strich feststellen, dass du einen Strich auf der Innenseite hinzufügst und die Dicke des Strichs wählen kannst. Das ist großartig. Aber eine Sache, die Ihnen auffällt , ist, dass wir nicht den gesamten Behälter streicheln wollen. Wir wollen nur auf der rechten Seite streicheln. Und genau hier kommt dieser kleine Stroke pro Seite ins Spiel. Sie können darauf klicken und wählen, ob nur ein Strich auf der rechten Seite angezeigt werden soll. Wenn du einen, sagen wir, links und rechts oder etwas Ähnliches haben möchtest, kannst du auch einen Benutzerdefiniert machen. Aber wir wollen nur auf die rechte Seite , also klicken wir nach rechts. Ein anderer Broder ist nur auf der rechten Seite. Acht Pixel sind ein bisschen zu viel. Ich denke etwas in der Größenordnung von zwei bis vier. Ich denke, vier Pixel sind gut. Und das ist eine kräftige Farbe, also ändern wir sie in etwas , das unseren Primärfarben etwas besser entspricht. Hier können Sie mit Ihren Variablen herumspielen und herausfinden , welche besser aussieht. Sie können eine Sekundärfarbe oder sogar eine Primärfarbe verwenden. Ich mag diese Sekundärfarbe , die etwas dunkler als der Hintergrund ist. Ich finde, es sieht ziemlich gut aus. Jetzt haben wir dieses Bild, wir haben die Anmeldeseite zumindest vorerst so gut wie fertig. Es gibt definitiv Dinge , die wir tun können, um es zu verbessern, aber das werden wir für zukünftige Vorlesungen belassen . Wir werden es fertigstellen und dann zurückkommen und einige Feinarbeiten vornehmen, vielleicht gegen Ende. Kehren wir zur nächsten Vorlesung zurück , um mit unseren nächsten Seiten fortzufahren , der Anmeldeseite zur Überprüfung Dies ist also, nachdem sich der Benutzer angemeldet hat, und er muss seine E-Mails überprüfen, um einen Bestätigungscode hinzuzufügen, bevor er weitermachen Lassen Sie uns zum nächsten Abschnitt zurückkehren, um das gemeinsam zu tun. 30. Bilder mit Figma KI erstellen: Eine Möglichkeit, hier nebenbei oder für alles in Ihrem Projekt ein Bild zu erstellen , ist auch die Verwendung von Figma AI Figma verfügt also über diese Bildfunktion, mit der Sie Bilder mithilfe der Funktion „Bild erstellen “ generieren können Bilder mithilfe der Funktion „Bild erstellen “ generieren Alles, was Sie tun müssen, ist zum Aktionsmenü zu gehen . Wenn Sie von hier aus kein Bild erstellen, sollten Sie es in den Bildbearbeitungswerkzeugen sehen, wenn Sie nach unten scrollen in den Bildbearbeitungswerkzeugen es öffnen, können Sie eine Aufforderung schreiben und Figma ein Bild erstellen lassen Mir kam etwas in der Art von Fotos von Menschen in den Sinn, die auf eine wunderschöne tropische Insel mit kristallklarem Wasser reisen eine wunderschöne tropische Insel mit kam etwas in der Art von Fotos von Menschen in den Sinn, die auf eine wunderschöne tropische Insel mit kristallklarem Und natürlich kann es spezifischer sein und mehr Details schreiben und mehr Informationen darüber geben , welche Art von Bild Sie möchten und so weiter. Im Moment werde ich dieses machen und sehen, was es macht. Und wie Sie sehen können, arbeitet Figma AI daran, ein Bild zu generieren, und es bietet Ihnen einige Optionen, aus denen wir später auswählen können , welche wir mögen Also werden wir es in einer Minute hier geben. Wow, das ist ein wunderschönes Bild und wir haben ein paar verschiedene Versionen, die wir für unser Projekt verwenden können. Natürlich sind einige davon nicht perfekt, und wir können sie bitten, Änderungen vorzunehmen. Also wenn wir sagen, weißt du was? Wir wollen stattdessen einen Hintergrund bei Sonnenuntergang, wir können danach fragen oder die Eingabeaufforderung ändern und die Bilder hier regenerieren Schauen wir uns jetzt an, ob wir stattdessen einen schönen Hintergrund bei Sonnenuntergang bekommen können . Wow, und da haben wir es. Wunderschöne tropische Insel, ein paar verschiedene Optionen. Wir können uns sogar für diesen hier entscheiden. Als unser Bild. Also drücke ich Befehl X, doppelklicke hier hinein oder klicke in unseren Frame, Befehl V, um es dort einzufügen. Also so, weil ich dieses Bild über dem anderen habe dieses Bild über dem anderen , wenn überhaupt, weißt du was? Ich denke, vielleicht gefällt mir dieses Bild nicht, ich gehe gerne zu dem anderen zurück, das ich hatte. Ich kann dieses Bild jederzeit mit diesem I-Symbol hier verstecken und zum gleichen Bild hier zurückkehren. Vorerst belasse ich es auf diesem wunderschönen, KI generierten Bild von Figma Lassen Sie uns in der nächsten Vorlesung an unserer Bestätigungsseite arbeiten 31. Verifizierungsseite: Die nächste Seite unserer App, das verifizierende Login. Wenn Sie sich erinnern, während wir den Flow und die Wireframes zusammenstellen , ist dies die Seite, auf der Benutzer aufgefordert werden, einen Code einzugeben, der an ihre E-Mail-Adresse oder ihre Telefonnummer gesendet oder ihre Telefonnummer , falls sie sich mit einer Telefonnummer anmelden möchten Sie müssen diesen Code eingeben und Bei einigen Elementen, die ich hier eingefügt habe, wird also dasselbe Bild wie auf der Anmeldeseite beibehalten Wir erhalten einen verifizierten Anmeldetext gefolgt von einer Eingabe, die sie ihren Code eingeben können. Und dann benötigen wir auch eine Schaltfläche, um den Code erneut zu senden , falls sie ihn nicht erhalten haben, und dann eine Schaltfläche, um fortzufahren, sobald sie den Bestätigungscode eingegeben haben , um ihr Login zu verifizieren Auch hier empfehle ich Ihnen dringend , sich einige Inspirationen anzusehen, bevor Sie eine neue Seite in Ihren Designs beginnen , auch wenn Sie vom Wireframing zu Modups übergehen Es ist immer schön, Inspiration zu haben und sicherzustellen, dass Sie keinen der Schritte verpassen Ich verwende zum Beispiel mobile.com und suche nach den Bestätigungsbildschirmen, und es gibt hier Tonnen von verschiedenen Bildschirmen und es gibt hier Tonnen von verschiedenen von PayPal, das wiederum einen ähnlichen Stil verwendet, wie wir mit verschiedenen Buchcodes vorstellen, und mir gefällt die Tatsache, dass sie für jede Zahl unterschiedliche Felder haben für jede Zahl unterschiedliche Felder Vielleicht verfolgen wir in unseren Designs einen ähnlichen Ansatz, und es gibt verschiedene, die du bei verschiedenen Arten der Verifizierung sehen kannst bei verschiedenen Arten der Verifizierung sehen Wenn sie also eine E-Mail bestätigen müssen, können sie sogar auf einen Link in ihrer E-Mail klicken. Es gibt also diese Art der Überprüfung und dann gibt es Arten der Überprüfung, und dann gibt es Arten der bei denen Sie tatsächlich einen Einmalcode eingeben müssen , wie hier oder im Fall von PayPal. Lassen Sie uns also wieder zu FIGMA wechseln und zu unserem Projekt übergehen Und der einfachste Weg , dies zu tun , besteht darin, unseren Anmeldebildschirm zu duplizieren , da wir den Großteil der Arbeit hier sowieso schon eingerichtet haben und der Großteil dieses Designs dem Anmeldebildschirm ähnelt, und der Großteil dieses Designs dem Anmeldebildschirm ähnelt mit ein paar Änderungen wie hier und dem Bestätigungsinhalt und dem Inhalt , den wir auf der linken Seite haben Um also einen Frame zu duplizieren, klicken Sie einfach darauf. Sie können die Alt-Taste gedrückt halten und eine Kopie ziehen oder Befehl D drücken, um eine Kopie zu duplizieren. Ich mache weiter und halte die Alt-Taste gedrückt, ziehe eine Kopie hierher platziere sie rechts auf dem Bildschirm. Und wir werden es umbenennen. Sie haben es erraten, Bestätigungsseite. Da haben wir's. Und was wir tun werden, ist, von oben anzufangen und einige Änderungen vorzunehmen. Zuallererst wollen wir dieses große Logo nicht mehr hier haben. Also, was wir tun wollen, ist das vielleicht auf eine H-Drei umzuschalten. Und ändere die Kopie hier, um das zu überprüfen. Tatsächlich werden wir es ändern , um Ihren Bestätigungscode einzugeben. Und mir ist klar, dass das ein bisschen zu groß ist, also vielleicht reicht eine H-Vier aus, und wir machen es von links nach der anderen. Es ist also eine Linie links neben dem Textfeld hier. Und für diesen Text hier werden wir ihn ändern, sodass wir bitte den Bestätigungscode eingeben , der an max.do@gmail.com gesendet wurde. Und natürlich ist das ein Platzhaltertext, und das wird die E-Mail sein Und ich habe es gerade hervorgehoben, damit ich es fett machen kann . Da haben wir's. Und ich werde hier dasselbe tun. Wir werden den Text hier links ausrichten. Nun, eine Sache hier: Mir gefällt die Tatsache nicht, dass unser Text hier in der Mitte des automatischen Layouts ausgerichtet ist. Wir hätten eigentlich lieber alles links ausgerichtet, besonders jetzt, wo der Text auch links ausgerichtet ist. Also müssen wir hier nur den übergeordneten Container auswählen, und statt die Ausrichtung in der Mitte oben vorzunehmen, wir die Option Oben links ausrichten, werden wir die Option Oben links ausrichten, wodurch alles auf die linke und obere Seite des automatischen Layoutrahmens verschoben wird. Wir brauchen diese Felder oder die anderen Schaltflächen oder die Trennlinien nicht die anderen Schaltflächen oder die Trennlinien Wenn ich die Umschalttaste gedrückt halte, wähle ich aus, was ich nicht benötige sodass ich auf meiner Tastatur auf Löschen klicken und sie entfernen kann Jetzt werde ich dieses Feld hier in den Bestätigungscode ändern hier in den Bestätigungscode Und ich werde Alt und Acht auf meiner Tastatur verwenden , um einfach einen Platzhaltertext wie diesen einzugeben und den Anmeldetext zu ändern , indem ich doppelt darauf klicke, um so fortzufahren Was die Schaltflächen hier angeht, wo wir schon dabei sind, ist mir aufgefallen, dass sie ein etwas mutigeres Aussehen oder Gewicht vertragen könnten mutigeres Aussehen oder Also werde ich es hier für unsere Knöpfe in Fettschrift ändern hier für unsere Knöpfe in Fettschrift Ich denke nur, das sieht für einen Knopf besser aus . Ja, das ist viel besser. Und wieder, wenn Sie Änderungen an Ihren Designs vornehmen, werden Sie feststellen, dass Ihnen diese kleinen Details auffallen. Als Designer versuchen wir nicht, von Anfang an alles richtig zu machen. Es wird immer kleine Details , die Sie vielleicht nachbessern möchten, wenn Sie entwerfen und Dinge herausfinden wie Ihre Seite werden soll und so weiter und so weiter Nun, wenn du dich erinnerst, sagte ich, es wäre schön, wenn wir unseren Bestätigungscode mit separaten Eingaben einrichten würden, die alle nebeneinander liegen Das Problem ist, wenn wir das jetzt mit diesem Feld machen, haben wir das als Beispiel, ich mache es, und ich werde diese beiden automatisch layouten. Das Problem ist dieser Titel, den wir haben. Wir brauchen nicht wirklich für jeden von ihnen einen Titel. Und obwohl ich den Titel für diesen Titel löschen könnte , wollen wir eigentlich Eigenschaften einrichten, die sich auf diesen Titel beziehen, sodass wir ihn intelligenter oder effizienter ein- und ausschalten können . Zu diesem Zweck werden wir in der nächsten Vorlesung untersuchen, wie wir boolesche Eigenschaften in unseren Komponenten verwenden können boolesche Eigenschaften in unseren Komponenten 32. Komponenteigenschaften verwenden: Zunächst haben wir das Eingabefeld hier als Komponente mit einem Titel eingerichtet . Aber was ist, wenn wir in bestimmten Fällen keinen Titel haben möchten, z. dieser Bestätigungscode-Seite, auf der wir ein ähnliches Aussehen erzielen möchten wie bei auf der wir ein ähnliches Aussehen erzielen möchten PayPal hier. Was können wir also dagegen tun? Auch auf den Titel des Bestätigungscodes hier können Sie auf den Titel des Bestätigungscodes oder an einer beliebigen Stelle auf den Titel Ihrer Eingabe klicken und dann auf Löschen klicken. Das ist eine Möglichkeit, dies zu tun, aber nicht die effizienteste oder organisierteste Methode, vor allem, wenn Sie mit anderen Teammitgliedern zusammenarbeiten . Es gibt eine viel bessere Möglichkeit, dies über das Eigenschaftenfenster hier auf der rechten Seite zu tun, das wir haben. Im Moment haben wir also keine Eigenschaften, aber wir können hier zu unseren Komponenten für unser Eingabefeld gehen , unser Eingabefeld auswählen und eine Eigenschaft hinzufügen. Wie Sie sehen können, sind dies die Instanzen des Eingabefeldes hier drüben. Auf Instanzebene können wir von Fall zu Fall wählen, ob wir einen Titel anzeigen möchten oder nicht. Jetzt zeigen wir standardmäßig einen Titel an und dann erlauben wir uns als Designer, und dann erlauben wir uns als den Titel auszuschalten, wenn wir ihn nicht möchten Es gibt zwei Möglichkeiten, das zu tun. Sie können eine andere Variante dieses Eingabefeldes einrichten. Ähnlich dem, was wir hier gemacht haben. Herausforderung dabei ist, dass Sie, wenn Sie Änderungen an Ihrer Eingabe vornehmen müssen, jetzt zwei verschiedene Varianten davon vornehmen müssen. Für einen Fall, in dem Sie den Titel einfach verstecken möchten, benötigen Sie also den Titel einfach verstecken möchten, keine weitere Variante für Ihre Komponente. Sie benötigen lediglich eine neue Eigenschaft und tatsächlich eine boolesche Um also eine Eigenschaft in Ihrer Komponente einzurichten, gehen Sie hier im rechten Bereich zu Eigenschaft hinzufügen, klicken Sie auf Plus und richten Sie eine boolesche Eigenschaft ein Jetzt ist Boolean einfach ein Zustand von Ein oder Aus. Diese boolesche Eigenschaft ermöglicht es uns also, die Eigenschaft Aus umzuschalten Und im Moment ist der Name nur boolesch, aber wir wollen ihm tatsächlich einen aussagekräftigen Namen geben Also werden wir einen Raumtitel wie diesen anzeigen. Also lassen wir show title standardmäßig auf true und klicken dann auf Eigenschaft erstellen. Dann verknüpfen wir die Sichtbarkeit dieser Ebene mit der Eigenschaft, die wir gerade erstellt haben. nun die Sichtbarkeit umzuschalten, müssen Sie nur noch dieses Symbol hier anklicken und es ausblenden Und wenn Sie es ankreuzen , verschwindet dieser Titel einfach oder wird zumindest ausgeblendet, oder wird zumindest ausgeblendet weil er sich immer noch hier im Ebenenbedienfeld befindet, und ich kann ihn auch von hier aus ein- oder ausblenden Wir wollen die Sichtbarkeit dieser Ebene oder dieses Titels der Eigenschaft zuordnen Sichtbarkeit dieser Ebene oder dieses Titels der , die wir gerade erstellt Mit anderen Worten, wenn wir diese Eigenschaft auf Instanzebene einschalten, sollte dieser Titel sichtbar sein, aber wenn wir ihn ausschalten, sollte dieser Titel ausgeblendet sein Es gibt eine wirklich einfache Möglichkeit, das zu tun, diese Eigenschaften anzuhängen, und alles, was Sie tun müssen, ist hier direkt neben dem I-Symbol zu klicken Klicken Sie hier, um eine Eigenschaft für das Erscheinungsbild dieses Titeltextes dem Anzeigentitel zuzuweisen . Bum. Und jetzt ist unser Show-Titel-Eigentum da. Sie können es jederzeit von hier entfernen oder abtrennen. Lass uns das in Aktion sehen. Gehen wir hier zu unserer Bestätigungscode-Eingabe und doppelklicken Sie darauf, um die Instanz auszuwählen. Und jetzt sehen wir diese Eigenschaft „Titel anzeigen“. Wenn wir es ausschalten, los geht's. Unser Titel ist verschwunden, und hier wollen wir statt zu viel Inhalt haben. Ich glaube, wir haben standardmäßig Umarmungsinhalte. Wie dem auch sei, es ist hier, also wollen wir das. Jetzt haben wir also ein Eingabefeld. Wir können den Titel ein- oder ausschalten. Wunderschön. In Ordnung. Jetzt, wo wir die Sichtbarkeit an diesen Titel gebunden haben, wollen wir einfach weitermachen und eine weitere Variante hier reinkopieren. Und diesen hier loswerden , sodass wir jetzt, was wir tun können, den Titel verstecken, ihn mit Befehl D noch fünfmal duplizieren . Wir haben also sechs Bestätigungscodes Oder sechsstellige Codes: Drücken Sie Shift A, während Sie alle ausgewählt haben, und ich habe Shift gedrückt, um alle auszuwählen und ein horizontales Layout Da haben wir's. Jetzt könnte der Abstand zwischen ihnen etwas geringer sein, vielleicht 16 Pixel. Und statt Platzhaltertext könnten wir einfach Null, Null, Null, Null, Null eingeben Null, Null, Null In diesem Fall wollen wir natürlich, dass unser Text tatsächlich in der Mitte steht, und was wir tun können weil dies der einzige Fall ist dem wir das tatsächlich anwenden wollen, werden wir die Eigenschaften überschreiben und das hier in unserer Instanz tun in unserer Instanz Also habe ich alle Textebenen im Inneren ausgewählt, sonst nichts, nicht die Rechtecke oder irgendetwas anderes, nur die Textebenen Und dafür habe ich Command und Shift gedrückt. Während Sie also die Befehlstaste gedrückt halten, können Sie schnell alles innerhalb dieses Layoutrahmens auswählen , und wenn Sie die Umschalttaste gedrückt halten, können Sie mehrere davon auswählen. also die Umschalttaste gedrückt halte, Wenn ich also die Umschalttaste gedrückt halte, wähle ich alle Titel aus , sodass ich auf die Mittellinie klicken kann . Alle Bestätigungscodes befinden sich jetzt in der Mitte. Da haben wir es. Eine weitere Sache ich tun werde, ist, dasselbe zu tun, aber jetzt doppelklicke ich, um den AutoLayoutFrame darin auszuwählen, wie den hier, und die Umschalttaste gedrückt halten und auf alle klicken weil ich die Höhe etwas erhöhen möchte die Höhe etwas erhöhen Statt 12 machen wir 16. Das ist viel besser für diesen Fall. Das haben wir jetzt. Wir wollen hier noch einen Text, haben den Bestätigungscode nicht erhalten, senden Sie ihn erneut Und ich markiere diesen Teil, der entfernt wurde, ihn mit Befehl B fett formatiert und wir geben die erste Zahl 500 ein, und wir geben die erste Zahl 500 ein sodass er wie eine Linkfarbe aussieht Unglaublich. Jetzt haben wir unsere Bestätigungsseite und sie sieht wirklich gut aus. Fahren wir mit unserer nächsten Seite fort, die laut Wireframes unsere Ziel-Discovery-Seite wäre Das ist also der Kern des Projekts. Dies ist eine unserer interessantesten Seiten , auf der wir mit vielen Elementen arbeiten werden. Ich freue mich also auf diese. Und wir werden uns Zeit dafür nehmen und in den kommenden Vorlesungen eine Menge lernen . Also, wenn du bereit bist, lass uns gleich loslegen. Wenn du eine Pause brauchst, mach deine Pause und wir sehen uns gleich. 33. Zielentdeckungs-Mockups starten: Manchmal arbeiten wir in unseren Designs an einfacheren Seiten wie Bestätigungsseite , an der wir gearbeitet haben, und manchmal arbeiten wir an komplizierten und komplexeren Designherausforderungen oder In unserem Fall sind wir gerade dabei, unsere Destination Discovery-Modelle zu erstellen, und ich dachte mir, dass es immer am besten ist diese größeren Seiten in kleinere Komponenten und Teile zu zerlegen , an denen wir arbeiten können, und sie dann zusammenzusetzen Also, unsere Komponenten werden wiederverwendbar sein. Wir können Dinge wie dieses Navigationsfenster usw. und verschiedene Seiten wiederverwenden usw. und verschiedene Seiten Genau wie ich, als wir von unserer Anmeldeseite zu unserer verifizierenden Anmeldeseite gingen , war es viel einfacher und viel schneller Genau das versuchen wir hier mit unserer Destination Discovery-Seite zu erreichen, weil viele dieser Komponenten auch an anderen Orten verwendet werden können auch an anderen Orten verwendet Und einige davon haben wir bereits zusammengestellt wie dieses Eingabefeld hier für die Suche und alle Schaltflächen, die wir benötigen. Ich dachte mir, lassen Sie uns diese Seite in mehrere verschiedene Komponenten aufteilen , mit denen wir beginnen werden. Lassen Sie uns von oben beginnen und uns nach unten vorarbeiten, beginnend mit unserer Navigationsleiste oben hier. Mit dieser Navigationsleiste können Benutzer also können Benutzer in unserer Web-App navigieren. Klicken Sie, indem Sie auf das Logo klicken. Sie können immer auf die Startseite gehen, das ist eigentlich diese Seite hier, und dann wollen wir hier ein paar Links auf der rechten Seite. Wir wissen noch nicht, was diese Links sein werden, oder vorerst können wir einfach ein kleines Profilsymbol platzieren, ähnlich dem, was Sie sogar hier in Figma sehen, wo Sie Ihr Konto verwalten können oder eine Drop-down-Liste mit verschiedenen Optionen sehen können, die Sie erhalten, und wir werden diese genau sortieren, wenn wir weitermachen. Lassen Sie uns zunächst mit dem grundlegenden NAVR beginnen, das für das Web zusammenstellen, und dann kommen wir zurück und beginnen, einige unserer Elemente hier zusammenzustellen, wie die Eingabe hier für die Suche und die Felder hier für die Datumsauswahl und eine Schaltfläche zum Suchen und so weiter. Und dann werden wir uns tatsächlich auf einige der Kartendesigns konzentrieren Das sind also alles Karten, und wir haben diese Zielkarten, wenn Sie sich erinnern, in unserem Wireframe entworfen , also werden wir dieses Wireframe verwenden, um eine tatsächliche Komponentenkarte zu erstellen eine tatsächliche Komponentenkarte zu die wir Und während wir das tun , haben Sie auch Spaß mit der KI-Inhaltsgenerierung Und zum Schluss fügen wir hier eine Sammlung und die Schaltfläche „Filtern und Sortieren“ und so weiter und so fort hinzu. Wenn das gut klingt, kommen wir zurück zum nächsten Abschnitt, beginnen wir mit dem Design unserer Navigationsleiste 34. UI-Kit-Bibliotheken verwenden: Sie fragen sich vielleicht, wissen Sie, wir stellen all diese Komponenten zusammen und machen sie hier von Grund auf neu und erstellen unsere eigene Komponentenbibliothek, was großartig ist. Aber auch hier fragen Sie sich vielleicht: Hey, Nima, müssen wir jede einzelne Komponente von Grund auf neu entwerfen , für Designs, die mühsam sein können, besonders wenn Sie versuchen, ein Design wirklich schnell zusammenzustellen und Ihr Unternehmen bereits über Vermögenswerte verfügt oder der Kunde, mit dem Sie zusammenarbeiten, vielleicht bereits über ein Designsystem verfügt. Falls nicht, gibt es definitiv auch Möglichkeiten zu nutzen, worauf Sie mit FGMA Zugriff haben Es gibt mehrere Ressourcen, die Sie verwenden können, insbesondere mit den neuen Updates von FiCMA. Sie können sogar auf einige Bibliotheken zugreifen, Sie können sogar auf einige Bibliotheken zugreifen denen Sie einige Komponenten von früheren Designern oder andere Designs in Ihre Projekte integrieren können einige Komponenten von früheren Designern oder andere Designs in Ihre Projekte integrieren Wir wollen also diese Navbar entwerfen, aber was ist, wenn es bereits andere Navbars gibt, die wir einfach kopieren und verwenden können Hier kommt das Assets-Bedienfeld ins Spiel. Sie befinden sich also normalerweise im Dateifenster. Wechseln Sie hier zu den Assets, wie Sie sehen können, wo unsere eigenen lokalen Ressourcen zusammengestellt werden, wo all unsere Komponenten vorhanden sind und so, was nett ist. Wir werden hier tatsächlich weitermachen und weitere Bibliotheken hinzufügen. Und hier können wir unsere eigenen Ressourcen veröffentlichen, die wir in anderen Dateien verwenden können, und darauf werden wir später noch eingehen. Im Moment wollen wir von dieser aktuellen Datei zu UI-Kits wechseln . Auf diese Weise finden Sie drei UI-Kits, die derzeit auf Figma verfügbar sind und die Sie einfach zu Ihrem Projekt hinzufügen können Es gibt iOS 18 und iPad OS 18. Wenn Sie also speziell an einer nativen iOS- oder iPad-App arbeiten , empfehle ich Ihnen dringend, diese zu Ihrer Datei hinzuzufügen, da Sie nicht jede einzelne Komponente, die Apple bereits hat, neu gestalten möchten jede einzelne Komponente, die Apple bereits hat, Es gibt ein Material-Drei-Design, hervorragend für Android-Projekte oder einfach generell Sie haben viele Komponenten eignet. Sie haben viele Komponenten , die in vielen Anwendungen verwendet werden Und FicMas hat eines namens Simple Design System, das wir zu unserer Datei hinzufügen können , wenn Sie es sich ansehen möchten Jetzt können wir sogar darauf klicken, um alles zu sehen, was dieses Projekt auch hat Es hat also viele Typografien, Größenvariablen, Farbvariablen, einige Stile hier, einige Komponenten im Akkordeonstil, viele Schaltflächen Karten, Formulare, viele Symbole, die Sie verwenden können, was Sie haben Eingänge, Menüs. Und ja, natürlich haben sie eine Navigationskomponente. Jetzt können Sie dies natürlich zu Ihrer Datei hinzufügen und haben Zugriff auf all das in Ihrer Datei, oder Sie können eines davon auch in Ihr Design ziehen. Wenn Sie also diese Navigationsleiste sehen, können Sie sie ziehen und diese hier oben als Navigationsleiste verwenden . Sie haben also Zugriff auf diese anderen Designsysteme , die Sie in Ihren Projekten verwenden können, und Sie können sich jedes einzelne davon ansehen, um zu sehen, was sie enthalten und was sie haben? Oder entwerfen Sie Ihr eigenes von Grund auf neu, was wir hier in diesem Projekt tun. Wir tun das , damit wir das Beste aus diesem Kurs lernen können das Beste aus diesem Kurs lernen Aber natürlich können Sie in einem echten Projekt , die von manchmal oder vielleicht oft Komponenten wiederverwenden anderen Designern entworfen wurden , oder in anderen Fällen eine von Grund auf neu erstellen Ich hoffe, das gibt Ihnen eine Vorstellung von einigen Orten, an denen Sie nach Inspiration suchen können. An manchen Orten können Sie auf einige Ressourcen zurückgreifen. Ein weiterer großartiger Ort, um nach diesen UI-Kits zu suchen , ist der Community-Tab hier. Wenn Sie nun zu den Tabs mit den Designressourcen gehen, werden Ihnen die UI-Kits angezeigt , zu denen Sie einfach direkt wechseln können. Wir haben uns bereits mit diesen befasst, aber es gibt jede Menge andere, von denen einige kostenlos, andere kostenpflichtig sind und die Sie auch in Ihren Projekten verwenden können , richtig. Also überlasse ich es Ihnen, UI-Kits zu erkunden, wenn Sie möchten. Auch hier werden wir fortfahren und im Rest des Projekts unsere eigenen Komponenten zusammenstellen . 35. Eine Navleiste entwerfen: Gehen wir also zu unserer Navbar über und entwerfen sie gemeinsam. Lassen Sie uns zunächst diesen Frame duplizieren, um ihn als Dashboard-Bildschirm zu verwenden Wir werden es unsere Destination Discovery-Seite nennen. Also werden wir diese Seite in Destination Discovery umbenennen. Und wieder kopiere ich diesen, indem ich zur Bestätigungsseite gehe, die Alt-Taste gedrückt halte und eine Kopie hierher ziehe. Jetzt brauchen wir hier keinen Inhalt mehr, also halten wir die Umschalttaste gedrückt, wählen beide aus und löschen sie haben wir also einen leeren Bildschirm In diesem Fall haben wir also einen leeren Bildschirm oder einen leeren Rahmen, und wir möchten eine Navbar zusammenstellen und diese dann als Komponente herausziehen Für unsere Navbar wollen wir hier ein Logo auf der linken Seite haben. Wir können also einfach den Text von Vander Weis verwenden , den wir verwendet haben Und dann platzieren wir auf der rechten Seite einfach einen Platzhalter für vielleicht ein paar Schaltflächen sowie für Dinge, für die wahrscheinlich ein Profil-Dropdown-Menü sowie ein Navigationsglockensymbol erforderlich sowie ein Navigationsglockensymbol Dieses Navigationsglockensymbol wird also hier sein, ebenso wie ein Profilbildschirm sowie das kleine Profil-Dropdown-Menü Das sehen wir normalerweise in Navbars. Und auch hier hilft Ihnen die Nutzung einiger Ressourcen oder Inspirationen auf jeden Fall dabei, diese Komponenten schneller zusammenzustellen Ich beginne damit, dieses Vander Weiss-Logo zu kopieren und Ich halte die Befehlstaste gedrückt , um Vanderweis auszuwählen, es hierher zu bringen Und es ist ein bisschen zu groß. Wir wollen auf eine kleinere Größe umsteigen. Vielleicht ist dieser H Four gut. Und jetzt drücke ich Shift A, um daraus einen automatischen Layoutrahmen zu machen. Diesen automatischen Layoutrahmen können wir für unsere Navbar verwenden. Aber ich möchte hier den Rahmen für die Zielerkennung auswählen und die Füllung an unseren bereits erstellten Hintergrund anpassen die Füllung an unseren bereits erstellten Hintergrund Das ist hier also dieselbe Hintergrundfarbe , die wir verwenden. Und was wir tun werden, ist diesen Rahmen auszuwählen , diesen Rahmen für das automatische Layout, den wir gerade erstellt haben, und wir werden ihn hier in die Ecke verschieben, wo wir normalerweise unsere Navigationsleisten sehen. Jetzt fahren wir fort und dehnen ihn sodass er die gesamte Breite einnimmt. Jetzt wollen wir nicht, dass der Inhalt in der Mitte steht. Wir möchten, dass der Inhalt nach links ausgerichtet und vertikal zentriert wird. Vertikal möchten wir, dass er sich in der Mitte befindet, und horizontal möchten wir, dass er nach links ausgerichtet ist. Deshalb wählen wir hier diesen aus. Der Abstand ist etwas zu gering. Vielleicht den Abstand 10-16 ändern. Und dann dieses, wir wollen unser Grid tatsächlich nutzen. Also, falls du dich erinnerst, wir haben ein Raster eingerichtet und können es auf unseren Frames ein- und ausschalten. Wir wollen hier den gleichen Rand verwenden, den wir für unser Raster eingerichtet haben , der, wie Sie hier sehen können, 48 Pixel beträgt. Wir möchten also, dass unsere Navbar auch einen Abstand von 48 Pixeln von links nach rechts Es hat also diese schöne Ausrichtung zu unserem Layoutraster. Wir werden das Raster vorerst ausblenden und auch für diese Navbar eine Füllung mit Weißtönen einstellen Also fängt es an, ziemlich gut auszusehen. Ich fange an, das Gefühl zu haben, dass 16 Pixel etwas zu klein sein könnten. Die Höhe sieht hier etwas zu komprimiert aus. Wir können also 18 oder sogar 20 machen. Ich glaube, mir gefällt, wie 20 hier aussieht. Und jetzt wollen wir ein paar Links auf der rechten Seite. Vorher wollen wir eine gewisse Trennung zwischen dieser Navbar und der Seite hier haben zwischen dieser Navbar und der Seite hier Warum richten wir dann nicht einen Strich um ihn herum als Grenze ein? Und wieder wollen wir nur einen unteren Strich, also wählen wir „Unten“ und ändern den Wert auf „ Sekundär 800“ oder „Sekundär 700“. Sieht gut aus. Ich finde, die sekundäre 800 sieht gut aus. Um dieses kleine Profilsymbol hier zu erstellen, können wir es innerhalb eines Kreises einrichten, den wir erstellen können , indem wir O auf unserer Tastatur drücken, um einen Kreis zu zeichnen , und die Umschalttaste gedrückt halten und ein O ziehen Natürlich ist es nicht hier. Es wird auf dieser Seite sein. Da es jetzt in unserem automatischen Layout und unserem automatischen Layout ist, alles nach links ausgerichtet ist, habe ich hier den Kreis gezeichnet. Also doppelklicke ich, um es auszuwählen, und statt 65 mal 65 machen wir es 48 mal 48. Ich denke, das ist eine gute Größe. Nun, wir wollen nicht, dass unser Profil hier erscheint. Wir möchten eigentlich, dass sich unser Profilbildkreis auf der rechten Seite befindet. Wie machen wir das also im Autolayout? Beim Autolayout haben wir also normalerweise eine feste Lücke zwischen den Elementen, die Natürlich können Sie weitermachen und diese Lücke groß genug machen, bis sie sich auf der rechten Seite befindet, aber das ist definitiv nicht skalierbar und es ist nicht der richtige Weg, dies zu tun Was Sie tun möchten, ist, von einer Lücke zur Verwendung einer automatischen Lücke zu wechseln einer Lücke zur Verwendung einer automatischen Lücke Wir sollten weitermachen und alles gleichmäßig verteilen. Da wir momentan nur diese beiden Elemente haben, wird alles gleichmäßig verteilt und bis an die Enden des Out-Layouts verschoben Was passiert, wenn es ein drittes Element gibt? Sagen wir hier einen Text, der den Namen des Benutzers anzeigt, Mac Stowe Dies wird auch gleichmäßig verteilt. Also wir wollen diesen Namen, und zwar wollen wir ihn auf der rechten Seite haben, also wähle ich ihn aus und verschiebe ihn nach rechts Ich wünschte, wir würden ihn hierher verschieben, aber wir wollen nicht, dass diese Lücke zwischen diesen beiden entsteht. Wir möchten, dass diese beiden einen kleineren Abstand haben und nahe beieinander liegen, und dann soll der Rest des automatischen Layouts einen größeren Abstand haben oder gleichmäßig verteilt werden In einem Fall wie diesem müssen Sie also nur Ihren Text auswählen Nun, zunächst einmal ist H vier ein bisschen zu fett. Für diesen können wir einfach einen großen, mutigen Körper nehmen. Und lassen Sie uns den Text in Text 400 ändern. Das sieht gut aus. Und lassen Sie uns die Umschalttaste gedrückt halten während wir den Text ausgewählt haben um hier auch die Ellipse auszuwählen, und wir werden Shift A drücken , um auch für sie ein automatisches Layout zu erstellen Jetzt handelt es sich auch um ein automatisches Layout mit automatischem Abstand Aber zwischen diesen brauchen wir keinen automatischen Abstand. Wir brauchen nur, sagen wir, einen Abstand von 16 Pixeln, was gut aussieht. Und statt einer festen Breite von 638 wollen wir, dass es sich an den Inhalt anpasst, sodass es zur Seite geschoben wird und nur die Breite hat, die benötigt wird, das ist hier diese Breite 16 Pixel sind ein bisschen zu viel für die Lücke. Also machen wir acht Pixel. Und jetzt wollen wir nur noch ein paar Links hier haben. Ich weiß, dass ich gesagt habe, dass wir hier einige Links hinzufügen können, aber vielleicht können wir das später tun, wenn wir weitere Seiten hinzufügen oder das aus anderen Gründen tun müssen. Vorerst lassen wir es so. Eine weitere Sache, die wir hier hinzufügen können, ist ein Benachrichtigungsglockensymbol. Nun zu den Plugins und Widgets Wenn Sie nach Phosphor suchen, ist das eine wirklich gute Bibliothek von Symbolen, die Sie für Ihr Projekt verwenden können Also werde ich diesen hier ausführen. Und ich werde nach einem Benachrichtigungssymbol suchen und es mir ansehen. Wir haben ein paar nette , die wir verwenden können. Ich werde klicken. Und sobald Sie darauf klicken, wird es hier abgelegt, sodass wir es einfach hierher ziehen können. Und wir haben das gleiche Problem. Natürlich werden wir dasselbe tun. Wir wählen den Vektorrahmen mit der Benachrichtigungsglocke aus, wählen hier auch diesen Frame aus, den wir für unser Profil-Dropdown erstellt haben, drücken Shift A und zwischen diesen Bildern werden wir 16 Pixel machen. Und wieder wollen wir Inhalte umarmen. 16 Pixel sind ein bisschen zu klein. Warum versuchen wir es nicht mit 24 oder sogar 32? Ich finde 32 sieht gut aus. Das Symbol ist ein bisschen klein, also können wir doppelklicken und statt 24 mal 24 können wir es vielleicht vergrößern. Wir können es 32 mal 32 machen. Ich finde das ziemlich nett. Und vielleicht können wir statt der schwarzen Farbe die Primärfarbe 500 wählen. Und statt dieser schwarzen Farbe können wir sie vielleicht auf eine sekundäre 800 ändern. Wenn ich es mir genauer überlege, denke ich, ich kann es ein bisschen größer machen, etwa 40 mal 40, und das wird besser aussehen, noch fantastischer. Wir haben hier also ein Glockensymbol für Benachrichtigungen. Wir haben unser Profil-Dropdown. Im Moment hat es kein Bild, also können wir es in der nächsten Textur zusammenstellen Aber als Erstes möchte ich das hier nach draußen verschieben , sodass wir tatsächlich eine Komponente erstellen können, und das können wir tun, indem wir Altommand K oder Control unter Windows drücken und sie in unsere Navbar umbenennen Und natürlich werde ich das hier in unseren Komponenten-Bereich verschieben , damit wir all unsere Komponenten übersichtlich organisieren können , wenn sie wachsen Also werde ich diesen Abschnitt einfach erweitern und diesen hier rein verschieben Ich werde unserem Komponentenbereich auch die Hintergrundfarbe geben auch die Hintergrundfarbe damit wir unsere Komponenten besser sehen können. Ich werde auf diese NavR-Komponente klicken und sie jetzt ablegen oder hier einfügen Jetzt haben wir eine Instanz davon, und wir werden sie auf Null setzen, Null für X und Y, also ist sie hier in der Ecke und nimmt den gesamten Platz Sieht toll aus. Kehren wir zur Vorlesung zurück, um mit den anderen Teilen unserer Seite zur Entdeckung von Reisezielen fortzufahren , also den Eingaben hier, einigen Karten usw. 36. Erster Entwurf mit Figma AI generieren: Wir arbeiten an dieser Seite, ich habe vergessen, dass es ein guter Zeitpunkt ist, sich ein Feature von Figma namens First Draft anzusehen ein Feature von Figma namens First Nun, dieser erste Entwurf ist eigentlich eine KI-Funktion, die im Grunde genommen den ersten Entwurf für Ihr Modell erstellt , sodass Sie ihn als Inspiration für die Gestaltung Ihrer Bildschirme verwenden können als Inspiration für die Gestaltung Es ist nicht wirklich dazu gedacht, die Arbeit am Modell zu ersetzen, und die Hauptidee besteht, wie der Name schon sagt, darin, Ihnen eine Vorstellung davon zu geben, wie diese Seite aussehen sollte, und sicherzustellen, dass Sie alle Teile richtig zusammensetzen und die Hauptidee besteht, wie der Name schon sagt, darin, Ihnen eine Vorstellung davon zu geben, wie diese Seite aussehen sollte, und sicherzustellen, dass Sie alle Teile richtig darin, Ihnen eine Vorstellung davon zu geben diese Seite aussehen sollte, und sicherzustellen, dass Sie zusammensetzen Betrachte es als eine Inspiration für deine Designs, gemischt mit den Details deines Projekts Um auf diese Funktion zuzugreifen, können Sie das Bedienfeld „Aktionen“ aufrufen oder die Taste „Befehl K“ drücken Dann sehen Sie hier den ersten Entwurf der Funktion. Öffnen Sie es also und Sie müssen es so schnell wie möglich und so detailliert wie möglich schreiben wie möglich und so detailliert wie , damit der erste Entwurf angezeigt wird . Also schreiben wir so viele Details wie möglich und sagen, dass wir mit einem ähnlichen Text als Platzhalter hier Seite zur Entdeckung von Reisezielen für eine Reise-App erstellen, Nutzer Urlaubspakete buchen können An einem Ort. Auf dem Bildschirm werden Karten angezeigt, die alle unterschiedliche Ziele haben, einschließlich der Namen der Städte und Preise für das Paket. Und ich werfe nur einen Blick auf unser Wireframe, um sicherzugehen, dass ich alles mit einschließe Eine Buchungsschaltfläche. Und ein beliebtes Abzeichen. Der Rest dieser Seite sollte Eingaben für Ort Reisezeit in einem Von- und Zielformat enthalten. Und wir werden damit beginnen, einfach eine Web-App, eine Destination Discovery Page, zu sagen . Sie weiß also, wofür wir entwerfen. Jetzt kann ich natürlich etwas mehr in die Tiefe gehen und mehr Details angeben, aber schauen wir mal, was dabei herauskommt. Also drücken wir Make it. Es funktioniert auf dem Bildschirm. Da haben wir's. Leider wurde keine Web-App-Seite für einen Desktop-Bildschirm zusammengestellt , aber wir sehen die mobile Version und das ist und das sieht ziemlich gut aus. Wir haben hier unsere Bilder, die Pakete mit den Preisoptionen und sogar die Bilder verschiedener Städte. Das ist also definitiv ein schönes Design, für das wir uns entscheiden können. Mir gefällt sehr, wie sie einige Symbole enthalten haben. Wir können diese Idee also definitiv nutzen. Und wenn Sie möchten, können Sie diese Eingaben einfach in Ihr Design einfügen , wenn Sie möchten. Das ist hier definitiv eine Option. Wir können uns das also auf jeden Fall ansehen und wir werden es hier als Inspiration belassen. Jetzt können Sie von hier aus auch das Styling ändern. Wenn Ihnen das Design, das es sich ausgedacht hat, nicht gefällt, können Sie wie hier verschiedene verwenden. Wir haben eine lila, eine blaue. Und wie Sie sehen können, ändern sich auch die Schriftarten. Wir haben also eine Sera-Schrift mit dieser, was interessant ist Diese grüne, und dann haben wir eine im dunklen Modus, super cool Und wir können jederzeit Änderungen am Design vornehmen. Wir können übrigens auch den Dunkelmodus sehen. Aber wir können hier einen Teil der Färbung ändern. Wenn Sie also, sagen wir, Blau für unsere Hauptschaltfläche wollen , können wir das tun, oder sogar für die Symbole hier unten und das gesamte Thema der App, oder wir können einen bestimmten Hex-Code eingeben. Zum Beispiel können wir den Hex-Code aus unseren lokalen Variablen für den Primärwert 500 ziehen , also diesen hier, und sogar hier wieder reingehen, zum ersten Entwurf gehen. Das ist also super cool. Sie können also gerne den Figma AI First Draft , um Ideen für das zu entwickeln, was Sie einbeziehen möchten Nicht auf Anhieb. Es fehlen hier bereits einige Dinge, die wir mit einem Beliebtheitsabzeichen, einem Lesezeichen, versehen wollen , das ist schon da, also das ist nett Wir können ein Lesezeichen im ähnlichen Stil verwenden. Und wir wollen auch Bewertungen und auch für die Preisgestaltung, vielleicht wollen wir sie zunächst pro Woche anzeigen, und dann nur, wenn der Benutzer tatsächlich Daten eingibt, dann wollen wir den genauen Preis für die Zeiten anzeigen , die er ausgewählt Auf diese Weise können wir Fake MI verwenden , um einen ersten Entwurf für uns zu generieren. Lass uns jetzt gehen, Mike und Ax extra , um unsere Destination Discovery-Seite selbst zusammenzustellen . 37. Such- und Zeiteingaben hinzufügen: Um mit der Gestaltung des Restes unserer Seite zur Entdeckung von Reisezielen fortzufahren . Wir haben hier bereits die Navigationsleiste, was nett ist. Jetzt wollen wir zu unseren Eingaben übergehen, die das Ziel sein werden. Hier wird der Benutzer also auch reisen. In unserem Fall mit einem KI-generierten Bild haben wir nun ein Absenderbild, aber eigentlich brauchen wir kein Absender. Wir brauchen nur ein Ziel, weil sie über diese Plattform keine Flüge buchen. Sie buchen nur Pakete, die im Grunde genommen eine Unterkunft und alle Aktivitäten beinhalten, die sie dort machen. Das müssen wir also nicht einbeziehen. Möchte ein Ziel-Eingabefeld einschließen. Und vielleicht können wir für das Symbol ein ähnliches Symbol wie dieses hier erstellen. Ich mag es wirklich. Und dann brauchen wir eine Eingabe für Datumsselektoren, also wollen wir ihnen ermöglichen Reisedaten auszuwählen, von denen sie reisen möchten und bis dann wollen wir eine Suchschaltfläche haben , mit der sie im Grunde klicken können , damit sie diese Ergebnisse suchen und verfeinern können Jetzt zeigen diese Karten standardmäßig nur allgemeine Ziele Und da sie nach einem bestimmten Ziel und zu bestimmten Zeiten suchen , die Idee darin, dass sich diese Ergebnisse auf das beschränken, wonach der Benutzer sucht. Sie sehen dies häufig auf vielen Buchungsplattformen. Wir möchten eine Eingabe hinzufügen, die wir haben, damit wir zu unseren Assets und lokalen Assets übergehen und das Eingabefeld hierher ziehen können. Wir werden es so verschieben, dass es hier drüben ist, 48 Pixel, und ich halte den Höhenabstand gedrückt, und von oben machen wir auch 48 Nennen wir unseren Titel hier Destination. Und statt des Platzhaltertextes fügen wir hier einfach eine Stadt hinzu, sagen wir New York Punkt, Punkt, Punkt wie dieser, um ihnen die Hinweise zu geben , dass sie Städte hinzufügen können und so weiter Wir wollen hier also ein Symbol wie dieses Standortsymbol auf der linken Seite haben, das haben wir momentan nicht in unserer Eingabe, also können wir nicht wirklich ein Symbol hineinziehen , weil es sich um eine Instanz handelt. Also müssen wir zur Komponente gehen , was Sie übrigens immer tun können, indem Sie auf diese Schaltfläche „ Gehe zur Hauptkomponente“ Und jetzt, wo wir hier sind, möchten wir ein Symbol auf der linken Seite hinzufügen Aber auch hier möchten wir eine Eigenschaft so einrichten , dass wir das Symbol erst anzeigen, wenn wir uns entscheiden . Lassen Sie uns hier eine Eigenschaft erstellen , eine boolesche Eigenschaft, wir nennen sie standardmäßig Linkssymbol anzeigen. Lassen Sie uns sie standardmäßig ausschalten, da wir in unseren Feldern im Allgemeinen keine Symbole benötigen . Eigenschaft erstellen Gehen wir zu den Phosphor-Symbolen. Und wenn Sie es aus Ihren Gründen nicht hier haben, können Sie jederzeit danach sowie nach Plugins und Widgets suchen Und lass uns nach dem Standort suchen. Dieser ist nett. Den können wir benutzen. Ich werde Befehl X drücken, um es auszuschneiden und hier einzufügen, anstatt unsere Eingabe. Und lassen Sie uns stattdessen die Größe auf 20 mal 20 ändern. Und verschiebe es mit den Pfeilen auf unserer Tastatur nach links . Jetzt haben wir hier ein schönes Symbol. Und mit dem Symbol könnten wir den Abstand hier auf der linken Seite tatsächlich ein wenig reduzieren . Wenn Sie also hierher gehen, können wir hier tatsächlich einzelne Abstände für unseren Auto-Layout-Container auswählen . Wir können also 16 Pixel von rechts haben , aber von links können wir vielleicht acht machen, das sieht also ein bisschen besser Und jetzt wollen wir diesem Symbol eine andere Farbe geben. Lass uns Primary 500 machen. Und lassen Sie uns die Sichtbarkeit hier mit unserem Symbol „Links anzeigen“ verknüpfen , eine Eigenschaft, die wir gerade erstellt haben. Und natürlich wird es ausgeblendet, weil wir uns standardmäßig dafür entschieden haben, dass es falsch sein soll. Das kannst du übrigens jederzeit von hier aus ändern. Gehen wir jetzt zu dem, auf dem wir sein wollten, und schalten wir diesen ein. Wunderschön. Jetzt haben wir also unsere Zieleingabe. Wir wollen zwei weitere Felder für unsere Daten. Jetzt müssen wir das Symbol für die Daten ändern. Jetzt, zurück, werde ich das noch einmal machen. Ich denke, der Abstand von links ist ein bisschen zu gering. Vielleicht sind 12 Pixel besser. Und der Abstand zwischen dem Platzhalter und diesem könnte acht Pixel betragen Also die Lücke, das ist ein bisschen besser. Ich werde die Standardeigenschaft für die Anzeige des linken Symbols ausschalten. Gehen wir jetzt zurück. Ja, es sieht besser aus. Also zwei weitere Felder hier, das von und zwei. Lass uns Alt benutzen, kopiere ein paar Felder hierher. Tatsächlich werde ich diese beiden automatisch zusammen layouten, damit wir das noch einmal problemlos machen können. Ändern Sie dies in zwei, ändern Sie dies in von, aus unserem Platzhalter können wir ein Datum auswählen Jetzt können wir hier einfach ein zufälliges Datum hineinschreiben. Als Platzhalter. müssen nicht so groß sein, also können wir sie tatsächlich auf eine Breite von vielleicht 400 Pixeln bringen , so wie hier Lassen Sie uns diese Symbole so ändern, dass es ein Kalender statt einer Stecknadel oder Ortsnadel ist. Und um das zu tun, kommen wir in der nächsten Lektion darauf zurück, damit wir hier einige dynamische Symbole einrichten können , falls wir eine Eingabe mit mehreren verschiedenen Symbolen haben. 38. Verschachtelte Instanzen: Herausforderungen, wir möchten hier in dieser Eingabe ein Symbol haben , das wir verwenden können, und wir möchten nicht, dass es nur das Standortsymbol Wir wollen mehrere Icons. Was wir hier tun können, ist, dass wir tatsächlich eine Komponente für unsere Symbole erstellen können, sodass wir jedes Symbol, das wir im Projekt verwenden, stattdessen in dieser Komponente löschen können, und dann können wir eine verschachtelte Instanz dieser Komponente erstellen Instanz dieser Komponente Das macht für Sie momentan vielleicht überhaupt keinen Sinn, aber ich werde Ihnen gleich zeigen, wie das funktioniert Wichtigste zuerst: Ich werde dieses Symbol komplett von hier wegziehen dieses Symbol komplett von hier wegziehen und Command K verwenden um daraus eine Komponente zu machen. Lassen Sie uns dieses Symbol in Map umbenennen, mit einem Stift wie diesem. Und es ist wichtig, dass Sie dieses Symbol mit einem Bindestrich platzieren , um eine Gruppe namens Icon zu erstellen. Und jetzt können wir hier rübergehen, Phosphor-Symbole öffnen und nach einem Datumssymbol suchen Dieser sieht gut aus. Und lassen Sie uns Größe auch auf 20 mal 20 Also werden wir hier auf 20 wechseln. Es hat also dieselbe Größe und drücken Sie auch Alt Command K, um daraus eine Komponente zu machen , und verwenden Sie dasselbe Format für die Benennung des Symbols und wir machen Datum oder Kalender. Der Name des eigentlichen Symbols liegt wirklich bei Ihnen. Ich gebe ihm auch die ersten 500. Schau, und wir werden sie innerhalb unserer Komponenten hierher verschieben , sodass sie alle ordentlich da sind Und jetzt werden wir eine Instanz dieses Symbols hierher kopieren . Schieben Sie es wieder nach links. Und was wir tun werden, ist , zu den Eigenschaften hier zu gehen und einen Instanz-Swap hinzuzufügen. Und unser Instanzentausch wird ein Symbol sein, und wir wählen Map Pin, wir nennen es Icon. Auf diese Weise können wir auf Instanzebene schnell dieses Symbol vom Map-Pin auf andere Symbole umstellen . Und sobald ich auf „Eigenschaft erstellen“ klicke, wirst du in nur einer Sekunde sehen, wie das funktioniert. Wenn ich jetzt hier doppelt darauf klicke, ist nichts passiert. Also, lassen Sie uns hier doppelklicken, um das Symbol selbst auszuwählen, und dann machen wir die drei Punkte hier und wenden die Instanz-Swap-Eigenschaft an, und wir verwenden das Symbol. Also, was nun passieren wird, ist, wenn wir dorthin gehen, wo wir unser Feld hier verwenden, wenn Sie doppelklicken, können wir das Symbol tatsächlich von der Karte auf das Kalendersymbol für dieses austauschen , und das Gleiche gilt hier. Jedes Mal, wenn wir ein Symbol als Komponente mit einem beliebigen Symbol hinzufügen , können wir das Symbol stattdessen durch dieses ersetzen. Fantastisch. Jetzt haben wir also dieses Feld. Jetzt sieht es hier ein bisschen fad aus. Ich denke, wir können hier einen schönen Titel für diese Seite verwenden. Also warum verschieben wir das nicht ein bisschen nach unten , fügen mehr Text hinzu und wir, lassen Sie uns das nächste Abenteuer finden. Und das machen wir für vier Jahre. Platziere es hier drüben. Wir werden diesen hier mit 48 Pixeln haben. Verschieben Sie diesen nach oben, bis er 24 Pixel von diesem entfernt ist, und erstellen Sie auch ein automatisches Layout von ihnen. Dieses automatische Layout sollte die Größe des gesamten Inhaltsbereichs haben, und dann ändern wir die Farbe dieses Layouts, lassen Sie uns das sekundäre Layout 800 machen. Und lassen Sie uns die Farbe hier auf einen Text 300 ändern . Sieht besser aus. Und lassen Sie uns hier eine Suchschaltfläche hinzufügen. Wir können einfach eine Schaltfläche von hier nach hier kopieren. Und wir wollen, dass dieses automatische Layout tatsächlich so unten links ausgerichtet unten links und dass diese Schaltfläche tatsächlich zum Inhalt passt, sodass sie nicht so groß ist, und wir sagen einfach Suchen. Da haben wir es. Jetzt kommt es langsam zusammen, und jetzt kommen wir im nächsten Abschnitt zurück, um das Design für unsere eigentlichen Zielkarten zusammenzustellen unsere eigentlichen Zielkarten 39. Zielkartendesign: Der größte Teil unserer App oder Teile davon die Zielkarten, die wir entwerfen werden. Hier haben wir also diese Zielkarten, auf denen zunächst ein Standardsatz von Zielen angezeigt wird , vielleicht nach dem, was beliebt ist, oder wir können das entscheiden. Später wollen wir das Design so gestalten, dass wenn der Benutzer nach seinen Optionen sucht oder sie herunterfiltert, ein anderer Satz von Zielkarten angezeigt werden kann. Wir wollen uns ein Design für unsere Zielkarte einfallen lassen . Hier haben wir also ein schönes Bild in unserem Wireframe, das wir für dieses Ziel verwenden können Also, ähnlich wie es sich die KI ausgedacht hat, können wir uns ein Bild von dieser Hier wäre eine Schaltfläche, um diese Stadt oder dieses Reiseziel mit einem Lesezeichen Und dann wäre hier unten der Name unseres Reiseziels oder der Name der Stadt, gefolgt von der Anzahl der Bewertungen Jetzt haben wir hier einen Preis pro Woche. Obwohl das nicht ganz sinnvoll ist, möchten wir einen Preis anzeigen vielleicht hier die Daten für dieses Abenteuer für dieses Paket hinzufügen , damit wir zeigen können, dass diese Reise zwischen diesem und diesem Datum liegt, oder wir können anstelle dieses Wochenpreises die Gesamtzahl der Tage anzeigen , die ebenfalls nützlich sein können . So können wir den Preis anzeigen. Wir können eine Anzahl von Tagen hinzufügen, an denen sie an diesem Ziel sein werden, und dann ein kleines Symbol hier anzeigt, ob dieses Reiseziel beliebt ist oder nicht. Wenn es also dieses Feuersymbol hat, ist es beliebt, andernfalls nicht, können wir es vielleicht hier nach oben verschieben. Also schauen wir, wenn wir anfangen zu entwerfen, wie es angeordnet ist, und dann wollen wir die Schaltfläche drücken damit sie tatsächlich mit diesem Ziel weitermachen oder mehr darüber erfahren können Lass uns anfangen zu designen. Gehen wir zurück zu unseren Entwürfen hier und hier drüben. Wir wollen unsere Karten also auf jeden Fall als Komponente einrichten , weil wir so viele davon verwenden werden und wir die Änderung nur einmal vornehmen wollen , wenn eine Änderung erforderlich ist. Fangen wir also mit dem Bild an, das sich innerhalb eines Rahmens befinden wird. Also drücke ich F auf der Tastatur und zeichne hier einen Rahmen, wobei die Wand die Shift-Taste gedrückt hält, und vielleicht könnte die Größe 180 mal 180 sein. Und wenn du es nicht ganz richtig hinkriegst, ist das okay. Lassen Sie beim Ziehen einfach los, und dann können Sie die Breite und Höhe hier einfach auf 180 ändern die Breite und Höhe hier einfach auf 180 Da haben wir's. Ich werde das hier hin verschieben, nur um es wieder in Ordnung zu bringen. Und wir werden hier eine weiße Füllung für den Platzhalter hinzufügen hier eine weiße Füllung für den Platzhalter Wenn ich genauer darüber nachdenke, können wir dieses Bild vielleicht sogar etwas größer machen, entweder 200 oder 220 Ich finde 220 nett. Und die meisten Bilder sind möglicherweise tatsächlich nicht quadratisch. Sie haben möglicherweise ein eher rechteckiges Format. Also würden wir diese Karte tatsächlich auf vielleicht 366 mal 220 erweitern wollen . Das ist ein gutes Verhältnis, das die meisten Bilder bilden können Es liegt bei 4423 Vielleicht können wir sogar das Kommando halten und die Höhe 240 nehmen Hier werden wir das einfach entfernen, damit die Proportionen nicht zusammengenommen werden, sodass wir es einfach auf 240 ändern können. Da haben wir's. Lassen Sie uns also zuerst einen Rahmen für unser Bild zeichnen. Und warum nutzen wir nicht unser Grid, um uns dabei zu helfen? Lassen Sie uns also hier unser Netz einschalten . Wir werden ein paar Dinge tun. Zuallererst wäre es schön, wenn diese Eingabe auch mit dem Raster übereinstimmt. Also können wir es soweit bringen. Hier drüben. Und für den Abstand dazwischen machen wir 24. Und lassen Sie uns für dieses Feld die Größe neu anordnen, sodass sie die Raster hier, die Spalten hier einnehmen die Raster hier, die Spalten hier Es passt also ein bisschen besser zu unserem Layoutraster. Und jetzt zu unseren Zielkarten, lassen Sie uns eine Zielkarte erstellen Eigentlich ist dieses Feld ein bisschen zu lang. Machen wir es ein bisschen kürzer. Nur drei Spalten sind mehr als genug, um eine Stadt einzugeben und jetzt zeichnen wir auch einen Rahmen, und wir machen hier eine quadratische Form. 318 mal 318, aber wir ziehen die Höhe tatsächlich auf vielleicht 210. Da haben wir's. Wir fügen eine weiße Füllung hinzu, und zwar für die Bilder unserer Zielkarten. Ich gehe zur Höhe des Gitters. nun für den Eckenradius Lassen Sie uns nun für den Eckenradius einen Eckenradius von 16 festlegen. Das ist nett. Und wir wollen direkt darunter einen Text hinzufügen und Stadt Land schreiben. Dies sind nur Platzhalterinformationen. Wir werden es hier drüben platzieren. Und jetzt werde ich Autoayout nicht verwenden, weil ich dir etwas Cooles zeigen werde , falls du Autoaout am Ende nicht verwendest Das wird sich also als nützlich erweisen. Also werde ich vorerst die Karte erstellen, ohne dass das automatische Layout vorhanden ist . Also werden wir zuerst alles hier platzieren. Also haben wir den Namen der Stadt. Hier habe ich auf der anderen Seite eine Bewertung von 4,7. Wir wollen eigentlich, dass das hier ist. Wir können das Sternsymbol hinzufügen, indem wir zu Phosphor-Symbolen gehen. Suche nach einem Stern, füge diesen hinzu. Jetzt korrigieren wir die Farben und die Ausrichtung in nur einer Sekunde. Ich glaube, dieser Stern ist hier nicht in unserem Rahmen. Wir wollen den Rahmen auswählen und sicherstellen, dass er sich darin befindet. Das ist es und direkt darunter wollen wir einen Preis haben. Lass uns einfach 1.000$ hier reinlegen. Und dann können wir vielleicht tatsächlich eine Kopie dieses Symbols hierher ziehen , indem wir Alt drücken und eine davon hierher ziehen Und direkt daneben fügen Sie einen Text und lassen Sie uns sieben Tage schreiben. Das ist die Länge der Reise. Und was haben wir noch? Wir haben eine Beliebtheitsikone. Also vielleicht können wir das auf die Seite mit dem Beliebtheitssymbol verschieben , vielleicht können wir später ein Tag dafür erstellen. Also lassen wir es für eine Sekunde weg und das Lesezeichen wird über dem Bild angezeigt Also machen wir für das eine Ellipse. Also habe ich O gedrückt, und ich werde hier 32 mal 32 zeichnen , und ich werde Alt verwenden, um sicherzustellen, dass der Abstand zehn Pixel von oben und rechts beträgt Verwenden Sie Phosphor-Symbole , um ein Lesezeichen hinzuzufügen. Symbol hier, platziere es hier , wo es momentan nicht ist, also doppelklicke ich, um diesen Rahmen auszuwählen , füge ihn ein und verwende dann die Umschalttaste, um 16 mal 16 zu machen , zentriere es einfach Auch hier werden wir die Farben und alles später anwenden. Vorerst, wenn du daraus ein automatisches Layout erstellen willst , wenn du all diesen Inhalt auswählst und Shift A drückst, wirst du ein Durcheinander haben, und das ist nicht das, was wir wollen. Was wir tatsächlich tun können, ist, wenn Sie in eine Situation wie diese geraten , in der Sie Autoyout nicht verwendet haben, Sie können tatsächlich mit der rechten Maustaste klicken und weitere Layoutoptionen auswählen und automatisches Layout vorschlagen Und wie Sie sehen können, hat Figma ineinander verschachtelte automatische Layoutrahmen entwickelt , und es zeigt Ihnen, dass dies alles neue Autolayout-Rahmen sind alles neue Autolayout-Rahmen sind Der einzige Ort, an dem es nicht so gut abgeschnitten hat, war Es hat also tatsächlich die Proportionen verändert, aber wir wollen nicht, dass es so ist. Also doppelklicken wir , um sicherzustellen, dass unser Sternsymbol tatsächlich quadratisch ist. Stellen Sie also sicher, dass es 20 mal 20 ist. Tatsächlich lösen wir einfach die Gruppierung von seinem Rahmen und stellen sicher , dass es links und mittig ausgerichtet ist . Das Gleiche gilt für diesen Es gibt also einige Nachbesserungsarbeiten, die Sie erledigen müssen. Aber im Grunde hat Figmas selbst ein intelligentes Adeod-Kunstwerk hinzugefügt ein intelligentes Adeod-Kunstwerk Sehr cool. Für diese 4.7 können wir Hug-Inhalte erstellen. Das Gleiche gilt für dieses Hier, und dieser scheint okay zu sein, also können wir den einfach lassen. Also fängt unser automatisches Layout an, für unsere Komponentenkarte hier gut auszusehen. Wir haben das nicht wirklich richtig formatiert, also kommen wir zum nächsten Abschnitt zurück, um dem Ganzen einige nette Details zu geben 40. Unsere Karten-UI aufpolieren: Ich werde ein paar Dinge tun, damit diese Karte schön aussieht, bevor anfange, sie zu duplizieren und diese Seite damit zu füllen. Also von ganz oben sollte unser Lesezeichen-Button hier eigentlich eine weiße Füllung haben, weil auch hier wieder ein Bild angezeigt wird, also wollen wir einen weißen Hintergrund für den Lesezeichen-Button Und dann ändern wir hier die Farbe für dieses Bild auf Primär 500 Nun, diese Ellipse hier, ich weiß, dass sie sich gerade einfügt, also können wir einen Strich hinzufügen , der vielleicht Primär 50 oder Primär 100 ist . Hier unten für unsere Stadt und unser Land können wir Body Large machen, um ein bisschen visuelle Hierarchie zu schaffen, weil das neben dem Preis wahrscheinlich die wichtigsten Details sind. Im Moment ist der Abstand zwischen diesen beiden etwas zu groß, also können wir ihn auf acht Pixel reduzieren. Und der Abstand zwischen den Informationen und der Karte ist nicht wirklich konsistent. Also lass uns 16 Pixel machen. Jetzt haben wir hier ein paar Ausrichtungsprobleme. Also dieser hier, es scheint dass er sich am unteren Rand dieses Rahmens befindet, während er eigentlich oben sein sollte. Also wollen wir das einfach so ändern , dass es stattdessen nach oben ausgerichtet ist. Der Abstand dazwischen beträgt sechs Pixel. Sie können sich für acht entscheiden , um konsistent zu sein. Das Gleiche gilt für diesen hier. Wir wollen nur sichergehen, dass das auch wirklich auf Hug Content Ich wähle diese beiden Textteile aus und mache Text 300 Lassen Sie uns für das Sternsymbol eine sekundäre Farbe von 500 verwenden. Jetzt könnte der Preis Text 400 sein, dieses Kalendersymbol könnte auch sekundär 500 sein. Eigentlich gefällt mir der Text hier nicht, also können wir ihn vielleicht etwas dunkler machen, und dieser könnte Text 500 sein. Sera, du siehst ein bisschen besser aus. Ich denke sogar, dass es besser ist, wenn wir nur eines dieser Symbole als Sekundärfarbe haben Es ist ein bisschen zu viel Orange hier. Also, wenn du hier schnell die Farbe ändern willst , können wir das einfach auf Link tun. Verwenden Sie die Pipette, und wenn Sie dann eine Farbe auswählen, nehmen wir an, wir möchten diese Textfarbe hier Wenn Sie darauf klicken, übernehmen wir diese Farbe bereits von dort. Es könnte ein bisschen zu viel sein. Warum reduzieren wir den Farbton nicht auf irgendwo hier? Das sieht ein bisschen besser aus. Und ein schöner Schatten könnte für dieses Bild hier nett sein. Lassen Sie uns also den Effekt eines Schlagschattens erzeugen. Das ist jetzt viel zu stark. Also, wir werden diesen Unschärferadius ein wenig vergrößern diesen Unschärferadius ein wenig , bis er vielleicht Versuch 20 ist, wir wollen nicht, dass er so stark ist, also machen wir 8% Ich finde das ziemlich gut. Und es kann ein bisschen niedriger sein. Also können wir tatsächlich einen Schlagschatten machen , der acht für das Y ist. Das sieht also schon ziemlich gut Alles, was wir tun müssen, ist das mit einigen Beispieldaten auszufüllen, und es wird viel schöner sein Nun, für diesen hier wollen wir auch ein Leerzeichen wie dieses hier. Also machen wir eher acht Pixel oder eine Lücke. Das Problem ist jedoch , dass dieser Rahmen hier nicht die gleiche Höhe wie dieser hat. Dadurch entsteht hier eine Fehllücke oder hier eine Fehlausrichtung. Wir haben also zwei Möglichkeiten. einen können wir tatsächlich alles automatisch anordnen und es stattdessen horizontal machen, oder Sie können dafür einfach auch einfach eine feste Höhe von 27 festlegen. Wenn Sie dies also auf 27 ändern, funktioniert es auch. Da haben wir's. Kehren wir zur nächsten Vorlesung zurück, um diesen Beispieltext durch echten Text zu ersetzen 41. Figma KI zur Generierung von Beispieldaten verwenden: Lassen Sie uns zunächst diese Karte auswählen und Altman K drücken, sie in eine Komponente umwandeln und sie über unser Ebenenbedienfeld hier in Zielkarte umbenennen unser Ebenenbedienfeld hier in Zielkarte Und wie Sie es wahrscheinlich erraten haben, werden wir sie hier nach draußen verschieben, sie in unseren ständig wachsenden Komponentenbereich Und dann kopiere eins hier runter. Ich werde diese beiden zusammen anordnen, und dann werden wir für das übergeordnete Bild hier einen Abstand von 40 Pixeln festlegen und dann werden wir für das übergeordnete Bild hier einen . Da haben wir's. Es hat also mehr Abstand von oben. für diesen Fall nun Lassen Sie uns für diesen Fall nun einige Beispieldaten verwenden. Warum öffnen wir also nicht Splash, um uns ein Bild von der Stadt zu geben . Fangen wir mit New York an. Bring einfach einen von ihnen hier rein. Nachdem der Rahmen hier ausgewählt war, habe ich auf das Bild geklickt und es wurde direkt in den Rahmen eingefügt Wunderschön. Und dann machen wir New York City. USA mögen das. Wir machen die Bewertung vorerst und lassen die sieben Tage und ändern den Preis vielleicht auf etwa 5.000$ Das sieht also gut aus. Und wenn Sie jetzt ein weiteres hinzufügen möchten, platziert FIGMA sie weiterhin hier unten, sodass wir dort ein weiteres verschachteltes automatisches Layout benötigen also diese beiden Zielkarten auswählen, drücken Sie Shift A und statt des horizontalen Layouts, was Sie tun könnten, machen wir Rap Bei Rap werden alle zusätzlichen Karten tatsächlich in die nächste Reihe geschoben. Nun, nur um es dir zu zeigen, wir werden Behälter hier der Breite entsprechend füllen. Nun, wenn wir es horizontal machen, was passiert, wenn wir unsere Karten immer wieder duplizieren Es wird so weitergehen. Und das wollen wir nicht. Wir wollen, dass es tatsächlich in die nächste Zeile oder die nächste Zeile in unserem Design übergeht Und genau hier haben wir diese automatische Layoutfunktion zum Umwickeln Wenn wir also weiter duplizieren, geht es in die nächste Zeile, was wir wollen Jetzt mache ich das rückgängig und habe vorerst nur zwei. Jetzt, was New York angeht, werde ich es in eine andere Stadt ändern. Lass uns Istanbul machen und diesen hier ersetzen, oder einfach einen anderen hier, diesen hier , wir machen Item Turkey und ändern den Preis auf sagen wir 3.000. Und statt sieben Tagen machen wir fünf Tage. Und statt 4,7 machen wir 4,5. Wir belassen den Abstand vorerst bei 24 Pixeln zwischen ihnen. Und wir können Figma AI tatsächlich verwenden , um mehr Inhalte für uns zu generieren Wir wollen eine Menge mehr generieren, aber wir wollen nicht alle selbst schreiben alle selbst Wir können dieses Duplikat einfach mit neuem Inhalt ziehen, und es könnte das automatische Layout für eine Sekunde durcheinander bringen. Und wir werden es ziehen, bis wir ein paar haben. Und wie Sie sehen können, generiert es von selbst eine Menge verschiedener Städte und Länder, eine Menge verschiedener Preise, eine Menge verschiedener Preise, Daten, Bewertungen und so weiter. Ich möchte einfach weitermachen und sichergehen, dass das den Behälter füllt und auf den nächsten übergeht Das einzige, was es momentan nicht generieren kann, sind Bilder. Alles was wir tun müssen, ist diese Städte auf Splash zu finden und die Bilder zu ersetzen. Wir können London machen. Doppelklicken Sie auf dieses Bild, wählen Sie eines aus, Tokio, wählen Sie ein Bild aus, wählen Sie dieses aus. Ich gehe nach Paris, wähle eins aus. Sidney und bis zum letzten hier. Wunderschön. Und jetzt haben wir einige Inhalte, die wir mit Fig MyI in nur wenigen Minuten generiert Fig MyI in nur wenigen Minuten Das ist wunderbar. Wenn man sich das ansieht, ist der Abstand ein bisschen überwältigend, also können wir vielleicht statt 24 Pixeln 32 machen. Fantastisch. Das sieht langsam richtig gut aus. Nun, dieser vertikale Abstand könnte auch etwas größer sein. Also lass uns hier 32 Pixel machen. Fantastisch. Das sieht langsam richtig nett aus. Jetzt haben wir hier noch ein paar Dinge hinzuzufügen. Wir haben das beliebte Symbol und die Schaltfläche hier immer noch nicht hinzugefügt das beliebte Symbol und die Schaltfläche hier Kehren wir also zum nächsten Abschnitt zurück, um auch diese beiden Teile hinzuzufügen 42. Gesperrtes Seitenverhältnis: Ein Problem haben wir derzeit mit den Karten und der Art und Weise, wie wir sie eingerichtet haben Im Moment haben diese eine feste Breite von 318 Pixeln. In diesem Fall. Nehmen wir an, wir wollen aus irgendeinem Grund eine eher quadratische Form wählen und diese 250 Pixel ändern. Am Ende verliert das Bild sein Seitenverhältnis und sieht ein bisschen anders aus. Also, nur um das zu demonstrieren, werde ich hier rüber gehen. Wir haben die gleiche Karte hier drüben. Wie Sie sehen können, wird bei der Größenänderung auch die Größe des Bilds geändert Und das ist normalerweise nicht das, was wir in einem Layout wie diesem wollen , in einer Karte wie Deshalb verfügt FiCMA über eine Funktion namens gesperrtes Seitenverhältnis , mit der wir das Seitenverhältnis dieser Energie fixieren können , sodass das nicht passiert Um das zu tun, können Sie einfach zu Ihrer Komponentenkarte gehen, den Rahmen auswählen, der das Bild enthält, und dann dieses Symbol hier auswählen, um das Seitenverhältnis zu sperren Wenn wir jetzt zur Instanz zurückkehren, machen wir dasselbe. Sie sehen, dass das Bild sein Seitenverhältnis nicht verliert, sodass sich das Bild nicht wie zuvor ändert. Daher empfehle ich dies auf jeden Fall für Komponenten , bei denen die Größe Ihres Projekts geändert wird , um das Seitenverhältnis des Bildes beizubehalten und sicherzustellen, dass Breite und Höhe immer erhalten bleiben. 43. Tags gestalten: Ich habe mir das angeschaut und mir wurde klar, dass wir eigentlich keine Schaltfläche benötigen, wie wir es ursprünglich in unseren Wireframes getan haben , weil die Karten selbst wie Knöpfe wirken können Wir haben also diese Bilder, und wir brauchen nicht unbedingt, dass der Benutzer eine Schaltfläche hat, ähnlich wie es Figma hier mit ihrer Version gemacht hat. Und deshalb ist es großartig, diese AIA-Funktionen zu nutzen. Das einzige, wovon ich kein großer Fan bin ist der Abstand, der immer noch da ist. Es sieht ein bisschen zu voll aus. Warum versuchen wir also nicht, unseren Designs etwas mehr Spielraum zu geben und versuchen, einen Abstand von 48 Pixeln zwischen den Karten Ja, wir haben hier nicht die vierte Karte, aber ich denke, es ist wirklich wichtig unsere Designs diesen Platz haben. Gründen der Konsistenz wäre es schön, wenn Aus Gründen der Konsistenz wäre es schön, wenn wir unsere Eingaben auch hier so verteilen würden, dass sie dem entsprechen Fantastisch. Wir möchten auch ein Tag hinzufügen, um die beliebtesten Artikel oder die beliebtesten Ziele anzuzeigen. Und das können wir mit einem schönen Tag hier mit einem Symbol tun. Lassen Sie uns also Phosphor-Symbole öffnen und nach einem Feuersymbol suchen. Klicken Sie auf eins Dieser ist nett. Wir können es hier in unseren Rahmen einfügen, und vielleicht können wir hier einen Titel hinzufügen, beliebt. Automatisches Layout dieser beiden zusammen. Dieser ist immer noch nicht hier drin, also wollen wir sichergehen, dass er drin ist. Und dann werden wir diese beiden automatisch verlegen. Der Text ist zu groß, also nehmen wir die Fettschrift der Fußzeile, oder wir brauchen ihn eigentlich nicht fett zu machen , auch wenn nur eine Und um die Grafik zu verbessern, können wir ihn hier auf die Seite oben rechts oder oben links legen Nun, Sie sehen, dass das mit den Farben und über diesen Bildern nicht so gut aussieht den Farben und über diesen Bildern nicht so Es wäre also schön, wenn dieses automatische Layout auch eine weiße Füllung hätte und wir den Radius so hoch machen würden, dass er vollständig kreisförmig ist. Ein bisschen Abstand, vielleicht zwei oder vier Pixel von den Seiten und von oben, wäre nett. Und tatsächlich ist dieser Abstand ein bisschen zu gering, besonders horizontal. Vielleicht wollen wir also acht horizontal machen. Und dieses Symbol hier, wir werden es auf 16 mal 16 verkleinern Lassen Sie uns das Symbol in ein schönes Orange ändern. Und tatsächlich können wir tatsächlich einen schönen orangefarbenen Farbverlauf machen. Warum machen wir hier nicht einen Farbverlauf. Und für die erste Farbe machen wir hier schönes Orange. Und mit der zweiten Farbe machen wir ein schönes dunkleres Orange. Das sieht gut aus. Das hier unten sieht viel besser aus. Und natürlich sollten nicht alle von ihnen das beliebte Symbol haben. Wir brauchen es nur auf s. Als Erstes für den Text hier, wir weiter und machen es so, dass Text 500 oder Text 400 tatsächlich besser ist. Lassen Sie uns eine boolesche Eigenschaft erstellen und sie Is popular nennen. Standardmäßig belassen wir es bei false , create property. Und dann wählen wir dieses Tag hier und verknüpfen die Sichtbarkeit mit seiner Beliebtheit. Jetzt gehen wir hierher und vielleicht machen wir das für einen von ihnen. Vielleicht ist dieser in London beliebt. Der in Tokio ist beliebt. Und so ist es jetzt zufälliger. Das sieht langsam wirklich gut und wir müssen nur noch ein paar Elemente hinzufügen. Unsere Karte für unsere Destination Discovery-Seite ist so gut wie vollständig . Wir vermissen einen Filter auf der Sortiertaste und dann die Sammlungen hier drüben. Ich überlasse Ihnen die Sammlungen als Übung , nachdem wir Ihr Kartendesign gemacht haben. Unsere Kollektionen bestehen also im Grunde aus Gruppen verschiedener Destinationen, es können also Dinge wie romantische Kurzurlaube, lustige Reisen oder monatelange Reisen sein , alle Kategorien, die Sie sich vorstellen können Und wenn du Hilfe benötigst, tippe dort auf jeden Fall auf Chat GPT, um Ideen für verschiedene Das wird also eine Übung sein, die du selbst machen kannst. Ich werde eine Version davon in meiner eigenen Datei erstellen, und Sie haben natürlich den Link, falls Sie sich ansehen möchten, wie ich es gemacht habe. Kommen wir jetzt zur nächsten Textur zurück, um an den Filtern und Sortierschaltflächen zu arbeiten 44. Filtersortierschaltflächen: Jetzt möchten wir eine Filter- und Sortierschaltfläche und dann einen zusätzlichen Text hinzufügen , der zeigt, wie viele Ergebnisse der Benutzer betrachtet. Also machen wir weiter und fügen hier einen Text zwischen den Eingaben und den Ergebnissen hinzu, und wir werden die Anzahl der Ergebnisse schreiben. Lassen Sie uns nur als Beispiel 42 Ergebnisse schreiben. Ändern Sie dies in Hauptteil und ändern Sie die Textfarbe in Text 300. Und jetzt werden wir in derselben Zeile einige Filter- und Sortierschaltflächen hinzufügen. Jetzt ziehe ich eine Kopie dieser Schaltfläche hierher und mache das automatische Layout dieser beiden mit Shift A und mache ein horizontales Layout. Nun, dieser übergeordnete Container ist ein bisschen falsch. Also machen wir weiter und verwenden eigentlich nur diesen Inhalt, sodass er mit dem Abstand, den wir haben, auf drei Karten passt. Auf diese Weise können wir also tatsächlich weitermachen und hier „ Ausfüllen“ verwenden und einen automatischen Abstand verwenden. Und für diese Schaltfläche lassen Sie uns Container füllen. Also nimmt es hier den gesamten Raum ein. Bei dieser Suche wollen wir sie vielleicht zu einem sekundären Button-Typ ändern und sie so ändern, dass sie nach Relevanz sortiert wird. Natürlich können sie klicken, um es zu ändern. Und wir machen noch einen und erstellen ein automatisches Layout zwischen diesen beiden mit einem Abstand von 16 Pixeln und einem großen Inhalt Für den Abstand erhöhen wir ihn auf 24, und dieser hier werden Filter sein Es wäre schön, ein paar Symbole neben diesen Schaltflächen zu haben. Also werden wir etwas Ähnliches mit unserer Schaltfläche machen , bei der wir ihr auch Symbole hinzufügen. Aber zuerst suchen wir nach zwei Symbolen, 14 Sortieren, 14 Filtern mit Phosphor-Symbolen Wir werden nach SRT suchen. Dieser ist nett Wir werden filtern. Dieser ist nett. Beide sind hier, drücken Sie bei beiden Befehl K und benennen Sie sie in den Symbolfilter um Und dieser wird ein Icon-Slash sein. Entschuldigung, dieser ist eigentlich ein Filter, und dieser wird Hoppla sein Das werden Schwerter sein. Sieht so aus, als ob sie nicht wirklich in unserer Sektion hier sind. Wir wollen sie reinbringen und tatsächlich 20 x 20 Pixel für die Größe verwenden sie auf primär 500 für die Farbe ändern. Und jetzt machen wir weiter und bringen einen von ihnen hierher. Jetzt wollen wir es stattdessen auf weiße Farbe ändern , da es sich auf einer blauen Schaltfläche befindet, und es hier einfügen, und für dieses werden wir alle Änderungen zurücksetzen, sodass es wieder dieselbe Farbe wie hier hat. Und lassen Sie uns eine boolesche Eigenschaft hinzufügen, das linke Symbol anzeigen und sie auf „ Falsch“ setzen nun beide so auswählen, werden wir fortfahren und die Sichtbarkeit an das linke Symbol anpassen Und noch etwas: Bevor wir das tun, werden wir auch eine neue Eigenschaft namens Instance Swap erstellen, wir werden sie Icon nennen. Und für die Instanz wählen wir das Symbol aus und sortieren eines, erstellen eine Eigenschaft und verknüpfen diese Eigenschaften-Appliance und wechseln zum Symbol und binden die Sichtbarkeit an das Symbol Showleft Jetzt können wir also hier runter gehen. Wählen Sie beide aus und zeigen Sie das linke Symbol auf ihnen an. Jetzt wird einer von ihnen eine Sorte sein. Der andere wird ein Filter sein. Da haben wir's. Fantastisch. Also haben wir jetzt diese Knöpfe. Sie ermöglichen es dem Benutzer, die Ergebnisse zu filtern. Und tatsächlich könnte ein großer Körper hier ein bisschen besser aussehen , was die Ergebnisse angeht, und es fängt an, viel besser auszusehen. Lassen Sie uns diese beiden automatisch anordnen und den Abstand zwischen ihnen tatsächlich etwas vergrößern , vielleicht 40 Pixel. Ich finde das schöner. Was würde also passieren, wenn sie auf Sortiert oder Filter klicken Wir können hier Drop-down-Menüs öffnen , um ihnen die verschiedenen Optionen zu zeigen, die Tatsache, dass sie nach Beliebtheit, Preis oder den Filteroptionen sortieren können , wie sie Budget, Dauer usw. auswählen können , und so weiter Oder wir können einen Motorcontainer öffnen , auf dem sich ein Motorkasten befindet. Und weil es für unser Filtern und Sortieren einfacher ist, denke ich, dass ein Drop-down-Menü in Ordnung sein wird Wann kommen wir nicht in der nächsten Vorlesung zurück, um diese Drop-down-Menüs so zu gestalten , wie es aussehen würde , wenn jemand auf diese Filter klickt oder sie nach Schaltflächen sortiert 45. Dropdown-Design: Entwerfen Sie unsere Dropdowns tatsächlich für ein paar Orte. Wir können dieses Dropdown nicht nur für die Sortierung nach den Filtern Wir können es hier sogar für das Drop-down-Menü verwenden, wenn sie auf ihr Profilbild klicken und von Profilbild sprechen Also entwerfen wir ein generisches Drop-down-Menü , das wir anpassen und ändern oder mehrere Varianten für verschiedene Orte erstellen können ändern oder mehrere Varianten für verschiedene Orte erstellen mehrere Varianten für verschiedene Orte Was die Optionen hier angeht, haben wir die Sortieroptionen nach Beliebtheit, Preis und Also können wir diese Optionen als Optionen und als Dropdown verwenden, und dann haben wir das Budget für Filter, Dauer, Erlebnisart und Wetter, das auf unsere Designs zurückgeht. Wir wollen ein Drop-down-Menü erstellen wir hier auf der Leinwand erstellen und es dann nach unten verschieben können , nur um zu sehen, wie es aussehen würde. Das erste, was ich tun möchte, ist T zu drücken , um einen Text zu beginnen und zu schreiben, und wir machen die Art von Bif Also machen wir Relevanz. Und dann drücke ich Shift A, um ein Layout zu erstellen. Ändern Sie die Füllung in Weiß und ändern Sie diese Textfarbe oder den Text 500. In einem automatischen Layout können Sie jetzt jederzeit eine feste Breite erstellen, wenn Sie möchten. Das bedeutet also, dass Sie die Breite oder die Höhe tatsächlich hierher ziehen und eine bestimmte Breite festlegen können. Also für so etwas wie ein Drop-down-Menü, bei dem wir eine bestimmte Breite kennen, die unser Dropdown haben soll, bringe ich das hier runter, nur um Ihnen das Verhältnis zu zeigen. Das ist immer noch ein bisschen klein. Es könnte ein bisschen größer sein. Oder wir können es hier sogar auf die Größe dieser Schaltfläche anpassen, die 245 ist. Und dann wollen wir hier einen textilen Körper auftragen. Wenn Sie hier also eine feste Breite für das automatische Layout haben der Inhalt länger wird, ändert sich die Breite nicht, wie Sie sehen. Die Breite bleibt immer gleich. Sie könnten jedoch den Inhalt Ihrer Umarmung ändern , damit der Text den Container füllt Auf diese Weise wird zusätzlicher Text, wenn er vorhanden ist, horizontal nach außen wie folgt ausgestreckt Ich gehe zur nächsten Zeile über, anstatt die Box oder den Container zu verlassen Eher. Also geben wir hier Relevanz ein, und dann möchten wir mit einem kleinen Häkchen angeben , dass Relevanz derzeit für Sortiert nach ausgewählt ist. Ich öffne die Phosphor-Symbole, nehme ein Häkchen und hier und es wird dort eingefügt , wunderschön Es ist ein bisschen zu groß. Also verwenden wir ein Skalierungswerkzeug, bei dem ich einfach K auf der Tastatur drücke. Manchmal ist es besser, das Skalierungswerkzeug für die Neuskalierung zu verwenden , falls ein Strich oder andere Dinge zu dünn werden könnten , wenn Sie ein einfaches Verschiebewerkzeug verwenden. Schreiben wir also 16 mal 16. Ich finde das ziemlich gut. Und wir können sogar die Primärfarbe 500 auftragen. Und nur um zu zeigen, dass dieser ausgewählt wurde, können wir diesen in Fettdruck ändern. Das ist jetzt die Sorte. Wir können ein ähnliches Styling von dieser Schaltfläche bis hier anwenden. Und wenn Sie tatsächlich einen Stil dieser Schaltfläche kopieren und hier einfügen möchten , müssen Sie nur Ihre Schaltfläche auswählen, Alt Command C oder Alt Control C und hier Alt Control oder Alt Command V. Aber das Einzige, Alt Control oder Alt Command was passieren wird, ist, dass alle Eigenschaften eingefügt werden Jetzt sind wir also wieder beim HC-Inhalt nicht bei einer festen Höhe oder Breite Also können wir hier einfach 245 eingeben. Ups, 45, und das wird schon einmal angewendet. Nun, die Polsterung hier oder die linken und rechten Ränder sind 24. Ich denke, wir können das auf 16 reduzieren. Und wir werden diese beiden mit Shift A zu ihrem eigenen automatischen Layout machen mit Shift A zu ihrem eigenen automatischen Layout Jetzt haben wir also das automatische Layout. Und wir drücken Befehl D, um es zu duplizieren. Aber statt eines horizontalen Layouts möchten wir ein vertikales Layout, sodass wir verschiedene Optionen haben , die der Benutzer auswählen kann. Und natürlich wollen wir das Häkchen tatsächlich entfernen Sie können es entweder loswerden oder Sie können es einfach verstecken Um es auszublenden, drücken Sie Shift H oder erneut, Sie können auf das Symbol hier klicken. Auf diese Weise können Sie es wieder einschalten, wenn Sie anzeigen möchten, dass die Relevanz ausgewählt ist oder dass eine andere Option ausgewählt ist und diese nicht mehr fett gedruckt ist, und wir ändern diese in Entfernung Oder eigentlich wollen wir Popularität. Und dann werden wir dieses automatische Layout für den Preis duplizieren . Und wir geben niedrig bis hoch an, und dann duplizieren wir das noch einmal und geben hoch bis niedrig an, sodass der Benutzer die Option hat für den Preis von hoch nach niedrig oder von niedrig nach hoch und dann vielleicht auch nach Bewertungen anzuzeigen . Das sieht also gut aus. Eine weitere Sache, die wir für unser Drop-down-Menü hier tun können, damit es optisch etwas besser aussieht optisch etwas besser ist, dass wir den Abstand zwischen den verschiedenen Optionen vergrößern können, was großartig ist, aber wir können auch eine Trennlinie zwischen ihnen hinzufügen. Nun, wir haben hier tatsächlich bereits eine Trennlinie erstellt. Also halte ich die Befehlstaste gedrückt , um es auszuwählen, und kopiere es einfach von unserer Anmeldeseite direkt in unser Drop-down-Menü Das Schöne ist, wenn Sie es einfügen, müssen Sie nur die Breite ändern, um den Behälter zu füllen, und Sie können ihn nach oben und unten verschieben Und alles , was Sie tun müssen, um dies schnell zwischen den einzelnen Elementen zu duplizieren, drücken Sie einfach Befehl D, um es zu duplizieren, und den Abwärtspfeil. D, Befehl D, Abwärtspfeil, Befehl D, Abwärtspfeil. Jetzt haben wir also diese Linie zwischen verschiedenen Elementen, um eine bessere visuelle Trennung zwischen ihnen zu erreichen. Jetzt halte ich die Befehlstaste und die Umschalttaste gedrückt, um sie alle zusammen auszuwählen. Ich denke, diese Farbe ist ein bisschen zu stark. Vielleicht können wir sie also tatsächlich von unseren Textilien trennen und eine leichtere Version davon erstellen Ich finde das nett. Alternativ kannst du auch Primary 50 machen. Beides sind gute Optionen. Eigentlich lasse ich es bei der 50. Primarschule. Die Sache ist, wenn du es hierher bringst, geht es in das automatische Layout und bringt alles durcheinander. Wenn Sie sehen wollen, wie es obendrein aussehen würde , können Sie eigentlich nur zwei Dinge tun. Entweder können Sie hier die Umschalttaste und den Rechtspfeil oder den Linkspfeil verwenden , um es manuell in den Rahmen zu bringen , ohne es versehentlich in einen automatischen Layoutrahmen oder eine andere Option zu ziehen Layoutrahmen oder eine andere Wenn es sich hier in einem beliebigen automatischen Layoutrahmen befindet , können Sie tatsächlich auf diese Schaltfläche mit der Aufschrift Automatisches Layout ignorieren klicken, und dieses spezielle Element das Sie können es verschieben, wo immer Sie wollen, und es wird nicht mit den Regeln für das automatische Layout interagieren Wir wollen das ein wenig abgrenzen und zeigen nur, wie es aussehen würde, wenn es geöffnet ist. Und das ist zwar nett, das Einzige, was das gebrauchen könnte, ist eine Trennung zwischen Hintergrund und Vordergrund. Wir sollten zeigen, dass dieses Drop-down-Menü geöffnet ist oder sich in einem geöffneten Zustand befindet. Wir könnten hier also einen stärkeren Schatten erzeugen , um das zur Geltung zu bringen, sodass wir standardmäßig einen Effekt hinzufügen können, der Effekt ist Schlagschatten, was wir wollen, und wir möchten einen Schatten anwenden, der ein etwas höheres Y hat, sodass er, wie Sie hier sehen können, mehr vertikal nach unten gerichtet ist, und wir können die Unschärfe erhöhen, um 16 oder sogar 24 zu versuchen . Versuchen Sie es hier mit 30. Das ist besser. Und was die Opazität angeht, stelle ich sie immer gerne etwas niedriger ein Wir wollen nicht, dass es so gut sichtbar ist. Das ist also nett. Sie können deutlich sehen, dass es vom Hintergrund getrennt ist. Also das ist nett. Es ist offen. Und wenn sie dann hier oder an einer anderen Stelle auf dem Bildschirm auf eine Option klicken, wird dieses Drop-down-Menü geschlossen. Bei solchen Elementen, Sie beispielsweise einem Entwickler vorstellen möchten, der daran arbeiten wird, platziere ich dieses Drop-down-Menü gerne außerhalb meiner Designs, platziere ich dieses Drop-down-Menü gerne gebe ihm einen Namen, damit wir das Drop-down-Menü sortieren können und Sie jederzeit die Kommentarfunktion verwenden können Wenn du also C auf deiner Tastatur drückst, kannst du Kommentare für andere Leute hinterlassen Sie können Ihren Entwickler taggen und schreiben, dass dies die Drop-down-Option für die Sortierung ist. Das ist eine Möglichkeit, es zu tun. Eine andere Möglichkeit besteht darin, DevMo zu verwenden, um Anmerkungen zu hinterlassen Wir werden in zukünftigen Vorlesungen darauf eingehen, deshalb werde ich jetzt nicht darauf eingehen Damit gibt es also auch die Filteroption oder das Filter-Dropdown. Das überlasse ich dir als Aufgabe. Und auch hier haben Sie immer Zugriff auf meine Akte, falls Sie sehen möchten, wie ich das gemacht habe. Und wenn Sie damit fertig sind, kommen wir in der nächsten Lektion zurück, um mit unserer nächsten Seite zu beginnen. Das ist unserer nächsten Seite zu beginnen die Beschreibungsseite oder die Buchungsseite, wie auch immer Sie sie nennen möchten. Das ist die Seite, die eigentlich direkt nach dieser Seite ist. Sobald also ein Benutzer, sagen wir, auf London UK klickt, wird er zu dieser Artikelbeschreibung weitergeleitet, oder wieder, der Name ist nicht wirklich wichtig. Was zählt, ist, dass es sich um einen Buchungsbildschirm handelt. Es ist ein Ort, an dem sie weitere Informationen zu dieser Seite sehen können . Dies ist die Seite , für die wir hier auch das Wireframe erstellt haben hier auch das Wireframe erstellt Ich habe hier ein Wireframe, in dem ich die verschiedenen Elemente auf dieser Seite hervorgehoben habe die verschiedenen Elemente auf dieser Seite hervorgehoben Also schauen wir uns das genauer an und dann wieder, in ähnlichem Stil, beginnen unseren Weg von oben, gehen nach unten und beginnen mit dem Entwerfen 46. Reisedetailseite: Weiter zu unserer Seite mit Reisedetails. Ich habe vergessen, dass ich es vorerst so nennen werde. Und mein Design ist hier drüben. Ich werde diesen KI-generierten ersten Entwurf loswerden. Und schauen wir uns unsere Wireframes an , um zu sehen, was wir in diesem Design haben Von oben haben wir also eine Navigationsleiste, die wir bereits Wir möchten eine Zurück-Schaltfläche haben, damit Benutzer problemlos zur Suchseite oder zur Zielerkennungsseite zurückkehren können. Wir wollen den Namen des Ziels. So ähnlich wie das, was wir auf der Karte haben, die Stadt und das Land, nennen wir es einfach Stadt und Land, aber sie könnten interessantere Namen haben. Und vielleicht werden wir das in Kürze auch mit Figma AI untersuchen in Kürze auch mit Figma AI Aber bevor wir uns eingehend damit befassen, haben wir hier unsere Startbewertung. Wir haben das Beliebtheitssymbol oder das Tag sowie das Lesezeichen oder die Schaltfläche Speichern Sie können diese Reise also mit einem Lesezeichen versehen , wenn Sie sie sich später ansehen möchten Einige Bilder auf dieser Seite, damit wir das Bild der Reise aufnehmen können Im Moment haben wir also nur ein Bild von der Stadt. Aber Sie können sich in manchen Situationen vorstellen , dass diese Reise, von wem auch immer sie erstellt wurde mehrere Bilder von Leuten beinhalten könnte sich auf dieser Reise amüsieren und so weiter und so fort. Vielleicht sind es nutzergenerierte Bilder. Das überlasse ich Ihnen, wenn Sie mit etwas außerhalb dessen experimentieren möchten , was ich entworfen oder hier skizziert habe Das Ziel dabei ist nicht, es genau so zu machen , wie ich es mache, sondern auch deine eigene Kreativität einzubeziehen Also zögern Sie nicht, dies in die Richtung zu lenken, die Sie für hilfreich halten. Dann möchten wir direkt darunter einen Aufruf zum Handeln, damit sie einen Raum auswählen können. Der nächste Schritt bei der Auswahl dieser Reise besteht also darin , ein Zimmer auszuwählen, in dem sie schlafen werden. Und genau hier haben wir einige Symbole für die Annehmlichkeiten, die in diesem Reiseziel oder in diesem Reisepaket enthalten sind. Also, was ist enthalten, und wir können sie im Symbolformat und so haben . Dann haben wir unsere Unterkunft. Das sind also Karten, um die verschiedenen Zimmertypen und den Preis pro Nacht zu sehen . Mit der Option, die Daten, die sie bereits beantragt haben, auf dieser Seite zu filtern oder anzuzeigen . Wenn sie also bereits einige Daten von und zwei übernommen haben, könnte es hier angezeigt werden. Andernfalls könnten sie es sowie die Anzahl der Reisenden eingeben, sowie die Anzahl der Reisenden eingeben, was sich auf den Preis auswirken könnte, den sie zahlen. Und wenn sie einige Daten eingeben, können Sie sich vorstellen, dass wir diesen Preis pro Nacht tatsächlich auf den Gesamtpreis ändern können , den diese Reise sie kosten wird. Es wäre also interessant, das zu erkunden. Direkt darunter befinden sich Buchungsoptionen, sodass wir diesen Gesamtpreis hier sogar in die Buchoption aufnehmen können. Und dann haben wir einige Bewertungen. Wir haben also verschiedene Bewertungs- oder Testimonialkarten oder Bewertungskarten, die wir entwerfen können, sowie einige ähnliche Ziele Dies könnte also den Zielkarten ähneln , die wir bereits entworfen Es könnten andere Optionen sein, die sie in Betracht ziehen könnten. Diese Detailseite enthält eine gute Menge an Inhalten. Ich fand es schön, alles aufzunehmen, was der Benutzer zu diesem Zeitpunkt benötigt. Wenn Sie sich in die Lage des Benutzers versetzen und eine Buchungsseite aufrufen, was sind die Dinge, über die Sie sich wundern, und es wäre schön hier aufzunehmen und sicherzustellen , dass Sie sie hinzufügen. Das sind also die, von denen ich dachte, dass hier Sinn machen würden. Und das Ziel ist, dass sie, sobald sie auf Buchen klicken , zur Buchungsseite gelangen, auf der sie die restlichen persönlichen Daten und Zahlungsinformationen eingeben können der sie die restlichen persönlichen Daten und Zahlungsinformationen eingeben . Fügen Sie also eine Karte für die Zahlung hinzu. Wir können hier einige zusätzliche Optionen für die Reise anbieten, wie Versicherungen, verschiedene Dinge. Vielleicht eine Autovermietung usw. und so weiter und dann eine Schaltfläche, um die Buchung abzuschließen Und nebenbei haben wir eine Zusammenfassung dessen, was sie buchen Also werden wir diese Seite natürlich später durchgehen. Konzentrieren wir uns zunächst auf die Seite, die wir entwerfen. Ähnlich wie bei der Destination Discovery-Seite werden wir das Schritt für Schritt aufschlüsseln. Zunächst werden wir uns auf diesen oberen Teil oder den Abschnitt mit den Helden dieser speziellen Detailseite konzentrieren diesen oberen Teil oder den Abschnitt mit . Deshalb werden wir hier die grundlegenden Informationen, eine Beschreibung und eine Schaltfläche zur Zimmerauswahl hinzufügen, zusammen mit diesen Symbolen hier und den Bildern. Fangen wir also mit dem und allem anderen darunter an. Wir werden in den folgenden Vorlesungen darauf zurückkommen, daran zu arbeiten . Wenn Sie also bereit sind, lassen Sie uns einsteigen und mit dem Entwerfen beginnen. Das ist eine spannende Seite. 47. Trip-Header-Design: Ordnung, lassen Sie uns diesen oberen Teil unserer Seite mit den Reisezieldetails zusammenstellen diesen oberen Teil unserer Seite mit den Reisezieldetails Lassen Sie uns zuerst diesen Frame hier mit Alt duplizieren Wir können die Navbar hier lassen, aber wir können diesen Inhalt hier loswerden. Lass uns weitermachen und mit einem Text beginnen. Und das wird für unseren Zurück-Button sein. Wir werden zurückschreiben. Sie können auch an alle Ziele zurückschreiben , die ganz Ihnen überlassen sind. Es ist schön, dem Benutzer zu sagen, wohin er genau gehen wird , wenn er hier klickt. , dieser sollte 32 Pixel von oben entfernt Ich glaube, dieser sollte 32 Pixel von oben entfernt sein, und lassen Sie uns 48 Pixel von links entfernen. Es ist also nett und gleichmäßig mit unserem Raster. Ich möchte hier ein kleines Symbol oder einen Chevron einfügen. Lassen Sie uns also in Phosphor auftauchen und nach Chevron suchen. Hier gibt es einen schönen, den Sie Ich wähle die beiden zusammen aus und drücke Shift A, aber mache eine horizontale Wunderschön. Jetzt ist das Problem, statt einer festen Breite dass wir statt einer festen Breite einen großen Inhalt wollen Das ist viel besser. Ich denke, der Abstand ist hier in Ordnung, weil das Symbol selbst bereits einen gewissen Abstand hat, sodass wir sie nicht wirklich voneinander trennen müssen Aber wenn du ein Symbol verwendest, bei dem ein Abstand eingehalten werden muss, kannst du den Abstand zwischen deinem Chevron jederzeit anpassen Du machst es hier sogar um vier Pixel. Und dann wollen wir links eine Linie auswählen , aber in der Mitte. Also vertikal, es ist nicht oben , es ist nicht unten. Es ist genau in der Mitte. Und für die Auswahlfarbe, was wiederum in einem Fall wie diesem, in dem wir sowohl einen Chevron als auch einen Text haben, bedeutet, dass wir den Text oder die Farbe von beiden ändern Wir können es auf Text 400 oder sogar Text 300 setzen. Es ist also ein subtiler Knopf, der nicht sehr auffällig oder offensichtlich sein muss , solange er die Arbeit hier erledigt, was meiner Meinung nach der Fall ist. Da ist unser Zurück-Knopf. Wir wollen den Namen des Reiseziels, die Stadt, das Land , die Bewertung, die Beliebtheit und den Speicherplatz sowie das Bild hier. Fangen wir also mit dem Bild an, denn wir können einfach eines dieser Bilder kopieren. Lass uns an dem in London, Großbritannien, arbeiten. Also doppelklicke ich bis ich diesen Rahmen mit einem Bild habe, Befehl C auf meiner Tastatur, komme wieder rein, wähle unseren Rahmen aus und drücke Befehl V, um ihn einzufügen. Ich stelle nur sicher, dass unsere Ausrichtung hier stimmt. Eine Sache hier ist, dass ich den Rahmen eingefügt habe , der auch dieses beliebte Tag im Lesezeichensymbol hat, aber wir wollen sie nicht genau hier haben Ich werde Command G drücken, um eine Gruppe für diese beiden zu erstellen also Dinge gruppieren, können Sie sie einfach verschieben und auch dieses Tag aus dem Weg räumen Wir haben die zur Seite, die wir in nur einer Sekunde benötigen werden Dieser sieht gut aus, außer dass wir ihn etwas größer haben können. Hier wäre unser Grid sehr hilfreich. also unser Raster beschriften, können wir genau sehen, wo wir auch unser Image erweitern könnten . Und ich denke, genau hier ist es perfekt, vier Spalten zu übernehmen . Wir haben eigentlich fünf Kolonnen. Ich denke, es ist eine gute Aufteilung zwischen fünf und sieben Spalten für den Rest der Informationen hier. Du könntest hier alternativ auch vier machen, aber ich denke, die Bilder sind wichtig und sollten groß genug sein, um sie hier zu sehen. Für die Kleinen hier unten können wir vorerst einfach dieses Bild hier duplizieren und ein kleineres machen. Und ich halte die Shift-Taste gedrückt, um die Proportionen einzuhalten. Andernfalls geht dein Rahmen überall hin. Achten Sie also darauf, die Umschalttaste gedrückt zu halten, wenn Sie das gleiche Verhältnis zwischen Ihrer Breite und Höhe haben möchten . Und eine Sache ist, wenn ich das verkleinere, siehst du, dass sich der Randradius oder der Eckenradius nicht ändert, also sieht es ein bisschen seltsam aus, weil es hier zu rund ist Also werden wir das in nur einer Sekunde anpassen. Wenn wir unser Raster noch einmal aktivieren, können Sie hier meiner Meinung nach einige Anpassungen vornehmen, damit es zunächst gut aussieht und jedes dieser kleinen Bilder ein eigenes Raster sein könnte. Jetzt können wir eines duplizieren und es hier platzieren. Ich werde sie automatisch zusammenfügen und dann noch ein paar Mal duplizieren, und dann noch ein paar Mal duplizieren bis wir hier fünf haben nun ein automatisches Layout ausgewählt Wenn Sie nun ein automatisches Layout ausgewählt haben und schnelle Änderungen an allen Elementen gleichzeitig vornehmen möchten , sobald Sie das automatische Layout ausgewählt haben und die Eingabetaste drücken, können Sie alle kleinen Dinge auswählen , die sich darunter oder darin befinden Jetzt können wir also schnell eine Änderung vornehmen und acht Pixel für den Eckenradius angeben. Mal sehen, wie das aussieht. Okay, es sieht anständig aus. Natürlich brauchen wir da ein paar verschiedene Bilder, und vielleicht wäre es nett, wenn sie einen Rand zu einem Strich hätten. Ich wähle diesen aus, erstelle einen Strich und verwende Secondary 200 sieht gut aus, und ich werde auch für diese einen Strich anwenden, von Secondary 200 Sieht gut aus. Jetzt müssen wir hier unsere Labels hinzufügen. Fangen wir also vorerst mit den Labels an. Name des Ziels. Und wir machen ein H zwei oder vielleicht ein bisschen zu groß, also könnte ein H drei gut sein. Hier die sekundäre 900 als Schriftfarbe, sodass unser Raster wieder sehen kann, wo wir diese platzieren können. nun für den Abstand zwischen diesen beiden Lassen Sie uns nun für den Abstand zwischen diesen beiden Pixeln 40 Pixel oder sogar 48 Pixel angeben. Wir haben also unseren Namen des Ziels. Wir wollen Stadt und Land. Also mache ich weiter und kopiere einfach die Stadt und Land von hier und hierher, du musst nicht alles zweimal machen. Wir werden das Lesen machen. werde ich es einfach mit dem Symbol hierher kopieren. Wir haben hier das Beliebtheits-Tag und dieses Lesezeichen-Symbol. Im Moment sind sie also alle zusammen, aber wir sollten sie natürlich automatisch anordnen, damit sie gleichmäßig sind Dieser sollte zufrieden sein. Und aus irgendeinem Grund ignoriert dieser das Autolayout. Wir möchten also, dass alle das automatische Layout nicht ignorieren. Aber der Abstand zwischen ihnen ist natürlich viel zu gering. Wir werden das auf vielleicht 32 Pixel oder sogar 48 Pixel ändern . 32 Pixel oder sogar 40 Pixel. Platzieren Sie sie 16 Pixel von hier entfernt. Automatisches Layout. Lassen Sie uns hier eine weitere Textebene hinzufügen. Dies ist ein Beschreibungstext. Das werden wir später einklappen. Wenn Sie nun ein Textfeld mit fester Größe haben möchten, können Sie Ihr Textfeld jederzeit von einer automatischen Breite auf eine feste Größe ändern . Wenn ich das also repariere, wird der Text automatisch bis hierher in die nächste Zeile Und weil es eine feste Höhe hat, wird die Breite hier automatisch umgebrochen So würde es also aussehen, oder Sie können eine breitere oder größere Breite wählen. Und dann wollen wir von unseren lokalen Ressourcen aus klicken, versuchen wir es mit der Schaltfläche hier sodass es jetzt heißt, wählen Sie einen Raum aus. Wir können es ändern, um stattdessen die Verfügbarkeit anzuzeigen. Ich denke, es klingt besser. Nun, dieser ist nicht in unserem Out-Layout enthalten, also wollen wir ihn auch in dieses aufnehmen. Also diesen wollen wir eigentlich heißen Inhalt machen, also er schrumpft und wächst mit dem Behälter, und wir wollen diesen statt eines festen mit ebenfalls heißem Inhalt Im Moment ist es also diese Textebene, die die Grenze des übergeordneten automatischen Layouts beibehält Aber der Abstand zwischen allem ist ein bisschen zu eng, also können wir ihn ändern, wenn wir ihn auf 40 ändern, dann ist es zu viel zwischen diesen beiden, also können wir diese automatisch separat layouten und 24 machen, und der Rest sieht gut aus. Ich ändere diesen Wert für die Lücke auf tatsächlich 16 Pixel. Und wir werden die Höhe für diesen festlegen. Und was wir tun werden, ist , es so zu gestalten , dass es mit diesem Bild hier übereinstimmt. Ich denke, das würde besser aussehen. Und für den Text selbst werden wir den Container so füllen , dass er hier drüben endet Wenn der Text zu lang ist, wollen wir nicht alles zu sehr nach unten schieben Dann klicken wir hier auf die Texteinstellungen und kürzen den Text Wenn der Text also zu lang ist, wird er auf diese Weise gekürzt. Das sieht besser aus. Und wenn es zu lange dauert, können wir immer eine Schaltfläche „Mehr anzeigen“ oder „Mehr lesen“ direkt darunter haben . Ich werde das hier nicht hinzufügen, aber du kannst es jederzeit hinzufügen. Fantastisch. Wir haben die enthaltenen Artikel oder Symbole hier nicht. Wir werden im nächsten Abschnitt zurückkommen , um sie zusammen mit einigen Beispielinhalten für unsere Seite 48. Figma KI-Schreibwerkzeuge verwenden: FigMA AI bietet uns also tatsächlich viele Schreibwerkzeuge, und wir können den Inhalt tatsächlich nur mithilfe von und wir können den Inhalt tatsächlich KI erheblich verbessern, und Sie müssen FigMa nicht mehr verlassen Du kannst es einfach hier drinnen machen. Warum werfen wir also nicht einen Blick darauf, was es für uns tun kann, indem wir zu unserem Aktionsmenü übergehen. Und wenn Sie dann mit dem Schreiben beginnen, sehen Sie einige Optionen Du kannst Figma bitten, etwas umzuschreiben, etwas kürzen oder in eine andere Sprache zu übersetzen Jetzt, im Moment, möchte ich den Namen des Ziels tatsächlich umschreiben, um einen besseren Namen zu erhalten Warum bitten wir sie also nicht, einen Reisenamen zu finden, der aufregend ist und kurz für eine Reise , sagen wir, London, Großbritannien, steht Mal sehen, was dabei herauskommt. Du drückst einfach die Eingabetaste und dann okay, das ist noch einer. Und wenn es Ihnen nicht gefällt, können Sie es bitten, Änderungen vorzunehmen. Sie können es bitten, es kürzer oder lockerer zu machen. Lassen Sie uns nach mehr Lockerheit fragen. Okay, das ist ein bisschen zu lang. Machen Sie die Änderungen kürzer. Mir gefällt das nicht ganz. Ich möchte, dass es mit einer bestimmten Aktivität, die in London beliebt ist , neu geschrieben und kurz gehalten wird. Lass uns sehen Okay, das ist interessant. Kann einen kürzeren machen. Ich werde sagen, mach es vorwärts. Und sehen Sie, was es macht Okay, wir können damit weitermachen. Sie können Sie weiterhin bitten, Änderungen vorzunehmen, und Sie können natürlich auch eingreifen und Ihre eigenen Änderungen vornehmen. Ich finde das nett und wir können danach fragen und wir können den Beschreibungstext neu schreiben und ihn durch eine Beschreibung ersetzen, wie eine einwöchige Reise in London, Großbritannien für einen Reisenden aussehen könnte, der diese Reise buchen möchte Mal sehen, was sich hier alles einfallen lässt. Fantastisch. Ich denke, das ist vorerst ziemlich gut, viel besser als der Originaltext. Und statt einer Fußzeilengröße machen wir es zu einer Körpergröße Und ich werde die Höhe hier auf hier drüben erhöhen. Also, unsere Schaltfläche „ Verfügbarkeit anzeigen “ stimmt mit dem Ende hier überein, und ich werde diese beiden geordnet zusammenfügen und auch diese zusammen Viel besser. Kommen wir in der nächsten Lektion zurück, um die Symbole für das zusammenzustellen was in Bezug auf die Ausstattung enthalten ist, und fahren dann mit unserem Bereich Unterkünfte fort. 49. Funktionsliste: Deshalb möchten wir für diesen nächsten Teil der Detailseite des Reiseziels einige Symbole hinzufügen, die die Annehmlichkeiten anzeigen , die als Teil des Reiseziels oder der Reise, auf der sie sich gerade befinden, enthalten als Teil des Reiseziels oder der sind. Und wenn wir hier nochmal zurückschauen, können wir das direkt unter unseren Bildern hier hinzufügen. Übrigens habe ich auch einige Bilder aus dem Plug-in Unsplash hinzugefügt aus dem Plug-in Unsplash Wenn du das für die verschiedenen Bilder hier unten noch nicht gemacht hast, kannst du dir dafür auch eine Sekunde Zeit nehmen Nun, was den Titel dieses Abschnitts angeht, können wir ihn einfach Was ist enthalten nennen und dann ein paar Symbole haben und vielleicht mit etwas Text, um zu erklären, was diese bedeuten. Also werde ich hier eine neue Textebene hinzufügen , was enthalten ist. Und für den Typ, den ich machen möchte, wir sind in einer Sechs, ist das nett. Ich werde das hier rüberbringen, 48 Pixel vom oberen Rand entfernt platzieren. Und bevor ich das in einen äußeren Layoutrahmen mit dem Rest des Inhalts hier einfüge mit dem Rest des Inhalts hier , mache ich das hier zuerst fett, also drücke ich hier Befehl B. Und dann werde ich für Icons die Plug-in-Phosphor-Symbole hier verwenden , um einige Icons zu ziehen Einige Dinge, über die wir schreiben können und ich werde nur ein paar Symbole hinzufügen Sie können gerne mitmachen, wenn Sie möchten. Ich werde das Schwimmsymbol hinzufügen, und im Moment wird es in meinem Bild verschwinden. Ich kann es nicht vollständig sehen, aber ich werde in einer Sekunde dazu kommen. Wir machen hier ein Handtuch. Ich weiß. Also die Icons genau hier drüben. Ich ziehe es einfach nach unten, damit wir es sehen können. Wir machen einen Kaffee, damit wir sehen können, ob Kaffee in dieser Reise enthalten ist oder ob eine Kaffeemaschine dabei ist. Vielleicht machen wir einen zum Frühstück, oder wir haben eigentlich keinen, also vielleicht eine Gabel. Okay, dieser funktioniert. Ob wir sagen können, dass das Frühstück im Preis inbegriffen ist oder nicht. Wir machen eine Glocke. Nur um zu zeigen, ob es Conciage gibt, vielleicht 247 Conciage oder Falls wir Hilfe suchen, haben wir diese hier, sodass wir einfach sagen können, dass wir Support rund um die Uhr oder ähnliches haben Lass uns sehen. Was können wir noch hier hinstellen? Ich möchte wahrscheinlich das WLAN erwähnen. Das ist wichtig. Ich denke, das ist vorerst gut, um damit anzufangen. Bei diesen Symbolen wird es also als SVG eingefügt, was bedeutet, dass wir sie einfach in der Größe ändern und neu formatieren können sie einfach in der Größe ändern und neu formatieren , ohne dass sie an Qualität verlieren. Das ist also Ich wähle einfach alle zusammen aus und drücke Autoaout oder Shift A. Das und drücke Autoaout oder Shift A. Das ist viel übersichtlicher. Und dann mache ich genau das Gleiche mit dem Titel Was ist enthalten Icons können ein bisschen größer sein. Wir können also auf diesen Autoeuframe klicken, den wir gerade erstellt haben, und die Eingabetaste drücken, um alle untergeordneten Komponenten auszuwählen Und ich drücke K, um auf unser Skill-Tool zuzugreifen, und wir haben hier die Breite und Höhe, die wir für diese Symbole einstellen können Also werde ich 32 mal 32 versuchen. Das ist ein bisschen besser. Aber wir wollen sicherstellen, dass es sich stattdessen um Hug Contents handelt stattdessen um Hug Contents Das Gleiche gilt für diesen. Die Symbole sind momentan etwas zu dunkel. Ich werde Escape drücken, um das Skalierungswerkzeug zu verlassen. Fügen Sie hier etwas mehr Abstand hinzu, vielleicht 16 Pixel. Für das, was enthalten ist, können wir vielleicht einen zweiten 900 machen. Für die Symbole werde ich irgendwo hier drüben eine benutzerdefinierte graue Farbe graue Farbe verwenden, wo sie nicht zu fett oder zu stark ist . Mir gefällt der hier. Ich denke, es wäre nett, wenn Sie direkt neben diesen Symbolen einige Titel hinzufügen würden, damit sie wissen, was das bedeutet. Also schreibe ich einfach einen und mache Pull und dann mache ich vielleicht eine Fußzeilengröße oder sogar diese Körpergröße funktioniert Jetzt werde ich es in dieses automatische Layout aufnehmen und dann werde ich diese beiden automatisch zusammenfügen, sie näher bringen, vielleicht acht Pixel voneinander entfernt Ich werde das einfach für alle Symbole wiederholen . Also zögern Sie nicht, das auch zu tun. Kaffeemaschine, Frühstück. Automatisches Layout dieser zwei, acht Pixel, Stift, Seage. Hoppla Ich kann nicht buchstabieren. Da haben wir's. Acht Pixel. 247-Unterstützung. Acht Pixel, und dann schreiben wir Wi-Fi oder wir machen High-Speed. Wi Fi, bring das her. Ich lege diese zwei und acht Pixel an. Jetzt ist es ein bisschen zu lang. Ich möchte nicht, dass es so lang ist. Ich denke, wir können es kleiner machen und uns vielleicht ausrichten oder es hier an dieser Breite ausrichten. Also warum machen wir nicht einfach weiter und zeichnen hier die Breite und machen dann jetzt einen Wrap für dieses Kind, wir machen einen Wrap und wir füllen den Behälter. Aber das hier, wir wollen nicht wirklich Rap machen. Wir wollen, dass dieser vertikal ist. Da haben wir's. Das ist es, wonach wir suchen. Nun, der Abstand zwischen diesen kann etwas geringer sein, vielleicht 24 Pixel, 24 Pixel. Das könnte gut genug sein. Sie könnten hier sogar damit durchkommen, es mit 16 Pixeln zu machen. Nun, für den Text können wir eine etwas dunklere graue Farbe als die Symbole verwenden. Lass mich gleich rüber. Da haben wir's. Jetzt haben wir also einen Abschnitt, der einst enthalten war. Dies ist eine Möglichkeit, ihn zu präsentieren. Sie können es auch in zwei automatischen Layouts präsentieren. Das ist also eine Möglichkeit, es zu tun. Die andere Möglichkeit wäre, für jeweils drei ein automatisches Layout hinzuzufügen und dann hier ein horizontales zu erstellen. Und eine vertikale für jedes Kind, eins und es so haben. Das ist eine andere Art , wie du es machen kannst. Auf diese Weise werden, wenn Sie mehr Symbole haben, diese hier nebenbei hinzugefügt, und wir können hier einfach heiße Inhalte erstellen. Das ist vielleicht etwas übersichtlicher , um es so zu präsentieren. Und hier können wir etwas mehr Abstand hinzufügen. Also ich finde das sieht gut aus. Wir können im nächsten Abschnitt zurückkommen, um mit der Arbeit an unserem Bereich Unterkünfte zu beginnen , der der aufregendere Teil dieser Seite ist 50. Unterkunftsfelder: Der Abschnitt ist unsere Unterkunft, in der wir die verschiedenen Zimmer zeigen , die der Benutzer buchen kann. Zusammen mit dem Bild, der Zimmertyp, dem Preis pro Nacht und es werden hier drei Felder benötigt. In den Feldern stehen die Daten, also von und zwei, und dann die Anzahl der Reisenden. Also können wir wieder hierher gehen. Ich leihe mir einfach den Titel aus, den wir haben, und verwende ls, um ihn zu duplizieren Und eine andere Sache, die ich tun werde, ist ein automatisches Layout zwischen diesen beiden zu verwenden Da haben wir's. Da tausche ich das in eine Unterkunft um und bring es her. Und tatsächlich werde ich es mit Command X ausschneiden und einfügen . Da haben wir's. Jetzt wollen wir diese Felder haben, damit wir zu unseren Ressourcen gehen können , zu unseren lokalen Ressourcen. Und tatsächlich können wir das Eingabefeld, das wir haben, hierher ziehen . Lassen Sie uns für das Symbol das Kalenderfeld verwenden, da es ein Datumsfeld ist, und wir können es duplizieren. Ich halte die Umschalttaste gedrückt, wähle all diese drei aus, automatisches Layo und mache wähle all diese drei aus, automatisches Layo und Ich ändere dieses auf von und füge hier einfach ein paar Daten ein, um dieses zu ändern, und vielleicht können wir sie hier etwas kleiner machen Ich werde diese beiden auch automatisch zusammenlegen, sie näher zusammenbringen, sie näher zusammenbringen Und dann wollen wir noch ein Feld, und das ist die Anzahl der Reisenden. Im Moment haben wir kein Dropdown-Feld, aber das Dropdown-Feld wird normalerweise verwendet, damit Benutzer zwischen mehreren Optionen wählen können Es ähnelt einem Eingabefeld, aber es hat einen kleinen Pfeil an der Seite Benutzer verstehen können, dass es sich um ein Dropdown-Feld handelt Wir könnten dasselbe Eingabefeld tatsächlich auch als Dropdown-Feld verwenden . Sie müssen nicht unbedingt eine andere Komponente erstellen. Und ich mache das gerne, wir können einfach eine neue boolesche Eigenschaft hinzufügen, sie ist Dropdown Also werden wir es standardmäßig auf Falsch setzen . Und jetzt müssen wir einfach zum Phosphor-Symbol gehen und nach Let's try arrow suchen und sehen, was auftaucht Das ist der, nach dem wir suchen. Jetzt ist es hier drüben. Es ist eine Karotte. Es wird das Karottensymbol genannt. Wir können es einfach hier einfügen. Und ändere die Farbe vielleicht auf Primär 300. Ich drücke K und ändere die Größe auf vielleicht 16 Pixel. Ich denke, das ist besser Und dann glauben Sie, dass wir die Sichtbarkeit der Sache einschränken werden. Hier drüben, zwei, das ist Dropdown. Wenn wir jetzt hier drüben gehen, können wir tatsächlich ein weiteres Feld erstellen, es Reisende mit zwei S nennen. Und wir werden das Feld Zwei ist Dropdown ändern Und wir können das linke Symbol so verstecken. Und als Platzhalter geben wir nur einen Erwachsenen Wenn ich es mir jetzt ansehe, ist der Pfeil ein bisschen nicht sichtbar. Vielleicht können wir hier wieder reingehen und das Ebenenbedienfeld verwenden, einfach den einen auswählen, den Vektor auswählen und ihn vielleicht auf den Primärwert 500 setzen. Ein bisschen besser. Und ich drücke K. setze es wieder auf 24 Pixel und ändere es tatsächlich auf 20 Pixel. Mal sehen, ob das besser aussieht, es bestimmt ein bisschen besser . Fantastisch. Nun, ich möchte, dass dieses Feld hier den Container füllt, und wir wollen automatisch für den Abstand zwischen den Elementen wählen , weil ich hier einen gewissen Abstand zwischen der Unterkunft und diesen Feldern hinzufügen möchte . Also lassen wir diese Felder hier. Und hier können wir statt einer Ausrichtung nach oben entweder eine Ausrichtung in der Mitte oder eine Ausrichtung nach unten vornehmen, was meiner Meinung nach ein bisschen besser aussieht. Also hier haben wir nur die Zimmertypen. Für die Zimmertypen werden wir zum nächsten Abschnitt zurückkehren, um eine nette Kartenkomponente dafür zusammenzustellen 51. Zimmertypkarten: Unsere Zimmerkarten sind eigentlich nicht so weit von unseren Karten entfernt, die wir hier haben. Wir können tatsächlich einige Teile davon wiederverwenden, und alles, was wir tun müssen, ist den Namen hier in Zimmertyp und den Preis pro Nacht hier zu ändern Zimmertyp und den Preis pro Nacht , anstatt den Gesamtpreis, den wir hier haben. Wir haben also zwei Möglichkeiten. Jetzt können wir hier zur Instanz gehen und eine weitere Variante davon erstellen eine weitere Variante davon oder wir können tatsächlich eine andere Komponente erstellen. Ich möchte eine andere Komponente erstellen , nur um es ein bisschen einfacher zu machen, falls wir später Änderungen vornehmen müssen. Ich habe sie kopiert, und im Moment ist es eine Instanz, also wollen wir sie trennen, damit wir mit Command Alt K eine neue Komponente erstellen können , und wir werden diese eine Raumkarte nennen Fantastisch. Also ein paar Unterschiede. haben wir keine Favoriten oder diesen haben wir keine Favoriten oder kein Lesezeichen mehr Wir wollen nur das Zimmerbild hier und auf diesem steht Zimmertyp Und dieser Preis wird 100 Dollar pro Nacht betragen, sagen wir, nur für ein Beispiel. Und die brauchen wir nicht wirklich. Wir können eine Bewertung hinterlassen, sodass Sie die Bewertungen pro Zimmer sehen können. Aber ich denke, wir können das lassen und einfach das hier machen. Ich kopiere einen, füge ihn hier und halte dann die Umschalttaste gedrückt, wähle diese beiden aus und lege sie zusammen mit 24 Pixeln mit vielleicht 32 Pixeln Abstand automatisch an. Wir werden diesen duplizieren, ein weiteres automatisches Layout erstellen, und dieser wird ein Behälter mit Füllung sein , sodass, wenn Sie mehrere verschiedene Räume haben, der Zeilenumbruch Behälter mit Füllung sein , sodass , wenn Sie mehrere verschiedene Räume haben, bis zur nächsten Zeile erfolgt Fängt an, gut auszusehen. Nun, ich bin kein großer Fan davon, wie das hier tatsächlich aussieht, also können wir hier vielleicht ein vertikales Layout machen. Ich denke, das ist etwas besser. Und dann kann der Abstand zwischen diesen 16 Pixel betragen. Ich denke, das sieht etwas besser aus. Für diese Zimmertypen wähle ich hier einen aus und verwende Make Image. Ein Hotelzimmer mit einem Bett. Mal sehen, was es macht. Okay, die sind ziemlich nett. Ich werde dich bitten, Änderungen vorzunehmen und ein kleines Bett zu machen. Also können wir hier ein kleineres Bett haben. Okay, dieser ist besser. Lass uns ein Zweibettzimmer machen. Ändern Sie den Preis für dieses Zimmer auf vielleicht 80$ pro Nacht. Und dann könnte dieses Zimmer ein Zimmer mit Kingsize-Bett sein, genau genommen, dieses, lass uns ein Zimmer mit Queensize-Bett machen, und dieses wird ein Zimmer mit Kingsize-Bett sein Dieses wird es bei 100 Dollar pro Nacht belassen und bei diesem vielleicht bei 120. Ich werde die KI verwenden, um ein Bild für dieses zu machen. Hotelzimmer mit zwei Queensize-Betten für dieses. Das ist nett. Und wir machen das und machen ein Bild. Wenn Sie die KI-Funktionen nicht verwenden können oder keine KI-Funktionen verwenden möchten, können Sie diese Bilder auf Unsplash oder woanders nachschlagen auf Unsplash oder woanders Ich mache das nur, damit wir diese Funktion nutzen können und auch hier ein schönes Bild haben Und wir werden ein luxuriöses Hotelzimmer mit Knickbett buchen, nur damit wir für 120$ pro Nacht ein hübscheres haben für 120$ pro Nacht ein hübscheres Es sieht ein bisschen anders aus. Ich mag es, wenn die Ausrichtung der Wette so ist. Ich mag diesen. Cool. Nun, eine Sache, die wir zu diesen Karten hinzufügen können, ist vielleicht , dass wir zunächst die Bewertungen hier für jede Karte ändern. Und wir können die Anzahl der Bewertungen hinzufügen, die jedes Zimmer hat. Also dieser hat 123, und vielleicht ist dieser wirklich gut. Es ist also 4,9 und 125 Leute haben hier übernachtet und es bewertet. Da haben wir's. Die andere Sache, die wir hinzufügen können, ist die Anzahl der Personen, für die dieser Raum geeignet ist. Wenn Sie also zur lokalen Instanz gehen, können wir hier einen weiteren Text hinzufügen und ihn einfach hier hinzufügen. Und Write hat einen Schlafplatz , sagen wir mal, und wir wollen Inhalte machen. Mal sehen, wie das hier aussieht. Okay, das sieht viel besser aus. Schlaft für einen. Vielleicht bietet dieser Platz für zwei Personen und dieser Platz für drei Personen oder so. Fast hätte ich es vergessen. Für diese Karten wollen wir eigentlich auch einen Buchknopf. Nun, für diese Knöpfe möchte ich einen neuen Button, möchte ich einen neuen Button von dem unterscheidet , den wir hier entworfen haben. Weil ich es so haben möchte, dass es links ausgerichtet ist und dann auf der rechten Seite, können wir einen Text haben der den Gesamtpreis für diese Unterkunft anzeigt und wie hoch dieser sein wird. Also gehe ich zur lokalen Karteninstanz und werde hier tatsächlich eine neue Schaltfläche erstellen. Jetzt können wir natürlich auch eine andere Variante unserer Buttons erstellen eine andere Variante unserer Buttons . Das ist eine andere Art, es zu tun. Warum machen wir das nicht, indem wir das hier einfach erweitern, zwei Schaltflächenkomponenten herausziehen und sie hier ein wenig ausdehnen Und lassen Sie uns eine neue Eigenschaft für die Schaltfläche erstellen, und wir werden diese eine Variante nennen und die Eigenschaft standardmäßig breit aufrufen, wir setzen sie auf nein Das werden also unsere breiten Schaltflächen sein, also wählen wir sie aus und ändern den Wert auf Ja, und diese sind bereits nein. Wenn du hier einen Text hinzufügst, sagen wir 0$. Im Moment wird alles in die Mitte der Taste gedrückt, was wir nicht wollen. Wir wollen, dass alles bis an die Enden des Knopfes gedrückt wird. Deshalb müssen wir den Abstand hier von zehn auf Auto ändern. Und der Abstand an den Seiten ist auch ein bisschen zu groß, also können wir vielleicht 16 Pixel machen. Lass uns hier genau das Gleiche tun. Alles, was Sie hier tun müssen, ist, den Text hierher zu kopieren, ändern und ihn in Text 500 zu ändern. Da haben wir's. Ändern Sie den Abstand auf Auto und den Abstand auf 60. Okay, das sieht gut aus. Also, jetzt haben wir einen breiten Knopf, aber die Typen sind hier durcheinander. Wir wollen also sichergehen, dass der Typ für diesen auch immer noch primär ist und dieser auch immer noch zweitrangig ist Da haben wir's. Jetzt haben wir also eine primäre Taste, die nicht breit ist, eine sekundäre Taste, die nicht breit ist, eine primäre Taste, die breit ist, und eine sekundäre, die weiß ist. Also wollen wir hier eine der weißen Tasten auf unserer Karte verwenden. Also lass uns weitermachen und diesen hier ziehen oder kopieren, den primären hier rein. Ich werde diesen Komponentenbereich einfach etwas weiter nach oben ziehen . Sie können die Schaltfläche sehen. Und dann halte ich den ganzen Doppelklick hier an der Seite oder am Rand der Schaltfläche gedrückt, um sie in „Füllen“ umzuwandeln. Es ist dasselbe, als würde man hierher gehen und auf „Füllen“ klicken. Das ist nur eine Abkürzung dafür. Also zeigen wir die Schaltfläche hier, und der Text dieser Schaltfläche wird „ Zimmer buchen“ oder vielleicht „ Dieses Zimmer buchen“ lauten. Und dann der Gesamtpreis auf der rechten Seite. Nehmen wir an, wir haben bereits ein Datum anstelle von 0$ ausgewählt Dies könnte den Gesamtpreis anzeigen. Wenn sie also zwei Nächte haben, sagen wir, werden es 160 sein, also etwas in dieser Richtung. Und wir machen einfach unterschiedliche Preise für diese, 200 und diese 240. Jetzt haben wir also die Buttons für jedes Zimmer, um gebucht zu werden. Alternativ können Sie Ihren Button-Typ auf einen sekundären Button ändern . Ich denke, beide funktionieren hier wirklich gut. Da haben wir es also, jetzt haben wir eine Schaltfläche für jedes Zimmer, um gebucht zu werden. Das sieht gut aus. Fantastisch. haben wir unseren Bereich für Unterkünfte fertig und dann haben wir zwei weitere Abschnitte, einige ähnliche Ziele, was ziemlich schnell geht. Dann haben wir einige Bewertungskarten , die wir in der nächsten Vorlesung entwerfen werden. 52. Bewertungskarten: Vertikal auf unserer Destination Discovery-Seite geht der Platz aus. Also werde ich es vertikal etwas erweitern. Wir haben also genug Platz für unseren Bewertungsbereich und unseren ähnlichen Zielbereich. Also in unserem Bewertungsbereich haben wir hier in unseren Wireframes Bewertungen, die Gesamtzahl der Bewertungen und Sterne, und dann haben wir einige Bewertungskarten durch die der Nutzer blättern kann, und wir können hier horizontal scrollen und wir können hier horizontal scrollen oder auch Pfeile verwenden, um nach links und rechts zu gehen zu tun, gehen wir zurück hierher, kopieren den Text hierher und verwenden Alt, kopieren den Text hierher um ihn zu duplizieren Und ich werde es einfach hierher in den übergeordneten Container bringen, aber es mit dem Abwärtspfeil hierher bringen, und es sieht so aus, als hätte ich dort einen Tippfehler gehabt, also habe ich das gerade behoben Und das werden Bewertungen sein. Und wir wollen die Sterne und die Anzahl der Bewertungen haben. Also können wir uns das vielleicht einfach ausleihen und hierher bringen. Und wir wollen diese beiden automatisch zusammen auslegen. Versuche es mit 16 Pixeln. Und weil das für das gesamte Ziel gilt, können wir es vielleicht etwas größer machen, das Symbol zwei, 24 oder sogar 24 mal 24 schreiben. Und erhöhen Sie die Zahl einfach ein wenig. Sagen wir, 534. Und dann, gleich unten, werden wir einige Bewertungskarten haben, und auf diesen Bewertungskarten wollen wir ein Bild der Person haben, etwas Text, um ihre Bewertung zu zeigen, und vielleicht ihren Vornamen oder so Also werde ich hier einfach eine Karte entwerfen und hier einen Text hinzufügen. Das ist mein Testbericht. Natürlich werden wir das ändern, und vorerst werde ich das automatische Layout einstellen, indem ich Shift A drücke. Und wir können hier einfach eine weiße Füllung auftragen, den Eckenradius auf 16 ändern und dann auch ein Oval zeichnen, indem ich O auf meiner Tastatur drücke und ein Profilbild zeichnen vielleicht 48 Pixel mal 48, und das einfach hier hineinschneiden. Da haben wir's. Vielleicht könnten diese hier eine feste Breite haben 440. Jetzt werde ich hier mein Layoutraster für die Seite einschalten und es verwenden, um hier eine gute feste Breite zu finden. Da haben wir's. Also können wir drei Kreuze wie dieses haben und es wird gut aussehen. Wir sind noch nicht fertig, also werden wir weiter an nur einem arbeiten, unser Grid hier verstecken. Und wir wollen eine linke Linie und vielleicht 16 Pixel von oben nach unten machen. Dies wird also die Bewertung des Benutzers sein, und direkt darunter drücken wir Befehl D, um einen weiteren Text zu erstellen. A, um diese beiden Textebenen anzuordnen und einfach direkt untereinander zu machen. Vielleicht mit acht Pixeln und das wird der Name der Benutzerin sein, sagen wir, Maria. Aber für diesen Fall geben wir eine Fußzeilengröße an. Und wir können auch hier einen schönen Strich hinzufügen, indem mit der ersten 100 gehen Und natürlich können wir daraus eine Komponente machen, Lommand K drücken und sie einfach in eine Bewertungskarte umbenennen, und das nehmen wir hier oder im Abschnitt in unsere Komponentenbibliothek Kopieren Sie eine davon, fügen Sie sie hier ein, gruppieren Sie sie oder ordnen Sie sie automatisch zusammen. Und ich denke, was den Abstand angeht, können wir den Abstand hier auf 32 innen ändern, diese duplizieren, die drei Karten automatisch auslegen können wir den Abstand hier auf 32 innen ändern, diese duplizieren, die drei Karten automatisch auslegen und einen Behälter zum Umwickeln und Füllen erstellen. Und lassen Sie uns den Abstand zwischen ihnen auf 24 Pixel ändern . Das sieht gut aus. Ich wähle einfach Das ist meine Bewertung und verwende unser KI-Schreibtool, um Nutzern, die eine Reise nach London gemacht haben und sie genossen haben, eine Bewertung zu schreiben Nutzern, die . Mal sehen, was dabei herauskommt . Okay, da haben wir's. Jetzt haben wir hier ein Problem mit dem Text, der auf die Außenseite des Containers gelangt Lass uns hierher gehen und sehen, was passiert. Diese Kiste hier drüben umarmt den Inhalt, aber der Inhalt kann unendlich lang werden und er wird ihn weiterhin in derselben Richtung umarmen Anstatt das zu tun, wollen wir den Füllbehälter, und das können wir tun, indem wir ihn in Füllbehälter ändern Also egal was passiert, aber der Text hier ist immer noch so eingestellt, dass er den Inhalt umarmt Wir wollen also, dass auch der Text in einen Container gefüllt wird. Jetzt hat der Text also eine feste Breite, die der Breite des Containers entspricht, sodass er weiter in den nächsten Container übergeht Und weil es sich um eine Komponente handelt, reparieren wir sie an einer Stelle Wir müssen es hier nicht reparieren. Es ist sowieso schon behoben. Und eine andere Sache ist, wir möchten, dass das Profilbild vielleicht ganz oben und vielleicht auch der Name des Benutzers da sein könnte Ich denke, das wäre sinnvoller. Warum tauschen wir diese beiden nicht aus und verwenden dann eine Ausrichtung von oben links wie diese. Ich werde das einfach in das ändern. Mal sehen, ob das vielleicht ein bisschen besser aussieht. Aber was ich tun werde, ist, diesen Text von hier wegzunehmen und ihn automatisch mit dem Bild anzuordnen, damit wir ihn zentriert ausrichten können. Und dann machen wir das für den gesamten Container. Da haben wir's. Das sieht viel besser aus. Auf diese Weise können wir sogar einen Text auf der anderen Seite hinzufügen. Indem wir mit diesen beiden ein automatisches Layout durchführen und das horizontale Layout ausführen und den Behälter füllen und die Lücke auf Auto ändern. Und mache die Mittellinie und ändere das in einen Text für den Zeitstempel, es könnte also vier Wochen her sein Wir können also sogar einen Zeitstempel haben und die Füllung für diesen Text auf einen Text 300 setzen die Füllung für diesen Text auf einen Text 300 und dieser könnte ein Text 500 sein und genauso wie dieser hier, Text Viel besser. Jetzt können wir sie hier ein bisschen kürzen, sodass sie alle die gleiche Höhe haben. Da haben wir's. Das sieht langsam gut aus. Wir können hier einfach den Namen Max, Adam ändern und ihnen dann einfach ein paar Bilder geben ein Plugin namens Avatar verwenden, das ich wirklich mag. Und du kannst jeden von ihnen wählen. Es gibt viele. Wir wählen einfach diesen hier aus. Benutzerprofil Avatar. Ups. Du kannst jeden benutzen, der uns diesen Avatar-Generator hier machen Sie können einfach kontinuierlich auf Foto platzieren klicken, und das Foto einer zufälligen Person wird dort platziert. Ist gut für. Nun, einige davon haben ein Limit. Also habe ich bei diesem gerade das Limit erreicht. Sie können gerne zwischen verschiedenen Plugins wechseln , um zu sehen , welches am besten funktioniert. Da haben wir's. Das sieht schon viel besser aus. Und wenn ich es mir genauer überlege, halte ich es nicht für eine gute Idee, hier horizontal zu scrollen , weil das nicht wirklich typisch ist. Wir können also zwei Dinge tun, um das hier zu verbessern. Lassen Sie uns zunächst für diese beiden ein horizontales Layout wie dieses erstellen. Und warum fügen wir hier nicht eine sekundäre Schaltfläche hinzu? Drücken Sie hier einen Knopf. Hoppla. Wir wollen es reinlegen Da gehen wir gleich rein, und dann sollten wir sie vielleicht anordnen und hier weniger Abstand machen und es auf sekundär ändern , weil es kein wichtiger Button ist, wirklich, es ist ein sekundärer Button und dann alle Bewertungen anzeigen oder so. Der Benutzer kann auf Alle Bewertungen anzeigen klicken und zu einer anderen Seite wechseln , um alle anderen Bewertungen zu lesen. Das war's also mit den Bewertungskarten. Kommen wir in der nächsten Lektion zurück, um den letzten Teil dieser Seite, die ähnliche Zielseite, zusammenzustellen den letzten Teil dieser Seite, die ähnliche Zielseite, zusammenzustellen . 53. Zieldetailseite abschließen: Der letzte Abschnitt unserer Seite mit den Zieldetails ist ein ähnlicher Abschnitt. Also werden wir diesen Text hier noch einmal im übergeordneten Container duplizieren . Ähnliche Ziele. Sie können es auch andere beliebte Ziele nennen , die auch funktionieren. Sie müssen es nicht unbedingt so benennen, wie ich es benenne. Und dann schnappen wir uns einfach ein paar dieser Karten hier. Vielleicht diese drei hier, benutze Command C und füge sie dann hier ein. Im Moment sind sie vertikal angeordnet, weil sie sich in diesem übergeordneten Container befinden. Wir wollen also mit Shift A ein automatisches Layout zwischen ihnen erstellen und dann ein horizontales Layout erstellen. Da haben wir's. Das sind also einige andere beliebte Ziele, aber für den Abstand zwischen ihnen sollten Sie auch 32 angeben. Das sieht wirklich gut aus. Und ich denke, diese Seite ist so gut wie fertig. Lassen Sie uns eine Überprüfung von oben nach unten durchführen und einfach sicherstellen , dass alles gut aussieht und wir nichts ändern möchten. Nun, es gibt hier ein paar Dinge, die ich tun werde, um diese Seite zu verbessern. Der erste hier ist, ich denke, wir können den Titel hier fett formatieren. Sieht besser aus Für diese Schaltfläche hier sieht sie komisch aus, ohne Text , der diesem beliebten ähnelt. Warum fügen wir hier nicht einen Text für diesen hinzu. Wir speichern oder bookmarken. Ziel und offensichtlich nicht so groß. Wir werden Körper- oder sogar Fußleistenarbeit machen. Und wir werden das einfach herausschneiden und das hier reinbringen. Und ich lege diese zwei an und vielleicht acht Pixel ist ein guter Abstand zwischen ihnen. Und wir können dieses Ziel verschieben, Sie einfach ein Lesezeichen als Ziel Ändern Sie dies vielleicht auf einen primären 900 oder einen primären 800. Okay, das sieht ein bisschen besser aus, es ist also klarer, was es ist. Und der Abstand zwischen allem und hier ist generell ein bisschen zu groß, vielleicht würden 32 Pixel einen guten Job machen. Das sieht also gut aus. Verfügbarkeit. Wir nehmen sie direkt hier mit. Hier gibt es jedoch ein bisschen Leere, und Sie können zwei Optionen wählen. einen können Sie dies einfach im Layout dessen, was wir hier gemacht haben, so ändern dies einfach im Layout dessen, was wir hier gemacht haben , dass es horizontal ist. Das funktioniert also genauso gut. Also vielleicht mache ich das stattdessen, damit hier keine unangenehme Lücke entsteht Die Unterkunft sieht gut aus. Wir haben unsere von zwei Reisenden, also wählen sie diese aus. Das einzige, was uns vielleicht fehlt, ist nur eine Schaltfläche, mit der sie die Ergebnisse aktualisieren können. Wenn sie diese ändern, gibt es momentan keine Möglichkeit, die Ergebnisse zu aktualisieren. Also wollen wir das tun, das Alignment hierher bringen. Also ist es unten, und dann finde Zimmer. Da haben wir's. Da ist es ein bisschen besser. Das sieht gut aus, die Bewertungen sehen gut aus. Die Bewertungen aus welchem Grund auch immer, dieser Text ist ein bisschen zu groß, also werden wir stattdessen Text machen. Ich denke, Körpergröße ist einfach zu viel. Das sieht besser aus. Und damit können wir den Abstand anstelle von 16 Pixeln tatsächlich verbessern. Lassen Sie uns 24 Pixel von oben und unten machen. Okay, das sieht eigentlich gut aus und andere beliebte Ziele sehen wirklich gut aus. Die einzige andere Sache, die ich tun könnte, ist einfach den Abstand zwischen allem zu vergrößern , anstatt 48 Pixel. Vielleicht können wir so etwas wie 64 machen. Und ich denke, es gibt mehr Raum zum Atmen zwischen allem und auf diese Weise sieht alles viel ausgefeilter aus. Cool. Ich werde diese Seite nur ein bisschen kleiner machen. Da ist unsere Destination Discovery-Seite, oder eigentlich sollte sie Destination Detail heißen. Da haben wir's. Das ist unsere Detailseite. Kommen wir zurück zur Ausführung, um an unserer Buchungsseite zu arbeiten Das ist also die Seite, die folgt, wenn sie tatsächlich auf Dieses Zimmer buchen klicken Es wird auf diese Seite weitergeleitet, auf der sie ihre Informationen eingeben und ihre Buchung bestätigen. 54. Buchungsbildschirm: Zeit, hier an unserem Buchungsbildschirm zu arbeiten, und diese Seite ist ziemlich einfach. Im Grunde genommen klickt der Benutzer einem dieser Räume auf Buchen. Es wird zur Buchungsbestätigungsseite weitergeleitet, auf der sie einige Informationen eingeben, die Sie normalerweise auf einer Buchungsplattform sehen, z. B. ihren Vor - und Nachnamen. Und vielleicht können viele dieser Informationen sogar vorab ausgefüllt werden, wenn sie bereits angemeldet sind und ihr Informationsformular bereits zuvor hinzugefügt haben Da wir jedoch nicht über diese Seiten verfügen , auf denen diese Informationen gesammelt werden können, gehen wir davon aus, dass der Benutzer diese trotzdem ausfüllen muss, falls er für seine persönlichen Daten für diese Buchung eine andere E-Mail-Adresse oder Telefonnummer usw. verwenden möchte für seine persönlichen Daten für diese Buchung eine andere E-Mail-Adresse oder Telefonnummer seine persönlichen Daten Und dann haben wir hier einige Zahlungsinformationen und Felder zum Hinzufügen Vieles davon ist also feldbasiert. Und dann wollen wir hier ein paar Karten für einige Zusatzleistungen hinzufügen, und das könnten Dinge sein, wie zum Beispiel eine Autovermietung zu Ihrer Reise hinzuzufügen oder eine Versicherung hinzuzufügen oder verschiedene Dinge hinzuzufügen, usw. usw. Und dann eine Schaltfläche, um die Buchung abzuschließen. Und auf der rechten Seite wollen wir eine Karte mit dem Bild des Zimmers, wollen wir eine Karte das sie buchen, vielleicht zusammen mit der Stadt oder der Reise oder so etwas Ähnlichem. Also vielleicht der Name der Reise, zusammen mit dem Zimmer, das sie buchen. Sie buchen ein Zimmer mit den Daten hier und der Anzahl der Personen, die übernachten, dann dem Gesamtpreis. Nun, das könnte ein guter Ort sein , um auch unseren Buchungsbutton zu platzieren. Es muss hier also nicht unbedingt ganz unten sein, und wir könnten es tatsächlich an beiden Orten haben, und vielleicht können wir das reparieren. Wenn wir also tatsächlich den Prototyp bauen, können wir dieses Element auf dem Bildschirm reparieren. Also gut, lass uns hier drüben loslegen. Wir wollen von oben nach unten beginnen. Beginnen wir damit, dass wir hier unsere NavBr-Zurück-Schaltfläche und unseren Titel hinzufügen hier unsere NavBr-Zurück-Schaltfläche und unseren Titel Um es einfacher zu machen, dupliziere ich einfach die Zieldetailseite mit Befehl D. Gehen Sie einfach ein wenig hierher und benennen Sie unseren Bildschirm in Buchungsseite um Und ich werde den Inhalt vorerst komplett loswerden . Und anstatt zurück zu allen Zielen zu fahren, können wir zurück zur Reise gehen. Und direkt darunter können wir hier einen ähnlichen Text haben. Ich werde Alt benutzen, um das hierher zu ziehen , oder besser gesagt eine Kopie davon hierher. Stellen Sie sicher, dass der Abstand allem anderen übereinstimmt, und ändern Sie ihn, um Ihre Buchung oder Ihre Reise zu bestätigen , und stellen Sie einfach sicher, dass alles entsprechend angeordnet ist Da haben wir's. Schieb das hier her, 24 Pixel davon entfernt. Und dann gleich unten wollen wir einige Felder haben und wir wollen hier auch einen Titel für diesen Abschnitt haben. Ich denke, für den Titel können wir zuerst verwenden, lassen Sie uns diesen hier eingeben, und dann können wir hier eine kleinere Schrift verwenden, vielleicht das Alter vier, das Alter fünf. Ich denke, das Alter von fünf Jahren ist gut und wir werden es auf persönliche Daten umstellen . Wie jetzt können wir es hier einfach fett belassen. Und dann diese, ich möchte das Layout Shift A mit 48 Pixeln Und dann ziehen wir einige Eingaben von unseren Assets ziehen wir einige Eingaben von Lass es uns da runterbringen. Und diese möchte ich zusammen mit vielleicht 24 Pixeln automatisch layouten. Für dieses Feld brauchen wir nicht wirklich ein Symbol. Wir schreiben hier einfach Vorname, nur ein Beispiel für einen Vornamen, und dann schreiben wir Nachname. befinden sich diese Felder Normalerweise befinden sich diese Felder in der Regel direkt nebeneinander , sodass wir hier sogar ein automatisches Layout mit horizontalem Layout erstellen können , vielleicht mit einem Abstand von 16 Pixeln. Es sieht gut aus. Lassen Sie uns das wegen der Breite auf heiße Inhalte umstellen. Das sieht gut aus und wir benötigen ein E-Mail- und Telefonnummernfeld. Diese wollen wir hier im übergeordneten Frame platzieren . Ändern Sie diese in Telefonnummer plus eins, eins, zwei, drei, eins, zwei, drei, vier oder eins, zwei, drei, vier, so wie hier. Nur ein paar Beispieltexte. Und dann können wir eine E-Mail-Adresse oder einfach nur E-Mails bei Domain haben, so etwas in der Art. Vielleicht können wir diese beiden sogar nebeneinander haben. Das ist gut. Dann wollen wir ein paar Zahlungsinformationen. Also für diesen, also werde ich diesen Abschnitt duplizieren und ihn in Zahlungsdetails ändern , so etwas in der Art. Ändern Sie das in Kreditkartennummer, vorausgesetzt, wir haben hier nur Kreditkarte als Option, und dann machen wir Kreditkarte und wir benötigen das Ablaufdatum. Also geben wir das nicht als Verfallsdatum an, sondern schreiben so etwas wie das hier. Wir können es inhaltlich oder vielleicht etwas größer machen , 20 Pixel groß machen, es duplizieren und es automatisch direkt daneben anordnen. Und dieser wird CVV sein, das ist ein Code, der auf der Rückseite steht oder so Und ich glaube, wir haben normalerweise auch einen Namen auf der Karte. Also vielleicht wollen wir eine Kreditkarte benutzen. Älter als für die Nummer, wir können hier einfach eine Zahl wie diese eingeben. Sie möchten, dass Ihr Platzhaltertext dem ähnelt, was sie eingeben sollten, damit sie eine Vorstellung davon haben , was sie erwartet Und manchmal sehen Sie die Postleitzahl oder die Postleitzahl, je nachdem, wo Sie sich befinden Wir können also die Postleitzahl angeben und diese auch hier belassen Das könnte für einige Kreditkarten notwendig sein, und wir werden sie einfach erweitern, aber sie werden nicht erweitert, also wollen wir sie auswählen und den Container füllen Wir haben also Zahlungsinformationen. Und dann denke ich, dass sie aus irgendeinem Grund zu groß sind. Wahrscheinlich hat eine Person keinen so langen Namen, also können wir ihn einfach ein bisschen kleiner machen, insgesamt 480, und dafür auch diese 480 Füllbehälter bauen. Und ich werde genau das Gleiche für diese tun. Das Gleiche hier. Und ich benutze einfach Alt und doppelklicke, damit sie alle den Container füllen. Ein großer Teil dieser Seite ist also schon startklar Lassen Sie uns wieder an unseren Add-Ons arbeiten und dann werden wir an der Seitenkarte hier drüben arbeiten. 55. Add-on-Kartendesign: Für diesen nächsten Abschnitt haben wir einen zusätzlichen Bereich mit einigen Karten mit Dingen, die Leute zu ihrer Reise hinzufügen können. Also werde ich hier einen Titel dafür kopieren und ihn „ Add On Perfect for Your Trip“ nennen , oder so ähnlich. Und dann schauen wir mal, ob wir der Karten, die wir haben, wiederverwenden können. Die Sammelkarte ist dem, was wir hinzufügen möchten, sehr ähnlich. Aber auch hier ist es nicht ganz das, was wir wollen. Vielleicht können wir also eine weitere Karte speziell für Add-Ons erstellen, aber ein ähnliches Design wie die Sammelkarte verwenden. Ich werde das mit Alt duplizieren , den Moment trennen und dann mit dem Befehl Alt K eine neue Komponente erstellen und diese in „Karte hinzufügen“ umbenennen Dieser wird also der Name des Add-Ons sein. Wir haben schon ein Bild. Das ist großartig. Wir wollen eine Schaltfläche, um dieses Addon hinzuzufügen, also kopieren wir diese Schaltfläche vielleicht hierher. Das erhöht deine Reise und dann vielleicht den Preis des Artikels. Also belassen wir es vorerst bei 0$. Ich finde das gut. Bringen wir es her. Also, die einzige Sache ist, mir gefällt nicht wirklich, dass dieser Button hier zu primär ist. Wir wollen nicht, dass dies eine primäre Aktion ist oder Verwirrung darüber verursacht, welche Tasten gedrückt werden sollen , also ändere ich das hier einfach auf sekundär. Wir werden also drei davon haben. Seite für Seite. Und diese, wir wollen nicht, dass sie so groß sind, also machen wir sie einfach mit fester Breite. Diese Karten sind ein bisschen zu groß. Warum machen wir dieses Bild also nicht ein bisschen kleiner? Halten Sie die Umschalttaste gedrückt und zusammen und machen Sie das Bild vielleicht 270 oder so. Und für den zusätzlichen Namen machen wir einfach einen Körper, beide, umarmen den Inhalt hier. Und das Gleiche hier. Wir werden einfach Inhalte umarmen Wir wollen nicht, dass es hier zu auffällig oder zu groß ist. Und dann lassen Sie uns diese durch echte Add-Ons ersetzen. Wir schreiben einfach Mietwagen und für diesen Artikel schreiben wir lustige Aktivitäten. Und zögern Sie nicht, zu schreiben, was Sie möchten. Vollversicherung oder wir schließen eine Reiseversicherung ab. Und dann werde ich für die Bilder tatsächlich Unsplash verwenden und für dieses Bild keine KI Und lass uns einfach ein Auto mieten. Ich weiß nicht, was passieren wird. Lass uns sehen. Okay, wir werden nur einige verwenden, wir werden nur eines davon verwenden. Klar, lass uns mit diesem gehen. Lustige Aktivitäten. Lass uns das einfach machen. Was ist eine lustige Aktivität, die du in London machst? Das London Eye, ich bin mir nicht sicher. Ich war noch nie dort, also machen wir einfach weiter und fügen hier das London Eye von einem dieser Bilder ein. Und dann sieht das tatsächlich ein bisschen deprimierend aus. Das machen wir Und dann Versicherung, vielleicht schreiben wir einfach eine Versicherung und schauen, was dabei herauskommt. Ich werde hier einfach ein schönes Bild auswählen. Sie müssen dieses nicht unbedingt verwenden. Es ist nur ein netter, den ich vorerst gefunden habe. Also haben wir jetzt diese Add-Ons, die gut aussehen. Sie können sie zu Ihrer Reise hinzufügen. Sehr cool. Und wenn das aus dem Weg ist, können wir in der nächsten Vorlesung wiederkommen und diese Karte hier zur Seite legen. Vorher werde ich hier eine vollständige Buchung vornehmen. Fügen Sie einfach die Schaltfläche hier hinzu und machen Sie es Max 480 und bestätigen Sie einfach die Buchung, und das ist der Gesamtbetrag der Reise oder so Gib hier einfach eine Zufallszahl ein, 2240 wie diese. Es wäre schön, wenn wir auch die Währung hätten , falls Sie in einer anderen Währung bezahlen Jetzt wollen wir die Karte zur Seite haben. Lass uns zum nächsten Abschnitt zurückkehren und das gemeinsam machen. 56. Bestätigungsseite: Aber nicht zuletzt auf dieser Seite möchten wir eine kleine Infokarte an der Seite haben, möchten wir eine kleine Infokarte an der Seite haben die vielleicht das Zimmer, vielleicht die Stadt, in der Sie buchen, zeigt , all die kleinen Details, die Sie wissen möchten bevor Sie Ihre Buchung bestätigen. Wenn Sie sich auf einer anderen Seite wie Airbnb oder Expedia oder wo auch immer Sie Ihre Reisen buchen, haben Sie eine ähnliche Sache der Sie alle Informationen sehen, bevor Sie die Okay-Taste drücken , weil Sie einen großen Kauf tätigen . Sie möchten sicherstellen, dass der Benutzer die Gewissheit hat, dass die richtigen Daten und die richtige Anzahl von Reisenden ausgewählt hat, und der Preis ist sichtbar und nicht versteckt und so weiter. Das ist also wirklich wichtig, um ein großartiges Benutzererlebnis zu schaffen. Also werde ich diese Karte einfach von oben nach unten erstellen . Wir wollen eine Karte verwenden, die nur wirklich sichtbar ist, also muss ich sie nicht unbedingt zu einer Komponente machen. Tatsächlich leihe ich mir einfach eine davon, vielleicht die Zimmerkarte, und gehe einfach davon ab, aber trenne die Instanz und mache hier eine komplett neue Manchmal willst du eins loswerden. Sie müssen nicht unbedingt eine Komponente erstellen, wie in diesem Fall. Das ist hier also der Fall, wir stellen nur sicher, dass der Abstand zur Seite derselbe ist. Nehmen wir dann an, der Benutzer hat das Zimmer mit Queensize-Bett ausgewählt. Also verwende ich Alt Command C, um die Eigenschaften dieses Rechtecks hierher zu kopieren, das gerade dieses Bild ist. Und dann halte ich dieses mit Command, um es auszuwählen, und mache dann Command Alt V. Und das füge einfach die Eigenschaften ein, was in diesem Fall nur das Bild hier ist. Also haben wir schnell das Bild da drüben. Und was dann schön wäre, wäre auch ein Bild von der Stadt , die sie buchen. Also vielleicht können wir uns dieses Bild auch hier ausleihen. Ich verwende auch Out Command C. Ich werde Command C verwenden, um den Frame hier rein zu kopieren Aber was ich denke, ist ein netter, cooler Kreis oder sowas obendrein, um einfach zu zeigen, dass sie in London buchen oder so. Also, was ich für diesen Rahmen machen möchte, ist, dass ich zuerst den Rahmen setzen, ihn viel kleiner machen und ihn auch zu einem Rechteck oder, Entschuldigung, einem Quadrat machen möchte. Das heißt vielleicht, lass uns 64 mal 64 machen. Sie können den Befehl und die Pfeile verwenden, um die Größe Ihrer Dinge auch jeweils nur um ein Pixel zu ändern Sie können also genaue Größen wie diese erstellen. Und dann können wir es vielleicht vollständig umkreisen lassen , indem wir den Eckenradius hier einfach auf einen sehr hohen Wert einstellen . Und für diesen Strich wollen wir ihn stattdessen auf die Außenseite legen und ihn vielleicht um drei Pixel und etwas dunkler machen , etwa zweitrangig 800 oder so. Und jetzt möchte ich das über diesem Bild platzieren, aber ich möchte nicht, dass es Teil des automatischen Layouts ist. Ich möchte nur, dass dieser Kreis hier einen bestimmten Platz hat, ohne diesem automatischen Layout zu folgen. Ich kann das auf zwei Arten tun. Ich kann diese beiden entweder gruppieren, sodass ich diese beiden halten und nur die Gruppenauswahl oder sogar die Rahmenauswahl durchführen kann diese beiden halten und nur die Gruppenauswahl . Und da es sich nicht um ein automatisches Layout handelt, kann ich es innerhalb dieses Rahmens platzieren, wie ich will. andere Möglichkeit, die Sie auch tun können , ohne das tun zu müssen, besteht darin, Eine andere Möglichkeit, die Sie auch tun können, ohne das tun zu müssen, besteht darin, dass Sie diese Option wählen können um das automatische Layout zu ignorieren. Also können wir das automatische Layout hier ignorieren und es dann hier platzieren. Aber das Einzige, was passieren wird, ist, wie Sie sehen können, dass wie Sie sehen können, Sie dann möglicherweise die Größe oder den Rahmen einiger Dinge ändern müssen damit die Abstände funktionieren, oder sogar die Abstände hier ändern müssen und Also werde ich mich für die erste Methode entscheiden , nur um die Dinge ein bisschen einfacher zu machen Jemand, der diese Auswahl zusammenfasst oder sie sogar ganz nach Ihren Wünschen gruppiert. Orte hier, mach es vielleicht ein bisschen größer. Klar, 78 mal 78 sieht gut aus. Es gibt also hier ein Bild von der Reise oder der Stadt , in der sie buchen , und dann schreiben wir einen Titel, der die Stadt hier beinhaltet. Also leihe ich mir einfach die Stadt aus, so etwas in der Art. Vielleicht verschiebe ich das nach unten. Ups, schieb das ein bisschen runter, hab die Stadt hier. Ich werde das auch schneiden, das hier in diesen Rahmen bringen Ich werde nur die Verschiebung der Pfeile hier benutzen , um das zu verschieben. Bring das ein bisschen nach hinten. Okay, das ist ein interessantes Design. Vielleicht verschiebe ich das hier ein bisschen zur Seite und das Gleiche hier. Also haben wir die Stadt. Vielleicht sieht die Stadt auf dieser Seite sogar besser aus. Und ich werde einen leichteren Text schreiben, wie Text 300. Wir haben den Zimmertyp, also schreiben wir einfach Kingsize-Zimmer. Oder es ist kein Zimmer mit Kingsize-Bett. Es ist ein Doppelzimmer mit Queensize-Betten. Schreiben Sie für 200$ pro Nacht, und dann machen wir mal fünf Nächte oder so Und dann brauchen wir die Bewertungen hier nicht wirklich , weil sie das schon von früher wissen sollten Was haben wir sonst noch, das nützlich sein könnte? Die Daten? Ja, für die Daten können wir uns einfach den Text in diesen Feldern und das Symbol ausleihen den Text in diesen Feldern und das Symbol Und hier verwenden Sie ein automatisches Layout , das horizontal ist und den Inhalt für beide Seiten zusammenfasst Dieser hier, der Text ist ein bisschen zu lang. Also lass uns HG-Inhalte machen. Machen Sie einen weiteren Text. Mach automatisches Layout und mache horizontal und vielleicht einfach Auto hier und fülle den Container. Sie haben also einen Abstand wie diesen, und dann duplizieren wir das und machen genau dasselbe horizontal, füllen den Container, automatisch und schreiben diesen dann als zwei. Dieser sollte Inhalt sein. Und der Abstand zwischen diesen beiden ist ein bisschen zu groß, also ordne ich sie einfach automatisch zusammen an und mache vielleicht acht Pixel daraus . Jetzt möchte ich, dass die beiden tatsächlich hier drüben sind. Was ich also tun kann, ist die Breite der Breite hier anzupassen, die 122 ist, und dann werde ich auf diese Weise das gleiche Ergebnis erzielen. Da haben wir's. Und das hier für zwei Personen ist ein bisschen zufällig, also stellen wir es einfach hier hin und machen es schon auf heißen Inhalt. Wir können diesen automatischen Layoutrahmen einfach entfernen , indem wir es einfach in der Gruppe machen. Wir bekamen also ein Deluxe-Zimmer mit Queensize-Bett 100$ pro Nacht mal fünf Nächte, für zwei Personen von diesem Datum bis heute. Und der Abstand zwischen diesen ist ein bisschen zu groß, also machen wir acht Pixel. Und wir werden für beide einen Behälter füllen, und hier ist es eigentlich dasselbe, den Behälter füllen. Das funktioniert auch. In Ordnung. Und dann sind diese Texte zu dunkel, weil sie nur Platzhalter sein sollen , also machen wir Text 500 Das von und zwei muss eigentlich nicht so dunkel sein, also machen wir Text 300 Und lassen Sie uns dem Ganzen tatsächlich eine weiße Füllung mit etwas Abstand geben , vielleicht 16 Pixel von allen Seiten. Und dann machen wir hier den Eckradius. Vielleicht 30. Lass uns 32 Looks versuchen. Das ist vielleicht zu viel, also vielleicht 24. Das sieht gut aus. Und jetzt stelle ich nur sicher , dass es gut ausgerichtet ist. Also bekommen wir diese benutzerdefinierte Karte, die gut aussieht. Ich denke, es hat so ziemlich alles zu diesem Gesamtpreis. Wir können es einfach in diesem Button hier haben. leihen uns diesen Button einfach von hier aus, damit wir ihn einfach hier drin platzieren können Was wir machen wollen, hat den Container gefüllt und diesen gelöscht. Und der Button ist ein bisschen zu nah an allem anderen. Warum drücken wir also nicht die Eingabetaste? Also wählen wir alles innerhalb dieses automatischen Layouts aus und halten Umschalttaste gedrückt, um die Auswahl der Schaltflächen aufzuheben , und drücken dann Shift A. Es gibt also ein Layout für den gesamten Inhalt Auf diese Weise können wir also etwas mehr Abstand zwischen der Schaltfläche und dem Rest des Inhalts hinzufügen Abstand zwischen der Schaltfläche und dem Rest des Inhalts Ich denke, wir haben alles hier. Das sieht langsam richtig gut aus. Und es gibt dem Benutzer wirklich eine gute Vorstellung davon, was hier vor sich geht. Eine weitere Sache, die ich Ihnen empfehle , ist, die Schlafplätze auf die gleiche Linie zu legen wie diese 100$ pro Nacht. Also werden wir dort Inhalte umarmen und das einfach einfügen und ein horizontales Layout erstellen Und dann machen wir vielleicht am Anfang dieses Textes eine Alt-Acht Es entsteht also wie ein Kreis und fügt einen gewissen Abstand hinzu, einfach so. Wir brauchen diesen zusätzlichen Abstand nicht, das ist genug. Und offensichtlich macht der Preis hier keinen Sinn, denn 100$ pro Nacht mal fünf Nächte sollten ungefähr 500 USD sein. Also lasst uns das einfach aktualisieren, damit es auch in den Designs Sinn macht. Das sind also etwa 500 USD. Das sind auch 500 USD. Wenn Sie nun andere Servicegebühren und ähnliches haben, können Sie diese jederzeit unten auflisten. Also können wir hier immer den Preis aufschlüsseln und zeigen, das der Preis dafür ist, und dann gibt es eine Servicegebühr und dann gibt es eine Steuer und all das, und dann kommt es auf diesen Betrag an. Aber für dieses Projekt werden wir es einfach einfach halten und es einfach so lassen. Diese Schaltfläche hier mit diesem Eckenradius sieht etwas seltsam aus. Also können wir diesen Knopf etwas mehr abrunden oder einfach einen vollständig abgerundeten Knopf für diesen verwenden. Und ich habe gerade eine benutzerdefinierte Änderung an dieser vorgenommen . Das kannst du machen. Es wird es auf keine andere Taste anwenden. Das ist nur für diesen speziellen Button. Das sieht jetzt also gut aus. Jetzt haben wir diese Seite erstellt. Wir sind mit der Buchungsseite fertig. Das sieht toll aus. Die einzige andere Sache ist, nehmen wir , der Benutzer bestätigt die Buchung. In der Regel möchten Sie danach eine Art Bestätigungsseite oder eine Bestätigung der bestätigten Reise anzeigen danach eine Art Bestätigungsseite . Also überlasse ich es dir als Projekt, das du selbst machen kannst, als eine Art Hausaufgabe zum Üben. Nehmen Sie sich dafür ruhig etwas Zeit . Ich werde es auch tun. Und dann, am Ende des Kurses, haben Sie natürlich Zugriff auf den Link für MfLE, sodass Sie jederzeit vergleichen und gegenüberstellen und von dort aus weitermachen können vergleichen und gegenüberstellen und von dort aus weitermachen Damit sind so ziemlich alle Seiten zusammengefasst , die wir hier zusammen für unser Wir haben hier einen kompletten Benutzerablauf, von der Registrierung über die Überprüfung Ihrer Anmeldung, das Durchsuchen von Reisezielen, Auswahl eines Reiseziels all der kleinen Details und zur Anzeige all der kleinen Details und einiger Zimmer, die Sie buchen können, einigen Bewertungskarten und so weiter Und dann haben wir auch eine Bestätigungsseite , um die Reise zu bestätigen Und natürlich gibt es noch viel mehr zu einer solchen Anwendung , die Sie hinzufügen und gestalten können, wie z. B. ein Profil-Dropdown-Menü usw., und wir werden einige davon gemeinsam untersuchen , während wir das Prototyping durchführen Aber der nächste Schritt für uns besteht darin , herauszufinden, wie wir dieses Design auch in eine mobilfreundliche Version umwandeln können in eine mobilfreundliche Version umwandeln , die Sie auf einem mobilen Gerät verwenden können Und um das zu erreichen, werden wir lernen , Dinge wie Breakpoints zu verwenden , um ein anderes Design für Mobilgeräte zu haben, aber auch dieselben Designs wie bisher zu verwenden und es einfach für ein mobiles Design zu optimieren Kehren wir also zum nächsten Abschnitt des Kurses zurück , um über die Umstellung unserer Designs auf Mobilgeräte zu sprechen über die Umstellung unserer Designs auf Mobilgeräte 57. Responsive Design mit Variablen: Wir sind hier mit unseren Webseiten fertig und wollen sie mobil machen. Es gibt mehrere Möglichkeiten, das zu tun. Natürlich können wir jede Seite einzeln betrachten und uns dann ansehen, jede Seite einzeln betrachten und uns dann ansehen welche Inhalte wir haben, und versuchen, sie so zu formatieren, dass sie auf Mobilgeräten benutzerfreundlich sind. Für den Bildschirm würden wir zum Beispiel F auf unserer Tastatur drücken und hier einen Telefonrahmen starten, sagen wir, das iPhone 16, und Sie können hier wirklich jede Größe für die Telefongröße angeben. Und dann müsstest du jedes Element innerhalb deines Rahmens kopieren und dann eins nach dem anderen neu anordnen. Das ist also eine Möglichkeit, und das werden wir auch untersuchen. Aber ich möchte damit beginnen, wie Sie Variablen tatsächlich verwenden können , um das Responsive Design zu vereinfachen. Selbst bei Variablen gibt es also einige Elemente , die Sie auf Mobilgeräte umstellen müssten . Wir haben also diese Navbar hier oben, und auf dem Handy wird das höchstwahrscheinlich ein bisschen anders aussehen Vielleicht würden wir anstelle dieses Benutzers, wissen Sie, den vollständigen Namen hier einfach das Symbol des Benutzers oder das Profilbild des Benutzers haben , gefolgt von diesem Glockensymbol Es könnte also etwas anders aussehen. müssen wir uns also verschiedene Komponenten einfallen lassen , die auf dem Handy oder dem Internet basieren In diesem Vortrag müssen wir uns also verschiedene Komponenten einfallen lassen, die auf dem Handy oder dem Internet basieren. Ich werde Ihnen zeigen, wie Sie Variablen und Variablenmodi verwenden können , um unterschiedliche Größen für Ihre Seiten zu erstellen. Hier haben wir also eine Seitenbreite für das Webprojekt. Für mich sind es hier 14 40 Pixel. Es könnte für Sie etwas anders sein, wenn Sie mit einer anderen Bildgröße beginnen würden, aber es ist ungefähr diese Größe. Und dann haben wir ein mobiles. Wenn ich also F auf meiner Tastatur drücke und sagen wir iPhone 16 Pmax mache, haben wir hier diese Handygröße , die stattdessen 440 Pixel beträgt Und natürlich gibt es verschiedene Pixelgrößen, die Sie einstellen können, aber ich werde mich vorerst für diese beiden entscheiden Ich werde mich für 144440 für die Handygröße entscheiden. Wenn Sie also das Variablen-Panel hier öffnen, können wir tatsächlich eine neue Sammlung erstellen Lassen Sie uns also eine neue Sammlung oder sogar diese Sammlung erstellen , eine , die ich habe, wird gerade nicht verwendet, also kann ich sie einfach umbenennen und sie Geräte nennen. Hoppla. Wenn Sie wie ich einen Tippfehler haben, können Sie ihn einfach umbenennen, korrigieren und dann erstellen wir eine Variable mit Zahl als Wert oder Typ, und wir ändern sie auf Gerätegröße, und hier haben wir eine Webversion 14 40 Pixeln, und dann werde ich eine weitere erstellen Und wir werden das unseren Seitenrand nennen, oder du kannst es auch einfach Rand nennen. Und das wird der Abstand an den Seiten sein. Im Moment habe ich es also auf 48 Pixeln, also werde ich es bei 48 haben. Und jetzt, wenn Sie hier drüben sehen, haben wir hier eine Zahl für die Breite , die schon eine feste Zahl ist. Aber wenn Sie hier tatsächlich eine Variable anwenden, also wenn Sie die Variable für die Gerätegröße anwenden, ist sie jetzt an diese variable Gerätegröße gebunden, und ich kann sie von hier aus jederzeit ändern. Und dann hier drüben, was unseren Inhalt angeht, wollen wir wirklich weitermachen und sicherstellen, dass alles in einem automatischen Layout ist. Also werde ich diese beiden in einem automatischen Layoutrahmen zusammenfassen und auch diese beiden zusammen. Also werde ich diese beiden automatisch zusammen layouten und dann auch diesen hier. Wir haben hier also einen Inhaltsbereich, und anstatt die Ränder hier bei Null oder die Abstände horizontal bei Null zu haben, werde ich den Seitenrand anwenden Und jetzt haben wir hier eine zusätzliche Polsterung. Aber aus diesem Grund können wir tatsächlich weitermachen und erweitern, um den gesamten Inhalt zu übernehmen Also können wir das tun oder einfach die Breite auf eine PRI-Variable setzen und die Gerätegröße angeben Diese sind jetzt also an Variablen gebunden. Aber sehen Sie, nichts passiert wirklich, wenn ich das minimiere und wir haben nicht wirklich den Zweck, diese Variablen jetzt zu setzen. Aber wenn du weitermachst und einen anderen Modus einrichtest, indem du auf den neuen Variablenmodus und dann dieses eine Handy anrufst, können wir die Nummern hier tatsächlich ändern. Für Mobilgeräte werden wir also eine Gerätegröße von 440 haben und den Seitenrand werden wir stattdessen auf 24 einstellen . Wenn Sie jetzt hier klicken und dann unter Darstellung Schaltfläche „ Geteilt“ klicken und den Variablenmodus anwenden, können wir das Gerät ändern Wenn wir also mobil sind, ist das Gerät jetzt auf mobil eingestellt Dieser Bereich wurde auf die Handygröße 440 eingestellt , die Polsterung wurde geändert Aber natürlich haben wir immer noch ein Problem, bei dem die Dinge nicht so arrangiert wurden, wie wir es wollten oder erwartet hatten Im Idealfall wollen wir, dass die Dinge richtig verteilt werden SEC ist nicht perfekt. Einiges von dem Zeug passt nicht, und wir müssen einige Änderungen vornehmen, damit es funktioniert. Als Beispiel haben wir hier die Add-Ons für deine Reise, und statt einer festen Breite es momentan heiße Inhalte. Was wir also tun wollen, wir wollen das Ganze umwickeln und eine maximale Breite festlegen. Egal was passiert, die maximale Breite entspricht Breite der Gerätegröße, die hier 440 ist. Und tatsächlich können Sie statt 440 hier eine weitere Variable einrichten, die als Inhaltsgröße bezeichnet wird, und diese Ränder bereits entfernen. Das wird also die Inhaltsgröße für diese Boxen hier sein. Kommen wir also zurück zum nächsten Abschnitt, um das für diese Seite zusammenzustellen 58. Maximale Breiteigenschaft: Richten Sie die Variablen ein und wir wenden den Modus so an, dass wir unsere Gerätegröße tatsächlich auf Web und Handy ändern können . Und einiges von dem Zeug sieht schon besser aus. Wir müssen jedoch eine maximale Breite für unseren Inhaltsbereich festlegen , damit der Inhalt nicht nach draußen gelangt Schauen wir uns also an, was gerade mit unserer Seite passiert Wenn wir jetzt zurück zum Web wechseln , haben wir hier ein automatisches Layout , bei dem sich der Inhalt unabhängig von der Größe nicht wirklich ändert oder anpasst, und das ist nicht das, was wir wollen. Wenn Sie es stattdessen auf einen Wrap setzen, wenn der Inhalt verkleinert wird, wird zumindest das hier drüben runter, anstatt auf der rechten Seite zu bleiben, sodass wir es auf dem Handy präsentieren können Nun, vielleicht möchten Sie es nicht so machen. Vielleicht möchten Sie dies tatsächlich zusätzlich zur Bestätigung Ihrer Reise anzeigen . Und natürlich, wenn du es stattdessen oben zeigen möchtest, was nicht so viel Sinn macht, aber du kannst das tun, indem du hierher gehst und die erste Person oben hast. Damit ist das Problem jetzt behoben. Unsere Felder hier sind ein Problem, da sie derzeit auf 480 festgelegt sind. Also werde ich diese beiden zusammen auslegen und dann werden wir eine maximale Breite festlegen. Aber bevor wir das tun, werden wir hier eine neue Eigenschaft für unsere Variablen festlegen , und diese wird ebenfalls eine Zahl sein, und wir werden diesen Inhalt nennen. Breite, was im Internet 14 40 -48 mal zwei sein wird Das ist also der maximale Inhaltsbereich, den wir haben können. Das werden also 13 44 sein. Und auf dem Handy wird es 392 sein. Und wir werden es so machen, dass das hier drüben eine maximale Breite hat. Und wir werden eine Variable auf die maximale Breite der Inhaltsbreite anwenden . Im Moment sind es also standardmäßig 480 Pixel, aber die maximale Breite, die das haben wird , ist im Webcase 13 44. Aber wenn wir das auf Mobilgeräte umstellen, sehen Sie, sind es jetzt nur noch 392. Aber das einzige andere Problem ist, dass innerhalb dieser automatischen Layouts wir innerhalb dieser automatischen Layouts auch dafür sorgen müssen, dass der Inhalt darin die richtige Breite hat. Gehen wir also rein und sehen, was passiert. Dieser ist ebenfalls auf 480 gesetzt, aber jetzt wollen wir den Container für diesen und auch für diesen füllen für diesen und auch für diesen weil jetzt der übergeordnete Auto-Layout-Frame hier die Breiten verarbeitet. Schauen wir uns jetzt an, was passiert wenn wir es auf Handy umstellen Okay, einige Felder sehen viel besser aus. Und das hier, weil es zwei zusammen gibt, wollen wir einen Behälter füllen und dann reingehen und einen Füllbehälter auf beide auftragen , sodass es auf dem Handy so aussieht. Wenn wir jetzt das Web einschalten, sieht es so aus. Wenn wir das jetzt auf Handy setzen, sehen die Felder gut aus. Wenn wir es auf Web setzen, sieht es auch gut aus. Aber wir haben ein kleines Problem, und das ist die Tatsache, dass, wenn wir zwischen den beiden wechseln, das Feld hier, die Breite, die wir bereits haben, auf Handy umgestellt wird. Normalerweise wollen wir diese Seite duplizieren und dann eine mobile Version davon haben. Also werden wir diese einfach auf Mobilgeräte umstellen. Und ganz schnell haben wir eine mobile Version und wir können diese einfach erweitern. Da haben wir's. Und hier gibt es nur ein paar andere Probleme. Das hier sollte also auch eine Mischbreite haben variable Inhaltsbreite anwenden. Und dann hier für diese Schaltfläche, sie sollte sich auf dem Füllbehälter befinden. Und dieser hier sollte auch eine maximale Breite von Inhalt und Breite haben , du hast es erraten Und das sieht langsam richtig gut aus. Und wie Sie sehen, waren wir in der Lage, sehr schnell zwischen Mobilgerät und Web zu wechseln . So können Sie Variablen verwenden, um während Ihres gesamten Projekts ein responsives Design zu haben . Ich überlasse es Ihnen als Übung, zu entscheiden, ob Sie weiterhin Variablen für Ihre responsiven mobilen Designs verwenden möchten . Und im nächsten Abschnitt werden wir gemeinsam einen anderen Weg gehen, wie man das manuell macht, was auch ohne Variablen funktioniert, was ich auch oft mache Aber bevor wir das tun, müssen wir diese Navigationsleiste oben reparieren diese Navigationsleiste , sodass wir eine mobile Version haben Kehren wir also zum nächsten Abschnitt zurück, um zu erfahren, wie man eine Variante für verschiedene Geräte erstellt 59. Komponentenvarianten für Geräte: Oft möchten Sie Komponenten erstellen, die Sie sowohl im Internet als auch auf Mobilgeräten verwenden können Manchmal müssen Sie Ihre Komponenten ändern, sodass es eine für Mobilgeräte und eine für das Internet gibt Also sollte das Snap Board hier zum Beispiel eine mobile Version und eine Webversion haben . Das ist etwas anders. Also gehen wir hier zu der Komponente, wo wir sie in diesem Abschnitt haben, und wir werden eine weitere Variante dafür erstellen, die spezifisch für Mobilgeräte sein wird. Und wir werden diese Variante Gerät nennen, und ich werde sie einfach erweitern , sodass wir hier rechts Platz haben, eine weitere Variante hinzufügen, und wir werden diese eine mobile Variante nennen. Hoppla. Da haben wir's. Und wir werden die Breite so einstellen, dass eine variable Gerätegröße angewendet wird. Und wir werden die Breite 440 einstellen, was der Handygröße entspricht und sie hier einfach zur Seite bringen. Und das sieht offensichtlich nicht gut aus. Wählen wir also das Logo aus und ändern es so, dass es vielleicht eine Sechs für Mobilgeräte ist. Und dann die horizontale Polsterung, wir machen den Seitenrand und dann wenden wir den variablen Modus für Mobilgeräte an , sodass dieser immer dem mobilen Modus folgt Und tatsächlich können Sie dasselbe mit Ihrer Breite machen. Sie können einfach eine variable Gerätegröße anwenden Da wir den Modus auf Mobilgerät einstellen, folgt er immer dem Handy. Und auf diese Weise wird alles automatisch übernommen, wenn wir jemals eine Änderung an unserer Handygröße vornehmen , wenn wir jemals eine Änderung an unserer Handygröße und hier plötzlich entscheiden , dass unser Handy 500 sein sollte , dass unser Handy 500 sein sollte. Das ist also der Vorteil, es auf diese Weise zu verwenden. Oder nehmen wir an, Sie möchten den Rand auf Mobilgeräten auf 16 Pixel ändern den Rand auf Mobilgeräten auf 16 Pixel Diese Änderungen werden automatisch vorgenommen. Auf Mobilgeräten wollen wir den Namen also nicht. Wir wollen nur den Namen löschen, und vielleicht könnte der Abstand zwischen diesen beiden 24 Pixel betragen. Dieser könnte etwas größer sein, vielleicht erst fünf Jahre alt. Das sieht gut aus. Das hier heißt also Web. Dieser hat keinen Namen. Es heißt einfach Standard, also wollen wir es auf Web ändern. Ich werde das hier einfach in der Größe ändern. Und dann wollen wir auch zu Variablen gehen und hier einen Gerätenamen erstellen Also werden wir eine Zeichenkettenvariable namens device erstellen, oder Sie können den Gerätenamen eingeben. Dieser wird Web sein, genauso buchstabiert wie dort, und dieser wird mobil sein Genau so buchstabiert wie hier. Auf diese Weise können Sie Ihrer Seite mitteilen, welche Komponenten verwendet werden sollen. Wenn Sie also hier rüber gehen, können wir zu der Version gehen, die wir auf Mobilgeräten haben, und dann können wir, anstatt jedes Mal manuell auf mobile Geräte umzustellen, jedes Mal manuell auf mobile Geräte umzustellen, die Variable namens Gerätename anwenden. Also, was passiert hier? Wie Sie sehen können, wenn ich das auf Web umstelle, habe ich hier einen kleinen Fehler und ich möchte nur sichergehen , dass Sie genau wissen, was vor sich geht, falls es Ihnen passiert . Wenn Sie jemals ein Problem wie dieses haben, bei dem eine Ihrer Komponenten in einem bestimmten Modus feststeckt, Sie wahrscheinlich hier ein Erscheinungsbild auf diese bestimmte Komponente oder diesen Variablenmodus angewendet , haben Sie wahrscheinlich hier ein Erscheinungsbild auf diese bestimmte Komponente oder diesen Variablenmodus angewendet, es aber nicht entfernt, denn wenn wir jetzt den Variablenmodus für die gesamte Seite ändern, sollte sich alles ändern. Etwas ändert sich nicht, dann bedeutet das, dass Sie einen Variablenmodus auf eine bestimmte Komponente anwenden . Also willst du das nicht tun. Sie möchten dies entfernen , sodass es automatisch den Darstellungsmodus oder den Variablenmodus erbt Darstellungsmodus oder den Variablenmodus , den Sie hier im gesamten Frame oder auf der gesamten Seite haben Wenn wir das jetzt auf Mobilgerät ändern, wird die Navigationsleiste von Mobilgeräten verwendet Wenn wir es im Internet machen, verwenden wir die Navigationsleiste aus dem Internet. So können wir also eine Variable an eine Variante übergeben und verschiedene Varianten verwenden, um verschiedene Komponenten zu erstellen, die wir dort verwenden können. Sie können sich also vorstellen, dass dies nützlich und praktisch sein könnte , wenn Sie an verschiedenen Marken arbeiten. Wenn Sie möchten, dass Ihre App bei mehreren Marken funktioniert, können Sie den Namen des Unternehmens oder verschiedene Eigenschaften sehr schnell ändern . Sie haben dort also viel Flexibilität, was gut ist. Wir sprechen zwar immer noch über Variablen und deren Verwendung für unser responsives Design, aber eine weitere Sache, die wir hier ändern könnten die Schriftgrößen auf Mobilgeräten. Genau wie wir es hier für den Namen des Unternehmens getan haben, einige der Schriftgrößen auf sind einige der Schriftgrößen auf Mobilgeräten etwas zu groß. Für den Großteil der Seite funktioniert es und es sieht okay aus, aber speziell dieser kleine Header , den wir hier haben, ist auf Mobilgeräten zu groß. Im Internet sieht es okay aus. Kehren wir also zur Exexture zurück, um eine Mini-Lektion über Schriftarten zu machen eine Mini-Lektion über Schriftarten 60. Schriftvariablen: Auf Mobilgeräten möchten wir unterschiedliche Schriftgrößen verwenden. Und tatsächlich gibt es noch viel mehr Eigenschaften, die du mithilfe von Variablen auf deine Schriften anwenden kannst . Lassen Sie uns diese also schnell untersuchen. Wir haben hier also unsere lokalen Stile für unsere verschiedenen Überschriften - und Haupttexte. Und in jedem können wir natürlich die Schriftfamilie ändern, wenn Sie die Eigenschaften bearbeiten . Wir können das Gewicht und die Schriftgröße ändern, aber wir können auch Variablen auf sie anwenden. Wir können das also als Variable schreiben und es hier anwenden, indem wir auf Variable anwenden klicken. Auch hier können Sie Ihre, sagen wir, Schriftfamilie für Ihr gesamtes Projekt schnell ändern , anstatt all diese durchzugehen und sie dort zu ändern. Die andere Sache, die Sie tun können, ist, dass Sie Ihre Schriftgröße mit einer Variablen hier unten festlegen können . Und das können Sie auch für Ihre Schriftstärke tun. mich jetzt für unseren speziellen Fall interessiert , ist die Handygröße. Wir wollen es so haben, dass wir für diese spezielle Größe, sagen wir, das dritte Lebensjahr haben, eine Größe für das Internet haben, die 39 Pixel beträgt, und dann möchten wir vielleicht eine kleinere festlegen wenn das Alter drei auf einem Handy verwendet wird. Wie machen wir das? Wenn wir zu unseren Variablen zurückkehren, können wir eine neue Sammlung erstellen, und diese hier nenne ich Schriften. Wir werden eine Variable erstellen und sie auf eine Zahl setzen. Und wir schreiben H in drei Größen. Wir werden einen Modus als Web und den anderen als Mobilmodus haben. Die eine Sache, die ich vergessen habe zu erwähnen, ist, dass Modi nur verwendet werden können , wenn Sie einen Pcount bei Figma haben Wenn Sie dies nicht tun, wenden Sie einfach einen Modus für Ihr Und wenn Sie natürlich ein Upgrade in Betracht ziehen, empfehle ich es, damit Sie verschiedene Modi anwenden können. hier für unser Web Lassen Sie uns hier für unser Web dieselbe Größe von 39 Pixeln anwenden, und dann können wir vielleicht auf Mobilgeräten 30 Pixel verwenden. Wir werden das versuchen und sehen, ob es zu groß ist. Wenn wir nun zu unserer H-Drei übergehen, anstatt eine feste Größe von 39 Pixeln zu haben, gehen wir hier runter und wenden eine variable H3-Größe an. Nun, da wir das als Teil einer anderen Variablensammlung einrichten , ist es nicht Teil von Geräten. Wir müssen unsere Seite hier so einrichten , dass wir unseren Variablenmodus ändern oder anwenden müssen unseren Variablenmodus ändern oder anwenden damit Schriften auch die Handygröße verwenden. Wenn Sie sich mit dieser Unannehmlichkeit nicht auseinandersetzen möchten, können Sie hier nach oben gehen und Ihre Geräte aufrufen und Ihre Schriftgrößen hier auch als eine andere Sammlung einrichten Ihre Schriftgrößen hier auch als eine andere Sammlung Also werde ich das nur als Beispiel machen . Du musst es nicht tun. Ich kann hier eine Zahl erstellen, sagen wir, für meine H-Größe zwei und dann noch eine für meine H-Eins-Größe. Hoppla Und dann kann ich sie einfach zusammenfassen. Und nenne diese Gruppe Schriftgrößen. Es befindet sich immer noch in der Gerätesammlung, sodass Sie den Variablenmodus nicht auch für Schriftarten anwenden müssen . Aber derzeit habe ich es so eingerichtet, dass es sich in einer anderen Sammlung befindet. Also muss ich auch den Variablenmodus für Schriftarten von Mobilgeräten anwenden . Und, bumm, unser Text hier verwendet jetzt die Größe H drei für Mobiltelefone, was erstaunlich ist. Ich denke, wir können das sogar auf 32 Pixel erhöhen. Lass uns das versuchen. Und das sieht gut aus. So können wir Variablen verwenden, um unsere Schriftarten und Größen zu ändern unsere Schriftarten und Größen je nachdem, auf welchem Bildschirm Sie sich befinden. So haben wir bisher gelernt , wie man Variablen verwendet , um ein responsives Design zu erstellen. Kommen wir zurück zum Ex-Sectre um einen anderen Weg mit Einschränkungen zu versuchen 61. Einschränkungen verwenden: So verwenden Sie Variablen, um unterschiedliche Gerätegrößen zu erstellen, unsere Webseite schnell auf eine mobile Seite umzustellen und so weiter. Und ich denke, jetzt ist es ein guter Zeitpunkt, um zu lernen, wie man auch responsives Design mit Einschränkungen erstellt . Einschränkungen in Figma finden Sie also auf der rechten Seite hier. Manchmal ist es möglicherweise nicht sichtbar, sodass Sie möglicherweise auf diese kleine Schaltfläche mit der Aufschrift Einschränkungen klicken müssen, um die Einschränkungen, die auf Ihre Elemente angewendet wurden, im Rahmen zu sehen Ihre Elemente angewendet wurden, im Rahmen Durch Einschränkungen können die Elemente in Ihrem Frame reagieren und stattdessen auf die Größe des Frames oder des Inhalts oder des übergeordneten Frames reagieren die Größe des Frames oder des Inhalts oder . Zum Beispiel hat derzeit standardmäßig jedes Element in Ihrem Design eine Beschränkung für oben und links. Das bedeutet, dass, wenn Sie Ihren Rahmen erweitern, wenn Sie die Größe ändern, standardmäßig alles versucht, die Beschränkungen links und oben beizubehalten, sodass es immer links und oben an Ihrem Projekt angehängt wird sodass es immer links und oben an Ihrem Projekt angehängt links und oben an Ihrem Projekt Ich werde diese Zielsuchseite duplizieren , nur um eine mobile Version zu erstellen, die nur Einschränkungen verwendet Nun zur Navigationsleiste hier oben. Wenn ich die Shift-Taste gedrückt halte, lege ich auch eine horizontale Beschränkung für links und rechts fest. Jetzt ist es also auch nach rechts beschränkt. Wenn wir unseren Frame erweitern, ihn die Navbar jetzt mit der Framegröße, und wenn ich ihn reduziere, wird er auch kleiner Jetzt haben wir natürlich immer noch das Problem, dass bestimmte Komponenten schlecht aussehen, also müssen wir das technisch gesehen immer noch auf eine Version für mobile Geräte umstellen das technisch gesehen immer noch auf eine Version für mobile Geräte Das ist immer noch notwendig. Im Moment ist das bei der mobilen Version natürlich so eingerichtet , dass sie auf eine feste Breite eingestellt ist. Aber wenn wir diese feste Breite nur vorübergehend entfernen, können wir sie tatsächlich einfach auf die Breite ändern , die wir für unser Gerät wünschen Jetzt, da es hier die gesamte Seite einnimmt , wird es immer noch dasselbe tun Es wird immer noch schrumpfen und expandieren. In Bezug auf den übergeordneten Container, dessen Größe ebenfalls geändert wird Für diesen können wir nun genau dasselbe für den Inhalt tun. Wenn ich genau hier eintauche, könnte die Größe hier für eine Tablet-Größe funktionieren. Und dann können wir auch eine Beschränkung von oben links und rechts anwenden . Aber bevor ich das mache, werde ich Ihnen kurz zeigen, worum es bei den anderen Einschränkungen geht. So können wir eine richtige Einschränkung haben. Was nun passieren wird , ist, dass, wenn eine Seite hier erweitert wird, dieser Inhalt immer auf der rechten Seite bleibt. Wenn ich zentriere, dann bleibt der Inhalt, wie du es erraten hast, in der Mitte, was übrigens auch funktionieren könnte Und das wird häufiger im Internet verwendet. Sie können auch Fähigkeiten einsetzen. Und wenn du es auf Skill setzt deine Seite erweiterst, passiert das, dass dieser Inhalt auch horizontal gestreckt wird , je nachdem, wie stark du ihn skalierst. Es ist ein bisschen anders, denn wie Sie sehen können, sind die Abstände zwischen links und rechts unterschiedlich. Es schrumpft also und dehnt sich aus. Es ist nicht dasselbe wie es nach links und rechts zu setzen. Und in den meisten Fällen möchten wir keine Skalierung verwenden. Auf einer Seite wie dieser ist links und rechts am sinnvollsten. Und im Moment sind die Dinge ein bisschen durcheinander geraten. Tatsächlich werde ich Befehl Z ganz zurück nehmen, bis wir diesen haben , und ihn dann auf links und rechts ändern Jetzt ist das eine bessere Lösung, bei der sich die Dinge hier erweitern und dann auch verkleinern, um sie an unterschiedliche Größen anzupassen, wie bei einem mobilen Display Das ist nicht perfekt, und Sie müssen trotzdem mit Ihrem automatischen Layout arbeiten, um das Problem für Mobilgeräte zu beheben Sie können also eine Menge Dinge tun, um das zu beheben. Für dieses Element hier müssen Sie es zum Beispiel möglicherweise auch so umbrechen, müssen Sie es zum Beispiel möglicherweise auch so umbrechen dass, wenn die Seite schrumpft, und für diesen Frame, wir den Feldcontainer festlegen möchten Wenn die Seite jetzt schrumpft, werden auch die Felder in neue Zeilen verschoben. Das Gleiche hier Für diesen wollen wir einen Wrap machen und er ist schon auf dem Füllbehälter, also sollte das funktionieren. Da hast du's. Also sehr schnell, wir haben eine Seite, die auf Mobilgeräten funktionieren könnte. Es ist kein schlechter Start. In der Tat war das ziemlich schnell einzurichten, aber vielleicht möchten Sie trotzdem ein anderes Design auf Ihrem Handy, damit es nicht so viel Platz oben einnimmt, mit all den Feldern und der Art und Weise, wie alles eingerichtet ist. Im Idealfall möchten Sie also immer noch einige Anpassungen daran vornehmen Mithilfe von Einschränkungen ändern wir hier jedoch schnell die Inhaltsgröße, sodass sie von der Seitengröße oder der Rahmengröße abhängt Nun, wir haben die vertikalen Beschränkungen noch nicht berührt, aber wenn wir mit den vertikalen Beschränkungen spielen, haben Sie auch ähnliche Optionen bei denen Dinge auf unten, oben und unten, Mitte und Maßstab beschränkt werden können oben und unten, Mitte und Maßstab Wenn Sie den unteren Teil der Seite auswählen und der untere Teil der Seite erweitert wird, wird der Inhalt hierher verschoben , sodass derselbe Abstand zwischen, Sie wissen schon, wo das hier endet, und dem unteren Rand bleibt , 684 Pixel beträgt Es wird also versuchen, diese 684 Pixel beizubehalten. Auch hier ist es standardmäßig auf top eingestellt. Es behält also den Abstand , den es vom oberen Rand dieses Rahmens hat , bei, was standardmäßig 136 ist. Und natürlich haben wir auch die anderen Optionen wie die Mitte. Wenn die Seite also erweitert wird, wird versucht, sie so zentriert zu halten , wie sie zuvor war. Und Sie haben auch dieselbe Skalierungsoption. So verwenden Sie also Einschränkungen. Wenn Sie jedoch anfangen, die maximale Breite und das gesamte Layout und die Variablen zu verwenden , ist es weniger notwendig, Einschränkungen zu verwenden. Es ist also nicht etwas, das Sie wahrscheinlich täglich verwenden, aber Sie haben diese Option. Wirklich schnell, wenn Sie diese auch schnell ändern möchten, aber die Grafik hier verwenden möchten, können Sie dies von hier aus jederzeit auf „Oben“ setzen Sie können dies von hier aus auf unten setzen. Oder wenn Sie die Umschalttaste gedrückt halten, können Sie es sowohl auf oben als auch auf unten setzen. Und wenn Sie die Umschalttaste gedrückt halten, können Sie auch einfach das eine oder das andere ausschalten. Von hier aus können Sie in die Mitte wechseln. Und denken Sie daran, dass Sie die horizontalen Beschränkungen von hier aus steuern , und dann sind diese vertikalen Linien für Sie da, um Ihre vertikalen Beschränkungen zu steuern. Aber standardmäßig möchten wir diesen Wert auf oben und diesen auf links und rechts setzen , sodass wir schnell, wenn wir diesen Wert auf 440 ändern, schnell ein mobiles Design einrichten können. Ja, jetzt haben wir eine mobile Seite, vielleicht möchtest du hier Änderungen vornehmen und die Elemente darin sind nicht so weit voneinander entfernt Und dann möchtest du vielleicht die Felder hier auf volle Breite einstellen die Felder hier auf volle Breite Und vielleicht könnten diese ein automatisches Layout sein. Und von hier aus können wir diesen auch auf 16 Pixel einstellen. Und ich möchte die Polsterung so gestalten, dass sie 24 Pixel von den Seiten und 24 Pixel von oben beträgt Und dann wurde es einfach erweitert, sodass es auch aktiviert ist. Möglicherweise müssen Sie hier und da einige Änderungen vornehmen , um dies auf Mobilgeräten zu verbessern, aber es sollte relativ einfach sein Mit ein paar einfachen Änderungen können Sie also ein mobiles Design für Ihre Destination Discovery-Seite 62. Unsere Datei organisieren: Ich habe einige Zeit gebraucht, um meine mobilen Versionen fertigzustellen. Wenn Sie das nicht getan haben, nehmen Sie sich Zeit, dies für die anderen Seiten zu tun, die Sie noch nicht erstellt haben. Und jetzt, in dieser Vorlesung, möchte ich schnell alles organisieren und sicherstellen, dass das Projekt aufpoliert aussieht. Die eine Sache, die mir auffiel, als ich das durchging , ist , dass wir für unsere Anmeldung mit Telefonnummer und Anmeldung bei Google, für unsere Anmeldung bei Google, es ein bisschen besser aussehen lassen können, indem wir es ein bisschen besser aussehen lassen können einfach das Symbol oder das Google-Symbol dort haben. Im Moment haben wir also dieses Symbol „ Links anzeigen“, das wir verwenden können. Und dann haben wir für unser Symbol nur die begrenzten Symbole, die wir eingerichtet haben. Wir können natürlich hierher zurückkehren und ein anderes Symbol ändern oder hinzufügen. Wenn Sie einfach Ihren Browser öffnen und nach einem SVG suchen. Mal sehen, ob ich kann. Ich öffne einfach Foster-Symbole, um zu sehen, ob sie hier vielleicht schon ein Google-Logo haben . Und das tun sie. Sie können entweder dieses hier verwenden, das sie haben oder einfach in Ihrem Browser nach dem Google-Logo, SVG, suchen . Dann sehen Sie eines, das so aussieht, und fügen Sie es einfach hier in Ihrem Projekt hinzu. Vielleicht wurde es nicht hinzugefügt, also bringen wir es einfach hierher. Ich werde es einfach einfügen und das ist viel zu groß. Wir wollen mal sehen, wie groß die sind, 20 mal 20. Also wollen wir einfach K auf unserer Tastatur drücken , um das schnell auf 20 mal 20 zu skalieren . Und dann werde ich es einfach hier aufrufen und es auch in eine Komponente umwandeln und es Icons Google-Logo nennen es Icons Google-Logo , damit wir es schnell in unserer Schaltfläche hier unten in das Google-Logo ändern können . Das sieht viel besser aus und ist dem, was wir in anderen Apps haben, sehr ähnlich. Unterschreibe es jetzt mit der Telefonnummer. Wir können es einfach so machen , dass der Benutzer seine Telefonnummer eingibt und dann sagt: Weiter. Im Moment sieht es ein bisschen komisch aus, als ob das Telefonnummernfeld fehlt. Warum kopieren wir also nicht einfach ein Feld hier und fügen es hier ein und nennen es dann dieses? Telefonnummer, und wir geben hier einfach eine Beispieltelefonnummer plus eins, zwei, eins, zwei, eins, zwei, drei, vier, einen, zwei, eine Beispieltelefonnummer plus eins, zwei, eins, zwei, eins, zwei, drei, vier, einen, zwei, vier, einen Gedankenstrich ein. Und dann werden wir diese beiden einfach so anordnen und sie ein bisschen näher bringen, vielleicht acht Pixel voneinander entfernt. Sie sehen also aus, als ob sie verwandt sind. Das sieht ein bisschen besser aus. Und wir können uns immer zuerst mit der Google-Option anmelden und dann die Telefonnummernoption haben. Das ist also eine kleine Verbesserung. Diese Seite sieht gut aus. Diese Seite sieht auch gut aus. Wir haben die Drop-Downs hier, und dann sieht mein Handy ein bisschen verstreut aus. Was wir tun können, ist einfach die mobilen Designs und dann das Webdesign getrennt voneinander zu trennen, nur um die Datei schnell zu organisieren. Also können wir einfach hierher gehen und einen Abschnitt erstellen. Ich werde einfach einen Abschnitt um meine mobilen Bildschirme zeichnen und diesen Bereich „Mobilgerät“ nennen. Und dann drücke ich die Eingabetaste, um alle darin enthaltenen Rahmen auszuwählen und sie einfach nach diesem kleinen Symbol zu organisieren. Und wenn Sie dann all Ihre Rahmen organisieren, können Sie sie schnell näher zusammenbringen, vielleicht mit 100 Pixeln und einem Abstand zwischen ihnen. Und wenn Sie dann auf die Ränder Ihres Abschnitts doppelklicken , wird die Größe automatisch an den Inhalt angepasst. Jetzt haben wir also alle mobilen Seiten dort, und wir können hier genau das Gleiche für den Abschnitt auf den Webseiten tun hier genau das Gleiche für den Abschnitt auf den Webseiten Du musst das nicht tun, aber ich finde, es ist viel netter. Und dann einfach eine Webversion davon haben und dann die Eingabetaste drücken, um alle Frames auszuwählen und sie einfach hier zu organisieren Der Filter und alles waren da ein bisschen durcheinander, aber wir werden das reparieren und einfach die oberste Zeile machen Und wir bringen dieses Filter-Dropdown-Menü in das andere, genau hier unten, wo es sein sollte Und ich werde alle beiden Leerzeichen etwas länger aushalten . Da haben wir's. Das sind unsere mobilen Bildschirme, und dann haben wir unsere Komponenten, was auch schon ein Abschnitt ist. Es sieht also gut aus. Wir haben einen Komponentenbereich, wir haben einen Web- und einen Mobilbereich. Jetzt, genau jetzt, haben wir diese Mockups hier. Sie können jederzeit neue Seiten erstellen und Ihr Web oder Handy auf diese Seiten verschieben Ihr Web oder Handy auf diese Ich hätte gerne für eine einfache App wie diese alles auf einer Seite. In Ordnung, das sieht also sehr ordentlich und organisiert aus, und jetzt ist es an der Zeit, zurückzukommen und daraus einen Prototyp zu machen. Also lass uns das im nächsten Abschnitt zusammen machen. 63. Unsere App mit DesignPro testen: Wir haben unsere Datei organisiert und sie sieht langsam großartig aus. Um unsere Designs auf die nächste Stufe zu heben, gibt es ein paar Dinge, die wir noch einmal überprüfen können , um sicherzustellen, dass unsere Designs barrierefrei sind und dass es keine Probleme mit der Benutzeroberfläche gibt die Benutzer stoßen , auf die Benutzer stoßen, wenn sie unsere App verwenden. Ein Plug-In, das ich als sehr hilfreich empfunden habe , um uns dabei zu helfen, heißt Design Pro. Wenn Sie unter Plug-ins und Widget nach Design Pro suchen, finden Sie dieses AI Design Reviewer-Plugin, und Sie können es öffnen. Dieses Plugin hilft uns, den Text auf unserer Seite zu verbessern, Barrierefreiheit zu überprüfen und unsere Benutzeroberfläche zu überprüfen. Nehmen Sie sich hier eine Sekunde Zeit, um es für ein Konto zu unterschreiben . Wir werden es auch tun. Sobald Sie angemeldet sind, sehen Sie die Seite , die Sie ausgewählt haben. Wenn ich sie also auf eine andere Seite ändere, sehe ich die Seite, die ich gerade betrachte, und ich kann wählen, ob ich auf dieser Seite eine Bewertung abgeben möchte. Seite, an der ich gerade interessiert bin, ist unsere Hauptseite, die Destination Discovery Page, weil dies wahrscheinlich eine der am häufigsten besuchten Seiten ist. Aber natürlich kannst du dieses Plugin auf jeder Seite und am besten auf allen Seiten deiner Designs ausführen jeder Seite und am besten auf . Von hier aus kann ich eine Bewertung auswählen, einen Designprofi auswählen, unseren Text verbessern, die KI prüfen, also alle Probleme mit der Benutzeroberfläche erkennen und uns helfen, die Best Practices zu befolgen. Stellen Sie sicher, dass unser Design die Richtlinien zur Barrierefreiheit erfüllt . Das kann beim Design sehr wichtig sein, um sicherzustellen, dass Ihre Designs barrierefrei sind und für alle funktionieren. Und bei Landingpages und Websites, auf denen Sie Handlungsaufforderungen haben, können sie Ihnen bei der Konversion helfen und Ihre Konversionsrate auf diesen Websites steigern. Sie können jederzeit eine persönliche Expertenbewertung einholen, wenn Sie eine professionellere Bewertung zu diesem Thema wünschen . Lassen Sie uns die Audit-Benutzeroberfläche hier ausführen , um zu sehen, welche Probleme diese Seite mit der Benutzeroberfläche haben könnte. Klicken wir also auf Lass uns überprüfen. Es wird eine Sekunde dauern das Design abzurufen, es durchzugehen und die KI alles in diesem Design überprüfen In Ordnung, jetzt ist die Audit-Benutzeroberfläche einsatzbereit. Wir können uns das Feedback hier ansehen. Zunächst wird es Ihnen einige positive Dinge geben , die es in unserem Design gefunden hat. wurden nur zwei Schriften verwendet, tolle Schriftpaarungen. Das ist genial Und das sind alles tolle Dinge, die man als Designer sehen kann. Und dann sehen Sie gleich unten alles, was Sie reparieren müssen. Genau hier können wir also auf Inspect klicken, um genau zu erfahren, woher dieser Tipp stammt. Und es wird erwähnt , dass sich das Logo hier und der Abschnitt mit dem Benutzerprofil auf derselben vertikalen Grundlinie befinden sollten. Es passt also zum Logo. Da es hier einen kleinen Unterschied gibt, ist dieser hier 48 Pixel groß, wohingegen die Schrift hier 38 Pixel groß ist. Optisch gesehen befindet es sich also nicht ganz auf derselben Linie, wie Sie es in der Mitte sehen. Das ist eine großartige Lösung. Wir können tatsächlich direkt zu unserer Navbar gehen und diese Änderung vornehmen , sodass dieser Text 48 Pixel hat und von der Mitte zur Mitte ausgerichtet ist Und wenn wir jetzt zurückgehen, auch wenn es nicht sehr offensichtlich ist, aber das sind subtile Änderungen die für Ihre Designs wichtig sind Ja, das war hilfreich und lehnen Sie es einfach ab. Wir wissen also, dass wir damit fertig sind. Dann geh zum nächsten. Ich sage, die orange Farbe hier könnte in Bezug auf die Marke dieselbe sein wie die hier. Das sind also sekundäre 800. Also können wir einfach zu unserer Karte hier drüben gehen und die sekundäre 800 anwenden. Tatsächlich möchte ich das auch für die andere tun. Ich gehe also nicht mehr hierher zurück, sieht jetzt definitiv besser aus. Ich werde das abweisen Und so gibt es noch eine Menge mehr, die es uns hier gegeben hat, und wir können jedes Detail durchgehen und Ihnen sogar die Quelle geben, woher es kommt Ich empfehle Ihnen, diese Quellen durchzugehen , um wirklich zu verstehen, besonders als Designer , der gerade erst anfängt, worauf dieses Feedback wirklich basiert? Ich denke, insgesamt haben wir bei der Zusammenstellung dieses Designs gute Arbeit geleistet , weil wir viele positive Ergebnisse erzielt haben. Lassen Sie uns unsere Zieldetailseite ausprobieren und ein Audit zur Barrierefreiheit auswählen und das durchführen , um zu sehen, welche Ergebnisse wir hier erzielen werden. Und innerhalb weniger Sekunden ist das Feedback fertig. Es gibt uns also eine Bewertung, die auf der Textfarbe und diesem Hintergrund basiert . Es gibt uns einige Vorschläge wie wir das Problem auch hier beheben können, und wir können sie hier direkt anwenden. Das ist also ein sehr hilfreiches Plug-In, und ich ermutige Sie, es in Ihren Projekten zu verwenden. 64. Exportieren unserer Designs: Bevor wir also loslegen und an unseren Prototypen arbeiten, möchte ich Ihnen kurz zeigen, wie Sie Ihre Designs aus FigMA exportieren können Nehmen wir an, Sie haben einen Freund, Kollegen oder Kollegen , der nach PNG-Versionen Ihrer Designs fragt Natürlich können Sie die Figma-Datei mit ihnen teilen, und wir werden das im zukünftigen Abschnitt behandeln Aber wenn du deine Designs schnell von hier auf deinen Desktop oder wo auch immer exportieren möchtest , kannst du Rahmen auswählen, und hier unten siehst du einen Exportbereich und du kannst auf Exporteinstellungen klicken, und standardmäßig ist es ein X, was der Originalgröße entspricht Aber natürlich können Sie das auf zwei x ändern, wenn Sie Bild mit höherer Auflösung oder höherer Auflösung wünschen, und dann können Sie den Typ auswählen, wenn Sie JPEG, PNG, SVG oder PDF möchten . Und dann klicken Sie einfach auf Exportieren und Sie werden gefragt, wohin Sie es exportieren möchten, und dann erhalten Sie ein PNG. Und dann werden Sie gefragt, wo Sie Ihr PNG haben möchten, und dann werden Sie wählen, ob Sie dieses nette PNG hier haben möchten, das Sie mit anderen Leuten teilen können. Cool. Nehmen wir an, Sie möchten den gesamten Abschnitt hier exportieren, um nur zu zeigen, woran Sie gearbeitet haben. Sie können tatsächlich den gesamten Webbereich exportieren und eine Vorschau davon anzeigen, wie das aussehen würde. Es würde tatsächlich alles zusammen als ein Bild exportieren . Weil es also gigantisch ist, zeige ich Ihnen nur eine Vorschau davon . So würde es aussehen Aber wahrscheinlich möchten Sie einzelne Frames darin und alle Elemente und so exportieren . Wenn Sie einen solchen Abschnitt haben, können Sie einfach Eingabetaste drücken, um alle darin enthaltenen Frames auszuwählen und dann mehrere Dinge gleichzeitig zu exportieren. Sie können also sieben Ebenen exportieren. Und Figma wird alle Ihre Frames einzeln als Bild exportieren Und das kann für Entwickler nützlich sein, wenn sie hier reingehen und sagen wir, sie möchten hier dasselbe Sternsymbol verwenden . Sie können einfach hineingehen und diesen Vektor auswählen und ihn als SVG exportieren , sodass sie ihn ganz einfach in ihrem Projekt verwenden ganz einfach in ihrem Projekt So exportieren wir es also. Ich möchte Ihnen auch zeigen, ob Sie Ihr Projekt in Ihrem Portfolio präsentieren oder es schön aussehen lassen möchten , wie wir einige der Community-Dateien verwenden können, um unser Projekt auf einen echten Computer zu stellen und es cool aussehen zu lassen. 65. Portfolio-Bereite Designs: Also das ist nett. Wir können diese als einzelne Frames exportieren, was cool aussieht. Aber ich bin mir sicher , dass du diese Designs in dein schönes Portfolio aufnehmen willst , und du willst, dass es cool aussieht. Und hier können wir etwas Magie und Figma sowie die Community-Dateien verwenden sowie die Community-Dateien Wenn du also zu deinen Community-Dateien gehst und nach den Community-Dateien suchst und wenn du einfach auf die Startseite hier gehst, kannst du nach, sagen wir, Laptop, Mockup oder etwas Ähnlichem suchst und wenn du einfach auf die Startseite hier gehst Community-Dateien suchst und wenn du einfach auf die Startseite hier gehst, suchen , oder wenn du die mobile Version willst, kannst du nach einem mobilen Modell suchen Und Sie können sehen, dass mehrere solcher Dateien angezeigt werden. Sie können also gerne das auswählen, das Sie möchten. Und es gibt viele kostenlose, und Sie können sehen, welche zur Atmosphäre Ihres Portfolios passen Nur als Beispiel, ich werde eine von ihnen auswählen, nur um das zu präsentieren, ich werde eine der kostenlosen von hier auswählen Öffne es Ich habe dieses nette gefunden, das ich benutzen werde, nur um dir zu zeigen, wie das funktioniert. Sie klicken auf Öffnen, um Infigma zu öffnen, und dann werden Sie aufgefordert, Ihr Design hier einzufügen Sie können also tatsächlich zu dieser Seite gehen, die sie in dieser speziellen Seite haben, und lesen, wie sie funktioniert Und es verwendet ein Plugin namens Mockups Plugin. Also, es könnte anders sein als die Datei, die du gefunden hast, aber das ist die, die ich gefunden habe, und ich werde einfach meine Ziel-Entdeckungsseite kopieren und sie hierher bringen und einfach die Informationen lesen Aber ich werde dir schnell zeigen , wie es funktioniert. Gehen wir also zu dieser Szene. , wo Platzhalter steht, fügen wir unser Design Und natürlich wird es so angezeigt, sodass Sie einfach Änderungen daran vornehmen können , wenn es nicht gut aussieht Also auf Anhieb ist diese rote Farbe wirklich nervig. Also werde ich das einfach ändern und ich werde das nur ein bisschen hierher bringen . Der Rest sieht vorerst gut aus. Und dann möchten Sie Ihre Plug-ins öffnen. Sie möchten nach diesem Mockup-Plug-In suchen und es öffnen Und was dieses Mockup-Plugin macht, es ermöglicht Ihnen, Ihren Rahmen in ein Mockup einzufügen Und es ist derzeit kostenpflichtiges Plug-In, sodass Sie es kostenlos nutzen können, indem Sie sich für eine kostenlose Testversion anmelden Also zögern Sie nicht, das zu tun. Ich bin mir sicher, dass es kostenlose Versionen davon gibt, aber wenn Sie bereit sind, Ihr Portfolio zusammenzustellen, lohnt es sich auf jeden Fall, sich einfach für die kostenlose Testversion anzumelden. Jetzt möchtest du also in deinem Plugins-Tab nach diesem Mk-up-Plugin suchen in deinem Plugins-Tab nach diesem Mk-up-Plugin Sobald du es öffnest, siehst du vielleicht eine Seite , auf der du aufgefordert wirst, Pro zu werden, aber du musst nicht einfach auf Distort klicken Das ist es, was du willst. Sie möchten also die Ebene auswählen, die Sie in die andere Ebene einfügen möchten. Also hier drüben heißt es, wählen Sie die Vektorform aus. Also zuerst werden Sie aufgefordert, die Ebene auszuwählen in die Sie Ihren Rahmen einfügen möchten, und es ist diese hier, der Bildschirm, und die Ebene, die wir einfügen möchten, ist ein Platzhalter Und dann möchten Sie es anwenden, und bumm, es nimmt Ihr Design von dort, verzerrt es so, dass es auf dem Laptop gut aussieht, und es sieht Und Sie können das einfach an einen beliebigen Ort exportieren. diese Weise erstellen Sie coole, vorzeigbare Formate aus Ihren Designs, um sie mit anderen Personen oder Ihrem Portfolio zu teilen , und so weiter Und jetzt denke ich, dass wir bereit sind, zurückzukommen und daraus einen Live-Prototyp zu machen , den wir auf unseren Web- und Mobilgeräten testen können auf unseren Web- und Mobilgeräten 66. Einen Benutzerfluss definieren: Zeit, Spaß beim Zusammenstellen realistischer Prototypen zu haben. In den nächsten Vorlesungen werden wir also herausfinden, wie wir das Prototyping-Tool nutzen können , um unsere App potenziellen Nutzern oder anderen Stakeholdern und Teammitgliedern in unserem Team, Investoren usw. vorzustellen um unsere App potenziellen Nutzern oder anderen Stakeholdern und Teammitgliedern in unserem Team, Investoren usw. Bevor wir mit einem Prototyp beginnen, möchten wir unseren Benutzerfluss definieren Und natürlich können Sie dies tun, indem Sie entweder einfach Stift und Papier verwenden oder einfach genau definieren und schreiben, wohin Benutzer in der App gehen sollen. In der Regel beginnen wir also in einem Prototyp mit einer ersten Seite, auf der wir die erste Seite auswählen , auf der der Benutzerfluss beginnt, und wir können verschiedene Benutzerabläufe haben. Wir können einen Benutzerfluss für einen angemeldeten Benutzer einrichten , der auf der Destination Discovery-Seite beginnt. Wir können einen Benutzerfluss für einen Benutzer einrichten, der sich noch nicht angemeldet Deshalb starten wir ihn auf der Anmeldeseite, was wir auch tun werden Wir werden einen Prototyp zusammenstellen, der den Benutzer auf der Anmeldeseite startet Dann machen wir weiter und duplizieren den Bildschirm, machen ihn so, dass wir tatsächlich so aussehen können , als würden wir die Informationen eingeben, sagen wir die E-Mail und das Passwort, und dann meldet sich der Benutzer an und geht zur Bestätigungsseite, die wiederum diese Seite dupliziert, es sieht so aus, als hätten wir einen Bestätigungscode eingegeben, fahren fort und gelangen dann zu unserer Zielsuchseite. Jetzt haben wir auf unserer Seite zur Entdeckung von Reisezielen die Möglichkeit, den Benutzer zu dieser bereits gestalteten Seite in London, Großbritannien, weiterzuleiten. Und wir werden uns auch ein wenig damit befassen wie wir Variablen tatsächlich in unserem Prototyping verwenden können Variablen tatsächlich in unserem Prototyping verwenden Also egal, auf welche Option der Benutzer klickt, zumindest für die ersten vier hier, denn der kostenpflichtige Tarif von Infigma kann derzeit nur vier Modi haben, und wir werden die Modi als verschiedene Produkte verwenden Also machen wir es so auf derselben Seite oder wir duplizieren diese Seite Und auf dieser Seite machen wir es so, dass die Variablen die Arbeit für uns erledigen können, ohne dass wir jede Stadt dass einzeln angeben müssen. Nur um das zu untersuchen, wenn Sie diese Option haben möchten, wie würden Sie sie in Ihrem Prototyp einrichten? Und dann werden wir weitermachen und das Zimmer tatsächlich buchen. Sobald der Benutzer also zu der Seite geht, auf der er die Zieldetailseite sehen kann, kann er sie durchsuchen. Und dann werden sie von hier aus weitermachen und ein Zimmer buchen , von wo aus sie zur Buchungsbestätigungsseite weitergeleitet werden. Und dann haben wir wieder eine Kopie dieser Seite mit den eingegebenen Informationen und bestätigen dann die Buchung. Danach kommt eine Seite , auf der Sie Ihre Reise bestätigen oder bestätigen lassen können. Und für diese Seite werden wir ein bisschen Spaß mit Animationen haben und sehen, wie wir mithilfe von Animationen und Geschenken im Prototyp tatsächlich eine schöne bestätigte Buchungskarte mit etwas Konfetti im Hintergrund animieren können eine schöne bestätigte Buchungskarte mit etwas Konfetti im Animationen und Geschenken im Prototyp tatsächlich eine schöne bestätigte Buchungskarte mit etwas Konfetti im Hintergrund animieren Das ist also der Benutzerfluss, den wir verwenden werden. Sie können genau dasselbe für Mobilgeräte tun. Das überlasse ich dir als Übung. Es ist genau derselbe Prozess , dem wir folgen werden. Und bevor wir das tun, werden wir im nächsten Abschnitt noch einmal darauf zurückkommen und herausfinden, wie wir Figma AI verwenden können , um tatsächlich Prototypen für uns herzustellen 67. Prototypen mit KI erstellen: iGMA AI kann uns tatsächlich auch dabei helfen , Prototypen zusammenzustellen, und es wird Ihre Rahmen durchgehen und versuchen zu verstehen, wie man Verbindungen zwischen ihnen herstellt , und es ist noch lange nicht perfekt oder annähernd, aber es hilft bei einfacheren Projekten Wenn Sie also ein komplizierteres Projekt haben, funktioniert es vielleicht nicht einmal, aber Sie können es jederzeit versuchen, und wenn es dann nicht funktioniert, können Sie es jederzeit rückgängig machen oder auch die Verbindungen reparieren. Um darauf zuzugreifen, müssen Sie nur zu Ihrem Aktionspanel hier oder zum Aktions-Tab hier unten gehen , und dann sehen Sie, wie dieser Prototyp Und wenn Sie darauf klicken, werden Sie aufgefordert, einige Frames der obersten Ebene auszuwählen. Wir möchten also einige der Frames auswählen, indem wir die Umschalttaste gedrückt halten. Also werden wir hier alle unsere Frames auswählen und dann können wir Command Enter drücken oder einfach einen Prototyp erstellen. Es wird eine Sekunde dauern, und es wird anfangen, alle Verbindungen hier zu verarbeiten Und wie Sie sehen können, hat es einen ziemlich guten Job gemacht. Es hat bereits viele Verbindungen zwischen verschiedenen Seiten hergestellt. Es weiß also, dass, wenn Sie auf Anmelden klicken, es zur Überprüfung auf diese Seite weitergeleitet wird. Entspricht der Anmeldung mit der Telefonnummer. Und dann klicken Sie von hier aus auf Weiter, es sollte zu Destination Discovery gehen. Wenn Sie dann speziell auf diese beiden Karten klicken, werden Sie hier zur Detailseite des Reiseziels weitergeleitet. Und wir sehen, dass selbst das Bbton weiß, wie man den Benutzer zurückschickt oder welches die B-Taste ist Und wenn Sie hier auf eine der Schaltflächen klicken, gelangen wir jetzt zur Buchungsseite, obwohl das nicht korrekt ist Was wir tun wollen, ist, wenn sie auf Verfügbarkeit anzeigen klicken, wir wollen nicht, dass der Benutzer dadurch hierher gelangt. Wir möchten, dass der Benutzer einfach nach unten gescrollt wird, zum Bereich Unterkunft oder wahrscheinlich zum Prototyp, wir wollen nicht, dass dort etwas passiert Wir wollen auch keine Räume finden, um sie dorthin zu bringen. Das soll ihnen nur helfen, hier Zimmer zu finden. also einfach auf eines davon klicken sollten sie tatsächlich auf diese Seite gelangen. Wir sehen, dass wir hier unseren Zurück-Button haben. Und so können wir tatsächlich eine Vorschau davon anzeigen indem wir es ausführen und sehen, wie das aussieht. Wenn ich also einfach auf Anmelden klicke, gehe ich zur Bestätigung und fahre fort. Ich kann mir das hier aussuchen, geht hier hin. Fantastisch. Aber auch hier haben wir diese Verbindungen , die falsch sind, also wollen wir nicht, dass sie dorthin gelangen. Wir wollen, dass der Bücherraum uns tatsächlich dorthin bringt. Und während Sie sich im Vorschaumodus befinden, ändert sich mein Frame im Hintergrund, nur um mir genau zu zeigen, auf welchem Frame ich mich gerade befinde. Und ich kann auch die Zurück-Tasten testen und es funktioniert. Es gibt keine Animation oder ähnliches, es ist also wie ein einfacher Prototyp , den es zusammenstellt, aber es funktioniert. Und von hier aus weiß es nicht, wohin es gehen soll , weil es danach keine andere Seite mehr gibt. Hier können Sie diese Verbindungen tatsächlich beibehalten, oder Sie können auf die einzelnen Verbindungen klicken und diese Verbindungen entfernen, indem Sie hier einfach auf Minus klicken. Wenn Sie diese also nicht wollen und diese falsch sind, können wir sie entweder ändern oder sie einfach hier entfernen und dann sagen, behalten Sie es. Und wenn Sie es behalten, werden all diese Verbindungen, die FIM AI hergestellt hat, beibehalten und Sie können sie für Ihre Prototypen verwenden Natürlich werde ich das nicht tun , weil wir uns auch ansehen werden, wie man diese Frames manuell wie man diese Frames manuell miteinander verbindet Denken Sie jedoch daran , dass Sie FGM-KI verwenden können , um Ihre Verbindungen zwischen den verschiedenen Seiten ziemlich schnell und ziemlich einfach Aber natürlich sind wir auch hier, um alles darüber zu lernen , wie man das selbst Und aus diesem Grund werden wir in der nächsten Vorlesung darauf zurückkommen , einige der Frames zu duplizieren und gemeinsam einen schönen Prototyp zu bauen 68. Seiten mit gefülltem Zustand: Für diese Seiten, wie bei unserer Anmeldebestätigung, möchten wir sie also duplizieren und den Status „Ausfüllen“ anzeigen. Und das ist immer eine gute Praxis, nur um zu zeigen, wie der Prototyp aussehen würde , wenn der Benutzer seine Informationen tatsächlich eingegeben hat und er realer aussieht. Also werde ich einige der Frames duplizieren hier einige der Frames duplizieren, die Texte enthalten, und ich verwende sie einfach und ziehe die Kopie. Und Sie können Ihrem Rahmen einfach einen anderen Namen geben Beispiel einen gefüllten Strich oder etwas Ähnliches, nur um zwischen den beiden zu unterscheiden. Und hier für unsere Eingaben, mir ist gerade aufgefallen, dass wir nur einen Platzhaltertyp haben Wir haben keinen Typ, bei dem der Text tatsächlich ausgefüllt wird Also wollen wir das beheben, indem wir eine andere Variante davon haben, die es uns ermöglicht, den Text im ausgefüllten Zustand zu haben. Also lass uns das schnell machen. Also werde ich diesen Komponenten-Frame einfach erweitern, indem ich dort die Befehlstaste gedrückt halte , unser Eingabefeld ein wenig aufzurufen. Und erstelle unten einfach eine weitere Variante. Und wir werden das Eigentum nennen. Wir werden hier auf diesen klicken. Schieben Sie es einfach ein bisschen nach unten. Es ist zu nah dran. Und wir nennen diese Eigenschaft eins, füllen und dann können wir diese auf falsch und diese auf wahr setzen. Und der einzige Unterschied besteht darin, dass wir für diesen Text hier Text 500 machen wollen. Es sieht also so aus, als wäre es ein gefüllter Text. Und dann können wir einfach hier runter gehen. Schreiben wir eine Beispiel-E-Mail wie max.do@gmail.com oder etwas Ähnliches, und dann können Sie auf das Feld klicken und den Status „Ausfüllen“ eingeben. Und das Gleiche gilt für das Passwort, ändern Sie es in gefüllt. Es sieht also so aus, als ob wir einige Informationen eingegeben haben. Und um dann eine Verbindung zwischen diesen beiden herzustellen, können Sie einfach doppelklicken. Erstellen Sie einen Prototyp. Wenn ein Benutzer auf eines dieser Felder klickt, er zu dieser Seite und es sieht so aus, als ob er die Informationen eingegeben hat. Und das können Sie tun, indem Sie entweder einfach Verbindungen zwischen den einzelnen Verbindungen ziehen Verbindungen zwischen den einzelnen Verbindungen oder Sie können die Umschalttaste gedrückt halten, sodass Sie beide auswählen können Wenn der Benutzer also auf eines oder klickt, können Sie mithilfe dieses kleinen Kreises eine Verbindung herstellen Wenn Sie also sehen, dass der Kreis erscheint, können Sie auf diese Weise Verbindungen hinzufügen. Sie möchten ihn also einfach in diesen Rahmen hier ziehen. Im Grunde genommen ist der Auslöser also standardmäßig beim Klicken. Wenn der Benutzer also auf diese Felder klickt, wird entweder oder er zur Seite mit dem Anmeldefeld weitergeleitet. Und ändern Sie diese Aktionen auch manuell. Sie können es in ein paar verschiedene Optionen ändern , die wir haben die wir untersuchen werden, und dann können Sie auch die Zielseite festlegen. Aber da wir die Verbindung manuell auf diese Seite gezogen und die Nudeln dort gezeichnet haben, sodass sie auf dem Bildschirm angezeigt werden, müssen wir das nicht mehr tun Und die Animation erfolgt sofort, aber Sie haben ein paar verschiedene Optionen Bei dieser Art von Seite können Sie entweder die Funktion „ Auflösen“ oder „ Sofortige Bearbeitung“ durchführen . Beides funktioniert. Für so etwas lasse ich es normalerweise auf Instant stehen. Wenn Sie den Prototyp jetzt einfach von der Anmeldeseite oder der Vorschau aus ausführen , durch Klicken auf eine beliebige Seite auswählen, können wir durch Klicken auf eine beliebige Seite auswählen, wo unser Prototyp beginnt Ich klicke also auf den Anmelderahmen, und wenn du hier auf die Play-Schaltfläche klickst, wird er angezeigt, oder du kannst ihn auch als Vorschau ansehen, was wir gerade in der vorherigen Lektion gemacht haben, aber die Präsentation öffnet sich in einem neuen Tab wie diesem hier auf die Play-Schaltfläche klickst, wird er angezeigt, oder du kannst ihn auch als Vorschau ansehen, was wir gerade in der vorherigen Lektion gemacht haben, aber die Präsentation öffnet sich in einem neuen Tab wie Und da haben wir es. Und wenn ich jetzt auf diese Felder klicke, sieht es so aus, als ob wir sie abgelegt haben. Unglaublich. Und jetzt, da wir diese Seite dupliziert haben, jede Verbindung, die die Seite bereits hatte, wie die Anmeldeschaltfläche, weiterhin und führt funktioniert jede Verbindung, die die Seite bereits hatte, wie die Anmeldeschaltfläche, weiterhin und führt uns zur nächsten Seite Diese Verbindungen stammen natürlich von dem Make-Prototyp, den wir in der letzten Vorlesung hatten Also machen wir weiter und belassen sie einfach dort, vielleicht entfernen wir diese hier, und Sie können Verbindungen entfernen , indem Sie sie einfach anklicken und dann auf Löschen klicken Also lassen wir vorerst alles stehen, was es sich bereits ausgedacht hat, und dann werden wir gemeinsam herausfinden , wie Sie das selbst tun können. Wenn du möchtest, kannst du vorerst deine Bestätigungsseite duplizieren , du kannst deine Buchungsseite duplizieren und ich habe einen ausgefüllten Status, was ich auch tun werde. Wenn Sie also den Prototyp durchgehen, sieht es so aus, als würden wir auch Informationen eingeben. Nehmen Sie sich dafür eine Sekunde Zeit, und dann werden wir in der nächsten Vorlesung kommen und den Rest unserer Verbindungen fortsetzen. 69. Animationen auflösen: Also hier, jetzt wollen wir die Verbindung zwischen den Buttons und der Bestätigungsseite herstellen die Verbindung zwischen den . Wenn Sie dies noch nicht getan haben, stellen Sie sicher, dass Sie eine Verbindung zwischen der Anmeldeschaltfläche herstellen und eine Verbindung zur Bestätigungsseite herstellen. Was ich bereits hier habe, und es wird auf „Navigiere zur Bestätigungsseite“ klicken und das sofort ohne Animation tun . Und von hier aus habe ich auch eine weitere Seite. also irgendwo auf dieses Feld hier oder auf eines dieser Felder im gesamten Frame klicken , können wir tatsächlich eine Verbindung zu diesem Feldstatus herstellen. Es sieht also so aus, als ob sie den Bestätigungscode eingegeben haben und dann auf Weiter geklickt haben, werden wir sie auf diese Seite weiterleiten. In Ihrem Prototyp können Sie jetzt auch Verbindungen über diese Schaltfläche „Weiter“ entfernen. Sie müssen also zuerst auf diese Felder klicken, Sie müssen also zuerst auf diese Felder klicken um sie auszufüllen und dann fortzufahren. Aber das liegt wirklich an dir. Du kannst das auf jeden Fall tun oder du kannst das überspringen. Das Schöne an Interaktionen ist, dass Sie, wenn Sie schnell Änderungen an Interaktionen vornehmen möchten , die zu derselben Seite führen , hier auf diese Schaltfläche klicken können, wodurch alle passenden Interaktionen ausgewählt werden Moment sind das diese beiden Schaltflächen. Also plötzlich, sagen wir, möchte ich für diese Verbindung tatsächlich ein Dissolve machen, nur um zu sehen, wie es aussieht. Ich kann das von hier aus machen, und die Animation wird sich jetzt auflösen. Es sieht also so aus, als ob diese Seite irgendwie in diese Seite übergeht, was nett ist Und Sie können verschiedene Animationskurven wählen, also die Option „Ease-In“ wählen, und Sie können sich hier eine Vorschau um zu sehen, wie das aussieht, oder Ease out“, „Ease in“ und „out Nun, es ist ein bisschen schwer zu erkennen, wie das aussieht, also werde ich die Dauer erhöhen, nur um es Ihnen zu zeigen. Sie sehen also, dass sie alle eine etwas andere Animationskurve haben . Und Sie können jederzeit eine benutzerdefinierte erstellen, wenn Sie detaillierter darauf eingehen möchten , wie sie aussieht. Sie haben auch einige Voreinstellungen wie diese, die sich hauptsächlich für Bewegungsanimationen eignen, und wir werden sie gleich untersuchen . Aber vorher wählen wir einfach eine einfache Entspannungsoption und 300 Millisekunden. So lange dauert es, bis die Animation läuft Nur um eine Vorschau davon zu sehen, werde ich zu meinen Mockups wechseln Wenn ich jetzt darauf klicke und du dann weitermachst, gibt es ein nettes kleines Überblassen, das ist etwas anderes, als wenn gibt es ein nettes kleines Überblassen, du zum Beispiel von dieser Seite zu dieser Seite wechselst Okay, stellen Sie sicher, dass Sie diese Verbindung haben, damit Ihre Schaltfläche Weiter auch zu unserer Destination Discovery-Seite führt Und auf dieser Seite können wir tatsächlich ein paar verschiedene Dinge tun Wir können entweder wählen, ob wir in unserem Prototyp dem Benutzer, der ein Ziel eingibt, oder von und nach zeigen wollen , oder wir können ihn einfach auf London UK klicken lassen. Und dann können wir von hier aus einige Daten auswählen , für die der Benutzer die Reise buchen wird. Also werden wir diesen Bildschirm in nur einer Sekunde duplizieren , wenn wir zu dieser Verbindung kommen. Es sieht also so aus, als ob der Benutzer einige Daten ausgewählt hat, und von dort aus werden wir die Preisaktualisierung sehen. Und sobald es aktualisiert ist, können wir sie dann auf eine Buchungsseite schicken, die Sinn macht . Das entspricht fünf Nächten, zwei Schlafplätzen und so weiter. Aber bevor wir das tun, kehren wir Seite zur Entdeckung unserer Reiseziele zurück. Hier haben wir auch eine nach Filtern sortierte Schaltfläche, die wir in unserem Prototyp tatsächlich zum Leben erwecken wollen , da wir die Rahmen dafür bereits haben Wenn Sie die Rahmen nicht haben, nehmen Sie sich eine Sekunde Zeit und entwerfen Sie sie. Sie möchten, dass es sich um einzelne Rahmen handelt und nicht nur um Gruppen. Und im Moment habe ich automatische Layout-Frames für beide, was auch in Ordnung ist. Sie können entweder ein automatisches Layout oder einen tatsächlichen Rahmen haben. Kehren wir zum nächsten Abschnitt zurück, um zu erfahren, wie Sie diese als Overlays einrichten Wir müssen also keinen weiteren Bildschirm entwerfen , der zeigt, wie diese Filter zum Rahmen hinzugefügt werden 70. Overlay-Verbindungen: Vorlesung lernen wir eine neue Verbindung kennen, die wir tatsächlich herstellen können wird als Overlay-Verbindung bezeichnet Eine Overlay-Verbindung ermöglicht es Ihnen im Wesentlichen, einen anderen Frame innerhalb Ihres Frames zu öffnen einen anderen Frame innerhalb Ihres , in dem Sie sich bereits befinden Im Prototypmodus können Sie also Dinge wie Dropdowns, Modelle und diese Arten von Frames innerhalb Ihres aktuellen Frames öffnen , Modelle und diese Arten von Frames innerhalb Ihres aktuellen Frames Das macht es einfacher sodass Sie keine Frames duplizieren müssen und eines haben müssen, bei dem das Modell geöffnet oder geschlossen ist, und es ist wirklich einfach, diese Verbindung herzustellen. Sagen wir, wir wollen es für die Filterschaltfläche hier machen. Wir klicken einfach, bis wir die Schaltfläche des Filters haben. Wenn der Benutzer also auf die Schaltfläche des Filters klickt, möchten wir eine Verbindung zu unserer Filter-Dropdown-Liste hierher ziehen und loslassen Und dann wird unser Auslöser beim Klicken sein. Also, wenn der Benutzer darauf klickt und es eine Reihe verschiedener Auslöser gibt , in die Sie dies ändern können, aber das werden wir vorerst nicht benötigen. Wir wollen, dass sie das tun, wenn sie auf den Filter klicken. Jetzt wollen wir die Aktion anstelle von Navigiere zu, was wir bisher gemacht haben, wodurch der Benutzer von einer Seite zur anderen weitergeleitet wird. Wir wollen das tatsächlich ändern und „Overlay öffnen“ auswählen. Und bei einem offenen Overlay wird dieser Frame über diesem geöffnet Sie sehen also, dass sich das Overlay derzeit in der Filter-Dropdown-Liste befindet, was wir ausgewählt Die Position ist standardmäßig zentriert, was bedeutet, dass sie sich in der Mitte der Seite befindet, was wir nicht Und wir haben hier eine Reihe verschiedener Optionen, also oben links, oben in der Mitte usw., oder wir können manuell auswählen, wo der gefilterte Drop-down-Frame in unserem ursprünglichen Frame geöffnet werden soll Wenn du darauf klickst, siehst du hier, wo das Overlay geöffnet wird, und du kannst es tatsächlich verschieben Sie können es also direkt unter die Schaltfläche Ihres Filters verschieben mit vielleicht etwas Abstand zwischen den zehn Pixeln Und jetzt wird es genau hier geöffnet , zusätzlich zu allem anderen Jetzt haben wir ein paar verschiedene Optionen. Wir können uns dafür entscheiden, einen Hintergrund hinzuzufügen. Und wenn Sie einen Hintergrund wählen, dann im Prototyp alles andere, was nicht dieser Filter ist. Alles andere hier haben wir also einen Hintergrund, 25% transparent ist, was zu 25% Pakt mit schwarzer Füllung ist, aber das wollen wir nicht. Wir wollen es nur, damit es keinen Hintergrund gibt. Und dann können wir wählen, ob der Benutzer auf eine andere Stelle außerhalb des Rahmens dieses Filters klickt . Dadurch wird das Overlay geschlossen Und ja, das wollen wir, weil das Sinn macht und die meisten Apps eine ähnliche Interaktion haben Und dann können wir wählen, wie es geöffnet wird. Dann können wir uns auflösen. Wir können einziehen. Und wenn du dich für einen Einzug entscheidest, dann kommt der Filter von verschiedenen Seiten. So können wir den Filterrahmen vom unteren Bildschirmrand oder vom rechten Bildschirmrand nach oben zeigen lassen vom unteren Bildschirmrand oder vom rechten Bildschirmrand nach oben . Das ist nicht sehr verbreitet, und wir werden das in einer Sekunde untersuchen, um zu sehen, wie das aussehen wird. Für den Moment behalte ich es bei Move In, aber Sie werden sehen, dass das nicht wirklich die Standardbewegungsart für diesen Fall ist. Move In eignet sich hervorragend für Dinge wie Benachrichtigungen oder modale Boxen und so weiter. Und dann werde ich weitermachen und einfach zeigen, wie das aussieht. Wenn Sie jetzt zurückgehen und auf diese Filter klicken, wird sie geöffnet. Es bewegt sich tatsächlich von oben nach unten oder von unten nach oben. Und wenn du siehst, wie es aussieht, wird es verschwinden. Aber auch hier handelt es sich nicht um eine übliche Interaktion oder um keine gewöhnliche Animation, die Sie sehen werden. Du kannst es entweder sofort machen oder einfach auflösen. Wir machen einfach Instant, um zu sehen, wie das aussieht, und es sieht viel natürlicher aus. Moment kannst du innerhalb des Filters mit nichts wirklich interagieren, nicht einmal mit den angewendeten Filtern oder allen Schaltflächen löschen, aber du könntest das komplett ändern , sodass du es haben kannst. Wenn du also hier auf eine bestimmte Reisedauer oder etwas anderes klickst, werden sich die Dinge ändern. Wir werden es also nicht zu kompliziert machen , denn für, du weißt schon, Dropdown wie dieses, willst du nicht, dass es im Prototyp so kompliziert ist. Aber eines werden wir tun. Wir werden es so einrichten, dass wir auch das Overlay schließen, wenn sie auf angewendete Filter klicken wir auch das Overlay schließen Wenn Sie nun auf diese Schaltfläche klicken, um Filter anzuwenden, wenn Sie versuchen, eine Verbindung zu ziehen, werden Sie feststellen, dass hier zwei verschiedene Verbindungstypen angezeigt werden, und wir können schnell einen von ihnen auswählen Wir können hier B wählen, was gut für Navigationsverbindungen ist oder wir können Closed Overlay wählen, was wir wollen Was wir jetzt gesagt haben , ist, dass, wenn sie auf Angewendete Filter klicken , dieses Overlay geschlossen Wenn ich dieses lösche, kann ich es auch erstellen, indem ich einfach hier auf die rechte Seite gehe und Plus auf Klickaktion mache und das ändere, um das Overlay zu schließen Da hast du's. Wenn ich jetzt also auf nappliedFlters klicke, wird auch das Overlay geschlossen, und wenn ich irgendwo außerhalb klicke, und wenn ich irgendwo außerhalb klicke wird auch das Die Lücke ist hier ein bisschen zu groß. Wenn Sie diese Änderungen also schnell vornehmen möchten, klicken Sie einfach auf die Interaktion, die Sie bereits erstellt haben, und dann können Sie sie einfach ein wenig nach oben verschieben, und Sie können auch die Pfeiltasten verwenden , um Dinge leicht nach unten oder oben zu bewegen. Und ich denke, dieser Abstand ist hier sinnvoller. Sie können es also auch so einrichten, dass die Overlays ebenfalls ausgetauscht werden Also nur um dir zu zeigen, für die Sortierung werde ich eine weitere erstellen, indem ich Alton gedrückt halte, um sie zu duplizieren Und dann lasse ich diesen fett formatieren , also ist er ausgewählt, und dann werde ich das Häkchen auch hier drin haben und es dann von hier entfernen Und für diesen werde ich die Fettschrift entfernen. Es sieht also so aus, als ob wir die Popularität jetzt gewählt haben. Dann wollen wir in unserem Prototyp eine Interaktion zu dieser Seite erstellen und klicken statt auf Navigate Two, wir werden das Overlay austauschen Also wird das Overlay stattdessen durch dieses hier ersetzt, und zwar sofort Lassen Sie uns nun eine weitere Overlay-Verbindung zwischen Sortiert nach herstellen , die standardmäßig auf Relevanz gesetzt ist. Ziehen wir sie hierher, Ziehen wir sie hierher, und dann machen wir OnClick statt Navigate two Und anstatt es wieder zu zentrieren, wollen wir manuell auswählen, wo Schreiben Sie also einfach unter die Sortierung mit zwei Pixeln darunter, wir lassen es auf Instant und schließen dann, wenn Sie nach draußen klicken. Und jetzt wollen wir sehen , wie das aussehen wird. Sie werden darauf klicken. Ich werde nach Relevanz öffnen. Und wenn ich dann nach Beliebtheit klicke, wird das Overlay tatsächlich wieder auf Beliebtheit Aber ich kann nicht mehr wirklich zur Relevanz zurückkehren, es sei denn, wir gehen hierher und stellen eine Verbindung zwischen diesen beiden her und sagen erneut Swap-Overlay Wenn ich also auf Relevanz klicke, wird das Overlay wieder auf Relevanz und dann auf Beliebtheit umgestellt Siehst du, du kannst hier tatsächlich wählen , welche Sortierung angezeigt wird. Und jetzt denkst du, okay, das ist cool, aber dieser Text hier, wo es heißt sortiert nach Relevanz, ändert sich nicht. Können wir es also tatsächlich so machen, dass Figma versteht, wenn wir solche Interaktionen machen , und die Sortierung nach Beliebtheit ändern Können wir hier Popularität zeigen? Weil das ziemlich cool wäre. An dieser Stelle kommen Variablen ins Spiel, wenn wir mit unserem Prototyp arbeiten. Warum kehren wir also nicht zur nächsten Vorlesung zurück , um zu lernen, wie man Variablen verwendet und Variablen setzt , damit wir unseren Prototyp noch dynamischer gestalten können. 71. Variablen in Prototypen: Vorlesung, wir werden hier eine Variable erstellen , die den Text in dieser Schaltfläche darstellt, damit er zuerst relevant ist. Und wenn sie dann auf dieses Drop-down-Menü klicken und es in, sagen wir, Beliebtheit ändern , wollen wir, dass der Text oder die Variable an Beliebtheit gewinnt. Um das zu tun, werden wir hier eine neue Variable erstellen. Also gehen wir in unseren Designmodus und klicken auf lokale Variablen. Und wenn Sie keine lokalen Variablen sehen, stellen Sie sicher, dass Sie nichts ausgewählt haben. Klicken Sie einfach auf eine beliebige Stelle draußen, bis Sie die allgemeinen Seiteneinstellungen sehen, und öffnen Sie dann Variablen, und wir werden eine neue Sammlung erstellen , ich nenne diese einfach allgemein. Für so etwas können wir diese Variablen einfach in einer allgemeinen Sammlung zusammenfassen. Es ist nicht wirklich wichtig, wie du es nennst. Wir werden eine Variable erstellen und die Zeichenfolge verwenden. Und für diesen brauchst du keine verschiedenen Modi. Selbst in der kostenlosen Version von Figma können Sie dies also auch in Ihrem Prototyp einrichten Wir nennen das eine Sortierung nach. Du kannst es benennen, wie du willst. Und für den Wert wollen wir ihn auf Relevanz ändern, das ist die ursprüngliche Sortierung nach Einstellung. Die einzige Herausforderung besteht darin, dass wir nur einen Text in unseren Schaltflächen haben. Wir können nicht zulassen, dass ein Teil eines Textes an eine Variable gebunden wird. Hier wollen wir idealerweise, dass Sortiert nach ein von der Relevanz getrennter Text ist. Wir brauchen also, dass es sich bei dieser Relevanz um eine eigene Textzeile handelt und nicht zusammen mit der Relevanz nach. Um Ihnen zu zeigen, wie das funktioniert, werde ich etwas tun, was ich in Ihrem Projekt generell nicht empfehle, aber nur für diesen Fall werde ich mit der rechten Maustaste klicken und die Instanz dieser Schaltfläche trennen Jetzt folgt diese Schaltfläche nicht mehr der Button-Instanz. Sie können sehen, dass sie jetzt einen blauen Rand hat , im Gegensatz zu dieser Filterschaltfläche. Und hier im Ebenenbedienfeld ist es jetzt nur noch AutoLayouFrame ohne Verbindung zur Schaltflächenkomponente, die Schaltflächenkomponente Wenn Sie also Änderungen an der Schaltflächenkomponente vornehmen, wirkt sich das nicht auf diese Schaltfläche aus, aber dadurch können wir diese Schaltfläche auch nach unseren Wünschen anpassen In einem Fall wie diesem möchte ich den Text aus Gründen der Relevanz herausschneiden und ihn duplizieren, indem ich Befehl D drücke. Jetzt ist der Abstand für diese beiden etwas zu groß, also werde ich Shift A gedrückt halten , während ich beide ausgewählt habe. Und statt zehn Pixeln können wir vielleicht einfach vier Pixel dazwischen machen. Und für den zweiten Text möchte ich jetzt eine Variable auf diesen Text anwenden , sodass dieser Text den Text oder den Zeichenkettenwert aus der Variablentabelle übernimmt , die wir haben. Und das können Sie tun, indem Sie hier die Variable neben dem Text anwenden und dann Sortieren nach auswählen. Und momentan gibt es aus irgendeinem Grund Denkweisen Zeichenketten oder Werte, und das liegt daran, dass, als ich Relevanz hier geschrieben habe , es nicht gespeichert wurde Aber nur um Ihnen zu zeigen, wie das funktioniert, wenn Sie es durch Relevanz ersetzen und die Eingabetaste drücken, los geht's Jetzt wurde es zu Relevanz geändert. Jetzt haben wir diesen Text an diese Variable gebunden, was auch immer wir ihn ändern, er wird sich hier automatisch ändern. Was wir nun tun wollen, ist, dass wir, wenn der Benutzer auf Beliebtheit klickt, der Benutzer auf Beliebtheit klickt, auch die Variablensortierung auf Beliebtheit setzen wollen. Und dann wollen wir hier, umgekehrt, die Sortierung nach Variablen auf Relevanz setzen. Also lass uns das versuchen. Lass uns auf Popularität klicken. Und wir sehen, dass wir bereits eine Interaktion haben, bei der beim Klicken das Overlay gegen dieses Drop-down-Menü ausgetauscht wird, für das die Beliebtheit ausgewählt ist Sie können aber auch eine zusätzliche Interaktion haben, wenn Sie hier und auf eine neue Aktion klicken hier und auf eine neue Aktion Also bei dieser Interaktion beim Klicken können wir sie haben, also machen wir auch andere Dinge In diesem Fall wollen wir also auch eine Variable setzen. Und in unserer Set-Variablen wollen wir den Text , den wir gerade erstellt haben, nach sortiert auswählen und ihn auf Popularität umstellen, was nur eine Zeichenkettenvariable ist. Also werden wir auf String-Literal klicken und diese Änderung in der Beliebtheitsskala vornehmen Die Aktion besteht nun darin, dass wir die Variable nach Beliebtheit sortieren lassen, wenn sie auf Beliebtheit klicken , und das können wir hier sehen Und wir können mehr Interaktion hinzufügen. Mit einem Klick passieren also mehr Dinge. Von hier aus müssen wir nichts tun. Das ist alles was wir tun müssen. Und dann werden wir genau das Gleiche tun, aber wenn sie auf Relevanz klicken. Also klicken wir hier auf die Interaktion, wählen hier Plus, legen die Variable fest, suchen die Variable, sortieren nach, oder Sie können schnell danach suchen, sortieren nach und drücken die Eingabetaste und schreiben dann relevant. Drücken Sie also die Eingabetaste und das war's. Lassen Sie uns jetzt eine Vorschau davon anzeigen. Wenn wir hier zu unseren Mockups gehen, können wir auf Sortieren nach klicken und es nach Beliebtheit ändern Also hat es sich hier jetzt auf Popularität geändert. Du kannst nach draußen klicken, zu einer anderen Seite navigieren, zurückkommen und es ist immer noch nach Beliebtheit sortiert. Dann können wir hier rübergehen und es dann auf Relevanz ändern. Ein Problem besteht jedoch darin, dass wir, wenn wir dies schließen und erneut öffnen, automatisch das Fenster öffnen das Relevanz ausgewählt ist. Es ist also nicht so dynamisch, wie wir es uns wünschen, also gibt es eine Möglichkeit, dies zum Laufen zu bringen, wenn Sie Ihr Sortier-Dropdown tatsächlich in eine Komponente umwandeln. Deshalb werde ich es in der nächsten Vorlesung schnell erklären. 72. Variablen in Komponenten: gab ein kleines Problem mit unserem Prototyp, bei dem wir das nach Beliebtheit sortierte Fenster öffnen und es dann schließen. Hier steht Beliebtheit, aber wir öffnen es wieder und es geht um Relevanz. Also warum passiert das? Das liegt daran, dass wir gerade das Overlay mit der ausgewählten Relevanz öffnen Wie machen wir diese Dynamik also so, dass auch dieser Teil funktioniert Nun, dafür können wir Komponenten verwenden. Um das zu tun, werde ich dieses Dropdown mit Old Command K in eine Komponente umwandeln mit Old Command K in eine Komponente , und jetzt ist es eine Komponente. Wir werden die Version mit der Beliebtheit entfernen , die vorerst ausgewählt wurde, und dann werden wir verschiedene Varianten davon erstellen , wobei all die verschiedenen Elemente ausgewählt sind. Lassen Sie uns zurück in den Designmodus wechseln. Eigenschaftsvariante, und wir nennen sie ausgewählt. Nun, dieser Teil ist wirklich wichtig. Sie möchten genau so buchstabieren, wie Sie die Variable schreiben. In unserer Variablen haben wir also auch Relevanz, genau wie es hier mit R geschrieben ist . Die Schreibweise ist wirklich wichtig Jetzt werden wir eine weitere Variante hinzufügen. Ziehen wir das einfach hierher. Und jetzt nennen wir das hier. Sie haben es erraten Popularität. Nehmen Sie sich auch hier Zeit und stellen Sie sicher, dass Ihre Schreibweise korrekt ist In diesem Fall werden wir Beliebtheit auswählen und das Häkchen drüber setzen und den Fettdruck entfernen Wir werden noch einen machen. Dieser wird preislich niedrig und zu hoch sein. Und ich werde den Text von hier buchstäblich kopieren und ihn als ausgewählt festlegen. Wir werden es fett formatieren, das Häkchen hierher bringen und dieses löschen Und wir werden noch zwei machen, eins, zwei. Das mit dem Preis von hoch bis niedrig fett gedruckt, Bewertungen, und ich werde in diesem Bild die Fettschrift entfernen, das Häkchen entfernen, es hierher bringen Schneide das Häkchen ab und bring es her . Jetzt haben wir für jede gewählte Variante eine Variante. Wir müssen nur die anderen umbenennen, also stellen Sie sicher, dass Sie diese von hoch nach niedrig umbenennen. Drücken Sie die Eingabetaste und dieser Wert zeigt die Bewertungen genau so an, wie sie hier eingegeben wurden. Drücken Sie die Eingabetaste und da haben wir es. Jetzt ist unsere Verbindung verloren, weil Sie keine direkte Overlay-Verbindung zu den Komponenten herstellen Sie benötigen eine Instanz davon. Also kopieren wir hier eine Instanz für unsere Sortierung per Dropdown. Und was Sie jetzt tun möchten, ist stattdessen eine Verbindung zu dieser herzustellen. Aber bevor wir das tun, können Sie innerhalb Ihrer Komponenten auch Konnektivität herstellen. Prototypen können auch in Ihre Komponenten eingebaut werden. Hier haben wir zum Beispiel die Beliebtheit ermittelt, indem wir auf Beliebtheit klicken . Wir sehen, dass wir Variablen nach Beliebtheit sortiert haben, aber wir wollen das auch ändern und Beliebtheit auswählen. Und was das bewirken wird, ist, dass es sich zwischen den Varianten ändern wird. Deshalb bitten wir Figma, auch das Overlay an Beliebtheit anzupassen Und jetzt müssen wir das für all die verschiedenen tun für all die verschiedenen Also überlasse ich dir das als Aufgabe. Und vorerst werde ich mich nur um die Beliebtheit und Relevanz kümmern. Jetzt machen wir das aus Gründen der Relevanz und setzen auch Variable Sortieren nach auf Relevanz. Und hier für diesen, also jetzt haben wir die Popularität und die Relevanz funktioniert. Jetzt wollen wir wenn der Benutzer auf Sortiert nach klickt, das Overlay hier öffnen Für die Option Sortiert nach dem Klicken wollen wir also, dass es dieses Overlay öffnet, das die Instanz dieses Komponenten-Dropdowns ist Wir möchten, dass es manuell ist und wählen dann direkt darunter, und alles andere lassen wir so wie es ist und alles andere lassen wir so wie Wenn Sie jetzt einfach den Prototyp schließen, öffnen Sie diese Seite erneut, damit wir alles zurücksetzen können. Denn jedes Mal, wenn Sie Ihren Prototyp ausführen, setzen Sie Ihre Jetzt können wir die Beliebtheit festlegen. Es hat sich geändert, aber wir haben immer noch das Problem. Wie du siehst, wenn ich das in Popularität ändere, wird es sich auch in Popularität ändern. Es bleibt bei Beliebtheit, und wenn ich es dann in Relevanz ändere, wird es in Relevanz geändert, und es bleibt relevant. Und das kannst du auch für deine anderen tun. Und rate mal was? Wenn Sie es auf Beliebtheit ändern, was nicht die Standardeinstellung ist, gehen Sie hierher und kommen Sie zurück. Es erfreut sich immer noch großer Beliebtheit. Mal sehen, was hier hinter den Kulissen passiert. Was passiert ist, dass Sie diese Instanz öffnen und Figma sich daran erinnert, wann die Komponente das letzte Mal geschlossen wurde Denken Sie also daran, dass Sie beim letzten Öffnen dieser Komponente beliebt waren Aus diesem Grund wird es mit der ausgewählten Variante geöffnet. Wenn Sie nun in den Prototypmodus wechseln, wenn Sie zur Interaktion wechseln, gibt es hier diese Statusverwaltung. Sie können den Status der Komponente tatsächlich zurücksetzen. Jedes Mal, wenn Sie auf das Overlay klicken, um es zu öffnen, wird der Komponentenstatus zurückgesetzt Wenn Sie das jetzt tun, wenn Sie es öffnen, ist es wieder relevant Technisch gesehen ist das hier also nicht wirklich an die Variablen gebunden, aber wir können etwas anderes tun, um es tatsächlich viel intelligenter zu machen und es an die Variablen zu binden , indem wir in den Entwurfsmodus gehen und auswählen, welche hier ausgewählt wird. Wählen Sie eine bestimmte aus oder wir können die Variable mit sort by anwenden. Also, welche Variable wir auch immer ausgewählt haben, sie wird sich darauf basierend ändern. Also nur um Ihnen hier ganz schnell zu zeigen, wenn ich den Wert in Beliebtheit ändere, haben wir hier plötzlich Popularität ausgewählt. Wenn ich Preis, niedrig bis hoch, mit exakt derselben Schreibweise auswähle , wird dieser ausgewählt. Standardmäßig ist es also Relevanz. Wenn Sie da einen Tippfehler haben oder etwas Zufälliges eingeben, wird standardmäßig nur der erste ausgewählt, aber wir wollen es der Relevanz überlassen, aber Sie möchten trotzdem sicherstellen, dass Sie den Status nicht zurücksetzen, denn egal was passiert, das wird hier Status nicht zurücksetzen, denn egal was passiert, immer auf den ersten zurückgesetzt Jetzt ist dieses Dropdown also völlig intelligent und an unsere Variablen gebunden 73. Hover-Interaktion: In unserem Prototyp haben wir die Interaktion beim Klicken verwendet, sodass der Auslöser immer beim Klicken ist, was bedeutet, dass der Benutzer auf was bedeutet, dass der Benutzer eine Schaltfläche oder auf eine bestimmte Sache klickt und etwas passiert Es gibt noch andere Auslöser , die wir tatsächlich verwenden können. Eine davon, die ich jetzt mit Ihnen einrichten möchte , ist die Hover-Interaktion Sie also mit der Maus über eine Schaltfläche fahren, normalerweise auf einer Website, erhalten Sie Feedback, sodass Sie sehen können , dass Sie den Mauszeiger über etwas sehen können , dass Sie den Mauszeiger über Selbst wenn ich hier ein Figma bin und den Mauszeiger über einen bestimmten Tab halte, kannst du sehen, dass der Tab in einer anderen Farbe hervorgehoben ist Sie können also sehen, dass Sie mit der Maus darüber fahren und kurz davor sind zu klicken und es ist in einer Sie können hier also dasselbe für Ihren Button tun. Ich möchte zum Design-Panel gehen, eine neue Variante einrichten und diese Eigenschaft Hover nennen Standardmäßig werde ich es auf False setzen. Und dann werde ich weitermachen und das ein wenig verschieben, damit wir Platz haben. Wir werden all die verschiedenen Schaltflächen, die wir haben, duplizieren , sodass wir für alle eine Hover-Interaktion erstellen. Und wir werden „ Hover Here“ in „True“ ändern. Jetzt haben wir also eine neue Hover-Eigenschaft mit false und true. Diese werden falsch sein, also werden sie nicht in der Schwebebahn angezeigt, und bei diesen wird der Mauszeiger angezeigt Und in der Regel möchten wir eine Farbe festlegen , die etwas anders, dunkler oder heller ist Für diesen werden wir also eine etwas dunklere Farbe wählen, vielleicht die Primärfarbe 800 oder tatsächlich, die ist etwas zu dunkel, vielleicht die Primärfarbe 600. Und dann wollen wir für unsere weißen Knöpfe hier vielleicht eine graue Farbe wählen. Also nur etwas dunkler. Und auch für den Strich wollen wir einen grauen Strich machen, also werde ich den Strich einfach so ändern, dass er grauer wird. Das werden also die Hover-Interaktionen sein. Und jetzt müssen wir nur noch die Interaktion erstellen , indem wir zum Prototyp-Panel gehen und eine Verbindung zwischen dieser Schaltfläche und dieser hier Wechseln Sie zu Hover und wir wollen eine schöne Animation zum Zusammenfügen auswählen Und statt Enclck wollen wir Wall Hovering machen. Wenn der Benutzer mit der Maus über die Schaltfläche fährt, wechselt er zu diesem hier Wenn er den Mauszeiger nicht mehr bewegt, wechselt er automatisch wieder ich genauer darüber nachdenke, ist das vielleicht ein bisschen zu geringfügiger Unterschied, Wenn ich genauer darüber nachdenke, ist das vielleicht ein bisschen zu geringfügiger Unterschied, also werde ich es vielleicht auf Primär 700 setzen . Da haben wir's. Und jetzt machen wir genau dasselbe, aber zwischen den verschiedenen Tasten. Und Figma merkt sich die letzten Einstellungen, die Sie bei Ihrer Interaktion vorgenommen Also mit der Ausnahme , dass wir das auf Wale umstellen, das Gleiche zwischen diesen beiden, während sie schweben, und schließlich diese, während sie schweben. Und jetzt haben unsere Schaltflächen im gesamten Projekt die Möglichkeit, mit dem Mauszeiger zu interagieren, und das gilt überall für Wenn Sie sich an diesen hier erinnern, trennen wir die Instanz für diesen Deshalb haben Sie für diesen keine Interaktion. Aber wenn Sie irgendwo in Ihrem Projekt hingehen , wo Sie Ihre Schaltflächen verwenden, gibt es jetzt eine Hubbard-Interaktion Es ist Zeit, unsere Verbindungen langsam herzustellen. Wir haben also ein wenig an der Seite „ Zielerkennung festlegen“ gearbeitet und dann an unserer Seite mit den Zieldetails. Kommen wir in der nächsten Vorlesung zurück, um mehr Interaktionen auf unserer Zieldetailseite zu erstellen und unseren Prototyp langsam fertigzustellen 74. Scroll zur Interaktion: Seite mit den Zieldetails, wir haben bereits eine Verbindung für Ziele von B nach A hergestellt. Falls du noch keine von FIC MI erstellte Interaktion hast, kannst du jederzeit eine neue Interaktion hinzufügen. Wenn du auf W klickst, wählst du Action Back. Action Back schickt den Benutzer im Prototyp genau dorthin zurück, wo er hergekommen ist den Benutzer im Prototyp . Wenn sie also von dieser Seite kommen und auf und auf die Ziel-Detailseite klicken , geht es zurück zu dieser Seite, kam von einer anderen Seite im Prototyp, es wird genau zu dieser Seite zurückkehren. Das haben wir also bereits erstellt. Für diese Schaltfläche hier, Verfügbarkeit anzeigen, möchten wir sie so gestalten, dass der Benutzer beim Klicken nach unten zum Bereich für die Unterkunft scrollt , da der Benutzer dort die letzte Aktion ausführt, nämlich Ihr Zimmer auszuwählen und dann zu buchen So können wir hier eine Interaktion erstellen. Wir werden beim Klicken auf Scrollen zwei auswählen, und diese Abschnitte sind bereits erstellt. Wir können den Offset hier in der Bildlaufleiste ändern, was wir uns gleich ansehen werden, und dann können wir wählen, ob es sich um eine Sofortbewegung oder eine Animation handelt. Ich finde, animiert sieht besser aus. Wenn ich jetzt hier auf Verfügbarkeit anzeigen klicke, wird der Benutzer zur Unterkunft gescrollt, was cool aussieht Jetzt, oben hier, könnten wir etwas mehr Abstand gebrauchen , damit es hier wie Sommer ist Und dafür können wir diesen Offset verwenden. Wenn wir einen negativen Offset einstellen, wird der Benutzer leicht nach oben gescrollt Wenn wir das jetzt noch einmal machen, haben wir hier oben den leichten Abstand von 20 Pixeln, was jetzt viel schöner ist So können Sie Scroll-Two-Interaktionen erstellen. 75. Produktvariablen erstellen: Ich wollte, dass wir verschiedene Produkte mithilfe von Modi erstellen , sodass unsere Zieldetailseite dynamisch ist. Aber ich dachte, es wäre besser, tatsächlich einen dynamischen Buchungsbildschirm oder eine Buchungsseite zu erstellen einen dynamischen Buchungsbildschirm oder eine Buchungsseite , die sich je nachdem, welches Zimmer Sie tatsächlich ausgewählt haben, ändert . Und um das zu tun, verwenden wir zwei Eigenschaften für unsere Variablen. Wir werden eine für den ausgewählten Raum haben. Also schreiben wir, welches Zimmer wir ausgewählt haben oder welche Art von Zimmer, und dann haben wir eine Immobilie für den Gesamtpreis. Und genau hier stellen Sie vielleicht fest, dass ich einige dieser Informationen bereits vorab ausgefüllt habe, also habe ich diese Felder so geändert, dass gefüllt gleich wahr ist Und dann habe ich hier ein paar Beispieldaten geschrieben, damit es auf den nächsten Bildschirm passt wo wir mal fünf Nächte haben und zwei schlafen, und das alles passt irgendwie zwischen den beiden Nehmen Sie sich also gerne eine Sekunde Zeit, um das zu tun. Und dann werden wir es so , dass der Preis hier dynamisch ist, wenn sie auf Zimmer buchen klicken, je nachdem, auf welches Zimmer sie geklickt haben, wenn sie auf diese Seite gehen, der Preis hier dynamisch ist. Er ändert sich also je wenn sie auf diese Seite gehen, nachdem, welches Zimmer Sie auswählen, und dann ändern wir das von dort aus Im Moment möchten wir also zwei verschiedene Variablen in unserer allgemeinen Sammlung einrichten , aber es spielt keine Rolle, wo Sie diese speichern Wir werden eine Zeichenkettenvariable namens selected Room erstellen . Und so wechselt dieser zu dem Raum, den Sie ausgewählt haben. Und standardmäßig belassen wir es einfach bei Twin Room. Das ist also die Standardversion. Und dann wollen wir eine weitere Variable haben, eine Zahlenvariable, die diesmal tatsächlich als Gesamtpreis bezeichnet wird. Und standardmäßig setzen wir es 80 mal 5400. Das ist also der Gesamtpreis für 80$ pro Nacht mal fünf Also, jetzt auf dieser Seite haben wir diese Buchungskarte hier, die keine Komponente ist, aber wir wollen sie tatsächlich zu einer Komponente machen, indem Alt-Befehl K drücken. Ich werde das einfach von hier rausbringen Also habe ich die Hauptkomponente rausgezogen und sie durch eine Instanz der Zimmerkarte ersetzt eine Instanz der Zimmerkarte Und dann werden wir eine Variante für die verschiedenen Räume erstellen für die verschiedenen Räume Also fügen wir eine Variante mit der Eigenschaft „ Ausgewählter Raum“ hinzu, und wir werden zwei verschiedene oder drei verschiedene haben . Und wir werden sie entsprechend nennen. Also werden wir ein Zweibettzimmer haben. M dann haben wir ein Zimmer mit Queensize-Bett, dann haben wir ein Zimmer mit Kingsize-Bett. Und dann diese beiden Bilder, ich halte Command Alt C gedrückt und wähle dieses Bild mit Command aus und dann Command Alt V, um es dort einzufügen. Das Gleiche hier. Und jetzt müssen wir nur noch die Preise für jedes Zimmer 80, 101, 20 ändern , sodass dieses Zimmer 80$ pro Nacht kosten sollte Dieser sollte 100 sein, was es auch ist, und dieser sollte 120 sein Jetzt haben wir also für jedes Zimmer ein anderes, und wir wollen das auf ein Zweibettzimmer umstellen, was genau das ist, was wir hier haben. Wir wollen das Anwesen für dieses Zimmer auf ein Zimmer mit Queensize-Bett umstellen . Und dann dieses Zimmer in ein Zimmer mit Kingsize-Bett. Da haben wir's. Jetzt können wir tatsächlich wählen , welches Zimmer von hier aus ausgewählt wird, und wir werden die Variable tatsächlich anwenden so dass, wenn sich diese Variable ändert, also sagen wir, sie ändert sich zu Zimmer mit Queensize-Bett, hier auch. Aber ich werde Z einfach befehlen, zum Zweibettzimmer zurückzukehren. Die einzige andere Sache, die wir tun müssen, ist, dies auf die Gesamtpreisvariable zu ändern, die wir erstellt haben , und für diese werden wir das in der nächsten Vorlesung tun. 76. Dynamischer Gesamtpreis: Wir möchten, dass dieser Gesamtpreis an die lokale Variable gebunden ist, für die wir gerade den Gesamtpreis erstellt haben. Wir verwenden diesen Button hier. Aber wir wollen die Instanz eigentlich trennen , damit wir eine benutzerdefinierte Schaltfläche für uns selbst erstellen können eine benutzerdefinierte Schaltfläche für uns selbst erstellen Also werde ich D befehlen, diesen Text zu duplizieren. Sie einfach das Dollarzeichen ein und dann gebe ich noch einmal den Befehl D, und dieses Mal werde ich nur den USD drin haben. Und aus diesem werde ich das Dollarzeichen entfernen, den USD und das Leerzeichen entfernen. Wir haben also diese einzelnen drei Textebenen, und wir werden Shift A drücken. Nun könnte der Abstand zwischen diesen 500 und USD größer sein. Also lege ich das Dollarzeichen und die Zahl automatisch an , drücke Shift Enter, um das übergeordnete Zeichen auszuwählen, und ändere dieses auf vielleicht vier Pixel. Da haben wir's. Nun, diese Zahl von 500, lassen Sie uns weitermachen und den Text so ändern, dass er die Variable des Gesamtpreises anwendet. Und dann werde ich diese Schaltfläche kopieren und die alte löschen , die wir haben. Da haben wir's. Jetzt ist diese Schaltfläche für bestätigte Buchungen tatsächlich dynamisch und ändert sich basierend auf diesem variablen Gesamtpreis. Aber was wir tun müssen, ist, dass wir zwei Dinge tun müssen. Erstens hier, lassen Sie uns diese auf die tatsächlichen Preise aktualisieren. Also 80 mal fünf ist 400, 100 mal fünf, 500, 120 mal fünf ist 600. Also diese machen tatsächlich Sinn. Und wenn der Benutzer dann auf jede Schaltfläche klickt, aktualisieren wir diese Gesamtpreisvariable und wählen das ausgewählte Zimmer aus. Also gehen wir zum Prototyp über. Wir werden das ändern. Klicken Sie also auf Zur Buchungsseite navigieren. Das ist gut. Aber wir werden auch eine festgelegte Variable hinzufügen, und wir werden zwei Variablen setzen. Einer davon wird der Gesamtpreis sein. Stellen Sie diesen Wert auf 400 ein. Falls es noch nicht auf 400 gesetzt ist, setzen wir variabel, ausgewähltes Zimmer, wir schreiben Doppelzimmer, und dann erstellen wir hier auf Klick dieselbe Interaktion und dann setzen wir diese beiden Variablen, ausgewähltes Zimmer auf Zimmer mit Queensize-Bett und auch variabel setzen, insgesamt 500. Schließlich werden wir für das Zimmer mit Kingsize-Bett diese Verbindung herstellen. Stellen Sie das variable, ausgewählte Zimmer auf Zimmer mit Kingsize-Bett ein. Setze den Gesamtpreis auf 600, da haben wir ihn. Und jetzt sollte sich das tatsächlich ändern , je nachdem, welches Zimmer wir automatisch ausgewählt haben, und die Preise sollten sich auch ändern. Und das können wir in Aktion sehen. Wenn wir wieder hierher zurückkehren, klicken Sie auf Hier abspielen oder präsentieren. Dieses hier, wir haben das Doppelzimmer, 400 USD, dieses hier. Wir sind auf ein Problem gestoßen , bei dem sich das Zimmer tatsächlich nicht geändert hat. Das liegt daran, dass wir, als wir diese variablen Änderungen hinzugefügt haben, bereits zur Buchungsseite navigiert Wir haben also eigentlich nichts unternommen, indem wir das ausgewählte Zimmer geändert Also führt FIGMA die Interaktionen in ungeordneter Reihenfolge von oben nach unten Also müssen wir die Navigate Two ganz nach unten bringen und das erst, wenn das gewählte Zimmer und der Gesamtpreis auf die richtigen Werte geändert gewählte Zimmer und der Gesamtpreis auf die richtigen Werte Das Gleiche gilt für diese Schaltfläche hier. Wir wollen hierher gehen, die Navigation so ändern, dass sie ganz unten ist, und für diesen hier die Navigation so ändern, dass sie ganz nach unten geht. Wenn wir jetzt zurückgehen, das Zweibettzimmer, haben wir das Zweibettzimmer hier, 400 USD. Für das Zimmer mit Queensize-Bett haben wir hier das Zimmer mit Queensize-Bett, 500 USD, vom Zimmer mit Kingsize-Bett haben wir hier das Zimmer mit Kingsize-Bett und 600 USD. Und das alles haben wir getan, ohne mehrere Buchungsbildschirme erstellen zu müssen . Es ist nur die, die sich dynamisch ändert, je nachdem , auf welche Sie klicken. Und jetzt haben wir einen Gesamtpreis, der ebenfalls dynamisch ist. Wir können diese Schaltfläche sogar so kopieren, dass diese Schaltfläche auch mit unserer anderen übereinstimmt. Und wenn Sie diesen hier haben möchten , können wir einfach die Polsterung so ändern , dass sie der der anderen entspricht. Wenn wir jetzt in einen Raum gehen, beiden Buttons derselbe Preis angezeigt Also das ist großartig. Und etwas, das wirklich cool wäre, ist auf dieser Seite. Was wäre, wenn wir auch die Add-Ons zur Reise hinzufügen könnten und sehen könnten, dass sich der Gesamtpreis in den hinzugefügten Addons widerspiegelt Lassen Sie uns zur nächsten Vorlesung zurückkehren, um das gemeinsam zu tun. 77. Bedingte Logik und Operationen: Nun, diese Add-Ons, perfekt für Ihre Reise, haben keine Preise, also fügen wir ihnen einfach ein paar zufällige Preise hinzu. Also für diese Autovermietung machen wir 300, und für die unterhaltsamen Aktivitäten machen wir 150 und dann eine komplette Reiseversicherung, vielleicht 100. Da hast du's. Ich werde diesen Abschnitt einfach auch hier unten kopieren und diesen anderen Abschnitt, den ich habe , einfach durch die hinzugefügten Preise ersetzen . Dieser ist für den gefüllten Zustand. Was wir jetzt tun wollen, ist, dass wenn sie hier auf Zu deiner Reise hinzufügen klicken, wir es so machen wollen, dass dieser Preis auch hier zur Reise hinzugefügt wird. Wir wollen dort auch eine bedingte Logik einfügen , damit es nicht mehrmals vorkommt. Es passiert nur einmal, und wenn es einmal hinzugefügt ist, möchten wir nicht, dass der Benutzer es mehrmals und nur einmal hinzufügt , und das war's. Nun, eine weitere Sache, die ich Ihnen danach als Aufgabe überlasse , ist, dass Sie, sobald der Nutzer auf Zu Ihrer Reise hinzufügen klickt, der Nutzer auf Zu Ihrer Reise hinzufügen klickt, hier eine weitere Variante erstellen können, bei der das Hinzufügen zu Ihrer Reise aus Ihrer Reise entfernt wird , wenn er es bereits hinzugefügt hat. Und dann kannst du genau die gleiche Logik anwenden, die wir gerade anwenden werden, aber umgekehrt, sodass dieser Betrag vom Gesamtpreis entfernt wird. In unserer Setvariable können wir also auch Logik festlegen. Also doppelklicke ich, um auf diese ADT-Trip-Schaltfläche zu klicken , und füge dann unter den Prototypen die On-Klick-Interaktion hinzu. Und für die Aktion legen wir die Variable und ermitteln den Gesamtpreis. Und wir werden wieder den Gesamtpreis ermitteln. Im Moment legen wir also den Gesamtpreis fest, also für sich selbst. Und dann haben wir hier ein paar Operationen , damit wir etwas hinzufügen können. Plus 300, und ich werde hier 300 schreiben. Das heißt also, was auch immer der Gesamtpreis auf dieser Seite ist, addieren Sie 300. Und weil diese Zahl und diese Zahl an diese Variable gebunden sind, ändern sie sich automatisch auf unseren Gesamtpreis. Wenn wir hierher zurückkehren, jetzt klicke ich, haben wir insgesamt 500 USD. Wenn ich auf deine Reise klicke, wurden daraus an beiden Orten 800 USC Aber wie du siehst, kann ich damit weitermachen und der Preis steigt und steigt, aber so sollte es nicht sein Es sollte nur einmal passieren. zu tun, werde ich das einfach schließen, um meine Variablen zurückzusetzen. Und was wir tun werden, ist hier das, was als Bedingung bezeichnet wird, durchzugehen . Diese bedingte Logik ermöglicht es uns nun, If-Anweisungen zu schreiben. Dabei handelt es sich einfach darum, zu sagen, ob eine bestimmte Sache wahr ist, sie nur auszuführen und dann andernfalls etwas anderes zu tun. Und so werden diese in nur einer Sekunde Sinn machen. Jetzt haben wir diese Bedingung hier aufgeschrieben, und unser festgelegter Gesamtpreis ist nicht drin. Wir wollen also so schreiben , dass die Bedingung „ob“ lautet. Aber im Moment haben wir nicht wirklich etwas damit zu tun, dass der Nutzer seiner Reise bereits einen Mietwagen hinzugefügt hat oder nicht. Um das zu tun, wollen wir also drei neue Variablen unter unseren lokalen Variablen einrichten . diesem Fenster werden sie boolesche Werte haben, also können sie wahr oder falsch sein Und standardmäßig werden wir sie falsch belassen. Die andere werden lustige Aktivitäten sein, fügte hinzu. Ich nenne einfach Reiseversicherung hinzugefügt und überlasse es falsch. Und jetzt will ich es so haben, dass, wenn der Nutzer auf diese Anzeige zu deiner Reise klickt, die entsprechende Variable wahr wird. Und wenn es dann schon wahr ist, kann der Nutzer der Reise keine weiteren 300$ hinzufügen , weil er sie bereits hinzugefügt hat Dann können wir hier noch einmal zu dieser Schaltfläche gehen, zum Prototyp gehen und es dann so machen, dass, wenn ich die Bedingung schreibe, die Autovermietung hinzugefügt wird die Bedingung schreibe, die Autovermietung hinzugefügt Wir haben es also mit dem Mobbing zu tun, das wir gerade für Mietwagen hinzugefügt haben, ist gleich wahr. Wenn also die hinzugefügte Autovermietung wahr ist, was standardmäßig falsch ist, dann werden wir für „Nicht aktiv“ einfach nichts tun Wir lassen es einfach leer, damit nichts passiert. Aber in anderen Fällen, also mit anderen Worten, wenn es falsch ist, ziehen wir diesen festgelegten Gesamtpreis auf den Gesamtpreis plus 300, den wir gerade erstellt haben, auf die s-Anweisung. Das heißt also, wenn die hinzugefügte Autovermietung wahr ist, tun Sie nichts, weil sie bereits hinzugefügt wurde. Wenn sie aber nicht stimmt, sodass sie keine Autovermietung hinzugefügt haben , dann fahren Sie in diesem Fall fort und fügen Sie sie dem Preis hinzu. Noch wichtiger ist, dass wir diese hinzugefügte Variable für die Autovermietung tatsächlich ändern müssen . Im Moment setzen wir es nicht auf wahr. Aber hier drüben, wenn wir den Gesamtpreis auf Gesamtpreis plus 300 setzen , sollten wir auch eine weitere festgelegte Variable hinzufügen, und diese setzt den hinzugefügten Mietwagen auf wahr. Also legen wir den Gesamtpreis fest und sagen dann, dass „ Mietwagen hinzugefügt“ jetzt wahr ist. Nun, wenn wir das noch einmal auf der Seite mit den Zieldetails ausführen . Also können wir das Zimmer auswählen, sagen wir, Zimmer mit Queensize-Bett. Wir haben unser Zimmer mit Queensize-Bett, insgesamt 500 USD. Wir fügen eine Autovermietung hinzu und das war's. Wenn ich klicke, siehst du, dass nichts passiert. Wir fügen diesem Preis nicht mehr hinzu. Es wurde bereits hinzugefügt. Da hast du's. Und jetzt belasse ich das als Aufgabe, falls du eine weitere Variante davon erstellen möchtest , damit sie von deiner Reise entfernt wird, sodass du zwischen diesen beiden Varianten wechseln kannst. Und wenn Sie das doch tun, können Sie das hier tun, wenn Sie Ihren Mietwagen hinzugefügt haben, der Wert true entspricht, da auf Ihrem Button jetzt von Ihrer Reise entfernt angezeigt wird , wenn Sie Ihren Mietwagen hinzugefügt haben, der Wert true entspricht, da auf Ihrem Button jetzt von Ihrer Reise entfernt angezeigt wird, können Sie hier genau das Gegenteil tun . Sie werden den Gesamtpreis auf den Gesamtpreis -300 umrechnen und dann den hinzugefügten Mietwagen wieder auf den Wert fallen setzen Sie können also ständig zwischen Minus und Plus wechseln. Also belasse ich das als Aufgabe, falls du dich dafür entscheidest, aber du musst es nicht. Und natürlich können Sie genau das Gleiche auf die anderen beiden Tasten anwenden . Und das überlasse ich dir auch, wenn du das machen willst. Ich mache das in meinem Projekt, und wenn du willst, kannst du immer den Link zu meinem Projekt finden, um zu überprüfen, wie ich es gemacht habe. Jetzt haben wir also eine wirklich voll dynamische Buchungsseite. Es sieht toll aus. Wir werden in der nächsten Vorlesung zurückkommen, um eine Buchungsseite zu entwerfen , die mit einigen coolen Animationen bestätigt wird. Lassen Sie uns das also in der nächsten Vorlesung gemeinsam machen. 78. Feste Elemente: Fehler. Alles in unserem Prototyp ist scrollbar, was bedeutet, dass alles so scrollt, wie es der Benutzer tut Aber es gibt bestimmte Elemente, die wir auf dem Bildschirm fixieren möchten Zum Beispiel diese Navigationsleiste hier und wenn Sie zu diesem Abschnitt hier gehen, möchten wir, dass dieses Ding an der Seite befestigt wird, an der der Benutzer nicht scrollt Mach das, es ist sehr einfach. Sie müssen lediglich die Elemente in Ihrem Prototyp auswählen , die repariert werden sollen. Und wenn ich momentan nur eine Navbar ausgewählt habe, kann ich diese Änderung tatsächlich nur eine Navbar ausgewählt habe nur an einer Navbar vornehmen, aber Figma hat es wirklich einfach gemacht die passenden Ebenen auszuwählen Wählen Sie also alle passenden Ebenen in diesem Abschnitt aus, das sind auch all diese Navbars auf den Wir können dies also auf alle Seiten anwenden, zum Prototyp-Panel übergehen und die Position ändern statt des standardmäßigen Scrollvorgangs mit übergeordnetem Ändern Sie statt des standardmäßigen Scrollvorgangs mit übergeordnetem Bildlauf den Wert auf „Fest“. Was nun passieren wird, ist unabhängig davon, wohin der Benutzer scrollt, diese obere Navigationsleiste ihnen immer folgt und an ihrem Platz bleibt Und genau das Gleiche wollen wir mit dieser Karte Wir können diese also in fig ändern, weil sie Teil dieses übergeordneten Containers ist. Also müssen wir das ausschneiden und in den gesamten Rahmen einfügen. Auf diese Weise können wir es manuell platzieren, wo immer wir wollen. So können wir wählen, wo wir es haben wollen, also genau hier. 48 Pixel von rechts, und dann können wir jetzt „Fest“ wählen. Es ist also immer behoben. Und es könnte besser aussehen , wenn es etwas höher ist. Da haben wir's. Das sieht viel besser aus. Egal, wohin der Nutzer geht, dieser Teil ist immer takend, sodass er die Buchung von überall aus bestätigen kann So können Sie also Ihre Elemente im Prototyp reparieren. Jetzt sind wir bei dem unterhaltsamen Teil, in dem wir zurückkommen und lernen werden, wie wir die Schaltfläche „ Bestätigte Buchung“ tatsächlich anwenden und dann eine nette kleine Animation zeigen können die Schaltfläche „ Bestätigte Buchung“ tatsächlich anwenden . 79. Intelligente Animation: Wir haben drei verschiedene Arten von Animationen gesehen. Es gibt Instant, das wir benutzt haben , wir erforschen Dissolve. Wir wurden untersucht, wie man Move In benutzt. Jetzt gibt es noch einen anderen namens Smart Animate, und was er macht, ist ziemlich beeindruckend Es betrachtet zwei Frames und versucht , automatisch eine Animation zwischen ihnen zu erstellen, und deshalb heißt es Smart Animate Und um Ihnen ein Beispiel dafür zu geben: Wir werden eine Bestätigungsseite entwerfen , auf der angezeigt wird auf der angezeigt , dass die Reise gebucht wurde, und dann endlich einen Status, und dann endlich einen Status der anzeigt, dass die Reise tatsächlich gebucht Um das zu tun, werde ich diesen Abschnitt zunächst ein wenig erweitern. Und dann werde ich diese mit Buchungen gefüllte Seite duplizieren. Jetzt habe ich diese Seite dupliziert, und was wir tun werden, ist sie so zu gestalten, dass diese Seite des Bildschirms höher wird oder verschwindet und die andere Seite in die Mitte verschoben Also machen wir das Design und ändern dann das Erscheinungsbild auf 0% Und das Gleiche gilt für den Rückweg, weil wir diese 0% nicht brauchen. Und dann wollen wir das in die Mitte des Bildschirms verschieben . Und dann gehen wir zu dieser ausgefüllten Seite und über die Schaltfläche „Bestätigte Buchung“ werden wir uns später mit der anderen befassen. Wir machen eine intelligente Animation und versuchen es mit der sanften Animation und 800 Millisekunden Es ist also ein bisschen langsam. Eigentlich sogar 1 Sekunde, was 1.000 Millisekunden entspricht Ich klicke auf diese ausgefüllte Version, spiele sie ab, gehe hier runter, klicke auf Buchung bestätigen und los geht's Der andere Teil verblasste und dieser rückte in die Mitte. Und das alles geschah, weil Smart Animate erkannte, was zwischen diesen beiden Frames anders ist und sie mithilfe von intelligenter Animation zusammenführte Jetzt müssen wir nur noch die Karte hier ändern, sodass sie die unterschiedlichen Inhalte anzeigt, zum Beispiel das Zimmer, das gerade gebucht ist Und wenn es dann gebucht ist, vielleicht nach der Verspätung von zwei Sekunden oder so, können wir zu einer anderen Seite navigieren tatsächlich angezeigt wird , dass sie bestätigt wurden. Also diesen werde ich ihm einen Namen geben. Die Buchungsseite wird geladen. Es wird geladen, und dann kommen wir zur nächsten Lektion zurück, um eine Karte zu entwerfen, auf der die gebuchte Reise zu sehen Wir können das also als Ladestatus verwenden, bevor wir schließlich einen bestätigten Status Und nur um es sauber zu halten, werde ich das hier als separate Seite wieder nach oben verschieben. 80. Ladezustand: Wir haben diese Ladeseite, aber unsere Karte im Inneren entspricht nicht dem Ladestatus. Warum gehen wir also nicht zu unserer Karte oder unserer Zimmerkarte und erstellen drei verschiedene Varianten für jede, auf der das gebuchte Zimmer angezeigt wird? Und dann können wir noch eine haben , wenn sie endlich gebucht ist. Also werden wir sechs weitere brauchen. Aber vorher fangen wir einfach mit der Ladeversion an. Warum erstellen wir also nicht eine neue Varianteneigenschaft, nennen sie Status und belassen den Standard auf Standard, dann duplizieren wir diese Eigenschaften und nennen den Status für diese Eigenschaften Laden. Also sind alle drei auf Wird geladen eingestellt. Und dann wollen wir beim Laden zeigen , dass wir dieses Zimmer buchen. Vielleicht schreiben wir diesen Text einfach um, um Ihr Doppelzimmer zu buchen , und ändern diesen Text einfach in Text 200 Wir lassen die Daten stehen und dann brauchen wir keine Schaltfläche mehr, weil die Aktion bereits stattfindet, aber es wäre schön, hier eine Art Ladeanimation zu haben hier eine Art Ladeanimation Also können wir dafür tatsächlich ein cooles Tool namens Lodi-Dateien verwenden dafür tatsächlich ein cooles Tool namens Lodi-Dateien Wenn du also zu Lodi-Dateien gehst, kannst du einfach nach Lodi-Dateien suchen, und das findest du unter Plugins und Widgets Diese Lodi-Dateien werden angezeigt, und Sie müssen sich möglicherweise anmelden, um sie zu verwenden, aber sie bieten und Sie müssen sich möglicherweise anmelden, um sie zu verwenden, uns eine Menge Animationen die wir in unserem Bereich verwenden können Wenn du zu Discover gehst, können wir nach Ladeanimationen suchen und wir können verschiedene Arten von Ladeanimationen sehen von Ladeanimationen Wenn du ein bestimmtes willst, vielleicht ein schlichtes , wäre es cool, es zu zeigen, ein Flugzeug oder so. Und es gibt jede Menge kostenlose, die Sie verwenden können, und es gibt auch viele Premium-Versionen. Stöbern Sie ruhig und sehen Sie genau, welches Ihnen gefällt. Dieser ist cool. Ich verwende einfach diese einfache Animation und füge sie als Jif ein Und nur mittlere Größe ist okay. Also wird es eingefügt und es ist genau hier. Aber das ist ein bisschen zu groß, also werde ich es kleiner machen und es dann in dieses automatische Layout einfügen, aber jetzt ist es ein bisschen zu groß, also mach es ein bisschen kleiner. Und dann brauchen wir die Daten eigentlich nicht , weil wir sie zeigen werden, wenn die tatsächliche Bestätigung erfolgt. Und dann schreiben wir hier die Buchung Ihres Zweibettzimmers in London K. Und für das N werden wir das ändern, sodass auch der Text 200 lautet. Und wir brauchen dieses London UK nicht da wir es jetzt schon hier unten haben. Und dieser Text kann zentriert werden, und wir können auch oben ausrichten, sodass die Ebene in der Mitte liegt. Für diese beiden legen wir es einfach zur Seite. Damit wir diesen für die anderen Räume duplizieren können . Da haben wir's. Ich leihe mir einfach das Bild aus und füge sie ein und ändere auch den Titel hier drüben, Zimmer mit Queensize-Bett, Zimmer mit Kingsize-Bett und so weiter, und werde sie ein und ändere auch den Titel hier drüben, Zimmer mit Queensize-Bett, Zimmer mit Kingsize-Bett diese beiden los und ändere den Status dieser auf Loading, dieses auf Queen Room Und das hier in Zimmer mit Kingsize-Bett. Und alles, was wir jetzt tun müssen, ist zu diesem hier beim Laden zu gehen und unseren Status auf Wird geladen zu ändern. Lassen Sie uns jetzt sehen , was passieren wird. Gehen Sie zurück, klicken Sie auf Buchung bestätigen und bumm. Wir haben unsere Ladeanimation sieht cool aus. Und dann, nach vielleicht 5 Sekunden oder so, können wir diese Karte auf eine bestätigte Version ändern lassen. Also lass uns das in der nächsten Vorlesung zusammen machen. 81. Fertigstellung unseres Prototyps: Schließlich wollen wir den Kreislauf schließen, indem diese Seite auf den Status „Bestätigt“ ändern lassen. Dann werden wir sehen, dass die Reise abgeschlossen ist, und das ist das Ende unseres Prototyps. Lassen Sie uns das einfach etwas weiter ausbauen und dann diese Seite duplizieren , damit wir diese 12 Arbeitsseiten als abgeschlossen ändern können . Und dann wollen wir nur, dass wir nach einer gewissen Zeit wollen, diese Seite automatisch zu dieser Seite navigiert. Und in Figma können wir das tun, indem wir die Interaktion aus dem Frame selbst heraus erzeugen . Zu diesem Frame Und statt Onclick wählen wir nach der Verzögerung Was uns nach Delay ermöglicht ist eine Zeit in Syrien abzuwarten Anstatt dass der Benutzer tatsächlich damit interagiert, warten wir einfach eine Weile, bis sich der Ladevorgang zur Bestätigung ändert. Und wir können 3 Sekunden mal 3.000 Millisekunden zu dieser Seite navigieren und wir können auch die intelligente Animation beibehalten, sodass die intelligente Animation sodass die intelligente Animation Alternativ könnten Sie anstelle einer anderen Seite auch in Ihren Komponenten haben. Erstellen Sie sie also so, dass diese Komponente nach einer bestimmten Zeit mit einer diese Komponente Beides sind also richtige Methoden. Es gibt kein Richtig oder Falsch. Du kannst beides tun. Jetzt möchte ich es so einrichten, dass der bestätigte Status diesem ähnlich ist, aber er zeigt nur, dass Sie die Reise bereits gebucht haben. Also habe ich das hier dupliziert, und anstatt zu bestätigen, werden wir einfach die Schaltfläche entfernen Wir brauchen hier keinen Button mehr. Und dann fügen wir hier oben eine weitere Textebene hinzu und schreiben Buchung bestätigt und ändern diesen Text vielleicht auf Alter sechs. Ich werde den sekundären 800 verwenden. Da haben wir es. Anstatt dieses Mal fünf Nächte, können wir einfach die Gesamtgebühr schreiben. Also werden wir den Text duplizieren, das hier loswerden, einfach das Dollarzeichen behalten. Lassen Sie das Dollarzeichen hier weg, und dann werden wir diesen Text ändern , um einen variablen Gesamtpreis anzuwenden. Und wir werden diese beiden automatisch so anordnen , dass kein Leerzeichen dazwischen entsteht. Alternativ kannst du auch hier reingehen und etwas wie bezahlt schreiben. Es heißt also, dass 400$ bezahlt wurden und ändere dann den Abstand hier auf vier. Es sieht also besser aus Eine andere Alternative wird stattdessen mit Punkt drei, eins, zwei, vier berechnet . Nehmen wir an, das ist die Karte für den Benutzer. Und wir brauchen die Schlafplätze eigentlich auch nicht. Stattdessen können wir einfach Doppelzimmer für zwei oder für zwei Erwachsene schreiben . Damit wird das von diesem Staat in diesen Staat verrechnet. Jetzt ändern wir diesen einen Status auf „Abgeschlossen“. Und alles, was wir tun werden, ist es noch zweimal für die anderen Räume zu duplizieren . Wenden Sie das richtige Bild dazwischen und schreiben Sie dann dieses als Zimmer mit Queensize-Bett, Zimmer mit Kingsize-Bett. Und zum Schluss stellen Sie einfach sicher, dass es sich auch um ein Zimmer mit einem Queensize-Bett handelt. Und es ist der Variantenname und King Room im Variantennamen. Hier unten ändern wir nur den Status, um ihn fertigzustellen. Und dann fügen wir den Button hier unten hinzu, gehen zu unseren Assets, klicken und fügen ihn hier ein. Und wir wollen, dass es eigentlich nur im Rahmen ist. Fügen wir es also einfach in den Rahmen ein, damit es nicht vom automatischen Layout abhängt. Und ich bringe es einfach hier runter , irgendwo in der Nähe der Karte, genau in der Mitte der Seite und gehe dann zu meinem Dashboard oder so. Stellen Sie einfach sicher, dass es zentriert ist, und fügen Sie dann eine Interaktion hinzu. Dieser führt uns also zurück zur Destination Discovery-Seite , auf der wir weitere Reisen entdecken können. Lassen Sie mich jetzt noch einmal erklären, was passiert. Nach 3 Sekunden wechseln wir automatisch von dieser Seite zu dieser hier, und alles, was sich ändert, ist, dass diese Karte abgeschlossen wird, und dann gibt es hier eine Schaltfläche, die uns zurück zur Zielsuchseite bringt . Wenn wir das noch einmal in Aktion mit automatischem Layout sehen und wirklich nett sind, schauen wir uns an, wie es aussieht. Bestätige die Buchung, kommt hierher, 3 Sekunden vergehen, und Bum, Buchung, bestätige Doppelzimmer für zwei Erwachsene. diesem Datum bis zu diesem Bundesstaat werden 500$ auf dieser Karte Ab diesem Datum bis zu diesem Bundesstaat werden 500$ auf dieser Karte abgebucht. Und Sie können sehen, dass dieser Preis tatsächlich auf der Grundlage dessen, was wir zuvor hatten, aktualisiert wurde. Gehe zu meinem Dashboard. Wunderschön. Lassen Sie uns diesen Prototyp von oben im Lex ausführen diesen Prototyp von oben im Lex 82. Webprototypen testen: gemeinsam einen großartigen Prototyp gebaut, und ich denke, jetzt ist es an der Zeit, ihn noch einmal durchzugehen und zu sehen, wie wir ihn verbessern und sicherstellen können, dass alles gut ist. Als Erstes wollen wir Flows erstellen, sodass wir mithilfe des Prototyp-Bedienfelds automatisch zwischen verschiedenen Flows hin- und herspringen . Wenn Sie im Prototypmodus auf einen beliebigen Bildschirm klicken, können Sie einen neuen Flow-Startpunkt hinzufügen. Lassen Sie uns einen für unsere Anmeldeseite hinzufügen und diesen Anmeldevorgang aufrufen Ein neuer Benutzer durchläuft diesen Flow und dann eine Zielerkennungsseite Wir rufen also einen neuen Flow auf und rufen diesen als angemeldet Benutzerfluss. Wenn wir also zu irgendeinem Zeitpunkt den Prototyp ausführen, können wir zwischen diesen verschiedenen Abläufen wechseln. Nun, diese Flows wurden quasi zufällig erstellt. Wenn Sie also bereits versehentlich Flows erstellt haben, können Sie sie einfach anklicken und löschen. Jetzt können Sie also zwischen einem Anmelde-Flow wechseln, direkt zu dieser Seite oder direkt zu einem angemeldeten Benutzer wechseln. Standardmäßig können Sie, wenn Sie sich im Prototyp-Bereich befinden und auf die Leinwand klicken, das Gerät auswählen, auf dem Sie Ihren Prototyp ausführen. Sie können also so etwas wie einen MacBook-Fehler machen, und Ihr Projekt wird so dargestellt , wie es bei einem MacBook-Fehler erscheinen würde. Jetzt sieht es natürlich nicht so gut aus, weil wir es nicht speziell für einen MacBook-Fehler entwickelt haben. Wir haben es für diesen Bildschirm entworfen , der eine Breite von 14 × 40 hat. Wenn Sie also einen Bildschirm auswählen , der nicht ganz dazu passt, sieht er möglicherweise nicht besonders gut aus. Und im Allgemeinen führe ich den Prototyp einfach in einer benutzerdefinierten Größe aus, und diese benutzerdefinierte Größe kann genau das sein , worauf Sie Ihren Rahmen bereits eingestellt haben. In meinem Fall sind es also 14 40 mal 1080. Und wie Sie sehen können, ist es nett, es ist zwischen allen Seiten fest, egal wie groß die Seitengröße zwischen Ihren verschiedenen Frames ist, es sieht gut aus. Lassen Sie uns also den Prototyp ausführen und Sie können einen Prototyp zurücksetzen. Wenn Sie also, sagen wir, mit einem Anmelde-Flow beginnen und versehentlich irgendwo landen, können Sie jederzeit R drücken, um Ihren Flow zurückzusetzen und zum ersten Bildschirm in Ihrem Flow zurückzukehren. Jetzt bin ich wieder auf dem Anmeldebildschirm. Lassen Sie uns den Prototyp einmal von hier aus ausführen. Ich bin ein neuer Nutzer. Ich bin gerade reingekommen. Ich möchte meine E-Mail-Adresse und mein Passwort eingeben, um mich bei Wanderis anzumelden . Klicken Sie hier auf Anmelden, und ich muss meinen Bestätigungscode eingeben , den ich gerade an meine E-Mail gesendet habe Wunderschön. Ich gebe das ein, drücke auf Weiter und schon bin ich in der App. Unglaublich. Nav weit, wir hatten hier tatsächlich ein Bild von einer echten Person. Also lassen wir das Avatar-Plug-in nicht einmal laufen und holen uns einfach einen Benutzer. Wunderschön. Ich bin mir nicht sicher , ob das Max oder Tom Cruise ist, aber es funktioniert. Gehen wir und fügen das ein. Und jetzt sind wir bei Max Stove eingesperrt. Wir haben ein schönes Bild hier oben. Wir können hier runter gehen. Wir können den Tab Filter öffnen. Sehr cool. Filter anwenden. Wir können nach Beliebtheit sortieren und das nach Beliebtheit oder wieder nach Relevanz ändern . Und wir können London UK auswählen, um mehr über diese Reise zu erfahren. Sieht toll aus. Sehen wir uns die Verfügbarkeit an und springen Sie gleich hier runter. Lesen Sie die Bewertungen. Unglaublich. Es gibt noch andere Ziele, die ich mir ansehen kann. Und nehmen wir an, ich möchte tatsächlich ein schönes Känguru für mich buchen Diese Daten sehen nicht richtig aus, also warum korrigieren wir das nicht schnell Wir wollen sichergehen, dass auf der anderen Seite dieselben Daten stehen, nämlich 060-12-0605 Jetzt müssen wir das auch für hier und dort und hier wiederholen und Also, rate mal was? Sie können tatsächlich zu Design gehen und auf Varianz mit Mehrfachbearbeitung klicken, und es hat den Text an mehreren Stellen erkannt, und wir können einfach eine sehr schnelle Änderung an allen vornehmen eine sehr schnelle Änderung an allen Da haben wir's. Gehen Sie jetzt zurück zu unserem Prototyp. Sieht viel besser aus. Eine andere Sache, die nett wäre, wenn auch nicht notwendig, wäre, einfach die Anzahl der Personen, die in diesem Zimmer schlafen, mit dieser Seite abzugleichen . Stellen Sie also sicher, dass dort jeweils ein, zwei und drei Personen Platz finden. Dieser sollte also für einen Schlafplatz sein. Dieser sollte schlafen. Jetzt sind wir immer noch im Multi-Edit-Tool, also lassen wir es einfach hinter uns. Also bearbeiten wir einfach eins nach dem anderen. Dieser bietet Platz für zwei, und dieser bietet Platz für drei. Das passt jetzt also. Ich kann jederzeit zurückgehen und anderes Zimmer wählen, zum Beispiel ein Zimmer mit Queensize-Bett, sagen wir, der Preis hat sich geändert. Ich kann weitermachen und meine Daten eingeben. Wenn ich meiner Reise einen Mietwagen hinzufügen möchte. Nett. Ich habe es und einige lustige Aktivitäten hinzugefügt, und der Preis spiegelt das wider. Und jetzt kann ich auf Buchung bestätigen klicken. Leider funktioniert diese Schaltfläche noch nicht, sodass uns diese Verbindung fehlt. Lassen Sie uns diese Schaltflächen hier auswählen , indem wir die Umschalttaste gedrückt halten, damit wir sie alle auswählen, zum Prototyp gehen und eine Verbindung von einer von ihnen ziehen können , wodurch die Verbindung von allen jetzt auf unsere Buchungsseite gezogen wird. Sieht gut aus. Jetzt können wir von beiden Orten aus auf Buchung bestätigen klicken. Lass es uns von hier aus machen. Und hier fehlt uns etwas. Also lass uns zurückgehen. Also jetzt haben wir die Verbindung hier. Anstatt aufzulösen, wollen wir intelligent animieren und sanft und 1.000 Millisekunden machen , was Also sind wir jetzt wieder hier. Weißt du was? Vielleicht brauchen wir die unterhaltsamen Aktivitäten nicht, also entfernen wir das, klicken hier auf Buchung bestätigen und bumm, Ihr Zimmer mit Queensize-Bett in London, Großbritannien, wird geladen und die Buchung wurde bestätigt. Zimmer mit Queensize-Bett für zwei Erwachsene, 800$ pro Bett. Wunderschön. Gehen wir zurück zu meinem Armaturenbrett. Das ist also unser Prototyp im Web als Übung. Sie können den für Mobilgeräte verwenden, indem Sie die ähnlichen Verbindungen verwenden , die wir im Internet aufgebaut haben. Und in der nächsten Vorlesung werden wir zurückkommen, um zu erfahren, wie wir Ihre mobilen Prototypen tatsächlich auf Ihren eigenen Telefonen testen können . 83. Figma-App auf Mobilgeräten verwenden: Um Ihnen zu zeigen, wie Sie Ihr Figma-Design auf Ihrem Handy ausführen können Ihr Figma-Design auf Ihrem , um zu sehen, wie Ihre Designs aussehen oder wie Ihr Prototyp aussieht, laden Sie die Figma-App aus Ihrem Google Play Store oder Apple App Store Wenn Sie sich noch nicht angemeldet haben, melden Sie sich bei genau demselben Konto an , das Sie bei Figma verwenden, und Sie können Ihre Projekte hier sehen Ich kann mein Vanderweis-Projekt sehen. Ich kann es öffnen und durchstöbern, und du gehst zu den verschiedenen Seiten, den Mockups Das Schöne ist, dass Sie, wenn Sie zu dieser Spiegelungsfunktion hier unten gehen, Spiegeln beginnen klicken und Ihnen genau die Seite zeigen können , die Sie in Ihrer App auf Ihrem Computer betrachten , und ich kann schnell die Seite ändern , die ich mir ansehen möchte , und zu den verschiedenen gehen und sehen, welche Änderungen ich auf dem Handy vornehmen möchte oder wie das auf dem Handy läuft. Natürlich ist das noch kein Prototyp. Wenn Sie also einen Prototyp daraus machen, können Sie tatsächlich sehen, wie Ihre App auf einem mobilen Display aussehen würde. Sie können jederzeit zwei Finger halten und dann diesen Modus verlassen. Und damit ist unser Prototyping-Bereich abgeschlossen. Kehren wir zum nächsten Abschnitt zurück um zu erfahren, wie man in Figma zusammenarbeitet und ob Sie vollständige Tipps und Tricks verwenden 84. Zusammenarbeit in Figma: Einer der Vorteile und der unterhaltsamste Teil der Arbeit in Figma ist die Zusammenarbeit mit Ihr Team wächst und Sie mehr Designer haben, mit denen Sie zusammenarbeiten, können die Leute mitmachen und tatsächlich Änderungen vornehmen, während Sie Ihre eigenen Änderungen vornehmen, oder sie können Kommentare und Feedback hinterlassen, und Sie können Um mit anderen in Figma zusammenzuarbeiten, müssen Sie das Projekt nur mit ihnen teilen Wenn Sie auf Teilen klicken, können Sie auswählen, wen Sie zu Ihrem Projekt einladen möchten Sie können ihre E-Mail-Adresse hier eingeben und sie zu Ihrem Projekt einladen, oder Sie können den Link kopieren und ihn mit anderen in einem Chat oder wo auch immer Sie kommunizieren, teilen . Jetzt haben Sie standardmäßig möglicherweise diesen, der Zugriff hat, nicht auf irgendjemanden. Stellen Sie also sicher, dass Sie darauf klicken und zu einer beliebigen Person wechseln. Standardmäßig ist es manchmal auf nur eingeladene Personen eingestellt. Auf diese Weise kann die Öffentlichkeit darauf zugreifen, und nur Personen, die Sie mit ihren E-Mails einladen , können darauf zugreifen. es jetzt für jeden haben, können Sie wählen, was jeder tun kann. Standardmäßig ist es also auf „Ansehen“ eingestellt. Und in der Regel möchten Sie es dabei belassen, es sei denn, Sie möchten, dass Personen in der Öffentlichkeit Ihre Datei bearbeiten. Wenn du also öffentlich mit der Welt zusammenarbeitest , kannst du das natürlich ändern Aber im Allgemeinen ist es zu sehen. Und aus Sicherheitsgründen können Sie jederzeit ein Passwort angeben, das Benutzer eingeben können, wenn sie versuchen, auf Ihre Datei zuzugreifen. In den erweiterten Einstellungen kannst du auch wählen, ob Zuschauer diese Datei kopieren, teilen und exportieren können diese Datei kopieren, teilen und exportieren oder ob sie nur zum Ansehen und nicht zum Exportieren und nicht zum Duplizieren und Teilen bestimmt ist Exportieren und nicht zum Duplizieren und Teilen Es gibt auch einen einfachen Zugriff, um den Link für den Prototyp schnell zu kopieren Wenn Sie also schnell einen Link für den Prototyp teilen möchten, wenn Sie einen Link in den Dev-Modus kopieren möchten. Wenn Sie dies also mit Ihren Entwicklern teilen, wäre es eine gute Idee, es mit ihnen zu teilen. Und wenn Sie eine Community-Datei erstellen, können Sie Ihre Datei natürlich auch jederzeit mit der Community teilen. Und auf diese Weise können Sie Personen zu Ihrem Projekt hinzufügen. Alle Personen, die zu Ihrem Projekt hinzugefügt wurden, können Sie von hier aus sehen. Das ist also ein weiterer Benutzer, den ich habe, und ich kann wählen, ob diese Person die Datei ansehen, bearbeiten oder Eigentümer der Datei werden kann, oder ich kann sie einfach komplett aus der Datei entfernen. So können Sie verwalten , wer sich Ihre Projekte ansieht. Moment bin ich in einem anderen Benutzerkonto und kann sehen, dass ich, wenn ein anderer Benutzer in meiner Datei ist, genau sehen kann, was er gerade sieht, wo sich sein Mauszeiger befindet, was cool ist. Ich kann jederzeit hier klicken, um ihnen zu folgen und genau zu sehen, was sie tun und was sie sich ansehen. Im Moment kontrolliere ich den Bildschirm also nicht. Dieser andere Benutzer schaut sich die verschiedenen Seiten an. Wenn jemand eine Präsentation hält oder wenn Sie eine Präsentation halten, wäre dies eine gute Option, um sie mit anderen zu teilen. Dann kannst du jederzeit auf Stopp klicken , wenn du damit fertig bist, ihnen zu folgen. Jetzt kann der andere Benutzer Ihre Designs durchgehen und Kommentare hinterlassen. Und sobald sie einen Kommentar hinterlassen haben, können Sie ihren Kommentar von hier aus sehen. Standardmäßig bedeutet dieses Blau, dass der Kommentar rot ist. Wenn Sie also darauf klicken, wird es so grau. Sie können es aber jederzeit wieder auf Marks Red umschalten , wenn Sie später darauf zurückkommen möchten Natürlich können Sie mit dem Daumen hoch reagieren und einen Text zurückschreiben Und du kannst sogar Bilder teilen oder Personen und Animogis erwähnen Und so können Sie zusammenarbeiten und ganz einfach Feedback von Ihren Teammitgliedern erhalten Sobald ich dieses Problem gelöst habe, kann ich den Kommentar einfach lösen und er verschwindet, obwohl ich im Kommentarfeld jederzeit wieder darauf zugreifen kann , indem ich hier gelöste Kommentare einblenden und ihn dann wieder ausblenden kann. In diesem Kommentarfeld werden alle Rückmeldungen angezeigt , die zu dem Projekt hinterlassen wurden, da ich den Kommentar gerade gelöst habe. Es wird nicht angezeigt, aber wenn der andere Benutzer oder sogar ich, sagen wir, ich ein paar Notizen machen möchte, um das Ganze zu vergrößern, sodass Sie in der Datei solche Notizen für sich selbst hinterlassen können . Und wenn Sie anfangen, Kommentare hinzuzufügen, werden Sie sehen, dass sie sich hier stapeln, und Sie können sie von hier aus schnell lösen oder Sie können sie auch löschen. Eine weitere coole Funktion , mit der Sie Voice-Chat hier in Figma umschalten Sobald Sie darauf klicken, öffnet sich ein kleines Popup, und Sie können in Figma tatsächlich mit anderen chatten Kehren wir nun zur nächsten Vorlesung zurück , um ein bisschen mehr über Bibliotheken und Teams zu erfahren bisschen mehr über Bibliotheken und Teams 85. Teambibliotheken: Bisher haben wir Komponenten direkt hier in unserem Komponentenbereich zusammengestellt , und sie waren nur in dieser lokalen Datei. Wir haben es nicht wirklich veröffentlicht oder irgendwo bearbeitet. Aber wenn wir anfangen, an einer Komponente und an mehreren verschiedenen Projekten und Dateien zu arbeiten , können Sie sie mit Figma einfach veröffentlichen und für mehrere Dateien verwenden und Änderungen nur an einer Stelle vornehmen Anstatt also verschiedene Projekte mit mehreren verschiedenen Dateien zu haben, bei denen es sich bei allen verschiedenen Komponenten um dieselben Komponenten handelt, können Sie sie einfach an einem Ort haben Und normalerweise wäre das in einem separaten Projekt oder einer separaten Signdatei, und dann können Sie hier zu Ihrer Bibliothek gehen, und Sie können sehen, dass Sie in dieser Datei eine Wanderwis-Bibliothek haben , und Sie können sie tatsächlich veröffentlichen, sodass Sie sie für verschiedene Dateien verwenden können Sie werden aufgefordert, dies in ein Projekt zu verschieben , falls es derzeit in Ihrem Entwurf Wenn Sie nun bereit sind, Ihre Bibliothek zu veröffentlichen, werden Ihnen all die verschiedenen Dinge angezeigt, die sie zu dieser Bibliothek hinzufügen wird, sodass Sie über alle Variablen verfügen. Selbst wenn die Variablen hinzugefügt werden , wenn wir alle Farben sehen, werden die Gerätevariablen von verschiedenen Dateien gemeinsam genutzt. Alle Stile, die wir für unsere verschiedenen Schriftarten hinzugefügt haben, alle Komponenten hier, Sie können sogar eine Beschreibung der Änderungen hinzufügen. Und wenn Sie dann auf Veröffentlichen klicken, dauert es eine Sekunde. Und wie Sie sehen können, wird es geladen und es dauert einige Zeit, bis diese Bibliothek vollständig veröffentlicht ist. Und jetzt hier in einer völlig neuen Datei kann ich Teambibliotheken durchsuchen und tatsächlich Bibliotheken durchsuchen, kann ich Teambibliotheken durchsuchen und die ich veröffentlicht habe, und ich kann sie in dieser Datei verwenden, oder wenn ich bereits eine andere Bibliothek verwende, kann ich die Bibliotheken hier austauschen. Wenn ich das zu dieser Datei hinzufüge, jetzt ist es hinzugefügt, kann ich dieselben Komponenten in dieser völlig neuen Datei verwenden dieser völlig neuen Datei , die nichts mit Vanderweis zu tun hat Wenn ich hier einen Text schreibe, kann ich tatsächlich die gleichen Schriften wählen , die ich aus meiner Bibliothek mitgebracht habe Diese kommen also alle aus meiner Bibliothek mit exakt derselben Schrift, und dann kann ich sie sehen, aber du kannst sie nicht mehr unter lokalen Stilen oder lokalen Variablen sehen . Weil sie jetzt in dieser Bibliothek veröffentlicht wurden. Jetzt müssen Sie das in Ihrem Projekt nicht mehr tun. Ich werde Ihnen nur zeigen, was passieren würde , wenn Sie eine schnelle Änderung vornehmen würden. Nehmen wir an, wir haben plötzlich ein weiteres Google-Symbol und wir nennen es so etwas wie Google Logo Two oder so. Jetzt haben wir also eine neue Komponente in unserer Bibliothek oder ob wir eine neue Schaltfläche oder ein neues Eingabefeld haben und so weiter. In den Assets unter der Bibliothek gibt es also eine Änderung, die noch veröffentlicht werden muss, und diese eine Änderung ist genau das Google-Logo, das wir geändert haben. Sie können also weitermachen und es dann veröffentlichen und sehen: Okay, das ist die Komponente, die hinzugefügt wurde, das neue Google-Logo. Sie können eine Beschreibung schreiben, warum diese Änderung stattgefunden hat. Sie können es veröffentlichen. Und hier in Ihrer anderen Datei haben Sie bereits das Google-Logo zwei. Sie können es in Ihrem Projekt verwenden. Wenn ich bereits eine Schaltfläche verwendet habe und etwas mit der Schaltfläche passiert ist, können Sie es tatsächlich unter den Updates sehen. Ich werde Ihnen sagen, dass sich dieser Button geändert hat und dass es sich um ein neues Design handelt. So können Sie Bibliotheken verwenden, um dieselben Komponenten in mehreren verschiedenen Projekten mit Ihrem Team zu verwalten dieselben Komponenten in . 86. Entwicklermodus: Was ist dieser Dev-Modus hier? Wie benutzen wir ihn und was macht er? Als Abkürzung kannst du Shift D drücken, um den Entwicklungsmodus umzuschalten. Dieser Modus ist derzeit im Rahmen eines kostenpflichtigen Tarifs verfügbar DevMode ermöglicht es Ihnen im Wesentlichen, einem Entwickler auf entwicklerfreundlichere Weise Zugriff auf Ihre Datei Das Eigenschaftenfenster hat sich also komplett geändert, sodass es für jemanden benutzerfreundlicher ist , der dieses Design möglicherweise in Code umwandelt Als Entwickler kann ich meine Einheiten so ändern, dass sie Pixel oder RAM verwenden. Ich kann meine Sprache ändern. Wenn ich also bereits eine andere Sprache verwende, kann ich diese von hier aus auswählen. Und es gibt eine Reihe von Plugins, die Sie tatsächlich aktivieren können , um Ihnen sogar verschiedene Arten von Codes zu zeigen. Wenn Sie also mit React arbeiten, können wir React-Code im Gegensatz zu CSS sehen. Jetzt als Entwickler kann ich hier alles auswählen, sagen wir, diese Raumkarte, und sie zeigt mir alle spezifischen Informationen, die mir wichtig sind , wie die Polsterung, das Gewicht, die Eckradien Ich erhalte den Code direkt hier als JSX. Ich kann die Textilien sehen, alle verwendeten Farben und der Hex-Code ist leicht verfügbar Ich muss also nicht raten oder in jedes einzelne Element klicken , nur um herauszufinden es gestaltet oder wie man das Frontend dafür codiert Wenn im Laufe der Zeit Änderungen vorgenommen wurden, kann ich die Änderungen hier vergleichen, um zu sehen, wie sich diese Seite im Laufe der Zeit verändert hat Was sind einige der neuen Dinge, die passiert sind? Ich kann sehen, dass die letzte Änderung, die wir vorgenommen haben darin besteht, dass es früher die Schaltfläche „Mit Google anmelden“ gab , und dann haben wir sie verschoben , ein Logo hinzugefügt und dann haben wir auch diesen Rahmen mit einer Telefonnummer wie dieser hinzugefügt. Als Entwickler ist es also wirklich einfach, reinzuschauen, was sich in Ihrer FigMA-Datei geändert hat Auf diese Weise können Sie Ihren Entwicklern mitteilen, wie Sie diese Funktion verwenden können, um schnell zu verstehen, was sich geändert hat seit sie das letzte Mal hier waren Sie können hier jederzeit auf die Elemente zugreifen, sodass sie sich die Assets wie diese Schaltfläche hier schnell ansehen können . Sie können sie jederzeit in Playground öffnen, um zu sehen, wie die verschiedenen Varianten und Eigenschaften auf die Schaltfläche auswirken. Wie sieht der Hover aus? Wie sieht es mit diesem linken Symbol Was ist, wenn es nicht breit ist und ein Symbol hat? Von dort aus können Sie alle Eigenschaften ganz einfach abrufen. Sie können hier sogar das Symbol ändern, und das alles, wie es heißt, können Sie gerne experimentieren, da keine dieser Änderungen vorgenommen wird. Alles, was passiert, ist, dass ich nur mit der Taste spiele , um zu sehen, welche verschiedenen Varianten von Tasten es gibt. Ich kann dasselbe mit jeder anderen Komponente machen, die Eigenschaften hat. Wenn Sie sich als Designer im Dev-Modus befinden, können Sie jetzt einige Anmerkungen hinzufügen, damit Entwickler genau wissen, was Sie denken Sie können bestimmte Dinge markieren. Nehmen wir an, ich möchte betonen, dass der Abstand zwischen diesen genau 32 Pixel betragen sollte. Ich kann hier drüber zeichnen und Maus zeigen, wie der Rand und die Polsterung zwischen verschiedenen Elementen genau der Rand und die Polsterung zwischen aussehen Ich kann Anmerkungen hinzufügen. Und Anmerkungen sind nützlich. Ich kann sie auf einem bestimmten Element belassen, sodass ich sie als Beispiel belassen kann Ich kann es hier hinzufügen und sagen: Das ist die Gesamtdauer ihrer Reise, nicht die Anzahl der Nächte. Und füge das Etikett oder die Anmerkung hier hinzu. Und diese Anmerkung ist nur im Def-Modus sichtbar. Wenn ich also den Dev-Modus schließe, wirst du sehen, dass er verschwindet, aber dieser kleine Kreis hier zeigt mir, dass es hier im Todesmodus Anmerkungen gibt, die du auch sehen kannst, indem du einfach darauf doppelklickst Jetzt kann ich als Entwickler auch einige Ressourcen hinzufügen Wenn ich also Jira oder eine andere Plattform verwende, kann ich den Link einfügen und habe einfach Zugriff darauf Ich kann viele Plugins verwenden, die mir jetzt zur Verfügung stehen, um dieses Design in Code umzuwandeln, einschließlich FigMA to Code, und sie funktionieren auf einer gewissen Ebene ziemlich gut Nun, viele davon funktionieren ziemlich gut, aber ich überlasse es Ihnen, zu experimentieren, wenn Sie ein Entwickler sind Denken Sie daran, dass Sie den Zugriff auf den Dev-Modus teilen können , indem Sie hier auf Teilen klicken. Wenn Sie sich im Dev-Modus befinden, wird nur ein Link zum Dev-Modus geteilt. Und noch ein nützlicher Tipp: Wenn du deine Figma-Datei teilst, indem einen bestimmten Frame auswählst und dann auf Teilen klickst, erlaubst du der Person, die den Link öffnet, gezielt zu diesem Frame zu gelangen Wenn sie also in Ihrer Datei landen, befinden sie sich genau in diesem Frame Und das gilt sowohl im Dev-Modus als auch im Designmodus. Das Gleiche gilt übrigens für Prototypen. Wenn Sie sich im Prototypmodus befinden, möchten Sie diesen Prototyp mit dem Entwickler teilen, aber als angemeldeter Benutzer gehen Sie einfach zu dem gewünschten Flow und teilen Sie dann den Prototyp, kopieren Sie den Link. Und jetzt geht die Person, die diesen Prototyp öffnet , direkt zu genau diesem Startpunkt oder diesem Flow. Natürlich können sie hier jederzeit zwischen verschiedenen Abläufen hin - und herschalten, aber das ist der ursprüngliche Ablauf, den sie sehen werden. 87. Annotationsvariationen: Lange nach den Dreharbeiten zum letzten DevMo-Video kündigte Figma eine neue Funktion an, kündigte Figma eine neue Funktion mit der Sie noch mehr aus Anmerkungen herausholen können wenn es darum geht, Anmerkungen während Ihres gesamten Projekts für Ihre Entwickler zu hinterlassen Anmerkungen während Ihres gesamten Projekts für Ihre Nun werdet ihr in eurer Werkzeugleiste sehen, ihr hier diesen kleinen Pfeil habt und ihr könnt das Commons-Tool erweitern und es tatsächlich zwischen Anmerkungen und Messungen umschalten Messung, das haben wir natürlich in der letzten Vorlesung verwendet Wenn wir jedoch Anmerkungen machen möchten, können wir entweder darauf oder als Tastenkombination Shift T klicken, und wir können im gesamten Entwurf schnell Anmerkungen hinterlassen im gesamten Entwurf schnell Wenn Sie also eine Anmerkung zu diesem beliebten Tag hinterlassen möchten, können wir sagen, wir können hier eine hinterlassen, und das neue Update hier ist, dass Sie sogar eine Kategorie dafür festlegen können Wir können also sagen, ob es sich um Inhalte handelt oder ob es sich dabei um Entwicklung oder Interaktion, Barrierefreiheit usw. handelt. Und für diesen Fall erstellen wir einfach ein Entwicklungs-Tag und sagen, dass das Tag nur für Reisen angezeigt werden soll , die bei Nutzern beliebt sind. Sie können also problemlos Anmerkungen hinzufügen, auch wenn wir uns im Designmodus befanden ohne in den Entwicklungsmodus wechseln zu müssen Natürlich können Sie jederzeit Escape drücken und mit C in den Kommentarmodus zurückkehren mit C in den Kommentarmodus und auch während Ihres gesamten Projekts Kommentare hinterlassen 88. Versionsverlauf: Wir haben also gesehen, wie Sie im Dev-Modus Änderungen zwischen Ihren früheren Versionen der Datei vergleichen können . Aber was ist mit einem Designer? Gibt es eine Möglichkeit, schnell zu einer Version zurückzukehren , die ich bereits verwendet habe? Nehmen wir an, ich habe einige Änderungen vorgenommen. Ich mag sie nicht. Das Team hasst es. Wir wollen zur vorherigen Version zurückkehren Sie benötigen lediglich den Versionsverlauf , auf den Sie über Ihren Dateinamen hier mit diesem kleinen Pfeil zugreifen können . Dort wird der Versionsverlauf angezeigt. Versionsverlauf zeigt Ihnen alle Änderungen, die Sie im Laufe der Zeit vorgenommen haben. Und wie Sie sehen, gibt es sechs Versionen, die automatisch gespeichert werden, und ich kann weitermachen und klicken, um an diesem bestimmten Datum zu sehen, wie meine Datei aussieht. Wenn ich also, sagen wir, auf den 16. November klicke, sehe ich plötzlich, dass meine Datei völlig anders aussieht. Und so kann ich noch älter werden und all die Änderungen sehen, die ich im Laufe der Zeit an meiner Datei vorgenommen habe. Wenn ich dann zu dieser Zeit zurückkehren möchte, kann ich das jederzeit tun, indem ich darauf klicke und sage, diese Version wiederherstellen Oder wenn Sie eine bestimmte Version gefunden haben, die Sie benennen möchten, können Sie ihr einen bestimmten Namen geben damit Sie sich genau an diese Version erinnern Dann werde ich hierher gehen. Ich sehe, dass Komponenten hier veröffentlicht wurden, und das ist die aktuelle Version, und ich kann sie einfach schließen wenn ich mir den Versionsverlauf angesehen habe. 89. Ebenen mit KI umbenennen: Noch ein paar KI-Tools, die wir in diesem Projekt nicht wirklich verwendet haben Wir haben schon viel benutzt, aber wir können uns definitiv vier weitere ansehen , die sehr hilfreich sind. Die erste ist die Benennung unserer Ebenen. Während des gesamten Projekts haben wir unsere Ebenen nicht wirklich benannt. Alles ist nur Bild 31, Bild 44, Bild 40, Sie haben die Idee. Nichts ist wirklich organisiert. Wenn sich jemand diese Ebenennamen ansieht, hat er vielleicht keine Ahnung, was vor sich geht. Figma hat also tatsächlich eine KI-Funktion, mit der wir Ebenen umbenennen können Wir müssen lediglich den Befehl K ausführen oder das Aktionsfenster öffnen und auf Ebenen umbenennen klicken Es wird eine Sekunde dauern, aber wie Sie sehen können, für alles, was Sie ausgewählt haben wird Figma für alles, was Sie ausgewählt haben, weitermachen und ihnen einen Namen geben Es ist vielleicht nicht perfekt, es hat dieses Raster hier Ergebnisraster genannt , aber vielleicht möchten Sie das Zielraster oder etwas Ähnliches nennen . Aber auch das ist eine viel bessere Verbesserung als das, was wir zuvor hatten. Wir haben einen Sammlungscontainer, Sammlungstitel und ein Sammlungsraster. Die Benennungskonvention , die es verwendet, ist also ziemlich nett. Probieren Sie es an verschiedenen Frames aus, oder wenn Sie Ebenen für all Ihre Frames umbenennen möchten , bitten Sie Sie, einige Ebenen auszuwählen, und Sie können tatsächlich mehrere verschiedene Frames auswählen , wenn Sie möchten, oder drücken Sie einfach die Eingabetaste, während Sie einen Abschnitt ausgewählt haben, und Sie werden feststellen, dass es zu viele Ebenen sind, sodass Sie möglicherweise mehrere Seiten gleichzeitig bearbeiten müssen. Probieren Sie es also aus. Es ist eine ziemlich gute Möglichkeit, Ihre Datei besser zu organisieren. 90. Hintergrund mit KI entfernen: Kommt ziemlich oft vor, wenn Sie ein Bild in FIGMA ziehen. Ich habe dieses Schildsymbol gefunden, das ich für die Reiseversicherung verwenden kann , hier oder so, und ich möchte den Hintergrund entfernen Jetzt können Sie das in Photoshop tun, wenn Sie es und andere Tools haben. Aber wenn Sie es nicht haben, macht es Figma jetzt einfacher denn je , den Hintergrund tatsächlich zu entfernen Und alles, was Sie tun müssen, verwenden Sie ein KI-Tool namens Remove Background Wenn Sie es nicht finden können, suchen Sie einfach in der Suche hier danach. Wenn Sie darauf klicken, wird das Bild analysiert und der Hintergrund entfernt. So einfach ist das. 91. Übersetzung unserer App mit KI: Stellen Sie sich vor, wir haben diesen Vander Weiss für unseren Kunden gemacht. Sie haben es auf den Markt gebracht. Es läuft wirklich gut und tatsächlich hatten sie in Frankreich ein großartiges Publikum. Wie übersetzen wir diese Seite oder das gesamte Projekt ins Französische? Figma AI macht es super einfach. Alles was Sie tun müssen, Sie können einfach eine Seite kopieren. Nehmen wir an, diese Zieldetailseite soll eine französische Version davon haben. Und alles, was Sie tun müssen, ist hier die Option „Übersetzen nach“ auszuführen und die Sprache auszuwählen, und schon gibt es eine Menge. Ich werde nach Französisch suchen. Und wie Sie von oben nach unten sehen können, wird es die gesamte Seite auf Französisch schreiben, einschließlich der Schaltflächen, Beschriftungen, Daten und einschließlich der Schaltflächen, Beschriftungen, sogar der Bewertungen. Und da haben wir es. So können Sie mithilfe von KI in eine andere Sprache übersetzen und Ihre App für mehrere Märkte vorbereiten. 92. Tastaturkürzel: Ich habe es soweit geschafft, zunächst einmal herzlichen Glückwunsch. Zweitens ist Ihnen vielleicht aufgefallen, wie häufig ich Tastenkombinationen von Auto-Layout, Shift A bis zum Öffnen des Entwicklermodus, Shift D verwende Tastenkombinationen von Auto-Layout, Shift A bis zum Öffnen des Entwicklermodus, . Ein Großteil der Befehle Alt C, Befehl Alt B zum schnellen Kopieren und Einfügen von Stilen und so weiter und so weiter Es gibt eine Menge und du kannst sie nicht so oft auswendig lernen, wie du willst . Ich übe sie einfach und gewöhne mich daran Figmas hat das einfacher gemacht, indem es Ihnen Ihre Tastenkombinationen hier unten gezeigt Ihre Tastenkombinationen hier unten hat, wo Hilfe und Ressourcen stehen Und Sie haben hier diese Option für Tastenkombinationen . Sie können es öffnen. Und es zeigt Ihnen all die verschiedenen Abkürzungen , die Sie haben. Sie können die Benutzeroberfläche auf diese Weise ein- und ausblenden, und es zeigt Ihnen, wie Sie sie verwenden. Sie können verschiedene Tools durchsuchen. Und für alles, was ich verwendet habe, wird es blau angezeigt, also das sind die, die ich verwendet habe, aber ich habe zum Beispiel das Stiftwerkzeug nicht verwendet, also sagt es mir, wenn Sie ein Stiftwerkzeug verwenden, wird es blau, was bedeutet, dass Sie es entsperrt haben oder dass Sie es verwendet haben. Also gamifiziert es, sodass Sie eine neue Tastenkombination lernen können , indem sehen, welche Sie noch nicht ausprobiert haben, sodass Sie diese ausprobieren können 93. Fazit: Herzlichen Glückwunsch zum Abschluss dieses Kurses. Wir haben einen langen Weg zurückgelegt und nicht viele Menschen schaffen es so Herzlichen Glückwunsch an Sie, dass Sie dieses Projekt zusammengestellt und alle Tools kennengelernt haben , die FICMA zu bieten hat Und natürlich hört das Lernen hier nicht auf. Um ein großartiger Produktdesigner zu werden, braucht man Übung. Sie müssen weiter an mehr Projekten arbeiten und sie zu Ihren Portfolios hinzufügen, sie zu Ihren Portfolios hinzufügen, damit Sie sich von der Masse abheben und entweder Ihren Traumkunden oder Ihren Traumjob finden können . Sinne danke ich Ihnen noch einmal dafür, dass Sie an diesem Kurs teilnehmen und Teil dieser Reise mit uns sind. Wenn Sie Fragen haben, können Sie sich gerne an wenden und eine Bewertung hinterlassen , ob dieser Kurs für Sie hilfreich war. Viel Glück und viel Spaß beim Gestalten.