Erstellen interaktiver Prototypen mit Figma

1. Einführung: Willkommen zum Prototyping-Kurs mit Sigma. In diesem Kurs lernen wir, wie wir Riel interaktive Prototypen mit der kostenlosen Online-Designsoftware Sigma erstellen können . Hallo, Mein Name ist Neema und ich bin Ihr Ausbilder für diesen Kurs in den letzten 10 Jahren sind an Dutzenden von mobilen und Web-Anwendungen für beide Start-ups von meinen eigenen und auch Client-Projektegearbeitet an Dutzenden von mobilen und Web-Anwendungen für beide Start-ups von meinen eigenen und auch Client-Projekte . Und in diesem Kurs werde ich Ihnen zeigen, wie Sie tatsächlich einen voll funktionierenden Prototyp erstellen können. Sie können Kollegen, Freunden, Investoren und so weiter zeigen Freunden, . Zuerst werden wir denken, dass Projekt, das wir bereits entworfen haben genannt Clean Kangaroo, die eine mobile Anwendung für einen Wäscheservice Lieferservice. Wir werden die Entwürfe für die mobile Anwendung nehmen und tatsächlich einen brauchbaren Prototyp mit Riel, Übergängen, Zuständen und sogar intelligenten Animationen erstellen Prototyp mit Riel, Übergängen, Übergängen, . Wir werden unseren Prototyp in der Feigenkarte selbst testen, und wir werden auch Sigmas Mirror App überprüfen, wo Sie Prototypen, Leben sehen können, und auch sehen, wie Ihre Entwürfe das Leben verändern, während Sie an ihnen arbeiten in Figment als Bonus erfahren Sie auch, wie Teams in sigma arbeiten, wie wir tatsächlich ein Team erstellen können, das Teammitglieder zu unserem Projekt einlädt und mit ihnen im selben Design arbeitet . Ich habe auch gelernt, wie man einen Export, unsere Projekte mit Kunden, Kollegen und so weiter teilt unsere Projekte mit Kunden, . Also, wenn Sie bereit sind zu lernen, wie man schöne Prototypen für Ihre Entwürfe mit gefälschten Mama zu erstellen , dann springen Sie direkt in und ich werde Sie in diesem Kurs sehen. 2. Importieren der mobilen UI: In Ordnung, also ohne weiteres, lasst uns direkt dazu springen, einen Prototyp aus dieser mobilen Anwendung zu erstellen, die wir hier haben . Dies ist ein mobiles Design für eine Anwendung namens Clean Kangaroo, die im Wesentlichen bietet. Ah, Wäscherei Lieferservice. Die Leute können ihre Wäsche haben. Ich nahm auf und fiel nett und sauber ab. Und ich habe tatsächlich einen Kurs, in dem ich dir zeige, wie du ein komplettes mobiles Mockup wie dieses gestalten kannst . In einem anderen Kurs namens Learn Sigma entwarf ein komplettes Handy, du Aux. In einem anderen Kurs namens Learn Sigma entwarf ein komplettes Handy, Also zögern Sie nicht, diesen Kurs auch zu überprüfen, wenn Sie lernen möchten, wie man tatsächlich mobile Mockups entwirft, die in etwa so aussehen. Aber für den Zweck dieses Kurses werden wir uns hauptsächlich darauf konzentrieren, wie wir daraus einen Prototyp erstellen können. Also, bevor Sie vorwärts gehen, gehen Sie bitte voran und laden Sie die Stigma-Datei für dieses Projekt hier herunter, die unter dem Projekt und Ressource ist Registerkarte hier verfügbar sein wird. Klicken Sie darauf und suchen Sie dann die Ressource, die Sie von dort herunterladen können. Also, wenn Sie das heruntergeladen haben, gehen Sie einfach vor und öffnen Sie Ihre Geburt. App spielt keine Rolle, ob Sie auf einem Desktop oder Web sind, Sie können Prototypen auf beiden erstellen. Nun, wenn Sie das erste Mal Fig MMA verwenden, dann gehen Sie zu Abb. Medog kommt vom Bruder. Sie werden in der Lage sein, sich für den Service anzumelden und dann weiter zu gehen und mit uns zu folgen. Also, sobald Sie in Feige ma sind, können Sie einfach zu Ihrem Entwürfe Ordner gehen oder überall, wo Sie Ihre Entwürfe halten und dann gehen weiter und ziehen Sie einfach unsere Dot Fix Datei, die Sie heruntergeladen haben. Es sollte also eine Datei namens Clean Kangaroo Mobile sein. Sie y dot gefälscht, also gehen Sie einfach voran und ziehen Sie das über. Es ist ein bisschen eine größere Datei, so dass es einige Zeit dauern kann, um es etwas Zeit zu geben, und dass, sobald es importiert wird, Sie sehen, dass Datei erfolgreich importiert wird, um voran zu gehen und klicken Sie auf Fertig und dann gehen Sie weiter und einfach öffnen Sie es, indem Sie auf die Datei doppelklicken. Perfekt. Und die nächste Lektion. Wir werden lernen, wie der Präsentationsmodus und Prototyping funktioniert und Sigma 3. Prototypen erstellen: Alles klar. Wie ich bereits im Intro dieses Kurses erwähnt habe, ist eines der wirklich Elektrowerkzeuge in Fig MMA sein Prototyping. Prototyping ermöglicht es uns, unsere Entwürfe zum Leben zu erwecken, so dass wir tatsächlich alle Seiten sehen können Jahr in Aktion. Also jetzt, wenn Sie auf diesen Button gehen und Gegenwart drücken, was uns erlaubt, zu sehen, wie unsere Designs tatsächlich auf einem Gerät wie hier aussehen würden. Und während das cool ist, wie Sie jetzt sehen können, gibt es wirklich keine Reihenfolge und ich benutze die linke und rechte Tastatur-Tasten, um tatsächlich zwischen diesen Seiten zu wechseln . Aber wenn Sie voran gehen und tatsächlich einen Prototyp für dieses Design mit Prototyping-Tool erstellen wollen , können wir dieses Projekt tatsächlich auf die nächste Ebene bringen und daraus einen Prototyp erstellen. Also lasst uns voran gehen und das genau dort schließen. Ah, und dann mach weiter und mach dich auf. Das Prototyp-Panel hier, wie Sie sehen, gibt uns eine kleine Vorschau. Hier haben wir das Gerät des iPhone 11 pro, da unsere Bildschirmgrößen oder Rahmengrößen mit dem iPhone 11 Sonde übereinstimmen. Ähm, und dann können wir sogar die Hintergrundfarbe unseres Präsentationsmodus von hier aus ändern. Und jetzt, da wir uns im Prototyping-Modus befinden, stellen Sie sicher, dass Sie hier den Prototyping-Modus auswählen. Ah, Sie können tatsächlich voran gehen und Verbindungen zwischen den Seiten erstellen. Und hier ist, was ich meine, wenn du hier rüber gehst, können wir diesen Rahmen hier drüben verbinden, wenn wir uns dafür entschieden haben, sagen wir mal diesen Rahmen hier drüben. Und so sind jetzt diese beiden Frames verbunden. Ah, und wenn ich irgendwo auf diesen Rahmen in meinem Vorschaumodus tippe, wird es auf diese Seite gehen und ich kann das zeigen, indem ich wieder in den Vorschaumodus gehe. Nun, wenn ich irgendwo auf der Seite tippe, wird es mich zu dieser Tutorialseite führen. natürlich nicht das, was wir in diesem Fall wollen. In diesem Fall möchten wir diese Prototyp-Option tatsächlich auf die Schaltfläche hier anwenden, damit Sie dies auch im Prototyp-Modus tun können . Wenn ich hier wieder reingehe, werden Sie sehen, dass ich auch eine Reihe von verschiedenen Optionen bekomme, so dass Sie die Animation wählen können, um sofort zu sein, aufzulösen, animieren, , bewegen,eso zu bewegen. Abhängig davon, wie Ihre Animation stattfinden soll, können Sie fortfahren und mit denen hier twittern und spielen. Ich werde nicht zu viel in die Details der verschiedenen Animationen bekommen, aber fühle mich frei, mit ihm herumzuspielen und zu sehen, was sich richtig anfühlt. Und dann hier, können Sie tatsächlich voran gehen und ändern, wie Sie tatsächlich die bezahlte Änderung dort auslösen wollen , ob es oben ist, was wir ursprünglich haben oder auf Ziehen. Also, wenn Sie etwas auf dem Bildschirm ziehen, während Sie schweben oder auf eine Reihe von anderen Optionen drücken , hier ist gut, Sie können die Löschtaste verwenden, um tatsächlich Prototypverbindungen hier und dann loszuwerden, was wir wollen zu tun ist tatsächlich eine Prototyp-Verbindung zwischen unseren aber hier und den Tutorial-Schritten erstellen und dann diese Schaltflächen verbinden, um zum nächsten Tutorial-Schritt zu gehen und so weiter. Und dann von hier aus wollen wir natürlichauf natürlich unsere Zahlungsseite hier und von unserer Zahlungsseite zu unserer Kartenseite springen und Sie bekommen die Idee. Dann gehen wir weiter und verbinden die oberen Balken. Hier ist auch es bringt uns auf die richtige Seite, wie wir klicken und vielleicht endlich verbinden diese Log-out-Schaltfläche zurück zu unserer ersten Seite hier und wirklich einen schönen Prototyp für unsere Designs hiererstellen Designs hier 4. Verbindungen zwischen Framen hinzufügen: Alles klar. Nun, da wir eine Vorstellung davon haben, wie die Präsentation von Prototypen funktioniert, lassen Sie uns einen echten Prototyp aus unseren Entwürfen erstellen. Also gehen Sie vor und zuerst verbinden Sie dies aber in zu verbinden Taste einfach gehen und klicken Sie auf sie in diesem kleinen Kreis in der Mitte. Ähm, ist es, was Ihnen erlaubt, weiterzugehen und mit verschiedenen Bildschirmen verbunden. Also machen wir das. Und dann gehen wir weiter und verbinden auch unseren Login Button . Die Anfrage Strand hier, weil wir keine Anmeldung mit E-Mail oder Senat, aber Google-Option hier oder Gestaltung unserer Seite haben, werden wir uns nicht darum kümmern. Also machen wir einfach voran und schaffen diese beiden Verbindungen hier für jetzt und dann von hier. Wir möchten, dass dieser Button hier uns mit dem Tutorial verbindet. Schritt zwei Seite und dann die Schaltfläche hier, um uns mit der Geschichte verbinden wird Schritt drei Seite. Und dann schließlich doppelklicke ich hier, um Schaltflächen auszuwählen. Ich möchte, dass diese Seite mich oder diesen Button bringt, um mich zum Zahlungsbasisjahr auf der Zahlungsseite zu bringen. Ich möchte voran gehen und meine am Hof verbinden, aber in zwei als meine Seite. Und dann wurde der Speicher schließlich adressiert, auf meine Anfrage basiert hier. Und so haben wir hier die Verbindung aufgebaut. Nun gehen wir weiter und wählen Sie unsere Anforderungsseite hier und dann wählen Sie die Registerkarte sind aus dem Profil hier. Wir wollen weitergehen und auf die Profilseite und unsere Dienste zur Services-Seite gehen, und das müssen wir auch auf den anderen Seiten tun. Auch hier in der oberen Leiste für die Profilseite, wollen wir bitten, uns zurück zu hier Dienstleistungen zu bringen, um uns zu hören. Und dann schließlich und hier wollen wir das Profil uns hierher bringen und bitten, uns hierher zu bringen. Stellen Sie sicher, dass Sie hier das gesamte Tippen Feld auswählen. Andernfalls kann es schwierig sein, zu klicken. Ich glaube, wir haben hier alles in Verbindung. Das einzige, was uns in Bezug auf die Verbindung fehlt, ist diese Kartenseite hier oder dieser Kartenabschnitt hier. Wir gehen weiter und verknüpfen das einfach wieder in hier, damit der Benutzer seine Adresse tippen und ändern kann . Jetzt gehen wir voran und präsentieren. Das hier könnte eine Sekunde dauern, um hier zu laden. Aber wenn du einmal hier bist, können wir das Tutorial machen. Und das funktioniert. Als Nächstes. Cool. Also nur zwei Dinge, die ich hier drüben reparieren werde, äh, wir werden diese Verbindung löschen und tatsächlich weitermachen und den Fertigen Button ändern , um stattdessen wieder zu unserer Lug und Seite zu gehen. Und lassen Sie uns weitermachen und auch den Abmelde-Button hier verbinden. Die Anmeldeseite hier und dann unsere Zahlungen, aber in, um zu dieser Zahlungsseite im Profil zu gehen, und dann werden wir die Karte mit der Karte verbinden hier ist niedrig. Und jetzt denke ich, dass wir alles richtig verbunden haben. Gehen wir weiter und machen das noch einmal. Also, wenn wir hier drin sind, testen wir unser Tutorial. Schritt eins, suchen Sie nach der Schule. Drei saubere Klamotten. Ehrfürchtig. Das führt uns zurück hierher. Wir loggen uns ein. Das führt uns hierher. Das ist ziemlich cool. Sie gehen auf unsere Profilseite, wir können zu unseren Dienstleistungen gehen. Wir können hier sogar zu unserer Zahlung zurückkehren. Nun, das wird uns wieder durch die meine Seite führen und wir können uns tatsächlich von hier aus ausloggen, eine Quelle , die uns aussperren würde. Also denke ich, das ist ziemlich cool. Wir haben hier einen Prototyp aus unserem Projekt erstellt, also machen wir eine kurze Pause und dann kommen wir in der nächsten Lektion wieder und sehen, wie wir tatsächlich scrollende Inhalte hinzufügen können. 5. Scrollen in Prototypen: Alles klar, also funktioniert unser Prototyp, aber hier gibt es ein kleines Problem. Wir können eigentlich keine Inhalte verwenden, die Kräuterblättern. Also das hier. Hören Sie, wir werden lernen, wie wir unergründliche Inhalte anwenden können. Ich möchte Ihnen nur eine Sache in den Diensten hier zeigen. Lasst uns weitermachen und diese Seite länger machen. Gehen wir zurück zu unserem Designmodus hier. Also zuerst, lassen Sie uns voran und stellen Sie sicher, dass unsere Service-Seite hier die richtigen Einschränkungen hat. Wenn links, rechts und Mitte für alle diese Optionen hier, und dann sollte dieser links und rechts sein. Und bald unten. Unser Rahmen sollte reaktionsschnell sein. Eigentlich, für diese wollen wir oben statt Mitte tun. Cool. Also, jetzt sollte meine Services-Seite eine nette, nette Einschränkungen haben . , Also alles,was sie hier tun wollen, ist eigentlich voran zu gehen und unsere Serviceseite zu dehnen. Und dann gehen wir weiter und wählen Sie einfach , um all diese aus und verwenden Sie den Befehl D, umeine weitere Kopie zu erstellen. Legen Sie sie einfach hier und dann gehen wir weiter und stellen Sie sicher, dass unser Wasserhahn oder ist oben auf all . Das sollte es sein. Also jetzt, wenn ich zurück zu meinem Prototyp meinen Präsentationsmodus hier und gehe zum Dienst-Tab. Sie werden hier sehen, dass etwas Seltsames passiert. Meine Tab-Leiste befindet sich ganz unten. jedoch Dies solltejedochauf der Seite bleiben, egal wie Sie scrollen. Und auch das Gleiche für meine Navigationsleiste hier oben und auf den anderen Seiten. Das ist kein Problem, weil wir nicht vom Bildschirm gehen. Hier gibt es kein Scrollen. Ah, aber hier, weil wir eine Scroll-Option haben. Jetzt sehen wir, dass einige der Dinge hier kann es problematisch sein, aber Abbildung gibt es Ihnen die Möglichkeit, voran zu gehen und tatsächlich Dinge an Ort und Stelle zu sperren. Also, wenn Sie gehen und wählen Sie Ihre Statusleiste und halten Sie dann Shift und wählen Sie Ihre Navigation und auch die oberen Optionen hier, gehen Sie vor und aktivieren Sie dieses Kontrollkästchen, wo es sagt feste Position beim Scrollen. Und jetzt, wenn Sie fortfahren und wieder in den Präsentationsmodus gehen Jetzt sehen Sie, wir haben dieses Problem nicht mehr. Und wir scrollen auf Lee auf dieser Listenoption hier. Natürlich ist das einzige Problem dabei, dass ein Teil des Textes hier versteckt ist. So können Sie immer voran gehen und vielleicht ein wenig Leerraum oder ein weißes Rechteck unter der letzten Option hier hinzufügen . Wir werden das hier nicht zusammen tun, aber fühlen Sie sich frei, es als Übung für sich selbst zu tun. Eine Sache, die Sie vielleicht in unserem Präsentationsmodus hier bemerken, ist, dass es kein Schlendern zwischen den Geschäften oder den Speicherkarten hier gerade jetzt, also lassen Sie uns voran und fügen Sie das hinzu, um uns voran zu gehen und zu schließen. Gehen Sie zurück zu unseren Entwürfen, um horizontale Scrolling-Optionen hier für diese Karten hinzuzufügen, müssen wir voran gehen und tatsächlich machen thes Auswahlen Airframe. Also lasst uns das hier rausziehen. Also lasst uns voran gehen und tatsächlich alle meine Speicherkarten hier auswählen. Und dann können wir die Option Befehl G verwenden, um diese Auswahlen einzurahmen und dann zum Prototyp-Tool zu gehen und dann, aus dem Überlaufverhalten, wählen Sie horizontalen Scrollen. Aber wir müssen auch voran gehen und die Größe dieses Frames ändern, um zu passen oder Eltern-Frame hier, und dann, wenn ich jetzt voran gehe und in den Präsentationsmodus gehe, können wir zwischen diesen Optionen scrollen. Aber das ist momentan nicht sehr ideal, weil, ah, wir haben das hier größer gemacht, weil es die ist, die wir betrachten. Also, Idealfall, in einem tatsächlichen Prototyp, möchten Sie die Größe der anderen Karten ändern, um größer und kleiner zu werden, wie Sie sie hier im Rahmen haben . Aber wieder, dieses Tool ist nur, um einen grundlegenden Prototyp zu erstellen, den wir zeigen können, auch. Vielleicht testen Kunden oder Kollegen hier unsere Ideen für das Design. Also eine Sache, die ich erwähnen möchte, wenn Sie im Prototyp-Modus sind, werden Sie dieses kleine Symbol hier sehen, das im Wesentlichen darstellt, was die erste Seite Ihres Prototyps sein wird. Also, wenn Sie dies ändern möchten und tatsächlich diese Anforderungsseite haben, lassen Sie uns sagen, Ihre Hauptseite für den Prototyp sein. kannst du tun. Und jetzt, wenn ich in den Präsentationsmodus gehe, wird es automatisch auf dieser Seite statt auf der Anmeldeseite gestartet. Oder wenn Sie voran gehen und diese Änderung wieder auf die Anmeldeseite hier vornehmen, wird die Anmeldeseite hier als mein erster Frame angezeigt. Cool. Das ist also Prototyping für uns. Und in der nächsten Lektion werden wir diesen Prototyp auf einem tatsächlichen mobilen Gerätanzeigen mobilen Gerät 6. Testen eines echten Geräte: In Ordnung. In der letzten Lektion haben wir gelernt, wie wir eigentlich Prototypen erstellen und diese direkt hier in unserer Feigenkarte ansehen können . Bisher konnten wir unser Mock hier und den Desktop von Sigma präsentieren. Aber was ist, wenn Sie tatsächlich ein gutes Gefühl für Ihren Prototyp auf unserer tatsächlichen mobilen Anwendung bekommen wollen? Wir können das einfach tun, indem wir hier in den gegenwärtigen Modus übergehen, und ich klicke auf Share Prototyp. Von hier aus können wir tatsächlich einen Link kopieren und dann diesen Link auf unser Mobilgerät verschieben, damit Sie ihn entweder per E-Mail an sich selbst senden oder an sich selbst schreiben können . Wie Sie hier sehen können, können Sie einfach auf Safari gehen, den Link dort einfügen, und dann können Sie tatsächlich voran gehen und Ihren Prototyp vorsehen Hier ist Nun, ähm, ähm, obwohl es in ah Website-Interface-Jahr ist, so sieht es nicht mobil aus. Sieht nicht so gut und sauber aus, wie wir wollten. Sehen Sie, alle Seiten hier funktionierten gut, aber Abbildung hat tatsächlich eine Anwendung selbst. Also, wenn Sie den Kopf auf über den App Store, um, um, und dann gehen Sie weiter und gehen Sie einfach vor und suchen Sie nach Fig MMA Spiegel und dann die erste Anwendung dort, die Sie sehen Gehen Sie voran und laden Sie das. Sobald Sie die App öffnen, Bob, müssen Sie sich nur mit dem gleichen Konto anmelden, das Sie für Ihre Designs und Fig MMA verwenden . Sobald Sie sich einloggen, sollten Sie in der Lage sein, Ihre Anwendung jetzt auf eine wirklich schöne Prototyp-Weise zu sehen. Und wenn Sie nur einzelne Frames entwerfen, können Sie auch Ihre Verpflichtungen einsehen. Ähm, diese Feigenmutter, deine App hilft uns tatsächlich einen Prototyp und stöbern unsere Entwürfe, während wir sie entwerfen. Das Leben. Selbst wenn Sie einen einzelnen Frame entwerfen und ihn live auf Ihrer Anwendung sehen möchten, könnten Sie einfach Ihr Telefon direkt neben Ihrem Computer halten und anfangen zu entwerfen und zu sehen, wie diese Änderungen direkt in der Abb. Mom, du bist apus Nun, das ist eine andere Möglichkeit, dass Sie tatsächlich Ihre Vorschau hier für Ihre Entwürfe auf Ihrem tatsächlichen Gerät durchsuchen können. Ziemlich cool 7. Unsere Dateien teilen: So teilen Sie Ihre Figment-Dateien, es ist super einfach. Wenn Sie hier oben rechts neben dem Ort, wo Ihr eigener Avatar ist, können Sie tatsächlich voran gehen und klicken Sie auf die Freigabe-Schaltfläche auf von hier. Sie können tatsächlich jemanden direkt einladen. Hier s, wenn Sie ihre E-Mail eingeben und eine Einladung senden, wird der Link an sie gesendet. Und dann von hier aus, basierend auf wen Sie eingeladen haben, können Sie tatsächlich voran gehen und wählen, welche Art von Erlaubnis sie haben, ob sie einfach sehen können. Oder sie können auch die Entwürfe bearbeiten. Also, wenn Sie es nur an einen Kunden senden, wollen Sie vielleicht nur, dass sie es sehen. Wenn Sie sie jedoch an einen anderen Designer senden, der an diesem Projekt arbeitet, können Sie die Option „Bearbeiten“ auswählen, um deren Berechtigung zu erhalten. Beachten Sie, dass diese Einstellung zur Freigabe des Links gehört, damit Sie tatsächlich einen Link zu Ihrem Projekt erhalten können, den Sie jedem geben können, indem Sie einfach den Link von hier kopieren. Und wenn Sie das tun, wurde der Link in Ihre Zwischenablage kopiert. So wie ein Beispiel, ich habe ah Firefox-Seite hier geöffnet und drücken Sie Enter, sobald es geladen wird, werde ich in der Lage sein, das Projekt tatsächlich zu sehen und es von hier aus zu durchsuchen. Im Moment habe ich keine Berechtigung,eine der Ebenen oder so etwas zu bearbeiten oder zu sehen. Im Moment habe ich keine Berechtigung, Alle conduce Oh ist zwischen meinen Seiten hier wechseln und verschiedene Seiten sehen und einfach die Entwürfe durchsuchen . Dies wäre also großartig, wenn Sie es an einen Client senden, um diesen Link einfach mit ihnen zu teilen und dann die Ansichtsoption zu wählen. Ich kann sogar andere Leute sehen, die derzeit auf diesem Dokument bearbeiten. Es zeigt mir nur meine Desktop-App. Hier offen ist niedrig und zeigt Ihnen sogar andere Leute auf dieser Seite öffnen. Sie können sogar voran gehen und die Entwürfe von hier als auch, wenn das funktioniert genau wie erwartet. Also wieder, Sie können Ihre Projekte von hier aus teilen, und Sie können sogar einen einzelnen Frame eso auswählen, wenn zum Beispiel ich zum Beispielnur diese Login-Seite hier teilen möchte. Ich kann zu Aiken ausgewählt gehen und dann zu teilen gehen und dann mit dem ausgewählten Frame verknüpft auswählen , der jetzt automatisch ausgewählt wird, weil ich nur einen Frame habe. Aber wenn Sie das ganze Projekt teilen wollen, wie wir es vorher getan haben. Gehen Sie einfach weiter und klicken Sie auf irgendwo außerhalb Ihres Campus, Ähm, und dann können Sie die Freigabe verwenden, aber und ich werde Ihren Ruhm eine Akte mit jedem teilen, den Sie möchten. Sie sind immer mehr als willkommen, Ihre Projekte mit mir zu teilen. Und ich werde gerne einspringen und ein paar Feedback und Kommentare für Sie hinterlassen, um Ihre Entwürfe zu verbessern . Nun, beim nächsten Hören, werden wir untersuchen, wie Sie tatsächlich mit Teams in Fig MMA arbeiten können. 8. Arbeiten mit Teams: Wie wir bereits erwähnt haben, ist Sigma wirklich mächtig in Bezug auf die Zusammenarbeit mit einem Team. Wenn Sie also mit einem Team an diesem Projekt oder einem anderen Projekt arbeiten möchten, in der Tat wieder können Sie in der Tat wiederauf die Freigabeoption gehen und dann die E-Mail dieser Person eingeben. Sie erhalten einen Link, wo sie tatsächlich mit Ihnen an diesem Projekt arbeiten können. Aber bevor wir das tun, wir an, Sie arbeiten mit einem Team an mehreren Projekten und möchten dieses Team tatsächlich für mehrere Projekte in Ihrer Feige MMA einrichten. Also, um das zu tun, zuerst müssen wir auf die gefälschte meine Homepage gehen, die ich auf der Web-App bekomme. Sie müssen nur zur Menüoption gehen und zurück zu Dateien wählen. Und dann von hier. Wenn ich hier runtergehe, sehe ich, dass es eine Möglichkeit gibt, ein neues Team zu erstellen, also werde ich das tun. Es wird Sie bitten, Ihrem Team und Namen zu geben. , Stellen wir uns vor,wir arbeiten mit einem sauberen Känguru-Team an diesem Projekt. Erstellen Sie ein Team, und dann können Sie Ihre Mitarbeiter von hier aus hinzufügen, indem Sie einfach ihre E-Mail in. Also werde ich einen meiner Kollegen einladen, mich an diesem Projekt anzuschließen. Also werde ich ihre E-Mail hier reinlegen. Gehen Sie weiter und fahren Sie fort. Und jetzt wird es Sie bitten, Ihre Teampläne zu wählen. Wenn Sie also mit mehreren Personen arbeiten, möchten Sie vielleicht mit einer professionellen oder organisatorischen Anlage arbeiten, aber der kostenlose Plan gibt Ihnen Zugriff auf bis zu zwei Editoren und drei Projekte. Also lasst uns voran gehen und diesen Starter für jetzt wählen. Und dann haben wir hier ein Team, in dem wir tatsächlich das Logo zuweisen können. Wir können den Namen und die Beschreibung und alles hier auch ändern. Und Sie können Ihrem Team sogar noch mehr Leute hinzufügen, von hier aus. Einmal während Ihres Teams können Sie ein neues Projekt erstellen. Hier s so lassen Sie uns voran und erstellen Sie ein Projekt. Und nennen wir es IOS Mock up. Und dann können Sie wählen, welche Art von Berechtigungsstufe Menschen bei sauberem Känguru-Team haben werden , so dass ich wählen kann. Sie können es entweder bearbeiten oder sie können es sehen, oder Sie können es nur einladen, ich werde es bei jedem bei Clean Kangaroo lassen können bearbeiten, und ich werde voran gehen und Projekt erstellen. Und sobald ich mein Projekt erstellt habe, kann ich entweder eine neue Datei erstellen, die einfach Dateien von außen nach hier ziehen würde. Oder da wir hier bereits einen Entwurf für das Clean Kangaroo Projekt haben, werde ich voran gehen und das hier direkt in mein sauberes Känguru rus Marca Projekt ziehen . Und jetzt, wenn ich hier reingehe und es öffne, haben wir hier Zugriff darauf, und dann wird mein Kollege in der Lage sein, auch an diesem Projekt teilzunehmen. Und jetzt, von hier aus, können Sie sogar einen kleinen Avatar sehen, den sie bei dem Projekt mitgewirkt haben. Also jetzt, während ich meine eigenen Anpassungen an das Design mache, können sie einspringen und anfangen, Änderungen an anderen Seiten so niedrig zu machen. Also, ich bin hier, vielleicht mache ich meine eigenen Bearbeitungen. Ah, sie werden mit mir an dem Projekt arbeiten, vielleicht auf einer anderen Seite. Und ich kann ihre Arbeit hier sehen, wenn ich hier oben auf ihren Avatar klicke. Und so kann ich jetzt von hier aus sehen, wie sie funktionieren. Das Leben s so, wenn Sie mehrere Leute mit Ihnen arbeiten, aber Sie können genau sehen, wer tut, wer gerade an was arbeitet. Beobachte sie auch. Und dann können Sie sogar voran gehen und Kommentare für sie hinterlassen. Also, wenn Sie sich daran erinnern, dass wir über dieses gemeinsame Werkzeug gesprochen haben, können Sie auch tatsächlich sagen, indem Sie einfach C auf Ihrer Tastatur drücken, Ich kann voran gehen und einen Kommentar hier hinterlassen und sagen, Vielleicht können wir ihnen sagen, wann die Zahlung belastet wird. Lassen Sie diesen Kommentar für sie und sie werden in der Lage sein, mir tatsächlich eine Schwung direkt in Fig MMA auf wieder mit einem gemeinsamen Stuhl zu antworten . Sie können zu jedem Teil der Seite gehen und einen Kommentar für diesen Teil der Seite s hinterlassen, damit die anderen Designer genau wissen, wovon Sie sprechen. Wenn Sie auch diese Kommentaroption hier von der Seite getippt haben, können Sie auch alle Kommentare sehen und sie durchsuchen und Antworten hinterlassen und schnell zu den Kommentaren gesprungen , auf die Sie vielleicht antworten möchten, oder um die Antworten zu sehen, die Ihr Team gemacht hat so wieder sehr mächtig. Und er kann den Escape-Schlüssel benutzen, um aus dem gemeinsamen Werkzeug herauszukommen. Cool. Also, das sind Teams für Sie und wieder Figur. Es ist super leistungsstark, und es hilft Ihnen wirklich, produktiver mit Ihren Entwürfen und mit in Ihrem Team zu werden. 9. Überlagerungen für das Tutorial: Alles klar. Bisherkonnten wir einen ziemlich einfachen Prototyp zusammenstellen, der wirklich gut funktioniert. Bisher Und wir haben sowohl auf Sigma als auch auf unseren tatsächlichen mobilen Geräten getestet. Also, jetzt werden wir die Dinge ein wenig weiter auf und erkunden einige der fortschrittlicheren Tools, auf die wir Zugriff haben in Prototyping für Ihre eigenen Design-Projekte und Prototypen ist gut, Ich ermutige Sie, einige dieser Tools zu verwenden, um Machen Sie Ihren Prototyp wirklich aussehen und fühlen, Riel. Das erste, was wir tun werden, ist eigentlich voran zu gehen und zu erkunden, welche Overlays im Prototyping sind . Wir werden das tun, indem wir einen neuen Weg durch unser Tutorial zu gehen. Schritt 12 und drei hier drüben. Wie Sie hier sehen können, haben wir diese drei Seiten angeschlossen, ähm, ähm, mit den nächsten Schaltflächen und dann mit unserem Tutorial, aber auf unserer Anmeldeseite. Aber welches Signal Sie auch tun, ist eigentlich offen und überlagern oben auf der Seite, die bereits geöffnet ist . Im Wesentlichen würde das uns einen besseren Weg geben, diese Tutorial-Karten tatsächlich zu präsentieren, anstatt neue Seiten für jeden von ihnen zu präsentieren. Um zu demonstrieren, dass wir voran gehen und tatsächlich jede dieser aufregenden Karten aus diesen Seiten duplizieren , dann legen Sie sie irgendwo hier oben. Und dann werden wir unsere Verbindungen ändern, um die Tutorial-Karte dort drüben durchzugehen . Also zuerst, lasst uns voran gehen und unser Tutorial auswählen. Schritt eine Seite ausgewählte Tutorial-Karte. Stellen Sie sicher, dass Sie alles ausgewählt haben, ähm, innerhalb unserer Tutorial-Karteninstanz hier drüben. Und dann, während Sie alt halten, können Sie voran gehen und eine Kopie nach draußen ziehen, was wir tun wollen. Und ich mache das Gleiche für zwei. Auf Rocard. Schritt zwei, ziehen Sie eine Kopie hierher. Und zu guter Letzt gehen wir weiter und machen dasselbe für unser Tutorial. Schritt drei Karte. Und ich werde nur gehen und sicherstellen, dass diese Luft richtig aufgereiht ist, nur um sie organisiert zu halten . Alles klar, also zuerst, lasst uns voran gehen und diese Hauptverbindung aus dem Tutorial-Button hier auswählen. Lassen Sie mich einfach voran und zoomen Sie hier drüben ein bisschen rein. Cool. Statt hier rüber zu gehen, werden wir diese spezifische Verbindung zwischen dem Nervenkitzelknopf und dieser Seite löschen . Wählen Sie einfach diese Verbindung aus und löschen Sie dann schnell auf Ihrer Tastatur, die weitergeht und entfernen Sie einfach die Verbindung. Und dann werden wir gehen weiter und ziehen eine neue Verbindung zu dieser Tutorial-Karte, die 1. 1 hier drüben, die wir haben und jetzt auf der rechten Seite, anstatt zu navigieren, werde ich voran gehen und wählen, offen übermäßig und wieder, die uns bleiben lassen auf der Seite, die auf waren und gehen Sie einfach voran und öffnen. Diese haben Overlays oben auf der Seite, und Sie werden sehen, wie das funktioniert in nur einer Sekunde. Als nächstes wollen wir einfach voran gehen und diese Tasten auch richtig verknüpfen. Lassen Sie uns voran und wählen Sie diese 1. 1 hier drüben. Lassen Sie uns diese Verbindung für die Schaltfläche entfernen und gehen Sie weiter und Drachen neue Verbindung zum nächsten Schritt. Und anstatt zu navigieren, wollen wir voran gehen und tatsächlich Fremdheit zu tauschen. Stellen Sie sicher, dass Sie das auswählen, da das Overlay sonst nicht richtig funktioniert. Gehen wir weiter und machen genau das Gleiche hier drüben. Lassen Sie uns diese Verbindung auswählen und löschen Sie hier und ziehen Sie sie auf diese Seite über hier und wieder. Du willst es ändern, um damit aufzuhören. Und schließlich, für diesen Button, den wir hier drüben haben, die Schaltfläche fertig, anstatt zurück zu dieser Seite zu navigieren ? Da wir bereits auf dieser Seite sind und wir gerade geöffnet und übermäßig haben, können wir Navigate tatsächlich ändern, um nur Overlay zu schließen und das direkt dort zu verdoppeln . Lassen Sie uns also nicht voran gehen und testen Sie es, indem Sie hier den gegenwärtigen Modusknopf drücken. Wir denken nur, dass es an zweiter Stelle ist, um zu aktualisieren, und dann gehen wir weiter und klicken Sie auf unsere Tutorial-Karte, aber in und dann, wie Sie sehen können, ist die Redaktionskarte hier oben und alles funktioniert wie erwartet. Nicht das Einzige, was Sie vielleicht bemerkt haben, ist, dass wir nicht den gleichen dunklen Hintergrund haben . Und so verschmelzen die Overlays irgendwie mit dem Hintergrund. Lassen Sie uns voran und arbeiten Sie jetzt daran, also lassen Sie uns einfach schließen und dann, was wir tun wollen, ist, dass wir voran gehen und wählen Sie diese erste Karte hier drüben, wählen Sie die Verbindung hier drüben, die wir haben, und dann über hier gibt es uns eine Reihe von Optionen, die durchgehen werden. Erstens haben Sie die Möglichkeit, auszuwählen, wo Sie das übermäßig sein möchten. , Zum Beispiel, wenn Sie ein Menü haben, im Gegensatz zu einer Karte hier, die Sie zeigen möchten, können Sie etwas wie die oben links auswählen. Oder wenn Sie etwas haben, das von unten präsentiert wird, können Sie unten in der Mitte tun. Diese Optionen funktionieren also gut für Menüs oder Tab-Leisten und Dinge wie die, die Sie vorübergehend auf Ihrer Seite öffnen möchten. Und dann haben Sie hier zwei Möglichkeiten. Einer ist geschlossen. Wenn Sie draußen klicken. Wir gehen weiter und wählen das aus, und ich erkläre in der Sekunde, was das macht. Und dann gehen wir weiter und fügen Hintergrund hinter Overlay, was wir wollen. Hier drüben geben wir dir die Farboption, die wir uns einfach schwarz lassen wollen. Und dann wollen wir voran gehen und sagten, sie werden Stadt zahlen, um schreiben 45%. Also, jetzt, wenn ich vorgestellt wird bemerken zwei neue Dinge passiert hier. Gehen wir weiter und öffnen Sie die Tutorial-Karte. Also, wie Sie sehen können, habe ich ein bisschen einen dunklen Hintergrund. Nun, ähm, Sie können es dunkler machen, wenn Sie wollen, aber ich denke, das ist ziemlich gut für jetzt. Beeindrucken Sie die nächste. Als nächstes funktioniert das. Und dann, wenn Sie sich erinnern, haben wir eine Option ausgewählt, mit der wir die übermäßig schließen können, indem Sie draußen tippen. Im Wesentlichen bedeutet das, dass, wenn Sie irgendwo außerhalb des übermäßig sichtbaren automatisch schließen tippen . Versuchen wir das hier drüben. Lassen Sie uns hier klicken, und das funktioniert auch. So hat der Benutzer jetzt die Möglichkeit, jederzeit aus dem Tutorial zu beenden. Aber nur auf der Außenseite klicken, oder sie können durch sie gehen und schnell wie gewohnt gemacht. Das ist ziemlich cool. Und es ist unser Arbeitsprotokoll vereinfacht. Sie können sogar voran gehen und entfernen Sie diese Tutorial Schritt einen Schritt zwei Schritt drei Seiten. Aber im Moment werde ich das nicht tun. So verwenden Sie Overlays im Prototyping 10. Öffnende Links: Ich möchte Ihnen noch eine wirklich coole Sache zeigen, die Sie mit Prototyping machen können. Also lassen Sie uns sagen, für die Anmeldeseite hier drüben, wir wollen voran gehen und diese Schaltfläche hier zu verknüpfen, oder diese Nutzungsbedingungen und Datenschutzrichtlinie, um tatsächlich eine Webseite zu öffnen, wenn ein Benutzer darauf klickt. In der Regel passiert das in vielen Anwendungen. Wenn Sie auf diesen Link klicken, wird es weitergehen und ihre Nutzungsbedingungen und Datenschutzrichtlinie öffnen. Jetzt können Sie voran gehen und diese in zwei verschiedene Links trennen, wenn Sie möchten. Aber für den Moment, zum Zweck der Lektion, werde ich dies nur mit einem Link verbinden. Also, was Sie tun möchten, ist, gehen Sie voran und wählen Sie den Text und stellen Sie sicher, dass Sie sich im Prototyping-Modus befinden. Lassen Sie uns voran und fügen Sie eine Interaktion von auf Hahn. Also wieder, was das bedeutet, ist, dass, wenn der Benutzer auf diese Schaltfläche oder den Text hier drüben tippt, dann etwas tun und in diesem Fall, anstatt zu navigieren oder etwas anderes zu tun, was wir auswählen möchten offener Link, und was uns dies erlaubt, ist tatsächlich in eine U R L hier oben, von wo aus eine Webseite in einem separaten Fenster öffnet, wo der Benutzer gebracht wird. Also in diesem Fall habe ich gerade Google Dot com eingefügt, aber Sie können es durch das Projekt ersetzen, an dem Sie arbeiten, umes wirklich auf , um die Anwendungsfälle anzuwenden. In Ihrem Fall, Lassen Sie uns voran und präsentieren, dass. Und jetzt, wenn Sie das testen wollen, klicken wir einfach hier drüben und Sie werden feststellen, dass sich eine andere Webseite öffnet. Wir legen Sie auf und fahren mit diesem Link fort. Ich weiß, dass dies kein Super-Ideal für einen Prototyp ist, aber es ist wirklich das nächste, was wir an diesem Punkt bekommen können, um Links direkt von einem Prototyp zu öffnen . Ziemlich cool. Ich möchte Ihnen auch eine letzte Sache in dieser Lektion zeigen. Lassen Sie uns sehen, dass Sie sich irgendwann entscheiden, Ihren Prototyp in einem anderen Gerät zu präsentieren. Ähm, du kannst einfach an einer beliebigen Stelle außerhalb deiner Leinwand klicken, wo es einen leeren Bereich gibt , und dann wieder auf die Seite. Während Sie im Prototyping-Panel sind, werden Sie sehen, dass Sie hier eine Geräteliste haben. Sie können wählen aus, So gehen Sie auf jeden Fall voran und spielen Sie herum mit, um und sogar gehen Sie voran und ändern Sie das Modell Ihres iPhone oder Gerät, das Sie haben. So können Sie die Farbe dieses iPhone zum Beispiel zum Beispiel auf Mitternachtsgrün oder Silber und Raumgrau ändern. Und du kannst sogar so weit gehen, wie du den Hintergrund in deinem Prototyp vielleicht auch zu einer helleren Farbe änderst , oder? So dass, wenn es präsentiert, wird es ziemlich einzigartig für Ihr Projekt sein. 11. Animationen hinzufügen: Eine Sache, die Sie vielleicht bemerkt haben, ist, dass wir bisher die Instant-Animation verwendet haben, was im Wesentlichen nur bedeutet, sofort zwischen Seiten zu wechseln oder zwischen Seiten zu navigieren oder Overlays zu öffnen, anstatt komplexer zu werden und Animationen hinzuzufügen. Aber was ist großartig in Fig Mayes, dass Sie auch einige wirklich realistische und schön aussehende Animationen zu Ihren Projekten hinzufügen können ? Das ist also, was wir in dieser Lektion erforschen werden. Also zuerst, was ich Ihnen zeigen möchte, ist, dass Sie tatsächlich voran gehen und wählen Sie die Tutorial-Option hier, wo wir eine Verbindung erstellt haben, um eine übermäßig zu öffnen und dann können Sie gehen und wählen Sie die Animation, auch. Lassen Sie uns einziehen. Also, was Bewegung tut, ist, dass es? Anstatt dieses Overlay sofort oben auf der Seite zu zeigen, werden wir es tatsächlich in unsere Seite animieren, also zeigen Sie, wie das funktioniert. Lassen Sie uns in einem 2. 1. Mal eine Reihe von Optionen hier durchgehen. Wenn Sie die Verschiebung in auswählen, haben Sie eine Reihe von Optionen, in denen das Objekt animiert wird Sie können also von der rechten Seite nach links von links nach rechts, von oben nach unten und von unten nach oben ausführen. Also für so etwas, ich denke, es in Top-Arbeit wirklich gut gekauft. Und dann werde ich nicht zu viel in die Details bekommen, was die Optionen bedeuten. Aber im Wesentlichen wird die Animation auf diese Weise abgespielt. Wenn Sie Saison auswählen, wird die Animationskurve auf der Öffnung glatter. Wenn Sie „ease out“ auswählen, wird die Animation beim Schließen oder am Ende dieser Animation glatter. Und dann, wenn Sie wählen, er ist in und aus, wird es voran gehen und tatsächlich einen reibungslosen Übergang in und ein reibungsloser Übergang aus linear wird nur voran gehen und halten Sie es sehr einfach. Dies ist also die grundlegendste Art von Animation, die Sie haben können. Ich denke, das am besten aussehende ist das einfache Ein- und Aussteigen, weil es schaffen wird. Es ist wirklich ein reibungsloser Übergang. Beide Wände der Form kommen herein, und wenn sie anhalten und verlangsamen wird, ist dies die Zeit, die benötigt wird, bis diese Animation abgeschlossen ist. Im Wesentlichen, wenn Sie eine Animation verlangsamen möchten, könnten Sie diese Zahl einfach erhöhen. Es ist in Mili Sekunden vertreten. Im Moment ist es also auf 300 Millisekunden, also wären 1000 Millisekunden eine Sekunde. Das ist also technisch 1/3 einer Sekunde. Warum ändern wir das nicht auf eine halbe Sekunde? Ich denke, für so etwas würde es besser aussehen und Sie werden es wieder bemerken. Hier unten erhalten Sie eine Art Beispielanimation so niedrig. Wenn Sie fortfahren und mit dem Mauszeiger darauf klicken, wird es wiedergegeben und Ihnen zeigen, wie diese Geschwindigkeit aussehen wird. Also für eine Sekunde oder 1000 Millisekunden, wird es eine Animation wie diese abspielen. Und wenn Sie 500 Millisekunden tun, werden wir eine etwas schnellere Animation machen, so dass es tatsächlich sehen, dass Untätigkeit. Also, wenn du das spielst, wirst du sehen, dass die Karte von unten sehr schön kommt. Ich kann es durchmachen und es würde von unten verschwinden, wo es herkam. Ziemlich cool, sehr glatt, sehr realistisch. 12. Seitenübergänge: Alles klar, jetzt haben wir eine schöne Animation beantragt, die hier drüben übermäßig sind. Lassen Sie uns voran und erstellen Sie etwas Schönes für den Rest der Seiten. Hier drüben ist gut, so sieht es ein wenig realistischer und interaktiver aus. Also lassen Sie uns unsere Login-Seite hier auswählen. Und dann, was ich tun möchte, ist eine neue Verbindung von der Anmeldung mit E-Mail, aber hier drüben zu meiner Zahlungsseite zu erstellen. Und hier drüben möchte ich eigentlich voran gehen und auswählen. Schieben. Im Wesentlichen, was das tun wird, ist nur voran und leicht von Seite acht Seite so von dieser Seite, es wird vor und gleiten Sie in diese Seite, was wir wollen. Typischerweise in einem Fall wie diesem möchten wir in einem Fall wie diesemdiesen diesen anstelle von Instant ersetzen. Wir wollen auch Push tun und wieder, das wird das gleiche tun und von der Karte. Legen Sie es hier, gehen Sie vor und wählen Sie diese Verbindung hier drüben zwischen der Speicheradresse und einer Anfrage Strand hier und statt sofort, was wir versuchen, bewegen Sie sich ein und tun Sie von oben. Wir gehen weiter und versuchen das und sehen, wie es aussieht. Ich denke, für den Rest der Seiten sieht es ziemlich realistisch aus. Wir müssen also nicht wirklich weitermachen und dort etwas ändern. Etwas anderes, das Sie als Übung tun können, ist gehen Sie voran und erstellen Sie mehr Verbindungen und mehr Animationen zwischen, Nehmen wir an, die Karte aber hier drüben und die Zahlung in der Abmelde-Button Zaslow. Also lassen Sie das als eine Übung für Sie zu tun. Gehen wir voran und spielen das jetzt. Also, jetzt, wenn wir die Anmeldung mit E-Mail tun, wird es in diese Seite gleiten, wie Sie sehen können, wird bei Card ziemlich schöne Adresse speichern, und es wird uns zu dieser neuen Seite hier führen. Beim zweiten Gedanken wäre es vielleicht schöner, wenn Sie sich von unten nach oben bewegen. Also werde ich voran gehen und diese Änderung vornehmen. Und wirklich, bei solchen Dingen geht es darum, verschiedene Dinge zu experimentieren und auszuprobieren, Ähm, es gibt hier keine 100% richtige oder falsche Antwort. Das ist wirklich das, was realistischer und benutzerfreundlicher aussieht. Ich würde sagen, jetzt, wenn ich Adresse speichern, Ich denke, das sieht besser aus. Und zwischen meinen anderen Seiten funktioniert es auch wie erwartet, ziemlich cool 13. Interaktive Karten: so vergessen, es wird schön sein, Ihnen eine wirklich gekochte Art und Weise zu zeigen. Sie können eine Karte oder ein Bild einer Karte wie diese in einen echten Prototyp verwandeln, der echt aussieht und sich anfühlt. Um dies zuerst wie immer zu tun, stellen Sie sicher, dass Sie sich hier im Prototyp-Modus befinden und dann gehen Sie weiter und wählen Sie die Karte aus. Äh, Rechteck hier drüben. Also diese Option hier drüben, wo Sie Rechteck sehen, das die Karte hier drüben darstellt, und ich werde voran gehen und Wand halten Shift und Ault, Ähm, und es ist wichtig, dass Sie diese zusammen tun. Also halten, Kult verschieben, werden wir voran gehen und die Ecke hier drüben halten und es einfach ein bisschen größer machen. Nicht zu viel, denn sonst wird es das Bild verzerren. Ich, das ist gut. Also, jetzt wollen Sie tun, ist gehen Sie voran und wählen Sie den Kartenrahmen hier alle zusammen. Gehen Sie auf die Seite hier drüben, rechts hier drüben, wo Überlaufverhalten steht. Lassen Sie uns das auf horizontales und vertikales Scrollen wechseln, und Sie werden sehen, wie das in nur einer Sekunde funktioniert. Aber bevor wir das tun, wollen wir nicht, dass sich etwas anderes als die Karte selbst hierher bewegt, also wollen wir nicht, dass sich die Suche und die Schaltflächen hier bewegen. Lassen Sie uns voran und fügen Sie all diesen Elementen einige Einschränkungen hinzu. Also etwas, was Sie tun könnten, ist, gehen Sie voran und wählen Sie die Statusleiste hier und dann, während Sie Verschiebungen wie die Suchleiste gedrückt halten, dann wählen Sie das Cursor-Symbol hier und auch die Speicheradresse. Ich denke, das ist alles, was wir wollen, um auf dieser Seite zu bleiben. Also gehen Sie jetzt über zum Design-Panel und ich gehe voran und wähle diese Option feste Position beim Scrollen. Also, wenn Sie diesen Prototyp präsentieren, werden Sie sehen, dass ich tatsächlich scrollen kann und die Karte und es sieht ziemlich realistisch . Es funktioniert. Also ja, so erstellen Sie eine interaktive Karte mit dem Fig Mas Prototyping-Tool. 14. GIFs spielen: Ich dachte, ein Prototyp wäre natürlich, der nicht vollständig wäre, bis ich Ihnen einen Weg zeigen kann tatsächlich bei animierten GIFs in Ihr Projekt zu bringen, um Ihre Designs wirklich modern und vollständig zu fühlen . Also, natürlich können Sie jeden Jif von außen aus Ihrem Download-Ordner oder irgendwo anders in Ihr Figuren-Projekt ziehen , und Sie können es wie ein Bild irgendwo auf dem Bildschirm platzieren. Und es wird einfach weitergehen und funktionieren, wie erwartet, wenn Sie voran gehen und es in einem wirklich nützlichen Animationswerkzeug präsentieren, auf das ich vor nicht allzu langer Zeit gestoßen bin . Augen hier sind blutig genannt. Es wurde tatsächlich von Airbnb entworfen, und wie sie es erklären, können Sie problemlos hochwertige Animationen zu jeder nativen App hinzufügen. Natürlich, hier fügen wir es nur zu einem Prototyp hinzu. Aber du verstehst die Idee. Es wird uns wirklich helfen, interaktiver in echten Prototypen aus Sigma zu erstellen. Ich werde den Anmeldeprozess nicht durchlaufen, aber ah, Sie müssen ein Konto erstellen. Wenn Sie Lottie verwenden möchten, sie haben einen Stecker in Fig ma, so können Sie gehen und suchen Sie nach Lottie-Dateien in den Plug Ins tippen und dann gehen Sie weiter und installieren Sie es. Und wieder, wenn Sie völlig neu in Fig MMA sind und alle diese Dinge lernen möchten, wie man Plug Ins verwendet und was sie für Ihr Projekt tun können, empfehle ich definitiv, mein komplettes Handy zu überprüfen. Sie sind Ihr X Kurse niedrig. Aber für die Zwecke dieser Lektion, lassen Sie uns fortfahren und den Stecker in installieren. Also, wenn es Ihr erstes Mal in Soling Plug Ins ist, gehen Sie einfach auf die Managed Plug Ins Taste hier drüben und suchen Sie dann nach Lawdy Dateien und gehen Sie voran und installieren Sie es. Sobald Sie es installiert haben, können Sie voran gehen und es hier finden. Also habe ich eine Menge Steckdosen hier drüben. Ich liebe es, Plug Ins zu verwenden, weil es mir einfach das Leben erleichtert. Auf. Wie Sie sehen können, kann ich hier eine Menge Dateien finden. Ich werde es aufmachen. Und dann wieder, wenn du keine Zählung hast, könnte es dich bitten, hier drüben zu bleiben. Also machen Sie einfach eine Pause hier drüben. Wenn Sie sich einloggen und dann wieder zur Lektion zurückkehren müssen, und wenn Sie wieder eingeloggt sind, können Sie zur Suche gehen. Und wie Sie sehen können, haben sie eine Reihe von schön aussehenden animierten Gifs, die Sie in Ihrem Projekt verwenden können, was super cool ist. Also, nur zu Demonstrationszwecken, werde ich einfach einen davon auswählen, ähm Jeffs hier drüben, also weiß ich es nicht. Machen wir das hier drüben. Er sieht cool aus. Und stellen Sie sicher, dass Sie hier drüben zu Jeff konvertiert haben. Also, jetzt gehen wir weiter und wählen Sie unseren Zahlungsrahmen hier drüben. Ich möchte weitermachen und es einfach hier rüber legen, nur um zu demonstrieren und dann weiter gehen und auf zwei Fig MMA klicken. Und wie Sie sehen können, hat es es direkt dort hinzugefügt. Also, jetzt konnte er einfach voran und fügte hinzu, Überall, wo Sie wollen, mal sehen. Werde es hier rüber und du kannst es ändern, wenn du uns gut willst, damit wir es im Vollbildmodus machen können . Wir können so weit gehen, dass wir es sogar beschneiden. Und wenn Sie es beschneiden wollen, können Sie das von hier aus tun. Stellen Sie nun sicher, dass Sie keinen Teil der Animation ausschneiden. Lassen Sie uns voran gehen und präsentiert. Und jetzt, wie Sie sehen können, werden Sie voran gehen und die Animation hier spielen. Es ist in diesem Fall nicht super relevant, aber wenn Sie eine Seite haben, zum Beispiel, wo Sie etwas erklären oder Ihre Preise zeigen oder etwas bewerben möchten, könnte das Hinzufügen einer schönen genau so eine nette Möglichkeit sein, beeindrucken Sie Ihre Benutzer. Cool. Also zögern Sie nicht, damit herumzuspielen und Ihrem Design verschiedene Animationen hinzuzufügen, während Sie mit Prototypen arbeiten. 15. Smart Animation: Alles klar. Also, bevor wir den Prototypenkurs hier einschließen, möchte ich Ihnen eine weitere wirklich coole Sache in Fig MMA zeigen, mit dem Prototyp zu und das heißt smart, animieren, smart, smart, animieren wirklich ermöglicht es Ihnen, zu erstellen einige dieser wirklich reibungslosen Übergänge zwischen einer Seite , die ähnlich aussieht oder zwischen verschiedenen Zuständen derselben Seite. Und was das wirklich bedeutet, ist, dass wir sagen, Sie haben eine Seite und Sie möchten etwas erweitern oder zusammenbrechen zeigen . Dies wäre wirklich großartige Beispiele dafür, wie Sie intelligente, animierte Zehe verwenden können , sie aussehen riel und fühlen sich real für Benutzer mit dem Prototyp-Tool. Also, um zu demonstrieren, werde ich tatsächlich eine weitere Kopie der Anforderungsseite hier erstellen. Und dann, was wir tun werden, ist, dass wir einen Zustand schaffen, in dem, wenn der Benutzer auf, sagen wir, diese Jax Laundry Shop-Karte hier drüben, sie wird erweitern und vielleicht mehr Details oder eine Beschreibung oder so etwas zeigen. Das ist ziemlich typisch in einer Anwendung wie dieser, wo Sie vielleicht mehrere Karten haben, die Sie betrachten, weil Sie damit mawr Informationen durchsuchen können . Nehmen wir an, Sie möchten mehr über diesen Wäschereiladen von Jax erfahren. Vielleicht lesen Sie einige der Bewertungen, erfahren Sie mehr über die Preise und so weiter, aber sie halten es einfach. Ich werde nur einen anderen Zustand dieser Karte erstellen und dann vielleicht auch einen Beschreibungstext hinzufügen . Was ich also tun möchte, ist, dass ich diese Anforderungsseite hier drüben dupliziere, indem nur Kult halte und dann eine Kopie hierher ziehe. Das ist gut. Genau da. Also, jetzt gehen wir auf diese Seite hier drüben. Fühlen Sie sich frei, mitzuverfolgen, wenn Sie wollen. Die ersten Dinge zuerst. Ich werde Thies verschieben, um Karten aus dem Weg zu speichern, indem ich nur Shift gedrückt halte und die Pfeiltasten oft dasselbe hier drüben mache . Nun, eine Sache, die ich hier wirklich betonen möchte, ist, dass, wenn Sie animate oder smart animate richtig in Sigma verwenden möchten , Sie sicherstellen müssen, dass Sie die Dinge in der gleichen Ebene und in der gleichen Hierarchie hier behalten . Wenn Sie also die Layer hier ändern, funktioniert die Animation wahrscheinlich nicht wie erwartet. Ich habe diesen Fehler selbst mehrfach gemacht. Ich möchte nur sicherstellen, dass Sie nicht den gleichen Fehler machen und dann versuchen, herauszufinden, was das Problem ist. Also, jetzt möchte ich gehen und diese Hauptkarte hier rüber bewegen, die ich in die Ecke schaue . Oder ziehen wir das vielleicht ein bisschen hier rüber, um mehr Arten hinzuzufügen, und dann gehen Sie weiter und bewegen Sie das einfach nach oben, und ich werde die Schicht halten und das über die ganze Breite erweitern . Und lassen Sie uns voran und löschen Sie das einfach. Wählen Sie hier Ihren Wäscherei-Text aus und wählen Sie dann die Karte hier aus. Gehen wir zurück zum Design und lassen Sie uns weitermachen und einfach den Drop Shot hier verstecken. Wir wollen es nicht im Staat, es sei denn, ich füge ein Textbuch hinzu, indem ich auf Tee klicke und dann Lehrbücher hierher ziehe. Ich tippe nicht nur mit einem linken die Zeile. Das ist Jacks Wäscherei. Wir tun unser Bestes, um unsere Kunden mit ihrer Wäsche zufrieden zu halten. Ich schreibe nur ganz zufällige Texte hier drüben. Dann werde ich weitermachen und einfach den Stil des Textes hier drüben lösen. Und wählen Sie Körper Carla 14 bedeutet besser für eine Beschreibung, Text und nur gehen, um sicherzustellen, dass es richtig ausgerichtet ist niedrig ist, und ich denke, alles andere sieht jetzt wieder gut aus, Sie können eine Reihe von anderen Sachen darunter später hinzufügen und vielleicht sogar machen diese Scroll-Kräuter, wenn Sie wollen. Aber nur um diese gleiche Umfrage zu halten, werde ich eine kluge Animation mit genau dem, was wir hier haben, machen, damit ich das Gefühl, dass der Benutzer mehr Informationen über Jacks Wäsche lesen möchte . Sie können einfach darauf klicken, und dann wird es smart animieren in diesen Rahmen hier drüben, wo sie mehr lesen werden. Und vielleicht, wenn sie wieder oben auf das Bild, es wird zurück in den Staat gehen. Also, genau wie jede andere Verbindung, lassen Sie uns voran und wählen Sie diese Karte hier drüben. Gehen Sie zum Prototyp und ich erstelle eine Verbindung zu dieser Seite hier und jetzt, statt einer sofortigen Animation, die Sie smart wählen möchten, animieren, Sie werden sehen, Abbildung gibt Ihnen eine schöne Art von Animation hier, um zu erklären, was smart animate tut so niedrig hier drüben ist nur zusammenbrechen oder erweitern diese Karte hier nur ähnlich wie das, was wir tun. Wir erweitern diese Karte, um mehr Informationen zu zeigen, also habe ich in und heraus ausgewählt hier gelockert . Und dann anstelle von 700 Millisekunden können Sie vielleicht 300 machen. Ähm, es ist besser. Servieren Sie es schneller Übergang hier drüben. Und schließlich schließlich möchte ich diesen Türschutz hier auswählen und dann hier eine Verbindung in diese Seite ziehen und dann dasselbe tun. Klug, animieren. Ich möchte nicht für die Option über ein Jahr erwähnen, die Sie auswählen können, navigieren Sie und dann dasselbe hier drüben. Also jetzt, wenn Sie vorgestellt, Sie werden sehen, ich habe meine Wäschekarten durch hier, und dann, wenn ich darauf klicke, wird es erweitern und mir mehr Möglichkeiten zum Lesen geben. Wenn ich noch einmal drauf bin, wird es verschwinden. Nicht wieder, wenn Sie einen schnelleren Transaktionsübergang erstellen möchten, weil ich denke, dass es gerade ein bisschen langsam ist, können wir 200 Millisekunden machen, und dann auch für diese. Lassen Sie uns jetzt 200 Millisekunden machen. Wenn er es getestet hat, denke ich, das sieht ziemlich gut aus. Cool. Das ist also ein Beispiel für einen klugen Feind. Ich habe hier selbst ein anderes Beispiel eingerichtet, wo wir im Wesentlichen von dieser Profiloption zu dieser hier drüben gehen. Wenn sie hier auf die Karte klicken, so dass der Benutzer hier auf diese Karte klickt, würde es einfach voran gehen und erweitern. Und dann denke ich wieder schnell, wir gehen auf die Kartenseite, die wir ziemlich cool hatten. 16. Button: Ok. Schließlich möchte ich Ihnen zeigen, wie Sie intelligenten Feind auch auf Tasten verwenden können. Dies ist möglicherweise nicht besonders relevant für eine mobile App, in der Sie nicht wirklich einen Hover-Zustand für Schaltflächen haben . Angenommen, Sie arbeiten an einer Webanwendung und möchten eine Hover-Einstellung oder den Hover-Status für Ihre Schaltflächen erstellen . Ähm, also könntest du definitiv intelligentes Animate verwenden, denn diese Option ist niedrig, ähm, sozial auf meine Komponentenseite hier drüben in meinem sauberen Can Group Projekt. Also, was wir tun werden, ist voran zu gehen und zuerst zu finden, dass dieser Button Schrägstrich aktiviert ist, ähm, Komponente hier drüben. Und dann werde ich voran gehen und einfach eine Instanz daraus erstellen, indem ich alt halte und sie wegziehe. Und lassen Sie uns voran und klicken Sie mit der rechten Maustaste darauf und lösen Sie tatsächlich Instanz und erstellen Sie eine neue Komponente daraus, weil wir von dieser Komponente hier getrennt aussehen wollten, benennen wir sie auch um, aber im Vorwärtsschrägstrich schweben so. Und dann werde ich den Hintergrund hier auswählen, oder den Hintergrund der Schaltfläche, oder den Hintergrund der Schaltfläche, gehen Sie zum Design auf und gehen Sie voran und lösen Sie den Stil und machen die Füllung vielleicht ein wenig dunkler ist alles, so dass es aussieht, als ob wir auf der Oberseite schweben es. Also, jetzt kann ich einfach auf die Schaltfläche Schrägstrich aktiviert Option gehen. Gehen Sie zum Prototyp und ich gehe voran und trockne und erstelle eine Verbindung zu dieser Schaltfläche hier und jetzt, anstatt zu klicken, möchten Sie voran gehen und wählen, während Sie schweben, und das wird tun, wie Sie erwartet, während Sie oben schweben dieser Schaltfläche wird voran gehen und zu diesem navigieren, sondern in stattdessen. Und was wir verwenden möchten, ist natürlich die intelligente, animierte Option, animierte Option, damit sie den Übergang zwischen diesem und dem hier drüben glättet, und Sie werden sehen, wie das in nur einer Sekunde funktioniert. Aber zuerst gehen wir voran und tun es. Er ist rein und raus, und ich denke, 300 Millisekunden hier drüben wohl gut genug. Also, jetzt, wenn Sie voran gehen und wählen Sie einfach unsere Schaltfläche, Schrägstrich aktiviert und tun, und dann wie erwartet, während ein Hover, wird es voran gehen und Farbe ändern, und es wird smart animieren in diese Schaltfläche vorwärts Schrägstrich Hover -Komponente hier. Ziemlich cool. Ziemlich praktisch für ein Projekt wie dieses. Also, da gehst du hin. So wenden Sie intelligente Animationen in Sigma an 17. Interaktive Komponenten: Ordnung, also eine coole Sache, die ich Ihnen in Figma und im Prototyping-Tool zeigen möchte Ihnen in Figma und im , ist, dass Sie jetzt tatsächlich interaktive Komponenten erstellen können, was bedeutet, dass Sie jetzt Interaktionen zwischen Komponenten erstellen können Schaltflächen oder sogar verschiedene Tutorial-Karten basierend darauf, wie die Benutzer damit interagieren. Nummer vier: Die interaktiven Komponenten wurden als Feature gestartet. Sie müssen mehrere Seiten mit unterschiedlichen Status dieser Schaltflächen erstellen . Und das bedeutet, dass Sie viele doppelte Frames haben , nur um zu zeigen, dass Ihre Komponenten dazwischen wechseln. Aber jetzt ist es so einfach wie das Erstellen einer neuen Variantenschaltfläche und das Herstellen Verbindung zwischen diesen Varianten, basierend darauf wie die Benutzer mit dieser Komponente interagieren. In meinem Fall zeige ich Ihnen, wie Sie Ihre Schaltfläche tatsächlich animieren können , damit der Benutzer , wenn in der mobilen App darauf tippt, widerspiegelt diese Registerkarte mit einer dunkleren Farbe was nachahmt, wie eine Schaltfläche normalerweise aussieht, wenn ein Benutzer sie drückt, so dass er ihm eine Art Feedback gibt. Also das Wichtigste zuerst, ich meine meine Komponentenseite hier drüben. Ich fahre fort und wähle beide Knöpfe aus. Und dann werde ich auf der rechten Seite weitermachen und sie als Varianz kombinieren. Gehen Sie nun fort und folgen diesem Schritt, wenn Sie dies noch nicht getan haben, damit wir Varianten dieses Buttons haben. Und ich werde fortfahren und die Eigenschaft 1 in State umbenennen . Wir haben also wieder einen deaktivierten, aber im Status und dann aktivierten Schaltflächenstatus. Und ich werde es tatsächlich duplizieren indem ich Command D drücke. Und ich werde einen dritten Status namens tapped erstellen . Und klicke Enter da drüben. Und für diese Tab-Schaltfläche doppelklicke ich und wähle hier meine Hintergrundfarbe aus. Und entferne diese Primäre und ändere es eine etwas dunklere Farbe eines ähnlichen Farbtons. Nur um zu zeigen, dass diese Schaltfläche angetippt wird , wenn der Benutzer tatsächlich im Prototyp darauf tippt. Lassen Sie uns das schließen und gehen Sie zu Ihrem Tab „Prototyp“. Und was Sie dann tun möchten, ist, eine Interaktion zwischen dieser Schaltfläche zu erstellen , der es sich um den aktivierten Status und die Registerkarte handelt. Sieh es dir hier drüben an. Und das können Sie einfach tun, indem Sie eine Verbindung wie unsere Rahmen zeichnen . Aber jetzt mit unseren Komponenten hier unten und auf der rechten Seite erhalten wir eine Reihe von Optionen, damit wir dies per Klick tun können , damit der Benutzer, wenn er auf diese Schaltfläche klickt sie austauschen oder ändern mit diesem angezapften Zustand. Oder wir können beim Schweben ziehen, während wir drücken. Und wenn Sie eine Art Spiel haben, das Sie entwerfen, können Sie das Key-Slash-Gamepad verwenden, auch eine Reihe anderer Optionen. Für unseren Fall möchten wir dies tun, während wir drücken, denn das bedeutet, dass der Benutzer, sobald er auf diese Schaltfläche tippt, diesen Zustand wechselt. Und sobald sie loslassen, wird es weitergehen und wieder in den Staat hier drüben wechseln. Jetzt haben Sie hier möglicherweise eine sofortige Animationsoption. Sie könnten also definitiv einen sofortigen machen, was für diese Option hier am sinnvollsten ist. Denken Sie jedoch daran, dass Sie definitiv smart animieren können , wenn Sie Dinge wie Kontrollkästchen oder Ein- und Aus-Schalter haben , bei denen Sie tatsächlich eine Animation anzeigen können der Benutzer auf diese Komponenten klickt. Und Sie können diese Änderung in Ihrem Prototyp sehen. Um zu sehen, wie das funktioniert, gehe ich jetzt zu meiner Mock-up-Seite. Wir werden weitermachen und es laufen. Ich möchte fortfahren und auf Login tippen. Und wie Sie als Tab sehen können, wird diese Farbe oder diesen Zustand in diesen Zustand geändert . Und wenn ich loslasse, wird es weitergehen und den aktivierten Zustand zurückkehren, was großartig ist. Jetzt kannst du das mit jedem Knopf machen. Denken Sie jedoch daran, dass es zum Beispiel für diesen Button hier am besten ist, eine andere Variante zu erstellen , damit wir eine weiße Version unseres Buttons und dann eine Wide-Tap-Version unserer -Knopf auch. Aber ich überlasse das als Übung für dich. Und wie Sie sehen können, funktioniert diese neue Interaktion mit allen unseren Buttons. Solange sie die Button-Komponente sind, wird sie über alle meine Seiten und Frames in Figma hinweg funktionieren , was wunderschön ist, weil dies vor interaktiven Komponenten wirklich schwierig war . Jetzt können Sie natürlich interaktive Komponenten zwischen mehreren verschiedenen Komponenten verwenden . Es muss nicht nur Button sein. Sie können es überall dort verwenden, wo Sie eine Interaktion mit einer Komponente haben , die sich überall in den Frames wiederholt, z. B. Ich gebe Ihnen eine Übung für die interaktiven Komponenten. einer iOS-App auf eine dieser Zeilen tippt, Wenn ein Benutzer in einer iOS-App auf eine dieser Zeilen tippt, zeigen Sie diese Interaktion normalerweise an, indem Sie die Hintergrundfarbe in zeigen Sie diese Interaktion normalerweise an, indem Sie eine leicht graue, hellgraue Farbe ändern . Also überlasse ich das als Übung und wir machen es gemeinsam in der nächsten Vorlesung. 18. Interaktive Exercise: Alles klar. Ich hoffe, Sie haben bisher mitverfolgt und Sie konnten die interaktiven Komponenten für unsere Dienste erstellen , die hier aufgetaucht sind. Wie in der vorherigen Vorlesung erwähnt, in einer iPhone-App oder einer iOS-App normalerweise, wenn ein Benutzer auf eine Zeile in einer Tabelle wie dieser tippt , wird er in einer iPhone-App oder einer iOS-App normalerweise, wenn ein Benutzer auf eine Zeile in einer Tabelle wie dieser tippt, in eine etwas andere Farbe geändert eine etwas andere Farbe normalerweise spät grau, nur um dem Benutzer anzugeben , auf welche Zeile genau er tippt. Wenn ich also jetzt auf meine Zeilen tippe, wird nichts wie erwartet passieren. Aber wenn wir zurück zu unserem Mock Up gehen und zu unserer Komponentenseite gehen, wo wir unsere Zeilen haben. Wir können fortfahren und eine Tippversion erstellen , wir diesem Feedback dem Benutzer zeigen können. Klicken wir also auf die Serviceliste und gehen die Serviceliste und gehen hier oben zur Registerkarte „Design“. Und lasst uns hier abwechslungsreich hinzufügen. Und wir nennen es angezapft. Für diesen anderen wird es als Standard belassen. Ich klicke einfach auf die gesamte Variante der Serviceliste und ändere diese Immobilie, die bleiben wollte. Wir wissen also, wofür das alles ist. Und jetzt, wie bereits erwähnt , möchten wir für diese Hintergrundfarbe einfach eine etwas dunklere, hellgraue Farbe wählen . Nichts zu verrückt. Nur um das Feedback des Benutzers zu zeigen, wie der Benutzer auf diese Zeile oder diese Zelle tippt. Und jetzt, wie in der vorherigen Vorlesung, gehen wir zur Registerkarte Prototyp und stellen eine Verbindung zwischen diesem Standardstatus zur Registerkarte S8 her. Und ändere den Onclick auf, du hast es erraten, an der Wand drücken. Wir werden weitermachen und es in den angezapften Staat umstellen. Und wir wollen, dass die Animation sofort erfolgt. Also werden wir weitermachen und das schließen. Und wenn er jetzt wieder zu unserem Prototyp geht, müssen wir den Prototyp nicht auffrischen oder neu starten. Wir können es einfach im selben benutzen. Und wie Sie jetzt sehen können, ändern wir, wenn ich auf diese Reihe tippe, wenn ich auf diese Reihe tippe, diese Farbe, die für eine mobile iPhone-App sehr realistisch aussieht. 19. Neue Prototype erstellen: Seit Figma einige neue Funktionen für die Prototyping-Funktion angekündigt hat, kündigten einige neue Funktionen für die Prototyping-Funktion angekündigt hat, sie auch einige neue Möglichkeiten denen Sie Benutzer oder Zuschauer durch Ihren Prototyp führen können oder Zuschauer durch Ihren Prototyp und dann verschiedene Flows erstellen können . Jetzt definieren ein Flow und ein Prototyp , was dieser Benutzer durchmachen wird, wenn er den Prototyp durchläuft. Wann fangen sie an? Und wenn sie die Anwendung durchlaufen, wo landen sie? Standardmäßig haben sie unseren Prototyp Flow eins genannt. Wenn wir also diesen Flow spielen, führt man uns durch den Prototyp, den wir erstellt haben, uns auf dem Anmeldebildschirm startet. Und wenn wir dann auf Anmelden klicken und uns durch jeden Anmeldeschritt führen, bis wir zur Hauptseite gelangen. Aber jetzt mit Figma ist das Prototyping Feature. Sie können tatsächlich mehrere Flows erstellen , sodass wir sehen, ob der Benutzer bereits angemeldet ist, wenn Sie Ihre App präsentieren möchten . Sie können einen anderen Ablauf präsentieren indem Sie mehrere verschiedene Flows erstellen, um Zeit zu sparen, wenn es darum geht, unseren Prototyp unseren Kollegen oder Kunden zu präsentieren, um unterschiedliche Ergebnisse zu präsentieren oder verschiedene Ergebnisse. Und um Zeit zu sparen, wenn es darum geht, mehrere Seiten durchklicken zu müssen mehrere Seiten durchklicken zu , um dorthin zu gelangen, wo Sie hinkommen möchten. Also werde ich weitermachen und einen zweiten Flow erstellen. Aber bevor ich das mache, nennen wir diesen Flow einen neuen Benutzer. Und das gibt ihm nur einen neuen Namen. Bei einem Prototyp ändert sich wirklich nichts. Aber jetzt haben wir diesen neuen Startpunkt des Benutzerflusses. Stellen Sie nun sicher, dass Sie sich auf der Registerkarte Prototyp befinden , damit Sie Ihre Flows tatsächlich sehen können. Aber im Wesentlichen wollte ich diese neuen Benutzer benennen, damit wir wissen, dass dies der Ablauf ist wenn sich ein neuer Benutzer anmeldet oder sogar die saubere Känguru-App öffnet. Und jetzt möchte ich einen neuen Flow namens Logged User erstellen . Im Wesentlichen ein Benutzer, der bereits angemeldet ist, sehen wir diesen Ablauf nur anstelle des neuen Benutzerflusses. das zu tun, gehe ich zur Anforderungsseite, da dies im Wesentlichen unsere Hauptseite ist, zu der wir bereits Benutzer anmelden möchten , um beim ersten Öffnen der App zu wechseln. Und indem ich einfach dieses Anforderungsteil ausgewählt habe, klicke ich auf das Pluszeichen neben dem Flow-Startpunkt, um einen Startpunkt hinzuzufügen. Und benennen wir dies in einen angemeldeten Benutzer um. Und so haben wir jetzt zwei verschiedene Etagen, eine für einen neuen Benutzer und eine für einen Anmeldebenutzer. Und wenn Sie auf den Benutzerfluss anmelden klicken klicken Sie hier auf dieses Wiedergabesymbol. Wie zu erwarten, würde der Prototyp in diesem Rahmen beginnen und es uns ermöglichen, wie zuvor zu interagieren, aber jetzt mit einem anderen Ausgangspunkt. Und jetzt können wir auf dieser linken Seite hier sehen, dass wir verschiedene Etagen haben , durch die wir unsere Zuschauer führen können , sind Benutzer. Wenn Sie also jetzt suchen möchten, wann ein neuer Benutzerfluss aussehen würde, können wir zum neuen Benutzerflow gehen und von dort aus weitergehen. Oder wenn Sie zu einem Anmeldebenutzerflow wechseln möchten, können wir zu unserem Anmeldebenutzerflow gehen und von dort aus weitergehen. Und das Schöne daran ist, dass wir, wenn Sie Ihren Prototyp teilen, Menschen, die Zugang dazu haben, Sie Ihren Prototyp teilen, Menschen, die Zugang dazu haben, auch die Ströme sehen können, die Sie haben und auch die verschiedenen Ströme durchlaufen können. Jetzt empfehle ich Ihnen, wenn Sie Ihren Prototyp mit anderen Personen teilen möchten , insbesondere mit Personen, die möglicherweise nicht in Ihrem Team sind. Sie können tatsächlich eine kleine Beschreibung über Ihren Fluss schreiben , damit die Leute verstehen, worum es in dieser Etage geht. In der Beschreibung hier schreibe ich einfach weiter. Dieser Ablauf richtet sich an RD angemeldete Benutzer mit sauberem, sauberem, sauberem Känguru. Und wir werden weitermachen und das schließen. Und jetzt, wenn ich hierher zurückgehe, siehst du, dass die Beschreibung auch in meinem Prototyp ist , was cool ist. Und da haben Sie es, das unterschiedliche Abläufe in Ihren Prototypen hat . 20. Unsere Designs exportieren: Alles klar. Ich denke, wir sind bereit, dieses Projekt jetzt unserem Kunden zu geben. Also denke ich, wir sind jetzt bereit, unsere Frames hier zu exportieren. , Es gibt eine Reihe von Möglichkeiten,wie Sie Dinge in Fig MMA exportieren können. Ähm , die erste ist, dass Sie die Frames natürlich exportieren können . Und um dies zu tun, können Sie zu den Ebenen gehen und gehen Sie voran und reduzieren Sie alle Ebenen mit der Option l und so wird nur alles zusammenbrechen. Also ist es schön hier, und ich kann voran gehen und einfach einen Frame auswählen und dann halten wir Shift gedrückt, wählen meinen allerletzten Frame hier, und so wird das alle Frames dazwischen auswählen. Stellen Sie sicher, dass Sie den Rahmen ausgewählt haben und nichts, das Sie nicht exportieren möchten. Und dann von hier aus können Sie die nächsten vier tippen und gehen Sie voran und schnell plus, Und wenn Sie hier scrollen , werden Sie sehen, dass wir neun Ebenen hier mit einer Auflösung von einem X exportieren. zwei X, können Sie das von hier aus tun. Sie können voran gehen und tatsächlich wählen, was, vier Monate? Sie möchten, dass Ihr Export in ist, können Sie PNG auswählen, es gibt J Peg SPG und PDF. also diese Frames ausgewählt haben, können Sie neun Layer auf exportieren. Sobald du das tust, wird es fragen. Machen Sie sich bereit, das zu exportieren, und ich werde Sie fragen, wo Sie Ihren Export machen wollen. Sobald Sie dies tun, wird dieser Datei-Browser hier geöffnet, in dem Sie den Ordner auswählen können, in den Sie Ihre Layer exportieren möchten, oder Ihre Frames in. Und dann, wenn Sie voran gehen und klicken, speichern Sie es wird voran gehen und legen Sie sie dort. Und wenn ich diesen Ordner über gezogen habe, wie Sie sehen können, ist er voran und exportierte alle meine Frames in separaten PNG vier Monate für mich hier, was schön ist. Ich kann uns zu meinem Kunden schicken, also ist das eine Möglichkeit, zu exportieren, wenn Sie bestimmte Dinge exportieren möchten. Also lassen Sie uns zum Beispiel, Gehen Sie voran und zoomen Sie in hier und sagen wir, Sie wollen nur dieses Symbol hier drüben exportieren. Ah, Sie können voran gehen und es auswählen, und während Sie es ausgewählt haben, stellen Sie sicher, dass hier im Ebenenfenster es tatsächlich ausgewählt ist, und dann gehen Sie zum Exportieren und drücken das Plus-Symbol, erhalten Sie eine schöne Vorschau Ihres Exports. Hier ist lang, und dann können Sie sogar mehrere Exporte hinzufügen. Wenn Sie also möchten, dass eines der Symbole nur eine zusätzliche Auflösung ist, eine andere zwei zusätzliche Auflösung hat und Sie hier weiter gehen und weitere Auflösungen und MAWR-Exporte hinzufügen können , wird es meiner Datei ein nettes Suffolk hinzufügen. Hier ist so, dass dies Null Null ein Bindestrich Shop exportieren wird, weil dies der Name dieser Ebene oder jenes Rahmens hier ist , den ich exportiere. Wenn Sie also den Namen Ihres Exports einfach ändern möchten, müssen Sie hier den Namen Ihres Layers ändern. Also, wenn ich das tue, lass uns hier eine Shop-Symbol. Sie können sehen, jetzt wird es Export-Shop-Symbol. Und wenn ich das exportiere, wird es drei Versionen davon exportieren, eine mit einer Ex-Auflösung, andere mit zwei X und drei X. eine andere mit zwei X und drei X. Dies ist üblich in vielen APS, wo Sie mehrere Auflösungsbasierte auf der Bildschirmgröße. So können Sie voran gehen und exportieren Sie Ihr Shop-Symbol, sobald Sie es wieder speichern. Wenn ich meinen Ordner hier geöffnet habe, werden Sie sehen, dass es drei verschiedene Kopien gibt, eine mit einer zusätzlichen Auflösung. Das hier ist also ein x zwei X und drei x Also das ist ziemlich cool. Sehr handlich. Ich werde das einfach löschen. Von da aus. Sie können auch Befehlshalt E drücken und das wird einfach diese Export-Tab öffnen. Und das wird Ihnen nur einige der Exporte zeigen, die Sie von hier aus machen können. Ah, das hast du wahrscheinlich vorher gemacht. Also von hier aus kann ich voran gehen und wählen, was ich exportieren möchte, und dann auch von hier aus exportieren. Also nochmal, Sie bringen das mit Befehl Shift E auf. Und so exportiert und figuriert man. 21. Code: ein weiteres zeitsparendes Werkzeug in Abb. MMA sieht dieses Code-Panel genau hier. Wir haben nicht wirklich darüber gesprochen, aber es funktioniert irgendwie wie Magie. Und ich werde dir zeigen, warum. Lassen Sie uns voran und zoomen Sie in unsere Zahlungsseite zum Beispiel hier, indem Sie auf ein beliebiges Objekt in und gehen Sie zu meinem Code tippen Sie hier. Ich kann den Code für das Styling dieses Objekts hier tatsächlich erhalten. Wenn Sie also mit CSS vertraut sind oder Sie für ein IOS- oder Android-Projekt hier auf diesem Code-Panel entwerfen , wird Ihnen tatsächlich helfen, genau das neu zu erstellen, was wir hier erstellt haben, aber in einer tatsächlichen Entwicklungsumgebung. Wenn Sie also mit Entwicklern arbeiten und möchten, dass sie tatsächlich einspringen und diese Designs in Live-Riel-Anwendungen verwandeln können , ist das einfachste, was Sie tun können, sie einzuladen und ihnen dann von diesem Code-Panel zu erzählen, um zu gehen und tatsächlich kopieren und einfügen. Ah, genau der Code, den sie brauchen, um diese bestimmten Elemente wieder zu bekommen. Wenn ich dies ändere, werden Sie sehen, basierend auf dem, was ich ausgewählt habe, wird es weitergehen und mir den Code für dieses Objekt zeigen. Wenn Sie nur den gesamten Rahmen isolieren, wird hier der Code für nur meinen Rahmen angezeigt. Also, wie die Hintergrundfarbe von Weiß, die Breite und Höhe und Dinge wie das. Das könnte also super nützlich sein. Und ich ermutige Sie, das zu nutzen, wenn Sie eine App entwickeln oder wenn Sie Entwickler haben , die mit Ihnen arbeiten 22. Was kommt als Nächstes?: Alles in Ordnung. Herzlichen Glückwunsch zum Abschluss des Prototyping-Kurses hier. Wir haben eine Tonne daraus gelernt, wie wir tatsächlich einen super grundlegenden Prototyp bis zu fortgeschritteneren Anwendungen hinzufügen können , indem wir Animationen hinzufügen, Übergänge mit Smart ausführen, zum Übergang zwischen verschiedenen Zuständen animieren und wie wir tatsächlich teilen Sie unser Projekt mit Freunden, Kalis Investoren und so weiter. Also, was kommt als Nächstes für dich? Nun, es gibt eine Menge, die Sie von hier aus tun können. Natürlich empfehle ich, dass Sie mehr Prototypen erstellen, damit üben, mit Ihren Freunden teilen und wirklich zeigen, vor allem, wenn Sie mit Kunden arbeiten. Dies wäre ein großartiger Ort, an dem Sie ihnen einen Prototyp zeigen können, wie ihre Anwendung aussehen würde. Wenn Sie an einer eigenen Anwendung oder einem eigenen Design arbeiten, können Sie wirklich zeigen, diesen Prototyp, den Sie für Ihr eigenes Projekt haben, um sie zu entwickeln und es wirklich einfacher für sie zu verstehen, was Sie aus dem Produkt wollen. Zögern Sie nicht, auch Ihren Prototyp mit mir zu teilen. Ich würde mich verstecken, um es rauszuschütteln und Feedback zu geben. Wenn das etwas ist, nach dem Sie suchen, können Sie sogar versuchen, Prototypen auch auf Webprojekte anzuwenden, was? Wenn Sie also an Webprojekten arbeiten oder Projekte überprüfen, an denen Sie arbeiten möchten , wäre dies ein perfekter Zeitpunkt, um dies zu tun. Ich erschaffe wirklich schöne, nutzbare Prototypen auch dafür. Und wieder, wie immer, zögern Sie nicht, mir Fragen oder Designs für Feedback zu senden. Meine E-Mail ist, wie clever bei gmail dot com Und nächste Woche hier auf Skill Shirt wird auch einen Kurs darüber teilen, wie Sie ein U. Y Design für eine Web-Anwendung für unser sauberes Känguru-Projekt hier als auch erstellen können . Also nochmals vielen Dank für die Teilnahme an diesem Kurs und freuen uns darauf, Sie in Zukunft zu sehen, natürlich.