So entwirfst du eine Mobil-UI/UX-Design-Experience und erstellst einen Prototyp mit dem Figma-Design-Tool – Lerne Figma | Aaron Lawrence | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

So entwirfst du eine Mobil-UI/UX-Design-Experience und erstellst einen Prototyp mit dem Figma-Design-Tool – Lerne Figma

teacher avatar Aaron Lawrence, UX Instructor & Product Designer in SF

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      1 Einführungsvideo

      4:55

    • 2.

      Kurseinheit in figma und Download der class

      33:19

    • 3.

      Entwerfen der login und the + component Prototyping und intelligente Animation

      88:10

    • 4.

      Entwerfen des shopping

      90:11

    • 5.

      Entwerfen der the

      61:14

    • 6.

      Entwerfen der profile

      25:52

    • 7.

      Überarbeiten und UI für Ingenieurwesen

      16:01

    • 8.

      Tastaturbefehle

      20:56

    • 9.

      Commenting endgültige Gedanken

      7:12

    • 10.

      Bonusvideo

      17:13

    • 11.

      Bonusvideo 2 – Überlagern, Modale und Menüs

      25:55

    • 12.

      Bonusvideo

      31:15

    • 13.

      Bonusvideo

      23:35

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

5.471

Teilnehmer:innen

22

Projekte

Über diesen Kurs

In diesem Kurs habe ich eine figma für dich herunterlädst und ich werde dich Schritt für Schritt führen, wie du mit dem Designwerkzeug Figma einen voll funktionsfähigen Prototyp erstellen kannst. Hier die class

1. Einführung in to und
Datei-Durchlauf22. So entwerfen wir ein Anmelde-&
Anmelde-Erfahrung3. Wie du ein Einkaufserfahrung
entwirfst4. Wie du checkout
entwirfst5. So gestaltest du Profil- und
design Wie du eine
Komponenten-Bibliothek erstellst und verwende Wie du einen anklickbaren Prototyp mit intelligenter Animation und anderen Übergangseffekten erstellen
kannst8. Wie du andere und Zusammenarbeit in figma9 einladen
kannst. So exportieren Sie UI und den Code für
Ingenieur:10. Figma
11. Wie du figma und GUI Kits12
verwendest. So erstellst du Kommentare und comments in
figma13. Abschließende Gedanken und Vorwärts

Bonusvideos (tieferes Würfel in Prototyping und Einführung in die interaktive Komponente)

Bonusvideo



Triff deine:n Kursleiter:in

Teacher Profile Image

Aaron Lawrence

UX Instructor & Product Designer in SF

Kursleiter:in

Hello, I'm Aaron. I'm a principle UX designer at a company called Pivotal and UX instructor at the Academy of Art University in San Francisco.

I've been doing design for 13 years and yes, you should take my class, whether you're a beginner or want to pick up some advanced techniques, this class will guide you through the UX design process and we'll stop and deep dive into many tools, best practices & design methods.  I've spent countless hours creating easy to understand content & documents that you can download and use that go along with the video topics. A lot of this content is what I teach at the university level and available to you.

My bliss mode is designing and making things for people to use. I practice lean and agile methodologies, alongside u... Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. 1 Einführungsvideo: Willkommen, wie man ein mobiles UX-Erlebnis mit dem Design-Tool Sigma entwirft und prototypisiert. Mein Name ist Aaron Lawrence, und ich bin ein Principal UX Designer und Gründer der AUX Agentur namens UX Honey in San Francisco , Kalifornien Ich bin auch Aux Instruktor, wo ich Advance UX Design an der Academy of Art University unterrichte, auch hier in San Francisco. In diesem Kurs lernen Sie Abb. HMA, ein cloudbasiertes Design-Tool, das zum Standard-UX-Design-Tool für die Industrie und UX-Designer gleichermaßen wird . Unternehmen wie Google, Twitter, uber, Airbnb, Microsoft haben Fig MMA aufgrund seiner einfachen Zusammenarbeit und Effizienz in der Designerstellung als ihr bevorzugtes Tool angenommen . Und mein Lieblingsteil ist, dass es kostenlos ist. Also lassen Sie uns Ihnen das Ergebnis dieses Kurses zeigen. In der nächsten Reihe von Videos werde ich Ihnen Schritt für Schritt zeigen, wie Sie eine on-Demand Boba Teebestellungserfahrung entwerfen und prototypisieren. Sie lernen, wie Sie eine Anmeldung machen, Seite eine Anmeldeseite, Sie lernen, wie es zu tun. Animierte GIFs. Wir arbeiten an der Einkaufserfahrung, wie Sie feste Elemente erstellen, wie Sie hier sehen, Übergänge für Ihre Prototypen mobile Drop-Downs. Du wirst Schaltflächenzustände lernen. Wir gehen durch und erstellen eine Scheckabfluss Zahlung und den endgültigen Kauf des Boba-Tees , der an meinen Standort geliefert wird. Und ja, ich habe Boba-Tee Auch wir arbeiten auf der Profilseite Bestellverlauf Seite, und wir melden uns ab und schaffen ein nahtloses Erlebnis. Sie lernen auch die verschiedenen Möglichkeiten kennen, wie Sie Übergänge zwischen Bildschirmen erstellen können. Wenn Sie mit Fig MMA einen Prototyp erstellen, erfahren Sie, wie Sie die intelligente, animierte Funktion verwenden . Wir werden lernen, wie Sie Bildschirme erstellen, verschieben und verschieben, Bildschirme oben und nach unten schieben. Wir werden lernen, wie man ein mobiles Menü erstellt, lernen, wie man Modelle erstellt und erstellen auch eine wiederverwendbare Komponentenbibliothek, Farbstile und Textilien alles, was Design effizienter und einfacher macht, wenn es um die Bearbeitung geht . Außerdem erfahren Sie, wie Sie einen Link für Ihren Prototyp erstellen und diesen Link mit Ihren Teamkollegen oder mit Benutzern für Benutzertests freigeben können. Sie lernen, wie Sie andere in Ihr Design und Ihre Best Practices einladen können. Wenn es um die Zusammenarbeit innerhalb von Fig MMA geht, erfahren Sie auch, wie Sie U-Y-Assets für das Engineering exportieren und wie Sie Code wie CSS und HTML in Ihren Entwürfen überprüfen . Ich werde Ihnen auch alle Fig aber Tastaturkürzel zeigen und wie Sie sie und die besten verwenden , die ich Tag für Tag verwende. Ich werde Ihnen auch zeigen, wie Sie Figment Plug Ins herunterladen und online gehen und gooey Kits herunterladen . Ich zeige Ihnen, wie Sie oder Ihre Teamkollegen gemeinsam Kommentare erstellen können. Und last but not least, Ich habe eine Fichman-Datei erstellt, die Sie herunterladen und öffnen in Fig MMA, die alle Designs enthält , die Sie in der Boba Tea Bestellanwendung gesehen haben. Bereits dort Prototyp Ready to go, dass Sie verwenden können, ist eine Sicherheit jetzt oder wählen Sie auseinander, wenn Sie möchten und wird diese Design-Datei verwenden, um Schritt für Schritt zu gehen und den Prototyp neu zu erstellen, die wir früher in der Datei gesehen. Sie haben auch alle Vermögenswerte, die Sie gesehen haben, bereit zu gehen. Ich habe alle Schnelltasten eingegeben und ich habe eine Liste meiner Lieblings-PlugIns, die Sie innerhalb von Fig MMA verwenden können . Verwenden Sie diese Datei auch, um Ihnen zu zeigen, wie Zehe arbeiten in Fig MMA, und es wird lernen Design und Lernfigur Spaß in dem Sinne, dass gehen durch und erstellen zusammen, anstatt nur eine Liste von Videos für Sie zu sehen und zu tun auf Ihre eigenen. Und Sie können mit mir gehen, während wir diese ganze Erfahrung zusammen neu erstellen. Dieser Kurs ist ideal für alle, deren Lerndesign und lernen möchte, wie man eine Benutzererfahrung prototypisiert , oder wenn Sie ein Designer sind und bereits andere Tools kennen und wie Fig Mo funktioniert. Alles klar, gut, danke fürs Ansehen, und hoffentlich genießen Sie die Klasse. 2. Kurseinheit in figma und Download der class: Alles klar, Welcome Zeh. So erstellen Sie eine mobile Anwendung Experience Design mit dem Design-Tool Abb., MMA-Klasse. Mein Name ist Aaron Lawrence, und ich werde dein Lehrer für die Klasse sein, bevor wir in die Feigen-MMA kommen und die mobile Anwendung aufbauen , die ich in einer Sekunde mit Ihnen teilen werde. Ich gehe gerne durch die Tagesordnung für die Klasse. Also das erste Video hier, in dem Sie gerade sind, ist das Intro zum Figment Design Tool und die Datei gehen durch. Also habe ich Ihnen eine Datei erstellt, die Sie in der Klasse herunterladen werden, und ich werde Ihnen zeigen, wie Sie das einrichten , geben Sie einen Spaziergang durch diese Datei sowie Fig MMA, und dann können wir mit der nächsten Reihe von Videos fortfahren, die ist, wie Design der mobilen Anwendungserfahrung. Es ist eine Boba-Tee Bestellerfahrung, die mit Ihnen hier in einem Moment geteilt werden, dass Anwendungen in eine Reihe von Szenarien, die in eine Reihe von Videos aufgeteilt werden . Also das erste Video, das nach diesem haben wird, ist, wie man den Anmelde- und Anmelde-Workflow entwirft . Das nächste Video wird das Shopping-Workflow-Erlebnis sein. Das nächste Video danach wird die Auscheck-Workflow-Erfahrung sein, und das nächste Video danach wird die Profil-Workflow-Erfahrung sein. Ähm, ich glaube, dass der beste Weg, um ein neues Werkzeug zu lernen und entworfen zu lernen, einfach direkt in es kommen und Spaß haben. Das ist also kein Video, in dem du eine Reihe von Anweisungen und Dingen zu tun hast. Du folgst einfach mit mir und wir werden lernen, indem wir Design machen. Also, während wir in diesen Videos auf und diese Szenarien entwerfen, werden Sie Fig mutt toe verwenden. Erfahren Sie, wie Sie eine Komponentenbibliothek erstellen und verwenden. Außerdem erfahren Sie, wie Sie anklickbare Prototypen erstellen und teilen, die Sie den Prototyp anfechten oder mit Ihrem Team teilen. Sie lernen, wie Sie andere einladen und wie die Zusammenarbeit funktioniert. Innerhalb der Fig MMA. Sie erfahren, wie Sie U-Y-Assets exportieren und auch den Entwurf auf Codeattribute prüfen, und Sie können diese Code-Attribute für das Engineering verwenden. Sie lernen Fig MMA-Tastaturkürzel. Sie lernen, wie man Figur-Plug-ins benutzt und wie man gooey Kits von online herunterladen kann. Du wirst lernen, wie man Kommentare erstellt, und du wirst auch einige letzte Gedanken haben und eine Zukunft wird das letzte Video dort sein. Also, bevor ich Ihnen die Waren und die Entwürfe zeige, die wir in dieser Klasse bauen werden, möchte ich nur ein wenig darüber reden, warum Sigma ein sehr beliebtes Design-Tool für große Tech-Unternehmen und die meisten der Branche geworden ist. Und die Unternehmen, die diese Tools verwenden, sind Unternehmen Sigma Tool. Sind Unternehmen wie Google Twitter, uber Airbnb, Microsoft, um ein paar zu sagen? Ähm, aber warum Fig MMA? Eine der großartigen Dinge hier ist, dass es sich um eine Cloud-basierte Dateispeicher-Anwendung handelt. Das bedeutet also, dass alle Ihre Dateien in den Wolken gespeichert werden. Es gibt keine Dateiverwaltung mehr, die versucht, die aktuellste Datei aufzuspüren. Sie können auf diese Dateien von jedem Computer über das Internet zugreifen, so dass sie nicht nur auf Ihrem Computer vorhanden sind. Sie können auf diese Dateien von jedem Computer über das Internet zugreifen, Sie existieren in der Cloud und sind überall zugänglich. Meine Lieblingssache daran, dass Sigma eine Cloud-basierte Anwendung ist, ist, dass ein Auto Ihre Arbeit speichert , so dass Sie nie den Fortschritt in Ihrer Arbeit verlieren. Es speichert ständig Ihre Datei im Hintergrund, so dass Sie nie den gleichen Absturz oder den Anwendungsabsturz haben, und dann haben Sie Arbeit verloren. Die andere Sache, was in vielen Unternehmen stark angenommen wurde, ist, dass es großartig mit der Zusammenarbeit ist , und einer der Gründe, warum es großartig ist, ist, dass Sie mehrere Mäuse sehen können, und es macht für Echtzeit-Kollaboration. Wenn also andere Leute im Tool sind, können Sie dort Mauszeiger im Tool sehen, und es macht, dass es wirklich einfach, mit anderen Teamkollegen zusammenzuarbeiten. Dies macht es auch für Ingenieure und PM's einfach zu bedienen. Und es ist großartig, weil Ingenieure in Ihre Entwürfe kommen können und sie erwarten können, und sie können die CSS-Codeattribute greifen und kopieren und in ihre Codebasis einfügen. Die andere Sache macht Sigma grau, oder? Lebt Prototyping im Tool, so dass Sie nicht ein Werkzeug für das Design und ein anderes Werkzeug für Prototyping verwenden müssen? Es ist eine Art, ah, eine Anlaufstelle für all das. Es macht diesen Prototyp wirklich einfach zu teilen, und es gibt Ihnen einen anklickbaren Link, den Sie mit jedem in Ihrem Team teilen können, oder Sie können ihn an Benutzer senden und Sie können mit ihnen testen. Sie können sehen, wie sie über den Link gehen. Sie können auch die Feigenschlammspiegel-Anwendung herunterladen, die ich Ihnen auf Ihrem Handy zeigen werde, und Sie können Ihre Designs, die Sie in Echtzeit erstellen, auch auf Ihrem Handy sehen. Es macht auch die Erstellung von Komponenten und Komponenteninstanzen sehr einfach. Ich zeige Ihnen das auch in dieser Klasse, und es macht das Erstellen von Styleguides und Zeichenstilen und -farben für die Wiederverwendung während Ihrer Designs wirklich einfach. Aber ich versichere Ihnen, äh, sicher, dass Sie in dieser Klasse und es macht für das Ablegen von Kommentaren, so dass andere Teamkollegen selbst Comics im Tool im Kontext Ihrer Designs fallen können , was es wirklich einfach macht zu sehen, was Leute beziehen sich darauf, wenn sie Kommentare zu Ihrem Design geben, die Sie auch in den letzten Videos zeigen. Es hat auch endlose Art Board Platz und Seitenlayout und hat viele Plug Ins, die Sie verwenden können , um das Design schneller zu machen. In Ordnung, also ist es ein bisschen darüber, warum Fig MMA, Lassen Sie uns eine Tour durch die Anwendung machen, die wir in dieser Klasse lernen werden. Also gehe ich hier zum Prototyp und wir haben einen Ladebildschirm. Es ist das Boba-Tee-Anwendungserlebnis. Und was dies tut, ist es jedem in San Francisco erlauben, sich zu öffnen, um diese Anwendung herunterzuladen und Boba-Tee zu bekommen, um sie in Echtzeit zu liefern. Also, im Wesentlichen, wenn ich will, dass Boba Tea in meinem Büro geliefert wird, kann ich einen Boba-Tee bestellen, und ich kann ihn innerhalb von 15 Minuten in mein Büro mit in San Francisco liefern lassen. Also werden wir im ersten Video lernen. Danach erfahren wir, wie Sie die Anmeldeseite aufbauen, die Sie hier sehen werden. Sie können sehen, es hat ein Tippsystem oben, links und rechts, und lassen Sie uns voran und melden Sie sich an. Jemand legte meinen Namen oder meine E-Mail mein Passwort in Drücken Sie den Anmelde-Button Abb. Ma unterstützt auch animierte GIFs, so dass Sie das kleine Laden Spender GIF sehen können. Das zeige ich dir auch. Und dann ist hier das Einkaufserlebnis. Hier sind alle drei Boba oder für Boba Tees, Aromen, die wir im Angebot haben. Hier haben wir die Tab-Leiste hier, die fixiert bleibt, was bedeutet, dass sie nicht mit allen anderen Inhalten schlendert. Ich zeige dir, wie du das auch in dieser Klasse machst. Und sagen wir, ich möchte hier einen dieser normalen Boba-Tee-Drinks bestellen. Ich muss nur irgendwo auf diesem Platz klopfen und es öffnet die normalen Milch-, Tee-Shopping-, ähm, Einstellungen. Und hier kann ich die Milch wechseln, wenn ich wollte, vielleicht Milchmilch, Mandelmilch. Ich kann auch die regelmäßige Süße hier und die Medien-Mäuse ändern. Also in dieser Benutzererfahrung wird die regelmäßige Süßigkeit zu einem halbsüßen ändern. Also hier wird auch figment verwenden, um zu lernen, wie man ein mobiles Drop-Down erstellt, das ist eine Folie hier oben, die Sie sehen können. Und wenn ich auf die Semisweet klicke, kann man sehen, dass sich die SEMISWEET jetzt bevölkert hat. Es fühlt sich also wirklich wie eine ah riel Anwendung an, obwohl es nur Ihre Designs sind. Und das sind die Dinge, die wir tun, um Engineering zu zeigen, wie man die Erfahrung, die Übergänge und die kleinen Details, die wir in unseren Entwürfen haben, aufzubauen . So können Sie hier sehen, ich kann meine Beläge auswählen. Die Beläge, die ich zur Auswahl habe, sind große Tapioka, kleine Tapioka oder Litschi Gelee. Ich kann die Summe hier sehen, und ich habe die Schaltfläche Hinzufügen. Also lassen Sie uns voran und fügen Sie große Tapioka, so dass Sie sehen können, haben die große Tapioka hinzugefügt. Ich habe gesehen, wie der Preis etwas steigt und ich werde das in meinen Warenkorb legen. Sie können diesen Übergang sehen, wo der Bildschirm heruntergegangen ist. werden wir auch in dieser Klasse lernen. Und ich konnte jetzt sehen, dass ich das in meinen Warenkorb gelegt habe, Ich klicke auf den Warenkorb hier. Ich sehe, dass ich das eine Milchgetränk, einen Lauf, regelmäßige Milch, Tee-Drink, und ich kann bearbeiten. Ich kann das entfernen. Ich kann auch beliebige Mengen hinzufügen, aber ich bin gut damit. Ich will nur, dass mir ein Getränk geliefert wird. Hier ist die Summe der Steuern, die Liefergebühr, die Bestellsumme. Und ich bin gut zu gehen. Wenn ich das schließen möchte, komprimiere ich das X, und es wird esso schließen es und ich kann es wieder öffnen. Also haben Sie diese kleinen Übergangszustände auch in dieser Klasse gelernt. Also gehen wir weiter und machen das nächste und du siehst Ah, die Adresse hier. Ich kann die Adresse in meine Wohnung setzen und meine Telefonnummer drücken, aber sagen, ich wollte überhaupt zurück. Ich kann den Zurück-Pfeil drücken. Sie können sehen, dass der Bildschirm von links nach rechts gleitet, und Sie können auch sehen, dass er von rechts nach links kommt. Hier. Das sind kleine Übergangsdetails, die auch in der Klasse lernen werden. Und ich werde meine Kreditkarteninformationen hier eingeben. Drücken Sie fertig. Und ich konnte sehen, dass meine Bestellung insgesamt hier bei $9,49 genommen hat. Und ich werde voran gehen und bezahlen, und wir konnten sehen, dass wir den Spinner wieder bei sieben NG Zahlung benutzen . Und Sie werden sehen, dass ich jetzt die Lieferung meines Boba-Tees in Echtzeit auf der Karte sehe. Und Bang, es ist hier. Ich kann sagen, OK, ich hab's. Und es bringt mich zurück zu meinem Home-Bildschirm. Ich möchte hier mein Profil ansehen. Aiken, Tab rüber zu meinem Profil. Ich verstehe. Ich befinde mich jetzt auf der Registerkarte „Aktives Profil“. Ich kann ein Bild von mir sehen. Ich kann ein Bild hinzufügen. Ich kann die Informationen hier bearbeiten. Oh, und übrigens, das ist kein Bild von mir. Das ist nur ein zufälliges Bild, das ich von jemandem habe, der einen Stecker in, ähm, in Abb. MMA benutzt. Das ist wirklich ordentlich. Es ist ein Plug in genannt, um, Inhalt Assets, dass ich Ihnen zeigen, wie Sie herunterladen und es zieht nur Fotos für Sie wirklich einfach. Außerdem gibt es die Bestelltabelle hier, und ich kann meine letzte Bestellung sehen war, dass ein regelmäßig gebauter Milchtee, das Datum und die Summe dort, und ich kann wieder auf dem Handy klicken. Tah, äh, sind die Boba-Tee-Ikone. Hören? Es bringt mich zurück zu meinem Einkaufserlebnis. Ich kann zu meinem Profil zurückkehren, ich kann mich abmelden und bin wieder auf dem Anmeldebildschirm hier. In Ordnung. Ziemlich genial. Das ist also eine Art von Waren, die in dieser Klasse durchlaufen und lernen, wie man baut. Aber jetzt vorwärts zu gehen, ist das, was Sie tun müssen. Wenn Sie nicht bereits ist, gehen Sie vor und gehen Sie zu Fig MMA, um, Sigma dot com und Sie können einfach eine Google-Suche wie Sigma herunterladen und finden Sie den Figment Download. Uh, U R L, das ist Sigma dot com Schrägstrich Downloads und Download entweder für Mac oder Windows. Ich benutze einen Mac, und die meisten Leute, die Design machen, arbeiten hier mit einem Mac, ähm, also lade die lokale Anwendung für deine Figment-Datei herunter und du wirst hier sehen, indem du den Download gedrückt hast. Es taucht in meiner unteren linken Ecke auf. Ich klicke doppelt darauf. Es wird zeigen, aber meine Anwendungen und Sie können beginnen, mit Feigenschlamm zu beginnen. Was wirklich ordentlich ist, aber auch, ist aber auch, ähm, ähm, Sie können auch über das Web auf Fig MMA zugreifen. So können Sie hier sehen, ich habe die Datei hier im Web geladen und ich kann durch alle Entwürfe gehen , die ich Ihnen gerade im Web gezeigt habe. Aber für diese Klasse ist es am besten, die lokale Anwendung zu verwenden, also laden Sie die lokale Anwendung herunter. Und das Beste daran ist, dass es kostenlos ist. Es kostet dich nichts. Okay, also geh los und lade die Anwendung herunter, wenn du, ähm, das Video noch nicht pausiert hast und ich weitermachen werde und du kannst dich uns anschließen, nachdem du die Feige heruntergeladen hast . Meine Bewerbung. Alles klar, jetzt, wo Sie Sigma laufen, gehen Sie los und laden Sie die Klassendatei oder den Ordner hier herunter. Es heißt Fig MMA-Datei zum Download und sobald Sie das heruntergeladen haben, können Sie gehen und öffnen. Es hat zwei Dinge drin. Es hat die Figur, eine Klassenakte, die du öffnen wirst. Ich zeige Ihnen, wie Sie das hier in einer Sekunde machen. Und das ist die Datei, die wir für die gesamte Klasse verwenden werden. Außerdem hat es die Schriftarten für die Datei auf dem Design, die wir für diese Boba-Tee-Anwendungserfahrung tun . Und es konnten Sie alle Schriftarten hier sehen. Dies sollte bereits in Ihrer Fig MMA Anwendung installiert sein, aber nur für den Fall, dass es nicht der Fall ist. Sie haben ihn hier. Sie können diese auf Ihrer Maschine aufhalten. Ok. Bevor Sie diese Akte hier öffnen , , gehe ich zum Fig MMA. Der Anfang von Sigma sieht ungefähr so aus. Sie landen auf dieser Seite, Sie haben Ihre Entwürfe, Ihre Plug Ins, Ihre letzte Ihre Suche. haben Sie Die meiste Zeithaben Siehier Ihre Einstellungen. Ich gehe hier in die Entwürfe und mache neue Kunstbretter. Ihre Ausbildungsanwendung mag wahrscheinlich meine, weil sie es hat. Ich habe bereits viele Dateien, die ich benutze, aber Sie könnten die neue Datei hier machen und so erstellen Sie hier eine brandneue Arbeitsdatei Sie gesehen haben, wie ich es hier getan habe. Wenn Sie auf den Titel Hier klicken, erstellen Sie so einen Namen dafür. Sie sagen nur Namen hier und jetzt habe ich einen Namen hier, Datei erstellt. Ich komme in das innere Funktionieren von Fig Mahir. Ähm, aber es ist am besten, einfach die Datei zu öffnen, die ich für dich erstellt habe, und wir werden alle Details durchgehen und lernen, indem wir das tun, was meiner Meinung nach die lustigere Art ist , zu lernen. Okay, jetzt, wo du hier bist und die Akte hast, ähm, wenn du schon in einer Akte in Fig Ma bist, kannst du Teoh hier kommen. Also kommen Sie zu diesem. Ähm, ich klicke oben, wie vier Boxen hier. Meine Figurenanwendung kommt zu mir nach Hause wie Dashboard. Hier, gehen Sie auf den Entwurf Abschnitt hier, und was Sie tun wollen, ist, dass Sie wollen, klicken und ziehen Sie diese Datei hier. Diese Figur, eine Klassendatei, Schrägstrich Boba-Tee in diesen Raum hier, so dass Sie Highlights blau sehen können. Und so werden Sie diese Datei laden und schließlich haben Sie diese Figur eine Klassendatei hier. Ich werde voran gehen und den, den ich gerade erstellt habe, namens Name hier löschen. Deswegen löschen. Also, wenn Sie jemals diesen Raum verwalten wollen, klicken Sie einfach mit der rechten Maustaste auf verschiedene, ähm, Dateien, die Sie in Fig mond erstellt haben. Sie können sie löschen, duplizieren, umbenennen, teilen, ähm, Links kopieren, öffnen. Sie können sie auch einfach durch Doppelklick öffnen. Also, sobald Sie die Abbildung acht Klassendatei geöffnet haben, klicken Sie einfach doppelt hinein und knallten in die Datei hier, ähm gut und folgten mir. Gehen wir einfach zum letzten Prototyp hier, und das wird der gute Abschnitt Teoh sein, um einen Blick auf. Was ich tun werde, ist, dass ich verkleinern werde, indem ich ah, Befehl, wenn Sie auf einem Mac sind oder steuern Sie Ihre auf einem PC minus so Befehl minus für mich und ich mache bereits einige grundlegende Funktionen in fig mo Nur Befehl minus zu verkleinern -Befehl Plus zum Vergrößern. Und wenn ich auch, äh, vergrößern und verkleinern wollte äh, , kann ich Z halten und sehen, wie das mir meine Lupe gibt. Und ich klicke einfach und ich zoomen, klicke und wähle klicken und ziehen, und das wird in der Kunsttafel oder dieser Kunstseite an eine beliebige Stelle auf der Seite zoomen. Ich kann wieder minus Befehl, und die nächste Sache, die Zehe, die wichtig ist, zu lernen, ist, wenn Sie die Leertaste halten, gibt es Ihnen diese kleine Hand, und diese Hand, wenn Sie klicken und ziehen, ermöglicht es Ihnen, sich zu bewegen dieser Raum um ziemlich schnell. sind also einige der Grundlagen wirklich jedes Design-Tools. Ist Ihr Befehl minus Befehl plus zum Vergrößern und beim Vergrößern, haben Sie mit der Leertaste und der Hand aufgefordert, Dinge zu bewegen, um sich zu positionieren. Und dann können Sie Z gedrückt halten, um Orte zu vergrößern, die Sie mehr sehen möchten. Sagen wir mal, ich will dieses Ah, dieses kleine Pfeilsymbol und ich verzehre hier hinten. Okay, also gehen wir weiter und machen wieder einen Spaziergang durch einen Feigenmahir, wie du es vorher gesehen hast. Wenn ich den Namen dieser Designdatei ändern möchte, klicken Sie einfach oben hier. Ich kann den Namen ändern. Ich habe auch alle meine Ebenen hier, die ich Ihnen zeigen werde, wie das hier in einer Sekunde zu tun. Ähm, für dieses Seitensystem hier. Also, welche Figur ermöglicht es Ihnen, zuerst zu tun? Zunächst einmal können Sie Seiten hier auf der linken Seite erstellen. Sie können sehen, dass ich das Lernen habe. Paige, hier werden wir voran gehen und entwerfen, dass die Boba-Tee-Anwendung die Komponentenbibliothek hat . Ähm, Seite hier. Hier werden wir alle unsere Komponenten einsetzen. Das wird wiederverwendet. Bist du das? Ich Komponenten. Es hat den letzten Prototyp. Dies ist die tatsächliche Boba-Tee Anwendungserfahrung, die Sie gerade gesehen haben, bereits gebaut . Bereit in Feige, MMA. Nur für den Fall, dass Sie jemals während des Kurses stecken bleiben oder einfach nur in die Designs eintauchen wollen . habe nicht gesehen, wie ich sie benutzt habe. Ähm, das ist alles für dich da. Ich habe die Designwaren. Dies ist eine Aufschlüsselung all der gleichen Symbole und Fotos, die wir für diese Klasse bereits hier verwenden werden. Und ich habe auch das klebrige Kit. Dies ist das IOS gooey Kit. Und das hat alle Funktionen für Tastaturen für Ihre iPhone-Geräte. Ähm, Benachrichtigungen. Alles da. Wir werden nicht alles benutzen. Aber es ist für dich da, ähm, für zukünftige Projekte, wenn du brauchst. Also, was du tun könntest. Hier ist sagen wir, ich möchte eine neue Seite erstellen. Dies ist ein neuer Workflow, an dem ich arbeiten möchte. Sie klicken einfach auf den Plus-Button hier, und Sie konnten sehen, ich habe eine Seite sechs. Ich werde das einfach so nennen, neue Seite hier und jetzt habe ich einen neuen Kunstraum, in dem ich alle meine Entwürfe hier erstellen kann. Also lassen Sie uns voran und ah, löschen Sie diese Seite hier. Also werden wir diesen Kerl hier löschen. Sie können sehen, ich kann Seite löschen. Ich kann Aiken umbenennen duplizieren. Ich kann auch eine neue Seite machen. Wir werden es einfach löschen. Deshalb fügen Sie Seiten hinzu und löschen Seiten. Jetzt, wo wir hier auf der Lernseite sind,können Sie oben sehen. hier auf der Lernseite sind, Hier haben wir unsere Werkzeuge. Sie haben das Auswahlwerkzeug. Einige verschieben Werkzeuge aus Maßstabswerkzeugen. Sie haben hier das Art-Board-Werkzeug. Es ist ein Rahmenwerkzeug in der Scheibe, um, äh, in diese zu kommen, wie wir es tun. Ich denke, es ist das Beste, wenn , ähm, nur ein Design, wie wir gehen, und ich werde über diese Werkzeuge Maurin geschickt in den Videos hier sprechen und Ihnen zeigen, wie wir sie verwenden. Aber hier ist das Formwerkzeug, um Rechtecke, Linien, Kreise, Lügendetektorsterne zu erstellen Linien, Kreise, Kreise, . Sie können auch Bilder platzieren. Sie können auch einfach ziehen Sie Bilder und ziehen Sie ihn einfach in die Feige MMA auf DATs. Wie du kannst. So neige ich dazu, Bilder in diesem Tool zu platzieren. Sie haben das Stift-Werkzeug, dem Sie jede Form erstellen können, die Sie hier wollen, in die wir mehr gelangen, ähm, wenn wir das Werkzeug benutzen oder wie wir diese Serie von Videos hier machen, haben wir den Kommentar, ähm, Werkzeug, das ich habe, ah, Video gegen Ende hier. Wie man das benutzt. Und dann haben wir die gleichen ähnlichen Einstellungen hier oben. Wir haben die Datei hier suchen offene Datei von einem Browser. Sie können diese Datei als ah speichern, als eine tatsächliche Datei, damit Sie sie aus der Cloud holen können, wie ich es hier getan habe, um, für die Dokumente für diese Klasse, können Sie um, Art Boards exportieren und Sie können die Bildschirme als PDF's. Einige grundlegende süchtige Funktionen wie Kommandositz, ein Kopierbefehl V zum Einfügen. Um, und dann haben Sie einige Ansichtsbereiche, um Raster anzuzeigen. Sie können Ansichts-Layer sehen. Ähm, eine Menge Zeug, eine Menge wie jedes entworfene Werkzeug, das man nicht benutzt. Du wirst das alles lernen. Sie haben einfach die Grundlagen gelernt. Und, ähm, du wirst lernen, wie du lernen musst. Also zeige ich dir ziemlich 90% des Werkzeugs, , das ich benutze und es gibt immer noch einige Dinge, die ich nicht benutze. Ich finde nicht alles hilfreich für, aber sie gibt es einige Optionseinstellungen. Sie haben einige Vektoreinstellungen von Ihnen irgendwelche Vektoren? Ich habe das noch nie benutzt. Nur ein Kopf hoch. Sie haben hier einige Textfunktionen? Kann ich das hier nie benutzen? Ich benutze das Textfeld hier drüben, über das ich kurz hier sprechen werde. Sie haben einen Bereich, der Objekte anordnet. Ich werde das manchmal verwenden, aber ich benutze auch Quickies für diese. Diese Luft wie Zehenartige Ebenenobjekte übereinander und ordnen sie an. Du hast deine Fenster. Selten. Benutze ich das jemals auch? Der Stecker ins oder kühl. Ich benutze die Plug Ins oft. Also, ähm, ich habe ein Video gegen Ende hier, das nur über Plug Ins spricht, die ich bin und wie toll sie sind und dann helfen. Du könntest hier einfach alles suchen, wenn du Teoh, äh, wie Tastatur willst. Und es wird Ihnen Tastaturkürzel hier geben, über die ich am Ende ein Video habe, über das wir sprechen werden. Also, wenn Sie jemals stecken bleiben, können Sie, ah tun die Hilfe hier, Ordnung, und dann machen wir weiter und erstellen Sie einfach ein Rechteck hier. Sie können sehen, dass ich das Rechteck gegriffen habe, um mich hier geklickt und gezogen habe, und Sie konnten die linke Spalte sehen . Hier ist eine Menge mit meinen Ebenen und meinen Seiten hier zu tun, dass Sie, dass ich die richtige Spalte hier hat mit dem zu tun, was ich wähle. So können Sie sehen, das ist eine grundlegende Ich bin auf der Kunsttafel. Es zeigt meinen Hintergrund für die Kunsttafel, einige lokale Stile. Ich zeige Ihnen, wie Sie diese im Video einrichten. Die nächste Reihe von Videos, die tun werden, und ich klicke auf das Rechteck Watch of the stuff auf die Rechte Gonna ändern Boone. Also, jetzt ist es hier in Rechteck-Funktionen geändert, so dass ich die Breite davon ändern kann. Ich halte nur. Sagen wir, ich will 20. Sie können sehen, dass es wirklich klein wird. Lass uns gehen, wie ich es nicht weiß, 2000, wenn wir wollen. Und lasst uns weitermachen und das 2000 auch machen. Wir haben ein Quadrat. Vergrößern Sie das. Also änderte ich die Breite und Höhe dieses Quadrats. Sagen wir, ich will Teoh. Drehen Sie es. Das ist das Drehen. Sie können auch einfach drehen, indem Sie einfach auf die Seite klicken. Hier, sehen Sie, wenn ich meine Maus über die Seite einer beliebigen Ecke schwebe, bekomme ich ein Drehwerkzeug, und wenn ich einfach klicke und ziehe, dreht es Elemente. Aber wenn ich genauer werden möchte, kann ich hier klicken, um zu drehen und spezifischer zu werden. Ich kann auch um Kanten hier krank und sehen, ob ich hier oben um die Ränder gehen und sie werden mehr herumkommen , schließlich drehen dieses Rechteck in einen Kreis. Wenn ich in die unabhängigen Ecken klicke ,kann das vielleicht nur eine Ecke nach dem anderen abrunden. , Sie können sehen, genau die oben rechts dort wird abgerundet und ich werde Mawr tief in diese Funktionen eintauchen ,wie wir mit der Klasse weitermachen. , Aber ich habe hier ein Gefühl. Ich kann die Farben ändern. Sagen Sie, ich will das blau machen. Ich kann einen Volumenkörper in einen Lanier ändern , der ein Grady int ist, und ich habe zwei Farben. Nehmen wir an, ich möchte diese Farbe hier ändern und vielleicht etwas mehr Ah, Lila... und er könnte es bei 0% Deckkraft sehen. Hier ist es in der Vergangenheit. Der Schieberegler macht es transparent, und jetzt haben wir es geschafft. Ein voller Fledge war irgendwie eine schöne Farbe. Ich habe meine Dokumentfarben hier unten, die Sie auch sehen können. Und sagen wir, ich möchte einen Strich hinzufügen, wie ich einen schwarzen Strich hinzufügen möchte. Also hier ist mein Schlaganfall. Sie können sehen, was ich hier getan habe, war, dass ich das Plus gedrückt habe und ich einen Schlaganfall hier hinzugefügt habe. Und dann, wenn ich hier die Strichstärke mehr machen kann, können Sie sehen, dass ich auch dasselbe tun kann, was ich mit dem Gefühl gemacht habe. Ich kann die Farbe ändern. Ich kann es von festem Zeh ändern. Lanier haben unterschiedliche Ausstrahlung. Es macht Spaß. Geh einfach mit diesen beiden herumspielen. Was will ich nur ein solides hier? Ich kann die Farben hier ändern. Gehen wir wie ein dunkleres Blau, okay? Und dann habe ich hier die Transparenz. Wenn ich also das gesamte Bild transparent einstellen möchte, kann ich anfangen, es nach unten zu verschieben. Irgendwann verschwindet es, bewegt sich wieder nach oben. Es scheint, dass ich dasselbe mit meinem Gefühl tun kann. Sie können hier sehen. Ich mache das Feld nur transparent. Ziemlich einfach. Sie drückten nur die Tastatur nach unten Pfeil. Um dies zu tun, können Sie es auch eingeben. Sagen wir, ich will 20 wissen Sie, ich gehe 200 zurück, ich könnte das Gleiche hier für den Schlaganfall tun. 20 wissen Sie, Komprimieren Verschiebung Pfeil nach unten und ich sehe einen Schlaganfall. Geh weg für den Schlaganfall. Aiken, mach ein drinnen. Ich kann ein Zentrum machen. Ich kann auch eine außerhalb ihrer ziemlich einfachen Sachen für die Effekte tun. Hier. Du kannst Schlagschatten machen, solche Dinge. Also hat es hier einen Schlagschatten. Lass uns gehen. Ähm, bewerben. Schlagschatten hier können Sie in unseren Schatten tun. Standardmäßig ist Schlagschatten. Das ist meistens, was die meisten Leute benutzen. Lass uns das machen. Ähm, wir fangen mit 70% hier an, was die Transparenz betrifft. Machen wir es 40 auf der linken oder rechten und 40 auf der Unterseite. Was ist mit der Zeit? Unschärfe darauf und du kannst anfangen, diesen Schlagschatten zu sehen. Und wenn ich die Schlagschattenfarbe ändern will, will ich ein bisschen Blau in den Schlagschatten setzen, wo wir etwas Blau haben. Ich werde die Striche löschen. Aiken löschen. Ich kann den Augapfel drücken und das ist einfach immer noch hält den Schlaganfall durch einfach nicht sehen und Sie komprimieren das Minus hier und ich könnte es einfach löschen. Also jetzt habe ich nur ein Rechteck und ich habe den Schatten darauf angewendet. Ich gehe weiter und klicke auf dieses Rechteck und wenn ich einen Befehl mache, siehe oder ich gehe es hier und ich mache eine Kopie und dann gehe ich und mache einen Befehl V oder editiere und ich füge . Sie können sehen, dass ich gerade ein Rechteck hier eingefügt habe. Ich kann auch die Option klicken und ziehen halten, und ich kann ein Rechteck hier kopieren und wenn ich Shift halte, während ich das tun werde, hält es es in der Linie. Also ist es genau in der gleichen Ausrichtung wie die, die ich kopiere. Hier. Du siehst, dass ich das nicht rausschnappen kann. Aber wenn ich die Schicht rückgängig mache, kann ich das. Aber lassen Sie uns voran und machen diese alle ein bisschen nicht ausgerichtet hier. Also jetzt habe ich drei Rechtecke und Sie können hier auf meinem Panel auf der linken Seite sehen. Hier ist, ich habe diese loswerden. Ich habe gerade gedrückt. Löschen. Ich kann diese Rechtecke auswählen, indem ich diese Ebenen hier drüben klicke, was hilfreich ist, denn wenn Sie beginnen, viele, viele Design-Elemente auf Ihrer Seite zu bekommen , ist es schön zu wissen, dass Sie ihn einfach auswählen können Hier drüben. Ich kann auch die Shift gedrückt halten, und ich kann ein paar davon auswählen. Wählen Sie alle aus. Was ist, wenn ich nur eins und drei dünn will? Ich kann den Befehl gedrückt halten und ich kann einfach eins und drei auswählen. Ich kann auch einfach die hier finden klicken. Klicke auf das Rechteck selbst. Sagte Shift, Klicken Sie auf eine andere und Sie konnten sehen, ich habe diese beiden ausgewählt. Nicht dieser hier, nur die beiden hier. Ich kann die beiden bewegen. Ich kann Shift wieder halten und abgeschnitten und ich habe nur diese ausgewählt. Oder ich könnte klicken und ziehen, und ich kann all diese einfach so auswählen. Und ich kann halten, verschieben und klicken und wieder ziehen und sehen, wie es die Bereiche, die ich klicken und ziehen, nicht isoliert . sind also einige hübsche, wie, wirklich, Grundlagen jedes Design-Tools ist, ähm, in der Lage zu sein, Elemente in einer Farbe zu einigen, streichelte auf einige Effekte, in der Lage, mehrere Objekte auszuwählen. Diese wählen mehrere Objekte aus. Eine andere Sache, die ziemlich grundlegend ist, ist in der Lage, Teoh, richten Sie diese aus, damit Sie sehen können, ich habe alle drei von ihnen ausgewählt und ich drückte die Ausrichtung und Knall. Sie sind alle oben ausgerichtet. Ich kann sie auch führen verteilen, so dass ich hier oben aufgeräumt sagen kann, oder es ist, horizontale Abstände zu verteilen. Und es macht gleichen Abstand von links nach rechts und von links nach rechts hier. In Ordnung, Sie können sehen, dass viele dieser Funktionen, die ich gerade gezeigt habe, Sie waren auch, ähm, bei der Einrichtung hier oben, Objekt-Einstellungen. Sagen wir, ich habe Ah, ich werde eins davon nur schwarz machen. Ich werde wieder zu solide gehen und einfach einen schwarzen machen, und dann werde ich das hier machen. Ich werde das hier wieder zu einem soliden machen und einfach das hier machen. , Alle Farben,die von mir gefunden werden, machen es rosa für diesen Fall. Jetzt können Sie meine Schichtung hier sehen. Also habe ich das Rosa auf der Oberseite. Ich habe den Grady in der Mitte des Schwarzen auf der linken Seite. Ich möchte einen dieser Ebenenringe ändern. Ich kann zum Objekt gehen und ich kann nach vorne bringen. Also, was auch immer ich ausgewählt habe, ich habe dieses Quadrat ausgewählt, das ich nach vorne bringen konnte und Boom gebracht wurden. Wir haben das auf die Titelseite gebracht. Wenn ich es mitbringen will , , gehen wir weiter und sagen, ich will jetzt diesen rosa heraufbringen. Ich muss etwas dagegen tun. Bringen Sie nach vorne und ich sehe, dass es nach vorne gegangen ist. Wenn ich das den ganzen Weg nach hinten schicken will,kann ich nach hinten schicken und er räumt zu. Wenn ich das den ganzen Weg nach hinten schicken will, Und wenn ich es ansprechen will, werde ich vorbringen und du siehst, wie ich das vorgebracht habe . Ich kann auch dasselbe tun, indem ich auf die Ebenen klicke und die Ebenen ziehe, damit du siehst , dass ich die Ebenen nach oben ziehe und das Rosa hier ganz nach oben bringe. Ziemlich einfaches Zeug. , Nehmen wir an,ich möchte dieses Element hier umdrehen. Was macht man? Ähm, ich werde eine der Ecken hier eine andere Form haben, und ich will sie umdrehen. Gehen Sie einfach zum Objekt, wechseln Sie horizontal, und Sie werden sehen, dass es horizontal gedreht wird. Oder ich könnte es auch vertikal drehen. Und ich habe, dass ich auch tun kann. Ihre Drehung hier ist gut, aber ich mag es, die Drehung zu machen, nur indem ich meine Maus hierher schiebe und sie einfach so dreht . Okay, cool. Das war also ein kleiner Überblick über die Grundlagen von Fig MMA, dem Design-Tool. Lassen Sie uns ein wenig über die Struktur dieser Datei reden, die ich Ihnen gegeben habe. Also haben wir die Seiten hier, wir werden alles in diesem Lernen erschaffen. Paige, hier oben links. Wir haben die Komponenten-Bibliothek-Seite, um alle unsere Komponenten zu setzen. Sie haben hier den letzten Prototyp. Im Wesentlichen wird diese Lernseite, die wir an der Spitze haben, irgendwann wie diese Datei hier aussehen , aufgeschlüsselt in die vier Szenarien, die ich hier oben beschriftet habe. Dies sind nur ein Quadrat mit Text darauf. Das hilft mir, mir, meine Akten zu organisieren. Sie haben also das Protokoll und die Datei hier. Hier haben Sie die Bestellszenarien. Der Check out hier und die Profilbildschirme hier. Also, die sind schon alle in der Akte? Prototypen. Sie können sehen, ob Sie hier auf den Prototyp-Tab klicken und ich klicke und ziehe diese hier. So konstruieren wir unsere Bildschirme zusammen, was ich Ihnen in der nächsten Datei oder im nächsten Video zeigen werde. Aber Sie können sehen, dass alles für Sie da ist. Ähm, aber der beste Weg , um das zu erfahren, ist eigentlich nur, dass wir das neu erstellen, aber es ist ein Sicherheitsnetz. Wenn du es brauchst, habe ich vielleicht alle Designwaren hier drüben, und so haben wir schon immer alles, was du brauchst, hier ist gut , um und ja, und ohne weiteres denke ich, Wir sind bereit, weiter zu gehen und in den nächsten Abschnitt dieses Videos zu starten, das heißt, wir werden lernen, wie man mit dem Entwerfen dieser mobilen Anwendung beginnt, und wir werden mit beginnen, sich anmelden und den Workflow anmelden. Also noch einmal, ich möchte Ihnen danken, dass Sie die Klasse genommen haben und ich werde Sie auf dem nächsten Video sehen. Kümmern Sie sich. 3. Entwerfen der login und the + component Prototyping und intelligente Animation: In Ordnung, willkommen in der nächsten Klasse. Das wird also die lustige Serie von Videos sein, in denen wir diese mobile Anwendung entwerfen . Die Boba Tee Bestellung auf Abruf App, die Sie im letzten Video gesehen haben. Und was wir tun werden ist, dass wir anfangen, einloggen und den Workflow anmelden. Und während wir das tun, lernen wir, wie man eine Komponentenbibliothek erstellt und verwendet und lernen auch, wie man den anklickbaren Prototyp erstellt und freigibt. Lasst uns weitermachen und anfangen. , Was wir hier tun werden,ist, gehen wir zu den Designprodukten hier, die Sie haben, und was Sie hier tun wollen, ist, wenn Sie dieses Kunstboard hier herauszoomen, diejenige, die besagt, dass Designwaren nicht auf die Innenseite klicken, klicken Sie auf , klicken Sie auf die Kunsttafel selbst. Sie können hier diese Designwaren sehen oder ich kann auf die Schicht hier auf der linken Seite klicken, die Designwaren sagt . Und das ist ein Klick auf die gesamte Kunsttafel. Gehen Sie voran und klicken Sie, dass Sie einen Befehl ausführen, sehen oder steuern können. Sehen Sie, ob Sie sich auf einem PC befinden. Aber Befehl, siehe, für Mac oder Sie können gehen, um Kopie zu bearbeiten, Sie auf die Lernseite hier und gehen Sie voran und Tempo, dass. Kopieren Sie das noch einmal und fügen Sie das hier ein, damit Sie alle Elemente sehen können, die wir dafür verwenden werden . In Ordnung. Und die Seiten, die wir hier entwerfen werden, sind die Figur aus dem letzten Prototyp-Link . Hier sind diese Siri alles unter diesem schwarzen Balken, der anmelde dich an und melde dich an. Sie können alle hier sehen, also kopieren Sie diese nicht. Ich werde ein paar dieser Elemente hierher bringen. Nur damit ich mich daran erinnere, was ich Ihnen zeigen soll, während wir unsere Reise zum Aufbau dieser Anwendung fortsetzen . Alles klar, gehen wir. Der letzte Prototyp. Ich werde dir sehr schnell zeigen, wie das in der finalen Version dieses Videos aussehen wird . Wir machen einen Ladebildschirm mit der Karte. Wir werden die Anmeldung machen, Registerkarten einfach so registrieren. Und dann werden wir diese Formulare hier erstellen und klicken Sie auf oder tippen Sie auf die E-Mail und Name Formular tippen Sie auf die Tastatur, setzt die E-Mail in, klicken Sie auf das Passwort, öffnet die Passwort-Eingaben, die Sie nicht leben können in Abb. MMA hat diese Funktionalität nicht, wo ich lebenund etwas eingeben kann und etwas leben . Sie sind also eine Art Prototyping oder verspotten, wie diese Erfahrung aussehen wird, sobald sie entwickelt wurde, und dann könnten Sie auf der Tastatur tippen. Aber die meisten Prototyp-Tools haben diese Funktionalität nur, wenn Sie echten Code verwenden. Und so werden wir bis zu diesem Punkt kommen, ähm, und wir werden dort anhalten. Okay, das erste, was wir tun werden, um, um, dass wir lernen werden, ist, wie man ein Kunstboard kreiert. Also geh weiter und geh rüber zur Lernseite hier, und was du tun willst, ist nach oben links zu gehen. Hier. Es gibt dieses Werkzeug hier, das als Rahmen bezeichnet wird. Klicken Sie auf den Rahmen und Sie sehen auf der rechten Seite hier funktioniert wie entworfen. Sie haben eine ganze Liste von, ähm, ähm, Art Board-Größen, die Sie leicht in Fig MMA erstellen können. So hat es Telefon hat Tablets hier, siehe iPad. Mini iPad Pro verfügt über einen Desktop. Sie suchen ein Design für ein Mac-Buch. MacBook Pro Surface Buch Ein I Mac hat Vorlagen hier gesehen hat Papier, hat soziale Medien für diesen Fall können Sie. Sie können auch einfach klicken und ziehen und jede Art von Kunstboard Größe, die Sie wollen. Und man könnte hier die Größen mit und Höhe manipulieren. Also lassen Sie uns einfach sagen, ich möchte, dass dieses Kunstboard 100 mal 100 eine kleinere Kunstplatte von einem Zoom in auf, dass ziemlich einfach wieder sein . Klicken Sie hier, erstellen Sie den Rahmen für unseren, ähm, jeden Rahmen, den Sie wollen. Aber für unsere Zwecke hier, Ich werde wählen, diese beiden sind Boards und löschen Sie es. Wir benutzen hier das iPhone X. Also gehen wir zu, ähm, ähm, das iPhone 11 Pro X und klicken Sie einfach darauf und Sie können sehen, dass es automatisch die Art Board-Größe hinzugefügt hat, die einem iPhone X zugeordnet ist, das Sie haben. Ich kann dies auch unser Brett bewegen, indem ich einfach oben klicke und es ziehe. Also werde ich es hier aufstellen, richtig? Und das erste, was ich in diesem Kunstboard machen möchte, wenn ich es ausgewählt habe, ist, dass ich zu diesem Gefühl hier kommen will, und ich möchte auf das Feld klicken und ich werde das alles schwarz machen. Ziehen Sie diesen Punkt hierher, bis zur unteren Rate. Und was das getan hat, ist, dass der Hintergrund dafür schwarz war. Sie können es jede Farbe ändern, wenn Sie möchten. Wir werden Schwarz für diese Einstellung verwenden. In diesem Moment haben Sie gerade gelernt, wie man einen Mann kreiert, ein Kunstboard, das spezifisch für ein iPhone 11 Bildschirmgröße ist. Oder Sie können Kunsttafel jeder Größe erstellen, die Sie möchten. Und dann haben wir gelernt, wie man die gelangweilt, hier sieht man eine Schicht, ähm, ähm, auf unserer neuen Kunsttafel hier drüben, Schicht. Wenn Sie in diese Ebene klicken, können wir sie benennen. Lass uns weitermachen und dem einen Namen geben. Was sagen, das ist der Ladebildschirm und Sie können hier sehen, ich kann die Füllung ändern, also klicke ich einfach heraus. Klicken Sie wieder hinein. Ich kann das Gefühl hier ändern. In Ordnung. Das nächste, was ich Ihnen zeigen möchte, ist, wie Sie speichern oder wie Sie eine Farbe erstellen und speichern, die während dieser Erfahrung wiederverwenden können. Also haben wir schwarz, was eine Hex-Farbe ist. Ähm, wir haben es. 000000 ist der Hexx-Ton, den wir hier machen werden, ist, dass wir auf die kleinen vier Punkte klicken , die Sie sehen, und wir haben eine Sache namens Farbstile. Ich habe bereits einige hier beschriftet, dass Sie jetzt keine haben, und das ist völlig in Ordnung. Wir werden das zusammen machen. Also gehen Sie weiter und drücken Sie die Plus-Taste hier, sehen Sie, wo es heißt, Stil erstellen. Und was das tun wird, wird eine schwarze Farbe schaffen, die wir wiederverwenden können. Also lassen Sie uns das schwarz nennen und gehen Sie weiter und drücken Sie den Create Style Button über gehorchen bada Boom. Und ich habe hier einen schwarzen Stil, wenn ich an diesem schwarzen Stil will, alles, was ich tun muss, ist darauf zu klicken. Wenn ich hier in die Kunsttafel klicke, haben Ähm und ich nichts auf der Registerkarte Design ausgewählt. Es zeigt mir nur mein Dashboard, das alle Stile zeigt, einschließlich Farbe und Textilien. Wahrscheinlich haben Sie noch keine Textilien. Das ist okay. Wir werden die zusammen aufstellen. Wenn ich also hier das Schwarz ändern möchte, klicke ich einfach auf das schwarze Rechtsklick auf das Schwarze und dann siehst du diese kleine Einstellung hier, drücke die Einstellungen und ich kann diese schwarze Eigenschaft ändern und sehe, wie es sich bereits auf Mein Kunstbrett. Also, wo diese schwarze Farbe lebt, ich habe viele Kunsttafeln. Ich kann es an einem Ort ändern, und es wird sich auf allen Bildschirmen ändern, was ich Ihnen hier in einer Minute zeigen werde. Okay, also, ähm, wir haben jetzt unseren ersten Bildschirm mit dem schwarzen Hintergrund. Was wir hier tun wollen, ist, zum Abschnitt „Design Good“ zu kommen und sich die Informationen zu schnappen . Es sind die Einstellungen und Batterie und Zeit, die auf Ihrem iPhone lebt, und Sie können den Tab hier sehen. Ich habe das aus dem klebrigen Set. Wenn Sie hier auf die Design-Seite gehen und Sie können alle diese Einstellungen hier für die Statusleiste sehen , um, die Einstellungen Prozentsatz der Akkuzeit WiFi, diese alle geändert während Ihres mit einem iPhone. Ich gehe normalerweise nur mit der Zeit in der Batterie an der Spitze, und es macht es sich mehr wie eine riel Live-Anwendung anfühlen, die Sie verwenden, was das Ziel dieser Tools ist, die tatsächliche Software zu imitieren, obwohl es nur Bildschirmdesigns , die es uns ermöglicht, schnell an einem Analphabeten zu testen und zu lernen und dann schließlich diese Anwendungserfahrungen mit Ingenieuren mit echtem Code aufzubauen und schließlich eine Anwendung auf den Markt zu bringen und Unternehmen zu gründen. Okay, also gehen wir zurück zu unserem Lern-Tab hier. Ich habe bereits diejenige erstellt, die brauchen wird. Also, nur wenn Sie hier darauf klicken und gehen Sie voran und machen Sie einen Befehl, sehen und gehen Sie zurück zu Ihrem Kunstboard hier, Sie können sehen, dass ich zoomen in halten Z, und dann verwende ich meine Leertaste wieder, um sich zu bewegen. Jemand zoomen Sie hier sogar noch enger hinein, indem Sie nur Z klicken und ziehen. Und ich werde das beschleunigen. Jemand macht einen Befehl V oder Sie können gehen, um zu bearbeiten Einfügen bis zu Ihnen, die das eingefügt. Hier. Ich werde das hier ganz oben setzen, genau so. Das sollte gut sein. Sie können sehen, dass dies bereits auf der rechten Seite ist. Ausgewählt. Es hat die feste Position beim Scrollen, stellen Sie sicher, dass das Kontrollkästchen aktiviert ist. Wir wollen nicht, dass sich diese Statusleiste bewegt. Wir wollten es in Ordnung halten. Das bleibt immer in dieser Position oben auf Ihrem iPhone-Gerät. Ich werde verkleinern, indem ich hier einen Befehl Minus mache. Und das nächste, was wir hier machen, wenn du willst. Wenn Sie zum letzten Prototyp-Tab zurückkommen wollen und einfach überprüfen, was wir hier bauen. Wir bauen hier diesen Bildschirm aus. Hat die Karte. Hat die Statusleiste hat dieses coole Symbol dieser Boba Tee hat das Boba Tee-Logo und es hat diesen Ladetext hier. Gehen wir zurück zur Lernseite hier. Lasst uns diese Karte hier schnappen. Ich habe die, die bereits beschnitten wurde, und ich werde Ihnen zeigen, , wie Sie das beschneiden, wenn Sie diesen Abschnitt hier bekommen wollen. Also gehen Sie vor und greifen Sie das Bild nach links. Hier können Sie sehen, dass es eine Ernte gibt, die ich oben angerufen habe. Gehen Sie weiter und klicken Sie auf das und ich kann das jetzt in ziehen und ich kann ein Bild, das Sie hier sehen können , zuschneiden Ich habe ein Bild drücken Sie zurück und es schneidet es drücken Sie Befehl Z oder bearbeiten Rückgängig. Und es geht zurück auf die Schritte, die ich getan habe. Wenn Sie gehen Befehl Shift. Sehen Sie, was Redo hier sehen kann. Und Dicke. Schön. Weil es diese hat, um es hat die Schnelltasten hier, neben Ihren Funktionen. So wie Sie sich so gewöhnen, ist es am besten, die Quickies zu lernen. Und du kannst das ziemlich schnell durchziehen. Jemand ein Kommandowechsel. Sehen? Und ich habe das hier unten beschnitten. nun Wenn ichnunauch das Bild innerhalb dieses Zuschnitts nach unten verschieben möchte, kann ich weiter gehen und wieder auf das Zuschneidewerkzeug klicken. Und einfach, indem ich auf die Innenseite meiner Beschneidung klicke, kann ich dieses Bild bewegen. Und wenn ich dieses Bild auch ein wenig in die Luft sprengen möchte, kann ich die Ecken dieses Bildes greifen und skalieren. Normalerweise ist es beim Skalieren am besten, Shift zu halten, damit Sie Ihr Bild nicht verformen. Wenn Sie also Shift halten, hält es die Perspektive Ihres Bildes. Einige halten Shift gerade jetzt auf Ziehen meiner Maus nach oben und unten und ich bin Downsizing und auf den Kopf . Er ist, ich skaliere mein Bild. In Ordnung. Das nächste, was hier ist, können Sie sehen, wenn ich in das Zuschneidewerkzeug ging, öffnete es automatisch die Bildfunktionen hier, Also lassen Sie mich ein wenig darüber sprechen hier in einer Sekunde. Also, wenn ich auf die Phil hier hat das Bild auf dieser Box und ich klicke darauf, können Sie sehen, ich bin in der Ernte Bereich gerade jetzt. Ich kann das auch ändern. Ich kann das Bild an dieses Quadrat anpassen. Ich spüre es. So fühlt es sich an den Platz. Also skaliere ich es. Es ist das Gefühl, dass Raum ich es kacheln kann, was ich nie wirklich nutzen würde, aber es wird das Bild kacheln. Also, wenn ich es so skaliere, können Sie irgendwie cool alle Fliesen sehen, die passiert. Stil ist irgendwie wie Ihre Bodenfliese. Wissen Sie, es nimmt einen Abschnitt, und es kopiert es den ganzen Weg vertikal und horizontal. Ich habe auch einige Engine-Image-Einstellungen hier. Erlauben Sie mir , die Farbe in diesem Bild hinzuzufügen , , und ich kann hier die Transparenz ein wenig zurückziehen. Ich habe die nie benutzt, , also neige ich normalerweise dazu, mich von diesen fernzuhalten. Gehen wir weiter und gehen zurück. Wenn ich also zurück gehe und ich diese Form der Farbe füllen wollte,kannst du sie sehen, füllen Sie sie mit der Farbe würde zurück zum Bild hier gehen. Wenn ich also zurück gehe und ich diese Form der Farbe füllen wollte, kannst du sie sehen, Ich halte es immer auf dem Bild. Ich habe auch nie wirklich Fliesen so oft benutzt. Ähm, ich habe es normalerweise so eingerichtet, dass es fit ist, und wir können zurück zu unserer Ernte gehen, wenn du diesen Kerl wieder beschneiden wolltest . Une Zewe, um Ihre Bilder zu ändern. Hier ist, wenn ich auf dieses Bild klicken, sehen, wo es sagt wählen Bild. Ich kann klicken und ich kann ein anderes Bild auswählen. Sagen wir einfach für diesen Fall, ichwähle hier eines meiner ich Bilder aus. Lassen Sie uns auswählbares Bit t t Bild so gehen und ich habe gerade dieses Bild ausgetauscht. Aber es ist, ähm, es ist fit und in diesem Raum zugeschnitten, damit Sie sehen können, dass es das Bild ein wenig interpoliert hat. Okay, einige grundlegende Funktionen von Bildern und Zuschneiden. Ich gehe nur zurück in den Raum, den wir hier haben. Aber um des Designs willen, gehen wir voran und greifen dieses Bild, das ich bereits beschnitten habe, und lassen Sie uns es in dieses Kunstboard einfügen . Wenn ich also etwas in eine neu geborene Kunst bezahlen möchte, klickte ich oben links, die das Kunstbrett ist. Ah, Layer. Und ich mache einen Befehl V. Sie können sehen, Sie können gehen einfügen Hier ist gut Befehl V. Und da ist die Karte. Jetzt möchte ich diese Karte einstellen. Unter dem Ah könnte man sehen,dass es unter der Statusleiste hier sein sollte, was es ist. Unter dem Ah könnte man sehen, dass es unter der Statusleiste hier sein sollte, Ich möchte auch die Transparenz etwas absetzen. Du siehst, dass ich die Transparenz nach unten schiebe. Sagen wir etwa 20% hier. Ich drücke nur. Geh nach unten, schieb nach oben. Wenn Sie die Verschiebung rückgängig machen, erhalten Sie die tatsächlichen ah, Inkremente. Und wenn Sie Shift halten, gibt es Ihnen Inkremente zum 10. So 2030 40 50. 60. Machen Sie 20 hier. Das sieht gut aus. Okay, jetzt schnappen wir uns das Boba-Tee-Logo hier in ganz rosa. Also werde ich mir das Pressekommando V schnappen ich gehe zurück zu meinem Kunstbrett hier. Ich werde es direkt in die Mitte einfügen. Sie können sehen, dass es automatisch ausrichtet, ähm, horizontal vertikal zentriert für mich oder horizontal zentriert. Und genau da muss es perfekt sein. Genau so, als ob das in Ordnung ist. Das nächste, was ich für diesen Ladebildschirm hinzufügen werde, ist, dass ich hierher zurückkomme. Ich werde das schnappen. Boba Tea Illustration hier. Gefangenes Kommando. Sehen? Kopieren Sie es. werde hier rüber kommen, und ich werde es direkt oben kleben. Befehl V zweite Kopie ist Befehl C und Befehl V einfügen. Nächstes Mal, wenn wir tun, werde ich das Textwerkzeug verwenden. Also ist das Werkzeug hier oben links Das hat den Tee drauf ist das Textil. Ich klicke drauf. Und so kann ich Typografie in meiner Anwendung erstellen. Also, jetzt habe ich darauf geklickt. Ich klicke und ziehe auf die Withs meiner Kunsttafel hier genau so. Und ich werde das Wort laden eingeben und wir machen drei Punkte. Ich werde auch das ändern, Phil hier auf der unteren Zehe weiß, damit du sehen kannst, dass es jetzt geladen wird. Und lassen Sie uns in einige Textattribute, ähm, und Textfunktionen, die wir jetzt tun können, indem Sie das Gefühl auf dem Text hier drücken. Ich kann das ändern. Jede Farbe, die ich will. Ich habe die Farbleiste hier. Ich zog diese Aiken wählen Farben und ich kann auch Transparenzen hier machen, alle innerhalb dieser Farbeinstellung und ähnlich den Farben, die ah, sind die, ähm, die Quadrate, die ich Ihnen in der Vergangenheit Video gezeigt, wo Sie könnte sie Grady Intel in der Nähe machen , Ähm, Sie können das genauso wie Text tun. Obwohl ich es nicht empfehlen würde. Ich setze normalerweise keinen Glanz und Text ein. Ähm, der Großteil Ihres Designs dient der Kommunikation. Also, ähm, wenn deine Typografie Grady im Senat hat und schwer zu lesen ist. Und das Ziel der Typografie ist Teoh, es zu lesen und zu helfen, die Person zu erziehen, ähm , die diese Anwendung verwendet oder ihnen Kontext zu geben. Also, ähm, nochmal. Und benutze die linearen Grady Ameisen nicht so für dein Texas. Du solide. Ich werde jetzt weiß benutzen. Gehen wir weiter und sagen, ich will das ein bisschen in die Luft sprengen. Gehen wir weiter und sagen, Ich möchte diesen Text größer machen. Jemand in der Nähe. Der Phil hier muss ich nicht tun, ist das Textfeld auszuwählen, das ich habe und hier sehen, wo es 15 sagt. Ich kann anfangen, das hochzustoßen. Lass es uns 18 machen und du kannst auch drauf hinuntergehen. So verringern und erhöhen Sie Schriftarten, Schriftgrößen, diese unten. Es wird Buchstabenabstand genannt, und das ist der Abstand zwischen den Buchstaben. Ich will das ein bisschen hoch machen. Lassen Sie uns acht dort ein wenig leichter zu lesen, wenn es so angeordnet ist. Okay, und lassen Sie uns diesen Text hier setzen, um eine Transparenz zu seiner,sagen wir, 50% Transparenz zu haben sagen wir, . Eigentlich, nein, lass es uns 100 behalten und lass uns wirklich aussuchen. Stimmen Sie zu, dass wir verwenden können. Also, wenn wir grasen, ich mag in der Regel ein wenig blaue Färbung in mein Grau zu setzen, anstatt nur grau. Ähm, die blaue Färbung hilft, der Anwendung ein wenig moderneren Ton hinzuzufügen, also werde ich wählen. Ähm, jedes blaue Grau wie das ist in Ordnung. Jedes Blau wird funktionieren. Es kann wie ein kühles Blau oder dunkleres Blau sein, oder sogar ein Blaugrün, wenn Sie wollen, aber gehen Sie einfach mit dem normalen Blau. Sagen wir das ein wenig später. Okay, machen wir das richtig. An dieser Stelle möchte ich diese Farbe speichern, also möchte ich diese Farbe wieder verwenden. Also, wie er das vorher gemacht hat, ist es. Wir klicken auf die vier Punkte hier, das Menü für Füllungen. Und wir hatten dieses kleine Plus hier auf einer Presse plus und ich werde das cool grau nennen. Sie können ihm einen beliebigen Namen geben, den Sie wollen, McCall Mind cool, grau. Und ich werde diesen Stil kreieren. Und jetzt kann ich diesen Stil jederzeit wiederverwenden. Sie können sehen, wenn ich darauf klicke, es hat die kühle graue Farbe. Wenn ich diese Farbe zum Beispiel nicht verwenden möchte , wollte ich etwas anderes ausprobieren. Du klickst hier auf diesen Lösen und löst ihn jetzt ab. Und ich kann zurück in die normale Farbeinstellung gehen, die wir hatten. Aber das will ich nicht tun. Ich will es nur so cool halten. Grau für jetzt. Alles klar, großartig. Also haben wir hier den Ladebildschirm. Ich gehe durch meine Checkliste, um sicherzustellen, dass ich dir alles gezeigt habe, was wir durchgemacht haben. Was wir gelernt haben, waren einige Typografie-Einstellungen. Wir haben einige Farbe gelernt, wie Grady INts zu verwenden, Größe, Text und Bildgebung Zuschneiden, Erstellen von Farbstilen. Ähm, und dann kommen wir in, um einige der Komponenten auf dem nächsten nächsten grünen hier zu erstellen, ich nur der nächste Bildschirm, den wir aufbauen werden, ist, wenn du wieder auf den letzten Prototyp klickst , werde ich zeigen Sie es Ihnen. Ist das Boba? Melden Sie sich an und melden Sie sich hier an. Gehen wir zurück zu unserem Lernen Paige hier. Alles klar, jetzt sind wir schon nicht mehr an Bord. Sie können hier sehen, dass der schwarze Hintergrund hat und einige, ähm, und die Statusleiste hier eine Swell. Anstatt ein weiteres neues Kunstboard zu erstellen, indem wir das Rahmenwerkzeug hier verwenden, Was wir eigentlich tun wollen, ist, dass wir nur dieses Kunstboard kopieren wollen. Es gibt also ein paar Möglichkeiten, wie wir das kopieren können. Ich kann hier oben klicken. Sie können sehen, wenn Sie auf die Kunsttafel bei Highlights blau gegen alles, was ich bin. Ah, klicken Sie auf und wählen Sie innerhalb der Kunsttafel selbst. Aber in diesem Fall wollen wir das gesamte unser Board auswählen. 2. Klick, ich kann weitergehen, bewegen und ziehen, dass unser Bericht um. Aber ich möchte es kopieren, damit ich eines Tages einen Befehl ausführen kann, sehe, sehe, und ich kann einen Befehl V machen. Und es kopiert das Kunstbrett automatisch für mich und platziert es rechts davon, ähm, unser Brett nach links. Hier können Sie einen anderen Weg sehen, wie ich dies tun könnte, ist ich auf das Kunstbrett klicken, Halten Sie Option, bis ich den Doppelpfeil zu bekommen. Sie können hier den Doppelpfeil klicken und es nach rechts ziehen und dann loslassen. Und wenn ich loslasse, habe ich das auch kopiert. Also noch ein Mal auf dem einen. Ich klicke und halte die Option gedrückt, bis ich den Doppelpfeil bekomme. Und wenn ich Shift halte, hält es das so ausgerichtet, dass ich mich nicht bewegen kann. Sie können senden bewegen meine Maus nach oben und unten, aber ich werde nicht zulassen, dass ich dieses Kunstboard von der Ausrichtung entfernen, wo, wenn ich Verschiebung rückgängig machen, kann ich es so viel bewegen, wie ich will, um jemanden zu verschieben, weil Sie Ihre unsere Boards online wollen . Willst du ein sauberes, organisiertes Layout haben? Richtig, jetzt habe ich den neuen Ladebildschirm. Nennen wir das Laden. Lassen Sie uns dies den Anmeldebildschirm hier nennen, so dass, wenn Sie nur doppelklicken Sie auf die Ebene und Sie tun, Sie melden sich an. Nun, du loggst dich ein und meldest dich an, weil es beides in Ordnung ist, Cool. Also, dieser Punkt, lasst uns anfangen, einige Dinge zu entfernen. Also lasst uns den Boba-Tee entfernen. Lassen Sie uns die Karte entfernen. Ich werde das behalten. Ähm, dieses Laden würde es tatsächlich löschen, um neu zu beginnen. Okay, Cool. Also lassen Sie uns voran und greifen das Logo, das wir hier haben, das die weiße hat und sehen Sie hier und tun Sie einen Befehl. Sehen? Kopieren Sie es. Ich werde es zu der anderen Kunsttafel schwenken, die ich hier habe und einen Befehl v tun Alles klar. Genau so. Und das nächste, was ich tun möchte, ist, dass ich das Textwerkzeug hier greifen möchte, und ich möchte die Anmelde- und Anmelde-Tabs erstellen. Also habe ich hier auf das Textil geklickt. Ich klicke und ziehe mich an irgendwohin. Die Mitte ist in Ordnung. Ich werde Anmelden eingeben. Ich werde alles machen, was ich gerade mit meinen Kappenblöcken getippt habe. Machen Sie dies weiß und Sie können leicht Text hier ändern, indem Sie tun. Sie können hier mit dem Textmenü oben die Großbuchstaben ändern, indem Sie zur Originalschreibung gehen , hier können Sie auch Großbuchstaben oder Großbuchstaben machen. Ich will meine Nummer behalten. Fall. Alles klar, cool. Also haben wir uns hier angemeldet und was ich habe, ist bei Roboto Bold 19 Punkte eingestellt. Lassen Sie uns voran und erstellen Sie dies als Zeichenstil, den wir in dieser Anwendung verwenden und wiederverwenden können . Wie man das macht, ist ähnlich wie wir den Farbstil erstellt haben. Hier auf der rechten Seite in diesem Textdialogfeld sehen Sie ein wenig vier Punkte. Ich werde darauf klicken und habe bereits einige Textilien und Charakterstile hier erstellt. Du siehst ihn vielleicht nicht, siehst ihn vielleicht nicht, aber was du hier tun könntest, ist ein neues zu schaffen und lass uns das einfach nennen. Manchmal nenne ich sie einfach, was sie sind. Dies ist eine Höhe von 19 Punkt oder Pixel auf dem rechten Punkt, und es ist fett. Da gehst du. Nun, warum das hilfreich ist, sagen wir, ich benutze das Textwerkzeug erneut. Der schnelle Etem Befehl, den Sie verwenden können, um das Textwerkzeug zu greifen. Ziemlich einfach, seinen Tee und man kann sehen, wenn man darüber schwebt. Es gibt dir den Quickie. Etwas von Presti. Wenn ich noch mal was tippe. Sagen wir mal, ich mache das hier außerhalb der Kunsttafel. Also mache ich den Text hier, und ich tippe einfach einen ein. Wenn ich Männer erschaffe, drehen Sie auch diesen Zehen-Kleinbuchstaben. In Ordnung. Und wenn ich diese Schriftart auswähle und ich gehe in den Text hier und ich schnappe, dass Attribute, die wir den Zeichenstil erstellt haben , sagen 19 Punkt fett, es wird automatisch die Einrichtung dieses Zeichens, und ich kann es in weiß ändern. Und ich habe die gleiche Schriftgröße und den gleichen Charakter und Textil wie die, für die ich hier erstellt habe . Melden Sie sich an. Richtig. Also, was ich tun werde, ist, dieses Schild hier zu kopieren. Ich werde die Option halten, klicken und ziehen Sie nach rechts, und Sie können sehen und sagen, dass sie sich direkt in der Mitte treffen. Sie können genau dort sehen, und es wird diejenigen, die Bindung Box schnappen. Das Textfeld für die Anmeldung, das ich gerade kopiert habe, wird an dem ursprünglichen, von dem ich kopiert habe, gefangen . Ich werde beide packen und ich werde einfach meine Pfeiltaste auf meiner Tastatur benutzen und die einfach ein wenig nach links bewegen, nur damit sie beide ausgerichtet sind und du siehst, dass sie beide auf der Seite zentriert sind. An diesem Punkt werde ich wieder ins Gesetz tippen. Und jetzt werde ich diesen Stil brechen und ihn aus dem Charaktertextil-Dialogfeld hier machen und es zu einem regelmäßigen tatsächlichen machen. Lass uns ja, lass es uns regelmäßig machen. Ich werde es auch auf etwa 40% Deckkraft hier ändern, also können Sie das sehen. Also noch einmal habe ich den Login geschnappt. Ich habe es von der Textil gelöst, die wir hatten singt, um den freistehenden Stil. , Das erlaubt mir,jeden Fehler zu machen, den ich will. Wenn Sie andere Schriftarten auswählen möchten, können Sie ihre Schriftarten selektieren, aber wir verwenden Roboto für diesen Fall, und ich werde es in eine normale ändern. Du kannst sogar Licht machen, wenn du es wolltest. Gehen wir mit Licht. Ich werde die Deckkraft auf 40 entfernen. Vielleicht 50. Nun, das sieht gut aus. Okay, das nächste, was ich tun werde, ist, dass ich das Rechteck-Werkzeug schnappen werde. Also habe ich oben links hier, und ich werde eine kleine Linie erstellen. Also, was ich tat, war, dass ich das Rechteck-Werkzeug packte. Ich zoomte in ein wenig und ich habe geklickt und gezogen und ich habe eine kleine Linie hier, wo ich Rechteck hier wirklich dünn. Nun, was ich tun werde, ist, dass ich diese Farbe ändern werde, um so rosa zu sein. Also, was ich tun könnte, ist, ich will ah, Farbe, die ich bereits in meinem Design sehe, ich kann versuchen, es hier zu wählen, um es zu passen. Sie können auch einfach die Pipette hier greifen und den Mauszeiger über jede gewünschte Farbe bewegen und darauf klicken . Und es wird automatisch diese Farbe für Sie einen anderen Weg machen. Sie können die Farbe hier hinzufügen ist ich auf dieses Element klicken kann ich kopieren und Tempo. Es ist Hex-Wert hier drüben Befehl. Sehen Sie, Ich kann auf dieses neue Rechteck klicken, das ich erstellt habe, und ich kann v drücken Rückkehr auf der Tastatur Befehl , und ich habe die gleiche Farbe. Die Art und Weise, wie ich dies mache, ist, lassen Sie uns voran gehen und einen Farbstil erstellen. Jetzt, wo ich das Auto habe, das ich wiederverwenden werde, und das wird eine Aktionsfarbe sein, also ist das die Farbe, die Knöpfe sind. Sie werden meist alles sein, was in der Anwendung klickbar ist, die wir mit dieser primären Aktionsfarbe erstellen möchten . Also jetzt habe ich die Farbe. Ich werde voran gehen und auf unseren kreativen Stil hier klicken, und C hatte bereits einen erstellt Es hat es wieder erstellt. Ich werde diese primäre Aktionsfarbe nennen. Ich werde das hier erschaffen, damit Sie diese neue Farbe sehen können, die wir hier in der zweiten Zeile haben . Okay, cool. So haben wir jetzt das Anmelden und das Login in los. Gehen wir zurück zum letzten Prototyp hier. Schauen wir uns das Schild an. So hatten wir Vorname Nachname E-Mail Passwort hier. Und das ist, wo wir in die Schaffung von einigen Komponenten kommen hier, was das ist ein wirklich wichtiges Stück toe check out. Lassen Sie uns diese Formularfelder erstellen. Gehen wir zurück zu unserem Lernen hier. Und was ich tun werde, ist, dass ich das Linienwerkzeug benutzen werde, also gehe ich dorthin, wo ich das Rechteck auswählen kann. Klicken Sie einfach darauf. Siehst du die Drop-down-Liste? Siehst du das Linienwerkzeug? Ich werde nur eine Linie machen, nicht von Kante zu Kante, nur innerhalb einiger Grenzen. hier. Geben Sie ihm etwas Platz auf der linken und der rechten Seite der Kunsttafel. Wenn ich die Schicht halte, wird es mir eine gerade Linie geben. Wenn ich nicht halten Shift, können Sie sehen, es gibt schiefe Linien. Wir wollen eine wirklich gerade Linie hier, und ich mache das, ähm, weiß. Also lassen Sie uns gehen und nehmen weiß und wieder, ich werde weiß ah, Farbe Attribut, das ich wiederverwenden und wieder auswählen könnte. Also nennen wir das einfach weiß. Macht es mir wirklich einfach, das auszuwählen, oder? Also jetzt habe ich Weiß ist ein Stil. Es ist zu stark für jetzt. Was die Farbe angeht, ziehen wir das in Transparenz zurück. Machen wir das hier 20%. In Ordnung, 20%. Was ist ziemlich gut? Also, jetzt bekommst du den Dreh davon. Ähm, ich werde dazu neigen, etwas zu verlangsamen , während wir gehen. , Hoffentlich bin ich im richtigen Tempo,damit du weiterkommst, wenn du innehalten und es irgendwie für dich selbst machen musst und zurückkommen und Play drücken musst, ist das auch in Ordnung . Das ist das nächste, was ich tun möchte. Hier ist, ich werde das einfach kopieren. Melden Sie sich hier an. Bilder klicken und ziehen. Option „Halten“. Kopieren Sie es so und sehen Sie, wie es zentriert ist. bedeutet, dass es eine zentrierte Absatzeinstellung hat. Wo, wenn ich diese Box ziehe, wird sie den Text darin zentrieren. Ich will, dass ich eine Leitung hinterlassen habe. Das ist also nicht Senator-Linie, sondern verließ die Linie. Und wie ich das hier mache, können Sie die Alignment-Registerkarten auf der rechten Seite sehen. Wenn ich das Richtige mache, richtet es ihr Zentrum richtig aus. Wir wollen eine Linie hinterlassen. Ja, genau so. Das sieht gut aus. Und nennen wir dies Ihren Vornamen, alle Kappen. Ich werde zentrieren. Ich werde die Höhe etwas abnehmen. Okay, das sieht gut aus. Alles klar, jetzt werden wir tatsächlich eine Komponente erstellen. Das ist also , ein wichtiges Stück,wie man mehrere Kunsttafeln und Anwendungen entwirft. Ähm, wirklich einfach und effizient, wenn Sie Änderungen auf mehr als einem Artboard vornehmen möchten. Also, was ich tun werde, ist, dass ich das Textfeld hier und diese Zeile kopieren werde , , wenn eine Kopie es, Mann C und ich kommen zu meiner Seite, die ich hier erstellt habe, namens Component Library. Und lasst uns da rüber gehen. Ich werde es hier einfügen. Sie können sehen, dass Sie den Vornamen in der Zeile hier haben. Jetzt rufe ich an. Das würde wieder dahin gehen, wo ich den Vornamen eingegeben habe, und ich werde es Titel nennen. Stellen Sie sicher, dass das Textfeld zwei Skalierungen aufweist. Der Narr mit dir will dein Textfeld nicht so. Warum willst du das volle mit der Linie, die wir hier haben? Okay, also wähle ich die Zeile und den Titel aus. Und hier ist, wie wir eine Komponente erstellen. Siehst du diese kleine diamantförmige Ikone oben? Gehen Sie voran und klicken Sie darauf, und Sie können Messer ausgewählt sehen. Es hat die Auswahl von einem Blau, das Sie hier sehen, in ein Lila geändert. Das bedeutet, dass dies jetzt die Master-Komponente ist, also wollen wir diesen Namen in Form ändern. Wir werden es als Standardform nennen. Alles klar, was wir haben werden ist, dass wir diese Seite haben, die Komponentenbibliothek auf der linken Seite heißt , und das wird alle unsere Komponenten beherbergen, die wir in diesem Design verwenden werden , hier erstellen. Okay, also habe ich die Komponentenbibliothek. Wir haben unsere erste Komponente erstellt. Sie können hier Formularvorgabe sehen. Lasst uns diese Komponente benutzen. Also jetzt bin ich auf dieser zurück zu unserer lernenden Paige Schicht hier. Wenn ich zu Assets gehe, können Sie hier ein glückliches sehen, und ich klicke und ziehe diese Komponente in mein Art-Board. Und Sie sehen, wie es eine lila Auswahl und keine blaue Auswahl hat, weil das Lila meine Komponente ist. Ich werde den Vornamen löschen, den wir erstellt haben, und ich werde ihn durch die Komponente ersetzen. Das ist also ziemlich üblich. Was Sie tun, ist, dass Sie ein u I-Element erstellen, und wann Sie eine Komponente erstellen sollten, ist, wann immer Sie etwas kopieren. Also, wenn ich das kopieren und sagen möchte: Jetzt, machen Sie einen Nachnamen an diesem Jetzt, Punkt, ich hätte diese Komponente nicht kopieren sollen oder diese, ähm, dieses Sie,das ich bilde, hier ausgefüllt und dupliziert und den Namen geändert haben ähm, dieses Sie, sollen. An diesem Punkt hätte ich eine Komponente erstellen und beginnen sollen, Komponenten zu verwenden. Was Sie also nicht haben möchten, ist, dass Sie nicht mit einer ganzen Reihe von Formularen wie diesen enden möchten , die alle individuell sind, die Sie nicht von einer Masteransicht ändern können. Und ich zeige Ihnen, wie Sie das hier in einer Sekunde machen. Also lassen Sie uns zurück nach Hause in einem Befehl Z gehen einige und wieder zurück, Fig muss diese die ganze Zeit speichern. Ich könnte die Akte machen und sagen, ähm sehen Sie, hier gibt es keine Rettung. Ich kann einen Befehl s tun, der die Verknüpfung zum Speichern ist, und Sie werden hier sehen. Es steht Abbildung Abb., MMA Auto speichert Ihre Arbeit und gibt mir ein kleines Friedenszeichen. Und sie setzen immer anders. Ähm, ich nenne es wie kleine Ah-Emojis. Wann immer Sie einen Befehl ausführen, sehen Sie, sie mögen einfach, setzen zufällig, was Emotion sie wollen. Wir sind einfach nett. Also lassen sie dich nur wissen, dass du deine Arbeit nicht mehr speicherst. Wie es einfach automatisch speichert es für Sie. Okay, jetzt habe ich meine Komponente wieder. Was ich darauf zugreifen kann, war, dass ich von meinen Ebenen hier in meine Assets verschoben habe, und ich klickte und zog meine Komponente genau so auf das Art-Board. Und ich möchte diesen Vornamen Sie ersetzen. Warum das habe ich mit der Komponente hier gemacht, und ich werde in diese Komponente klicken, und ich werde den Namen Titel zurück in den Vornamen ändern. , jetzt Also, jetzthaben wir eine Komponente, als er gemacht hat, die in dieser Komponentenbibliothek lebt und wir haben eine Instanz, die eine untergeordnete Darstellung dieser Master-Komponente bedeutet, die hier auf diesem Kunstbrett lebt . Also, was ich jetzt tun werde, ist, dass ich diese Komponente kopieren werde, und jetzt werde ich mehr Instanzen erstellen, und ich zeige Ihnen, warum. Es ist wichtig, dass wir angehalten und eine Komponente erstellt haben, bevor wir den ursprünglichen Text und die Zeile, die wir zuvor erstellt haben, kopiert haben. Jetzt, wo wir Vornamen haben, werde ich diesen Nachnamen ändern, tun Sie das auch, um eine Sekunde zu sein. In Ordnung. Und wir werden das nochmal kopieren und du siehst, dass es mir hier Abstandsschritte gibt. Soc bei sagte 12 Es 18. Es hilft mir, den gleichen Abstand automatisch zu verteilen, wenn Sie halten, wenn Sie auf diese Weise kopieren . Wenn ich also klicke und ziehe und gedrückte Umschalttaste gedrückt halte, kopiere ich das gerne. Also wieder, wenn ich die Option halte und ich klicke und ziehe und ich Shift halte, hält es es ausgerichtet. Und es hilft mir auch. Nein. Oh, das ist 18 Pixel Abstand von der letzten Komponente dort oben. Und das ist die gleiche Verteilung. Das ist es, was ich will. Großartig. Also lasst uns weitermachen und diese eine E-Mail anrufen. Und das letzte, das wir hier hatten, war Passwort. Alles klar, jetzt sieh dir das an. Deshalb ist es wirklich wichtig, dass wir eine Komponente herstellen. Sagen wir, ich rede mit meinem Klienten oder einem anderen Designer, und sie sagen: Hey, Hey, weißt du was? Es ist besser, dass wir all diesen Vornamen hier rosa machen. Ich bin wie, okay, ich weiß, ich werde dir dieses Beispiel geben oder gehen, gehen und etwas ändern. Alles klar, lasst uns weitermachen und alle diese beiden rosa verändert haben. In den alten Tagen hatten wir einen Klick auf eine von ihnen hier und ändern jede rosa, so musste ich klicken und dann wählen Sie Vornamen und ändern rosa. Dann muss ich zurück zum Nachnamen gehen und ein rosa ändern, und dann muss ich zur E-Mail gehen und ein rosa als 30 Passwort ändern und rosa ändern. Aber wenn wir, wenn wir über die Einrichtung denken? Sind Sie y und Komponenten wie diese? Was ich jetzt tun kann, ist, dass 4. Entwerfen des shopping: Alles klar, willkommen zurück. Also in den letzten Videos, die wir an der Anmeldung und den Anmelde-Workflows in diesem Video gearbeitet haben, werden wir den Shopping-Workflow abdecken. Lassen Sie mich Ihnen in diesem nächsten Video zeigen, was wir tun werden. Also der letzte, den wir an der Anmeldung gearbeitet haben, und an diesem Punkt haben wir hier aufgehört, das ist der Ladebildschirm und diese nächste Serie von Videos oder dieses Video, das wir gerade jetzt sind, sind wir bauen diesen Workflow mit, ähm, Fähigkeit, ein Boba Teegetränk auszuwählen und in Ihren Warenkorb gelegt. Also lassen Sie mich Ihnen zeigen, dass wir im Moment auch diese Tab-Leiste am unteren Rand ausbauen werden, die fixiert bleibt. heißt, es bewegt sich nicht, als ich nach unten gewischen habe und Sie können sehen, ob ich klicke und ziehe es nach oben. Sigma überträgt dies automatisch, als ob ich auf einem mobilen Gerät wischen würde. Ok. Und an diesem Punkt ist der nächste Zug, um diesen wieder aufzubauen, der Selektionsbildschirm. So konnten Sie sehen, dass wir einen Übergangszustand haben, in dem dies nach oben gleitet. Wenn ich auf das X tippe, gleitet es als Übergang nach unten. Also haben wir gelernt, dass es gut ist, und wir werden auch lernen, wie man ein mobiles Drop-Down erstellt. Also, wenn ich auf diese regelmäßige süße hier tippe, können Sie sehen, dass ich ein Slide-Up-Overlay habe, und wenn ich oben tippe, gleitet es nach unten. Und wenn ich eine Auswahl halb süß tippen, Sie können sehen, es aktualisiert die Auswahl, wo sagte Regular süß zu halbsüß. Und das nächste, was wir tun werden, ist, dass wir den aktiven Status für die Richtauswahlen erstellen . Also, wenn ich auf die große klicken oder tippen Sie auf die große Topping Tapioka, Sie können dort sehen und ich drücken, und das wird in den Warenkorb dort hinzufügen. Alles klar, cool. Also lasst uns weitermachen und los. Also gehen wir zurück zu, ähm, lernen Seite hier, auf der wir waren. Du könntest das hier sehen und erinnerst dich, wo wir aufgehört haben? Wir haben den Login, ähm, ähm, und den Go Button hier zu diesem Ladebildschirm genäht. Ich kopiere den Ladebildschirm hier. Und so was ich wieder tat, war, ähm ich habe gesagt Option geklickt und gezogen, sobald ich die Doppelpfeile bekam. Ist meine Maus, die kopiert, die gelangweilt sind, und ich hielt Shift, so hält es Ausrichtung. Also, wenn ich keine Schicht habe, geht aus der Ausrichtung. Wenn ich Shift halte, hält es es online zum nächsten Kunstboard. Ich werde, ähm, klicken und ziehen Sie außerhalb der Kunsttafel. Sie können hier sehen, wie ich das mache. Und das wird nur Dinge innerhalb der Kunsttafel auswählen. Und ich werde die Boba in der Ladung löschen. Ich werde auch die Statusleiste hier auswählen. Ich werde hier sehen oder kopieren, und dann werde ich es löschen. Und ich werde dieses Kunstbrett greifen, das hier ein wenig verkleinert wurde, tatsächlich, tatsächlich, bevor ich verkleinere, werde ich einen Leitfaden erstellen, um mir den unteren Rand meines Bildschirms zu zeigen. Also, wenn Sie Ihre Lineale hier nicht sehen, können Sie gehen, um zu sehen oder Ihre Pixel und Sie könnten sehen, ähm, wo es sagt, zeigen Lineale, das wird, wissen Sie, Lineale Sofort. Und wenn ich gehe Ansicht zeigte Herrscher wieder. Ich werde die Herrscher sehen. Sie möchten die Lineale aus, weil Sie Hilfslinien ziehen können. Also, wenn ich an bin, wenn ich im Kunstbrett bin, ziehe ich einen Führer, der in diesem Kunstboard bleibt. Sie können sehen, dass es Onley in der Kunsttafel ist. Wenn ich nicht in der Art Board bin und ich bin vorbei nur im Design-Bereich, Ich dulde, ziehen Sie einen Führer und es bleibt außerhalb der Art Board. So bleibt es überall, so dass ich es immer sehen kann. Ich kann darauf klicken, ziehen Wenn ich es entfernen möchte, kann ich es einfach wieder in das Lineal schieben und es löscht es. Also dieser Punkt, ich möchte den Führer greifen, und dann möchte ich meine Kunsttafel hier auswählen, und ich möchte es wirklich lange machen. Mach dir keine Sorgen darüber , , wie lange es ist. Mach es hier einfach ziemlich lang. Als ob ich meinen im Jahr 2000 habe. Machen wir es einfach noch länger wie 2400 Pixel. Okay, das sieht gut aus. Und dann füge ich die Statusleiste wieder ein. Nein, ich werde es von hier drüben kopieren. Fügen Sie es von da drüben ein. Stellen Sie sicher, dass diese Statusleiste beim Scrollen hier die feste Position hat. Also haben wir das im letzten Video aufgestellt, aber das ist wirklich wichtig. Jetzt, da wir in der Lage sein, nach unten zu scrollen und Inhalte hier zu sehen. Okay, das nächste, was Sie wollen, ist, dass wir diese Tab-Leiste erstellen möchten. Also habe ich die Registerkarte sind hier drüben auf die Design-Waren. Geh weiter und schnapp es dir. Kopieren Sie es und Sie können bezahlen. Also außerhalb der Kunsttafel, für jetzt ist, was das schaffen wird. Wir wollen nur diese Symbole greifen, damit Sie sehen können, dass ich diesen Status habe. Ähm, diese ah Navigationsleiste unten oder Tab-Leiste unten ist auf 375 breit eingestellt und wir können es 8 85 Höhen machen. Cisco, schnapp dir ein Quadrat, ein Rechteck. Und lassen Sie uns einfach ein Rechteck in diesem Kunstboard machen, ist die Größe noch nicht wichtig. Machen Sie es einfach dasselbe mit wie die Kunsttafel. Also hast du 3 75 bekommen und dann kommen wir zu den Höhenattributen hier oben. Richtig? Machen wir das 85. Okay, Cool. Jetzt können Sie es hier sehen. Sieht ziemlich gut aus. Gehen wir weiter und bewegen das ein bisschen nach unten. Also, jetzt ist es bündig an der Unterseite dieses Kunsttafels. Also was? Wir wollen jetzt tun, ist, wenn Sie auf sie auf der Registerkarte Design klicken, sehen, wo Zugriff feste Position beim Bummeln. Gehen wir weiter und tippen Sie darauf, und ich werde Ihnen zeigen, wie das aussieht. Sobald wir ein paar Inhalte bekommen haben und wie das unten fixiert bleibt, während du nach unten scrollst. Das nächste, was wir tun wollen, ist, geben wir diesem einen farbigen Hintergrund. Also lassen Sie uns voran gehen und dio schwächen tun ein wenig von einem off black. Also lasst uns die blauen Farbpaletten holen und uns genug bekommen, wo ich es irgendwie auf Schwarz sehen kann . Das sieht gut aus. Wir könnten Dio um, 012436 als Farbe. Oder Sie können einfach Ihr bestes Urteilsvermögen nutzen, wenn Sie wollen. In Ordnung, also jetzt haben Sie die Registerkarte sind los. Setzen Sie diese Symbole ins Spiel jemand, um alle drei zu greifen, und ich werde sie unten legen. Sie können sehen, dass sie sich unter dem Rechteck befinden. Denn was auch immer die feste Position in Fig MMA ist, wird sich oben anordnen. Sie können das Schichtsystem hier sehen. Es hat Etiketten darauf. Unsere Häfen haben an der Spitze befestigt. Alles, was behoben ist, wird automatisch an die Spitze der Schichtanordnung gehen. Alles, was nicht behoben ist, wird unter diesen Scroll-Titel hier gehen, und das ist der Rest des Inhalts. Was wir also tun wollen, ist, dass wir die Position dieser Symbole fixieren und Sie werden sehen, wie sie vom linken Schichtsystem hier nach oben in die festen Layering-Positionen springen . Also tippen wir auf den Klick auf die feste Position beim Scrollen und Sie werden sehen, dass sie vom Scrollbereich in den festen Bereich nach oben verschoben wurden. Und lassen Sie uns voran und machen sie noch weiter schwächen, Klicken Sie und ziehen Sie sie dazwischen sind auf dem Rechteck, so dass sie jetzt auf der Oberseite liegen. Lassen Sie uns voran und machen sie visuell zentriert hier. Das sieht gut aus, nur mit meinen Pfeiltasten auf meiner Tastatur, und jetzt wollen wir einen aktiven Zustand erstellen. Also gehen wir weiter und wählen Sie das Profil-Symbol hier und das Einkaufswagen-Symbol und lassen Sie uns diese zurück und Transparenz schieben. Also machen wir etwa 30% hier. Das sieht gut aus. Sie sind immer noch sichtbar, aber es gibt dem Benutzer und den Hinweis, wo sie sich befinden in dieser Registerkarte, unserem System. So können Sie hier sehen. Wir erstellen diesen Bildschirm hier, wo dies fixiert bleiben wird und die Statusleiste oben bleibt fixiert, und Sie werden nach unten scrollen und all diesen Inhalt sehen. Alles klar, Cool. Also lassen Sie uns ein wenig hinauszoomen. Sie können das Rechteck löschen, das wir hier hatten. Jetzt, da wir diesen Tab haben, unser System im Spiel und lasst uns das erste Boba-Tee trinken hier holen. Das ist also der normale Boba-Tee. Kommando einfach, siehst du? Kopieren Sie es. Es ist schon zu sagen, die, ähm die mit und Höhe für Sie. Gehen Sie einfach voran und fügen Sie es ein und Sie werden spüren, dass es nicht behoben ist und sich automatisch unter der Statusleiste befand , was gut ist. Das ist das, was wir wollen. Schnappen wir uns dieses Boba-Tee-Logo hier, Command, sehen Sie, es sei denn, fügen Sie es hier ein. Also, jetzt möchten Sie den Text dieses Boba Tee-Logo auf einen schwarzen Text ändern Work sagt Boba, Alles, was Sie hier tun müssen, ist nur dreifach klicken, dreifach klicken Sie hinein und halten Sie dann Shift und wählen Sie die anderen Buchstaben. Jetzt habe ich das Wort Kugel Just Boba ausgewählt wo? Da steht, Phil, geh einfach weiter und ändere dich. Die Farbe wurde schwarz. Wir können auch unsere Farbstile verwenden, die wir gemacht haben, weil wir hier ein Schwarz gemacht haben und auch schwarz wählen . Alles klar, das sieht gut aus. Also das nächste, was wir hinzufügen wollten, ist der Text hier hatten wir regelmäßige und süße Tönung von Karamell und Schokolade, und wir hatten den Preis für seinen Brunnen, richtig. Also werde ich mir das Textwerkzeug hier schnappen. Ich werde das Wort Regular eingeben und wieder, Sie können sehen, wie meine Texas Standard Teoh Linie unten hier auf dem Charakter. Ah, Textdialogfeld. Ist dieses Stück hier, das manchmal passiert. Ich mag es, es in der Mitte und nicht auf der Unterseite ausgerichtet zu haben. Das ist gut dort. Lassen Sie uns voran und machen dies zu einem Lassen Sie uns über eine 16-Punkt-Schriftart machen und uns hier einige Buchstabenabstände schnappen . Ähm, es ist jetzt zu eng. Sie können sehen, ohne dass Buchstaben zugewandt sind. Zalkind schwer zu lesen und du wirst sehen, was ich meine, wenn du ihm tatsächlich einen Buchstabenabstand gibst . Im Moment ist es bei minus 2%. Es befindet sich direkt unter der Box, in der Sie die Breite und Höhe Ihres Spaßes ändern und uns aufstoßen können. Lassen Sie uns 8% geben und Sie könnten einfach sehen, wie nur ein wenig Abstand es nur ein wenig einfacher macht , auf der Absatzausrichtung, die wir nicht zentriert eingestellt haben, wieder zu lesen. Machen wir es zu einem rechts ausgerichtet. Also, wenn ich auf das rechte auf das Textfeld hier klicke, können Sie sehen, dass ich es richtig ausgerichtet habe. Und das sieht gut aus. OK, so wie wir es vorher im letzten Video getan haben, lassen Sie uns dafür einen Charakterstil erstellen. Also jetzt haben wir eine 16-Punkt-Schriftart. Also lassen Sie uns voran und erstellen Sie einen neuen 16 Punkt. Geben Sie es 16 Punkt und es ist eine regelmäßige. Ich glaube, dass Sie regelmäßig Spaß haben, damit wir das wiederverwenden können, während wir das durchmachen. Alles klar, das nächste, was wir tun wollen, ist, dass wir den süßen Farbton von Karamell und Schokolade eingeben . Von hier aus werde ich einfach die gleiche Ebene kopieren. Dieses Textfeld hier wieder, ich habe gerade gedrückt, um, Option Shift-Spitzen, die die Ausrichtung nach rechts hält, was wirklich gut ist, ich will es nicht so ausschalten. Ich möchte es direkt ausgerichtet halten, und lasst uns das eingeben. Und so wollte ich an dieser Stelle eigentlich nicht in der Box zentriert sein, sondern nach oben. Also werde ich die Ausrichtung von der Texteigenschaft hier oben ausgerichtet machen. Da gehst du. Das sieht gut aus. Okay, also haben wir ein süßes Zelt aus Karamell und Schokolade. Cool. Richtig. Also dieser Punkt, was macht diesen Text größer? Also lasst uns es von dem Charakter Textil lösen, das wir hier haben. Also 16 lasst uns das wahrscheinlich zu groß machen. Machen wir es zu einem 22. Das sollte sein. Das sollte gut sein. Ich werde das ausstrecken. Also will ich drei Zeilen, aber draußen sieht gut aus. Und lass uns das zu einem regelmäßigen machen, und das sieht gut aus. Cool. Nun, da wir das mit 22 haben Nun , haben wir hier den Titeltext. Es ist 16 und die Beschreibung mit 22 besteuert. Lasst uns auch ein Textil dafür machen, damit wir das jetzt wiederverwenden können. Also, jetzt bekommen wir eine, ähm eine Kombination von netten Textilien, die wir verwenden können. Wir haben den 16 Punkt, wir hatten die 19 Punkte, die wir von den Login-Seiten eingerichtet haben, und jetzt werden wir den größeren haben , der ein 22 sein wird. Also lasst uns das packen und es zu einem 22 Punkt machen. Ich tippe nur 22 Punkt und Sie werden sehen, warum das tun, Ähm, wenn wir zu den nächsten Siris von Boba Tea Aromen kommen, weil wir die Aromen und die Beschreibungen eingeben und dann können wir sie einfach genau so einstellen. Alles klar, das sieht gut aus. , Eine Sache,die wir mussten, war der Preis. Jemand, der den gleichen normalen Typ Fraktur kopiert. Ich werde Ihnen zeigen, warum wir einige der Charakter-Stile verwenden und sehen wirklich hilfreich. Hier ist, ich werde es einfach tippen. werde nur tippen für ich denke, es war für 99 und sagen wir, ich habe es hier nicht an diesem Text ausgerichtet , aber ich habe es richtig auf der Absatzeinstellung ausgerichtet. Wenn ich eine Ausrichtung zwischen allen drei dieser Elemente erstellen möchte, wählen Sie einfach alle drei aus, und Sie können oben sehen, hier habe ich diese Ausrichtungssymbole. Hier ist die linke Ausrichtung. Dies war zentrierte Ausrichtung, aber ich möchte die richtige Ausrichtung hier. Jemand auf der rechten Seite klicken und Sie können es sehen. Es richtete alle drei auf die gerade jetzt und die 4 99 Ich will es machen. Nicht die 22. , Aber mal sehen,wie es in der 19 Bold aussieht. Das sieht gut aus. Behalten Sie es nicht. Die 19 fett und das letzte, was wir verwenden wollen. Ich werde das hier kopieren. Ich werde die Anzeige erstellen. Geben Sie einfach dem Benutzer an, dass er dies in seinen Warenkorb legen kann und geben wir ihm die Aktionsfarbe hier und während Ah, das sieht ziemlich gut aus. Alles klar, cool. Also, was werden wir als Nächstes tun? Gehen wir weiter und nähen wir das auf, damit wir sehen können, wie das auf dem Prototyp aussieht. Also, wenn Sie sich erinnern, wir hatten den Anmeldebildschirm Prototyp Login, Taste auf dem Anmeldebildschirm wurde mit dem Ladebildschirm verbunden, und die Go Taste auf der Tastatur würde Sie zum Ladebildschirm bringen. Und wie wir im letzten Video gelernt haben, braucht der Ladebildschirm Zehe. Haben Sie eine Verzögerung, so dass Sie auf keine Elemente innerhalb der Kunsttafel klicken können. Um eine Art-Board-Verzögerung zu erstellen, müssen Sie das Art-Board selbst auswählen. Also habe ich den Ladebildschirm ausgewählt. Ich klicke und ziehe den Boje Prototyp Arm, und du siehst jetzt, dass er mit dem Einkaufsbildschirm verbunden ist. Ich werde diese Benennung des Einkaufs oder des Ladebildschirms hier in den Einkaufsbildschirm ändern weil wir das kopiert haben. Und wieder, alles, was ich getan habe, war, den Bildschirm hier auszuwählen, die Ebene auf der linken Seite zu bekommen und nur verdreifacht, auf die Ebene geklickt, und ich konnte einkaufen. Okay, cool. Also wollen wir nur, dass diese Interaktion hier nach einer gewissen Zeitdauer verschwindet. Also auf dem Prototyp hier, wenn ich den Prototyp-Link wähle, den ich auf dem Wasserhahn habe, gehen wir weiter und tun nach der Verzögerung. Und drei Sekunden sind etwa richtig oder 3000 Millisekunden hier. Ein Augenblick sollte in Ordnung sein. Wir wollen keine kluge Animation oder so was, Ordnung, und dann gehen Sie weiter und drücken Sie die Play-Taste oben. Und jetzt konnten Sie den Prototyp sehen. Hier haben wir den Ladebildschirm. Wir können einfach durch die Login gehen, und Sie können sehen, wenn ich auf die Anmelde-Taste tippte, der Ladebildschirm erscheint für drei Sekunden und dann, ja, wir haben den Shopping-Bildschirm mit unserem ersten Geschmack über einem t hier. Sehen Sie, wenn ich klicke und nach oben ziehen, sehen Sie, wie die Dinge, die fixiert sind, die Registerkarte sind hier und die Statusleiste hier oben, die Einstellungselemente, die Luft alle fixiert. Das ist, was es bedeutet, ein festes Element zu haben, ist, dass diese Dinge nicht scrollen während alle anderen Inhalte scrollen. Alles klar, also lass uns den Rest der Aromen von Boba-Tee hinzufügen, die wir hier hatten. So können Sie hier sehen. Ich hatte den passe nächsten Geschmack hier und geh einfach voran und passedas genau an Ort und Stelle, genau wie so. Und wir wollen ein wenig von etwa einem Pixelabstand dazwischen. Das sieht also zwischen den beiden Fotos genau so aus, okay. Und dann, was wir hier tun wollen, ist wahrscheinlich am besten, nur diesen Text hier zu kopieren, und Sie können ihn ausgerichtet halten, also werde ich Option halten. Ich werde klicken und nach unten ziehen und wieder, ich werde Shift halten. Also mache ich das nicht. So können Sie sehen, wie ich meine Maus durch Halten Shift bewegen. Ich kann meine Maus nicht bewegen. Es hält all diese Informationen hier in Einklang. Ich lege es einfach auf halbem Weg bis zu Ihrem Bild hier. Und ich werde auch zu einem Objekt gehen und hier nach vorne bringen, dass sie sehen kann. Und auf diesem Geschmack, was wir hier hatten, war, dass wir einen Kaffee mit Premium-kaltem Gebräu mit schwarzem Tee aromatisiert haben, und es ist für 99. Also gehen wir zurück in unseren Lern-Tab hier. Und lasst uns das hier ändern. Und mal sehen, was es sagte Premium-kaltes Gebräu mit schwarzem Tee. Geben Sie das ein. Ordnung, wir sind der Abstand dort, und ich möchte das mit in die dritte Zeile fallen lassen und hatte den Abstand dort. Cool. Wir kriegen es ziemlich schnell durch. Das ist gut. Okay, Sie können sehen, dass diese beiden Elemente passen. Alles von der Registerkarte sind oben. Lassen Sie uns die nächste aromatisierte hier, das ist der Macho-Tee-Geschmack. Und ich befehle nur sehen, kopierte es und Befehl v einfügen. Und ich werde es hier in die richtige Position bringen. Und ich werde den gleichen Text hier auf der Option kopieren. Klicken und ziehen. Shift halten. Also wieder, indem ich Optionen halte, bekomme ich den Doppelpfeil, wähle alle diese Elemente aus. Und wenn ich möchte, kann ich diese gruppieren, um es einfach aus einer nächsten Auswahl zu machen. Also, wenn ich nur eine Gruppenauswahl hier mache und ich die Option halte und klicke und ziehe Nein, habe ich sie kopiert. Und wieder möchte ich sie nach vorne bringen. Ich klicke mit der rechten Maustaste auf sie, bringe nach vorne. Sie können auch die Befehlsposition nach oben und unten Pfeile für die Schnelltasten verwenden, um diese auf den Ebenen aufzurufen . In Ordnung. Und lasst uns weitermachen und diesen einen Macho nennen. Uh, und der Text darauf waas Premium Cold Brew up. Das war der, ähm, der Kaffee aromatisiert. Also lasst uns voran gehen und einfach diesen Text ändern, um eine Macho t-Beschreibung zu haben. Also nennen wir es Premium-Mata und schwarzen Tee. Das sollte funktionieren. Okay, cool. Das nächste, was wir hinzufügen möchten, ist der letzte Geschmack , den Sie hier auf, ähm, dem letzten Prototyp hier sehen können ähm, . Hier oben war der Text hier. Süße japanische macho t Lassen Sie uns zurück und fügen Sie das wirklich schnell. Also Süßigkeiten Japanisch viel, äh, T, was mein Lieblingsgetränk ist , übrigens, aus all den, Ordnung. Und der letzte ist der Chai Tia. Nun, ähm, also lasst uns das Chai-Foto hier schnappen. Nur der mit ein bisschen mehr. Es ist das gleiche wie das normale t. Es hat nur ein bisschen mehr von einer Farbe. Gehen Sie voran und wählen Sie aus. Sie können das sehen, wenn ich einfügen. Wenn ich mein Artboard nicht ausgewählt habe, mag ich nur Tempo. Das wird nicht in der Kunsttafel Tempo. Sie können das Artboard an zweiter Stelle verschieben. Es geht nicht damit. Also denken Sie immer daran, Teoh hat die Kunsttafel ausgewählt und dann eingefügt, wenn Sie in der Kunsttafel sind, werde ich das nach unten ziehen. Ich halte Shift, wenn ich mich bewege, also verschiebe ich die Proportionen nicht. Es hat bereits genau genau mit eingefügt, dass ich es voll mit wollte, wenn ich es nach unten zog. So wie so. Okay, an diesem Punkt gehen wir weiter. Und, ähm, kopieren. Ich ziehe das ein bisschen nach oben. Lassen Sie uns diesen Text hier und wieder kopieren. Ich werde mit der rechten Maustaste klicken und gehen, um die Front- oder Befehls-Option nach oben und unten zu bringen, um nach vorne und unten gehen , um nach hinten zu bringen, damit Sie sehen können, dass Und das ist die sh i t. So wird die Beschreibung dafür mit Golden Chai Tee gemacht. Gehen wir zurück zu unserem Lernen, Paige, und ich werde das mit Golden Chuy T schreiben. Ich glaube, das war auch 5 99. Alles klar, du wurdest ein bisschen teurer. Jetzt ist es gut. Okay, Cool. Also jetzt haben wir diese vier Geschmacksrichtungen in Let's voran und gehen wieder zu unseren Prototypen zurück. Sie können auf den Play-Button klicken, oder Sie könnten einfach den Tap tun. Wenn Sie gerade hier drüben haben, können Sie auch drücken. Die Registerkarte ist da oben. Und jetzt können Sie sehen, wie es aussieht, um zu scrollen, damit Sie durch diese Aromen blättern können. Sie können sehen, dass die Grenze zwischen dem Kaffee und der Mata nicht da ist. Also gehen wir zurück und fügen das hinzu. Aber das sieht ziemlich gut aus. Gehen wir zurück. Ähm, ich werde wieder auswählen, also eine Sache, die ich tue, ist, ... geh weiter und wähle außerhalb der Kunsttafel aus. Starten Sie den Mauspfeil nach rechts und klicken Sie und ziehen Sie über nur die Elemente, die Sie im Artboard selbst auswählen möchten . Also haben wir nur diese Aromen nur die Chai und die Macho Jetzt wählte ein na minha Pfeil nach unten, um Sie sehen können, dass ich diese kleine Linie dort für die Macho t t geschaffen. Okay, so wieder viele Möglichkeiten, um zu meinem Prototyp zu bekommen, kann ich Drücken Sie Geschenke oder ich kann auf die Registerkarte oben klicken. Lassen Sie uns Tab zurück nach oben gehen, und es gibt auf meine Aromen. Okay, cool. Jetzt, wo wir das Kunstbrett hier haben, konnten Sie sehen, dass wir es ziemlich lang gemacht haben. Gehen wir zurück und verkürzen das jetzt, da wir alle Inhalte im Spiel haben. Was ich also tun werde, ist, dass ich einen weiteren Leitfaden hinzufügen werde, um nicht nur die Unterseite meiner Inhalte, sondern ein wenig weiter. In der Regel wollen etwas Platz für die Tab-Leiste geben, so dass alle Chai die Chai-Tee Informationen geht über die Tab-Leiste, so dass Sie sehen können, gibt es in Ordnung. Nur einen doppelten Scheck, den ich kopieren werde, nab unsere und sieh einfach. Ja, ja. Wir könnten diesen Leitfaden vermutlich ein wenig hierher verschieben. Wir wollen es nur dort, wo der Chai-Tee am unteren Ende der Lasche oder beim Wischen sitzen wird . Ähm, nun, setz dich oben auf den Tab. Leiste, die Registerkarte werden nicht ausblenden Inhalte, die wir hier haben. Okay, das ist eine Art Feigen-MMA-Sache, die hier passiert. Es ist ein bisschen wie ein Fehler. Wenn ich also dieses Kunstboard mit Inhalten dehnen möchte, die darin fixiert sind,kannst du sehen, was passiert. Wenn ich also dieses Kunstboard mit Inhalten dehnen möchte, die darin fixiert sind, Sehen Sie, wie der fixierte Inhalt anfängt zu zerquetschen. Sieh mal, was mit der Boba und der Statusleiste passiert ist. Es ist eine Sache, die mit Zahlen passiert. Das habe ich noch nicht herausgefunden. Was wir dazu neigen, ist einfach klicken und ziehen und alle Elemente auswählen, die Sie haben. Und jetzt Art Board, tun Sie einen Befehl. Sehen Sie? Kopieren Sie es einfach und löschen Sie es vorerst. Dann schnappen Sie sich das Kunstbrett und kürzen Sie es auf den Führer, den wir hier gemacht haben. Und dann Befehl V. Nun, Tempo zurück an Ort und Stelle. Da gehst du. Ich gebe Ihnen eine Sekunde, um das zu tun. Okay, an diesem Punkt, was geht zurück zu unserem Prototyp und wir können überprüfen, wie das aussieht. So können Sie hier sehen, wir haben den regulären Kaffee, den Macho. Und wenn wir nicht diesen zusätzlichen Platz in der Unterseite hinzufügen, würde das Kind am unteren Ende so aussehen. Oder noch schlimmer, wenn es diesen Add-Button verbergen würde. Aber da wir diesen zusätzlichen Platz hinzugefügt haben, können Sie sehen, wo gerade an die Spitze dieser Navigationsleiste geht. So sieht es gut aus, Nikkan Second, wischen Sie nach oben und finden Sie, was gibt Ihnen den Übergang von Wischen. So verhält es sich, als würde ich mit dem Finger wischen. Und wenn Sie, ähm, wenn Sie die Sigma-Spiegel-Anwendung auf Ihr Telefon herunterladen, können Sie sehen, warum es sich so wie eine echte Anwendung auf Ihrem mobilen Gerät anfühlt. , Na gut, das sieht gut aus. Ähm, das nächste, was wir hier tun wollen, ist, wenn ich irgendwo auf dem Hinzufügen-Button tippe, aber irgendwo auf dem Milchtee-Raum hier, wird es das Auswahlmotil für die Milch normale Milty öffnen. Das ist also dieser Bildschirm hier sieht so aus. Also lasst uns diesen Bildschirm hier aufbauen, und wir werden an der Drop-down-Liste auch rechts hier arbeiten. Also gehen sie zurück zum Lernen. Paige, das wird eine normale Bildschirmgröße Höhe sein. Also lassen Sie uns den Ladebildschirm kopieren, den wir hier hatten. Also wieder, ich habe nur Option gehalten. Schnappen Sie sich das Kunstbrett, halten Sie die Umschalttaste gedrückt und ziehen Sie es nach rechts. Dass ich von rechts klicken und ziehen werde, um die Elemente innerhalb der Kunsttafel auszuwählen. Und jetzt werde ich das löschen, wenn ich die Elite gedrückt habe. Okay, ich möchte dieses Foto wiederverwenden. Also gehen wir weiter und drücken den Befehl, siehst du? Und ich werde V dieses Foto hier oben befehlen, und dann können Sie hier sehen, wo, wenn ich den Boden nach oben schiebe, sagen wir, ich will so etwas punkten, es und die Perspektive des Fotos mischen, Ähm, es hält nicht das Seitenverhältnis und es interpretiert das Foto so. Und es sieht es wirklich nicht gut aus für Fotos. Was wir also tun wollen, ist hier, dass Sie zum Bild hier gehen wollen. Klicken Sie darauf und Sie können sehen, wo es sagt, Bild beschneiden. Gehen wir voran und machen Sie eine, die Fit Bild hier sagt. Eigentlich, Was wird füllen? Da gehst du. Also wieder zogen wir von der Ernte zu fühlen und wie ich hierher kam. War er gerade auf das Bild geklickt? Phil hier kommen, wo es beschnitten wurde, und ich habe Gefühl, und jetzt können Sie sehen, wenn ich es nach oben schiebe, es gibt mir nicht. Es trotzt der Perspektive dieses Bildes nicht. Ich möchte das eigentliche Bild innerhalb dieses nach oben verschieben. Also, wenn ich wieder auf das Bild klicke und ich doppelklicke, so gibt es einen Klick. Aber wenn ich doppelklicke, komme ich zur Ernte hier oben, unterdrücke die Ernte und du kannst es sehen. Jetzt kann ich das Bild in das, das ich beschnitten habe, greifen und ich kann es ein wenig nach oben bewegen. Und über es sollte gut sein. Vielleicht geben Sie dem etwas mehr Platz. Also wieder, ich es ist vor, mich wieder zu beschneiden, damit ich jetzt zurückgehen kann, um wieder zu füllen und wieder zu beschneiden, und dann einfach das ein paar Wege nach oben bewegen kann. kannst du tun. Okay, an diesem Punkt, um, gehen wir weiter und haben noch mehr Spaß. Wir machen zuerst den Prototypenbereich dafür, aber ich muss oben links einen Schließknopf machen. Wenn Sie also darauf tippen, können Sie auch den Bildschirm schließen und mit einem Shopping-Bildschirm zum aromatisierten Bildschirm zurückkehren . Also, was ich tun werde, ist, dass ich ein Rechteck hier schnappen werde, können Sie sehen, ein Rechteck haben und sie klicken und ziehen Gonna halten Shift offen, keine halten Shift, einfach klicken und ziehen und ich werde die Ränder runden. Also hier drüben habe ich den Eckenradius. Drücken Sie einfach 100. Es ist in Ordnung. Und sehen Sie, wie es diese Auswahl abgerundet hat. Da dies ein tatsächliches Element ist, möchten wir, dass dies die umsetzbare Farbe ist. Also lasst uns unsere primäre Aktion Farbe so rosa holen und ich werde diesen Befehl kopieren. Siehst du, ich klicke davon ab. Ich klicke wieder auf die Kunsttafel und befehle V, das ist eine Paste an Ort und Stelle. Ich wähle den, den ich gerade eingefügt habe, und drehe ihn um 90 Grad und ich habe einen Plusknopf. Sonam wird beide auswählen und ich werde mit der rechten Maustaste klicken, wenn eine Gruppe, diese Auswahl oder Sie können auch Befehl G. Ich gebe Ihnen eine Sekunde, um das zu tun. Und jetzt, wo ich die Gruppierung oder den Plusknopf zur Verfügung habe, drehe ich den Plusknopf. Und jetzt habe ich das X, das ich will. Und wie alles, was wir benutzen, wird das sein, dass wir kreieren, das wiederverwendet wird. Lass uns das zu einer Komponente machen. Jemand, der es nur ein wenig verkleinert. Das sieht gut aus. Ich werde es kopieren. Ich werde hier zurück zu unserer Komponentenbibliothek gehen, und ich werde das hier beschleunigen, das etwas überlegen und die Komponente erstellen. Also habe ich es hier geklebt. Die kleine Spitze, ähm, Diamant-Symbol erstellen Komponente. Und ich werde so nah nennen und so eine Steuer nahe X setzen. Ehrfürchtig. Gehen wir nun zurück zu unserer Lernseite hier und gehen wir zurück zum Layer-Asset. Ah, Delayer Tab hier oben. Gehen wir auf die Registerkarte „Asset“ und lassen Sie uns die X-Komponente greifen, die wir gerade erstellt haben. Und lassen Sie uns das jetzt anstelle dieses X setzen. Auf diese Weise, wenn wir dies wieder verwenden, können wir es ziemlich einfach aus dem gleichen Bereich von der Master-Komponente ändern. Und es ändert sich auf allen Kunstbrettern. Okay, also lasst uns den lustigen Teil haben. Gehen wir weiter und Prototypen für diesen Übergang hier in unserem Prototyp. Klicken Sie also auf die Shopping-Seite hier. Gehen wir hier zum Prototyp-Tab und wählen Sie einfach nur das Bild der regulären Probität aus. Lassen Sie uns voran und verbinden Sie es mit als dem Bildschirm auf der rechten Seite. Lassen Sie uns diesen Bildschirm hier beschriften. Dies sagt Ladebildschirm, weil wir es kopiert haben. Nennen wir dies den Selektionsbildschirm. Alles klar, jetzt haben wir diesen Auswahlbildschirm. Also wieder haben wir den Einkauf. Ah, Belastung. Hier haben wir den regulären Boba-Tee ausgewählt. Wir klicken auf den kleinen klebrigen Prototyp-Anschluss auf den Auswahlbildschirm, und jetzt haben wir die Interaktion auf Tippen einfach gut. Und es ging, um einzuziehen. Manchmal können Jahre einfach so sagen. , Was wir tun wollen,ist, dass wir einen Umzug in einem Szenario erstellen wollen, also zeige ich Ihnen, wie es aussieht. Wir sind gerade sofort und schwächen. Tun Sie das X hier, zurück das X im Auswahlbildschirm zurück zum Shopping-Bildschirm, und wir könnten es einfach sofort tun. Okay, wenn ich also irgendwo tippe, wo das Foto war, kannst du sehen, dass es sofort zu diesem Auswahlbildschirm übergeht. Und wenn ich auf das X tippe, wechselt die Instanz sofort zum Shopping-Bildschirm. Das wollen wir nicht. Wir wollen einen Übergang. Wir möchten, dass dieser Bildschirm nach oben gleitet und im X wieder nach unten gleitet. Also, was wir tun müssen, ist wählen Sie den ah Prototyp. Also ah, klebrige Linie, die wir gerade gemacht haben. Das war vom Boba-Tee hier und wo es sofort steht. Wir wollen, dass es einen Einzug gibt. Also, was es sagt, ist dieser Bildschirm hier, dieser neue Bildschirm wird sich bewegen, und dann definieren Sie, wie er sich bewegen wird. Also hier haben wir die Folie links. Sie können ein Beispiel dafür sehen, dass es von der rechten Folie links kommen wird. Wir haben die Dia-Schreibvorgänge, die von rechts kommen. Wir haben die Rutsche nach unten, um von oben nach unten zu kommen, und wir haben die, die wir tun wollen, das ist die Rutsche nach oben. Also dieser Bildschirm, dieser Auswahlbildschirm hier, wird oben auf Ihrem Einkaufsbildschirm gleiten. Also, jetzt haben wir das, um sicherzustellen, dass Sie das bei MoveOn ausgewählt haben und die , Spezifikationen dafür,wie es eingehen wird. Stellen Sie sich auf. Schauen wir uns jetzt den Prototyp an. Also, wenn ich irgendwo tippen, wo der regelmäßige Milchtee ist, dass Sie sehen können, wie das gleitet und ich denke, X ist immer noch auf Instant. Also, jetzt wollen wir diesen Bildschirm toe auch wieder nach unten schieben, indem Sie die X. Es ist eine Menge Male, wenn Sie dies tun, Ich habe gesehen, ist manchmal haben Sie bewegen in, ausgewählt, und dann werden Sie diese Spezifikationen auf Gehen Sie nach unten und es sieht aus wie das , was Sie wollen. Aber lassen Sie mich Ihnen zeigen, was hier passiert, um zu sehen, wie es den anderen Bildschirm auf diesem Übergang mitgebracht hat . Also lass mich das nochmal machen. Du klickst hier auf den regulären Boba Tea, er gleitet nach oben. Das wollten wir. Das ist ein guter Übergang. Aber wenn ich das X gedrückt. Sie können sehen, der Bildschirm kommt von oben, der Bildschirm unten auf dem Shopping-Bildschirm, und es gleitet wieder nach unten. Wir wollen nicht, dass wir das nicht wollen. Wir wollen, dass dies so aussieht, als ob es einfach nach oben gleitet und dann wieder nach unten gleitet. Das wird also verursacht, weil wir die Auswahl hier auf der Animation definiert haben, als sich bewegen wenn wir tatsächlich ein Auszug sein wollten. Es ist wie, Geh aus dem Weg. Also wieder haben wir die regelmäßige Milchtee-Auswahl kommen in als den Prototyp sagen, diesen Bildschirm nach oben zu bewegen , bewegen Sie sich hinein und dann haben wir die X-Taste informiert zu bewegen und gehen Sie nach unten, um diesen Bildschirm zu enthüllen . Der Shopping-Bildschirm hier. Also lassen Sie uns voran und schauen Sie sich diese Seite tippen Sie auf die regelmäßige Milchtee-Auswahl Foto rutschen nach oben. Und jetzt, wo wir die Folie haben, um den Zug zu verschieben, werden Sie sehen, wie er sich bewegt und einfach nach unten bewegt. Es bringt nicht den anderen Bildschirm mit sich, also bewegen Sie sich ein. Das ist hoch und zieht aus. Kühl runter gehen. Das ist ein wirklich gängiges mobiles Muster, ein Interaktionsmuster. Gleitet die Dinge mit einem X nach oben und gleitet dann auch mit dem X nach unten. Wenn es von links nach rechts kommt, ist das normalerweise ein Zurück-Knopf. Und wir werden Gelegenheit haben, in , der Einkaufskorb-Erfahrung zu Prototypen,wie das aussieht, mit dem Zurück-Button. Alles klar, cool. Also an diesem Punkt, ähm, wollen wir ein paar Etiketten hinzufügen, dass du auf dem normalen Milchtee bist, jemand, der diesen regulären Text hier kopiert. Ich werde es hier einfügen. Und ich glaube, wir sagten, das war 16 Punkte. Lass uns das zu einem 22 Punkt machen. Wie die Stammgäste dort. Das sieht gut aus. Ich kopiere das und nenne es einfach normale Milch T und ich mache das aus meiner Pause. Lösen Sie das und machen Sie es einfach fett. Das sieht gut aus. Irgendwie Zentrum. Das hier. Wenn Sie etwas Spaß damit haben wollen, lassen Sie uns einfach stoßen den Milchtee bis ein ganzes Bündel, damit Sie sehen können, ich habe es jetzt 32 gemacht und ich habe die regelmäßige, dass das sieht gut aus. Das kommt da hin. Eine Sache, die ich hier hinzufügen muss, ist , dass Sie das Wort Milchtee sehen können. Es hat eine Menge von Treffen, ähm, ähm, Absatzabstand zu lassen. Also der Abstand zwischen dem Wort Milch und dem Wort T dieses Leerzeichen hier, das Letting oder Zeilenhöhe oder Absatzabstand genannt wird . Ähm, der Grund, der Lassen genannt wird, war zurück in dem Tag, als sie Schriftsatz machten. Sie benutzten, um es aus Metall zu tun, und sie würden sie eine Schriftsatzmaschine haben, wo sie einzelne Buchstaben ausschneiden würden . Und dann würden sie , um diese Briefe arrangieren, umWorte zu machen. Und sie würden tatsächlich Stücke von Blei zwischen jedes Wort hier setzen, um die Vermietung zu machen. Deshalb hieß es Lassen, weil man verschiedene Punktgrößen von Metall hatte. In der Welt der CSS-Sprachen heißt das hier Zeilenhöhe. Also lassen Sie uns voran und machen, dass eine kleinere Zeilenhöhe. Ich werde nur 50 als Startpunkt sagen. Und dann gehen wir jetzt runter. Also, ähm ja, 38 ist perfekt. Also jetzt habe ich diesen Satz bei 42 der Schriftgröße und 38 für die Zeilenhöhe und 8% für den, ähm, den Zeichenabstand. Alles klar, das sieht gut aus. Ich habe hier ein bisschen Hierarchie mit der regulären Schrift und dem Milchtee erstellt . Da haben wir eine 42 mutige erstellt. Ich bin mir nicht sicher, ob wir die Schriftart tatsächlich verwenden werden, aber nur für den Fall, gehen wir weiter und machen es. Machen wir einen, ähm, ähm, einen 42-Punkt-Zeichenstil oder ein Textil. Also, jetzt haben wir eine ziemlich gute Reihe von 40 42. Ich muss das umbenennen. Ich habe es getippt. 43. Es ist 42. Okay, also haben wir 40 bis 20 zu 19 und 16 ist bis jetzt ziemlich gut. Immer eine Reihe von Charakterstilen, die schwächen und Textilien schwächen wi 5. Entwerfen der the: In Ordnung, willkommen zur nächsten Reihe von Videos. In diesem Video werden wir den Auscheck-Workflow abdecken. Also haben wir gerade die Login und Anmeldung Workflows entworfen und Prototypen erstellt. Wir haben den Shopping-Workflow durchgeführt, und jetzt werden wir den Check-out-Workflow durchlaufen, um zu sehen, wie das aussieht werden wir hier den Prototyp durchlaufen. Also haben wir das schon getan. Wir haben die Anmeldung im Login erstellt. Sie können Ihre E-Mail auf Ihr Passwort eingeben. Sie haben sich beim Laden der Anwendung angemeldet. Du hast den ganzen Boba-Tee. Das ist, was wir in dem letzten Video, das wir auf dem Boba-Tee erstellt haben, um, Aromen hier, die Sie auswählen können, wenn Sie auf den normalen Milchtee hier tippen, können Sie sehen, dass wir die Milch die regelmäßige süße und das mittlere Eis Drop down Auswahlen, die oberen Auswahlschaltflächen. Und wir haben auch den Prototyp des X, der das schließt. Öffnen Sie es wieder. Wir haben eine mobile Dropdown-Auswahl getroffen, aber Sie sehen hier, wenn Sie halbsüß auswählen, ändert es die halbsüße. Sie können die große Tapioka können Sie die Anzeige zu tun und dann gehen wir auf dieses Video. Wir werden den Checkout-Workflow ausbauen und gestalten. Also, wenn ich auf das Shopping-Symbol tippe, erfahre ich jetzt die Checkout-Erfahrung, wo es mir zeigt die Anwendung zeigt mir meine Auswahl, was war? Ich hatte meinen Milchtee. Meine Menge war eine, die ich bearbeiten konnte. Entfernen Sie diese. Wenn ich hören will, kann ich das schließen. Geh zurück. Und wenn ich bereit bin, nachdem ich meine Gesamtsummen gesehen habe, die Versandkosten, die Steuern, die ich zum nächsten gehen könnte. Sie können sehen, dass der Bildschirm von links nach rechts gleitet und die Rückseite zurück gleitet . Nun, wir machen den Prototypenwechsel auch. Sie können in Ihrer Adresse diese Luftkomponenten setzen, die wir bereits gemacht, so sollte es ziemlich einfach und schnell sein, diese Presse Andone gehen zum nächsten und wieder , Wenn ich zurückgehen möchte, Ich kann den ganzen Weg zurück der Anfang. Ich kann schließen. Es ist ein sehr häufiges Interaktionsmuster, das wir in mobilen Geräten verwenden. Get to slide up mit dem X. Jetzt kann ich in eine Reihe von Back-Tasten gehen, meine Adresse schnappen. Ich kann in meine Zahlungsinformationen drücken getan. Ich sehe die Summe, die ich bezahle. Es bestätigt die Zahlung. Und dann kann ich sehen, wie mein Boba-Tee mir mit einer Reihe von Bildschirmen geliefert wird, die den , ähm, den Zeitdauer-Übergangseffekt haben , ähm, ähm, . Jetzt können Sie den letzten Bildschirm sehen. Mein Boba-Tee ist angekommen und ich drücke OK, habe es bekommen. Und ich bin wieder auf dem Bildschirm hier, also werden wir das in diesem Video durcharbeiten. Gehen wir zurück zu unserer Ah-Figment-Datei, die wir hier erstellt haben. Du kannst in die lernende Paige gehen, die ich hier habe. Sie möchten mit dem Prototyping beginnen, wie es aussieht, wenn jemand klickt oder der Benutzer darauf tippt . Schauen Sie sich Icahn hier in der Tab-Leiste an. Also lasst uns hier von Anfang an greifen. Lasst uns diesen Ladebildschirm hier schnappen, Befehl sehen und hier rüber kommen. Befehl V. Fügen Sie es ein und verschieben Sie es in Position. Hier, rufen wir diesen Checkout an. Also wieder, klicken Sie einfach auf die Kunsttafel, klicken Sie auf die Ebene auf der linken Seite und tippen Sie ein, schauen Sie sich an und lassen Sie uns fortfahren und entfernen Sie alles, was wir dort haben. Eines der Dinge, die wir für diesen Bildschirm brauchen, ist, dass wir das X brauchen also nehmen wir das X und fügen es ein. Was hat der Prototyp angezapft? Stellen Sie sicher, dass keine Prototyp-Vor-vorhandenen Prototyp-Links bereits darauf gesetzt sind . Und das tut es. Also lasst uns einfach voran und schnappen uns das. Ziehen Sie es einfach ab und lassen Sie los. Nun, da X nichts auf dem Prototyp und auf dem Foto letzten Prototyp hier , können Sie sehen, was wir hier oben sehen, ist, dass wir den Check-out Titel haben wollen, den regulären Milchtee mit den vordefinierten Auswahlen, die Menge mit der Fähigkeit, mehr als eine hinzuzufügen. Ah, und es entfernte Knöpfe. Und dann wollen wir diese Summen hier einfügen, die wir haben. Gehen wir also voran und entwerfen uns. Dieser Abschnitt hier wird wahrscheinlich kopieren und einfügen, um es zu erleichtern. Aber fangen wir mit dem Check-out an, ähm, Tab oben dort. Also lasst uns dieses regelmäßige Kämpfen hier packen lässt es uns kopieren und hier einfügen. Lass es uns weiß machen. Lassen Sie es uns zentrieren und wir legen es hier. Rufen Sie diesen Checkout in Ordnung, und das war bereits von 16 Punkten. Farbstil sind Textilien. Das ist gut. Wiederverwende das. Gehen wir weiter und zentrieren Sie das ein bisschen. Das sieht gut aus, alles klar, und lassen Sie uns das kopieren. Ändern wir nun die Ausrichtung von einem zentrierten Absatz. Ausrichtung nach links ausrichten, Eine Linie, die gut aussieht. Und nennen wir das den normalen Milchtee. Wir haben 16 Punkt, und wir haben auch eine 14 Punkt fett Lasst uns gehen machen dies ein 14 Punkt Punkt. Mutig. Das sieht gut aus. In Ordnung. Und ich werde das kopieren. Ich halte Option klicken und ziehen und halten Shift. Mitgliedschaft verhindert, dass Dinge ausziehen. So eine Ausrichtung. Ich halte Schicht. Das kann ich nicht mehr tun. Und lassen Sie uns sehen, wenn ich die Höhe dieses Textfeldes dehne, war es standardmäßig auf eine mittlere Ausrichtung für den Text eingestellt. Lassen Sie uns Top-Ausrichtung tun, die es einfach an die Spitze des Textfeldes bewegt, das gut aussieht und die Auswahl, die wir für diese regelmäßige Milch zu Ihnen hatten, wie wir Milch hatten, wir hatten eine halb süß, und wir hatten auch die hier zurück und werfen Sie einen Blick mittleres Eis. Und dann hatten wir auch die große Tapioka. In Ordnung, lassen Sie uns die etwas größer machen. Lasst uns unsere nehmen, machen wir das zu unserem 19 Punkt. Ja, das sieht gut aus. Ähm, was macht man? 19-Punkt-Licht? Ja. Ja. Das sieht dort gut aus. Und dann lasst uns das die hellere graue Farbe machen, das kalte Grau, das wir gemacht haben. Alles klar, das sieht gut aus. In Ordnung, dieser Punkt. Ich werde den Befehl Schnelltastenbefehl verwenden, oder gehen Sie zum Formwerkzeug hier und gehen Sie zum Rechteck. Ich werde Shift halten, klicken und ziehen und einen Rechteck hier in der Mitte machen. Irgendwie so. Wir können das etwa 60 mal 60 hier machen. Und lasst uns das auch zum coolen Grau machen. Wählen Sie also das kühle Grau, das wir früher gemacht haben. Alles, was du da tun musst, ist auf die vier Punkt-Sportarten als Phil zu klicken. Hier sind alle unsere Farbstile. Cool, grau. Und ziehen wir die Deckkraft davon auf etwa 30 zurück. Das sieht gut aus. Okay, wir weiter und machen ein Textfeld etwa die gleiche Größe dieses Rechtecks. Hier, geben Sie eins ein. Machen wir das, ähm, weiß. Sie können unsere vorbestehenden Farbstile wählen, um es weiß zu machen. Und hier ist ein Fall, in dem ich möchte, dass es, ah, in der Mitte des Absatzes, aber auch in der Mitte des Textfeldes ist. Und lassen Sie uns voran und machen dies die 42 Punkt Ich werde zu einem 22 bewegen. Sieht so aus, ja, machen wir diesen 42 Punkt. Ich werde auch den normalen Milchtee kopieren und ihn nach rechts bewegen und einfach Q zwei eingeben . Warum? Für die Menge. Und machen Sie das Textfeld gleich mit. Und da gehst du. Sie können die Menge dort sehen, oder? Das nächste, was oben ist, bist du. Herzlichen Glückwunsch. Das, um das X, das wir hier gemacht haben, klicken und kopieren Sie es. Du kopierst nur die Komponente und lass uns zurückgehen und das rückgängig machen. Also geh zurück und mach es zu einem normalen, äh, nicht 90 Grad. Und Sie können sehen, jetzt haben wir das Plus-Symbol. Ich werde es hier drüben kopieren und es zum Minus-Symbol machen. Da Sie noch nichts angeklickt haben, ist der Benutzer Dies deaktiviert. Also lassen Sie uns gehen, machen dies die kühle graue Farbe und ziehen Sie diese zurück über 20% Kapazität, vielleicht etwa 40% Kapazität. Das würde also ermöglichen, wenn Sie mehr als einen hinzufügen würden. Sie können bis zu 23 gehen und dann zurück. Teoh. 2 zu 1. Okay, und dann lassen Sie uns diesen normalen Milchtee hier kopieren und einen Knopf für die Bearbeitung machen. Und da dies Tap Kräuter ist, ist dies etwas, das Sie auf dem Produkt engagieren können. Machen wir es zur primären Aktionsfarbe. Sie können das hier sehen, und ich möchte auch einen für das Entfernen machen und ein wenig Abstand machen. Hier, lass uns unsere kleine visuelle lass uns unsere kleine visuelle Hierarchie hier. Lasst uns eine Linie zwischen diesen beiden machen. Also habe ich gerade das Zeilenwerkzeug geschnappt. Sie können auch schnelle Taste, die L. Und lassen Sie uns auch machen dies die kühle Grau und Ton es zurück zu etwa 20% Kapazität. Oh, vielleicht 30% Prozent Deckkraft dort, oder? Ziemlich einfach. Schauen Sie sich die Seite an, die wir aufbauen. Lass uns etwas Spaß haben und das hier Prototypen machen. Also, wenn Sie wählen Sie die eine und den Kreis und das Einkaufswagen-Symbol und tun Sie einen Befehl G, die Gruppe ist, oder Sie können mit der rechten Maustaste klicken und gehen Sie zur Gruppenauswahl. Gehen wir hier zum Prototyp-Tab. Nun ziehen wir diesen kleinen klebrigen Produkt-Prototyp-Arm auf den Check-out-Bildschirm hier aus dem Einkaufserlebnis, das wir haben, wir wollten auf Fass sein. Wir wollen, dass es hier bewegt wird. Einziehen und wir wollten von unten kommen. Einige bewegt sich nach oben. Und jetzt für die X. Gehen wir weiter und ziehen das zurück auf den Shopping-Bildschirm hier, und wir wollen, dass das hier rausgezogen und nach unten verschoben wird. Also ist es gut von unserem Prototyp und mal sehen, wie das hier aussieht. Aber ein Drücken, die Play-Taste oder die gegenwärtige Taste, Sie haben möglicherweise bereits die Registerkarte geöffnet. Gehen Sie einfach rüber zu diesem Tab und Sie können hier sehen. Wenn ich das Shopping-Symbol gedrückt habe, gleitet es nach oben, der Bildschirm gleitet nach oben, und wenn ich das X drücke, gleitet es nach unten Sehr schön. Wenn Sie weitere Bildschirme hinzufügen möchten, damit es angezeigt wird, wie es aussieht, wenn Sie hier weitere Zahlen hinzugefügt haben , drücken Sie, dass es entfernt wird. Fühlen Sie sich frei, das zu tun. Ich werde ich nur, ich beschließe normalerweise, das nicht zu tun, Ähm, für diese nur mehr darüber, dir das Werkzeug beizubringen. Aber du kannst das zu deiner eigenen Zeit machen, wenn du es wolltest. Ähm, diesen Punkt, lassen Sie uns einfach kopieren. Dieser Text aus dem endgültigen Prototyp, Sie können ihn einfach auswählen. Dieser Text aus dem endgültigen Prototyp, Kopieren Sie es jetzt, da Sie wissen, wie Sie das Textwerkzeug verwenden. Ähm, du bringst das aus, wenn du willst, aber lass es uns einfach weitermachen und kopieren. Beschleunigen Sie die Dinge ein wenig. Fügen Sie es einfach ein. Denken Sie daran, die Kunsttafel auszuwählen. Wenn Sie nur in unserem Board auswählen, sehen Sie, wie es einfügen? Ähm, nicht an Ort und Stelle. Aber wenn Sie die Kunsttafel von oben hier auswählen und drücken Sie Befehl v es an Ort und Stelle einfügen von wo Sie es kopiert. Und dann haben wir hier eine Zeile für diese Dropdown-Auswahl gemacht. Lasst uns die Linie schnappen. Und lassen Sie uns Tempo, dass hier und geben Sie diesem einen Abschnitt, falls Sie mehr als ein Recht hatten An dieser Stelle, was wir tun können, ist, dass Sie eine Anzeige oder einen Abbrechen Button haben wollen, dass sie die Verwendung Ercan oder nächste und Abbrechen Schaltfläche, die der Benutzer kann engagieren sich mit an jedem Punkt. Also, wenn du willst? Stornieren Sie einfach alle Dinge, die Sie in der Warenkorb-Erfahrung durchgehen. Sie können das haben und wir werden die nächsten Schaltflächen hier haben, die uns helfen, auf die nächste Seite zu gehen. Also, was ich tun werde, ist, dass ich hier den Hinzufügen-Button hinzufügen werde. Ich werde es weniger breit machen. Ich werde es hier drüben kopieren. Und ich denke, sie sind eigentlich das Original mit könnte okay sein. Lassen Sie uns wahrscheinlich weiter mit hier über 1 45 breit. Jetzt werde ich es kopieren. Das sieht gut aus. Okay. Und was ich hier tun werde, ist, dass ich diese Komponente lösen werde, also werde ich sie als Komponente entfernen und sie nur zu einem Designelement zurückbringen. Also, was du tust, hast du Recht? Klicken Sie auf die Schaltfläche. Nun, für wählen Sie zuerst die Schaltfläche, und dann rechts, klicken Sie darauf und drücken Sie trennen Instanz. Und Sie können sehen, es ging von einem lila Ah, Begrenzungsrahmenauswahl zu einem blauen Begrenzungsrahmen Auswahl anzeigt, dass es nicht mehr eine Komponente auswählen. Nun, ich werde den Text auf diesen Button hier auf den nächsten ändern, und ich werde den Text hier in diesen ändern, um abgesagt zu werden. Und was ich hier tun werde, ist, dass ich dieses Hinterzimmer schnappen werde und ich füge hinzu, dass ich das Feld entfernen werde . Sehen Sie das Minus hier auf der rechten Seite, aber entfernen Sie das Feld. Ich möchte noch ein Gefühl hinzufügen. Ich drücke einfach noch einmal das Plus, aber ich möchte einen Strich hinzufügen, und ich möchte den Strich machen. Die Primärfarbe, die wir hatten, damit Sie hier sehen können, hat das, dass ich diese ein wenig nach links schiebe , zentriere sie nach oben. Und jetzt haben wir eine primäre Taste und eine sekundäre Taste. Also lassen Sie uns diese sekundäre Taste machen. Ah, Komponente, damit wir es wiederverwenden können. Also wieder, ich habe den Abbrechen-Button geschnappt. Ich gehe auf die Seite Komponentenbibliothek hier auf der linken und füge sie in diese Seite ein. Ich wähle alles aus. Gehen Sie auf das Diamant-Symbol hier, die obere erstellen Komponenten. Und wo das heißt, primäre Taste, nennen wir es sekundär. Es wurde geändert. Die wurden zu nur Textrede abgesagt. Und Eric, gehen wir zurück zu unserem Lernen Paige hier, und lassen Sie uns gehen, die Komponente, die die Schaltfläche abbricht, in diese Seiten einfügen. Also drückte ich die Registerkarte „Assets“ oben, links hier bei den Ebenen. Ich kann die sekundäre Taste sehen. Hier klicke ich und ziehe es in den Prototyp. Fügen Sie es direkt oben auf dieser Schaltfläche „Abbrechen“ ein. Löschen Sie die Schaltfläche „Abbrechen“. Ich habe die Kunsttafel hier am oberen Druckplatz ausgewählt. Ich hoffe, sie haben nicht irgendwo bezahlt. Eine Sekunde. Also dort haben wir den Abbrechen-Button. Ich werde es kopieren. Meine in die Kunsttafel geklebt. Normalerweise, wenn Sie diese Taste nicht ursprünglich in der Kunsttafel selbst Tempo tun, wird es nicht irgendwo so zahlen, wie es passiert ist, wie es vorher. Also lass mich weitermachen und das hier runterziehen. Gut. Nun, das ist richtig. Oben auf dem Abbrechen-Button werde ich befehligen. Sehen? Und jetzt werde ich den Abbrechen Button auswählen, der nicht die Komponente ist und gelöscht. Und jetzt werde ich die Kunsttafel auswählen, einfügen und dann ändern, dass der Text dieser Komponente jetzt eine Instanz dieser Komponente macht und aufruft. Abbrechen. Alles klar, also lassen Sie uns voran und machen den Abbrechen Button zurück zum ursprünglichen Einkaufsbildschirm hier , der nicht die Benachrichtigung für den Warenkorb hat, und wir wollten immer noch die gleiche Interaktion hier. Zehe schieben Sie diese Seite nach unten, so dass Sie sehen können, wenn ich darauf klicke, es gleitet nach unten. Wir möchten, dass die nächste Schaltfläche zur nächsten Reihe von Seiten hier geht. Wenn Sie also zurück zur Registerkarte Ebenen gehen und wir uns den letzten Prototyp ansehen, ist die nächste Reihe von Seiten hier, meine Adresse einzurichten. Die Lieferung der Boba wird also , an meine Adresse enden,die ich hier eingebe. Also werden wir hier den Zurückpfeil haben, also gehen wir zurück zu unserem Lernen. Paige, schnappen wir uns dieses Kunstbrett hier. Was ist halten Option Klicken und ziehen und halten Sie Shift und lassen Sie uns diese Seite kopieren. An diesem Punkt greifen wir das Pfeilsymbol. Also, wenn Sie zu den Design-Waren gehen, die ich hier erstellt habe und greifen Sie dieses Pfeil-Symbol drücken Befehl, sehen, und wir halten das X hier für jetzt, nur für die Positionierung des Pfeils klicken Sie auf den Auscheck-Bildschirm, dass wir auf genau hier, die neue, die wir kopiert haben. Gehen wir weiter und nennen diese eine Adresse. Also klickte ich auf das Artboard doppelklickte auf die Adressebene auf der linken Seite und ich kann den Namen ändern. Fügen Sie das an Ort und Stelle ein, fügen Sie es in die Kunsttafel, platzieren Sie es direkt um die Position des X, kopieren Sie es, löschen Sie das X drücken Sie die Adresse. Ich bilde hier oben an und füge den Pfeil ein. Jetzt heißt es diese Adresse hier und lasst uns das alles entfernen. Diese Elemente hier. Also lasst uns das Prototypen machen. So wird der nächste Bildschirm hier zum Adressbildschirm gehen. Aber in diesem Fall wird es immer noch hier angezapft sein. Wir ziehen ein, anstatt auszuziehen. Ihre können sofort oder intelligent animiert werden. Lassen Sie uns bewegen in erstellen. Und wir wollen, dass dieser hier von links nach rechts gleitet, und wir wollen, dass der Zurück-Pfeil hier ausgeht. Aber anstatt von links hereinzukommen, wollten wir von rechts kommen, so dass es nach rechts bewegt. Einziehen ermöglicht es diesem Adressbildschirm, sich von links zu bewegen und wenn wir, wenn wir sagen, aus dem Weg zu bewegen, ermöglicht es diesem Bildschirm, den wir ausgewählt haben, aus dem Weg zu bewegen, und wir wollen nach rechts gehen. Also manchmal du. Wenn es unklar wird, wie diese Arbeit gerade erfüllt, treffen Sie diese Auswahl und gehen Sie dann in Ihren Prototyp und spielen Sie mit ihm im Prototyp. Und es hilft Ihnen, Heiligtümer Luft zu finden, die für Sie arbeitet, damit Sie sehen können, das nächste wird dies in dieser Adressseite gleiten. Wenn ich zurückgehen will, kann ich zurück. Und es ist eine ziemlich häufige Interaktion, diese Folie nach oben zu sehen. Sehen Sie das X als Nächstes. Und jetzt betreten wir einen Siris von Rücktasten und Rückbildschirmen. Okay, an diesem Punkt müssen wir die Adressinformationen eingeben. Also werde ich zu einigen der Komponenten zurückkehren, die wir bereits hatten. Also, wenn Sie sich erinnern, wir haben auf dem Asset-Bildschirm hier gebaut. Wir haben einige Form-Standardkomponenten erstellt. Also greifen wir diese Komponente, klicken und ziehen Sie sie auf das Kunstboard. Es gab einen der Standardwerte. Rufen wir diese eine Adresse an. Und da diese Anwendung kennt meinen Namen bereits, habe ich mich bereits angemeldet und ich habe mich vorher angemeldet und gab ihm meinen Namen. Lassen Sie uns das hier ausgefüllte Fokusformular greifen und Sie könnten sehen, ob Sie auf ein, um auf eine Komponente klicken und wir werden Sie zu dieser Komponente bringen, wenn Sie klicken und ziehen. So benutzt man es hier auf der Kunsttafel. So haben bereits, ah Eingabeformular, das ich erstellt habe, das hat. Wir haben bereits diejenige, die ein Fokus ST-Eingang ist. Also lassen Sie uns voran und sagen Name hier und wir werden dies mit meinem Namen füllen und lassen Sie uns voran gehen und den Text in Kleinbuchstaben ändern. Im Moment haben wir das Adressfeld. Da dies eine Anwendung ist, die nur in San Francisco funktioniert, werden wir San Francisco eingeben und diese 30% Deckkraft machen. Also, um, eigentlich, eigentlich, bevor wir San Francisco machen, müssen wir die Wohnung oder das Süße hierher bringen. Okay. Und jetzt, da dies keine Anwendung ist, die Onley in San Francisco verwendet wird, geben wir San Francisco als Stadt ein, und lassen Sie uns voran und Standard, die , ähm, , ähm,machen die Deckkraft 30% Deckkraft. So ist deaktiviert. Das Kleid muss in San Francisco sein. In Ordnung, und dann gehen wir weiter und sehen, wie Figment tut, das gibt Ihnen alle Abstandsattribute . Es verteilt also gleichermaßen diese Formularfelder für uns mit jeweils 20 Pixeln und wir hatten den Staat Kalifornien. Und das nächste, was wir hier hatten, war, sicherzustellen, dass das hier gleichermaßen verteilt ist. Wir hatten die Telefonnummer hier. In Ordnung. Ziemlich einfach, da wir diese Komponenten bereits ausgebaut haben. Ich werde es nochmals überprüfen, aber die letzte Seite? Ich werde es nochmals überprüfen, Ja. Ja. Sieht gut aus. Das haben wir schon. Prototyp, damit Sie sehen können. So sieht das aus. Ich gehe als Nächstes. Jetzt haben wir die Adresse. Ich werde diese Adresse kopieren, Option halten, auf die Kunsttafel klicken und verschieben. Und ich werde drücken. Ich klicke auf die Schicht dieses Kunsttafels und nenne es einfach ein Kleid. Ordnung , an diesem Punkt kopiere ich die Tastatur, die wir haben, vom Login. Kommando einfach. Ich wähle den Adressbefehl V aus und kaufte einen Knall, aber einen Boom. Ich wähle den Adressbefehl V aus und kaufte einen Knall, Wir haben den Tastaturbildschirm. Jetzt gehen wir weiter und bevölkern alle drei hier. Also, wenn Sie sehen können, habe ich die Komponente für die aktive Eingabe Bleiben Sie bereits für diese Formularfelder. Einige kopieren einfach diese Option Verschiebung und ziehen sie und bringen das einfach an die Spitze der ganzen Telefonnummer, der Wohnung und der Adresse. Also werde ich sehen befehlen? Jetzt kopieren Sie die, und ich lösche die Wohnung, die Telefonnummer, und ich werde die Kunsttafel nochmal auswählen. Befehlen Sie V und legen Sie die hier. Also an dieser Stelle thes, die an Ort und Stelle kleben. Jetzt habe ich die Adresse, meinen Typ in der Adresse, und wir werden nur 111 Aw, Noboa Street setzen , 111 Aw, . Und das werden wir tun. Hier war Wohnung ich slash süß und lassen Sie uns einfach tun 123 für die Wohnung. Und dann hatten wir die Telefonnummer hier. Geh weiter und schnapp dir Aaron Lawrence hier und lass uns 1112225555 als Telefonnummer machen. Okay, an diesem Punkt, dieser Go-Knopf, den wir brauchen, um dies zu sagen. Wenn Sie also das Los auswählen, gehen wir weiter und ändern Sie den Text zurück in Roboto, damit wir ihn ändern können und drücken Sie Ah, doppelklicken Sie in das Textfeld und nennen Sie es fertig. Und was das tun wird, ist, dass es Ihnen nicht erlaubt, vorwärts zu gehen. Es wird einfach die Tastatur nach unten schieben und Sie können zu ah gehen, die nächste Schaltfläche hier und gehen Sie zum nächsten Bildschirm. Also, dieser Punkt, ich werde die Option halten. Ich klicke und ziehe diesen mobilen Prototyp oder ein mobiles Kunstbrett und mache eine Duplizierung davon. Ich werde Sie sehen, wie weit kluge Figur war. Es hat bemerkt, dass ich das unser Brett kopiert habe. Und als ich losließ, änderte es die Adresse von eins hier auf zwei und bemerkte, dass ich immer Kunsttafeln nummerierte . So hat es gerade automatisch angefangen, inkrementell mein Kunstboard zu nummerieren. Sehr cleveres Werkzeug. Ich werde die Tastatur löschen, und jetzt ist es ein Prototyp. Also gehe ich zurück zu meinem Prototypen-Tab. Oben, rechts, ich klicke darauf und lass uns weitergehen und auf die Adresse, die Wohnung und die Telefonnummer klicken . Hier, lassen Sie uns einen Befehl G oder einen Rechtsklick machen und gruppieren Sie diese einfach als eine Auswahl und gehen Sie voran und ziehen Sie den Prototyp gooey Arm an die nächste Adresse. Ein Bildschirm und wir wollen oben, aber wir wollen nur sofort. Nein, Ähm, wir wollen nicht, dass irgendwas ausgegebenes Zeug hier an diesem Punkt passiert. Lassen Sie uns voran und wählen Sie die Schaltfläche fertig hier und klicken Sie und packte den klebrigen Arm. Klicken Sie es auf die Kunsttafel, adressiert an und auf Tippen und wieder. Sofort. Nichts Schickes. Okay, was passiert jetzt, wenn Sie früh in der Adresse tippen? Die Wohnung oder die Telefonnummer ist? Du bekommst die Tastatur. Wir werden es vorerst automatisch in der Kunst bevölkern. Aber wenn Sie einzelne Bildschirme für jeden erstellen möchten, wissen Sie jetzt, wie das geht. Und dann, wenn Sie don drücken, wird eine Tastatur heruntergefahren. Wer kann hier zum nächsten Bildschirm bewegen, was in der Eingabe Ihrer Kreditkartendaten ist. Alles klar, so gut. Ich kopiere diese Adresse hier mit Option. Ich wähle die Art Board, klicken Sie darauf, halten Sie Option, um den Doppelpfeil zu erhalten, klicken Sie und ziehen Sie Shift oder wieder. Ich könnte es einfach kopieren, und ich kann V befehlen und es wird es für mich einfügen. Also Befehl sehen Befehl sein, Lassen Sie uns diese eine Zahlung nennen und nennen Sie es eins. Und lassen Sie uns die Spitze hier auf die Zahlung umbenennen und gehen in unsere Prototyp-Tab hier, genau hier. Lassen Sie uns den Pfeil rab, weil der Pfeil jetzt zu Adresse gehen, wo vor dieser Ära ging , um die Kasse. Jetzt gehen die Zurück-Taste und der Pfeil zum Zahlungsbildschirm. Also nochmal nichts Schickes. Wir wollen nur vom Fass. Oh, und das tun wir. Wir wollen, dass es auszieht? Ja, richtig. Und wir wollen nach rechts gehen. Also lassen Sie uns voran gehen und einige von ihnen hier löschen und lassen Sie uns sehen, wie das auf dem Prototyp aussieht , sagte ich drücken nächste Hoffnung, die nicht funktioniert hat. Mal sehen, was hier oben passiert. Wir haben den nächsten Knopf nicht mit diesem Bildschirm verbunden. Also lasst uns als Nächstes schnappen. Und lasst uns den Prototyp schnappen, der mit Payment eins verbunden ist. Und wir wollten hier einziehen. Also wollen wir auf Wasserhahn, Einzug und wir wollen von links kommen und dann wollen wir den Pfeil hier auf Auszug und wir wollen von rechts kommen. Also, um das wieder durchzugehen, hier ist unser Checkout, den wir als Nächstes bekommen. Hier sind Theodore Informationen. Die Telefonnummer Drücken Sie fertig. Ich drücke den nächsten Knopf, und diese Seite kommt von links rein, wird von rechts einziehen. kannst du sehen. Und dann wird sich dieser Bildschirm nach rechts bewegen, damit Sie sehen können, wie sich das nach links bewegt . Unsere nächste Schaltfläche hier besagt, dass diese Seite von links einzieht und der Pfeil hier, die Verbindung zu der Adresse zum Bildschirm wird aus dem Weg nach rechts gehen. Und so sieht das aus. Einziehen, ausziehen. Okay, schauen wir uns die Zahlungsdetails an. Was wir hier hatten, war, ähm, wir hatten die Adressdaten oben. Also gehen wir weiter und schnappen uns den normalen Milchtee und den süßen halb, äh, den halb süßen und mittleren Eis-Text hier, lassen Sie uns einfach direkt an der gleichen Stelle auf dem Zahlungsbildschirm einfügen. Und lassen Sie uns dies einfach in die Lieferung ändern oder liefern. Und lassen Sie uns einfach die Informationen eingeben, die wir auf dem letzten Bildschirm hier gemacht haben. Also haben wir meinen Namen. Sie haben Aaron Lawrence. Wir haben 111 Boba Street und wir haben die Nummer 111 oder 123 für die Wohnung. Und wir haben die Telefonnummer, die 1112225555 war. Alles klar, cool. Also ziehen wir an diesem Punkt eine weitere dieser Formkomponenten nach oben , ,die wir erstellt haben. Wenn wir also zu den Asset-Bildschirmen auf der linken Seite gehen, gehen Sie vielleicht zu den Asset-Bildschirmen auf der linken Seite. Lassen Sie uns die Formularvorgabe greifen. Bringen Sie das auf die Kunsttafel hier. Und das wird Name auf der Karte sein. Ich bin in einer Kopie. Dieser ist Brunnen zu den 20 Abstand, und das wird eine Autonummer sein, und dann ziehen. , Klicken Sie auf, Halten, Halten, Option und Umschalttaste. Kopieren Sie diese Karte Nummer eins hier. Und nennen wir dies das Ablaufdatum. Und was ich hier tun werde, ist, dass ich das Zeilenelement auswählen werde. Eigentlich werde ich hier ein Rechteck schnappen und einfach ein schwarzes machen. Ich kann auch einfach auf die Ich lasse sie fallen, klicken Sie auf den Hintergrund, so dass es die gleiche Farbe wie der Hintergrund hat. Und behalte einfach den Zeh. Blenden Sie dieses Formulardokument hier aus. Was passiert, wenn Sie ein Symbol erstellen, das Sie eine Instanz haben, ist, dass ich den Start erstellen kann. Ich kann die Stile ändern, wie ich ändern kann. Die Farbe kann sich ändern. Die Grasung hier kann die Stile dieser Komponente ändern. Aber ich kann es nicht wirklich manipulieren, als ob ich hier nicht in diese Linie gehen und unterschiedliche Breiten von den Linien machen kann . Ich konnte sehen, dass es mich immer noch nicht tun ließ. So hält es es der Komponente ziemlich treu. Also tue ich hier, ist, dass ich es irgendwie vortäusche. Sie können sehen, dass ich diese lange Schlange habe. Ich will diese Zeile nicht da, weil ich das CVV drauf setzen möchte. Also, was ich tun werde, ist, ich werde dieses Ablaufdatum zu greifen. Ich bezahle jemanden wie, Rechtsklick, schieben Sie das nach vorne und ich nenne das CVV. Nur ein kleines Feld hier für drei Zahlen, und ich werde dasselbe tun. Ich werde hier eine Blackbox erstellen und sie einfach über die Oberseite legen. Ich kann drücken, um die Schnelltaste zu erhalten, um die Pipette zu erhalten und den Hintergrund auszuwählen. Und ich habe das schwarze, so dass Sie sehen können, dass ich immer noch die Komponenten habe, die ich benutze, aber ich habe Platz für sie geschaffen. Und auf diese Weise, wenn ich jemals diese Komponente ändern will, Master, habe ich diese beiden Komponenten nicht gelöst und muss zurückkommen und diese neu ändern. Okay, Cool. Also an diesem Punkt gehen wir voran und setzen die Summe, die wir hatten. Also haben wir hier ein Gesamtelement erstellt, und wir haben gezeigt, dass die Summe hier gut ist, das ist 9 49 Und seine Best Practices, bevor Sie etwas kaufen, ist die Summe zu sehen, in Ihr Einkauf hier, um das zentriert zu setzen. Und wir hatten neun, denke ich, 49 als die Summe. Hier, gehen wir und ändern Sie diese Schaltfläche, um zu bezahlen. Und jetzt sind wir in ziemlich guter Form. Also, jetzt, da ich die Zurück-Taste drücke und alle Adressinformationen in ich drücke nächste Nam auf dem Zahlungsbildschirm hier, bin ich fast fertig mit der Zahlung. Also gehen wir zu Ah, lassen Sie uns das wirklich schnell füllen mit den Formularen, die wir erstellt haben, die sich im aktiven Zustand befinden. Und was ich hier tun werde, ist, dass ich diese Zahlung kopieren werde. Sind nicht langweilig. Ich klicke auf die Art Board halten Option und Shift, ziehe es nach rechts, und ich habe eine Kopie davon gemacht. Ich gehe hier zu meinem Vermögen. Ich hole meine Komponenten, die ich erstellt habe. Denken Sie daran, diese Form Fokus. Ähm, aktiven Zustand, den wir haben. Ich wollte all diese hier durch diese Komponente ersetzen, also werde ich gerade ein Zimmer übereinander legen. Ich werde alle vier von, ähm, Befehl nehmen ähm, , sehen, wie ich diese hier lösche, und ich werde die aktiven hier ersetzen. Richtig. Du könntest hier sehen. Ich muss diese Form unter das Rechteck legen, also gibt es etwas Platz. Und ich muss auch das Rechteck greifen, das ich hier erstellt habe. Sie können sehen, wie ich das mache, ist ich klicke und ziehe von rechts, die alle Elemente hier auswählt , so dass ich mehr als ein Element auswählen kann. Wählen Sie alle diese Elemente aus. Wirklich? Ich versuche nur, zu diesen beiden zu kommen, die versuchen, zu diesem Eingabeformular gefüllt und dieses Rechteck hier zu gelangen . Also jetzt habe ich die auch. Jetzt werde ich Schicht halten. Ich werde auf den Titel klicken und Komponente hier für den CVV setzen. Und jetzt habe ich das ausgewählt. Und ich habe nur das Rechteck hier. Jetzt, da ich das ausgewählt habe, klicke ich auf das Rechteck im Ebenenfenster auf der linken Seite und schiebe das über diese Komponente. In Ordnung, also lasst uns weitermachen und die ändern. Also hatten wir Namen auf der Karte, und ich werde vorerst meinen Namen verwenden. Ich werde meine Kartendaten nicht eintragen, aber das änderte den Text hier in , aber den Originaletui und dann hatten wir, ähm,die Kartendaten sind die Zahlen. den Originaletui und dann hatten wir, ähm, So Kartennummer und dann gehen Sie vor und halten Sie Option und drücken Sie den Buchstaben. Acht treffen vier, machen vier Kugeln, machen weitere vier Kugeln, und dann gehen Sie einfach 1111 Es stellt immer die links von den letzten vier dieser Ziffern hier. Ich werde die Ablaufdaten auswählen und ich werde sagen, ich würde sagen 01 2020. Und ich werde den CVV hier CVV machen und war 2123 cool. Richtig? An dieser Stelle brauchen wir auch die Tastatur. Also ist es einfach die Tastatur hier, die wir für die Adresse Art Board erstellt, Fügen Sie es auf die Zahlung. Sind nicht Vogel, den wir hier haben? In Ordnung. Und wir sind jetzt in guter Form, also lasst uns voran und Prototypen das machen. Wählen Sie einfach alle diese Komponenten aus, die wir hier hergestellt haben, gehen Sie zur Registerkarte Prototyp. Sie wollen eine Gruppe diese gehen voran und klicken Sie mit der rechten Maustaste. Ich habe eine Gruppenauswahl oder Befehl G. und gehen Sie weiter und pfeilen Sie das hier. Schnappen Sie sich den kleinen Aero gooey zu diesem Kunstbrett hier. CNC ist das Kunstbrett verbunden. Wir wollen nichts Schickes nur oben. Wenn du einziehst,ist es nur sofort. Wenn du einziehst, Und das öffnet sich die Tastatur wird nur vor füllen alle diese Formularfelder. Und dann werde ich das noch ein Mal hier kopieren, und ich wähle die Schaltfläche Fertig aus. Ich ziehe den kleinen Prototyp klebrigen Arm auf den Bildschirm der Zahlung drei. Und bei dieser Interaktion hier wollen wir einfach auf Instant tippen und wir werden die Tastatur löschen. Und dann haben wir hier die Bezahlung. Aber wenn wir irgendwo hingehen, wollen wir nicht, dass das jetzt funktioniert. Und wir haben es auch hier. Sie haben hier Auswahlmöglichkeiten für Ihre UX. Du könntest diese 30% Deckkraft machen , ,bis du alle Informationen ausfüllst. Sobald Sie alles ausfüllen, geht es voller Kapazität. Sie können es 100% halten, als Luftzustände für diese zu machen, wo Sie ein wenig bekommen, wie die Linie rot wird und es sagt, ähm, Sie sehen so aus und die Linien werden rot, was darauf hinweist, dass sie immer noch Informationen sind auszufüllen. Ähm, kleine Dinge, die in deiner UX darüber nachdenken. Wenn Sie neugierig auf irgendwelche ah ux Klassen sind, habe ich Aux-Klasse, die Sie überprüfen können, zwei unter meinem Namen. Ähm, aber für diesen Fall möchte ich dir einfach eine mobile Anwendungserfahrung beibringen und wie man Stigma benutzt, um das aufzubauen. In Ordnung, also lasst uns weitermachen. Wir haben diesen Prototyp. Schauen wir uns das an. Also klicke ich auf die Namen hier vor befüllen, habe die Tastatur gedrückt, und jetzt bin ich bereit zu zahlen. Also das nächste, was wir hier machen wollen, ist, dass du den Ladebildschirm schnappen willst, den wir hier hatten ? Gehen wir weiter und schnappen wir uns die, die wir hier am Anfang gemacht haben. Nachdem du dich eingeloggt hast, werde ich es kopieren, und ich werde einfach zu diesem Abschnitt schwenken. Drücken Sie Befehl V und ich habe Kunsttafel in meine Layouts platziert. Ich werde das, ähm, das GIF-Animator-Geschenk hier behalten. Löschen Sie einfach das Logo und ich werde es kopieren. Schnappen Sie sich einfach diesen Liefertext, greifen Sie diesen Ladebildschirm und sehen Sie, wie er die Zeile verlassen hat. Schnappen Sie sich einfach diesen Liefertext, greifen Sie diesen Ladebildschirm und sehen Sie, wie er die Zeile verlassen hat. Schnappen Sie sich einfach diesen Liefertext, Ich will, dass es auf Linie zentriert ist. Jetzt möchte ich es einfach direkt unter diesem ladenden Geschenk zentrieren. Nun möchte ich auch den Textbegrenzungsrahmen mit der Kunsttafel gleich halten. Und wenn ich das habe und der zentrierte Absatz mit dem hält diesen Text direkt in der Mitte und lasst uns voran gehen und dies in die Einreichung der Zahlung ändern, genau wie so. Okay, an dieser Stelle können wir einfach den Pay-Button auswählen, auf den Prototyp klicken, den wir oben wollen. Nichts Schickes hier. Nur sofort. Gehen Sie einfach direkt zur Einreichung der Zahlung und lassen Sie uns sehen, wie das aussieht. Also klicken Sie auf die Bezahlung und jetzt sind Sie auf dem Bildschirm, wo es die Zahlung einreicht. Okay, so dass der Abschluss unserer Check-out Workflow-Erfahrung, wir wollen den Boba-Tee in Echtzeit an Ihre Adresse mit einer Reihe von Bildschirmen geliefert und schließlich hier am Ende geliefert zeigen . Okay, cool. Also gehen wir zurück zu unserem Lernen Paige Tab hier und lassen Sie uns diesen Ladebildschirm kopieren. Und lassen Sie uns den Namen dieses Ladebildschirms auf Lieferung ändern und wird Lieferung ein tun. Klicken wir einfach außerhalb der Kunsttafel. Klicken und ziehen Sie einfach, um das Ladegeschenk und die Zahlung auszuwählen und löschen Sie es einfach. Und denken Sie daran, wir hatten diese Karte von San Francisco. Lasst uns diese Karte schnappen. Also, wenn Sie sich nur erinnern, Sie klicken Sie einfach auf es bereits beschnitten. Es ist schon in der richtigen Position. Einfach Befehl, Siehe, und gehen Sie dann zu dieser Lieferung ein Kunstboard, Auswahl der Kunstboard und Befehl v Ill Tempo direkt an Ort und Stelle. In Ordnu 6. Entwerfen der profile: In Ordnung. Willkommen zum fünften Video, wie man eine mobile Anwendung mit Fig MMA entworfen toe in diesem Video zu bauen , wir werden den ah Profil Workflow abdecken. Also haben wir bereits das Login erstellt, Registrieren Sie sich einkaufen, schauen Sie sich alle tollen Sachen an und wir werden das Video hier haben, das letzte Video von uns gemeinsam gestalten. Um wird das Profil einschließen, ähm, Tab, das wir früher aufgebaut haben. Wir haben auch eine weitere Reihe von Videos, die vorwärts gehen, nur um über andere Möglichkeiten zu sprechen, wie Sie Fig Mahato verwenden. Laden Sie Leute in Ihr Design ein und arbeiten Sie mit ihnen zusammen, wie Sie Assets exportieren, Uhm und Ingenieure Ihr Design auf Code-Attribute überprüfen können. Wir werden über Abb, MMA-Tastaturkürzel sprechen. Ich zeige dir ein paar Figment Plugs Ins und wie man gooey Kits online bekommt. Und dann, wie man Kommentare zu erstellen und ich habe einige letzte Gedanken und weiter. Okay, also gehen wir hier und wieder in unsere Akte. Der Bildschirm, den wir heute ausbauen werden, ist dieser Bildschirm hier , der ist, sobald Sie auf den Tab tippen, sind, wo das Profil ist. Es bringt Sie zum Profilbildschirm hier kann ich zwischen Bestellungen und Profil wechseln, sehen Sie ein Bild von meinem Nun, es ist nicht wirklich ich, aber einige Spur nach unten online, und es hat einige meine Profilinformationen, die ich bearbeiten könnte. Diese Informationen können ein Foto hinzufügen, das ich auch abmelden kann. Okay, also gehen wir zurück in unsere Akte und gehen rüber, wo wir zuletzt aufgehört haben, was, ähm, was, ähm,fertig war die Checkout-Erfahrung. Wir haben einen ziemlich vollständigen Prototyp für eine boba Delivery User Experience. Aber gehen wir weiter und schnappen uns die letzten Teile davon. Also nehmen wir die, ähm, Anmeldeseite hier und lassen Sie uns den Befehl kopieren. Sehen wir, bringen wir das hier rüber bis zum letzten Rand. Und lasst uns das hier drüben beschleunigen. Geben Sie ein wenig Abstand, und lassen Sie uns dies als unseren Profilbildschirm umbenennen. Also wieder, ich habe gerade diesen Bildschirm hier ausgewählt, und ich tippte, Ich habe doppelt auf die Ebene auf der linken Seite geklickt und ich drücke Profil, das, hoffentlich, an diesem Punkt, du bist das Kopieren von Kunstbrettern und Umbenennen auf der linken Seite. Eine andere Sache, die ich brauche, ist, dass ich diesen Tab vom Einkaufsbildschirm hier brauche . Gehen wir also weiter und wählen Sie diesen Befehl aus. Sehen Sie, und lassen Sie uns voran und Tempo, dass in diesem Profilbildschirm, dass wir Befehl V haben, und das wird an Ort und Stelle einfügen. Lassen Sie uns das ganze Formular entfernen, Felder, die Schaltflächen dort, was dieses Logo entfernen und lasst uns diese beiden Tabs greifen und sie einfach nur ein wenig über ihr okay nach oben bewegen . Also an diesem Punkt wollen wir den aktiven Zustand dieses Profil-Symbol zu machen und zurück zu einem Standardzustand für diese Boba-Tee-Illustration. Also lasst uns das Profilsymbol hier greifen. Lasst uns das Gefühl haben, wir haben es bereits bei White gesetzt. Lassen Sie uns die Deckkraft 100% machen. Alles klar, cool. Das nächste, was wir tun müssen, ist, dass wir diese Boba-Tee Illustration hier zu greifen und was ist vor und fügen Sie einfach ein Gefühl, um es. Was macht alles weiß, dass die voreingestellte Zehe weiß? Und machen wir dies zu 40% Deckkraft, eigentlich 30%. Da gehst du. Jetzt ist es für den Benutzer sehr klar, dass er auf dem Profil tippen, nachdem er darauf getippt hat, und dass es sich um Standardzustände handelt. Und das ist der aktive Zustand. Also lassen Sie uns die Anmeldung und den Login-Text ändern. Lassen Sie uns anrufen, registrieren Profil und rufen Sie uns das Login hier. Befehle. In Ordnung. Ziemlich einfach. Okay, was wir jetzt hier tun werden, ist, dass wir den Platz für das Foto dieser Person machen, also schnappen Sie sich einfach den Kreis hier. Quickie ist auch Null, und lass uns hier einen kleinen Kreis machen. Okay? Also werde ich ein Video in der nächsten Serie haben. , um Etwa 21 oder zwei voraus, umüber Figment Plug Ins zu reden. Aber Sie können jetzt auch ein paar Plug Ins bekommen. Und ich möchte Ihnen eine zeigen, die ich die ganze Zeit benutze. Es nennt sich Inhalt, Riel. Und wie Sie zu diesem Plug in gelangen, ist, wenn Sie zurück zu Ihrem Dashboard gehen, indem Sie auf die vier Felder hier oben links klicken, gelangen Sie zurück zu diesem Bildschirm. Ich erinnere mich daran, dass Sie Dateien erstellen können. Hier fügen Sie auch Leute hinzu, die ich Ihnen im nächsten Video zeigen werde. An diesem Punkt bist du auf den Entwürfen hier. Hier können Sie beliebig viele dieser Kunsttafeln erstellen. Wenn Sie hier zum Plug in gehen, werden Sie alle Plug Ins sehen, die Sie verwenden können, und Sie können diesen hier sehen. Es heißt Popular, um Content Riel anzurufen. Wenn Sie auf Inhalt riel klicken, können Sie auch danach suchen und klicken Sie auf Installieren. Es wird es in Ihrer Feige MMA installieren, alles kostenlos für Sie. Warum machst du nicht weiter und installierst den Stecker? Ich gebe dir eine Sekunde. Es ist auch ziemlich schnell . Wie alle deinstallieren Sie dies und installieren Sie es geht ziemlich schnell. Gehen Sie zurück zu meinen Entwürfen, und wenn Sie dann zu Ihrer ah Klassendatei zurückkehren möchten, klicken Sie einfach dreifach darauf. Wir sind wieder bei der gleichen Sache, bei der wir sind. Okay, was wirklich cool an diesem Plug in ist, dass ich das mit einem Bild in diesem Kreis füllen möchte. Also oben hier in unserer Speisekarte haben wir Plug Ins. Klicken Sie auf den Plug in und den, den wir gerade hinzugefügt Inhalt. Riel. Gehen Sie packen Inhalt riel, und wir wollen Avatar hier. Also lasst uns auf die Avatare klicken, und wir könnten männlich, weiblich oder beides setzen . Einige stellen Männchen. Klicken Sie einfach auf Männer und es wird vorfüllen diese mit jeder Mail, die Sie wollen. Sie können wieder darauf klicken, und bei einem anderen, Ich könnte einfach durch sie Anzeige so viel Inhalt gehen, wie ich will. Ziemlich cool. Ich kann auch einfach Text wie Lasst uns diesen Profiltext hier packen. Du beobachtest mich einfach. Ich gebe mir Namen, Telefonnummern, Adressen, Adressen, Nummern, Daten. Laura Epsom e mailt dir RL, ähm, also wird es das Zeug für mich bevölkern. Also denke ich nicht nur daran und tippe alles einfach ziemlich cool. In Ordnung, also lass mich umziehen. Ich werde mich noch einmal umziehen, werde das packen. Einen anderen Avatar packte. Alles klar, lass uns den Kerl wie den Kerl kriegen. Okay, an dieser Stelle haben wir ihr Profilbild. Und jetzt lass uns den Namen hinzufügen. Es ist also einfach, diesen Profiltext hier zu kopieren. Klicken und ziehen und halten Sie die Umschalttaste gedrückt, während eine und -Option gedrückt, während Sie klicken und ziehen. Lass es uns kopieren. Es ist in einem zentrierten Layout. Wir wollen, dass es eine Zeile für jetzt links, also ist es online. Es zentrieren wir uns ein wenig. Und das war das 19 Punkte-System. Gehen wir zurück zu einem denken, wir hatten 16 regelmäßige. Das ist perfekt. Lasst uns 16 schnappen und ich werde diesen Text ausstrecken und ich werde zur Textausrichtung zurückkehren , die nicht zentriert ist, sondern ganz oben, einfach so. Und ich bin ein Typ in meinen Profilinformationen, den ich verwendet habe, als ich mich registriert habe. Also war es mein Name. Aaron Lawrence. Sie können Ihre eingeben, wenn Sie möchten. Wir hatten Test bei gmail dot com und lassen uns Aaron Lawrence in zwei Zeilen aufteilen, falls Leute hier lange Namen haben. Und machen wir das hier zur coolen grauen Farbe. Alles klar, das sieht cool aus. Lasst uns ein bisschen mehr visuelles Flair haben. Lasst uns ein Rechteck schnappen. Sie können einfach unsere oder Sie können hier zum Formwerkzeug gehen und uns ein Rechteck hinter all dem setzen . Hier ist mein Rechteck. Ich werde es aus dem Ebenenfeld auf der linken Seite greifen und einfach klicken und ziehen und hinter alles bewegen und lassen Sie uns weiter gehen und das ändern. Lass uns die coole graue Farbe machen, die wir hatten, und dann lass uns die Deckkraft drauf sehr niedrig machen Lassen Sie uns so machen, wie das ist okay. Lassen Sie uns hier eine andere Farbe machen. Was ist das losgelöst? Lass uns gehen, machen wir ein Weiß und nehmen es einfach eine 10 runter. Das funktioniert immer noch nicht für mich. Manchmal ist das visuelle Design Sie Kerl gehen irgendwie ein paar Routen. Lasst uns schnappen. Ah, blaue Farbe. Da gehst du. Jetzt kommen wir irgendwo hin. Es sollte nur sehr subtil sein. Ich werde die Deckkraft ein wenig erhöhen. Du hast 35% und wir werden etwas in der Mitte benutzen. Wird über ihre gehen, ähm, zu 54 56 b als Farbe. Es ist eine Hintergrundfarbe. Lassen Sie uns diesem Profil einen Schlag geben, um, bei diesem Profilbild. Also ist es hier bei einem Schlaganfall. Nun, ich werde mit White für jetzt gehen, wo ich ein Ton es zurück bin. Aber lass es uns wirklich dick machen . Okay? Ich denke, dass ich denke, warum es in Ordnung sein sollte. Okay, jetzt sieht dieser Texas ein bisschen klein aus. Also gehen wir zurück und machen es weiß. Lassen Sie uns etwas mehr visuelle Hierarchie geben und machen wir es zum 19 Punkt Bold. Ja, so. Lass uns mutig gehen. Okay, das sieht jetzt gut aus, oder? Also nächstes, was hier zu tun ist, lassen Sie uns die Funktion hinzufügen, um ein Foto hinzuzufügen. Wir werden es nicht Prototypen erstellen, aber wir fügen die Schaltfläche hinzu, um es zu tun. Also habe ich dieses kleine Kamera-Icon. Lassen Sie uns auch das Bearbeitungssymbol greifen. Warum wir hier drüben in der Designware Art Board sind. Gehen wir zurück hierher und lassen Sie uns die in dieses Kunstboard einschlagen. Aber lassen Sie die hier vorerst. Okay? Lasst uns diesen Kreis hier packen. Sie können auch einfach O auf Ihrer Tastatur drücken und ich werde die Option Shift halten. Während ich das tue, könnten Sie auch nur Shift halten, wenn Sie die Option halten. Es geht von der Mitte, an der Sie klicken. Wenn Sie nur Shift halten, geht es von links nach rechts. Ich halte Optionsverschiebungen. Ich kann in die Mitte gehen, von wo ich klicke und ich werde eine kleine Action-Taste machen, um das Foto hochzuladen . Nicht zu groß, was so groß ist. Und da dies etwas anklickbar ist, machen wir dies zur Action-Farbe und lassen Sie uns dieses Kamera-Symbol greifen und gehen. Ich werde mit der rechten Maustaste darauf klicken. Bringen Sie meine verkleinerte Größe ein wenig nach vorne. Ich werde Schicht halten, wenn ich verkleinere. Wenn ich die Schicht nicht halte, wirst du am Ende solche Dinge tun, was nicht gut ist. Sie möchten die Perspektive dieser Abbildung der Kamera behalten. Alles klar, legen Sie das direkt in die Mitte. Das habe ich irgendwie ein bisschen fallen lassen. Was ist bei einem Schlaganfall? Was ist bei einem dunkleren Strich, wie ein Drei-Pixel-Strich? Geben Sie es eine Trennung von dem Bild, das gut aussieht, dass ich diese Kamera tippen kann, um in meine Bilder zu bekommen und wählen Sie ein neues Foto. Wenn ich diese Informationen hier bearbeiten möchte, werde ich Ah, ich komprimiere das Editier-Symbol. Lassen Sie uns voran und machen Sie das auch in Action-Farbe, so dass Sie die Action-Farbe hier sehen können. Ich werde die Befehle hier kopieren. eine Zeile hinterlassen, ich werde es zu 100% Deckkraft hier ändern. Und ich werde nur das Wort hinzufügen schreiben. Hier, legen Sie es neben das Symbol und verschieben Sie es nach unten. Okay. Und das würde mir erlauben, diese Informationen hier zu bearbeiten , . In Ordnung. Das nächste, was zu tun ist, lassen Sie uns die Bestellseite hier tun, also kopieren Sie diese Profilseite. Gehen wir hier links. Wie nennt man diesen Befehl? Und wieder, lasst uns diesen Text machen Wir hatten Profil war 19. Dieser Text hier war, glaube ich,sagte bei 19 Bolds und machen wir es weiß. Dieser Text hier war, glaube ich, Es ist Weißen hatte 100% Deckkraft. Lassen Sie uns dieses Profil hier 19 Punkt regelmäßig oder leicht und lassen Sie uns gehen, dass 50% Deckkraft. Und dann lasst uns dieses Rechteck über Zehenbefehle wechseln. Und dann lasst uns einfach alle Profil-Zeug löschen, die wir den Hintergrund gegeben haben. Und an dieser Stelle wollen wir nur einige der Details nennen, die wir hier bestellt haben. Also lasst uns eins der Fotos schnappen, dieses Milchtee-Foto hier. Und lasst uns diese Informationen hier schnappen. Also werde ich zuerst das Foto schnappen. Ich werde das Foto vorerst in die Ordnung bringen. Überall ist gut. Ich werde es ein bisschen verkleinern. Und ich werde mir auch die Bestellinformationen hier holen. Kopieren Sie das. Okay. Und lassen Sie uns das hier unter die Bestellung einfügen. Richtig? Also schütteln wir die, ähm, wir nennen es einen Milchtee. Hier. Nehmen wir die Informationen, die Milch halbsüß sagt, mittleres Eis, große Tapioka. Und lasst uns das einfach in, ähm, Menge ändern ähm, . Und lasst uns einfach einen hier setzen und das zentrieren. Lassen Sie uns unter dem regulären Milchtee Text hier zentrieren. Ich mache es dasselbe mit der Kunsttafel. Also weiß ich, dass es genau in der Mitte des Kunsttafels steht. Wie viel von der gleichen Sache, um die regelmäßige Milch Tee Text, Aber Sie können sehen, es hat die linke Ausrichtung. Also lassen Sie uns hier in den Textbereich gehen und was es macht die Absatzausrichtung zentrieren. Das sieht gut aus. Okay. Und dann, was wir hier tun werden, ist, dass wir diesen Kreis hier beschneiden oder so. Ah, ähm, dieses Bild hier und machen es zu einem Kreis. Wählen wir also das Bild aus. Wenn du hier oben gehst, wo hast du deinen Willen nicht in deiner Höhe Attribute. Da ist der Eckenradius, äh, Felder hier, geh weiter und drücke Shift und den Pfeil nach oben und mach es einfach ein paar Male. Sie können auch nur etwa 100 eingeben. Das sollte gut sein. Machen wir das mit auf ihm 1 90 mal 1 90 und dann lassen Sie uns gehen und dieses Bild ein wenig in die Luft sprengen . Was Sie hier tun können, ist, wenn Sie dreifach auf das Bild klicken und dann zum Zuschneidewerkzeug oben gehen . Jetzt habe ich es im Kreis beschnitten. Sie können das Bild hier greifen und halten Shift und einfach in die Luft sprengen. Das Bild könnte es so in die Luft sprengen. Und ich werde diesen Kreis ein wenig verkleinern. Ich halte Shift, wenn ich verkleinert habe, also wähle ich die Ecke aus. Halten Sie die Schicht, verkleinern Sie sie, und werfen Sie sie hier rüber. Bewegen Sie das etwas nach unten. Richtig? Und wir hatten auch eine Zeile, die wir irgendwo hier auf der Checkout-Seite setzen. Wir hatten diese Linie. Wählen wir diese Zeile aus. Kopieren Sie es einfach. Jetzt gehen wir zurück zu diesem Brett und wir werden das an ein paar Stellen hinzufügen. Wir werden es einfügen. Wir werden es direkt oben auf dem Bild hinzufügen. Geben Sie ihm etwas Platz, aber unter der Registerkarte „Bestellungen“. Wenn wir also mehr Informationen zu diesen Bestellungen haben, kann es unter dieser Zeile scrollen. Und wir werden das auch hier zentrieren. Und fügen Sie auch das Datum jemand eine Kopie, diese Menge und machen Sie das Datum Helden sagen. 0103 1020 und der Preis dafür war ein Dollar oder $9,50 49 Cent. Alles klar, lassen Sie uns den Text für die Summe weiß machen. Und machen wir es 19. Fett. Alles klar, und gehen wir weiter und schnappen uns eine Linie. Trennen Sie diese Bestellung hier und wir können ADM oder hier runter gehen wir. Was cool ist, wenn wir es so machen, ist, wenn wir mehr Aufträge als einen haben. Wir könnten diese kopieren und sie etwas kleiner machen. Wir können ein paar Jahre hinzufügen. Wir wollten sagen, das war wie ein Nord er von drei Kaput sie hier. Und sagen wir, die Menge war drei. Wir könnten drei haben. Wenn es wie sechs von ihnen war, dann können wir sechs haben und alle haben unterschiedliche Geschmacksrichtungen darin. So dieses Design skaliert zu haben, dass diese verschiedenen Variationen. Du musst das nicht tun. Ich mache es nur an zweiter Stelle, siehst du? Alles klar, cool. Also, ähm, da ist die Bestellseite. Gehen wir weiter. Ich gehe ein bisschen zurück. Lassen Sie uns voran und Prototyp dieses Also gehen wir zuerst zum Shopping-Bildschirm hier. Und lasst uns dieses Profilsymbol hier schnappen, verkleinern. Du zoomst ziemlich weit raus für diesen hier. Drücken Sie die Prototypen-Registerkarte oben, oder? Schnappen Sie sich den kleinen klebrigen Prototyp Arm und gehen Sie weiter und verbinden Sie ihn mit dem Profil hier. An dieser Stelle wollen wir auf Fass. Und wir wollen nichts Schickes. Nur sofort. Das war's. Wir wollen auch diese Illustration Drink of the Boba nehmen und verbinden, dass wieder über die Shopping-Seite hier, Sie können sehen und nichts Phantasie. Nur sofort. Also auf Wasserhahn und sofort. In Ordnung. Und eine Sache, die wir auch tun müssen, werde ich es kopieren. Ähm, meine Kopie dieses Bestelltextes hier, und ich werde diesen Text zum 16 Punkt regulär bei 100% Deckkraft machen . Und machen Sie dies die rosa oder Action-Farbe und machen Sie diese einfach ausloggen und lassen Sie uns gehen und verbinden Sie die Abmelde-Taste, indem Sie herauszoomen. Er schnappte sich ein kleines Prototyp-Glied. Oder wenn Sie es einfach nach rechts bewegen, wird es die Seite für Sie schlendern. Lass uns gehen. Gesendet, dass zurück auf den Anmeldebildschirm hier, Cool und last but not least, lassen Sie uns Bestellungen hier mit dem Bestellbildschirm verbinden. So Bestellungen auf der Profil-Registerkarte auf den Bestellbildschirm auf Tippen, und wir wollen smart, animieren. Und dann lassen Sie uns dasselbe für Profil tun. Ah, Text auf dem Bestellbildschirm, um auf den Profilbildschirm beim Tippen zu gehen. Klug, animieren und gehen wir weiter und schauen uns das an, richtig? Also, für zurück auf dem Shopping-Bildschirm, tippe ich auf das Profil. Sie können ein Go to Profil hier sehen, wenn ich zu Bestellungen gehen. Die nette, intelligente, animierte den Übergang des Rechtecks über Zehenreihenfolgen angewendet. Ich mache Profil Aiken. Melden Sie sich ab. Ich kann wieder auf das Boba-Getränke-Symbol klicken, Sie ins Zentrum bringen und ich kann mich abmelden. Es bringt mich zu einem Abmeldebildschirm. Alles klar, das ist so ziemlich eine voll funktionsfähige App, die wir gerade überall aufgebaut haben, von der Anmeldung eines Boba-Drink, Verwendung mehrerer Interaktionen, Hinzufügen des Getränks, tun Slide-ups, indem Sie die Adressinformationen setzen, Kreditkartendaten eingeben, die Ladebildschirme mit animierten GIFs sehen, die Übergänge von Zeitverzögerungen auf Bildschirmen sehen, hier zu einer endgültigen Erfahrung kommen. Sehen Sie den Boba-Tee ist angekommen und dann kommen Sie zu Ihren Profilen, Ihren Bestellungen und melden Sie sich ab. In Ordnung. Großartig. Also diese Art von deckt vor allem alles, was wir auf den Aufbau der mobilen Anwendung für diese Boba Tee auf Abruf Erfahrung getan haben. Ich möchte Ihnen danken, wenn Sie es so weit bekommen haben, dass Sie nicht nur die Klasse kaufen und die Klasse durchgehen , sondern einfach mit mir hier mitmachen und die Zeit damit verbringen, so etwas wie dieses Design zu lernen . Ich bin sehr leidenschaftlich für Design Handwerk. Es ist ein tolles Handwerk. Wenn du in sie kommst, ist es ehrenvolles Hofhandwerk, und es braucht Zeit und Engagement, um zu lernen. Und, ähm, und um das zu entwickeln. Also danke, dass du dir die Auszeit genommen hast und dein Handwerk mit mir entwickelt hast. Die nächste Reihe von Videos, die ich hier einpacken werde, ist , ähm, wir werden ein bisschen lernen, wie man andere in dein Board einlädt, wie man Assets exportiert, Code und deine Designs, Tastatur inspiziert Abkürzungen, mehr von den Figment-Plug-ins, die Sie haben, um eine kleine Vorschau von vor kurzem auf diesem Video zu sehen , wie man Kommentare, letzte Gedanken zu erstellen , , und vorwärts alle wirklich schnellen Videos, die gemeinsame nehmen ein paar Minuten, um durchzugehen, und Sie haben bereits den größten Teil der Klasse abgeschlossen. Also bleiben Sie einfach mit für diese letzten paar Videos, um alles zusammen zu binden. Okay, nun, danke nochmal. Ich hoffe, Sie haben Spaß mit Ihrem Prototyp, und ich sehe Sie auf den nächsten Videos von 7. Überarbeiten und UI für Ingenieurwesen: alle Willkommen zum nächsten Video. In diesem Punkt haben wir die meisten von Sigma gelernt, die in und out des Designs und der Werkzeuge und alle Funktionen für diese speziellen Designs, die wir erstellt haben, und das Prototyping . Die nächste Reihe von Videos zeigt Ihnen, wie Sie Leute zu Ihrem Board einladen. Wie hat U. Y-Assets Tastaturkürzel, Plug Ins, wie man Kommentare zu erstellen, einige letzte Gedanken gehen voran zu den ziemlich kurzen Videos, nur um Ihnen zu zeigen, wie Zehe kontinuierlich mit Sigma arbeiten, wie Sie arbeiten mit Teams und arbeiten mit anderen zusammen und wie Sie damit effizienter werden können. Okay, also lasst uns voran gehen und schauen, wie man andere einlädt und wie Zusammenarbeit in Fig MMA aussieht , sowie wie man u I Assets wie Symbole, um und Illustrationen exportiert , um und wie man Code inspiziert für Ingenieure. Also, wenn Sie zu unserer Akte gehen, an der wir waren, und wir können gehen, um zu unserem Lernen zurückzukehren . Paige, das ist die Seite, auf der wir unseren Prototyp hier erstellt haben. Möchten Sie jemanden einladen, an dieser Tafel zusammenzuarbeiten, und sie haben Zugriff auf alle Seiten hier. So ziemlich diese ganze Akte. Alles, was Sie tun müssen, ist hier zu gehen, um zu teilen, klicken Sie auf den Link zu teilen, und Sie haben zwei Möglichkeiten. Sie können sie zu einem Betrachter oder Editor machen. Also, wenn Sie es ihnen erlaubt, die Kunst Worte zu sehen, die sie in die, ähm, Kunst Boards bekommen können ähm, . Werfen Sie einen Blick darauf. Sie können sich die Prototypen ansehen, aber sie werden nicht in der Lage sein, Dinge zu ändern. Sie werden nicht in der Lage sein zu entwerfen, wie wir es getan haben. Wenn du sie zu einem Redakteur machst, können sie in dein Kunstboard kommen und die Dinge ändern. Nehmen, genommen, tun Sie so ziemlich vollen Zugriff auf Fig MMA, genau wie Sie es haben. Und für die Ansicht von Ihnen waren nur das ist eine freie. Du kannst so viele Zuschauer wie du möchtest zu deinem Board einladen, wie du Mawr-Redakteure eingeladen hast. Ich glaube, Sie haben etwa drei, die Sie einladen können. Danach beginnen Sie, für das Tool zu bezahlen, so dass es für Sie ziemlich kostenlos ist, so viele Zuschauer zu verwenden und einzuladen, wie Sie möchten. Aber sobald Sie mehr Leute einladen, Ihr Board zu bearbeiten, wird es zu einem Abonnementmodell. Okay, cool. So kannst du einfach durchgehen und so viele Leute einladen, wie du willst. Wie es aussieht, wenn sie in Ihrem Board sind, ist ziemlich ordentlich. Dies ist eine meiner Lieblingsmerkmale in Abb. MMA. Sagen wir mal, ich bin hier rüber gegangen. Ich habe hier einen Link zum Anzeigen oder Bearbeiten. Ähm, und ich habe jemanden hinzugefügt oder auf die Ansicht geklickt. Und sagen wir, ich fügte hinzu, Jemandes E-Mail könnte mich gerade jetzt reinbringen. Es gibt meine E-Mail, die ich eine E-Mail gesendet habe. Wer immer diese E-Mail bekommt, sagt, es ist ein Ingenieur. Sie öffnen diese E-Mail und haben Zugriff auf Fig MMA auf ihrem Desktop in einem Internetbrowser. Sie müssen keine Software installieren. Es wird für sie kostenlos sein. Sie öffnen einfach ein Browserfenster in ihrem Internet, und sie haben Zugriff auf diese Datei, wie Sie hier sehen, einige im Internet. Moment bin ich in Chrome und sie haben Zugriff auf diese Datei. Sie können arbeiten und gestalten, wie wir es getan haben, aber innerhalb des Browsers. Und was wirklich ordentlich ist, ist, wenn du an deiner Akte arbeitest und diese Person in die, die du eingeladen hast, kommt in diese Tafel. Du kannst ihren Mund sehen, damit du sehen kannst, dass ich zwei A's mit violetten Kreisen hier oben , richtig? Und eins ist Aaron Lawrence, der sagt, dass ich es bin. Eine andere bin ich auch, aber das wäre, Sie werden mehr als eines dieser kleinen Profilsymbole hier oben sehen. Und das sind die Leute, die gerade in deinem Vorstand arbeiten. Wenn ich also etwas verkleinere, kannst du meine Maus aus dem anderen Projekt sehen, an dem ich mich befand. Also lassen Sie mich hier rüber gehen. Und jetzt bin ich im Browserfenster. Ich bin der Benutzer, den ich eingeladen habe. Und wenn ich zu Fig MMA zurückkomme, kann ich meine Maus hier sehen, damit ich die Leute in meinem Brett sehen kann. Ich sehe in Echtzeit, was sie tun, und wir können zusammenarbeiten. Es ist oft, dass ich das benutzt habe, indem ich eine Screen-Sharing-Software oder einen Ah-Videoanruf mit jemandem öffne , und wir sind am Telefon. Wir plaudern zusammen. Wir arbeiten auch in Fig MMA zusammen, damit wir chatten können. Ich kann mit dieser Person reden. Ich sehe, wie sich ihre Münder bewegen und wir können zusammenarbeiten. Also ist es wirklich großartig. Sie können diese an Produktmanager senden. Ingenieure laden sie ein, mit Ihnen zusammenzuarbeiten, und Sie könnten sie sehen und ausspionieren , während sie ständig mit Ihnen an fig mo arbeiten können auch Ihre Maus sehen, damit sie wissen, dass Sie in der Tafel sind. Und eine andere Sache, die sie hier tun können, ist, wenn Sie ständig mehr Leute in Fig MMA einladen wollen , ein anderer Ansatz ist, dass wir gerade jemanden in unsere Tafel oder Akte eingeladen haben. Sie können auch Teams erstellen. Also hier habe ich ein ah neues Projekt, ein neues Team, und ich komprimiere neues Projekt hier. Aiken geben einen neuen Teamnamen ein und ich kann hier drüben ein Team erstellen und innerhalb eines Teams kann ich Aiken einladen. Ähm, ich kann diesem Team Pinnwände hinzufügen, und ich könnte Leute zu diesem Team einladen und eine Reihe von Boards haben. So kann ich meine eigenen persönlichen Projekte in meinen Entwürfen haben, und ich kann meine Teamprojekte in meinem Team hier haben. Ich kann auch Leute in dieses Team einladen, damit Sie sehen können, dass ich hier ein Brett habe. Ich habe mein Team, und wenn ich jemanden einladen möchte, muss ich Mitglieder und die Einladung hier komprimieren und dasselbe tun. Ich kann Leute einladen, sich anzusehen oder zu bearbeiten, und sie haben Zugriff auf alle Pinnwände in diesem Team. Ich kann hier auch einige Benutzerverwaltung durchführen. Ich kann hier Leute von Zuschauern zu Redakteuren wechseln. Sie können sie zweitens herabstufen, und dort fängt es an zu beginnen. Eine monatliche Kosten ist, dass Sie ein Team erstellen möchten, um mit dem Hinzufügen von Editoren in diese Pinnwände zu beginnen. Die meiste Zeit benutze ich das Team nicht wirklich zu sehr. Ich lade Leute einfach zu meinen Brettern ein, und ich habe verschiedene Leute in verschiedenen Brettern, mit denen ich arbeite. Und das ist so ziemlich 90% der Fälle ist, dass Sie nur Menschen durch Ah einladen, diese Freigabe-Schaltfläche in der oberen rechten, und Sie fügen sie Betrachter auf sie. Wenn Sie zu einem größeren ähnlichen Unternehmen gelangen möchten, werden sie normalerweise diesen Abschnitt hier verwenden , der ein Team erstellt. Okay, cool. Sobald Sie Leute in Ihrem Board haben, wenn sie Ingenieure sind. Eines meiner anderen Lieblingsdinge an Fig MMA ist, dass Sie Ihre Ingenieure wissen lassen können, dass sie diese Entwürfe überprüfen können und sie Code-Attribute erhalten können. Sie können alle, die Sie auch verwenden. Also, wenn Sie hier auf der rechten Seite kommen, wo wir Prototyp entworfen haben und wir haben die Code-Tab Also, wenn Sie auf die Code-Tab tippen, das ist großartig und Sie klicken auf alles hier. Es wird Ihnen Attribute geben, was auch immer Sie angeklickt haben. So können Sie sehen, dass ich auf dieses Formular Standard hier geklickt habe. Und wenn ich auf den Text klicke, wird es mir die Position zeigen. Es wird mir den Gedanken zeigen, dass ich den Schriftstil, das Schriftgewicht, die Schriftgröße, dieZeilenhöhe verwende das Schriftgewicht, die Schriftgröße, die . Es wird mir auch den Buchstabenabstand geben. Und sie können das kopieren. Sie können es einfach auswählen, Befehl C und bereit sein zu gehen. Es macht auch noch eine tolle Sache für dich, oder? Und es zeigt ihnen Inspektionen, so dass es ihnen den Abstand zwischen links und rechts hier dieser Form zeigt. Es zeigt ihnen den Abstand von der Oberseite dieses Kunsttafels nach unten. Dasselbe mit diesem Knopf. Also, alles, was ich anklicke, können sie Inspektionsdetails bekommen, damit ich über ihren Mund hierher kommen kann. Siehst du, es ist 104 auf dieser Seite, einer von fünf auf dieser Seite. Früher haben wir oft unsere Dokumente inspiziert und das getan, , was wir als Redlining bezeichnen würden,was Sie hier sehen. Und das waren zwei. Um Pixelmaße und -abstände für Ingenieure zu informieren und ihnen dabei zu helfen, unsere Hilfe aufzuschlüsseln. Wir würden unsere Entwürfe aufschlüsseln, um ihnen zu helfen, zu verstehen, wie unsere Entwürfe aus kompositorischer Sicht ausgelegt sind . Aber jetzt müssen wir das nicht tun. Sie können einfach reinkommen und dann können sie basierend auf dieser Code-Tab sehen. Wie alles aussieht, können sie auf Formen klicken, sehen, was diese Breite und Höhe. Das hier für dieses Rechteck. Welche Farbe Hex-Code es ist, der diese Hex-Codes kopieren kann, macht es wirklich einfach für sie, Ihr Design zu inspizieren. Wenn Sie sie als Zuschauer einladen, haben sie immer noch Zugriff , darauf,den Code hier zu sehen. Sie müssen keine Redakteure sein, um hier reinzukommen und Ihr Design zu erwarten. Wenn sie etwas ändern wollen, dann müssen sie ein Redakteur sein. So können Sie einen Ingenieur als Zuschauer einladen. Und sie haben die volle Funktionalität, die Sie hier von der Code-Tab sehen, und sie können auch in den Prototyp gehen ist gut, und klicken Sie auf den Prototyp und sehen, wie die Funktion cool ist. Also lassen Sie uns einen Blick auf den nächsten Punkt werfen, die ist, wie die Export-Assets. Sagen wir mal, ich wollte Teoh diese Illustration dieser Boba hier exportieren. Feigenschlamm macht es sehr einfach. Sie müssen lediglich das Symbol oder die Illustration auswählen und drücken. Wenn Sie hier auf Ihrem Design-Tab nach rechts unten scrollen, drücken Sie einfach die Plus-Taste. Es hat den Export, und dann gibt es Ihnen verschiedene Optionen. Hier können Sie ein x zwei x machen , das wird es in die Luft sprengen sprengen und es größer machen. Also, wenn ich zwei X mache, wird es die doppelte Größe machen, die es jetzt ist und es hat PNG J peg spg. Pdf so die meiste Zeit, wenn Sie für Software implementieren, die Sie nicht verwenden werden. PDF verwenden p und G für Assets, die einen transparenten Hintergrund haben. So ziemlich ein Symbol, das Sie brauchen und Sie verwenden J Pegs meist nur für Fotos. Die meiste Zeit verwenden Sie also entweder ein PNG für Ihre Icons oder was wir SPG nennen. Dies ist eine skalierbare Vektorgrafik. Also, wenn ich Ingenieur ein PNG gegeben habe, bedeutet das, dass sie dieses Symbol behalten müssen, umes in dieser Größe hören zu , um müssen. Wenn sie dieses Symbol größer machen, wird es pixelig. Aber wenn ich ihnen eine SPG eine skalierbare Vektorgrafik gebe, bedeutet das, dass sie sie skalieren können. Sie können es tatsächlich größer machen, wie ich es jetzt tue, und es bleibt sauber. Es wird nicht verpixelt. Wie Sie die Linien sehen können, sind Sie wirklich sauber. Also die meiste Zeit geben wir S P. G's für diese Arten von Symbolen, und alles, was Sie tun müssen, ist wählen Sie das Symbol, das Sie möchten, oder die Abbildung, die Sie möchten SPG wählen Sie hier drücken Sie die Export-Taste. Ich werde es in meinen Download setzen und das habe ich exportiert. Also schauen wir uns mal an, wie das aussieht, da gibt es meine Boba, Tsv g, und Sie können sehen, dass es hier oben links ist. Lass uns das nochmal machen. Lass uns eine Nikon schnappen. Schnappen wir uns diesen Boba-Tee und mich Icon hier. Okay, also drücken Sie den Export. Gehen Sie zu S V G hier, Export-Logo. Jetzt wird es sich ansehen, dass SPG auch ist und du könntest es hier sehen. Machen wir es als PNG, damit Sie sehen können. Also gehen wir voran und wählen PNG hier. Exportieren Sie dieses Logo und schauen wir uns an, wie es aussieht. Es ist ein PNG, um zu sehen, wie es einen transparenten Hinterraum hat. Lassen Sie uns tun, es ist ein J-Pegs und Sie können sehen, wie einen weißen Hintergrund jetzt als J-Pegs hat, also Abbildung, es macht es sehr einfach, Assets zu exportieren. Wenn Sie dieses Boba Teegetränk und diesen Boba Tee, ähm, Logo hierauswählen , ähm , Logo hier können Sie auch mehr als einen nach dem anderen exportieren. Nehmen wir an, ich möchte diese als PNG-Export. Diese ersetzen die Dateien, es wird beide exportieren. Sie können das PNG hier oder den Boba-Tee sehen, und das Logo hier wurde exportiert. Nehmen wir an, ich will beide als einen Vermögenswert. Dann müssen Sie hier nur die Illustration und das Logo auswählen und mit der rechten Maustaste klicken oder den Befehl G drücken und diese als ein Element gruppieren. Drücken Sie dann den Export unten. Richtig. Lassen Sie uns voran und machen diese A P und G Lassen Sie uns es exportieren. Nennen wir es Logo und T und Sie können sehen, jetzt ist dies ein Asset. In der Regel möchten Sie also Ihr Design durchlaufen und alles exportieren, was nicht konstruiert werden kann . wäre wie dieser Augapfel. Es wäre das Logo auf dieser Seite. Geben Sie ihm, wir hätten das Logo hier, diese Fotos, die Sie exportieren möchten. Also drücken wir den Export hier und gehen zu J. Peg und exportieren diese Fotos. Jetzt können Sie das Foto hier sehen. Sie möchten diese kleinen Karotten exportieren, die wir hier für die Drop-Down-Buttons gemacht haben. Uh, dieses Häkchen, nur indem Sie sie auswählen, möchten Sie dieses X hier exportieren? Sie wollen einfach alles durchgehen, was nicht, ähm, Text und Farben und ähm Knöpfe ist und einfach die Icons, die Illustrationen, die Fotos exportieren die Illustrationen, . Also in diesem Fall möchten Sie diesen weißen Kreis und die Karte exportieren, und da haben Sie ihn. Das ist ziemlich genau das, was Sie tun könnten, um alle Ihre Assets zu exportieren und ihn in einen Ordner zu legen , und Sie könnten in der Lage sein, diese Anwendung zu implementieren. Nun, mit dem Prototyp und den Exportgütern, die exportiert wurden können Sie diese Ihrem Engineering-Team übergeben, oder Sie können ihn selbst auf die Website stellen und schon können Sie loslegen. Alles klar, so dass überwiegend, wie man andere in die Tafel einlädt. Welche Zusammenarbeit sieht so aus, als ob man die Maus anderer Leute sehen kann und wie man U-Y-Assets exportiert und Code für das Engineering inspiziert? Alles klar, im nächsten Video werden wir Tastenkombinationen durchlaufen. Wir schauen uns ein paar Steckdosen an, an, und wir sehen uns dort. Nochmals vielen Dank. Tschüss. 8. Tastaturbefehle: Alles klar, Willkommen zum nächsten Video. Wir werden Fig MMA-Tastaturkürzel abdecken und wir tauchen in Figment Plug Ins ein und schauen auch gooey Kits an. In Ordnung, also gehen wir weiter zu Ah, den Tastenkombinationen. Also bin ich in der Designdatei, die Sie hier haben, und ich habe hier eine Seite namens Quickies erstellt. Also gehen Sie weiter, gehen Sie über zu schnelle Tasten, und ich habe eine Liste meiner Lieblings-Tastaturkürzel hier eingegeben. Das sind die, die ich am häufigsten benutze, und ich werde sie jetzt mit dir hier durchgehen. Ähm, also der erste Satz, den ich viel benutze, gibt es Werkzeuge auf der linken Seite und Befehle auf der rechten Seite. Also verwende ich für Werkzeuge viel V, um zum Auswahlwerkzeug zu gelangen. Mit diesem Auswahlwerkzeug kann ich Elemente und Dinge auf dem Brett auswählen. Nehmen wir an, ich bin hier im Rechteck-Werkzeug, und ich möchte schnell zu einem Auswahlwerkzeug übergehen. Ich drücke einfach auf die und jetzt bin ich wieder drüben beim Auswahlwerkzeug. Ich benutze P, um in den Stift zu gehen. Tool Soapy auf meiner Tastatur bringt mich schnell zum Stiftwerkzeug Ich könnte eine Auswahl treffen oder Form zeichnen , wie ich es jetzt tue. Und dann, wenn ich diese Form auswählen möchte, komprimiere ich V und jetzt bin ich zurück zum Auswahlwerkzeug. Und ich kann diese Form um i u Z viel bewegen, um zum Zoom-Tool zu gelangen, um in den Zoom fortzufahren , Werkzeug, klicken und ziehen, und ich habe in den Bereich gezoomt, den ich geklickt und gezogen Ich benutze Ah, sie sind für das Rechteck-Werkzeug viel. Also drücken Sie einfach und ich kann hier ein Rechteck erstellen. Kann ich komprimieren V Start, um es auszuwählen und oh, für das Kreiswerkzeug. Und wenn ich Shift halte, wenn ich einen Kreis mache, wird es mir einen perfekten Kreis für Schritt ohne Schicht geben. Es wird Ovale für mich machen, und Sie können sehen, sobald ich das Oval oder den Kreis oder das Rechteck erstellt und automatisch zum Auswahlwerkzeug hier springt, l für das Linienwerkzeug. Es erlaubt mir, Linien zu erstellen, die Sie sehen können, wenn ich Shift halte. Es gibt Ihnen gerade Linien, wenn Sie Shift nicht halten. Das ermöglicht Ihnen, jede Zeile zu tun, die Sie möchten. Da ist also die Schlange da. Schlafen Sie die Leertaste für das Handwerkzeug, mit dem Sie sich einfach auf dem Kunstbrett bewegen können. Und dann, ähm, ich für das Pipettenwerkzeug, dem Sie Farben auswählen können. Also lassen Sie uns sagen, ich habe dieses Rechteck und ich möchte einfach gehen diese rosa Farbe hier greifen. Ich drücke einfach „I“ auf der Tastatur. Sie werden sehen, es öffnet sich ein kleiner Kreis hier, der Ihnen erlaubt, die Farbe zu sehen, die Sie auswählen, und ich werde gehen und auswählen. Sag mal, dieses rosa hier und sieh dir mein Rechteck an. Es wird rosa. So ziemlich einfache Werkzeuge gibt, ähm, und Verknüpfungen, um zu diesen Tools zu gelangen. Die nächsten, über die ich hier sprechen möchte, sind die Befehle. Also, um zu vergrößern, zu vergrößern können Sie einen Befehl plus ausführen und dann vergrößern und dann verkleinern, können Sie den Befehl abzüglich einiger tun, verkleinern, vergrößern , verkleinern, verkleinern, verkleinern, Vergrößern. Es ist eine Menge Zeit. Ich benutze diese Befehle mit der Kombination von Z für die Bleistiftsäge. Vergrößern, wählen Sie den gewünschten Raum aus. Wenn ich zu weit drin bin, werde ich verkleinern oder ich zoomen wieder hinein und dann verwende ich die Leertaste für die Hand, die sich bewegen soll . In Ordnung, also die nächste, die wir hier haben, ist für Textoptionen. So können Sie sehen, ich habe diesen Text hier 12 und drei. Wenn ich Befehl Shift größer dünn mache, wird das die Texte vergrößern. Und wenn ich Befehl Shift kleiner als das wird, um die Texte zu verkleinern sah Wählen Sie den 123 Text hier und ich gehe Befehl Verschiebung weniger als und Sie können es sehen. Es wird kleiner, einige verkleinern den Text. Und wenn ich Befehl Verschiebung größer dünn mache, dann geht es hoch. Vergrößern Sie den Text, damit Sie sehen können, dass der Texas größer wird. Nun, das nächste, was ich in Verbindung mit der Befehlsverschiebung größer als kleiner mache, als Text groß zu machen , ist auch die Option Verschiebung größer als ein kleiner, als die Zeilenhöhe zu verringern oder die Zeilenhöhe zu erhöhen. So können Sie jetzt die Zeilenhöhe sehen, diese Art von zerquetscht. Ich habe überlappende Worte. Also, solange ich das noch ausgewählt habe, werde ich vom Shift-Befehl wechseln und zur Option Shift gehen. Also ging ich von Befehlshöhe größer als weniger als und jetzt werde ich zur Option Shift gehen und Sie können sehen, was hier passiert, ist, dass ich die Zeilenhöhe erhöhe, indem ich die Option Shift größer mache als und dann verkleinere ich es, indem ich Option Shift mache. Weniger als so. Noch einmal, um die Schriftgröße zu verkleinern und auszuwählen. Und ich mache Befehlsverschiebung weniger als und ich verkleinere die Schriftgröße und dann, um die Zeilenhöhe zu erhöhen , werde ich zur Optionsverschiebung gehen, während der Text noch ausgewählt ist und ich gehe Optionsverschiebung weniger als zu verringern die Zeilenhöhe und größer als, um sie zu erhöhen. Also nehmen diese vier hier ein wenig Übung, aber sobald Sie den Dreh davon bekommen, wird es sehr natürlich. Okay, das nächste, was ich zeigen möchte, ist, ähm, der Befehl, um Ebenen übereinander zu bewegen, genannt vorwärts oder untereinander zu bringen, was rückwärts genannt wird. Also diese beiden Befehle hier. Nehmen wir an, ich habe diese beiden Rechtecke hier, und das ist für jede Ebene, jede Form, und er textet jedes grafische Element, das Sie in Fig MMA verwenden. Wenn ich dieses Rechteck unter das schwarze Rechteck unter das rosa Rechteck bringen möchte. Alles, was ich tun muss, ist das schwarze Rechteck auszuwählen. Do Befehlsoption und ich kann Pfeil nach unten gehen, um rückwärts zu bringen und Sie können sehen, dass es unter dem Rechteck geht . Und wenn ich oben Regie alle wieder bringen möchte, werde ich einfach Befehlsoption Pfeil nach oben verwenden. Sie können sehen, wie das funktioniert. Ich kann diese auch mit mehr als einer Form machen. Also, wenn ich Shift halte und ich sammle und ich beide dieser Rechtecke auswähle, kann ich diese auch nach oben und unten verschieben. Nehmen wir an, ich möchte es hier unter den Text bringen und ich kann sie wieder nach oben bringen. Ich möchte so ziemlich über 80% bis 90% der Werkzeugnutzung in Fig MMA. Sie können diese Sätze von Quickie-Befehlen haben und das wird den größten Teil ihrer Werkzeugverwendung abdecken , die Sie verwenden werden. Und ich habe sie auch hier in diesem Dokument gelassen. Wenn Sie also hier zum Dokument kommen und die Schnelltasten sehen, haben Sie diese hier. Eine andere Möglichkeit, die Quickies in Fig MMA zu sehen, ist, wenn Sie zum kleinen Fragezeichen hier unten gehen . Wo sagt Hilfe und Ressource ist und Sie darauf klicken und dann gehen Sie Teoh Quick Tastaturkürzel hier. Gehen Sie einfach voran und klicken Sie darauf. Und dann hier sind alle Ihre Tastenkombinationen oder Schnelltasten hier, und Sie können für Werkzeuge sehen. Hier sind alle für die Werkzeuge. Hier sind alle für die Anzeige haben Sie Zoom. Ja, Textverknüpfungen, Formen, Auswahlen, Auswahlen, Cursor an seinen Transformationen, Anordnen und Komponenten-Verknüpfungen gibt. Also, wenn Sie nur unter die Haube gehen und sehen wollen, welche Art von Verknüpfungen Figur Figment für Sie bietet, können Sie hier gehen, indem Sie auf das untere Rechte Fragezeichen klicken und in die Tastaturkürzel wie So gehen . Eine andere Möglichkeit, Tastenkombinationen zu sehen, ist, wenn Sie in einem Werkzeug sind, sagen wir, ich möchte auf das Rechteck-Werkzeug oder das Linienwerkzeug schauen, wo das Lippenwerkzeug es Abkürzungen auf der rechten Seite bietet. Also gibt es Verknüpfungen zu Ihrem Frame und Ihrem Slice-Werkzeug Auswahlwerkzeug, und es tut auch das gleiche hier. Wenn Sie in die Menüs Seiken gehen, wählen Sie ein Objekt, und ich konnte alle Quickies hier auf der rechten Seite sehen So bringen Sie die Front. Bringen Sie die rückwärts. Sperren Sie den Layer hier und dasselbe für die Bearbeitung. Rückgängig (Befehl) Z Redo Befehl shift (Befehl). Siehe Ausschneiden Befehl X kopieren Befehl. Siehe Einfügen Befehl V Einfügen über Auswahl Befehl Verschiebung B So können Sie auch die Tastaturen auf mehrere Arten anzeigen. Sie können es an der Frage Mark sehen, und Sie können auch in die Menüs gehen hier und die Werkzeuge und sehen Sie die Verknüpfungen, während Sie gehen entlang . Alles klar, Cool. Das deckt also die Tastaturen ab. Schauen wir uns jetzt ein paar Plug Ins an. Also habe ich eine andere Seite hier in der Sigma-Datei erstellt, die Sie haben und diese hier nennt man Lieblings-Plug Ins. Und das sind meine vier Top-Lieblings-Plug Ins, die Sie in Fig MMA beschränkt haben. Also zu gehen Fuß Plug Ins und zu gehen Blick auf Plug Mints Plug Ins, gehen Sie einfach nach oben links. Hier, gehen Sie zu Ihrem Dashboard. Klicken Sie auf die vier Felder hier oben links, gelangen Sie zum Dashboard. Hier haben Sie die Möglichkeit, Projekte zu durchsuchen. Hier können Sie Ihre aktuellen Projekte sehen. Sie haben Ihre Entwürfe und dann haben Sie Ihre Plug Ins. hier. Das sind also alle Ihre Plug Ins hier, und meine Top-Lieblings-vier Plug Ins hier heißen Content. Riel, Rechtschreibprüfung, entspulen Asche und Kartensichel, damit Sie sehen können, dass es hier einige beliebte gibt. Die sind ziemlich beliebt. Diese zuerst zu den in spritzen den Inhalt riel. Sie können auch Plug Ins suchen, also gehen Sie einfach alle Plug Ins durchsuchen und Sie können eingeben, sagen wir , Karte, Sichel. Hier können Sie den hier sehen. Sie können auch die Rechtschreibprüfung eingeben. Du könntest hier die Rechtschreibprüfung sehen. Sie sind ziemlich einfach zu installieren. Also lassen Sie uns einfach sagen, ich möchte diese Rechtschreibprüfung installieren, während Sie tun müssen, ist auf Rechtschreibprüfung klicken . Sie können sehen, wo es installiert ist. Ich kann es deinstallieren und dann erneut klicken, und ich habe es in der Anwendung installiert. Ziemlich einfaches Zeug. Es macht Spaß, einfach herum zu gehen und einfach alle Plug Ins zu beherbergen, die Figment Ihnen bieten . Es gibt Tonnen von ihnen. Sie sind ziemlich cool. Schauen wir uns einige meiner Favoriten hier an, und ich werde Ihnen zeigen, wie man einen Plug in verwendet. Gehen wir zurück zu der Akte. Klicken Sie einfach auf Ihre Figment-Klassendatei. Ich bin hier auf der Plug In-Seite. Schauen wir uns den Inhalt Riel an. Also viele dieser Plug Ins Sie möchten ein Element auswählen. Gehen wir also weiter und machen Sie ein Rechteck hier oben in der Menüleiste. Hier, Sie haben Plug Ins. Sie gehen voran und klicken Sie auf Plug Ins, und das sind diejenigen, die Sie installiert haben. Also in diesem Fall schauen wir uns den Inhalt Riel an. Also klicke ich auf Inhalte real, und es öffnet sich, dass Plug in. Und was das tut, ist, dass es mir zur Verfügung stellt. Ich bin verschiedene Arten von Inhalten, die ich brauche. Jemand hat es Textfeld hier, und es gibt mir Text-Avatare und Symbole. Also, wenn ich auf diesen Text klicken und ich Namen wollen, gibt es mir zufällige Versionen von Namen geben mir zufällige Telefonnummern. Es gibt mir Adressen, die ich brauche. Es würde mir Daten und Zeiten geben. Es wird mit Laura füllen einige, wenn Sie nur Standardtext, zufällige generierte E-Mails und zufällige generiert Sie RL als auch wollen. Ich kann auch auf dieses Rechteck Form hier goto Avatare klicken, und dies wird mir automatisch verschiedene Fotos von Menschen Wissenschaftler wollen Männer sagen Weibchen hier kann ich sowohl männlich als auch weiblich tun. Es ist nur eine zufällige Auswahl von Fotos. Also bin ich als nächstes einfach, wenn ich eine ganze Reihe von verschiedenen, ähm, ähm, Team-Boards Ich brauche jetzt verschiedene Fotos von Menschen oder sozialen Medien, wo ich sehen kann, ich habe viele Leute Fotos, die meine Designs bevölkert haben. Dies macht es wirklich einfach, die nächste Sache zu tun, es hat auch einige Symbole. Sie müssen eine Schriftart installieren, um die Symbole zu verwenden. Ich benutze die Icons nicht wirklich wieder so sehr. Ich benutze hier das Substantiv Projekt. Ich habe Ihnen früher gezeigt, wo, wenn Sie wollen, sagen wir, ein Profil-Symbol, gehen Sie einfach zu Substantiv Projekt. Sie können es herunterladen, wie ich Ihnen im vergangenen Video gezeigt habe, und ziehen Sie die skalierbare Vektorgrafik in Ihre Figment-Datei und Sie können das verwenden. In Ordnung. Ein weiterer cooler Stecker, den ich wirklich wertvoll finde, ist Asche unspool. Also, wenn Sie müssen Asche entspulen, das ist nur kostenlose Fotos, die Sie verwenden können So geht es über nur Fotos von Menschen hier so wählen Sie dieses Quadrat und ich könnte nur zufällige Fotos einfügen. Es würde mir nur zufällig geben. Das ist ein wirklich schönes Foto dort, aber es gibt mir auch einige Presets hier. Ich kann Tiere, Architektur haben , und wenn ich einfach wieder auf Architektur klicke, gibt es mir mehr architektonische Optionen. gleiche in der Natur gibt mir auch die Natur. Ich weiß, bevölkern jede Form. Sagen wir mal, ich will , hier einen Kreis,den ich porträtiere. Geben Sie mir eine Portraitansicht hier oder Raum und ich kann auch nach Sachen suchen. Nehmen wir an, ich will wie einen Tiger und es gibt ein paar Fotos von einigen Tigern hier. Ziemlich cool, richtig? Solche Asche abspulen. Nur ein schneller Weg, um einen kostenlosen Zugang zu vielen verschiedenen Arten von Fotos zu erhalten. Sie können auch Fuß auf splash dot com gehen, und sie haben eine Bibliothek von Fotos, die Sie herunterladen können. In Ordnung. Die nächste ist die Rechtschreibprüfung, also gehen Sie einfach vor und wählen Sie eine beliebige Typografie oder Absätze oder schriftliche Inhalte aus. Gehen Sie zu Ihrem Plug in und klicken Sie einfach auf die Rechtschreibprüfung dort und es wird. Es wird automatisch, ähm, Rechtschreibprüfung alles, was Sie haben, also lassen Sie mich gehen. Gehen wir zurück, Teoh. Schnelltasten hier, wählen Sie all dies aus. Gehe zu Rechtschreibprüfung und jetzt wird es geladen. Es sagt mir, dass ich Tropfer falsch geschrieben ist oder falsche Abstände darauf hat. So hübsch ordentlich. Ähm, haben sieben Fehler hier, die über Pipettenwerkzeug sprechen. Lassen Sie gehen wählen Sie die Befehle. Wahrscheinlich werden sie mir auchhier einige Fehler auch . Ja, ja. Es wurden einige Fehler angezeigt. Was ist traurig? Falsch geschrieben. Dieses Wort würde Befehl sehen. Und ich mache Rechtschreibprüfung. Nun, ich schätze, das ist ein Wort. Aber, ähm, ja, am besten, wenn du buchstabierst, wenn du willst. Rechtschreibprüfung wird Graham früh verwendet. Sie können diese in eine E-Mail und 1/2 Gramm früh kopieren und einfügen. Überprüfe es auch. Alles klar, cool. Das nächste, was Sie überprüfen müssen, ist Karte Sichel. Einige Hindernisse sind ziemlich cool. Einer meiner Lieblings-PlugIns hier. Fangen Sie einfach mit der Form an, die dieses Jahr klar ist. Machen Sie ein Rechteck groß. Und das ist für alles, was Sie wollen Karte bezogen. Also, wenn Sie weg von der normalen Styling einer Google-Karte und Sie wollen eine mehr wie ein dunkles Thema oder wie, Themenkarte, können Sie hier kommen, um Karte, Sichel, klicken Sie auf öffnen Karte Sichel, und es gibt Ihnen verschiedene Stile hier. Plötzlich schieben Sie das ein wenig nach links. wir also, das ist ein Streetstyle. Es ist grafischer. Sie können Outdoor-Stil tun. Hier machen Sie einen leichten Stil. Ich mag ein dunkles Thema, das Ihnen einen Satelliten gibt. Hier ist dein Satellit und Straßen. Ich mag das dunkle Thema persönlich. Viele dunkle Thema können Sie andere mit erstellen, Um, Um, Sie können verkleinern. Ich könnte die ganze Welt hierher bringen, wenn ich wollte. Lass uns einfach die Vereinigten Staaten machen. Viele Kalifornien und ich können hier verschiedene Whiffs machen, also sagen wir 1000 mal 1000 Wenn ich wollte und ich drücke Karte erstellen, wird es mir einen Screenshot dieses Designs innerhalb der Form geben. Hier. Ich bekomme eins mit vielen Straßen, kleinen Linien, die schwer zu erschaffen sind. Nehmen wir an, San Francisco hier und Sie können sehen, jetzt habe ich San Francisco generiert. Innerhalb dieser Form ist es ein Bild. Also gehe ich hier zu meinem Gefühlsbild. Ich habe das Bild hier. Ich kann kommen und dieses Bild zuschneiden, wenn ich kaufen möchte, drücken Sie die Ernte an der Spitze. Und das ist die Sichel der Karte. Das sind also meine vier Lieblings-Plugins. Ich werde die hier für dich gehen, , und du könntest die benutzen und sie einstecken. Ähm, und Sie können Ihre Steckdosen hier finden. Eine andere Möglichkeit, zu deinem Mann zu gehen. Es zu Ihren Plug Ins ist, wenn Sie einfach auf die Plug Ins oben klicken, gehen, um Plug Ins zu verwalten, es wird Sie zurück zu dieser Seite, die wir gerade besucht haben. Alles klar, Das letzte, was ist, zu schauen, wie man gooey Kits herunterladen. Also ein gooey Kit ist, ähm, das Wort Sie e g u I bedeutet grafische Benutzeroberfläche, und Figur hat eine ganze Reihe von ihnen für Sie zu verwenden. Also, wenn Sie zu einer Google-Suche gehen, Ich habe eine hier für Sie und Sie nur Google-Suche und Download Fig MMA gooey Kits. Mein Favorit ist dieser Download 49 kostenlos. Ähm, es ist das Sie, das ich Dot Com aufbewahre. Wenn Sie auf dieses klicken, wird es Sie zu einem Link hier führen, und das hat eine ganze Reihe von Lets, wissen Sie, und grüne Ah, Tasten. hier Welche sind für Feige? MMA? Sie haben nicht für Skizzenvision, Andere Design-Tools. Und sagen wir, Sie wollen dieses Münzbasis-Web-Dashboard hier. Das ist alles kostenlos. Sie kommen einfach rein, drücken Sie den kostenlosen Download es unten unten unten links. Hier, gehen wir weiter und öffnen das. Wenn Sie diesen Ordner öffnen, erhalten Sie hier P- und G's dieser Designs. Sie können sehen. Und es hat ein dunkles Thema in einem hellen Thema. Es gibt Ihnen auch diese Figment-Datei. Also, wenn Sie diese Figment-Datei installieren wollen, , tun Sie das Gleiche,was wir am Anfang gemacht haben, wo Sie die Sigma-Datei heruntergeladen haben , die ich bereitgestellt habe, und Sie haben sie in Ihren Entwurfsbereich gezogen und hier abgelegt. Also zeig ich es dir. Also, was Sie hier tun, ist diese Krabbe diese Datei und klicken Sie einfach und ziehen Sie es in Fig MMA wie so. Und es wird diese Datei importieren und Sie können fortfahren. Ich werde absagen. Es war bereits heruntergeladen haben. Okay, cool. Eine andere Sache, die Sie dio können Sie auch Drag & Drop Skizzendateien auf die gleiche Weise in Fig MMA, und es wird in Ihre Skizzendateien mit allen Entwürfen ziehen bereit zu gehen, es wird nicht den Prototyp Stitching, die Sie nicht skizziert haben. Aber es wird alle Entwürfe, die Sie in Sketch in zwei Feigen Mahir gemacht haben, übersetzen. Lassen Sie uns mit dem Kegel Junge Münze Basis Web Dashboard gehen. Das war die, die wir gerade heruntergeladen haben. Und Sie können sehen, dass ich die hellen Themen hier habe, und ich habe die klebrigen Kits. Ich kann auf all diese hineinkommen. Aiken, wähle die grafischen Elemente in diesem QE Kind aus. Ich kann sie etwas ändern. Es ist ein guter Ausgangspunkt. Sie suchen nach Grunddesign in diesem Fall, ähm, ähm, mit einem Armaturenbrett für Münzbasis. Und es hat sowohl die hellen Versionen, und es hat die dunklen Versionen hier. Eine Quelle, wie Sie sehen können, gibt es Tonnen von klebrigen Kits hier, ähm, die Sie online herunterladen und überprüfen und mit spielen können. Aber so machst du es hier. Und sie erscheinen hier auf deinem Dashboard, wie ich im Web-basierten, äh, äh, Münzbasis Web-Dashboard, das du gerade gesehen hast. Okay, cool. Also, das ist ein Überblick über, ähm, ziemlich wie Tastaturkürzel zu tun und wie man herauszufinden, Plug Ins und Download Q B-Kits im letzten Video wird zeigen. Wir werden sehen, wie man Kommentare erstellt, Symbole, die einige letzte Gedanken haben und weitergehen. Richtig? Sehen Sie sich das letzte Video an. Pass auf Tschüss auf. 9. Commenting endgültige Gedanken: Alles klar, willkommen zurück zum letzten Video, wie man eine mobile Anwendung mit Abb, meinem Design-Tool, entwirft. Also an diesem Punkt werden wir durch, wie man Kommentare im Kontext eines Designs zu erstellen, ist ziemlich einfach und haben einige letzte Gedanken und weiter. Gehen wir weiter, und wir sind auf der von Figment entworfenen Datei, die Sie heruntergeladen haben. Gehen wir zurück zu unserem Lernreiter Paige, wo wir den Prototyp hier erstellt haben, und ich zeige Ihnen, wie Sie und Ihre Zelle, Sie und Ihre Teamkollegen, andere Leute Kommentare teilen können, basierend auf dem Design, das Sie sehen hier. Also gehen wir hier rüber und lassen Sie uns ein paar Kommentare erstellen. Wenn Sie also oben links die Symbolleiste hier oben links sehen, gibt es ein kleines Lautsprecherblase Symbol. Gehen Sie voran und klicken Sie darauf, und das wird Kommentare zeigen, sondern auch geben Ihnen die Möglichkeit, einen Kommentar zu löschen. Also lasst uns voran gehen und einen Kommentar schreiben. Sagen wir , mal,lasst uns hier einen Kommentar auf der Karte abgeben, und ich werde die Karte ein wenig verkleinern, und ich habe dort einen Kommentar platziert. Und so ist es schön, wie Sie sehen können, dass der Kommentar im Zusammenhang mit dem Designelement steht, in dem ich kommentiere, was es wirklich einfach macht, Ihre Teamkollegen zu verstehen, wenn sie Ihnen Feedback zu Ihrem Design geben , was sie sind bezieht sich auf. Sie gehen vielleicht zu dieser Zeile hier ist wie Linie up die Leitungskapazität und ohne den Kontext. Wenn Sie nur einen Kommentar lesen, der die Line-Deckkraft eingerichtet hat, wüssten Sie nicht, worauf sich diese Person bezieht. Aber da sie diesen Kommentar direkt in der Zeile fallen gelassen haben, haben Sie eine Vorstellung davon, dass diese Änderung. Und noch einmal, sagen wir, das war eine Veränderung, die wir vornehmen mussten. Deshalb haben wir die Komponentenbibliothek. Hier ist alles, was Sie jetzt tun müssen, ist gehen Sie greifen diese Linie und was ist ihre Kapazität auf 40% jetzt . Und gehen wir zurück zu unserem lernenden Paige. Und jetzt wurde jede Zeile auf jeder einzelnen Seite aktualisiert, ähm, in diesem Bereich. Deshalb stellen wir diese Komponenten her. Es macht es wirklich einfach, Änderungen wie die vorzunehmen, die manchmal durch das Kommentieren kommen . Gehen wir zurück und sagen, dass ich meine Kommentare noch einmal überprüfen möchte. Alles, was Sie tun müssen, ist darauf zu klicken und Sie werden die Kommentare zu sehen und wo sie existieren. Und Sie werden auch auf der rechten Seite sehen Sie eine Liste von Ihnen. Von all den Kommentaren, die hier passiert sind, nachdem ich einen Kommentar abgeschlossen habe oder nachdem ich einen Kommentar abgeschlossen habe, kann ich hier auf die Lösung klicken und das geht weg. So lösen Sie einen Kommentar auf und gehen weg. Eine andere, die ich hier machen möchte, ist Lassen Sie uns einfach einen Testkommentar machen. Hier ist Aiken. Taggen Sie Menschen, indem Sie die at. Und hier ist eine Liste von Leuten, die ich in meinem Projekt habe, und Aiken markiert sie mit diesem Kommentar. Also lasst uns fallen sehen. Ich kann mich selbst beschriften. Ok, cool. Und ich gehe voran und markiere mich hier. Und das wird mich benachrichtigen. Ich erhalte eine E-Mail, dass jemand einen Kommentar in meiner FIG MMA Designdatei hinterlassen hat. Und so habe ich die Kommentare hier beschränkt, aber ich kann ihn auch durch E-Mail-Benachrichtigungen sehen, was es einfach macht, viele Kommentare zu verwalten. Ähm, also hinterlässt mir jemand einen Kommentar, ich gehe rein, sie kennzeichnen mich darin. Ich las den Kommentar und ich meinte, lösen oder ein Gespräch mit ihnen führen. So ziemlich die Essenz des Kommentars und wie Kommentare funktionieren. Du kannst sie wieder sehen. Sobald Sie sich vom Kommentarsymbol entfernt haben, werden sie ausgeblendet. Also denken Sie daran, dass Sie nicht in der Lage sein, sie zu sehen, bis Sie auf das Kommentar-Symbol hier oben klicken . Das sind die Anzeigen- und Showkommentare. Und dann können Sie gehen und klicken Sie auf so viele Kommentare, wie Sie wollen, und wir werden nur abschließen. Dieser Knopf ist genial. Lassen Sie uns einen netten Kommentar machen. Magst du hier ein kleines Emoji? Wie Daumen hoch? Cool. Da gehst du, Rechte. Das sind Kommentare auf den Punkt gebracht. Ähm, und das Letzte ist nur ein paar letzte Gedanken darüber, nach vorne zu gehen. Also wieder, es gibt noch viel mehr Sachen, die wir in Fig MMA abdecken können. Ich habe hauptsächlich die Grundlagen Prototypen und Übergänge innerhalb der Prototypen behandelt und wie man diese mobile Anwendung hier entwirft. Ich hoffe, du hast etwas Wert daraus gemacht. Mein letzter Gedanke ist nur, es braucht Übung. Üben Sie einfach ständig darauf. Wir haben eine mobile Anwendung gemacht. Wenn Sie wollen, sagen wir, eine Web-Version, Ich habe eine neue Seite hier. Nennen Sie es Web gehen Sie zu Ihrem Kunstboard hier und Sie können eine Desktop-Version hier greifen. Lassen Sie uns voran gehen und tun Sie ein Mac-Buch mögen und Sie können aus ah Website als auch entwerfen. Das ist also nicht nur für mobile Anwendungen. Sie können hier so ziemlich jede Bildschirmgröße machen und jede Benutzererfahrung Prototypen erstellen, für die Sie sich entscheiden, um, und auch in Zukunft. Stellen Sie sicher, dass Sie die Fig MMA Spiegel-Anwendung auf Ihrem mobilen Gerät herunterladen, wenn Sie vor allem, wenn Sie tun mobile Benutzererfahrungen auf diesem können Sie die mobilen Bildschirmdesigns direkt auf Ihrem Telefon sehen , so dass Sie sehen können, wie sie auf der Telefon. Das ist wirklich wichtig. Und wenn Sie mit mir in Verbindung bleiben wollen, können Sie auf meine Website gehen. Es ist Aaron Lawrence Design dot com, und Sie können hierher kommen und Links zu meiner Arbeit sehen. Sie können mich direkt über die Website hier kontaktieren. Du wirst ganz hier unten Kontakt aufnehmen. Sie sehen etwas von meiner Arbeit und ich wünsche Ihnen das Beste. , Ich hoffe,das war wertvoll für Sie, und ich habe auch ein paar weitere Klassen, die Sie über das User Experience Design überprüfen können. Wenn Sie nur meinen Namen suchen oder einige meiner Videos finden, indem Sie in Sie x slash ey Design eingeben und Sie werden mich in einer anderen Klasse sehen, die weiter tief in den Reifen UX-Prozess eintaucht, der hier angelegt ist , wo wir durch Gold gehen, machen Ziel Festlegung von Problemen und Annahmen Wir taten. Ich lehre Ihnen, wie Sie mit Benutzern sprechen und Kunden hatten eine Synthese, synthetisieren und thematisieren Sie Ihre Erkenntnisse, die Sie gelernt haben, dass Sie nach Identifizierung von Benutzerbedürfnissen und Validierungen suchen und in der Entwicklung von Experimenten, um Ihre Hypothese zu validieren was Sie denken, funktionieren wird oder wie Sie ein Benutzerbedürfnis oder ein Problem lösen würden. Und Sie erstellen eine Interaktion, Modell oder einen Prototyp und wie Sie diesen Prototyp testen und dann, wie Sie mit Produktmanagern, Ingenieuren zusammenarbeiten Produktmanagern, und die Entwürfe ausführen, die Sie haben, und dann eine Fortsetzung von Entwicklung und Messung und Erlernen dieses Prozesses der Einführung von Software und lernen, wie man iteriert und verändert, um erfolgreich zu werden. Okay, nun, da hast du es. Nochmals vielen Dank und ich hoffe, dass Sie das Beste und ich sehen uns in der nächsten Klasse. Tschüss. 10. Bonusvideo: Die Bonusvideos. In den nächsten vier Videos werden wir also noch eine Reihe von Prototyping-Funktionen in Figma behandeln . Und wir werden auch einige der neuesten Funktionen behandeln , die figma auf den Markt gebracht hat, darunter Komponentenvarianten und auch interaktive Komponenten, was super großartig ist. Und wie alle meine Videos, die ich hier habe, habe ich eine Akte für dich erstellt. Wenn Sie also herunterladen, sollte die Datei in etwa so aussehen, wo in jedem Satz der Prototypen Funktionen oder Funktionen , die wir in dieser Klasse lernen werden. Ich habe das obere Ende ist das Beispiel hier. Diese Zeile hier wird also das Beispiel dessen behandeln , was wir lernen werden. Es ist prototypisiert, bereit für den Fall, dass Sie sich verirren und sehen möchten, wie ich es gemacht habe. Und dann machen wir es zusammen im Video hier. Du siehst also das Beispiel und du wirst das sehen, das du machst. Und wir machen den, der besagt, dass du es zusammen machst. Und wir werden eine ganze Reihe neuer Prototyp-Funktionen abdecken, darunter einige Dropdown-Auswahlen und Modale sowie Menüs. Werden Sie sich mit der Funktion des intelligenten Animate-Prototyps einige Geschenke zum Laden von Geschenken ausbauen . Wir machen auch ein paar horizontale Wischen, einige vertikale Wischen. Wir werden beide kombinieren, um eine reichhaltige Map Swiping-Interaktion zu erstellen . Und wir werden auch einige der Komponenten und eine Varianz abdecken . Und die interaktiven Komponenten, die wirklich Spaß machen und hilfreich sind . Okay, also solltest du diese Akte nicht haben. Wenn nicht, fahren Sie fort und laden Sie es herunter. Und denken Sie daran, wenn Sie es herunterladen, sehen Sie möglicherweise, dass es sich um eine ZIP-Datei handelt. Wenn Sie also das ZIP am Ende des Dateiformats sehen, klicken Sie einfach dreifach auf diese Datei, doppelklicken oder dreifach klicken. Und es öffnet die Datei hier und geht in diesen Ordner. Und denken Sie daran, Sie können diese FIG-Datei hier nicht einfach dreifach anklicken . Du musst tatsächlich nach Figma gehen und in deine Entwürfe gehen. Jahre werden wahrscheinlich nicht wie meine aussehen weil ich hier eine Reihe von Dateien habe, aber Sie werden in Ihre Entwürfe in Ihrem Home-Tab in Figma eingehen . Und du schnappst dir diese Datei hier, du kannst sie hier sehen und in Figma ziehen. Weißt du, du hast es richtig gemacht, wenn Figma dir diesen blauen Umriss gibt . Und dann wird die Datei geladen und die Datei importiert. Und Sie sollten die neue Datei hier und Ihren Entwurfsordner hier sehen und ansehen. Schließt das Laden ab. Sie drücken die Schaltfläche „Fertig“ und Sie haben diese Datei hier. Ich werde diesen löschen, nur damit ich keine Kopien davon habe. Okay. Lassen Sie uns also mit dem ersten Video beginnen , hier werden wir die Auflösung, den Prototyp, die Verzögerung und das Ein- und Ausziehen behandeln . Werfen wir einen ersten Blick auf den Dissolve-Prototyp hier. Also drücke ich die Wiedergabetaste hier oben rechts. Das wird den Prototyp öffnen. Und das erste, was Sie bemerken werden, ist, dass dies in ein echtes Gerät geladen wird . Also habe ich das nie in einigen der vergangenen Videos behandelt. Aber nur um zu wiederholen, wenn ich von einer der Kunsttafeln abklicke und im Kunstraum bin , nur die Grauzone. Und ich bin nicht auf der Registerkarte Design, aber auf der Registerkarte Prototyp sehen Sie, dass ich ein Gerät auswählen kann. Manchmal wird es geladen ist kein Gerät. Und dann können Sie das Modell des Geräts auswählen. Also habe ich hier iPhone 11, und ich habe es bei Space Gate grau, du solltest das schon geladen haben, weil ich das eingraviert habe, das in die Datei eingebettet habe, die du heruntergeladen hast, aber nur für den Fall, dass Sie nicht wissen , wie Sie die Geräte wechseln sollen. Okay, schauen wir uns also die Dissolve-Funktion des Prototyps an. So ziemlich wir haben einen Startbildschirm, drücken Sie die Ansichtstaste. Und Sie werden sehen, dass dieser aufgelöste Bildschirm hereinkommt. Und das aufgelöste bedeutet nur, dass es eine Zeitverzögerung hat , bis dieser Bildschirm geladen wird. Es ist eine sehr einfache Interaktion. Lassen Sie uns also damit beginnen , sicherzustellen, dass wir ersten im Prototyptyp hier oben rechts sind. Also nicht die Registerkarte Design, sondern die Registerkarte Prototyp. Und ziehen wir diesen Start-Button auf diesen Bildschirm. Was diese Startschaltfläche bewirkt , ist, dass dies der erste Bildschirm sein wird , von dem die Prototypen geladen werden. Okay, also was wir hier machen werden, ist, dass wir hier den Ansichtsknopf drücken. Und während wir uns auf der Registerkarte Prototyp befinden und den GUI-Arm direkt auf den nächsten Bildschirm ziehen . Und du wirst sehen, dass es bereits sitzt, am Fass und aufgelöst ist. Aber lasst uns zuerst sehen, wie es sofort aussieht. Sofortig. heißt nur, dass es keine Zeitverzögerung haben wird. Und lasst uns weitermachen und das spielen. Und wenn Sie die Ansichtstaste drücken, sehen Sie, wie es dort keine Verzögerung gab. Am häufigsten, wenn Sie sich in der Prototyp-Funktion befinden und hier auf den Pfeil klicken und das Dialogfeld Interaktionsdetails hier oben rechts angezeigt wird. Es wird standardmäßig ungerade tippen oder onclick und im Zustand sein. Und dafür müssen wir nur auflösen drücken. Und dann wird es uns einige geben, einige der Übergangsstaaten lockern, lockern. Ich mache auch gerne beides entspannt und entspannt. Entweder liegt einer an dir. Sie sind, sind sie nicht, sie sind sehr differenziert. Sie haben nicht zu viele Unterschiede zwischen den beiden, aber erleichtern sich, erleichtern sich. Es liegt an dir. Was aber hier wichtig ist, ist die Zeitverzögerung. Lassen Sie uns das also zu einer sehr langen Verzögerung machen. Sagen wir, es sind fünftausend Millisekunden. Und schauen wir uns diese Verzögerung an. Es sollte sehr lange dauern. Und Sie können sehen, dass dies eine Verzögerung von 5 Sekunden ist. So machten fünftausend Millisekunden eine sehr lange Verzögerung. Das ist also ein bisschen zu viel Auflösen oder Verzögerung. Lass uns zurück gehen. Lasst uns es wieder umstellen, sagen wir einfach eine 1000 und wir werden eine schöne Auflösung haben. Geh zurück zum Prototyp. Ich drücke R auf meiner Tastatur. Und das ist das Gleiche wie das Drücken der Neustarttaste unten rechts. Und es wird den Prototyp wieder dort neu starten , wo ich dieses kleine Startlabel angebracht habe. Und wieder können Sie es einfach anklicken und auf eine der gewünschten Zeichenflächen ziehen . Drücken Sie „Ansicht“. Und das war eine nette Verzögerung dort. Okay, ziemlich cool. Lasst uns weitermachen und uns den nächsten ansehen. Okay, also jetzt ist diese nächste Interaktion hier auf der Prototyp-Funktion eine Verzögerung, und das ist normalerweise eine ganze Bildschirmverzögerung. Und so gibt es hier einige gemeinsame Dinge zu vermeiden, die ich mich in einer Sekunde befassen werde. Aber alles, was Sie hier tun müssen, um das Beispiel zu zeigen, ist einfach das Beispiel hier zu bekommen, zu verschieben, per Drag & Drop zu ziehen oder das Startlabel auf diesen Prototyp zu ziehen. Und lass uns die Play-Taste drücken. Also wähle ich diese Zeichenfläche hier aus und drücke die Wiedergabetaste. Und du wirst sehen, dass es einen Loader-Editor hat. Unsere Zeitverzögerung geht auf die hohe Seite. Also noch einmal geladen und es heißt hallo. Es ähnelt einer Dissolve-Funktion. Es ist nur so, dass die ganze Seite auf eine Verzögerung eingestellt ist. Also lasst uns weitermachen und es schnell machen. Es sollte ziemlich einfach sein. Ziehen wir den Start auf die Prototypenbildschirme hier , die sich neben dem U du befinden. Und das hat keine Prototypfunktion dazu. Also was durch eine Leere hier klicke, sag diesen Lade-Button, lass uns den Loader machen. Wenn ich also dieses ladende GIF auswähle, animiertes GIF und die GUI gezogen habe, dann habe ich den GUI-Arm gezogen, damit der Prototyp auf die nächste Zeichenfläche gesetzt wird. Wie so. Und ich klicke auf Tap. Sie werden sehen, dass diese Funktion nach der Verzögerung deaktiviert ist. Es ist üblich, es zu vermeiden. Um also einen Vollbildmodus zu erhalten , um zu verzögern und zu einem anderen Bildschirm zu wechseln, müssen Sie tatsächlich die gesamte Zeichenfläche oder den gesamten Bildschirm auswählen . Was ich also tun werde, ist diese Prototyp-Funktion rückgängig zu machen. Und ich wähle aus , wo iPhone 11 Pro steht. Wenn ich diese Art Board hier benennen möchte, klicke ich einfach bis zu den Ebenen. Und nennen wir diese Ladeseite. Okay, also wo es heißt, Seite laden jetzt klicke ich erneut. Und jetzt habe ich die ganze Zeichenfläche ausgewählt, was bedeutet, dass ich diesen ganzen Rahmen habe. Und ich gehe zurück zum Prototyp. Und Sie können den Start hier vom Prototyp auf diesem Bildschirm sehen. Und ich ziehe es hier auf die hohe Seite. Und du wirst es beim Tippen sehen. Und wenn ich in das Dropdown-Menü beim Tippen klicke, wird angezeigt, dass die Verzögerung aktiviert wurde , da wir die gesamte Zeichenfläche ausgewählt haben. Also lasst uns weitermachen und nach Verzögerung tun. Und dann haben wir gleich neben der völligen Verzögerung die Millisekunden, haben wir gleich neben der völligen Verzögerung die Millisekunden wie lange wir wollen, dass dies verzögert wird. Also lasst uns weitermachen und tun. Stellen wir es auf 5 Tausend SEK-Millisekunden ein, was fünf Sekunden dauern wird. Und dann haben wir für die Animation verschiedene Zustände. Wir können einen Augenblick machen, der die Seite sofort lädt. Und wir haben eine Auflösung und wir ziehen ein, ziehen aus, was ich dir ein bisschen zeigen werde. Aber lasst uns vorerst einfach ins Institut gehen. Wir halten es einfach. Okay, also werde ich hier die Zeichenfläche auswählen, Seite laden. Ich drücke den Play-Button. Und du wirst sehen, dass diese Seite geladen wird. Nach fünf Sekunden lädt es die hohe Seite. Das ist also eine Verzögerungsfunktion. Also lasst uns wieder reingehen. Und wenn Sie die Interaktionsdetails hier sehen , wo die Animation sofort sagt, was passiert und wenden Sie die Auflösungsfunktion an, die wir im letzten Prototyp gelernt haben , den wir gemacht haben. Und lasst uns keine 1000 Millisekunden machen, lasst uns vielleicht 500 machen. Und jetzt siehst du hier den hohen Bildschirm. Kommen Sie mit einem Auflösen ein und wird keine sofortige Ladung sein. werden also fünf Sekunden vergehen und das Laden, und Sie werden sehen, wie sich die Auflösung auflöst. Ja, es ist eine ziemlich schnelle Auflösung. Wir können etwas Spaß damit haben. Lass uns ein bisschen mehr hinzufügen. Lass uns tatsächlich tun, lass uns 1, 0, 0, 0, 0, 0 machen. Also sei ungefähr eine Sekunde. Löse dich auf. Geh mal sehen , wie das aussieht. Okay, das ist ziemlich gut dort. Okay, cool. Wenn Sie daran interessiert sind, ich animierte Gifs zu laden , die Sie hier sehen, können Sie auf unsere Website gehen. Und ich habe die Anweisungen auf der linken Seite hier. Es heißt Loading Dot io. Ich fahre weiter und ziehe einen Browser hoch. Und das hat kostenlose animierte Icons und animierte Gifs beim Laden Geschenken, die Sie als GIF herunterladen und diese direkt in Figma einfügen können , wenn Sie möchten. Nehmen wir an, Sie interessieren sich für diese Animation, aber ich möchte die Farbe ändern. Sagen wir, ich möchte diese Farbe ändern , um hier einfach ein Schwarz zu sagen. Ich lösche alle anderen hier und mache ein Grau, so etwas. Und ich möchte es als GIF herunterladen. Alles, was ich tun muss, ist auf das Geschenk zu drücken, den du kostenlos herunterladen kannst. Sie werden es oben oder unten links herunterladen sehen. Also lade Spinner one S herunter und alles, was ich jetzt wirklich tun muss, ist das zu nehmen und in Figma zu ziehen. Nun, was ich tun kann ist, dass du siehst, wie es einen transparenten oder weißen Hintergrund hat . Ich kann dieses GIF hier auf einen transparenten Hintergrund setzen. Und jetzt kann ich es erneut herunterladen und herunterladen. Und du wirst jetzt sehen, wenn ich es herunterlade, es hat einen transparenten Hintergrund. Und wir könnten diesen Loader einfach platzieren und ein wenig in diesen Bildschirm verkleinern . Und du wirst sehen, dass wir das neue Loading Gif haben. Fünf Sekunden vergehen. Und viel, wir haben den High Screen. Alles klar, ziemlich cool. Gehen wir mit dem nächsten fort, der offen und geschlossen ist. Und dies wird eine Interaktion nach oben und nach unten nutzen . Also bringe ich den Start zum Beispiel hier, damit wir sehen können, was wir tun werden. Das ist wieder ziemlich einfach. Alles, was es ist, ist dieser Bildschirm neben, es wird nach oben rutschen und das x wird wieder nach unten rutschen. Es ist sehr üblich, Seiten oder irgendetwas festzulegen , das einen Abbrechen und eine Schaltfläche zum Speichern hat. Das wird einfach nach oben rutschen. Sie hätten einen Abbruch, Sie haben ein Speichern, schließen Sie wieder. Wenn Sie eher einen Workflow haben, zeige ich Ihnen, wie diese besten Starter-Seiten funktionieren , um einen Workflow zu starten. Und dann gehst du durch den Workflow. Wir werden jetzt im nächsten Video lernen. Also häng einfach fest. Und um diese Interaktion zu sehen und gemeinsam zu machen, schnappen wir uns den Start. Rüber zur Seite unten, wo es heißt, dass du es tust. Und ziemlich einfach hier. Lasst uns weitermachen und den Ansicht-Button greifen. Wechseln Sie zur Registerkarte „Prototyp“. Schieben Sie das rüber auf den Bildschirm. Wir wollen an der Spitze. Und bei der Animation wollen wir nicht sofort, wir wollen uns nicht auflösen, wir wollen einziehen. Und dann können wir mit dem Einzug nach links gehen, nach rechts gehen und den Bildschirm nach unten bewegen. Und in diesem wollen wir, dass es nach oben geht. Okay, jetzt gehen wir weiter zum Prototyp und schauen wir uns das an. Okay, sieh dir an, wie es nach oben ging, aber es hatte einen sehr langsamen Übergang. Cl diese Bewegung, die etwas zu langsam aussah. Beispiele Buggy. Also wollen wir das schnell machen. Sehen Sie also, wo es heißt, dass die Leichtigkeit immer noch auf 100 Millisekunden festgelegt wurde . Was ist dort ungefähr 200 Millisekunden fällig. Und jetzt sollte das ziemlich schnell geladen werden. Ja, da gehst du. Das wollen wir. Aber fast zu schnell dafür. Machen wir 300 Millisekunden. Okay? Und dann lasst uns das schließen, dies mit dem x. Wenn wir also das x und den nächsten Bildschirm greifen, ziehen Sie es hier auf den ursprünglichen schwarzen Bildschirm. Und ein häufiger Fehler ist, dass Sie es in Bewegung lassen und sehen, was hier passiert. Ich mache es nach unten. Also bewegt es sich nach unten. Und was Sie tun wollen, ist, dass es ausgezogen wird. Aber schauen wir uns an, wie es aussieht denn es ist ein sehr häufiger Fehler, der passiert. Okay, also haben wir die Ansicht, die ziemlich schnell am besten aussieht . Das war eine gute Geschwindigkeit für diesen Übergang. Und was passiert jetzt , wenn x HIT bekommt? Sehen Sie, wie die Seite, The Black Page, die weiße Seite noch einmal nach unten schiebt. Also sieh dir an, wie die schwarze Seite von oben kam. Das ist eine seltsame Interaktion für mobile Geräte. Und was wir hier machen wollen, wenn ich auf das X klicke, ist das, weil es heißt, einzuziehen, du erlaubst, dass der schwarze Bildschirm einziehen kann. Und Figma gibt dir eine kleine Demo wie das aussehen wird. Was wir also tun wollen, ist, dass es ausgezogen wird. Es sagt also, dass der weiße Bildschirm rechts aus dem Weg geht, aus dem Weg geht und welche Art wir definieren möchten, ist auf der rechten Seite. In diesem Fall wollen wir, dass es nach unten geht. Okay, das sollte einwandfrei funktionieren. Also drücken wir den Ansicht-Knopf. Diese Seite gleitet hinein und sieht zu, wenn wir das x machen, sie bewegt sich aus dem Weg und der Bildschirm dahinter bleibt an seinem Standort anstatt von oben zu kommen. Okay, cool. Das deckt so ziemlich das erste Video ab. Und im nächsten Video werden wir die Overlays, die Form, die Modals und die Menüs behandeln . Und wir sehen uns im nächsten Video. Danke, Tschüss. 11. Bonusvideo 2 – Überlagern, Modale und Menüs: Willkommen bei Video 2 der Bonus-Videos, in denen wir Overlays, Modals und Menüs abdecken werden, oder? Kommen wir also zurück in die Akte, an der wir gearbeitet haben. Ich werde hier und wieder nach unten scrollen , was ich mache ist, ich benutze z als Schnelltaste, um den Zoom zu bekommen. Wenn du es siehst, halte ich z gedrückt und klicke und ziehe. Das zoomt mich überall hin, wo ich mich in meiner Art Board ansehen möchte. Und dann benutze ich die Leertaste. Ich halte die Leertaste gedrückt und klicke und ziehe, um mich zu bewegen. Und dann benutze ich , ob du auf einem PC bist , du kannst Control benutzen. Wenn Sie auf einem Mac sind, können Sie den Befehl verwenden, aber ich verwende Command Minus, um aus dem Verkleinern zu wechseln und in Command Plus einzuziehen. Okay, also als Nächstes, schnappen wir uns am Anfang des Prototyps. Überführen wir es zum Beispiel. Und nun schauen wir uns den mehr Workflow-gesteuerten Prototyp an , der es Ihnen ermöglicht, eine Reihe von Bildschirmen nach oben und unten zu eine Reihe von Bildschirmen nach oben und unten bewegen und dann links zu bewegen und nach rechts zu bewegen. Das ist also ein bisschen komplizierter, aber immer noch ziemlich einfach. Mal sehen, wie das aussieht. Was ist Demo es sehr schnell und dann werden wir es schaffen. Okay, genau wie wir es im letzten Video gemacht haben, haben wir eine Rutsche nach oben und dann haben wir eine Folie, oder? Und du wirst es sehen, jetzt ist das x oben rechts. Das ist sehr absichtlich. Und es soll uns helfen, einen Workflow zu erstellen. Und dann erlauben Sie dem Benutzer auch, aus dem Workflow herauszukommen, wann immer er möchte. Was ihr Workflow beginnt, wenn wir Start drücken und warum dieses x oben rechts ist. Sie werden hier sehen, wie Sie sehen, dass der nächste Bildschirm von links hereingleitet. Und wenn ich einen Bildschirm zurückgehen möchte, kann ich hierher zurückkehren. Noch einmal starten wir den Bildschirm zwei Folien hinein. Möglicherweise gibt es einige Einstellungen, die wir eingeben möchten, oder einige Formularfelder , die Sie hier in diesem Workflow eingeben möchten. Und dann gehen wir zu Nummer drei. Angenommen, Sie möchten diesen Workflow abbrechen. Ein paar Dinge, die du tun kannst. Du kannst zurück, du kannst zurück. Sie können das X drücken und jetzt befinden Sie sich wieder auf dem ursprünglichen Startbildschirm. Oder wenn Sie nicht drei Bildschirme zurückgehen möchten, können Sie einfach das x schließen und jetzt sind Sie hier wieder im Workflow. Deshalb ist das X oben rechts, weil es uns hier Immobilien für den Zurück-Button oben links gibt . Also nochmal gehen wir durch den Nummernbildschirm 3, Bildschirm für hier. Und wir schließen den Workflow hier ab. Und wenn du X raus willst, boom, x out irgendwann. Okay, also lasst uns diese Interaktion noch einmal machen. Schnappen wir uns den Anfang und ziehen wir ihn auf die Bildschirmserie neben Ihnen. Ich zoome ein bisschen hinein. Lasst uns den Ansicht-Button greifen. Und nochmal, lasst uns einen Prototyp machen. Stellen Sie sicher, dass Sie sich auf der Registerkarte Prototyp befinden. Schieben Sie den Prototyp-Arm hier rüber und Sie sehen bereits, dass er für Sie voreingestellt ist. Also wollen wir an der Spitze, wir wollen nicht ausziehen. Wir wollen einziehen. Aber mal sehen was ist, mal sehen, wie das aussieht. Zieh aus und du kannst manchmal sagen , dass es etwas komisch aussieht. Okay, also siehst du, wie der letzte Bildschirm, dieser schwarze Bildschirm hier, nach oben gegangen ist. Und das wollen wir nicht, das ist eine seltsame Interaktion. Wir möchten, dass dieser weiße Bildschirm eine Art Sandwich-Layer über dem Startbildschirm befindet. Und das liegt daran, dass wir „ Ausziehen“ ausgewählt haben. Wenn wir also einziehen, wird das großartig funktionieren. Also schauen wir uns das an. Okay, das wollten wir. Und jetzt holen wir uns das x und spielen, wo wir das X rüberschieben und losziehen können . Und wieder wollen wir nicht, dass es hier hochgeht. Und Sie können manchmal sehen, dass Sie vergessen haben, den Abwärtspfeil zu machen. Und es könnte ungefähr so aussehen. Sieh dir an, wie es sich bewegt hat Das ist sehr, sehr seltsam. Wir möchten, dass es dieselbe Interaktion wiederholt , die diesen Bildschirm präsentiert hat. Also wieder ging es nach oben. Wir wollen diese Interaktion wiederholen und rückgängig machen. Wir wollten wieder nach unten gehen. In diesem Fall möchten wir also den Prototyp für das x auswählen und ihn nach unten bewegen. Und Bada Bing, bada, boom. Okay. Das nächste ist, dass wir den Workflow hier starten möchten . Schnappen wir uns diesen Knopf. Lass uns zur Nummer zwei gehen. In diesem Fall wollen wir nicht ausziehen, wir wollen im Bildschirm wechseln und wir möchten, dass er von links hereinkommt. Und Sie können sehen, dass Sie einziehen und wir haben die Linke hier. Und schauen wir uns das an. Also haben wir View. Ich fange diesen Prototyp an und die beiden rutschen von links hinein. Sehr nett. Okay, und dann der gleiche Deal. Schnappen wir uns hier den Zurück-Knopf und ziehen wir ihn auf den einen. Und was wir hier tun wollen, ist, dass dies nach rechts geht, und wir haben den gleichen häufigen Fehler , der passiert , ist , dass wir ihn verlassen und einziehen und nicht ausziehen. Und du wirst sehen, was hier passiert, wenn ich den Zurück-Pfeil drücke. Sehen Sie, wie sich der eine Bildschirm eingezogen hat. Das wollen wir nicht. Wir möchten, dass die beiden Bildschirme hier dieselbe Interaktion wiederholen und umkehren , in der sie in Sicht kam. Kehren Sie es einfach um. Wir wollen wieder raus. Aber im Moment sieht man die hereinkommen. Das liegt daran, dass wir es gelassen haben, ziehen Sie ein. Also lasst uns weitermachen und es hier rausziehen. Und jetzt sehen Sie die richtige Interaktion in die die Nummer zwei Folien verschoben werden. Wenn du die Zurück-Taste machst , zitiert er wieder heraus. Okay? Und dann habe ich auch einen ziemlich transparenten grauen Balken hier. Man sieht, dass es so aussieht. Und es ist aus einem bestimmten Grund transparent , weil Sie nicht möchten, dass der Benutzer es sieht. Wir möchten dies nur als Prototyp-Mechanismus verwenden , damit der Benutzer dieses Foto oder diesen Bildschirm aus dem Weg ziehen kann. So üblich. Wenn Sie auf einen Bildschirm mit einer Zurück-Taste gehen, Leute auf Ihrem Mobilgerät häufig Ihrem Mobilgerät wischen die Leute auf Ihrem Mobilgerät häufig auf diesem Bildschirm aus dem Weg. Und das ist es, was das hier darstellen wird. Ich werde es ein bisschen größer machen nur damit du es sehen kannst. Und was wir also wollen, wir wollen nicht, dass dies auf den Interaktionsdetails hier steht. Also schieben wir es zurück, dieses transparente Quadrat zurück zu eins. Wir wollen nicht per Fahn, wollten aber eigentlich hier ziehen. Und wir wollen die gleiche Animation, die wir nach rechts ziehen wollen . Wenn ich es jetzt als Benutzer machen kann, kann ich die Zurück-Taste drücken , damit wir zu einem zurückkehren. Oder ich ziehe, indem ich auf den Prototyp klicke, deinen Finger an deinem Handy halte und diesen Bildschirm aus dem Weg ziehe, um zu sehen, wie das dort funktioniert hat. Cool. Das ist also gut ausfüllen. Dies füllt sich wie ein echter Prototyp, wie eine Wheel Apple-Anwendung. Du drückst die Zurück-Taste, gehst wieder nach unten und kommst in den Workflow. Sie können klicken und ziehen, um dies zu wischen. Und jetzt lassen Sie uns den Rest dieser Prototypen einbauen. Was wir hier tun können ist, dass wir das x und alle diese Bildschirme haben, aber das x wird dich wirklich nur zurück zu diesem Startbildschirm bringen. Eine neue Funktion für Figma ist jetzt , dass Sie mehrere Zeichenflächen einfügen können. Was ist also die Achsen in diesen anderen Bildschirmen zu löschen? Schnappen wir uns das x. Und wenn du auf einem PC bist, ist es Control C, wie in Kat. Wenn du auf einem Apfel bist, dann ist es Command C. Und lass uns alle drei auswählen. Ich bin auf einem Mac und gehe zu Command V, wie in Victor. Oder wenn Sie auf einer PC-Steuerung sind V. Und es wird das x automatisch auf allen drei Bildschirmen platzieren das x automatisch auf allen drei , wobei die Interaktion, die wir wollen , die auf den Startbildschirm zurückgeht. Okay, und von hier an ist es ziemlich einfach, dass wir einfach den nächsten Button zur Nummer 3 gehen lassen. Wenn wir sicherstellen wollen, dass es auf dem Fass ist, wollen wir einziehen. Und wir möchten, dass dieser Bildschirm von links einzieht. Und dann dasselbe mit dem Zurück-Knopf. Wir möchten hier vom Bildschirm 3 zurück zu Nummer 2 gehen. Und wir wollen ausziehen und nach rechts. Also wird der Bildschirm wieder von links hereinkommen und dann nach rechts gehen. Dasselbe für 34. Wir machen den nächsten Button zum Vorderbildschirm. Können wir wollen, dass es von links einzieht ? Und wenn der Zurück-Pfeil von Bildschirm Nummer 4 zu Nummer 3 geht , möchten wir, dass er nach rechts geht. Alles klar, das sollte vollständig sein. Schauen wir es uns an. Also haben wir die Ansicht, der Bildschirm gleitet nach oben. Wir haben den Anfang. Drücken Sie Weiter, erhalten Sie Nummer 3. Drücken Sie F4 geht zu Nummer Vier. Sie können kündigen. Close x, geht zurück zum Startbildschirm. Sie können den Workflow erneut starten. Gehe Nummer 4, oder du kannst zurück gehen, zurück. Sogar im Fall Nummer 2. Sie können mit dem Wischen und X drücken, und Sie sind hier wieder am Bildschirm. Cool, das hat Spaß gemacht. Kommen wir zum nächsten, nämlich mobilen modalen Dropdowns. Also werde ich diesen Startbildschirm umschließen, damit Sie schnell das Beispiel sehen können , wie das funktioniert. Drücken Sie hier die Wiedergabetaste. Und das ist also ein Dropdown-Menü für mobile Geräte. Wenn wir also sagen, ich möchte meine Lieblingsfarbe auswählen, klicken Sie auf dieses Dropdown-Menü und Sie sehen hier eine Menüpunkte. Und sagen wir, ich wähle hier rot aus. Dann wirst du sehen, dass es hier mit Rot besiedelt ist. Drücken Sie das X und gehen Sie zurück zur Farbe auswählen. Mach die gleiche Route. Ich kann irgendwo außerhalb dieser Dropdown-Auswahl klicken oder hier irgendwo außerhalb dieser Dropdown-Auswahl tippen und es schließt sie. Okay, also lasst uns weitermachen und den Start zu den Bildschirmen bringen, die besagt, dass du es tust. Was wir hier machen werden, ist, dass ich zum obersten Zeichenflächen-Tool gehe , in dem Frame steht. Und wenn Sie mit diesem Tool arbeiten, ob Sie sich auf der Registerkarte Design oder auf der Registerkarte Prototyp befinden. Sie können auf diese Weise klicken, um verschiedene Größen und Geräte zu erstellen verschiedene Größen und Geräte für die Sie entwerfen würden. In diesem Fall sind wir Bildschirmgrößen und -maße iPhone 11 x. Also lasst uns weitermachen und darauf klicken. Und es wird einfach automatisch eine Zeichenfläche auf Figma ziehen . Und jetzt müssen wir dieses Kunstbrett einfach von oben nach unten verkleinern . Wir möchten die gleiche Breite beibehalten, aber wir möchten die Oberseite nach unten bewegen, also sind es etwas mehr als drei, etwas mehr als oder etwas weniger als die Hälfte der Zeichenfläche nach links. Und was wir tun, ist, wenn Sie einfach oben klicken und nach unten ziehen. Wir werden sagen, dass das gut aussieht. Okay, was ich tun werde, ist, dass ich einige der Elemente hier von oben auswähle . Lass uns einfach auswählen, mach dir keine Sorgen um die Zeilen. Wählen wir einfach den gesamten Text hier aus. Drücken Sie Command C. Oder wenn Sie sich auf einem PC Control C befinden, wähle ich die Zeichenfläche hier aus. Und wieder Kommando oder Control V wie in Victor zu platzieren. Okay, das sieht gut aus. Jetzt denke ich, dass wir alle Teile haben, die wir brauchen würden. Okay, also was wir hier machen werden, ist, dass wir auf das Dropdown-Menü klicken. Schnappen Sie sich einfach das ganze Element, drücken Sie den Prototyp und ziehen Sie es erneut auf diese Kunsttafel. Und Sie werden die Interaktion sehen, das Dialogfeld Interaktionsdetails hier. Wir wollen die Aktion für ungerade tippen. Das ist die Funktion , die wir erstellen möchten. Aber den Mechanismus hier wollen wir ändern. Anstatt also dorthin zu navigieren , wo es offenes Overlay sagen soll. Und sobald Sie Overlay haben, erhalten wir unsere Overlay-Optionen, und wir werden hier in den nächsten Videos oder Prototypen hier auf diese Optionen eingehen , gleich danach eins wir machen das Modal, aber im Moment wollen wir unten zentriert sein. Wir möchten das Klicken beim Schließen aktivieren, wenn Sie nach draußen klicken oder nach draußen tippen. Das bedeutet, dass jeder der darüber liegenden Bereiche geschlossen wird. Und wir möchten auch ein Hintergrund-Overlay hinzufügen. Es ist standardmäßig Schwarz, was am häufigsten vorkommt. Und wir können es sogar dunkler machen. Wir können hier eine Deckkraft von 50 Prozent erreichen. Und dann wollen wir für die Animation hier stattdessen nicht. Aber schauen wir uns einfach an, was wir bisher erstellt haben, damit Sie sehen können, wie Instant funktioniert. Ich werde alles entfernen, Sie können sehen, dass dieser hier oben noch einen Prototypenarm mit dem Kunstbrett verbunden hatte einen Prototypenarm mit dem Kunstbrett verbunden . Klicken wir einfach auf und entfernen es vorerst. Okay, also wählen wir dieses Kunstbrett mit dem Startlabel aus. Drücken Sie die Wiedergabetaste und Sie werden sehen, dass wir das Dropdown-Menü hier haben. Und wenn du es schließt, verschwindet es. Aber es gibt keinen Übergang, oder? Es ist sofort. Und wir wollen hier einen Übergang haben. Wenn wir also die Interaktionsdetails des Prototyps erneut auswählen und Sie sehen, wo Animation steht, möchten wir dasselbe verwenden, das wir gerade auf dem letzten Bildschirm gelernt haben. Wir wollen, dass diese sich in Animationen bewegen. Und von diesem wollen wir nicht, dass links nach rechts, wir wollen, dass es nach oben geht. Und wenn Sie dann automatisch außerhalb des Overlays klicken, wird dies für Sie rückgängig gemacht. Es wird also aus dem Weg und nach unten gehen, wenn Sie außerhalb klicken. Gehen wir also zurück zum Prototyp hier. Wählen Sie das Dropdown-Menü aus und los geht's. Du siehst, wie das hochgerutscht ist. Und wenn Sie außerhalb davon klicken, wird diese Interaktion automatisch für Sie rückgängig gemacht. Cool. Das ist also ziemlich einfach dort. Und jetzt lass uns einfach gehen. Sag, wir wollen Rot. Lasst uns hier drüben klicken. Und auf Hahn wollen wir keine der Animationen hier. Ein Augenblick ist in Ordnung. Und jetzt wählen wir hier das x aus, um es mit dem Startbildschirm zu verbinden, damit Sie diese Auswahl einfach entfernen können. Einfach sofort ist es auch in Ordnung. Und jetzt haben wir eine vollständige Dropdown-Auswahl für ein mobiles Gerät. Klicken Sie auf SlideUp-Menü erscheint, Sie möchten rot. Rot taucht auf. Drücken Sie X, können Sie alles noch einmal machen. Okay, cool. Lasst uns mit dem nächsten übergehen. Ganz ähnlich. Dies wird das Modal sein. Und ich werde diesen Start hier unten auf das Beispiel verschieben . Schauen wir uns das ganz schnell an. In Ordnung, also haben wir einen Knopf gedrückt, der Text hier, und Sie werden sehen, dass er hoch steht und wir können ihn schließen. Also nur eine modale Interaktion für ein mobiles Gerät. Und lassen Sie uns das Start-Prototyp-Label auf das Etikett verschieben , auf dem Sie es tun. Lassen Sie uns diesen Texttest ändern. Sag einfach, ich weiß nicht, dass es Open sagt. Also habe ich einfach hingeklickt. Ich drücke T auf meiner Tastatur. Das gibt mir das Textwerkzeug. Sie klicken, sobald es ausgewählt wird, wenn Sie klicken, wenn Sie zweimal auf ein paar klicken, wählt ein automatisch alles aus. Also kann ich noch einmal dreifach klicken und wieder öffnen eingeben. Okay, sagen wir mal, ich habe das Modal hier wieder aufgebaut, aber lasst uns das einfach löschen. Fangen wir hier von vorne an. So das Gleiche. Ich komme hier zum Rahmen. Frame-Werkzeug oben links, ich wähle iPhone Pro X wird mir eine Zeichenfläche geben. Und was ich hier machen werde, ist diesen Art-Board-Rahmen zu nehmen. Ich werde es ein bisschen weniger groß machen. Also klicke ich von oben, lass es uns hier runter verschieben. Aber in diesem Fall möchte ich es auch weniger breit machen . Es fungiert also als Modal. Es deckt nicht das gesamte Telefon vom vertikalen Raum nach links und rechts ab, aber es passt irgendwie in die Mitte des Telefons. Okay, das ist also schon ein guter Anfang. Und was wir tun wollen, ist , dass wir zur Registerkarte Design zurückkehren möchten. Und lasst uns weitermachen und diese Ecken abrunden. Du siehst also, wo Frame steht. Ich werde die Ecken abrunden , indem ich sage, sagen wir 20. Okay? Nicht und du willst normalerweise nicht zu schwer werden, als würdest du keine Ecken haben wollen, die so sehr abgerundet sind. Du willst einfach nur schöne dezente abgerundete Ecken. 20 sollten also perfekt sein. Okay, und um dann zum Prototyp zu gelangen, was ist los und klicke auf die Schaltfläche „Öffnen“. Schieben wir den Prototypenarm hier rüber zu diesem Kunstbrett. Und lass uns weitermachen und das per Fahn anrufen. Und ähnlich wie wir es getan haben, bevor wir zu navigieren gingen, werden wir dies in ein offenes Overlay ändern. Und jetzt, anstatt unten zentriert zu sein, wie wir es zuvor getan haben, lassen Sie uns zentriert sein. Und lasst uns gehen und schließen, wenn wir nach draußen klicken. Was ist auch fügen Sie ein Hintergrund-Overlay hinzu. Wir können es hier bei 25 pro se behalten. Und nochmal, lasst uns nur eine auflösende Interaktion machen. Wir müssen es nicht einziehen lassen oder ähnliches. Okay, das sollte gut aussehen. Lasst uns weitermachen und sehen, wie das auf dem Prototyp aussieht. Drücken Sie Open, okay, und wir haben ein Modal. Lass uns weitermachen und es schließen. Öffne und schließe. Alles klar, das sieht gut aus. Lassen Sie uns hier einige der Teile zu diesem Modal hinzufügen. Ich werde dieses Hoch kopieren, und ich wähle die Zeichenfläche aus, füge das Hoch hier ein und zentrierte es einfach, wenn du willst. Und ich klicke auch hier auf das X, füge das x ein und entferne diese Interaktion. Eine andere Möglichkeit, den kleinen GUI-Arm hier zu entfernen , klicken Sie mit der rechten Maustaste auf eine Kunsttafel und sehen Sie, rechten Maustaste auf eine Kunsttafel wo es heißt Interaktionen entfernen. Dadurch werden alle Interaktionen nur auf dieser Kunsttafel entfernt. Lasst uns weitermachen und dieses x oben rechts setzen. Ziehen wir es zum Ausgangspunkt dieser Kunsttafel. Und lasst uns weitermachen und beim Fass sagen, auflösen, das sollte perfekt funktionieren. Und es wird dieses Modal für uns einfach schließen. Drücken Sie X und wir sind wieder da. Also öffne und schließe. Und Sie können auch irgendwo außerhalb des Modals tippen und es auch schließen. Okay, so macht man ein Modal. Ziehen wir den Startpunkt auf den unten stehenden Punkt. Und schauen wir uns ein Menü an, das aus der Titelleiste kommt. Und dies ist eine sehr, sehr häufige Interaktion, die Sie in vielen mobilen Geräten finden werden. Also klicke ich hier auf die Zeichenfläche. Ich drücke R auf meiner Tastatur, das bringt mich zu dem Bildschirm, auf dem sich das Startlabel befindet. Und Sie werden sehen, dass sich oben in dieser Titelleiste ein Hamburgermenü oder ein Hamburger-Symbol befindet . Ich habe die Titelleiste repariert. Sie können also sehen, dass ich alles hier oben ausgewählt habe. Und ich habe beim Scrollen repariert. Was das wieder tun wird, ist, dass es einfach oben bleibt , während der Benutzer scrollt und es bleibt fest. Es bewegt sich nicht, während der gesamte Inhalt, wie die Zahlen 1, 2 und 3, scrollen wird. Du wirst also sehen , wie das unten scrollt. Und du wirst sehen, dass die Speisekarte reinkommt. Also klicke ich auf das Menüsymbol und das Menü gleitet von links nach rechts ein. Wenn ich außerhalb drausklicke, schließt es es. Ziemlich coole Interaktion. Lass uns gehen und es bauen. Also klicke ich erneut auf den Tab Prototyp. Und ich ziehe den Startabschnitt auf den Abschnitt , der besagt , dass du es tust. Ich verschiebe den ganzen Text ein bisschen hierher. Das werden wir in einer Sekunde brauchen. Also lösche es nicht. Klicken Sie auf das Zeichenflächen-Tool. Und lassen Sie uns fortfahren und erneut einen Klick auf das Zeichenflächenwerkzeug fallen . Was ist Dürre? Habe ein iPhone Pro X hier fallen gelassen. Und in diesem Fall wollen wir es gleich machen. Wir können es genauso groß wie der Bildschirm machen. Nach links. Es sollte in Ordnung sein. Aber wir wollen nicht, dass es die gleiche Breite hat. Wir wollen, dass es etwas dünner wird. Sagen wir also, hier ist gut. Und was wir hier tun können. Wenn wir also hier zur Registerkarte Design gehen, haben Sie eine Füllfarbe. Wenn Sie also die Zeichenflächenebene auswählen, können Sie die Kunsttafel mit allem füllen , was Sie füllen möchten. Sie können es sogar vollständig transparent machen. Ich könnte 0 drücken und es ist vollständig transparent, unser Board, oder ich kann hineingehen und eine Farbe auswählen. In diesem Fall weiß ich, dass es fällig ist, muss das Blau machen. Du kannst jede Farbe machen, die du willst, ist nicht wirklich deine Welt. Du kannst alles machen. Ähm, aber für dieses Beispiel machen wir blau. Nur zum Spaß, es ein bisschen zu ändern. Und lasst uns weitermachen und diesen Text ins Menü ziehen. Hier. Bewegen Sie es ein wenig nach unten. Okay, Cool. Also haben wir unser Menüdesign hier. Wählen wir das Hamburgermenü-Symbol aus. Und ziehen wir das auf das Menüdesign, das wir angeführt haben. Und dann wieder Speicher , wohin es heißt navigieren. Also haben wir das auf dem Fass ist gut. Navigieren Sie dorthin, wo Sie es ändern möchten , um in diese Overlays zu gelangen. Und nochmal, öffne Overlay, genau wie zuvor. Und anstatt zentriert oder unten zu sein, wollen wir, dass es von oben links kommt. Also diese Mitte oben links hier. Gleiche Funktionen, die wir beim Klicken nach draußen schließen wollten . Und wir möchten eine Hintergrundfarbe dahinter hinzufügen. Und wieder wollen wir uns nicht auflösen oder sofort auflösen lassen. Also können wir es vorerst sofort behalten und sehen, wie es aussieht. Aber das werden wir hier in einer Sekunde ändern. Okay, da ist die Speisekarte gekommen. Wir können außerhalb drausklicken und schließen. Aber Sie können sehen, dass ein keinen Übergang hatte. Es ist einfach sofort aufgetaucht. Fügen wir also den Übergang hinzu, damit er einziehen kann. Also nochmal, wenn wir von der Animation hier ausgehen, lassen wir sie einziehen. Und wir wollen, dass dies von links kommt. Also links wird gut sein. Okay, tut mir leid, wir wollen, dass es von rechts kommt. Wo auch immer sich die Position des Menüs auf der linken Seite befindet, wir möchten, dass es von rechts von hier kommt. Und wenn du dich jemals verirrst, macht Figma das in diesem kleinen Beispiel. Es zeigt Ihnen, dass dieser Bildschirm dieser neue Bildschirm ist, den Sie hier prototypisieren werden, über den Bildschirm gleiten wird , auf dem Sie sich befinden. Okay, schauen wir uns das an. Das sollte vollständig sein. Drücken wir also R auf der Tastatur klicken Sie auf das Hamburger-Symbol. Und es rutscht rein. Schliessen Sie hier. Rutscht raus. Okay, cool. Also los gehst du. Dort hast du ein Menü. Und das schließt dieses Video ab. Und die nächste Reihe von Videos hier werden wir uns die intelligente Animate-Prototyp-Funktion ansehen, um die intelligente Animate-Prototyp-Funktion einen coolen Look und Loader zu schaffen. Und wir führen horizontales und vertikales Scrollen durch. Wie immer. Danke, und wir sehen uns im nächsten Video. Tschüss. 12. Bonusvideo: Willkommen bei Video 3. In den Bonus-Videos werden wir Smart Animate behandeln. Wir werden einen Loader bauen, einen Screenloader mit smart animate. Und wir schauen uns das horizontale und vertikale Wischen und Scrollen an. Alles klar, also lasst uns weitermachen und zurück zur Akte hier. Ich drücke die Befehlsperiode, die alle meine Abb, Abb, meine Schnittstelle zeigt. Das mache ich hier. Drücken Sie Befehlsperioden, um alles zu entfernen, Befehlszeitraum, um alle meine Interface-Tools in Figma zu sehen . Gehen wir dorthin, wo wir aufgehört haben, was dieses Menü aufbaute. Schnappen wir uns den Starterpunkt hier drüben. Und schauen wir uns einfach schnell das Beispiel für smart animate an. Was also animierter ist, animiert es im Wesentlichen Ihre Bildschirme , um den nächsten Bildschirm anzuzeigen. Und das haben wir in der letzten Videoserie behandelt. Ich werde es nur kurz ansprechen. Es gibt ein paar Dinge. Die häufigen Fehler, die ich immer wieder durch die Verwendung von smart animate gefunden habe , die ich nur hervorheben möchte , und einige kurze Tipps für Sie. Drücken Sie auf der Tastatur R. Aber auch hier haben wir diesen Kreis prototypisiert. Und Sie können sehen, wie es geht, und es geht zum nächsten Bildschirm mit dem größeren Kreis. Und wenn Sie auf den größeren Kreis klicken, klickt er und geht wieder nach unten. Also sehr, sehr reichhaltige Animation für wirklich einfache Technik zu machen. So hohe Ergebnisse, einfach zu machen. Was wir also tun werden, ist dieses Startlabel zu dem Abschnitt zu bringen, den Sie machen. Alles, was wir buchstäblich tun müssen, ist diesen Kreis zu greifen ihn auf den Bildschirm neben der rechten Seite zu prototisieren. Und anstatt einzuziehen, drücken wir einfach smart animate. Und es wird die ganze Arbeit für uns erledigen. Und lasst uns weitermachen und hier auf diesen Kreis klicken, zurückziehen und intelligent animieren. Und Sie können sehen, dass diese Interaktion hier und hier schnell stattfindet. Sie können die Übergangsgeschwindigkeit steuern. Wenn wir also zu dem hier zurückkehren, nehmen wir an, es sind 800 Millisekunden und Sie werden sehen, dass es einen niedrigeren geben wird. Und in den Klamotten wird schneller gehen. Sie können die Farbe sogar ändern, wenn Sie möchten. Lassen Sie uns zum Design übergehen. Lass es uns hier von rosa Süßigkeiten zu diesem blauen ändern. Und Sie werden sehen, dass es auch langsam die Farben ändert. Großartig, ziemlich cool. Okay. Eine andere übliche Sache, die ich nur kurz ansprechen möchte ist ein Fehler, der ziemlich oft passiert. Ich ziehe das in die Länge. Du musst mir dabei nicht folgen. Ich möchte es nur zur Anmeldung aufrufen und mich hier einloggen, das passiert. Okay, also spiele ich das weiter. Dies ist die Sache, die Sie vermeiden sollten. Und ich zeige Ihnen zuerst, dass das Problem hier ist, wenn ich auf Login tippe, werden Sie sehen, wie es keinen Übergang gab. Es gab kein Rutschen dieses rosa Dreiecks auf den Anmeldebildschirm. Und was wir wirklich wollen ist etwas, das hier eher so aussieht , wo ich über diesen Bildschirm kopieren werde. Ich hole mir die Login-Daten, lösche das aber alles. Ich werde halten, ich werde die Anmeldetexte abrufen, fett drücken, Befehl B fett drücken, um es zu fett zu halten, mache es zu 100 Prozent. Und ich werde weitermachen und einen weiteren Befehl B machen , um unfett zu sein, mach dies zu einer leichten Schriftart. Und ich nehme hier das gleiche Rechteck, und hier ist der Schlüssel. Ich hole das gleiche Rechteck vom letzten Bildschirm und schiebe es um mich anzumelden. Und jetzt, wenn wir auf diesen Bildschirm einloggen und die Anmeldung wieder auf diesem Bildschirm anklicken auf diesen Bildschirm einloggen . Alles mit smarten Animaten. Du wirst Logans kluges Animate sehen. Wenn ich auf „Registrieren“ klicke, gehe zurück, um mich beim Smart Animate anzumelden. Sie werden sehen, dass der Übergang viel besser ist. Sehen Sie also, wie dieser Übergang sehr klug vorbei ist. Was hier passiert ist, wenn ich den Anmeldebildschirm kopiert habe und dieses Rechteck gelöscht habe und ein neues erstellt habe. Das Tolle hier. Das ist es, was das Problem hier verursacht. Sie werden also sehen, wenn ich mich wieder anmelde, geht es nicht um. Und weil Figma vorher, wenn Sie hier dasselbe Rechteck verwenden, dieses Rechteck als dasselbe Rechteck identifiziert , das Sie dem Anmeldebildschirm verwenden. Es weiß es also. Sie sagen, ich möchte, dass dieses Rechteck mithilfe von smart animate auf diese Seite der Zeichenfläche übergeht mithilfe von smart animate auf diese Seite der Zeichenfläche Wenn Sie ein neues Rechteck zeichnen, unterscheidet es hier nicht zwischen dem rosa Rechteck sollte das graue Rechteck hier behandelt es seinen Kopf als zwei verschiedene Elemente. Es ist also wirklich wichtig, wenn man dieses Konzept durchsteht. Also gehe ich ein bisschen zurück zu Command Z. Sie können also sehen, ich sage Figma während dieses Prototyps hier, dass er intelligent auf diesen Anmeldebildschirm animieren soll. Dass ich das gleiche Rechteck hier haben will, also gibt es an, dass es heißt, oh, es ist Anmeldung, dieses Rechteck lebt hier. Und loggen Sie sich ein. Das gleiche Rechteck wohnt hier drüben. Und ein kluger Animat wird seine Arbeit erledigen, um die Animation zu machen, um sie hierher zu bewegen. Aber wenn es etwas Neues ist, das Sie gezeichnet haben, bricht es die Beziehung , die Sie hier haben. Und eine andere Sache, die manchmal während Smart Animate passiert , ist, dass Sie feststellen werden , dass etwas einfach los ist, komisch wird. Mal sehen. Normalerweise sehen Sie Elemente wie das Fliegen um den Bildschirm, wie zum Beispiel, dieser Augapfel fliegt hinein oder das Bokeh macht etwas anderes. Es ist schwer zu reproduzieren, weil es hin und wieder passiert , werden Sie einige seltsame Funktionen sehen, aber die intelligenten Animate. Und so ist der Trick, smart animate house, um viel mit der Gruppierung zu tun. Wenn Sie also sehen, dass einige seltsame UI-Elemente um den Bildschirm fliegen, nehmen Sie den ersten Bildschirm und gruppieren Sie alles. Sagen wir also, dass keiner von diesen hier gruppiert wurde. Machen Sie weiter und führen Sie einen Befehl aus G, oder Sie können ein Objekt und eine Gruppe machen, die ich tun werde, oder wenn Sie auf einem PC Control G sind, gruppiere ich alle Elemente hier und gruppiert so ziemlich alles, was nicht das ist, was du animieren willst. Fassen Sie die Tasten an. All dies können Sie sogar gruppieren, die Schaltfläche und die Formularfelder. Und fangen Sie einfach an, Dinge zu gruppieren. Und ich verspreche, wenn Sie mit der Gruppierung beginnen, werden Sie die Animation oder das Ding bemerken. Das Element, das Sie animieren möchten , wird viel besser animieren. Also nur ein kleiner Trick, wenn Sie Probleme mit der intelligenten Animate-Funktion haben und diese nicht richtig animiert wird, beginnen Sie mit der Gruppierung von Elementen. Und, und Sie werden hoffentlich eine Veränderung feststellen. Okay, lass uns jetzt ein bisschen Spaß haben. Bauen wir diesen Loader hier aus. Also bringe ich das Startlevel auf den Bildschirm unter dem Laden. Ich drücke auf Play. Und was wir bauen werden, ist etwas, das so aussieht. Du siehst also, dass es geladen wird. Und dann hast du einen Übergang von der Titelleiste hier oben auf der Karte. Okay, also lass uns gehen, lass uns das machen. Auf dem, der sagt, dass du es tust. Lasst uns den Anfang schnappen. Lass uns das hier drüben machen. Und das ist ganz einfach. Wir möchten diese Seite nur kopieren. Ich wähle einfach das Kunstbrett aus. Ich bin hier. Sie werden Command machen oder tut mir leid, Option. Und das wird dieselbe Kunsttafel hierher kopieren und ziehen. Oder ich mache einen Befehl C und Command V, wie in Victor, und das wird ihn einfügen. Ich werde dieses Start-Label entfernen. So können Sie auf dem Prototyp sehen, dass Flow-Startpunkt steht , starten Sie einen, drücken Sie einfach das Minuszeichen hier, sehen Sie, wo Startpunkt löschen steht und löschen Sie es. Und wir wollen uns das nur schnappen. Wenn ich zur Registerkarte Design gehe und die pinke Ladeleiste schnappe und bewege sie einfach ganz nach oben. Und hier werden wir die Delay-Funktion kombinieren , von der wir gerade gelernt haben. Also wählen wir den gesamten Prototyp, die gesamte Zeichenfläche aus, klicken und ziehen ihn hier zum Ladungsteil. Und wieder wollen wir nicht tippen, wir wollen nach Verzögerung. Und lasst uns eine kleine Verzögerung machen. Machen wir ungefähr 100 Millisekunden. Und wir wollen das smart animate, aber wir wollen eine längere Leichtigkeit oder längere Verzögerung. Also lasst uns das tun, lasst uns 20 Tausend Millisekunden bis Sekunden machen . Also zwei Sekunden Art von Ladezustand. Lass uns die Play-Taste drücken. Und Sie sollten diese Interaktion hier sehen. Wir haben nichts definiert , was nach diesem Bildschirm passiert. Alles, was Sie sehen sollten, ist nur das Laden passiert. Also nochmal haben wir den Startbildschirm hier aufgenommen. Wir haben es so eingestellt, dass es mit weniger als einer Sekunde sehr schnell geht, es wird auf diesen Bildschirm geladen. Und dann macht es die sanfte Verzögerung und überträgt das rosa Rechteck vom Anfang dieses Bildschirms zu den Ameisen. Das ist also die intelligente Animation, die Smart Animate macht seine Magie. Und das Gleiche. Wir wollen weiter und schauen uns den Bildschirm hier an. Und wir wollen das hier rüber ziehen . Und das gleiche Geschäft, das wir nach Verzögerung wollen, sehr langsame oder sehr schnelle Verzögerung, also 100 Millisekunden. Und wir können auch ein intelligentes Animate machen. Und so wirst du jetzt sehen, wenn du das anfängst, dann lädt die San Francisco-Karte mit der Titelleiste oben und der Navigationsleiste unten. Okay, aber lasst uns hier etwas Spaß haben. Wenn Sie sich also an den letzten Prototyp erinnern, sehen Sie eine Verzögerung, Sie werden einen Übergang sehen. Wie die Titelleiste dort nach unten wechselt. Es ist so nach unten gerutscht. Das ist ein ziemlich cooler Übergang , bei dem Sie den sehen können, den wir gemacht haben . Das hat es nicht getan. Es lädt einfach die Map und Sie können sehen, wie sie sich auflöst. Lasst uns also weitermachen und dafür einen Übergangszustand schaffen. Das ist ein kleiner Hack , den du benutzen kannst. Also nochmal, wir haben nach Verzögerung smart animate. Und was wir tun wollen, ist, dass wir zuerst den Titelleistenbereich hier auf diesem Bildschirm greifen wollen. Und legen wir es hier auf den Ladebildschirm. Und lasst uns auch diesen Navbar-Abschnitt greifen und ihn in diesen Bildschirm legen. Also Befehl V, also drücke ich nur Befehl C. Wenn ich diese Elemente habe, wähle hier die Kunsttafel und drücke Befehl V. Jetzt wähle ich dieses Grafikelement hier aus, die Navigationsleiste oder die Titelleiste. Ich halte die Umschalttaste und ich gehe nach oben und bewege es einfach aus dem Weg. Sie können nicht einmal sehen, dass es schwierig wird, es auszuwählen. Wissen Sie, es ist da, wenn Sie Ihre Auswahl anklicken und ziehen. Und ich mache das Gleiche für die Navigationsleiste unten. Und dann bewege es einfach aus dem Weg, damit du sehen kannst, dass es immer noch da ist. Was wir Figma sagen, ist, dass auf dem nächsten Bildschirm mit dem Smart Animate diese beiden Formen erkennen und diese Form nach unten bewegen, diese beiden Formen erkennen und diese Form nach unten bewegen um hier auf dem Kartenbildschirm in Position zu gelangen. Okay, schauen wir uns den Prototyp an. Sehen Sie, wie es so ein bisschen langsamer Übergang ist. Aber ich denke jetzt sind wir einfach cool. Sehr nett. Alles klar, also ein kleiner Hack dort auf der intelligenten Animate-Funktion. Okay, schauen wir uns schnell etwas Schweben und ein paar drückende Übergänge. Also auf dem Prototyp, schweben Sie so ziemlich. Wenn Sie mit der Maus darüber fahren, sehen Sie den Punkt. Es gibt keinen Hover - und Mobilgeräte. Das ist also nur für Sie, um zu sehen, wie Hover als Prototyp funktioniert. Sie würden dies nur für Desktop-Websites und das Design von Desktop-Anwendungen verwenden . Aber du kannst es hier sehen und hier lernen. Das nächste, was wir hier tun werden ist eine dringende Interaktion, die ich Ihnen hier zeige und wir werden uns darauf einlassen. Und das funktioniert sehr gut für vier Graphen. Sie können also sehen, dass ich hier eine Grafik habe und ich möchte diesen Graphen drücken oder schrubben. Und wenn ich tippe und halte, sehe ich die Details für 2016. Nehmen wir an, wir messen hier Umarmungen. 2016 gab es 513 Umarmungen. Das ist ziemlich genial. Es bedeutet, dass du mehr als eine Umarmung pro Tag hast. Und er könnte genau wie das funktionieren würde , wenn Sie einen Ingenieur hinzufügen. Sie können einfach Ihren Finger über die Grafik schrubben und die Details auf jeder dieser Ebenen hier sehen können . Alles klar, gehen wir zurück zur Akte. Lasst uns den Startpunkt zu dem bringen, der sagt , dass du es tust. Ganz einfach hier. Wähle einfach den Kreis hier aus. Halten Sie es auf Smart Animate, weiß statt auf Hahn, wir wollen beim Schweben. Geh in den Prototyp. Und Sie können sehen, wenn Ihre Maus sie betritt, ändert sie die Farbe etwas zu langsam von einer Verzögerung. Also schauen wir uns diese Verzögerung hier an. Ja, also 200 Millisekunden, ändern wir es hier wieder auf nur 300 Millisekunden. Also 3 000 MS. Schließen Sie es, und jetzt sollten wir einen guten Schwebezustand haben. Okay, das fühlt sich gut an. Gehen wir hier zum Diagrammbildschirm und erfahren Sie hier, wie Sie den Status „Presse“ ausführen. Was ich tun werde, ist dieses Kunstbrett hier zu nehmen. Und wieder halte ich Option. Ich klicke und ziehe, kopiere diesen Bildschirm hier. Während ich auf der Registerkarte Prototyp bin, sehen Sie, dass Flow-Startpunkt steht, drücken Sie Minus, um den Startpunkt zu löschen. Auf diese Weise beginnt es auf diesem Bildschirm. Und wenn ich dann über die 513 kopiere, umarmt mich hier, klicke und ziehe einfach. Ich gruppiere es Command G, nur damit es alles in einer Form ist. Also haben wir es hier. Ich füge es an Ort und Stelle ein. Und jetzt wählen wir aus, klicken und ziehen Sie einfach. Ich halte die Umschalttaste auf meiner Tastatur. Und ich werde die, so ziemlich alle Balken außer dem, den wir sind, auswählen , die wir beim Schrubben hervorheben möchten. Und ich werde diese alle 30 Prozent Deckkraft machen . Also gehen sie weg. Wir werden das Gleiche für die Termine tun. Lassen Sie uns alles außer 2016 greifen Lassen Sie uns diese 30-prozentige Deckkraft auf der Ebene der Registerkarte Design machen. Und wir sehen gut aus. Okay? Und was wir hier machen wollen, ist, dass du zwei Dinge tun kannst. Sie können die 2016-Leiste auswählen und den Prototyp direkt von hier aus erstellen. Oder Sie können einen größeren Tippbereich erstellen. Also schnappe ich mir ein Rechteck. Sie können auch die Schnelltaste auf der Tastatur verwenden. Ich werde ein Rechteck erstellen , das für den 2016 nur ein bisschen größer ist , nur damit es einen größeren Tippbereich gibt. Und jetzt ziehe ich dieses Rechteck zum Kunstbrett, wo wir die 513 Umarmungen haben. Und die Prototyp-Funktion dafür ist nicht auf dem Fass, aber wir wollen beim Drücken. Und wir müssen keine intelligenten Animate machen, die sich auflösen. Es ist also nur eine Art Verzögerung, eine kleine Verzögerung. Und gehen wir hier zurück zur Registerkarte Design. Jetzt, da wir wissen, dass dieser Graubereich das Prototypziel für den nächsten Bildschirm ist, lassen Sie uns fortfahren und es auf der Pass-Through-Ebene auf 0% Opazität drehen . Und jetzt sollten wir diese Interaktion sehen. Fahren Sie fort und drücken Sie Play, gehen Sie zu Ihrem Prototyp und klicken Sie dann einfach und halten Sie 2016 gedrückt. Und du wirst dieses eine Bereichs-Highlight sehen. Und wenn du die Maus loslässt, siehst du ein Unhighlight. Sagen Sie also, das Gleiche, wenn Sie das auf der Figma öffnen. Wenn Sie Figma auf Ihr Telefon herunterladen und sich anmelden, sehen Sie dasselbe. Sie können die Prototypen auf Ihrem Telefon testen. Und das wird dasselbe sein, wenn Sie Ihren Finger nach unten legen und mit dem Finger tippen und halten. Sie würden sehen, wie nach unten legen und mit dem Finger tippen und halten. Sie würden sehen, die Umarmung der obersten Stufe 513 auftaucht. Und wenn du dann deinen Finger loslässt, wirst du sehen, dass er in diesen Zustand zurückkehrt. Okay, ziemlich einfach. Lassen Sie uns ein bisschen komplizierter Interaktion eingehen , nämlich horizontales Wischen, irgendjemand, ich habe gerade den Startbereich in den horizontalen Wischbereich gezogen , Kunsttafel. Ich drücke auf Play. Und hier ist, was wir ausbauen werden, nämlich wenn Sie diese Karten hier einwischen, können Sie sehen, dass es horizontales Wischen gibt. Du hast auch das Food 1, 2. Okay, es sieht ziemlich kompliziert aus, aber hier ist es eigentlich ziemlich einfach. Wir machen einfach eins, wir machen die Tiere. Ziehen Sie also den Startbereich auf die Kunsttafel, die besagt , dass Sie es tun. Und du siehst, dass ich hier eine ganze Reihe von Karten für jedes Tier habe. Und eines der coolen Plug-Ins , mit denen ich all diese Fotos bekomme. Sagen wir, ich habe hier ein paar Quadrate. Kann ich zu einem Plugin gehen? Es heißt Content real oder Unsplash. Schauen wir uns Unsplash an. Und Unsplash gibt mir ein paar zufällige Fotos. Sagen wir also, ich will Tiere hier. Es wird alle diese Rechtecke hier mit Fotos füllen . Ich kann Kunst machen. Bevölkern Sie mit Kunst. Es ist also ein einfacher Weg zu bekommen, besorgen Sie sich einfach ein paar kostenlose Fotos, die Sie in Figma haben können. Und wenn Sie dreifach darauf klicken, können Sie auf der Registerkarte Design sehen, Sie sie ein wenig zuschneiden können, wenn Sie möchten. Ich werde von gescheitert zu ernten gehen und du kannst sehen, wie es für dich geeignet ist. Okay, ein kleiner Profi-Tipp, aber lasst uns weitermachen und anfangen, das horizontale Wischen für die Tiere auszubauen . Also wenn er klickte und nach links oder rechts wischte. Das erste, was wir hier tun wollen, sind alle Elemente, die wir waagerecht wischen aus Ihrer Kunsttafel entfernen möchten. Also habe ich das schon für dich getan, aber beginne einfach mit den Elementen, die du erstellen möchtest , die hier hinter dem Bildschirm liegen , aber lass sie alle vor dir legen. Wie stell alle Schachfiguren per Sag auf das Brett. Nun, wir wollen es tun, dass wir auch jeden dieser auswählen und gruppieren wollen. Also wähle ich dieses aus. Ich gehe zu Command G oder Control G. Sie können auch mit der rechten Maustaste klicken und Gruppe sagen. Wenn diese hier nicht gruppiert wären, würde es ungefähr so aussehen. Dann würde ich mit der rechten Maustaste klicken und ich würde hierher zur Gruppenauswahl oder zum Befehl G gehen zur Gruppenauswahl oder . Also habe ich diese bereits für Sie gruppiert, aber ich stelle nur sicher, dass sie alle hier gruppiert sind, nur damit sie leicht sind wählbar. Und jetzt wählen wir alle aus. Ich klicke und ziehe , um all diese auszuwählen. Und dann ist hier was wirklich wichtig ist. Ich klicke mit der rechten Maustaste darauf und ich werde diese Auswahl gestalten. Wählen Sie hier also noch einmal all diese wirklich wichtigen aus. Rechtsklick. Frame die Auswahl und du kannst im Menü sehen, auf den Ebenen hier habe ich alle diese Gruppen. Und wenn ich mit der rechten Maustaste klicke und zur Frameauswahl gehe, wirst du sehen, dass es Framing ist. Alle diese Bilder wurden hier in einen Rahmen gruppiert. Und man kann das sogenannte Tiere nennen. Also habe ich hier einen Rahmen namens Tiere, der alle Bilder und Karten enthält der alle Bilder und Karten , die wir gerade erstellt und gruppiert haben. Also wenn ich den Bären hier auswählen möchte, wenn ich den Tiger auswählen möchte. Okay, also jetzt werden wir das Kunstbrett schleppen. Also klicke ich auf die Tiere und stelle sicher, dass du die Zeichenflächenebene ausgewählt hast. Ich ziehe es in diese Kunsttafel. Und er weiß, dass es in der Kunsttafel , weil es Blau hervorheben wird. Stellen Sie also sicher, dass es in der Kunsttafel ist. Eine der Möglichkeiten, dies zu testen, wenn Sie die Zeichenfläche hier auswählen und verschieben oder verschieben. Wenn sich diese nicht bewegen, sieht es manchmal so aus. Du wirst es nicht in der Art Board haben. Es wird aussehen, als wäre es in der Zeichenfläche. Aber wenn du dieses Kunstbrett verschiebst, uchs, versuche es nochmal. Okay, also ja, es wird so aussehen. Und wenn Sie dann die Zeichenfläche bewegen, werden Sie feststellen, oh warte, sind diese in der Kunsttafel, was auch bedeuten würde, dass sie nicht in Ihrem Prototyp aufgetaucht sind. also noch einmal sicher, dass sich Ihre Kunsttafel hier, diese Ebene in der Tierkunstplatte befindet. Sie können also genau hier sehen, das habe ich nicht, es ist noch nicht in der Art Board. Jemand drückte Befehl C. Ich wähle die Zeichenfläche aus. Ich füge es hinein. Wenn ich es jetzt bewege und du siehst , wie es ist, ist es da. Okay, also hier ist das Schlüsselstück, um diese horizontale Schriftrolle zu machen. Wählen Sie also den Tierrahmen hier aus. also in Ihrer Ebenenpalette Wählen Sie also in Ihrer Ebenenpalette einfach die Tiere aus. Und was wir tun wollen, ist, dass wir den Befehl von rechts hier halten und in diese Framerichtung ziehen und zuschneiden wollen. Das ist wirklich wichtig. Wenn Sie also darauf klicken und ziehen und es so aussieht, haben Sie die Zeichenflächenebene nicht ausgewählt. Gehe also nochmal zurück und wähle aus, wo die Tiere auf der Ebene der Art Board stehen, und halte das Kommando. Und ziehe das gerade rechts von der Kunsttafel. Und wir können immer noch alle Fotos hier sehen. Was wir hier also tun wollen, ist auf der Registerkarte Design, oben rechts, wo Inhalt abschneiden steht. Machen Sie weiter und klicken Sie darauf. Und was wird sein, es wird den Inhalt abschneiden , von wo wir diesen Arm hierher ziehen. Also schneidet es das Kunstbrett ab. Also schneiden wir diesen Rahmen hier fast zu. Und wir erlauben dem Clip-Inhalt , diesen Inhalt zu schneiden, damit wir ihn nicht sehen. Es ist auch eine gute Idee, etwas mehr Platz unten und oben in diesem Zuschneiden zu gewährleisten. Auf diese Weise kommt der Schatten rein. Und bewege diese Linie auch ganz nach links hierher. Das ist wirklich wichtig. Ich zeige dir, warum ich zwei Optionen mache, wo es nicht ist und du wirst den Unterschied sehen. Also sind wir ziemlich fertig. Wir sind bereit, diesen Prototyp zu erstellen und diesen Rahmen zu einem horizontalen Wischen zu machen. Also alle wir, es ist sehr einfach. Alles, was wir tun müssen, ist hier zum Prototyp zu gehen und sehen, wo Überlauf, Overflow Scrollen steht. Scrollen Sie einfach horizontal. Und jetzt lasst uns nachschauen. Sie sollten das horizontale Scrollen haben. Wenn Sie also tippen und klicken, sehen Sie, wie sich die Karten in diese Richtung bewegen. Okay, und der Grund, warum man das Kunstbrett ganz nach links herauszieht , ist , dass die Bilder so aussehen, als würden sie über das Gerät hinaus scrollen. Also mache ich das nicht. Ich mache es auf halbem Weg. Sagen wir es einfach hier. Und Sie können sehen, was passiert, sehen, wie sie nicht bis zum Ende des Geräts scrollen . Es sieht merkwürdig aus. Es ist, als würde es in einen Blinzeln gehen, Land blinken. Was wir hier also machen wollen, ist, dass ich immer sicherstelle , dass es bis zum Ende unseres Flughafens ist, damit es so aussieht, als würde es bis zum Ende laufen, wo das Gerät lebt. Cool. Da gehst du. Es gibt horizontales Scrollen. Lassen Sie uns hier vertikales Scrollen machen, was so ziemlich dieselbe Technik ist. Ganz einfach. Also haben wir hier wieder die Navigation auf oberster Ebene. Und es ist die gleiche Idee, es sind nur die Karten scrollen hier. Also lasst uns weitermachen und diesen Start auf die Kunsttafel nach rechts verlagern , die besagt, dass du es tust. Auch hier habe ich all diese ausgewählt. Und nochmal, stelle einfach sicher, dass jeder einzelne gruppiert ist. Ich gehe nur Befehl G bei all diesen durch und stelle sicher, dass sie alle gruppiert sind. Und ich verstehe, ich werde sie alle auf einmal auswählen. Sehr, sehr wichtig. Machen Sie weiter und rahmen Sie diese Auswahl ein. Jetzt können wir wissen, wenn wir uns die Ebenen auf der linken Seite ansehen , dass es sich um einen Rahmen handelte. Nennen wir dieses eine noch einmal Tiere. Und wir können sehen, wenn wir den Tierrahmen links auswählen , dass sich alle Gruppen und dann die Karten darin befinden. Gleiche Art von Deal. Wir kommen rein, ziehen das hier in die Kunsttafel, gehen nach unten und halten das Kommando gedrückt. Schieben Sie das ganz nach oben. Gehen Sie zurück zur Registerkarte Design und denken Sie daran, diesen Inhalt zu schneiden. Jetzt können wir sehen, wie der Inhalt abgeschnitten wird. Und wieder werden wir links an einem Platz rechts etwas Platz hinzufügen . Und wir möchten, dass es genau dort hineinkommt , wo der Anfang dieses Menüs ist. Es sieht also so aus, als würde es unter diesem Menü scrollen. Und jetzt, da wir das getan haben, können wir loslegen. Wir können zum Prototyp gehen, wir können das Scrollen kennen, und wir können vertikales Scrollen machen. Und wenn wir jetzt Play drücken, siehst du hier dieselbe Funktion. Okay, cool. Schauen wir uns also an, beide zu kombinieren, um eine wirklich cool aussehende Map-Interaktion zu ermöglichen . Sie können also fortfahren und das Startlabel greifen und es dorthin ziehen , wo vertikales und horizontales Wischen steht . Und ich zeige dir das Beispiel hier im Prototyp. Sie haben also eine Map und Sie können sowohl mit diesen vertikalen als auch horizontalen Wischfunktionen sehen . Und sorgt für eine wirklich großartige Karteninteraktion , bei der Sie klicken und wischen. Schon wieder ganz einfach. Also lasst uns weitermachen und den Anfang zu dir ziehen. Habe ich dieses große Kartenbild hier? Alles, was Sie tun müssen, ist das einfach in diese Datei zu ziehen und Sie können sehen, wie es immer noch ein großes Bild ist, das ein wenig abgeschnitten wird. Das ist gut, das wollen wir. Aber das gleiche Geschäft wie bei allen Seiten auf Kartenebene. Wir wollen weitermachen, da dies ein Element ist, wir brauchen keine Gruppe. Aber lasst uns weitermachen und mit der rechten Maustaste darauf klicken. Und lasst uns diese Auswahl gestalten. Okay, Sie können also sehen, dass wir auf der linken Seite einen Rahmen haben, nennen wir es Map. Und innerhalb dieser Karte haben wir das Bild. Gehen wir zurück und wählen hier die Frame-Level aus. Stellen Sie also sicher, dass Sie sich im Rahmen befinden, nicht auf MAP, MAP-Zykluskarte, Bild, Rahmen. Und lass uns das Gleiche machen. Halten Sie den Befehl gedrückt und ziehen Sie diesen nach links. Ziehen Sie den Befehl, ziehen Sie ihn von rechts hinein. Das ist wirklich wichtig. Sie tun dies oder aus, das vertikale und horizontale Wischen funktioniert nicht. Also maskieren wir dieses Bild hier ziemlich. Wenn du dir also anschaust, wenn ich das wieder rausziehe, musst du das nicht tun, aber wenn ich das wieder rausziehe, siehst du hier, dass wir noch die Karte haben, wir haben den Rahmen. Wir haben den Clip-Inhalt noch nicht erstellt. Also wenn der Clip, sieht der Inhalt so aus. Aber du kannst den Rahmen hier sehen. Wir haben die Karte gerahmt. Jetzt müssen wir also nur noch in diese Kunsttafel zurückkehren. Stellen Sie sicher, dass Sie hier auf den linken Ebenen auswählen, wir wählen die Karte aus, machen den Clip-Inhalt. Also nochmal, ich bin nur auf der Karten-Kunsttafel, nicht auf der gesamten Zeichenfläche, nur auf der Karte. Sie können sehen, dass ich sogar darauf klicken kann, ein bisschen tiefer aus dem Menü zu schneiden ist auch in Ordnung. Das wird dieselbe Interaktion sein. Geh weiter und geh zu Prototype. Hab ein Scrollen. Also verstehe ich, ich wähle nur den Kartenrahmen hier links aus. Ich habe einen Prototyp gemacht. Und lasst uns horizontales und vertikales Scrollen machen. Und wenn wir jetzt zum Play-Button gehen, sollte deiner ungefähr so aussehen. Okay, das hat ziemlich viel Spaß gemacht. Hoffe, du hast viel aus dem Video herausgeholt. Und im nächsten Video hier werden wir einige Scroll-Funktionen lernen, Komponentenvarianten und Zuordnungen. Wir schließen die interaktiven Komponenten ab. Danke. Bis bald. 13. Bonusvideo: Vor dem letzten Video in den Bonus-Videoabschnitten behandeln wir den Scroll, um die Komponentenvarianten und die interaktiven Komponenten zu funktionieren die Komponentenvarianten und , oder? Lasst uns also wieder in die Akte gehen. Und wir haben gerade das Mapping abgeschlossen und das vertikale und horizontale Wischen gezeigt das vertikale und horizontale Wischen , um in der Demo so auszusehen. Ziehen wir nun diesen Startbereich dorthin , wo es heißt Tippen, um nach unten zu scrollen. Und du wirst hier sehen, ob ich das im Prototyp zeige, werde ich hier auf das Spiel drücken. Und was das ist, Sie können nach unten wischen den Rest des Inhalts sehen. Aber was wir tun werden, ist, dass wir etwas erstellen, in dem Sie, wenn Sie auf diese Karte tippen oder auf einen Abschnitt tippen, der Benutzer zu diesem Abschnitt scrollt in dem Sie definieren, normalerweise mehr üblich. Sie werden dies auf Websites sehen , wenn Sie ganz unten scrollen. Und hier gibt es einen Button , der wie ein Pfeil sagt, scrolle zurück nach oben. Das sehen Sie hier als dieselbe Interaktion. Und das können wir hier sogar für eine kurze Sekunde darauf aufbauen . Okay, also lasst uns so ziemlich weitermachen und das Startankerlabel hier zum Prototyp holen . Es ist eine sehr, sehr einfache Interaktion. Also haben wir diese vier Karten hier. Wenn Sie im Prototyp auf Play drücken, sagt es einfach normal. Hier gibt es keine Interaktion. Ich klicke auf diesen Einkaufswagen, nichts passiert. Und alles, was wir hier tun müssen, ist in der Art Board selbst, dass ich auf diese Karte klicke. Wie stark zerlumpt ziehen wir diese Prototypen normalerweise , um ihre Frames hinzuzufügen. In diesem Fall ziehe ich es auf eine andere Karte innerhalb desselben Prototyps, sagen Sie diesen Abschnitt hier. Und es weiß bereits beim Tippen, scrollen Sie zu, es wird standardmäßig darauf eingestellt. Und es hat sofort. Wir wollen nicht sofort. Aber ich zeige dir, wie Instant aussieht , nur damit du es vermeiden kannst. Okay, also hier tippen wir auf die Karte und du siehst, dass ein Benutzer sofort hierher nimmt, aber es gab keinen Übergang. Wir wollen also, dass dieser Übergang eintritt. Anstatt im Staat wollen wir also animieren. Und animate scrollt den Benutzer reibungslos bis zu diesem Punkt. Also lasst uns fortfahren und erneut auf die Karte klicken. Und du siehst, dass es hier oben oder unten zurück zum Wagen geht . Scrollen Sie also gut nach unten. Du willst nicht, dass es zu lang ist. Sagen wir weiter und sagen hier etwa 20, 1000 Millisekunden. Das ist wahrscheinlich zu langsam. Du kannst sehen, wie langsam das ist. Wir wollen ein schnelles, reibungsloses. Vielleicht sind vielleicht sogar 500 Millisekunden wahrscheinlich gut genug. Da gehst du. Schöner einfacher Übergang dort. Und dann lasst uns weitermachen und den Pfeil hier schnappen , wo es steht, dass du es tust. Ich kopiere das einfach. Ich drehe es. Ich verkleinere es ein bisschen. Und ich werde das hier unten platzieren. Und wir können das Gleiche hier machen. Wir können diesen Pfeil prototisieren, um Sie hier wieder auf die Karte zu bringen. Gleiche Funktion, Alan, tippe auf, scrolle, um zu animieren. Und jetzt siehst du hier, dass wir nach unten gehen. Wenn ich auf den Pfeil klicke, bringe ich wieder nach oben. Und Sie können sehen, dass es immer noch eine kleine Zimmerkarte darunter hat . Was wir hier tun könnten, ist, diesen Pfeil ganz nach oben zu bewegen . Wir können den Abschnitt der oberen Leiste hier tatsächlich gruppieren. Ich erstelle einen Rahmen. Wenn ein Zuschnitt es nur ein bisschen. Okay, und schnapp dir den Prototyp. Und ziehen wir es einfach bis zum Anfang dieses Abschnitts hier. Mal sehen, was passiert. Es gibt. Du gehst wieder in Position. Also habe ich den Wagen nicht so versteckt wie zuvor. Cool. Das ist so ziemlich eine Schriftrolle, um zu funktionieren. Sie können dies für Mobilgeräte verwenden, Sie können es für das Web verwenden, aber es wird am häufigsten verwendet, um entweder zum Abschnitt pro Abschnitt zu wechseln oder zu scrollen oder den Benutzer bis zum oben , ohne sie zu haben, muss gerne den ganzen Weg wischen und weiter wischen. Okay, jetzt schauen wir uns die Komponenten und die Komponentenvarianten und interaktiven Komponenten ein wenig an Komponenten und die Komponentenvarianten und . Dies ist also eines der neuesten Funktionen, die kürzlich von Figma hervorgegangen sind. Und du stützst die letzten Videos im Kurs, du solltest wissen, wie man eine Komponente erstellt und was uns das hier ermöglicht. Ich werde diese Seite demontieren. Es ermöglicht uns, auf einem Bildschirm alle Variationen auszuwählen. Nehmen wir an, ich wollte hier meinen unterschiedlichen Geschmack auswählen und uns erlauben, all diese Variationen in einem zu machen. Screen Sie hier, und das nennt man interaktive Komponenten, aber es verwendet auch eine Funktion, die als Komponentenvarianzen bezeichnet wird , sind auch Varianten. Und wie mussten wir das früher machen? Äh, sieht irgendwie so aus. Sie müssen all diese verschiedenen Interaktionen und möglichen Fälle prototypisieren diese verschiedenen Interaktionen und , auf die der Benutzer klicken kann. Und jetzt müssen wir das alles mit nur einem Bildschirm lösen . Schauen wir uns zuerst eine Variante an, und dann schauen wir uns die Komponentenvarianz oder interaktive Komponenten an. Wenn wir also hier zur Komponentenbibliothek gehen, sehen Sie, dass ich hier ein Checkbox-System habe. Lassen Sie uns also zuerst eine Komponente erstellen, kopieren wir beide Silber, weil wir sie brauchen werden. Also wähle einfach diese beiden aus. Gehe zu Command C. Ich zoome ein wenig heraus und lass uns einfach nach oben gehen und diese einfügen. Das sind also bereits Komponenten, weil Sie sehen können , wie sie, wenn ich sie anklicke, lila sind. Wählen wir beide aus. Lasst uns mit der rechten Maustaste darauf klicken. Und lasst uns die Instanz trennen. Wählen Sie also erneut beide aus, klicken Sie mit der rechten Maustaste, trennen Sie die Instanz. Das wird es von der Komponente lösen. Jetzt können Sie sehen, dass es sich blaue Umrisse im Vergleich zu Purpur handelt, was bedeutet, dass sie nicht mehr mit Komponenten verwandt sind. Sie sind irgendwie einmalig. Beginnen wir also mit dem ersten Kontrollkästchen hier. Sagen wir, lassen Sie uns diesen Schlaganfall ändern. Machen wir es einfach zu einem rosa Strich. Und lassen Sie uns diesen Text in dunklere Texte wie diesen ändern. Also nochmal habe ich die Farbe hier ausgewählt in Pink geändert. Ausgewählt, ja. Und ich habe eine Farbe aus unserer Bibliothek ausgewählt. Wenn Sie die Farben nicht haben, trennen Sie einfach. Also löse ich die Farbe hier ab. Sie können sehen, ob Sie den Mauszeiger darüber bewegen, heißt „Stil trennen“. Und ich kann jede Farbe machen, die ich will. Du kannst hier Schwarz machen. Das ist also vielleicht nur zu schwarz. Okay, was wir zuerst tun wollen, ist zu sagen, dass dies eine gute Komponente ist , die wir verwenden möchten. Oder Sie möchten dieses Kontrollkästchen irgendwann wiederverwenden. Also klicken wir mit der rechten Maustaste darauf. Und lasst uns weitermachen und dies zu einer Komponente machen. Sie können hier auf Komponente erstellen klicken. Sie können dies auch tun, indem Sie auf dieses kleine für Diamanten klicken, wie zum Beispiel Foursquare-Diamant-Symbol oben. Und es wird das Gleiche tun. Es wird eine Komponente erstellen. Was wir hier tun wollen, ist, wenn Sie ganz rechts sehen können , haben wir bei der Auswahl dieser Komponente eine Funktion namens Varianz. Lasst uns weitermachen und Plus für diese Variante drücken. Und es wird das Kontrollkästchen hier duplizieren , das wir haben. Und nennen wir das aktiv. Wir haben also eines, das bereits standardmäßig ist, das für das Label vorausgefüllt ist, das bereits früher in der Datei beschriftet wurde. Aber dieses neue haben wir in aktiv geändert. Und lasst uns weitermachen und sagen, dass dies nein ist. Und jetzt wollen wir einen Dreifachklick auswählen, bis ich zur Füllung oder nur dem Rechteck komme . Also dreifach klick, habe das Rechteck bekommen. Ich gehe rüber zur Füllung, drücke Plus. Und ich schnapp mir das Rosa und mache es voll. Und dann kopiere ich dieses Kontrollkästchen. Ich halte Option. Und ich ziehe es hier in diese Komponente, also brauche ich diese nicht mehr. Okay, was wir jetzt tun können, haben wir diese beiden Komponenten eingestellt. Wir können hier auf den Seiten zu unserer mobilen Übergangsebene zurückkehren . Und wir können diese Komponenten in die Datei ziehen. Wenn wir also zu Assets gehen, sehen Sie hier alle lokalen Komponenten, die sich in dieser Seitenebene befanden , die als Komponentenbibliothek bezeichnet wird. Und du wirst die neuen sehen , die wir gemacht haben, weil wir sie hier mit einer dunkleren Farbe gemacht haben. Du siehst also, wo es ja sagt. Ziehen wir das hier rein. Und was Sie an dieser Stelle tun könnten , wenn Sie entwerfen, ist , sagen wir, ich werde diesen Bildschirm erstellen. Ich lösche all das hier. Schnappen wir uns ein neues. Lassen Sie uns den Hintergrund hier nur ein bisschen leichter machen , damit wir das sehen können, lass uns einfach weiß werden. Und wir ändern dies in eine dunklere Farbe. Da gehst du. Okay, also wenn wir mit Komponenten arbeiten, haben wir den Standardabschnitt dieser Komponente. Aber sagen wir, ich möchte das prototypisieren. Und ich möchte diesen zum ausgewählten Staat machen. Sie könnten hier tun, klicken Sie auf das Yes-Symbol und Sie sehen den Komponentenbereich. Also habe ich das Ja, lass unser Kontrollkästchen fallen. Sie werden sehen, dass es den Komponentenbereich hat. Stellen Sie sicher, dass Sie sich auf der Registerkarte Design befinden, nicht auf der Registerkarte Prototyp auf der Registerkarte Entwurf. Sehen Sie, wo „ Checkbox default“ steht. Und dieses kleine Dropdown-Menü hat die Variante. Ich kann also leicht sagen, dass ich das tatsächlich in den aktiven Status umstellen möchte . Und es ändert es automatisch in den aktiven Status. Und Sie können beliebig viele Varianzen hinzufügen. Sie können also hier sehen, wenn ich auf das Nein klicke, und ich klicke es hier wieder an. Und wir laden das auf. Ein Klick ändert es, um es zu wissen. Noch eine. Ändert es schnell auf „Ja“. Das ist also ziemlich Abweichung auf den Punkt gebracht. Aber figma hat eine noch bessere Funktion auf den Markt gebracht , bei der es sich jetzt um interaktive Komponenten handelt, die bevor ich den Startlevel auf diese Bildschirme ziehen werde . also vor interaktiven Komponenten Wenn wir also vor interaktiven Komponenten eine Interaktion wollten, sagen Sie für eine Funktion , in der Sie Ihr Geschlecht wählen und entweder männlich oder weiblich auswählen. Nehmen wir an, Sie möchten weiblich sein und möchten , dass der Benutzer einen Hover-Status hat. Sie müssten tatsächlich einen anderen Bildschirm für den Hover-Status erstellen . Und sagen wir, es gab einen ausgewählten Staat. Sie müssten hier tatsächlich einen weiteren Bildschirm für den ausgewählten Status erstellen . Also habe ich diesen Prototyp schon erstellt. Vor interaktiven Komponenten müssten wir das tun. Wir haben drei Bildschirme , damit es sehr optimiert und nahtlos aussieht . Als ob ich wieder über das Weibchen fahre, gibt es keinen Schweben auf dem Handy, aber sagen wir, das war für Web und du klickst und es gibt einen aktiven Zustand. So benötigen drei Zustände dieser Schaltfläche drei verschiedene Bildschirme um diese Interaktion zu erhalten. Jetzt können wir mit interaktiven Komponenten, die wir hier in einer Sekunde aufbauen werden, die wir hier in einer Sekunde aufbauen werden, einen Bildschirm erhalten , der alles erledigt. Wenn ich abklicke, geht es wieder vorbei. Also lasst uns weitermachen und das bauen. Wenn wir also zu dem Abschnitt gehen , in dem es normal steht, greifen wir hier diesen Knopf. Also schnapp ich es mir. Ich gehe zu Command G einfach weiter und gruppiere es. Also lasst uns weitermachen und uns das schnappen. Gehen wir zurück zu unseren Layern hier oben. Stellen Sie sicher, dass Sie Ihre Seiten hier sehen können. Manchmal sehen Sie es nicht , weil dies nicht der richtige Weg ist, aber ziehen Sie dies nach unten, ziehen Sie Ihre Ebenen bei Bedarf nach unten. Gehen wir zu unserer Komponentenbibliothek. Und du kannst sehen, dass ich das bereits aufgebaut habe, damit du sehen kannst, wie es funktioniert, aber lass uns weitermachen und das gemeinsam machen. also im selben Bereich, in dem wir unsere Checkboxen erstellen, Lassen Sie uns also im selben Bereich, in dem wir unsere Checkboxen erstellen, Befehl V platzieren, wenn Sie auf einem Mac oder Control V befinden, wenn Sie sich auf einem PC, PC befinden. Platzieren wir diese weibliche Taste hier oder diese Auswahlschaltfläche hier . Und jetzt lasst uns die verschiedenen Zustände einsetzen und anfangen, mit den interaktiven Komponenten zu arbeiten. Also lasst uns weitermachen und sicherstellen, dass wir ihn gruppiert haben Befehl G wir mit der rechten Maustaste darauf. Machen wir es zu einer Komponente. Erstellen wir also eine Komponente. Und lasst uns weitermachen und auf unseren Tab Design zurückblicken. Und stellen wir sicher, dass wir das nennen. Im oberen Frame hier ich mit einem Dreifachklick in meine Ebenen auf der linken Seite. Nennen Sie diesen den Standardstatus. Nur damit ich weiß, wann ich das ausgewählt habe, ist das der Standardstatus und nannte es. Lassen Sie uns die Komponente hier auswählen. Und lasst uns die Variante hinzufügen. Also was kommt hier die erste Variante hinzu? Und nennen wir das den Hover-Status. In Ordnung, und dann können Sie sehen, dass ich diese Auswahl bereits hier gruppiert habe , also lassen Sie uns dreifach klicken, bis wir kommen, stellen Sie sicher, dass wir auf der Registerkarte Design sind. Also wechselte ich vom Prototyp zur Entwurfsregisterkarte. Triple-Click, bis wir nur das Rechteck ausgewählt haben. Also wollen wir nicht das Weibchen haben, das Symbol hier für Frauen, nur das Rechteck und wo es Strich auf der rechten Hand steht, für das rechte Panel, wo Design steht, lass uns füge einen Strich hinzu. Standardmäßig ist es ein Pixel. Ich bin ein Fan davon, deine Schläge dick zu halten. Normalerweise mache ich nie einen Pixelstriche. Entweder 23, die meisten Fälle drei oder vier sind häufiger. Nur um es sehr präsent, vorzeigbar und offensichtlich zu machen. Man kann also manchmal wie ein Fehler aussehen, als wäre er zu dünn, es sieht nicht so aus, als wäre es ein absichtlicher Schlaganfall. Also lasst uns absichtlich sein, sagen wir vier. Und lasst uns weitermachen und das hier zum rosa Umriss machen. Okay, also wenn wir jetzt zurückgehen und alle auswählen, diese Komponente mit allen Varianten darin. Sehen Sie also, wo „Default State“ steht. Sie werden sehen, dass es die Eigenschaft einen Standard-Hover-Status hat. Und es hat sehr, hat einen eigenen Variantenabschnitt. An dieser Stelle sehen Sie hier die drei kleinen Menüoptionen, die drei kleinen Punkte in der Varianz. Das ist wichtig. Weil wir hier mehr Varianz hinzufügen können. Also fügen wir eine weitere neue Variante hinzu. Und es wird es hier unten hinzufügen. Und nennen wir das den ausgewählten Status. Und wieder wähle ich nur den Hintergrund aus. Also Triple-Click und Thai bekommen diesen Hintergrund. Lass uns den ganzen Hintergrund rosa machen. Schnappen wir uns das Icon hier. Lass es uns weiß machen. Und ändern wir den Text von Schwarz zu Weiß. Okay, im Moment haben wir drei verschiedene Knöpfe , die wir benutzen könnten. Ich gehe hier zurück zur mobilen Übergangsebene und gehe in die Assets ein. Und wir haben diesen Button hier, den wir erstellt haben. Und es hat die verschiedenen Abweichungen im Hover-Status, ausgewähltem Zustand. Aber wir haben uns nicht getroffen, prototypieren sie noch, um interaktierbar zu sein, oder? Wir haben nur die Varianz festgelegt. Gehen wir also zurück zu unserer Komponentenbibliothek. Und was wir jetzt tun können, ist, dass wir Prototyp-Features innerhalb einer Komponente festlegen können . Es klingt verrückt, aber es ist sehr, sehr einfach. Und alles, was wir gerade gemacht haben, werden wir uns bewerben, aber nur auf die Knöpfe. Also lasst uns weitermachen und sicherstellen, dass diese alle gruppiert sind. Also gruppieren wir sie vorher. Wählen Sie den Standardstatus der Varianz aus. Sie sehen also, dass Sie auf der Standardeinstellung und jetzt zur Registerkarte Prototyp wechseln. Und jetzt können Sie innerhalb von Komponenten prototisieren. Also lasst uns weitermachen und diesen Prototyp-Pfeil hierher ziehen . Und sagen wir, Onclick ist in Ordnung. Was macht das eigentlich beim Schweben aus? Es geht in den Hover-Status. Und lasst uns nicht sofort machen, lasst uns auflösen, sagen wir 300 Millisekunden hier. Also nochmal, ich habe die oberste genommen, ich habe es zu dem gezogen, der den Schlaganfall hat. Und anstatt onclick zu sagen, habe ich es geschafft, während ich schwebt. Und jetzt werden wir dasselbe mit dem machen , der der Hover-Status ist. Wir werden das anklicken. Gehe zum ausgewählten Status. Und wir wollen, dass dieser aufklickt und aufzulösen ist, wird großartig funktionieren. Und dann möchten wir auch, dass jemand davon abklickt, der Benutzer vom ausgewählten abklickt und Sie wieder in den Standardstatus bringt. Wir wollen onclick und wir wollen uns auflösen. Okay, also lasst uns das löschen. Lassen Sie uns diese Seite hier kopieren. Eigentlich muss man es nicht einmal kopieren. Lassen Sie uns diesen Button hier löschen. Gehen wir zu unserer Asset-Bibliothek wenn alle unsere Komponenten-Buttons sind. Und Sie können den hier sehen , der den Standardstatus angibt. Als wir gerade gemacht haben. Und weißt du, es ist eines, das wir gerade gemacht haben, weil es den Standardwert, den Hover-Status und den ausgewählten Status hat . Wenn wir zur Registerkarte Design gehen und uns die verschiedenen Varianten ansehen. Und jetzt lass uns auf Play drücken. Und Sie werden nur auf dem Prototyp allein die Komponente, die interaktive Komponentenvarianz im Spiel sehen. Es gibt also den Standardstatus. Wenn Sie schweben, erhalten Sie diesen Übergang nur auf den Schlaganfall. Und wenn Sie darauf klicken, erhalten wir den ausgewählten Status. Und wenn Sie von diesem ausgewählten Status abklicken, können Sie sehen, dass er in den Standardstatus zurückkehrt. Also nochmal, das nimmt so ziemlich das Prototyping , das wir hier in dieser Komponentenvariante, Auswahl, durchgeführt haben . Und diese Prototypen in nur einer Komponente für diese verschiedenen Interaktionen anwenden . Es war ein Feature, auf das ich ewig gewartet habe. Bewirken Sie auch hier, dass diese Art von Interaktionen angezeigt wird. Es braucht so viele Bildschirme, als würde es diesen Bildschirm hier bekommen. So sah es für ein paar Jahre aus. Es ist also wirklich großartig, dass figma diese Art von Funktion eingeführt hat und es ist eine Zeitersparnis. Es sind weniger Bildschirme für uns zu verwalten und es ist wirklich einfach einzurichten. Und das kannst du für so ziemlich alles einrichten. Sie können Ihre Schaltflächenstile hier erstellen. Sie können auf diesem sehen, dass ich hier Buttons erstellt habe. Und wenn du diesen Button hier drüben prototypierst, ist das der Hover-Status. Sie haben also den Hover-Status für diesen Button. Wenn wir also wieder zu unserer Datei gehen und in unsere Assets gegangen sind, und wir ziehen diesen Knopf hier rüber, drücken Sie Play. Sie können sehen, dass es den dunkleren schwarzen Hover-Status hat. Und wieder ist es ein Knopf. Was wir also tun könnten, ist, dass wir Kinder machen oder es ist eine Komponente. Das Tolle an der Komponente ist also , dass ich all diese verschiedenen Schaltflächen hier benutzen kann. Ich kann sagen, dass das sicher ist. Dieser ist der Nächste. Dieser ist „Abbrechen“. Dieser ist genial. Und das ist reizend. Und ich kann zurück zu meinen Ebenen gehen. Ich kann zu meinen Komponenten gehen. Sagen wir, ich will kein Pink mehr. Ich möchte diese Farbe in Blau ändern. Und ich möchte diesen Schwebeweg ändern, um zu sagen, ein helleres Grau hier. Und jetzt, wenn wir zu unserem Board zurückkehren, werden Sie sehen, dass alle Versionen dieses Buttons in Blau wechseln. Und jetzt schauen wir uns den Hover-Status an. Sie können sehen, dass es auch geändert wurde, also aktualisiert es alle verschiedenen Instanzen sind Kinder dieser Master-Komponente, alles in einem Schlag, in einer Bearbeitung. Okay, da hast du es. Das ist das Ende aller Bonusvideos. Wie immer vielen Dank, dass Sie den Unterricht besucht haben. Ich habe bald ein paar neue Kurse veröffentlicht denen ich mich melden werde und alle wissen lasse , wann sie starten. Und wie immer viel Spaß beim Entwerfen und wünsche dir alles Gute. Tschüss.