Figma-Prototyping: Ein tiefer Tauchgang, Anfänger bis Profi, für UX/UI-Designer

1. 00 Intro: Dieser Kurs bietet einen tiefen Einblick in die Welt des Prototypings mit Wir werden uns die grundlegenden Einstellungen für das Prototyping genauer ansehen grundlegenden Einstellungen für das Prototyping Intelligente Animationen, interaktive Komponenten, Prototyping mit Variablen sowie Dokumentation und Weitergabe unserer Wir beginnen mit den Grundlagen und lernen, wie man Bildschirme verbindet, anderes Scrollverhalten einstellt und Wir werden dann zu Smart Animate übergehen dem magischen Teil, wenn es um das Prototyping in Figma geht Ich werde Ihnen alle Superkräfte von Smart Animate zeigen, und wir werden auch über die Einschränkungen sprechen und einige Problembehebungen vornehmen Sobald wir Smart Animate verstanden haben, werden wir dazu übergehen, Mikrointeraktionen mit interaktiven Komponenten in Figma einzurichten Mikrointeraktionen mit interaktiven Komponenten Interaktive Komponenten sparen Ihnen viel Zeit, wenn es darum geht, Standardverhalten hinzuzufügen Instanzen in Ihrem gesamten Sobald wir Variablen hinzugefügt haben, um Ausdrücke und bedingte Anweisungen zu erstellen , werden Sie sehen, wie Figmas wahre Stärke zum Leben erweckt Ich werde Ihnen in den Playground-Dateien viele Beispiele zur Verfügung stellen, die Sie erkunden Abschließend zeige ich Ihnen Tipps und Techniken zur Dokumentation und zum Teilen Ihrer Prototypen mit anderen. Wir werden uns die Dokumentation interaktiver Komponenten in Figma sowie externer Designsysteme ansehen interaktiver Komponenten in Figma sowie externer Designsysteme Ich stelle Ihnen eine Figma-Datei zur Verfügung , mit der Sie während der Videos an meiner Seite arbeiten oder in Ihrer Freizeit zu den Übungen mit detaillierten Anweisungen zurückkehren können der Videos an meiner Seite arbeiten oder in Ihrer Freizeit zu den Übungen mit detaillierten Anweisungen zurückkehren in Ihrer Freizeit zu den Übungen mit detaillierten Anweisungen Dies ist für Sie wichtig, wenn Sie über Grundkenntnisse in Figma verfügen oder wenn Sie ein fortgeschrittener Figma-Benutzer sind und Ihre Prototyping-Fähigkeiten verbessern möchten Das ist der Kurs von Moon Learning Dot IO. 2. !!! BITTE BEOBACHTET !!! Neue Figma-Benutzeroberfläche in der Beta: Heads Figma hat seine Benutzeroberfläche aktualisiert, und Sie sehen möglicherweise ein neues Design anstelle des alten Dieses Update befindet sich derzeit in der geschlossenen Betaphase, sodass noch nicht jeder Zugriff darauf hat Ich werde die Grafiken aktualisieren und das neue Interface wiedergeben , sobald es für alle verfügbar ist. Die Änderungen sind hauptsächlich visuell. Alle Funktionen und Tools sind immer noch da, nur an etwas anderen Stellen oder mit einem neuen L. Beispielsweise wurde die obere Werkzeugleiste nach unten verschoben. Die linke Seitenleiste ist dagegen größtenteils unverändert geblieben. Sie können jetzt den Namen Ihrer Datei hier ändern. Sie können weiterhin alle Ihre Seiten, Ebenen und Elemente sehen. Auf der rechten Seite werden Sie einige Änderungen feststellen, wenn Sie in ein Design klicken, aber alle Funktionen sind weiterhin verfügbar. Wenn Sie ein Anfänger sind und die neue Oberfläche verwirrend finden , können Sie auf das Fragezeichen rechts unten klicken und vorübergehend zur alten Benutzeroberfläche zurückkehren. Das hat keinen Einfluss auf dein Design. Auf diese Weise können Sie die Videos des Kurses mit der alten Benutzeroberfläche viel einfacher verfolgen die Videos des Kurses mit der alten Benutzeroberfläche viel , bis Sie bereit sind, zur neuen zu wechseln. FIMA führt dieses Update schrittweise ein. Wenn Sie noch keinen Zugang haben, können Sie ihn auch bei FIMA beantragen, aber es gibt keine Garantie, einige von Ihnen müssen möglicherweise nur ein wenig Geduld haben Möglicherweise muss Ihr Team-Admin das Update auch für Sie aktivieren. Stellen Sie also sicher, dass Sie dies ebenfalls überprüfen Figma aktualisiert die Software regelmäßig Erwarten Sie also Änderungen und seien Sie bereit, sich anzupassen Funktionen können sich ändern wie diese Bibliotheksschaltfläche hier in den letzten Jahren an jeder möglichen Stelle Aber keine Sorge, nichts wird jemals verloren gehen, und Sie werden sich daran gewöhnen FIMA viel flexibler zu nutzen Es hat einen wirklich großen Fokus auf Benutzerfreundlichkeit. Es geht also nicht darum, etwas auswendig zu lernen, sondern die Software als Ganzes zu verstehen. 3. MATERIAL: Figma-Datei herunterladen: Vielleicht möchtest du mit mir zusammenarbeiten. Deshalb habe ich für den Kurs , an dem du teilnimmst, einige Dateien zum Herunterladen vorbereitet an dem du teilnimmst, einige Dateien zum Herunterladen . Navigiere einfach zu Projekt und Ressourcen. Und dort finden Sie alle Informationen und den Link, über den Sie das Material herunterladen können. Auf dieser Seite finden Sie eine Vielzahl von Downloads. Sie können einfach die Ursache auswählen, die Sie gerade behandeln , und dann einfach auf Herunterladen klicken. Und die Datei wird automatisch für Sie heruntergeladen. Um die Dateien zu importieren, laden Sie sie einfach herunter. Es ist wichtig, dass Sie ein Figma-Konto haben. in deinem Figma-Konto Navigiere in deinem Figma-Konto entweder zu Entwürfen oder gehe zu einem Projekt innerhalb eines Teams. Klicken Sie auf die Schaltfläche Importieren und Sie können auswählen, welche Datei Sie laden möchten. Es kann einen Moment dauern, da sie ziemlich groß sind, aber sobald Sie sie importiert haben, sind sie auf Ihrem Konto und Sie müssen diesen Vorgang nicht wiederholen. In der Akte. In den Videos findest du Material, mit dem du mit mir arbeiten kannst, aber ich habe auch einige Anleitungen hinzugefügt, damit du in deiner Freizeit jederzeit wiederkommen und ausprobieren und üben kannst. Ich arbeite für die meisten meiner Designs mit Google-Schriften. Wenn Sie also mit der Figma-App arbeiten, müssen Sie nichts tun oder Google-Schriften werden automatisch vorgeladen. Wenn du mit Figma im Browser arbeiten möchtest, musst du nur die Schrift suchen , die dir als fehlt angezeigt wird, z. B. Poppins, die ich oft verwende. Und dann können Sie diese Schrift direkt herunterladen, auf Ihrem Computer installieren und schon kann es losgehen. 4. NEU! Config 2023 Updates: Ende Juni 2023 während einer Figma-Konfliktkonferenz wurden während einer Figma-Konfliktkonferenz einige Updates für Prototyping veröffentlicht Alles funktioniert immer noch wie zuvor. Es gibt jedoch nur wenige solche Extras. Wir haben ein Infile, eine Vorschau. Unser Prototyping-Menü ist jetzt direkt neben unseren Steckverbindern sichtbar Und wir können Prototypen mit Variablen erstellen. Bitte stellen Sie sicher , dass Sie die neueste Version der Figma-Datei Hier findet ihr auch deutlich markiert was neu ist und wo alles zu finden ist. Lassen Sie mich Ihnen kurz die neuen Funktionen vorstellen, damit Sie über alle Änderungen in den Videos informiert sind. Wenn Sie also wie zuvor einen Frame auswählen und auf die Schaltfläche Abspielen klicken, wird die Vorschau für Sie geöffnet. Wir haben jetzt jedoch auch eine andere Möglichkeit , eine Vorschau anzuzeigen . Wenn wir auf den kleinen Fehler klicken, wird die Vorschau in der Datei angezeigt. Das bedeutet, dass wir direkt in unserer Datei ein kleines Vorschaufenster haben, in dem wir unseren Prototyp und unsere Action sehen können , was sehr praktisch ist. Dafür gibt es auch eine Abkürzung. Drücken Sie einfach die Umschalttaste und die Leertaste, und das Vorschaufenster wird für Sie geöffnet. Und weitere Änderungen: Wenn Sie auf einen beliebigen Konnektor klicken, befindet sich das Prototyping-Menü jetzt genau dort, wo Ihre Interaktion stattfindet, bevor oben rechts ein Fenster geöffnet wird befindet sich das Prototyping-Menü jetzt genau dort, wo Ihre Interaktion stattfindet , bevor oben rechts ein Fenster geöffnet Im Menü findest du immer noch alles wie zuvor, es hat nur ein etwas anderes Layout. Es wurden einige neue Elemente hinzugefügt, nämlich Variablen und Bedingungen. Alles andere war schon einmal da. Ich empfehle, wenn Sie Variablen und Bedingungen beim Prototyping verwenden möchten Variablen und Bedingungen , dass Sie sich zuerst mit Variablen vertraut machen, was ein brandneues Feature in Figma ist und ich habe einen separaten Kurs Und dann können Sie mit diesen neuen Funktionen direkt mit dem Prototyping Das ist so ziemlich alles. Viel SPASS beim Prototyping 5. BASICS: 01 Der Figma-Prototyp-Arbeitsbereich: Lassen Sie uns also mit einigen Grundlagen rund um den Arbeitsplatz beginnen , wenn es um Prototyping geht. Hier haben wir also einige Design-Setups für Mobilgeräte und einige für den Desktop. Und wenn Sie die Standardeinstellung festlegen, befinden wir uns auf der Registerkarte Design. Neben der Registerkarte Design finden Sie die Registerkarte Prototyping. Oder Sie können auch die Tastenkombination verwenden, um zwischen ihnen umzuschalten, old 89, und übrigens, Null wäre Inspektionsmodus. Also werden wir dieses Menü hier genauer kennenlernen . Vorerst. Wisse nur, dass du, wenn du auf die graue Leinwand klickst, die allgemeinen Prototypeinstellungen festlegst. Also jedes Gerät, das Sie einstellen möchten, darüber werde ich später mehr erfahren. Und wenn Sie den Hintergrund ändern möchten wird das in der Präsentationsansicht sein, die wir uns in einer Minute ansehen werden. Wenn Sie jemals einen Rahmen auf Ihrer Leinwand auswählen, werden Sie feststellen, dass sich das Prototyping-Menü hier ändert. Und hier werden wir die meiste Zeit arbeiten. Wir werden lernen, wie man verschiedene Abläufe einrichtet, wie man Interaktionen und Animationen zwischen verschiedenen Bildschirmen und sogar innerhalb von Komponentensätzen einrichtet. Und wir werden über das Scrollverhalten sprechen. Und wenn Sie hier klicken, kehren Sie im Grunde zu Ihrer allgemeinen Prototyp-Einstellung zurück. Das ist also das gleiche Menü, als ob ich einfach auf den Leinwandhintergrund klicken würde. Lass uns das noch einmal machen. Ich wähle einen beliebigen Rahmen aus. Jetzt können Sie sich das noch einen Schritt weiter ansehen und die Einstellungen protokollieren. Prototyp-Einstellungen sind also nur für das allgemeine Setup vor all den Frames und allen Elementen hier. Jetzt Design-Datei, hier werden wir das Design und das gesamte Verhalten unseres Prototyps einrichten . Wenn wir unseren Prototyp und die Aktion sehen wollen, müssen wir auf die kleine Play-Schaltfläche klicken oben rechts in Ihrer Datei auf die kleine Play-Schaltfläche klicken. Dadurch wird dann in den Präsentations- oder Vorschaumodus gewechselt. Du bewegst den Mauszeiger darüber. Dir werden auch die Abkürzungen angezeigt. In meinem Fall, da ich auf einem Mac bin, ist das alles mit Command and Enter. Und Sie können sehen, dass dadurch jetzt ein neuer Tab geöffnet wird. In dieser Vorschau sehen Sie also ein einzelnes Bild in der Mitte. Wenn du auf einen schwarzen Hintergrund klickst erhältst du hier oben weitere Optionen, sodass du kommentieren und Kommentare mit deinem Team teilen kannst. Und auf der rechten Seite finden Sie die Sharing-Optionen. Mit einem Link oder einer Einladung können Sie Ihren Prototyp also teilen und sogar einen Einbettungscode für ihn erhalten . Und wir werden während des Kurses ausführlicher über all diese Optionen zum Teilen sprechen . Hier haben Sie die Möglichkeit, wie Ihr Prototyp angezeigt werden soll. Wenn Sie das einfach verwenden, können Sie zwischen den verschiedenen Optionen hin- und herschalten , sodass Sie verschiedene Größen sehen können, wie sie angezeigt werden sollen. Sie können einfach Ihre Tastaturtasten verwenden um zum nächsten Bild zu springen, auch wenn Sie noch keine Verbindungen eingerichtet haben. Und beachten Sie die Reihenfolge , in der Figma-Benutzer hier sind. Das ist wirklich praktisch, weil Figma tatsächlich den ersten Frame auswählt und findet, und dann geht es durch die Reihe der Frames. Wenn es keine Frames mehr gibt und es wird zum nächsten verfügbaren Frame gesprungen. Das muss also keine klare Rolle sein. Es könnte so etwas sein, aber Figma wird das als Zeile interpretieren und das Bild eins nach dem anderen durchgehen. 6. BASICS: 02 Wo sollten meine Prorotypen leben?: Wo sollten Sie nun Ihre Prototypen aufstellen? Nun, da wir in Figma vom Design zum Tab Prototyping springen können . Sie könnten sie einfach in Ihren vorhandenen Designs einrichten. Das mag für ein sehr kleines Projekt in Ordnung sein , aber im Allgemeinen empfehle ich Ihnen, eine Kopie Ihrer Bildschirme zu erstellen, dann mindestens eine eigene Seite oder sogar eine ganz eigene Datei einzurichten und Ihre Frames hierher zu kopieren. Und ich hätte jetzt diesen ausgewiesenen Ort nur für mein Prototyping. Der Grund dafür ist, dass ich, wenn ich mit Prototyping arbeite, wahrscheinlich viele Versionen einrichten und meine Designs ein wenig anpassen werde meine Designs ein wenig damit das Prototyping so funktioniert, wie ich es möchte. In der Zwischenzeit möchte ich, dass mein Design ziemlich sauber bleibt und nur einen Überblick über die vorhandenen Seiten bietet. Das wird mehr Sinn machen, wenn wir mit dem Bau unserer Prototypen beginnen und wenn wir darüber sprechen , verschiedene Verhaltensweisen zu dokumentieren. 7. BASICS: 03 Gerätevorschau auf dem Bildschirm: In Figma können Sie eine Gerätevorschau einrichten, was ziemlich nett ist. Wenn wir also den Bildschirm hier auswählen und zurück zu unserem Design-Tab springen. Ich kann mir vorstellen, dass dieses Grün als iPhone 14 eingerichtet ist. Ich habe, ich springe zurück zu meinem Prototyping-Menü. Ich kann gehen, um die Prototypeneinstellungen anzuzeigen. Oder das ist genauso, als ob ich einfach auf die graue Leinwand klicke. Und dann kann ich im Gerät das iPhone 14 aus meinen voreingestellten Geräten auswählen. Ich kann hier eine Farbe wählen, also entscheiden wir uns einfach für Starlight. Und ich könnte auch die Hintergrundfarbe nach meinen Wünschen ändern. Also klicken wir jetzt erneut auf Abspielen. Und Sie können sehen , dass sich mein Design jetzt in diesem Gerät befindet. Beachten Sie, dass einige Trigger, sobald Sie eine mobile Vorschau gesagt haben, ihren Namen ändern. Also klick z.B. wird Tap genannt, funktioniert aber genauso. Jetzt müssen Sie nur noch darauf achten, wenn Sie jetzt Ihre verschiedenen Bildschirme durchgehen, dass, wenn Sie jetzt Ihre verschiedenen Bildschirme durchgehen, alles perfekt ist, solange Sie an dieser Handygröße weiterarbeiten. Sobald Sie Ihre Desktop-Ansicht erreichen, die ich in derselben Design-Datei habe, können Sie sehen, dass es hier einfach Sprünge sind, aber diese Prototyp-Einstellungen werden beibehalten da sie für die gesamte Seite festgelegt sind. Wenn Sie eine Gerätevorschau verwenden möchten, empfehle ich Ihnen, eine zweite Seite für das Prototyping einzurichten . Also nenne ich diesen Prototype Desk. Und ich füge gerne einige Symbole hinzu, aber das ist absolut nichts , was Sie tun müssen. Du kannst sie einfach hineinkopieren. Und ich werde hier dieses kleine Prototyping-Symbol verwenden. Und jetzt nenne ich diesen einen Prototyp-Wischmopp. Also hier wird mein Handybildschirm sein. Und ich mache auch gerne eine separate App. Wenn Sie den kostenlosen Figma-Plan nutzen, dürfen Sie möglicherweise nicht so viele Seiten haben. Also dann lass es einfach alles auf einer Seite liegen und verwende einfach nicht die Gerätevorschau. Jetzt muss ich sie nur noch auf meine neue Seite kopieren . Und das kannst du hier schon sehen. In der Geräteeinstellung sind sie auf keine gesetzt. Normalerweise lasse ich den Desktop bei Null stehen. Sie könnten aber auch nachschauen, ob es ein Gerät gibt , das Sie verwenden möchten. Sie können also 1280 sehen. Also muss ich überprüfen, ob das dem MacBook Air entsprechen würde . Also werde ich einen Prototyp machen und kann jetzt einfach das MacBook Air wählen, und ich hätte dieses hier. Jetzt, wo ich spiele, können Sie sehen, dass diese Seite für das MacBook Air eingerichtet ist. Wenn ich zurückspringe und meine mobile Ansicht auswähle, dann bleibt diese hier beim Gerät des iPhones. Das ist also ein wirklich wichtiges Konzept um zu verstehen, dass Prototypen nicht auf verschiedenen Seiten kommunizieren selbst wenn sie sich in derselben Datei befinden. 8. BASICS: 04 feste und scrollbare Elemente: In Figma können wir sie so einrichten, dass im Präsentationsmodus einige Elemente fest und andere scrollbar sind. Schauen wir uns das mal an. Hier. Ich habe das Design eines mobilen Bildschirms. Ich möchte, dass die Navigation oben unverändert bleibt, während der Inhalt scrollt. Ich habe hier unten noch eine Schaltfläche zum Hinzufügen, die auch gerne unverändert bleiben. Schauen wir uns den Präsentationsmodus an, wie dieser gerade aussieht. Wenn ich auf die Play-Taste drücke, kann ich meinen Prototyp sehen. Ich kann mir vorstellen, dass, wenn ich versuche zu scrollen, absolut nichts passiert. Also lasst uns zurückspringen und das einrichten. Damit Scrollen tatsächlich funktioniert. Wir brauchen Inhalte, die größer als der Frame sind. Also wähle ich hier den übergeordneten Frame namens Mobile aus. Und auf der rechten Seite sehen Sie ein kleines Kontrollkästchen namens Clip-Inhalt. Wenn ich dieses Kästchen deaktiviere, können Sie sehen, dass meine Kartengruppe tatsächlich viel größer ist als mein ursprünglicher Rahmen. Und das ist wirklich wichtig, wenn Sie keine Inhalte haben, die Sie ausschneiden können und die Ihren Rahmen im Grunde überlaufen. Dann kannst du keinen Scroll hinzufügen. Sie können dies aktivieren oder deaktivieren. Es macht keinen Unterschied. Was Sie jetzt tun müssen, ist in den Prototyping-Modus zu wechseln. Klicken Sie also oben rechts auf den Tab Prototyping. Sie dann beim Overflow-Scrolling Wählen Sie dann beim Overflow-Scrolling das vertikale Scrollen. Gehen wir zurück in unseren Präsentationsmodus und sehen, was das bewirkt hat. Ich kann jetzt also den Inhalt scrollen, aber wie du siehst, sind mein Header und mein Button hier nicht behoben. Gehen wir also zurück und richten das ein. Wählen Sie in meinem Fall den Header aus, den Sie unverändert lassen möchten, und beginnen Sie mit dem Prototyping. Unter Position sehen Sie die Option zum Reparieren, an Ort und Stelle bleiben. Beachten Sie, dass Sie hier auf dem untergeordneten Element auch die Option haben, das Überlaufverhalten einzustellen. Das wäre also das Scrollverhalten in diesem verschachtelten Frame. In diesem Fall wollen wir kein Verhalten. Wir haben bereits unser vertikales Scrollen zum übergeordneten Container gesagt . Lassen Sie uns auch diesen Button hier unten reparieren. Wir werden das auf behoben setzen auch an Ort und Stelle bleiben. Und jetzt klicken wir auf Play und schauen uns an, wie das aussieht. Mein übergeordneter Container scrollt also gut und alle meine festen Elemente bleiben an Ort und Stelle. Wenn Sie jemals feststellen, dass das Scrollen nicht funktioniert , überprüfen Sie drei Dinge. zunächst in Ihrem Design-Tab sicher, dass Sie Inhalte ausgeschnitten haben , die größer sind als der Frame, mit dem Sie es zu tun haben. im Prototyping-Menü sicher, dass Ihr Overflow-Scrolling eingestellt ist. Sobald Sie das übergeordnete Element eingerichtet haben, wählen Sie nun ein untergeordnetes Element aus, das Sie reparieren möchten, fahren Sie mit dem Prototyping fort und dann wählt ein anderer Arzt Fixiert, bleiben Sie an Ort und Stelle. 9. GRUNDLAGEN: 04 klebrige Elemente auf Scroll: Klebrige Elemente beim Scrollen. Sie können auch einen Effekt erzeugen, bei dem Elemente einfach haften bleiben, wenn sie den oberen Bildschirmrand erreichen. Dies ist so ziemlich das gleiche Setup wie für feste Elemente. Sie müssen also sicherstellen , dass in Ihrem übergeordneten Frame Inhalt abgeschnitten wurde , der den Rahmen überfüllt, damit dies funktioniert. Und das muss auf vertikales Scrollen eingestellt sein. Entklemmen Sie nun den Clip und wählen Sie dann die Elemente aus, die Sie kleben möchten. In meinem Fall ist dies also der Abschnitt mit dem Namen Neu und dieser Abschnitt mit dem Namen Gespeichert. Und dann springe ich zurück zum Prototyping. Und jetzt in Position statt fest, wähle ich Sticky Stop am oberen Rand. Damit dies funktioniert, ist es wichtig , dass Sie die Reihenfolge in Ihrem Ebenenbedienfeld so einrichten müssen die Reihenfolge in Ihrem Ebenenbedienfeld , dass die Position , die an letzter Stelle steht. In meinem Fall liegt also dieser blaue, der hier gespeichert heißt , über dem anderen. Es sieht also so aus, als ob dieser der Erste ist. Aber im Grunde genommen befindet sich dieser zweite Abschnitt in meiner Ebenenhierarchie über Abschnitt eins. Wählen wir nun den übergeordneten Frame aus. Kehren Sie erneut zum Design-Clip zurück. Und lass uns auf Play klicken und sehen, ob das funktioniert. Das sieht einfach toll aus. Sie können Ihre Kopfzeile jedoch trotzdem unverändert lassen und diese Abschnitte dann unter der Kopfzeile beenden, indem Sie einfach die Kopfzeile korrigieren diese Abschnitte dann unter der Kopfzeile beenden . Das würde nicht funktionieren , weil sie dieselbe Oberkante anstreben würden . Ein kleiner Hack, den Sie hier verwenden können , besteht darin , einen Rahmen um Ihren Abschnitt zu zeichnen. Also habe ich das hier Sticky genannt. Und dann sieht man drinnen, dass ich meinen normalen Bereich platziert ein Rahmen drum herum ist etwas größer. Also dieser Abstand hier ist der gleiche Abstand wie im Menü oben. Also erstelle ich einen künstlichen Offset. Und das Gleiche habe ich für meinen anderen Abschnitt hier unten gemacht. Also habe ich das Gleiche für den blauen hier gemacht. Lassen Sie uns das ausschneiden und auf Play klicken und einen Blick darauf werfen. Und du kannst sehen, dass es jetzt diesen kleinen Abschnitt zwischenspeichert, sodass es einen Offset zu meinem Menü erzeugt und es funktioniert einwandfrei. 10. BASICS: 05 Frames für die Präsentation verschachteln: Eine der großen Stärken von Figma ist das Verschachteln von Frames. Und das wird auch viele Möglichkeiten eröffnen, wenn es um das Prototyping geht. Also lasst uns das ein bisschen besser verstehen. Also hier habe ich mein Design und das ist normalerweise der Bildschirm, den ich als Rahmen darstelle. Und hier habe ich schon alles eingerichtet , was ich wollte, um fest und scrollbar zu bleiben. Wenn ich in meinen Präsentationsmodus springe, kann ich einen Prototyp nach oben scrollen lassen. So weit so gut. Wenn ich jedoch einen Rahmen um diesen herum zeichnen würde . Zeichnen wir also einfach einen einfachen Rahmen und geben wir ihm eine andere Hintergrundfarbe. Also verstehen wir das ein bisschen besser. Und ich würde jetzt in meinen Präsentationsmodus wechseln. Dann kannst du sehen, dass Figma das Elternbild genommen hat. Also alles, was andere Rahmen als meinen Displayrahmen hält. Das Tolle ist jetzt, dass alles, was ich in diesem Rahmen eingerichtet habe. Alle festen Elemente und älteren scrollbaren Elemente bleiben also weiterhin an Ort und Stelle. Und das können wir hervorragend nutzen. Denn so können wir unseren Prototyp im Kontext präsentieren. Also was wir tun können, zB . Ich stelle hier einen weiteren Rahmen auf. Und in diesem Rahmen kann ich eine Überschrift hinzufügen, einige Beschreibungsfelder, die meinen Prototyp beschreiben. Und ich habe auch ein Bild hinzugefügt, also ein Modell, auf dem ich meinen Prototyp platzieren werde. Das musst du nicht hinzufügen. Also werde ich jetzt rüberspringen und mein Originaldesign kopieren. Und damit eine Kopie aller Setups, des Order-Scrollings und der festen Elemente. Und ich werde es hier in mein Modell einfügen. Lass uns die Ecken abrunden , damit es etwas besser passt. Also wenn ich jetzt diesen Frame auswähle und auf Präsentationsmodus drücke, dann wird mir der gesamte Frame angezeigt. Also die gesamten Präsentationsfolien, die ich eingerichtet habe. Und das Tolle ist, dass mein Prototyp immer noch funktionieren wird. So kann es sich wirklich in seiner Umgebung präsentieren. Wenn Sie Ihre Maus in die obere rechte Ecke des Bildschirms bewegen , wird das Drop-down-Menü Optionen angezeigt. Und er kann Dinge wählen, wie zum Beispiel, ob Sie möchten, dass eine Präsentation in Bezug auf die Breite an den Bildschirm angepasst ist usw., was auch immer Sie hier wählen, wenn Sie dann auf die Schaltfläche zum Teilen von Prototypen klicken, hat jeder, der Ihre Präsentation mit diesem Link betrachtet, dieselben Voreinstellungen. Sie können auch verschiedene Präsentationsrahmen verbinden. Wie bei einem Standardprototyp können Sie auf diese Weise eine Präsentation erstellen, die einen funktionierenden und anklickbaren Prototyp enthält. Die Größe, dass dies ein wirklich fantastisches Feature ist , um alle in einer Präsentation zu beeindrucken Es ist wirklich toll zu verstehen, wie Prototyping und Figma funktionieren. Nämlich, dass Sie das Prototyping auf die einzelnen Rahmen einstellen . Und das ist etwas , das Ihnen sehr helfen wird , wenn wir uns etwas eingehender mit der Einrichtung verschiedener Richtungen befassen. 11. BASICS: 06 Horizontales und vertikales Scrollen: Lassen Sie uns die verschiedenen Scrollrichtungen in Figma etwas genauer untersuchen . Wir haben also Vertikal, Horizontal und die Kombination aus beidem, die wir uns ansehen wollen. Beginnen wir mit der Vertikalen, die auch die gebräuchlichste ist. Denken Sie daran, dass Sie für alle Inhalte abgeschnitten haben müssen, damit das Scrollen funktioniert . Das bedeutet, dass Sie Inhalte benötigen , die Ihren Rahmen überfüllen. Wenn das der Fall ist, springen Sie einfach in Ihren Prototyping-Tab. Und unter Overflow-Scrolling stellen Sie dies auf vertikales Scrollen ein. Wenn wir jetzt auf den Präsentationsmodus klicken, ist alles scrollbar. Wie wir bereits gelernt haben, können wir auch bestimmte Elemente auswählen, zu Design zurückkehren und sie an ihrer Position fixieren. Wenn wir also in den Vorschaumodus zurückkehren, können Sie sehen, dass jetzt die Kopfzeile korrigiert ist und nur ein Text scrollbar wäre. Bisher haben wir also, wann immer wir uns mit scrollenden Inhalten befasst haben, den übergeordneten Frame hinzugefügt. Aber das Tolle an Figma ist, dass wir es dann zu jedem verschachtelten Rahmen hinzufügen können. Lassen Sie mich Ihnen den Unterschied zeigen. Wählen wir hier zunächst den übergeordneten Frame aus. Jim, zurück zum Prototyp und entferne das vertikale Scrollen, damit du es einfach wieder auf kein Scrollen einstellen kannst . Jetzt wähle ich hier anstelle des übergeordneten Rahmens den verschachtelten Rahmen aus, also die Kartengruppe, und stelle das auf vertikales Scrollen ein. Gehen wir also in unseren Vorschaumodus und sehen, ob das funktioniert. Nun. Es funktioniert nicht wirklich, hier gibt es kleine Sprungbewegungen, aber es ist nicht das Scrollen dieses Inhalts. Schauen wir uns an, warum das so ist. Denken Sie jetzt daran, dass wir Inhalte ausschneiden müssen, also Inhalte, die größer als der Rahmen sind. Damit das Scrollen funktioniert. Gehen wir zurück zu unserem Design-Tab. Wir können hier sehen, dass auf dem übergeordneten Frame, das stimmte, unsere Kartengruppe größer war als der Rahmen, weshalb sie anfing zu scrollen. Aber jetzt wenden wir das Scrollen auf diesen verschachtelten Rahmen an. Und Sie können sehen, dass das nicht abgeschnitten wird , weil der Frame, der es umgibt, tatsächlich den gesamten Inhalt in einem enthält. Was ich jetzt tun kann, ist diesen Rahmen auszuwählen und den Rahmen jetzt neu zu dimensionieren. Stellen Sie sicher, dass Sie den Clip-Inhalt aktivieren. So können Sie sehen , dass Ihr Rahmen tatsächlich kleiner ist als Ihr Inhalt. Und ich kann es jetzt bis zum unteren Rand meines scheinbaren Rahmens anpassen . Also versuchen wir es jetzt noch einmal. Klicken Sie auf Play und Sie können sehen, dass jetzt nur die Kartengruppe scrollbar ist. Beachten Sie, dass die Suchleiste und alles andere an Ort und Stelle bleiben. anwenden können zu verstehen, dass Sie das Scroll-Verhalten entweder auf den übergeordneten Frame Es ist wirklich wichtig zu verstehen, dass Sie das Scroll-Verhalten entweder auf den übergeordneten Frame oder auf den verschachtelten Frame , um das Potenzial des Prototyping voll auszuschöpfen. Schauen wir uns das horizontale Scrollen an. Also müssen wir auch hier den verschachtelten Frame auswählen, denn wenn ich das Scrollen auf den übergeordneten Frame anwenden würde, würde das den gesamten Frame durchblättern. Aber ich wollte hier nur diesen Teil der Kartengruppe haben, der horizontal gestapelte Karten hat. Versuchen wir es jetzt genauso wie zuvor. Wählen Sie einfach diese Gruppe aus, gehen Sie zum Prototyp und ändern Sie sie auf horizontales Scrollen. Wenn ich jetzt auf Vorschau drücke, wird das wieder nicht funktionieren und mir wird nur dieses nervöse Verhalten geben. Machen wir also dasselbe wie mit dem vertikalen Scrollen. Wählen wir eine Gruppe aus. Gehen Sie zurück zu Design und schauen Sie sich an, was mit abgeschnittenen Inhalten passiert. Ich kann den übergeordneten Frame tatsächlich entschneiden und dann können Sie die volle Größe der verschachtelten Gruppe sehen. Wie Sie sehen können, hat dieser Rahmen die Größe, die alle Karten umfasst, und es kann nichts abgeschnitten werden. Also wähle ich einfach diesen Rahmen aus und ändere die Größe des Rahmens. Wenn ich nun den ausgeschnittenen Inhalt umschalte, können Sie den versteckten Inhalt sehen. Jetzt ist mein Inhalt größer als mein Rahmen. Drücken wir erneut die Play-Taste. Und du kannst sehen, dass mein horizontaler Scroll jetzt funktioniert. Okay, der letzte ist die Kombination von horizontalem und vertikalem Scrollen. Dies ist ein typisches Verhalten, das Sie sich auf einer Karte oder ähnlichem wünschen würden . Wenn ich also den Inhalt dieser Karte ausschneide, können Sie sehen, dass er tatsächlich viel größer als der Rahmen ist. Also wähle ich diese Map aus, die ein verschachtelter Rahmen ist. Gehen Sie zum Prototyp und wählen Sie horizontales und vertikales Scrollen. Da der Inhalt jetzt schon größer ist, muss ich nichts weiter tun. Wählen Sie einfach den übergeordneten Frame aus und klicken Sie auf Play. Sie können sehen, dass Sie die Karte verschieben können. Und weil wir ihr Verhalten auf diese verschachtelten Elemente anwenden , könnten wir sie kombinieren. Wir können also einen horizontal und vertikal scrollen lassen. Und dann können wir dem übergeordneten Frame ein völlig anderes Verhalten hinzufügen, z. B. fügen wir also etwas vertikales Scrollen hinzu. Wie Sie jetzt sehen können, ist dies immer noch vorhanden, aber ich kann auch den gesamten Inhalt scrollen. Wie Sie sehen können, Anwendung dieses Verhaltens auf verschachtelte Frames wirklich das Potenzial, verschiedene Verhaltensweisen beim Prototyping miteinander zu vermischen. 12. BASICS: 07 Bildschirme verlinken: Verknüpfen von Bildschirmen und Figma ist eigentlich sehr einfach. Also hier habe ich ein einfaches Beispiel. Auf diesem Startbildschirm. Ich habe verschiedene farbige Formen. Und sobald ich auf eine dieser farbigen Formen geklickt habe, wollte ich zur Detailseite für jede Farbe springen. Stellen Sie sicher, dass Sie sich im Prototypenmodus befinden, und wählen Sie dann einen beliebigen Formarahmen aus. Text, spielt keine Rolle. Sobald Sie den Mauszeiger darüber bewegen, werden Sie sehen, wie diese kleinen Blasen erscheinen. Du kannst einfach eine beliebige Blase auswählen. Es spielt keine Rolle, für welche Seite Sie sich entscheiden. Ziehen Sie nun einen Stecker heraus und befestigen Sie ihn einfach an dem Rahmen mit dem Sie verbunden werden möchten, und lassen Sie los. Und das war's. Figma öffnet automatisch Fenster mit den Interaktionsdetails für Sie und er kann Ihre Interaktion weiter anpassen. Du kannst das sofort machen. Oder wenn es geschlossen ist, klicken Sie einfach auf den Connector oder direkt auf die Interaktion im Panel und es wird wieder geöffnet. Eine Interaktion besteht immer aus einem Auslöser, einer Aktion und einem Ziel. Das ist also der obere Teil dieses Panels hier. Onclick ist unser Auslöser, zu dem Actin navigiert wird. Das Ziel ist unser Rahmen namens Orange. Jetzt kann ich die Triggeraktion und die Schätzung ändern , indem ich einfach darauf klicke. Ich könnte also von Klick zu Ziehen, Mauseingabe und so weiter zum Trigger wechseln . Wenn wir den Bildschirm wechseln möchten, ist es normalerweise onClick. Also belasse ich es vorerst dabei und wir werden die anderen später kennenlernen. Meine Aktion ist navigieren zu. Figma gibt mir auch die Möglichkeit, Overlays zu tauschen, zu schließen und zu öffnen und so weiter. Gehen Sie zurück, scrollen Sie zu einem geöffneten Link und wir werden das in einer Minute ansehen. Dann das Ziel. Ich könnte auch jeden anderen Rahmen aus dieser Drop-down-Liste auswählen. Sie werden jedoch feststellen, , wenn Sie es mit mehr Frames zu tun dies etwas mühsam ist, wenn Sie es mit mehr Frames zu tun haben. Ich bevorzuge es also, einfach meinen Stecker auszuwählen und dann einen anderen Rahmen auszuwählen indem ich ihn einfach verschiebe. Unten ist der Animationsteil. So verhalten sich unsere animierten Dinge am Ende, sobald die Interaktion stattfindet. Das ist der ausgefallene Teil, der Teil, der funktioniert und all dieses magische Verhalten auslöst. Dinge, die sich ineinander verwandeln und so weiter. Jetzt werden wir uns genauer mit Smart Animate befassen. Aber nur ein Wort der Vorsicht, Mikrointeraktionen sind wirklich nützlich. Ich empfehle Ihnen jedoch, zunächst sicherzustellen, dass Ihre tatsächliche Verbindung und Ihre Benutzerfreundlichkeit funktionieren und alles Sinn macht. Und später können Sie mit Ihrem Entwicklungsteam darüber nachdenken, welche Animationen und Interaktionen Sie hinzufügen möchten. Denn was manchmal nur ein Klick und Figma sind, ist eigentlich ziemlich schwierig einzurichten und CSS. Also, nur um es ein bisschen reibungsloser zu machen, werde ich mich für die Seele entscheiden. Er kann die Zeit einstellen, die benötigt wird , um sich in einem anderen Bildschirm aufzulösen. Und wir könnten auch eines der voreingestellten Verhaltensweisen wählen. Ich werde es vorerst einfach ruhig lassen, was ziemlich nett ist. Schauen wir uns in unserer Vorschau an, wie das aussehen würde . Ich wähle den übergeordneten Frame und füge einfach ein Modell um ihn herum hinzu. Ich arbeite an einem iPhone 14-Größe. Okay, also lass uns auf Play klicken. Hier sehe ich meinen Startbildschirm und wenn ich jetzt auf meine orange Form klicke, kann ich sehen, dass sie zur Unterseite navigiert. Wenn ich jedoch auf eine Tasche klicke, passiert nichts. Lassen Sie uns also auch die anderen Interaktionen einrichten. Gehen wir also zurück zu unserer Figma-Datei. Und hier werde ich zunächst die anderen Zahnformen verbinden. Also ziehe ich einfach einen Stecker heraus. Und du kannst sehen, dass Figma die Presets gespeichert hat , die ich gerade für das orangefarbene verwendet habe. Das ist also normalerweise sehr nett und hilfreich. Was ich jetzt auch machen möchte, wenn ich auf Zurück klicke, möchte ich zurück auf den Startbildschirm springen. Auf dem Tab ist es also genauso, navigiere zur Startseite. Und ich kann es beim gleichen Verhalten belassen. Also werde ich das für die anderen beiden machen. Ähm, übrigens, falls du dich fragst, warum da Tabulator-und-Klick mehr steht, das liegt einfach daran, dass ich das Gerät auf iPhone umgestellt habe. Die Aktion funktioniert immer noch genauso. Schauen wir uns also unseren Prototyp an. Und das funktioniert einfach perfekt. 13. BASICS: 08 Die Back-Aktion: Lassen Sie uns über die Backaction sprechen, da dies Ihnen tatsächlich helfen kann , unsere Prototypen erheblich zu vereinfachen. Also hier habe ich ein Beispiel , wo ich auf eine der Formen klicke und dann zur Detailseite springe. Wenn ich zurück möchte, habe ich oben eine Zurück-Schaltfläche. Und das wiederum, es verlinkt zurück zur Hauptseite. Das funktioniert gut und Sie können es absolut so verwenden. Es gibt jedoch eine Möglichkeit, all diese zusätzlichen Verbindungen zu entfernen . Wählen wir hier unsere Zurück-Schaltfläche und öffnen Sie dann unser interaktives Menü. Hier kann ich onclick sagen. Übrigens, wenn Sie Ihren Prototyp hier angeben, hat sich das geändert. Zwei oben drauf. Lass mich dir nur zeigen. Das ist genau das Gleiche. Es ist nur so, wenn Sie einen Prototyp einrichten , ändert sich der Wortlaut. Also onClick oder on Tab statt zu navigieren, um einfach zurück aus dem Aktionsmenü zu wählen. Das wird jetzt zum zuvor geöffneten Frame zurückkehren . Schauen wir uns das in unserem Präsentationsmodus an. Und ich kann sehen, wenn ich hier klicke, komme ich zur Detailseite, ich klicke auf Zurück und gehe einfach zurück. Also genauso, als ob ich eine direkte Verbindung hätte. Nun ein kleiner Tipp, ich kann jetzt entweder alle auswählen und das manuell auf Zurück ändern. Oder ich kann einfach die Verbindungen löschen und dann diese hier haben, die ich eingerichtet habe, sie kopieren und das Verhalten einfach in ein anderes Element einfügen. Das funktioniert, weil ich im Prototyping-Modus bin. Wenn ich im Designmodus wäre, würde ich einfach das gesamte Element kopieren. Nun, die Rückseite ist fantastisch, aber verwechseln Sie sie nicht mit einer Home-Taste. Denn wenn Ihr Design komplexer wird, gibt es verschiedene Stellen und navigieren Sie dann zum selben Bildschirm. Daher ist zurück wirklich da, um immer zum zuletzt besuchten Bildschirm zurückzukehren. Und das ist nicht unbedingt dein Startbildschirm. 14. BASICS: 09 Scrollto: Bisher haben wir also nur externe Frames verlinkt, aber wir können auch auf ein Element innerhalb desselben Frames verlinken. in meinem Beispiel Lassen Sie uns in meinem Beispiel einfach den Inhalt ausschneiden. Sie können sehen, dass ich hier unten ein schwarzes Quadrat habe. Ich möchte also, dass, wenn ich auf diesen schwarzen Kreis klicke, dieser zum schwarzen Quadrat herunterscrollt. Gehen wir also in den Prototypenmodus. Und dann verbinde ich einfach meinen Kreis, nicht mit einem externen Bildschirm, sondern mit dem Quadrat auf demselben Rahmen im Interaktionsfeld. Sie können das auf einem Klick sehen. Und auch hier ist das Gleiche wie auf der Registerkarte, wenn Sie einen Prototypensatz haben, scrollen Sie auch. Das ist hier also einfach eine Aktion. Und dann scrolle zu mir. Ich habe einfach eine quadratische Schriftrolle nach mir benannt. Hier haben Sie jetzt Offsets , die Sie auch festlegen können , und wir werden uns gleich ansehen warum wir sie benötigen. Und wie bei allen anderen können Sie zwischen Instant und Animate wählen. Ich werde mich für Animate entscheiden , weil das dem Ganzen diese netten kleinen Grenzen gibt , weißt du , ich werde es vorerst ruhig lassen. Schauen wir uns unseren Vorschaumodus an. Wenn ich also auf den Kreis klicke, scrollt er nach unten zu meinem schwarzen Quadrat. Ort, an dem Sie sehen werden , dass es ziemlich viel gibt, ist eine Seite oder Website, auf der Sie eine Navigation haben, die nicht auf separate Seiten verweist, sondern auf zwei Abschnitte innerhalb der Seite. Also lasst uns einfach den Inhalt hier ausschneiden. Und Sie können sehen, dass es ziemlich viel darunter liegt. Und er wird meinen About-Bereich und meinen neuen Bereich haben. Was ich jetzt tun möchte, ist, das Info aus dem Menü zu nehmen, zum Prototyping zu springen und dann das Navigationsmenü mit dem Abschnitt zu verbinden. Und ich werde dasselbe für Neuigkeiten tun. Schauen wir uns also in unserem Vorschaumodus an , ob das funktionieren wird. Also scrolle ich auf Über Annette und scrolle nach unten, und wenn ich auf neue Sets klicke, funktioniert das auch. Aber es gibt zwei Dinge, die mir daran nicht gefallen haben. Zuallererst habe ich ein festes Menü, das deckt also quasi meinen About-Bereich ab. Wenn ich auf Blog klicke, muss ich außerdem nach oben gehen, weil ich nicht wieder nach oben scrollen möchte. Ich will das gleiche Verhalten. Also zurück in meinem Design, ich möchte zuerst den Blog verbinden. Ich verbinde den Blog hier mit meiner Kartengruppe. Jetzt möchte ich diese Offsets korrigieren. Ich weiß, dass ich hier etwas Offset hinzufügen werde, aber ich kenne die Werte noch nicht. In der Zwischenzeit war mein Problem also die Höhe des Menüs. Also lass uns das überprüfen. Und die Höhe hier ist 90. Also lasst uns zum Menü springen. Gehen wir zurück in den Prototyping-Modus. Und ich füge einen Offset von -90 hinzu. Und ich muss -90 hinzufügen. 90, weil es es sonst weiter nach unten drücken würde. Ich wollte hochgehen. Deshalb füge ich einen negativen Wert hinzu. Und ich werde dasselbe für Neuigkeiten tun. Übrigens können Sie auch Shift und Command gedrückt halten und mehrere auswählen. Also ich könnte hier auch einfach einmal den gleichen Wert hinzufügen und den dann für beide haben. Jetzt mit einem Blog will ich nicht 90, weil ich im Grunde wieder ganz nach oben springen wollte. Also werde ich hier ein bisschen hineinzoomen. Und ich werde messen, wie hoch dieser Wert ist. Das ist also von ganz oben bis zu meinem Abschnitt, der bei 220 beginnt. In diesem Fall füge ich also einen Offset von -220 hinzu. Mal sehen, ob das funktioniert. Also lasst uns auf Blog klicken. Und ja, wir bewegen uns ganz nach oben. Dann ist das Scrollen schön nach unten und Neuigkeiten haben auch funktioniert. 15. GRUNDLAGEN: 10 Overlay: Schauen wir uns Overlays und Figma an. Das perfekte Beispiel für ein Overlay ist also ein Menü. Es ist also im Grunde ein eigener Rahmen. Wenn wir aber z.B. auf Arbeit klicken , möchten wir nicht, dass der gesamte Frame dieses Menü ändert, sondern dass das Menü hier unter unserer Navigation erscheint. Wir haben sie so ziemlich wie jede andere Verbindung eingerichtet. Wählen wir also Arbeit aus. Link zum Menü. Und jetzt klicken wir, anstatt zu navigieren, wählen wir Overlay öffnen, Overlay-Menü. Ich kann jetzt die Position wählen. Also zentriert, oben, links, unten usw. im Verhältnis zum übergeordneten Rahmen. Oder ich kann auch manuell wählen, was ich hier benötigen würde. Ich kann jetzt diese kleine Vorschau meines Overlays sehen und es nach Bedarf auf dem Rahmen positionieren. Ich kann wählen, dass es automatisch geschlossen wird, wenn jemand draußen klickt. Also jede Gegend hier in der Nähe. Und ich könnte einen Hintergrund für das Menü hinzufügen , das nicht wirklich sinnvoll ist. Also verlasse ich es. Und wie immer kann ich meine Animation wählen. Also werde ich das auch so auflösen lassen wie immer. Schauen wir uns an, wie das aussehen wird . Lass uns auf Play klicken. Und ich kann sehen, dass mein Menü erscheint, wenn ich auf Arbeit klicke. Wenn ich erneut auf die Arbeit oder eine andere Stelle auf der Leinwand klicke, wird es wieder verschwinden. Also ich kann jetzt einfach jedes dieser Untermenüs hier mit einem neuen Bildschirm verbinden . Schauen wir uns ein anderes Beispiel an. Wenn ich auf die Schaltfläche „ Abonnieren“ klicke, möchte ich ein Overlay öffnen, mit dem Besucher den Newsletter abonnieren können. Okay, wählen wir die Schaltfläche Abonnieren und verknüpfen sie mit dem Overlay und klicken dann auf Overlay öffnen. Ich möchte es zentriert halten und ich wollte es schließen, wenn draußen klicke, weil ich hier eigentlich kein Schließsymbol habe. Ich sollte das für eine gute Benutzerfreundlichkeit haben, aber für diese Übung klicken wir einfach nach draußen. Ich möchte auch einen Hintergrund hinzufügen. Ich werde es tatsächlich etwas dunkler haben, also bei 50 Prozent. Okay, schauen wir uns das an. Also hier ist mein Bildschirm. Ich klicke auf Abonnieren und das Overlay öffnet sich. Wenn ich irgendwo anders klicke, wird es wieder geschlossen. Jetzt habe ich einige weitere Schritte während meine Besucher ihre E-Mail-Adresse hinzufügen. Sobald also jemand hier reinklickt, werde ich sagen, sobald jemand in das Adressfeld klickt, werde ich so tun, als wäre es ausgefüllt. Also werde ich das Overlay mit diesem Overlay gegen austauschen. Sobald sie hier erneut auf die Schaltfläche Senden klicken, tausche ich das Overlay aus und ich möchte nur, dass es zu diesem bestätigten Bildschirm hier geht. Das bestätigt also nur , dass alles gesendet wurde, aber ich möchte nicht der Besucher eine weitere Aktion ausführen muss. Also, was ich hier tun werde ist, das vorerst wieder mit hier zu verbinden und es nach Verzögerung zu sagen. Also keine Aktion erforderlich nach der Verzögerung von, sagen wir, ich gebe einfach 2 s ein. Es wird zurück navigieren, während ich dies eigentlich nur so setze Es wird zurück navigieren, während ich dies eigentlich , dass dieses Overlay geschlossen wird. Okay, schauen wir mal, ob das funktioniert. Klicken Sie also auf Abonnieren. Dann füge ich meine E-Mail hinzu, los. Und nach 2 s ist das Overlay weg. Es gibt nur eine Sache, die mir nicht gefällt, wenn ich hier klicke, wenn ich das Overlay vertausche, sieht man diese kleinen Blitze. Und das liegt daran, dass ich das hier aus verwende und es eine Verzögerung von 300 Millisekunden gibt. Ich werde das auf Instant umstellen. Und jetzt gehen wir zurück und schauen uns das an. Und das sollte es lösen. Perfektes Overlay fertig. 16. BASICS: 11 Verlinkung auf externe Seiten: Mit Figma Prototyping können Sie nur auf andere Seiten in Ihrem Design verlinken, aber auch auf externe Seiten. Nehmen wir an, in meiner Navigation alles in meinem Design verlinkt, außer dem Blog hier. Ich möchte das mit einem externen vorhandenen Block verknüpfen. Eine Möglichkeit, dies zu tun, besteht darin, dies einfach auszuwählen. Wenn es sich um ein Textelement handelt, klicken Sie auf den Link hier oben und fügen Sie die URL ein. Wenn ich mir das im Präsentationsmodus ansehe, sieht man, dass es jetzt ein Link ist. Und wenn ich darauf klicke, wird die eigentliche Website geöffnet. Wenn Sie einen anderen Linkstil haben möchten und das ist kein Problem. Wählen Sie einfach den Text aus und dann IHR Textmenü, Sie können es an Ihre Bedürfnisse anpassen. Nun, das funktioniert ganz gut für Text. Aber die Sache ist, wenn ich z.B. ein anderes Element habe, sagen wir, ich habe diese Karte, die ich auf einen Blogartikel verlinken möchte, dann habe ich nicht die Möglichkeit, es zu verlinken, weil es kein Text ist. Was ich tun könnte, ist mein Prototyping-Menü zu benutzen. diese Karte ausgewählt ist, springen wir zum Tab Prototyping. Jetzt klicke ich hier neben Interaktion auf das Plus. Das eröffnet also eine neue Interaktion. Wenn ich erneut darauf klicke, öffnet sich ihr Interaktionsfenster. Jetzt belasse ich das vorerst bei Qlik. Ihr seht aber schon, dass ich dadurch auch den Vorteil habe , dass ich mit jeder anderen Aktion, wie dem Drücken einer bestimmten Taste auf meiner Tastatur, Mauseingabe und so weiter, einen externen Link öffnen könnte wie dem Drücken einer bestimmten Taste auf meiner Tastatur, Mauseingabe und so weiter, . Dann füge ich für die Anleitung ganz unten in meinem Menü einen offenen Link hinzu. Und jetzt kann ich hier einfach den Link kopieren, den ich öffnen wollte. Im Präsentationsmodus. Wenn ich auf diese Karte klicke, werde ich jetzt auf die externe Seite weitergeleitet. Und das funktioniert übrigens auch andersherum. Sie können auch den Link zum Teilen von Prototypen kopieren. Sie können das entweder über das Menü tun oder einfach Command L drücken und dann von einer beliebigen externen Seite zurück zu Ihrem Prototyp verlinken . Dies ist auch eine wirklich gute Möglichkeit, Prototypen zu verknüpfen , die sich in verschiedenen Dateien oder auf verschiedenen Seiten befinden . 17. BASICS: 12 Action-Trigger: Schauen wir uns die verschiedenen Trigger für Animationen genauer an . Hier haben wir also unser Standard-Setup , das wir auch bisher verwendet haben. Und es funktioniert einfach perfekt, wenn wir nur einen anklickbaren Prototyp erstellen wollen. Also hier verwenden wir onclick und navigieren zu einem neuen Ziel, das wäre unser Detailbildschirm. Mit diesem kleinen Drop-down-Menü hier können wir nun andere Optionen sehen. Also, Drag-On ist etwas, das in diesem Fall nicht viel Sinn machen würde. On Drag ist also etwas, das man auf mobilen Bildschirmen häufig findet. Also hier haben wir z.B. diesen Wechsel zwischen Artikeln und Videos. Und deshalb verwende ich on Drag. Also, wenn ich hierher ziehe, sehe ich den Bildschirm. Und das wird normalerweise mit einer Push-Animation kombiniert, worüber wir später mehr erfahren werden. Also Untätigkeit, es wird ungefähr so sein. Ich würde auf eine Seite ziehen, die Videos holen und hierher ziehen, um die Artikel zu erhalten. Dann haben wir viele Interaktionen wie Maus und Maus lassen die Maus unten, Maus hoch und auch beim Schweben und beim Drücken wäre ein Teil davon. Das sind wirklich all deine verschiedenen Interaktionen mit der Maus. Sagen wir einfach Mauseingabe und navigieren Sie dann zu diesem neuen Bildschirm. Das würde auch hier funktionieren. Als ich eintrete, bin ich zum neuen Bildschirm gesprungen, aber das würde nicht viel Sinn machen. Ein Ort, an dem Sie das verwenden würden und wir werden ein ganzes Kapitel darüber haben , sind interaktive Komponenten. Also hier sind die Komponenten Set mit zwei Varianten, einem Button und dann sage ich beim Schweben oder sagen wir einfach Mauseingabe. Und es wird tatsächlich benutzt, während man schwebt. Ich verwende hier Smart Animate, was wir später auch behandeln werden. Und Sie werden sehen, dass es nicht navigiert, aber es ändert sich auch, weil es in diesem Komponentensatz enthalten ist. Ich kann jetzt eine Instanz abrufen. Zeichnen wir einfach einen Rahmen darum , damit wir es besser sehen können. Und jetzt, wo wir auf Play klicken, können wir sehen, dass hier mein Button ist und ich den Mauszeiger seltsam darüber bewege, hat er diesen netten kleinen Schwebeeffekt. Ein Trigger, der sehr wenig benutzt wird , war tatsächlich sehr beeindruckend, ist der Tastaturauslöser. Um Ihnen ein Beispiel zu zeigen, hier habe ich eine Suchleiste und onclick, die ausgefüllt wird . Das ist auch etwas, das wir normalerweise mit interaktiven Komponenten lösen würden , aber lassen Sie uns vorerst bei einer vereinfachten Version bleiben. Jetzt wähle ich dieses Feld im Formular aus. Jetzt, wo ich die Eingabetaste drücke, möchte ich, dass das Ergebnis angezeigt wird. Was ich also sagen kann ist, dass ich statt onClick Taste oder Gamepad sage. Und jetzt wählen Sie einfach dieses Feld hier aus und drücken Sie dann eine beliebige Taste auf Ihrer Tastatur und es wird gespeichert. Also in meinem Fall Enter hätte ich auch ein z.B. drücken dann wird es hier navigieren und du kannst auch die Animation wählen. Lassen Sie uns also eine Dissolve-Animation machen. Lassen Sie uns das in Aktion sehen. Hier. Ich klicke auf Suchen. Jetzt habe ich es ausgefüllt. Und jetzt, wo ich die Eingabetaste auf meiner Tastatur drücke, was Sie nicht sehen, mir die Testergebnisse angezeigt. Die letzte, die ich dir zeigen möchte, ist verspätet. Und das haben Sie vielleicht nicht immer für jede Situation. Aber wenn ja, dann findest du es mit Verzögerung hier unten. Und das geht im Grunde einfach verzögert von diesem Bildschirm zu Bildschirm. Und das wird wirklich mächtig, wenn wir später etwas über Smart Animate erfahren. Also schauen wir uns das mal hier an. Wir können die Geschwindigkeit festlegen. Stellen wir das auf 2 s , damit wir unsere Verzögerung wirklich sehen können. Und drücken wir Play. Sie können sehen, dass es seine Verzögerung nimmt und dann den Bildschirm wechselt. Und das ist auch sehr nett, weil du es verketten kannst, sodass du verschiedene Aktionen ausführen kannst. Oder Sie könnten auch so etwas wie Newsletter-Probleme einrichten , die nach einer bestimmten Zeit auftauchen würden. 18. GRUNDLAGEN: 13 Figma-Animationsoptionen: Schauen wir uns die verschiedenen Animationen , die wir in Figma zur Verfügung haben. Lassen Sie uns mit der ersten beginnen, die sofort ist, und dies ist eigentlich Ihre Standardanimation. Ich benutze diesen eigentlich nicht oft, aber ein gutes Beispiel, wo ich ihn verwende, ist ein Tooltip. Also hier habe ich ein Info-Icon, wenn ich den Mauszeiger darüber bewege. Also lass uns sagen, was schwebt. Ich möchte ein Overlay öffnen und ich werde es sofort öffnen. Und lassen Sie mich einfach mein Overlay hier positionieren. Und jetzt schauen wir uns das an. Wenn ich also den Mauszeiger darüber bewegen würde, wurde es sofort angezeigt. Und ich mochte es, wenn das unschuldig ist und keine Verzögerung hat weil man darüber nachdenkt, wie schnell die Leute ihre Maus bewegen. Sie möchten also wirklich, dass sie bemerken, dass es noch etwas zu entdecken gibt. Eine andere, die ich wahrscheinlich am häufigsten verwende, ist die zweite. Also das ist hier auf meiner Liste. Löst sich auf, das Salz wird im neuen Rahmen langsam verblassen. Sie werden auch feststellen, dass Sie mehr Optionen erhalten. Sie können wählen, wie das Ein- und Aussteigen erleichtert wird und auch, wie lange es dauern wird. Wenn ich diesen hier einstelle, also das sind Millisekunden, setzen wir ihn auf 5.000, also wäre es sehr langsam. Und schauen wir uns das an. Also lasst uns darauf klicken und ihr könnt sehen, wie dieser wirklich langsame Übergang auf die neue Seite passiert. Wenn Sie jetzt anfangen, Animationen hinzuzufügen, um Seiten zu wechseln, ist es sehr verlockend, hier eine hohe Zahl hinzuzufügen und es etwas magischer aussehen zu lassen. Aber gerade wenn Sie zwischen verschiedenen Seiten navigieren, empfehle ich, dass Sie es irgendwo bei dieser Standardeinstellung von 300 belassen . Denn denken Sie darüber nach, wie die Leute auf Ihrer Seite navigieren. Sie wollen schnell zu verschiedenen Abschnitten springen. Es wird also ein echtes Hindernis sein, immer auf einen langsamen Übergang zu warten. Schauen wir uns an, was wir sonst noch hier haben. Der nächste ist Smart Animate, und das ist ein großer magischer. Smart Animate sucht nach passenden Ebenen zwischen Ihrem ursprünglichen Frame und dem endgültigen Ziel. Und es erkennt die Änderung und wendet dann eine nahtlose Animation an. Weil es so mächtig ist und eine wirklich große Sache ist, wenn es um Animation und Figma geht, habe ich ein ganz eigenes Kapitel über Smart Animate. Aber nur um Ihnen eine kleine Vorschau zu geben, nehmen wir diesen Frame und duplizieren ihn, weil wir wirklich identische Frames benötigen. Und was ich dann hier machen werde, ist ein automatisches Layout einzurichten. Ich werde diese Bilder einfach hier stapeln. Also wähle ich die gesamte Gruppe mit einem Rahmen verbunden ist. Und wenn ich darauf klicke, möchte ich mit Smart Animate zum anderen Frame navigieren. Und ich habe gesagt, dass ein bisschen 800 angeheuert hat, damit wir es uns genau ansehen können. Also lass uns auf Play drücken. Und ich kann hier meinen Bilderstapel sehen. Wenn ich sie anklicke, gibt es einen schönen Übergang. Sie können intelligent zwischen verschiedenen Farben, Größen und Positionen animieren Größen , und das ist wirklich, wirklich leistungsstark. Schauen wir uns unseren letzten Übergang an, und das sind die beweglichen Übergänge und Sie finden sie hier unten. Wir haben Einziehen, Ausziehen, Drücken, Hineinrutschen und Herausrutschen. Beachten Sie, dass Sie bei diesen beweglichen Übergängen diese kleinen Pfeile auf der rechten Seite haben und wählen können , in welche Richtung sie sich bewegen sollen. Also von oben, von unten, links oder rechts, rein und raus. Sie sind im Grunde ein Slider-Frame in und aus der Ansicht. Das ist also wirklich nett, um Hierarchien zu erstellen. Push ist dem Ein- und Ausziehen sehr ähnlich, aber es schiebt den Rahmen auf die gleiche Ebene. Slide In und Slide Out sind sich wieder sehr ähnlich, allerdings werden die Frames leicht verschoben, wenn sie sich auflösen, während die Bewegung ihre Position beibehält. Am besten ist es, einfach mit ihnen herumzuspielen. 19. GRUNDLAGEN: 15 Abschnitte und stateful Design: Abschnitte in Figma sind eine großartige Möglichkeit, unser Design besser zu organisieren und ein stattliches Design zu erstellen. Schauen wir uns an, was das bedeutet. In meinem Beispiel hier habe ich also einen Startbildschirm. Und auf diesem Startbildschirm kann ich eine Anmeldetaste drücken , die mich dann durch ein Overlay mit dem Registrierungsprozess führt . So kann ich wählen, welchen Plan ich haben möchte, meine persönlichen Daten hinzufügen und eine Zahlungsmethode wählen. Und dann ist am Ende alles bestätigt. Schauen wir uns den eigentlichen Prototyp an. Also hier ist das Zuhause. Ich klicke auf, Anmelden. Ich kann dann einen beliebigen Plan wählen. Ich füge meine Daten hinzu. Ich melde mich an, wähle eine Zahlung aus und sie ist bestätigt. Das scheint alles in Ordnung zu sein. Aber nehmen wir an, ich starte den Prozess. Und dann schließe ich im Laufe des Prozesses irgendwann mein Overlay. Jetzt, nach einer Weile, möchte ich zurückkommen und meine Registrierung abschließen. Wenn ich jedoch hier klicke, werde ich immer zum allerersten Bildschirm weitergeleitet . Jetzt will ich das nicht, ich möchte zu diesem Bildschirm zurückkehren, auf dem wir links sind, und alle Informationen behalten, die ich bereits hinzugefügt habe. Dies wird als Stateful-Design bezeichnet. Wenn wir uns jedoch unsere Akte ansehen, sich Figma auf keinen Fall erinnern, kann sich Figma auf keinen Fall erinnern, wo ich aufgehört habe. Es gibt jedoch einen Weg, dies zu umgehen, und hier kommen Abschnitte ins Spiel. Sie finden Abschnitte hier oben im Frames-Menü. Oder Sie können einfach die Tastenkombination Shift S verwenden. Genau wie bei einem Frame. Sie können einen Abschnitt um eine Gruppe von Frames zeichnen. Wir können diesen Abschnitt jetzt nennen, nennen wir ihn Registrierung. Und wenn Sie zur Registerkarte Design wechseln, können Sie auch die Farbe des Abschnitts ändern. Wie Sie hier sehen werden, erhalten Sie einige grundlegende Funktionen, aber es gibt keine Dinge wie automatische Layoutbeschränkungen und andere Funktionen , die Sie bei Frames sehen würden. Abschnitte sind also eigentlich nur zum Organisieren da. Abschnitte werden im Präsentationsmodus ebenfalls ignoriert . Wenn ich also einen Abschnitt auswähle und auf Play drücke, wird mir immer der erste Bildschirm in diesem Abschnitt angezeigt . Okay, großartig. Jetzt müssen wir nur noch ein paar Anpassungen vornehmen. Gehen wir also zurück zum Prototyping. Und was ich tun möchte ist, ich möchte nicht, dass diese Anmeldung hier eine Verbindung zum ersten Bildschirm herstellt, sondern ich wollte eine Verbindung zum gesamten Bereich herstellen. Also richte ich einen neuen Connector ein und sage auf der Registerkarte, navigiere zu, und ich verlasse das und navigiere zum Abschnitt. Ich muss benutzen. Navigation zum Öffnen eines Overlays mit einem Abschnitt funktioniert nicht , obwohl ich innerhalb des Abschnitts weiterhin Overlays verwenden kann. Und jetzt muss ich noch eine letzte Sache tun, was etwas verwirrend ist, dass ich hier alle meine Kleiderknöpfe auswählen muss. Und ich werde sie von der geschlossenen Überlagerung zur Rückseite ändern. Dadurch kann ich zu meinem ursprünglichen Bildschirm zurückkehren. Sie können sie auch einfach direkt mit einem Bildschirm verbinden , das ist kein Problem. Schauen wir uns also den Prototyp an. Also hier haben wir unser Zuhause, wir melden uns an, wir wählen einen beliebigen Plan, geben unsere Daten ein. Und dann schließen wir hier bei der Bezahlung. Und nach einer Weile gehen wir zurück. Und Sie können sehen, dass es sich an den genauen Aufenthalt erinnert , an dem wir gegangen sind, und wir können von hier aus einfach weitermachen. Jetzt arbeiten wir an unserer App und fügen weitere Bereiche hinzu. Wir haben vielleicht mehr Anmeldeschaltflächen von anderen Orten, aber das ist kein Problem. Wir können sie einfach mit demselben Abschnitt verbinden. Das einzige, was wir jetzt ändern müssen, ist dass wir, wenn wir einen Prozess abgeschlossen haben, vielleicht nicht nach Hause zurückkehren möchten, sondern dass wir das Ganze auch einfach auf den Hintergrund setzen und daher zu einem beliebigen Frame zurückkehren möchten , aus dem wir gekommen sind. Schauen wir mal, ob das funktioniert. Also hier starte ich den Anmeldevorgang von zu Hause aus. Ich habe bereits einige Details hinzugefügt, aber dann schließe ich mein Overlay. Ich navigiere weiter in meiner App. Und dann gehe ich von einem anderen Ort zurück und du kannst sehen, dass es sich daran erinnert wo ich aufgehört habe, und ich kann einfach von hier aus fertig werden. 20. BASICS: 14 Easing und Frühlingsanimationen: Schauen wir uns die verschiedenen Easing - und Frühlingsanimationen an . Die Beschleunigung bestimmt die Beschleunigung eines Übergangs zwischen zwei Keyframes. Dies kann der Übergang von einem Bildschirm zum anderen oder ein Übergang zwischen einzelnen Objekten sein. Also z. B. Farbe oder Größe ändern, wenn Sie klicken. Sie werden sehen, dass Übergänge in der Regel durch Diagramme dargestellt werden , wobei die Zeit die X-Achse und der Übergang, z. B. „Hineinziehen“ oder „Slide“ oder was auch immer Sie verwenden, die Y-Achse ist. Linear ist die Standardbeschleunigung und es ist nur eine gerade Linie in Ihrem Diagramm. Das bedeutet also, dass es sich einfach mit einer konstanten Geschwindigkeit bewegt. Figma hat viele eingebaute Voreinstellungen, die Sie verwenden können. Wenn wir z. B. von linear zu Ease In wechseln können Sie sehen, dass die Animation jetzt langsam beginnt und dann gegen Ende beschleunigt wird. Also hier habe ich einen Überblick über alle eingebauten Animationen und Figma. Das sind also im Grunde nur Instanzen und du kannst sehen, dass ich sie alle hier unten eingerichtet habe. Schauen wir uns dieses Beispiel an, das rein und raus ist. Also habe ich einen Trigger auf After Delay gesetzt. Und dann wird es intelligent animiert und es wird die Easy-In-and-Out-Animation verwenden . Und ich habe nur 1 s gesagt, damit wir es ein bisschen besser sehen können. Und wenn das erledigt ist, passiert das Gleiche wieder rückwärts. Okay, kehren wir zu unserer Übersicht zurück , die wir hier finden. Und ich wähle einfach diesen Frame aus und drücke auf Play. wir jetzt einfach sicher, dass wir dies auf die Breite einstellen , damit wir sie alle sehen können. Und ich kann all die verschiedenen Animationen nebeneinander sehen . Es gibt keine Animation, die richtig oder falsch ist. Es geht wirklich darum, was du zu bauen versuchst. Was siehst du hier unten? Sanft, schnell, federnd und langsam. Eigentlich die sogenannten Frühlingsanimationen. Der Unterschied zwischen Easing - und Frühlingsanimation wird etwas klarer, wenn wir uns die benutzerdefinierten Optionen und Figma ansehen . Hier sieht man beim letzten Lockerungsübergang, wir gewöhnen uns fleißiger an. Und wenn wir das auswählen, können Sie sehen, dass Sie hier die Kurve erhalten , die Sie jetzt an Ihre Bedürfnisse anpassen können. Aber es wird wirklich immer diese Kurve sein. Nun weiter unten in meinen Beispielen habe ich die Federanimation, dann muss ich Federn anpassen. Schauen wir uns das an. Ebenso wie die Steifigkeit, also die Anzahl der Sprünge, an die die Animation angepasst werden kann. Ich kann die Dämpfung anpassen, die das Federniveau in der Animation beeinflusst. Und ich kann die Masse beeinflussen. Dies beeinflusst die Geschwindigkeit der Animation und die Höhe der Grenzen. Wir können diese Kurve also wirklich ziehen und hier viele Grenzen und viel Bewegung hinzufügen . Schauen wir uns an, wie das in unserem Vorschaumodus aussieht . Du kannst also sehen, dass du am Ende dieses nette kleine Hüpfchen bekommst. Der beste Weg, sie zu meistern, ist wie immer, sich bereit zu machen und zu erkunden. 21. GRUNDLAGEN: 16 Flows in Figma: Sie können in Figma mehrere Flows erstellen, um sich auf verschiedene Segmente Ihres Prototyps zu konzentrieren . Es ist sehr einfach. Lass es mich dir zeigen. Wenn Sie ein Design-Setup mit Verbindungen haben, finden Sie dort mindestens einen Flow. Figma richtet automatisch Ihren ersten Flow ein. Sobald Sie Ihren ersten Stecker gezogen haben. Sie können diesen Flow einfach auswählen und an einen beliebigen anderen Rahmen anhängen. Beachten Sie, dass es nicht zwei Abschnitte anhängt , sondern nur zwei Frames. Sie können auf das Schema doppelklicken, um es umzubenennen. Sie können auch einen beliebigen anderen Rahmen auswählen und dann einfach in einem Prototyping-Bereich oben auf das Plus klicken und einen weiteren Flow hinzufügen. Nennen wir das Zuhause. Wenn du im Prototyping-Modus auf eine beliebige Stelle auf deiner Leinwand klickst , siehst du hier unten eine Übersicht deiner Abläufe. Im Moment haben wir also Registrierung und Zuhause und notieren uns diese Reihenfolge. Lassen Sie uns also auf Play drücken und sehen, was das für unser Prototyping bedeutet. Jetzt haben Sie auf der linken Seite ein kleines Menü, das Sie ein- oder ausblenden können. Hier ist der erste Ablauf die Registrierung. Also wird es mir zuerst den Bildschirm zeigen. Wenn ich auf Home klicke, komme ich zum Startbildschirm. Ich kann immer noch wie zuvor auf meinen Prototyp zugreifen. Aber das ermöglicht unseren Benutzern. Also, wenn Sie Benutzertests durchführen, um zu verschiedenen Regionen Ihres Prototyps zu springen . Weiß, wie wir auch Beschreibungen hinzufügen können. Das ist sehr praktisch zum Testen. Es ist ein bisschen versteckt. also zurück in unserer Designdatei Wählen Sie also zurück in unserer Designdatei einen beliebigen Flow aus und dann erhalten Sie dieses kleine bearbeitete Beschreibungssymbol auf der rechten Seite. Wenn Sie darauf klicken, können Sie Text hinzufügen. Lassen Sie uns nun zum Prototyping zurückkehren und Sie können sehen, dass unser Common darin bestand, diesen spezifischen Ablauf zu erweitern. Zurück in unserer Akte. Wenn Sie auf die Leinwand klicken, können Sie auch alle Ihre Flows neu anordnen. Wir könnten also z.B. zuerst Home haben , wenn du auf den kleinen Auswahlrahmen klickst, dann springt er. Ich zeige dir diesen Ablauf. Das ist sehr praktisch, wenn Sie viel Flow eingerichtet haben. Eine andere Sache ist, dass Sie einen direkten Link zu Ihrem Flow teilen können . Wenn du also möchtest, dass jemand direkt öffnet, z.B. im Registrierungsprozess, dann kannst du den Ablauf einfach direkt von hier kopieren. Wenn Sie in einer Präsentation auf Abspielen klicken, wird außerdem direkt zu diesem bestimmten Flow gewechselt. Flows sind wirklich eine großartige Möglichkeit, Ihrem Prototyp ein wenig Struktur zu verleihen. Wenn du direkt vom Prototyping teilst, dann hilft das den Besuchern, die verschiedenen Abschnitte deines Designs zu verstehen die verschiedenen Abschnitte deines . Außerdem kannst du sie mit Kommentaren durch allgemeine Tests führen. 22. BASICS: 17 Videos zu Prototypen hinzufügen: In Figma können Sie Videos einbetten. Beachten Sie jedoch, dass dies nur bei einem kostenpflichtigen Tarif funktioniert. in InDesign einfach eine beliebige Füllung aus und wählen Sie dann über das Menü Füllen aus dem Drop-down-Video. Sie sehen ein Vorschaubild des Videos und das kleine Miniaturbild des Videos im Ebenenfenster. Damit dies funktioniert, sollte Ihr Video im MP4-Format vorliegen. Geschenke funktionieren übrigens auch und sollten 30 MB nicht überschreiten. Als Videos oder einfach als Ebenenfüllungen können Sie sie auch wie jede andere Ebenenfüllung ändern . Sie können die Größe ändern, Sie können weitere Elemente hinzufügen. Sie können Mask Crop usw. verwenden. Um zu sehen, wie das Video abgespielt wird, müssen Sie in den Präsentationsmodus wechseln. Um die Ortseinstellungen zu ändern, wählen Sie das Video aus und wechseln Sie in das Prototyping-Bedienfeld. Und dann können Sie hier im Video wählen, ob es automatisch abgespielt wird oder nicht, ob es in einer Schleife abgespielt werden soll, und Sie können wählen, wo der Sound abgespielt werden soll oder nicht. Um sich einige Frustration zu ersparen, beachten Sie, dass Videos derzeit der Figma-App für Mobilgeräte nicht unterstützt werden. 23. BASICS: 18 Vorschau auf deinem Handy: Figma hat eine fantastische App, mit der Sie eine Vorschau Ihrer Prototypen auf Ihrem Handy anzeigen können. Gehen Sie auf die Figma-Website und unter den Produkten finden Sie den Tab Downloads. Innerhalb von Downloads können Sie entweder die iOS- oder Android-Version der App auf Ihr Telefon herunterladen . Sobald Sie die mobile App öffnen, werden Sie aufgefordert, sich anzumelden. Verwenden Sie für die Anmeldung einfach Ihr Standard-Figma-Login. Es ist tatsächlich wichtig, dass Sie genau dasselbe Login verwenden wie für Ihre Arbeitsdateien. Andernfalls funktioniert der Spiegel nicht. Sie sehen dann eine Übersicht der Dateien in Ihrem Konto. Schauen Sie jedoch unten rechts nach und klicken Sie auf Spiegel. Sobald Sie auf Mit dem Spiegeln beginnen klicken, wird jeder Frame gespiegelt, den Sie gerade in Ihrer Desktop-App auswählen. Alle Prototyp-Einstellungen werden hier automatisch sichtbar. Ich liebe es, das zu öffnen während ich an meinen mobilen Designs arbeite. Dadurch kann ich mein Design beim Entwerfen realistischer sehen und testen . Stellen Sie nur sicher, dass Sie überprüfen , ob die Größe des Rahmens, auf dem Sie entwerfen, tatsächlich der richtigen Größe für das von Ihnen verwendete Mobiltelefon entspricht. In meinem Fall habe ich also ein physisches iPhone 14, daher ist mein Bildschirm auch auf die von mir genannten eingestellt. Die App skaliert Ihr Design nach oben und unten, sodass es auch dann echt aussieht, wenn Sie eine andere Größe verwenden. Dies kann jedoch zu Fehlern führen, wenn es z. B. darum geht, Touch-Zielgrößen zu testen. Sie können auch Ihre mobilen Prototypen teilen und über den Link sicherstellen, dass Sie den Link aus der Präsentationsansicht kopieren . Es wird dann automatisch in der mobilen Figma-App geöffnet , wenn es auf einem Telefon installiert ist. Sie auch hier sicher, dass die Größe Ihres Prototyps der physischen Größe des verwendeten Telefons entspricht . In diesem Fall müssen Sie sich keine Gedanken über die Auflösung machen, da der Link zu Figma zurückführt, das sich darum kümmert. 24. SMART ANIMATE: 01 Smart Animate verstehen: Schauen wir uns den magischen Teil des Prototyping mit Figma an , und das ist zweifellos Smart Animate. Smart Animate verwendet also passende Ebenen zwischen verschiedenen Frames und erkennt dann die Unterschiede und animiert zwischen ihnen. Also lasst uns ein bisschen damit spielen. Hier habe ich also zwei Frames und verbinde sie einfach , indem ich verbinde sie einfach , indem Smart Animate auf 2000 Millisekunden bis Sekunden setze, bis wir die Animation wirklich sehen können. Und ich erwidere den Gefallen, damit wir zwischen ihnen klicken können. Also werde ich dir als Erstes zeigen, wie wir die Position ändern können. Ich bewege einfach meine Formen. Klicken wir nun auf den Präsentationsmodus. Und Sie können sehen, dass sie sich gut an ihre neue Position gewöhnen werden. Okay, schauen wir uns an, was wir sonst noch tun können. Die andere Sache, die wir tun können , ist, dass wir die Größe ändern können. Also werde ich das hier ein bisschen kleiner machen. Und ich werde hier auch einige Änderungen vornehmen. Ich werde dieses Dreieck einfach vergrößern und ein wenig zusammendrücken. Und jetzt lasse ich es so. Und jetzt schauen wir uns das an. Ich klicke auf mein Quadrat und du kannst sehen, dass sie nicht nur ihre Position ändern, sondern sich auch anpassen und ihre Größe anpassen. Nun, das, was wir natürlich auch ändern wollen, ist die Farbe. Und wir können hier einfach die Füllung irgendwo zwischen unseren verschiedenen Frames ändern . Und es wird intelligent zwischen der neuen Farbe animiert. Also lass uns hier klicken. Und Sie können sehen, wie die Farbsoftware von einer Farbe zur anderen wechselt. Wir können auch die Rotation anpassen und das ist ein wirklich netter Effekt. Du kannst benutzen. Achte nur darauf, diesen Effekt nicht zu stark zu nutzen. Lassen Sie mich das ein wenig anpassen und schauen wir uns das an. Du bekommst also dieses wirklich nette Twisting. Eine letzte Kleinigkeit, die wirklich praktisch ist, wenn Sie möchten, dass etwas so aussieht, als würde es aus dem Nichts erscheinen , und es auf Null setzen, benötigen Sie es auf dem ersten Bildschirm. Sonst wird es nicht funktionieren. Aber wenn Sie es auf Null setzen, scheint es, als würde es aus dem Nichts erscheinen. In Figma sind ausgefallene Animationen wie diese also wirklich einfach zu bewerkstelligen. Und das ist in Figma, nicht als CSS. Also alles was wir dafür brauchen ist z.B. für dieses verdrehte Menü , dass wir hier ein Menü mit zwei Zeilen haben. Und dann besteht unser Kreuz aus genau den gleichen Linien. Einfach umgedreht und an einem Ende etwas länger gemacht. Dann ist unser Hintergrund, der erscheint, einfach ein versteckter Hintergrund. Lassen Sie mich hier einfach die Opazität ändern. Und Sie können sehen , dass dies einfach ein Quadrat ist, das in einen größeren Hintergrund hineinwächst. Und ich habe das unsichtbar gemacht, und deshalb scheint es, als würde es aus dem Nichts erscheinen. Dann unsere Links, die von links zu erscheinen scheinen. Wenn ich den Clip ausschneide, kannst du sehen , dass sie sich zwar auf dem Rahmen befinden, aber außerhalb des sichtbaren Bereichs verschoben wurden. Und mit der Animation wird einfach wieder auf das Bild in diese Position bewegt . Jetzt müssen wir nur noch zum Prototyping springen und dann dieses Menü hier mit unserem neuen Bildschirm verbinden. Und wir lassen es auf Smart Animate klicken. Und ich habe 1 s hier. Und wenn ich dann erneut auf das Menü klicke, springt es zurück zum ursprünglichen Frame. Und das ist alles, was ich brauche, um diese schicke Animation einzurichten. 25. SMART ANIMATE: 02 Smart animieren und bewegliche Animationen: Wir können Smart Animate auch mit beweglichen Übergängen kombinieren . In meinem Beispiel hier siehst du zwei Bildschirme, einer mit allen Artikeln und der andere mit allen Videos oben als Filter. Was ich nun möchte ist, dass, wenn jemand nach links wischt als die Videos oder diesen Ort, und wenn er nach rechts wischt, wir zu den Artikeln zurückkehren. Also wähle ich die Artikelseite und ziehe dann einen Connector heraus. Und ich sage on Drag. Und ich möchte, dass das hineingezogen wird. Ich könnte Move und eigentlich gebrauchen, aber ich werde mich in diesem Fall für geschoben entscheiden und muss jetzt bedenken, dass ich nach links schiebe. Also möchte ich, dass sich das nach links bewegt. Nun, von hier aus werde ich dasselbe tun und das verbinden und ich sage on drag. Und jetzt möchte ich nach rechts drücken und dann wieder Artikel anzeigen. Schauen wir uns also in unserem Präsentationsmodus an, das aussehen würde. Also ziehe ich nach links und habe meine Videos. Und wenn ich meine Artikel zurückziehe, sieht das ziemlich gut aus. Was mir aber nicht gefällt ist das Top hier tauschen sich auch meine Filter aus. Ich möchte eigentlich, dass sie an Ort und Stelle bleiben und einfach den entsprechenden Filter aktivieren. Wenn ich hier zu meinem Design zurückspringe und meine Verbindung auswähle, können Sie sehen, dass, sobald ich eine sich bewegende Auswahl auswähle, Sie sehen, dass ich dieses kleine Häkchen hier mit dem Namen Smart Animate Matching Layers erhalte dieses kleine Häkchen hier mit dem Namen . Und ich werde das aktivieren. Und das Gleiche muss ich für die Verbindung tun , die zu meinen Artikeln zurückgeht. Schauen wir uns also an, was jetzt passiert. Wenn ich jetzt wische, können Sie sehen, dass mein Menü intelligent animiert ist Der Rest meines Designs verwendet immer noch die bewegte Animation. Damit dies funktioniert, stellen Sie sicher, dass Sie zwei Dinge überprüfen. Zuallererst sind die Elemente, die Sie intelligent animieren möchten, z. B. intelligent animieren möchten, z. B. in meinem Fall zu Filtern, exakt gleich eingerichtet. Sie verwenden also dieselbe Hierarchie und sie verwenden genau dieselbe Benennung. Der Teil, den ich nicht in Smart Animate haben möchte , ist anders benannt. Diese Gruppe heißt also Artikel, und diese Gruppe, die sich eigentlich ziemlich ähnlich ist und nicht Dozent, heißt Videos. 26. SMART ANIMATE: 03 Einschränkungen von smart animate: Smart Animate ist also echte Magie, aber es gibt ein paar Einschränkungen. Wie wir gelernt haben, können wir also Farben, Größe, Position, Drehung usw. animieren . Was wir jedoch nicht animieren können, ist der Übergang von einer Form zu einer anderen Form. Also hier habe ich ein Quadrat gezeichnet und hier habe ich einen Kreis gezeichnet. Und jetzt schauen wir mal, was passieren würde wenn ich das intelligent animieren würde. Sie können also sehen, wenn ich darauf klicke, dass es immer noch gut animiert wird, aber es wächst nicht wirklich in die neue Form. In diesem speziellen Fall gibt es einen kleinen Trick, den ich anwenden könnte. Ich könnte einfach das Quadrat auswählen, kopieren und dann fügen wir es hier erneut ein. Also, anstatt nur einen Kreis zu zeichnen, werde ich dieses Quadrat in einen Kreis verwandeln. Also werde ich dafür runde Ecken verwenden. Und jetzt ändern wir einfach die Farbe, damit wir das ein bisschen besser sehen können. Und lassen Sie uns zurück in den Präsentationsmodus springen. ich jetzt klicke, kannst du sehen, dass das funktioniert, aber es funktioniert nur für ein Quadrat, das sich in einen Kreis verwandelt , wenn ich daraus einen Stern oder ein Dreieck machen möchte , alles andere, das nicht funktionieren würde. Was Ihnen auch Probleme bereiten könnte ist, wenn Sie die Benennung ändern. Also hier habe ich zwei Rahmen, die eine Gruppe und einen Rahmen enthalten. Also dieser hier ist der Rahmen, dieser hier ist die Gruppe. Und sie haben identische Inhalte. Wenn ich das intelligent animiere, dann siehst du, dass das perfekt funktioniert. Gehen wir jetzt zurück und ändern die Benennung. Also nenne ich das hier Gruppe X. Und ich nenne diesen Frame hier, Frame Y dafür. Und jetzt lass uns wieder spielen. Also, obwohl die Hierarchie und so, alle Benennungen innerhalb der Gruppe blieben gleich, nicht mehr als die gleichen erkannt. Und das ist auch der Fall. Wenn ich die Gruppen- und Rahmennamen gleich behalte, aber den Namen des Inhalts ändere. Und fügen wir einfach ein kleines X hier hinten hinzu, wo jeder von ihnen ist. Und jetzt können Sie sehen, wie ich wieder animiere, die Gruppe selbst animiert, aber nicht der Inhalt. Sie benötigen also dieselbe Hierarchie, bei der alles benannt werden muss. Ein kleiner Trick, wenn Sie sehen möchten, ob die Dinge in derselben Benennungs- und Hierarchiekonvention eingerichtet sind die Dinge in derselben Benennungs- und Hierarchiekonvention eingerichtet , um intelligent animiert zu werden Wählen Sie einfach ein beliebiges Element aus und Sie werden in den anderen Frames sehen , welches passt. Also hier kannst du sehen, dass dieser jetzt passt. Wenn ich nun die Benennung ändere und wir erneut ausgewählt haben, können Sie sehen, dass sie jetzt nicht mehr übereinstimmt. Kehren wir zum ursprünglichen Namen zurück. Und jetzt wird es besser. Das ist also eine wirklich nette Möglichkeit, besonders wenn Sie Hunderte von Bildschirmen haben, auf denen Sie schnell überprüfen können, ob etwas nicht in Ordnung ist. Eine weitere Einschränkung, auf die Sie möglicherweise stoßen , besteht darin , dass Sie diese Form nicht intelligent animieren können, wenn Sie ein Overlay öffnen . Also z.B. hier heißt alles Ellipse Eins und es hat alles die gleiche Form. Aber sobald ich Onclick Open Overlay sage, kannst du sehen, dass ich im Animationsmenü zwischen Incident und Dissolve wählen kann, aber ich kann Smart Animate nicht auswählen. Beim Öffnen und Überlagern kann diese Blase also nicht in die Blase auf dem Overlay hineinwachsen . Sobald sich die Overlays jedoch öffnen und ich mich mit dem Austauschen des Overlays beschäftige, können Sie sehen, dass jetzt ein Smart Animate aktiv ist. Also lass es mich dir zeigen. Also hier habe ich meinen Startbildschirm. Ich klicke auf meinen Kreis und das Overlay wird geöffnet, aber es wird nicht intelligent animiert. Jetzt bin ich jedoch auf dem Overlay, ich tausche nur die Overlays aus. Und Sie können sehen, dass Smart Animate jetzt funktioniert. Ein weiterer Bereich, der Ihnen Probleme bereiten könnte, sind Hintergrundfüllungen mit bewegten Animationen. Also hier habe ich ein einfaches Beispiel. Wenn ich auf dieses rote Rechteck klicke, wird diese Detailseite verschoben. Und wenn ich auf x klicke, wird es wieder rausgezogen. Und beachten Sie, dass ich Smart Animate noch nicht aktiviert habe. Schauen wir uns also an, wie das aussehen würde. Also, wenn ich hier klicke, verschiebt es das hinein, klicke auf x, verschiebt es raus. Scheint ziemlich nett zu sein. Aber was ich jetzt tun möchte, ist, wenn ich hier klicke, möchte ich, dass das X an Ort und Stelle bleibt und mit dem Menü intelligent animiert wird. Das ist also sehr einfach. Ich wähle einfach meine Connectors aus und stelle Smart Animate ein. Also nimm einfach diese kleine Schachtel her. Aber wenn ich es jetzt nochmal spiele, sieht man, dass es für das Menü funktioniert. Aber in meiner Tradition passiert diese seltsame Transparenz . Um dies zu beheben, gehen wir hierher zurück und wählen Sie die Zielseite aus. Und dann drücke ich einfach R und zeichne ein Rechteck als eine Art zweiten Hintergrund. Und du kannst das auch benennen. Am besten ist es, diese Hintergrundanimation zu benennen damit die Leute nicht verwirrt werden. Und jetzt schauen wir uns das noch einmal an. Ich drücke Play. Und jetzt können Sie sehen, dass es jetzt perfekt funktioniert. Also ist das nur ein kleiner Trick, den Sie anwenden müssen, damit Hintergrundübergänge mit Smart Animate funktionieren. Also lassen Sie uns zusammenfassen. Sie können intelligente Animationen, Farben, Größen, Positionen und Drehungen vornehmen. Und Sie können Smart Animate mit bewegten Animationen kombinieren. Sie können nicht intelligent in eine andere Form animieren. Also z. B. ein Rechteck zu einem Stern. Beim Öffnen eines neuen Overlays können Sie keine intelligenten Animationen ausführen. Stellen Sie sicher, dass Sie dieselbe Benennung und Hierarchie haben Smart Animate zum Einsatz kommt, und beachten Sie, dass sich der Hintergrund bei bewegten Übergängen füllt und Smart Animate nicht automatisch animiert. 27. SMART ANIMATE: 04 Lass uns eine intelligente animierte App erstellen: Lassen Sie uns das Gelernte in die Praxis umsetzen und diese Fotofilter-App mit Smart Animate erstellen. Aber fangen wir bei Null an. Also hier haben wir die Bildschirme , mit denen wir beginnen werden. Wir haben einen Startbildschirm mit einem Filter und Bildern sowie ein Menü und einen detaillierten Bildschirm. Was ich also zuerst einrichten möchte, ist ein Splashscreen. Also werde ich den Startbildschirm hierher kopieren. Und ich werde eigentlich alles außer meinem Menü loswerden . Jetzt wähle ich mein Menü aus, ich habe die K-Taste zum Skalieren gedrückt. Du kannst Skaten auch über das Menü hier oben öffnen. Und jetzt werde ich diese Menütaste vergrößern und in der Mitte platzieren. Ich wähle die Menüstriche und setze sie auf Null. Das wird also so aussehen, als würden sie mit der Animation quasi einblenden. Die andere Sache, die ich jetzt tun möchte, ist, dass ich das noch einmal kopiere. Und hier auf meinem allerersten Bildschirm werde ich das verdrehen. Und jetzt werde ich das in eine Animation umwandeln. Also werde ich zum Prototyping übergehen und diesen ersten Bildschirm hier, verbunden, und dann sagen wir mit Verzögerung, weil das ein Splashscreen ist. Also möchte ich, dass wir automatisch starten. Und ich werde es auf Smart Animate einstellen. Und ich belasse es bei diesem Übergang von 1,5 s, den ich aus einer anderen Animation zuvor habe. Und ich werde hier dasselbe tun. Schauen wir uns jetzt an, das aussehen wird. Drücken wir die Abspieltaste. Und Sie können sehen, wie sich der Splashscreen dreht. Und eigentlich müssen wir hierher zurück. Mal sehen, warum das hier nicht überspringt. Das ist also immer noch auf Tippen eingestellt. Stellen wir das auf „Nach der Verzögerung“ ein. Und dann schauen wir uns das nochmal an. Und jetzt sollte es funktionieren. Also drehe ich mich um und dann geht es nach oben und mein Menü erscheint. Stimmt es? Okay, als Nächstes, also das nächste, was ich einrichten möchte , sind meine Filter. Also nehme ich zuerst den Bildschirm und stelle mein Scrollverhalten ein. Also schauen wir uns das mal an. Wenn ich ein vertikales Scrollen einstelle. Schauen wir uns also an, wie das aussehen wird. Das würde also den gesamten Bildschirm außer meinem Menü bewegen , das ich repariert habe. Aber ich will das wirklich, ich möchte nur, dass dieser Teil scrollt. Es gibt also verschiedene Möglichkeiten, wie Sie das angehen können. Wenn du hier unten mehr Inhalt hättest, dann wäre es sinnvoll, diesen oberen Teil tatsächlich als Header zu fixieren. Da ich jedoch nur die Bilder habe, könnte ich genauso gut das Scrollen von meinem Hauptrahmen entfernen und dann das Scrollen für diesen Teil hier einrichten . Denken Sie jetzt daran, dass das Scrollen funktioniert und Sie können sehen, dass ich hier bereits einen Fehler habe. Der Rahmen muss kleiner als der Inhalt sein. Also kann ich die Größe ändern und nur ein bisschen vorsichtig sein , weil ich dieses Setup tatsächlich als automatisches Layout habe. Manchmal verhält es sich also seltsam und Sie müssen es möglicherweise manuell von Umarmung auf feste Höhe ändern. In diesem Fall funktioniert es ganz gut. Wenn ich jetzt zu meiner Vorschau zurückkehre, können Sie sehen, dass dies jetzt das Verhalten hat , nach dem ich suche. Okay, großartig. Lassen Sie uns die restlichen Filter einrichten. Also kopiere ich über zwei weitere Seiten. Machen Sie hier etwas Platz. Und dann schauen wir uns das mal an. Okay, was ich jetzt tun möchte ist, dass ich bei diesem die neueste Version aktivieren möchte. Also setze ich das auf 100%. Und ich werde diese kleine Bar hierher verlegen. Und ich setze das auf 50. Und ich werde das Gleiche für den letzten hier tun, indem auf aktiv eins auf 100% setze als auf inaktiv auf 50. Sie können einfach die Zahl drücken und dann wird sie, wie Sie hier sehen können, in einen Prozentsatz umgewandelt. Und ich werde diese Leiste auch verschieben , weil ich dieselbe Leiste verwende. Es bewegt sich einfach, sobald ich Smart Animate für diese Navigation verwende. Ich möchte auch die Art und Weise ändern, wie die Bilder gemischt werden, also muss ich die Bilder hier auswählen und ausschneiden, damit ich sie alle sehen kann. Und jetzt ist das Tolle daran, dass ich als Setup mit automatischem Layout einfach ein Bild auswählen und es mit der Aufwärts- und Abwärtstaste verschieben kann. Machen wir also dasselbe für den letzten Bildschirm und mischen sie einfach nach dem Zufallsprinzip. Lass uns das hier nach oben verschieben. Okay, großartig. Seien Sie sich jetzt bewusst, dass wir gerade all diesen Inhalt entfernt haben. Wenn ich jetzt also in den Vorschaumodus springe und scrolle, dann bekommst du dieses Scrollverhalten. Stellen Sie also sicher, dass Sie sie alle erneut auswählen und den Inhalt erneut ausschneiden. Machen wir jetzt dasselbe noch einmal. Und Sie können jetzt sehen, dass das Verhalten wieder funktioniert. Okay, was wir jetzt tun wollen, ist , diese Verbindungen herzustellen. Wenn ich also auf Latest klicke, wollte ich hier rüberspringen und Smart Animate verwenden. Und ich werde das auch bei einer ziemlich langsamen Animation belassen , damit wir es richtig sehen können. Jetzt mache ich dasselbe für Popular, und ich muss es auch mit diesen Grünpflanzen machen. Also spring zurück, um alles von hier aus zu zeigen , gehe zu beliebt In meinem letzten Bildschirm. Das Gleiche. Eigentlich geht dieser zum ersten. Und dann wird dieser hier rübergehen. Okay, schauen wir uns das mal an. Falls das funktioniert. Dies ist vollständig in Smart Animate eingerichtet und Sie können sehen, dass nicht nur die Navigation hier , unsere Filter gut funktionieren, sondern auch unsere Bilder neu gemischt werden. Wir könnten die Geschwindigkeit auch ein bisschen erhöhen, aber ich werde es vorerst belassen , damit wir es besser sehen können. Das letzte bisschen, das wir jetzt vermissen, ist unsere Detailseite hier drüben. Was ich hier will ist, dass ich ein paar Bilder in einer Vorschau haben möchte, dann habe ich meinen Text und ich möchte einen kleinen Schließknopf. Es gibt verschiedene Möglichkeiten , dies einzurichten, also zögern Sie nicht, selbst damit zu spielen. Okay, fangen wir mit unseren Bildern an. Also mache ich das hier und kopiere die Bilder. Ich lösche diesen Platzhalter und füge sie hier ein. Aber ich möchte, dass sie horizontal gestapelt werden. S ist also ein Setup mit automatischem Layout. Ich ändere einfach die Richtung. Lassen Sie uns den Inhalt ausschneiden , damit wir ihn besser sehen können. Und ich kann das auf einen Falken setzen. Und jetzt haben wir alle Bilder hier in einer Reihe. Ich möchte nicht alle anzeigen, nur ein paar. Also werde ich diese hier löschen. Und um das Ganze nun als horizontalen Scroll einzurichten, muss ich den Rahmen klein machen. Das war es, wovon ich gesprochen habe. Manchmal wird das ein bisschen seltsam sein. Das liegt daran, dass wir mit dem automatischen Layout arbeiten. Was wir also tun können, ist, die Horizontale auf fest zu setzen, und jetzt können wir sie anpassen. In diesem Fall muss ich auch die Ausrichtung ändern, und jetzt kann ich das ändern. Eigentlich möchte ich den Abstand etwas anpassen , damit wir sehen, dass mehr Inhalte zum Scrollen kommen. Lassen Sie uns das eigentlich wieder hier hinstellen. Und ich füge links eine kleine Polsterung hinzu. Jetzt wähle ich diesen Rahmen aus und springe zum Prototyp. Und beachten Sie, dass mir dadurch eine Fehlermeldung angezeigt wird, da es offensichtlich keinen vertikalen Inhalt zum Scrollen gibt. Sobald ich das also auf horizontales Scrollen umstelle, wird es jetzt funktionieren. Schauen wir uns das an, was wir tun wollten. Also hier ist mein Inhalt und ich kann ihn horizontal scrollen. Okay, großartig. Jetzt möchte ich hier meine Schaltfläche hinzufügen und ich möchte, dass dies kein Menü mehr ist, sondern ein Schließknopf. Also habe ich es kopiert. Was ich machen werde ist, ich wähle aus, ich muss zwei überspringen. Ich bin immer noch im Prototypenmodus. Ich muss zu Design gehen. Und jetzt passe ich diese Zeilen von einem Menü zu einem X an, also zu einem Abschlusszeichen. Was wir jetzt tun wollen, wir wollen dieses Bild verbinden, um die Detailseite zu öffnen. Lassen Sie uns also zum Prototyp springen und dann diesen auswählen und hierher gehen. Aber was ich eigentlich nicht will, ich will nicht, dass das alles intelligent animiert wird. Ich möchte, dass das hineingedrückt oder bewegt wird. Ich werde wählen. Und ich werde Smart Animate hier trotzdem ausgewählt lassen , weil ich möchte, dass das Menü intelligent animiert wird. Lassen Sie uns nun sehen, ob das funktioniert. Und kleiner Hinweis, das wird es nicht, aber ich werde dir zeigen warum. Also lasst uns beten. Drücken wir die Wiedergabetaste. Und dann drücke ich dieses Detail und es sieht eigentlich gut aus, aber es ist klug, hier alles zu animieren. Ich will das nicht. Warum macht es das? Sie können hier also sehen, dass diese Gruppe Bilder heißt und diese Gruppe hier Bilder heißt und tatsächlich eine sehr ähnliche Reihenfolge hat. Also muss ich den Namen hier ändern, also unsere Farbe bei einem Anruf, das Detail dieses Bildes. Also schauen wir uns das jetzt noch einmal an. Also lasst uns jetzt noch einmal auf dieses Bild drücken. Und du kannst sehen, dass es jetzt einzieht, aber es macht diese seltsame Sache wie diese etwas seltsame Transparenz und eigentlich schließt es nicht. Also lasst uns das auch beheben. Okay, also lassen Sie uns hier zunächst eine Interaktion hinzufügen und, sagen wir, auf der Registerkarte, zu der Stelle zurückkehren, von der Sie gekommen weil wir hier noch ein paar Bilder verbinden werden. Und dann ist die andere Sache , die wir tun wollen, hier, ich wollte eigentlich, dass das nach oben geht, aber es hatte diese seltsame Transparenz. Also, was Sie hier tun müssen, ist einen separaten Hintergrund zu zeichnen. Also zeichne ich hier einen weißen Hintergrund und füge einfach Weiß hinzu und verschiebe das. Das, das war quasi ein zusätzlicher Hintergrund zu meiner Bestellung hier, meiner Stapelreihenfolge ganz nach hinten. Das ist also wirklich nur dazu da, diese kleine seltsame Transparenz mit meiner Animation zu klären. Okay, schauen wir uns das mal an. Wenn das funktioniert, drücken wir Play. Und das sieht jetzt einfach toll aus. Und wenn ich das X drücke, schau dir an, wie gut diese Animation funktioniert. Also hier haben wir unsere bewegte Animation. Und da wir immer noch ein Smart-Animate-Set innerhalb der bewegten Animation haben , unser Menü, das dieselbe Benennung in derselben Hierarchie hat funktioniert unser Menü, das dieselbe Benennung in derselben Hierarchie hat, mit Smart Animate. Also schauen wir uns das an und richten unser endgültiges Design ein. Also das einzige, was ich jetzt tun möchte, ist, sie hier wieder ausschneiden zu lassen. Und lassen Sie uns tatsächlich nach diesem Bild suchen. Ich werde es ein bisschen erhöhen. Und jetzt möchte ich das auch mit unserer Detailseite verbinden. Also hier hat That's immer noch die Animation, die wir zuvor eingestellt haben. Von hier aus. Ich schließe mich dem auch an. Und dann schneide ich sie noch einmal aus, ein kleiner zusätzlicher Tipp. Manchmal möchten wir vielleicht Elemente stapeln und sie dann öffnen. Sie können das also auch tun, wenn dies mit automatischem Layout eingerichtet ist. Jetzt kann ich hier runtergehen und den Wert auf einen negativen Wert setzen. Dann meine Bilder als Stapel. Und Sie werden jetzt sehen, wie sie auf einem Bildschirm gestapelt sind. Und sobald wir einen anderen Bildschirm ausgewählt haben, werden sie geöffnet. Okay, also ich denke, unsere App ist fertig. Lassen Sie uns das gesamte Setup durchgehen. Wir haben also unseren Splashscreen. Es bewegt sich hier hoch und wird zu einer Animation. Hier kannst du unser Stacking sehen. Und wenn ich zu einem anderen Filter gehe, können Sie sehen, dass er gestapelt wird. Und dann können wir auf unser Bild klicken und wir erhalten unsere Detailseite, die wir öffnen und schließen können. So können wir auch von jedem anderen Punkt unserer App aus auf diese Detailseite zugreifen . Und weil es einen Rückschlag gibt, kehren wir auch zu der Seite zurück, von der wir gekommen sind. Wie wir sehen können, haben wir nur 10 Minuten gebraucht, um diese gesamte Smart Animate-App einzurichten. 28. SMART ANIMATE: 05 Animieren mit Zweck und Code im Verstand: Jetzt ist es einfach, sich von Smart Animate und Figma mitreißen zu lassen, weil es einfach so einfach und beeindruckend ist, aber animieren Sie immer mit zielgerichtetem Verstand. Stellen wir also sicher, dass wir uns an ein paar wichtige Dinge erinnern. Erstens, wir haben es für einen bestimmten Zweck entworfen. Jede Entscheidung, die wir in unserem Design treffen, sollte also einen Zweck haben und unsere Besucher leiten. Animationen, insbesondere Mikrointeraktionen, wie Hover-Zustände für unsere Schaltfläche usw., spielen eine wirklich wichtige Rolle für unsere Benutzererfahrung. Lassen Sie mich Ihnen ein Beispiel geben. Das Prinzip des gemeinsamen Schicksals. Das bedeutet, dass zwei oder mehr Elemente die sich gleich verhalten, als Teil einer Einheit wahrgenommen werden. Denk an ein Akkordeon. Wenn ich klicke, möchte ich, dass es geöffnet wird , und wenn ich erneut klicke, wird es geschlossen. Ich habe gelernt, dass es so funktioniert und habe auf eines geklickt. Ich erwarte also, dass alles andere hier genauso funktioniert. Es wäre also wirklich verwirrend, wenn ich auf eines klicken würde und plötzlich ein Overlay geöffnet würde. Das gilt für alle Elemente, die verwendet werden. Alle Schaltflächen auf Ihrer Seite sollten also genauso aussehen und sich genauso verhalten. Zu. Übertreibe es nicht. Ich weiß, Smart Animate ist blinkende Magie, aber übertreibe es nicht. Füge nicht einfach hier und da ein bisschen hinzu, weil alle sagen, wow, wenn du es zu oft verwendest, werden wir tatsächlich so ermutigend sein und zur kognitiven Überlastung deiner Besucher beitragen. Stellen Sie sicher, dass Ihr Design jederzeit in einem einfachen anklickbaren Prototyp funktioniert . Und das bedeutet nicht, dass Animation ein nachträglicher Einfall sein sollte. Stellen Sie sich ein scrollbares Menü vor. Ich kann klicken und dann zum Abschnitt springen. Das funktioniert also. Jetzt kann ich eine sanfte Scroll-Animation hinzufügen eine sanfte Scroll-Animation meine Besucher zu diesem Abschnitt führt. Das hilft mir zu verstehen, wo ich bin und wie ich zurückkomme. Es verbessert also wirklich mein Design. Benötige ich Elemente, die während der Animation rein- und rausfliegen? Sie sind es wahrscheinlich nicht. Klug. Animate ist kein Code. Und das ist aus mehreren Gründen wirklich, wirklich wichtig, z. B. was mit Figma Smart Animate wirklich einfach und nur ein Klick sein könnte , könnte tatsächlich sehr schwierig sein , wenn Sie so etwas wie CSS-Animation verwenden. Und auch andersherum könnten es großartige Möglichkeiten geben, könnten es großartige Möglichkeiten geben die Sie in Figma einfach nicht zeigen können. Das heißt also nicht, dass Sie 20 Besprechungen über jede Erntehilfe oder jedes anklickbare Feld benötigen jede Erntehilfe oder jedes , das Sie mit Smart Animate entwerfen. Machen Sie sich eine gute Idee, dass Sie, bevor Sie mit Ihrem Entwicklungsteam beginnen, fragen, ob es eine Person gibt, die für die Animation verantwortlich ist, und Sie können von Anfang an gemeinsam planen. Fragen Sie auch, ob sie eine bestimmte Animationsbibliothek verwenden , und Sie können sich mit der Dokumentation vertraut machen und sich im Bibliotheks-Showcase eine realistische Vorstellung machen. 29. KOMPONENTEN: 01 Interaktive Komponenten: Bisher haben wir Animationen zwischen verschiedenen Frames verwendet. Und jetzt zeige ich Ihnen eine meiner Lieblingsfunktionen, interaktive Komponenten. Sie sind im Grunde wiederverwendbare Animationen die in Ihrer Komponente gespeichert sind. Damit das funktioniert, benötigen wir also Komponenten oder besser gesagt Komponentensätze mit darin enthaltenen Varianten. Wenn Sie damit nicht vertraut sind, besteht eine Variante im Grunde aus zwei Komponenten, eigentlich aus zwei oder mehr Komponenten. Und Sie können sehen, dass ich die Namenskonvention verwende, Schaltfläche mit Schrägstrich, Standardtaste mit Schrägstrich, Hover. Sie gehören also derselben Familie an, nur in einem anderen Zustand der gleichen Sache. Und dann hier auf der rechten Seite kann ich sagen, kombinieren als Varianz. Und das Tolle daran ist, wenn ein Arm hier eine Instanz herauszieht, dann kannst du sehen, dass innerhalb dieses Buttons beide Instanzen einfach als verschiedene Zustände gespeichert werden. In meinem Design. Ich werde viele Beispiele dieser Elemente verwenden. Ich kann also nicht nur die verschiedenen Zustände speichern , die sie in dieser Instanz haben, sondern auch das Verhalten. Also muss ich auf meinen Prototyp-Einstellungen sein und dann zB ein Button-Verhalten speichern. Also einen Hover-Status, den ich hinzufügen möchte und einfach meine beiden Buttons verbinden, wie ich es zuvor mit jedem anderen Frame gemacht habe. Und jetzt kannst du sehen , dass in meinem Menü onClick steht oder ich ändere das auf, während du den Mauszeiger bewegst. Und es wurde auf Set geändert. Diese Änderung bis hierher wird nur innerhalb von Komponentensätzen aktiv sein. Jetzt kann ich Instant Dissolve oder Smart Animate verwenden. Ich werde Smart Animate verwenden, da es einfach eine Farbe ist. Schauen wir uns nun an , was das bewirkt, damit wir uns das in unserem Vorschaumodus ansehen können. Ich muss einen Rahmen zeichnen. Und ich kann diesem Frame jetzt eine Instanz meiner Schaltfläche hinzufügen. Schauen wir uns das jetzt an. ich den Mauszeiger über meinen Button bewege, kannst du sehen, dass ich diese Verhaltenssicherheit habe und das wird überall dort, wo ich diesen Button benutze, dasselbe sein. Okay, jetzt will ich dasselbe für meinen Schalter hier, aber ich möchte, dass dieser hier rübergezogen wird und dann in diesen Schalter einbiegt. In diesem Fall möchte ich nicht, dass der gesamte Schalter aktiviert wird, aber ich wollte diese kleine Blase hier nehmen. Also möchte ich nehmen, diese Blase auswählen, eine Animation zeichnen und Sie werden sehen, dass Onclick sagt. In diesem Fall möchte ich auf Drag wechseln, und ich werde hier zu Smart Animated wechseln. In diesem Fall muss ich mich jetzt revanchieren. Also keine Prahlerei, es wird wieder in meinen ursprünglichen Zustand zurückkehren. Was ich jetzt tun werde, ist , eine Instanz auf meinem Frame zu ziehen . Und schauen wir uns an, wie das funktioniert. Also hier ist mein Schalter. Ich ziehe es und du kannst sehen, dass es sich ändert. Die Farbe war intelligent animiert. Jetzt kann ich zwischen mehr als nur zwei animieren. Also hier habe ich dieses Kontrollkästchen und ich werde einen Connector herausziehen. Und ich sage, onclick change to smart animiert das. Und dann sage ich von hier aus, geh hier rüber. Und wenn ich noch einmal nachschaue, geht es zurück zum Anfang. Ziehen wir eine Instanz dieses Checkboxen heraus. Ich werde tatsächlich ein paar in die Länge ziehen. Und jetzt schauen wir uns das an. Wenn ich das spiele, mache ich es größer, ich kann es überprüfen. Wenn ich noch einmal drücke. Es ist so. Und so kann ich das in meinem gesamten Design verwenden. 30. COMPONENTS 02 Verschachtelung interaktiver Komponenten: Wie bei jeder anderen Komponente können Sie animierte Komponenten verschachteln und kombinieren. Also hier habe ich meinen Knopf und meinen Schalter. Wenn ich zum Prototyp gehe, können wir sehen, dass sie ihr Animations-Setup bereits haben. Und dann habe ich noch eine Komponente, eine Listenkomponente. Und was ich jetzt tun kann, lassen Sie uns einfach eine beliebige Instanz von diesem Schalter aus ziehen . Und ich erstelle jetzt hier eine Instanz meines Listenelements. Sie können also sehen, dass dieser Schalter verschachtelt ist. Wenn ich also auf Originalkomponente klicke, springt es zurück und zeigt mir in diesem Fall die verschachtelte animierte Komponente oder Varianten. Und ich kann jetzt einfach ein paar herausziehen. Und lassen Sie uns das zu einem Rahmen kombinieren. Sie können tatsächlich mit der rechten Maustaste klicken und dann die Auswahl einrahmen. Lassen Sie uns also etwas Inhalt hinzufügen und fügen wir hier unten auch eine Instanz unserer Schaltfläche hinzu, Sita, Hintergrundfüllung. Fügen wir das hier hinzu. Und dann kann eine das natürlich überschreiben. Lassen Sie uns einige Bilder mit dem Unsplash-Plugin hinzufügen. Ich werde hier nur ein paar Portraits machen. Und jetzt schauen wir uns das an und spielen es. Jetzt siehst du, dass ich diese Umschaltflächen individuell anpassen kann . Und auch mein Button funktioniert. 31. COMPONENTS: 03 Easy Hover und Zoom-Animationen: Interaktive Komponenten sind also auch ein großartiger Helfer, wenn es darum geht , Hover-Zustände zu erstellen. Wo wir zuvor viele Frames erstellen mussten, können wir jetzt einfach die Animation zu unserer Komponente hinzufügen , wenn jede Überschreibung dieses Verhalten übernehmen würde. Also hier habe ich meine Karte, Standard- und den Hover-Status. Also füge ich jetzt einfach in meinem Prototyping-Menü Wide Hover hinzu, wechsle zu und Smart Animate. Und ich werde jetzt Instanzen dieser Karte herausziehen. Ich kann jetzt die Bilder und den Text überschreiben. Für die Bilder. Ich verwende das Unsplash-Plugin, aber du kannst jedes verwenden. Schauen wir uns das an. Sie können also sehen, dass, wenn ich den Mauszeiger bewege, sie alle auf Standard und Erntedatum vererbt haben. Aber ich kann hier noch etwas mehr Magie hinzufügen , denn denk daran, ich kann auch die Größe von Animationen smart animieren. Also alles, was ich mache , ist, dass ich das Bild in der Standardgröße belasse. Und dann hier drüben im Hover-Status werde ich das Bild einfach etwas vergrößern und deine Position ändern. Und jetzt schauen wir uns an, was passiert. Während ich schwebe. Ich mache diese wirklich nette kleine Vergrößerung der Bilder. mit interaktiven Komponenten arbeiten, wenn es um Erntehilfen geht, sparen Sie im Voraus viel Zeit, wenn Sie ein einfaches Schwebekarussell wie dieses erstellen. Sie brauchten diese Anzahl an Bildschirmen. Weil jedes Bundesland, also jedes Mal wenn es sich vergrößern würde, müssten wir sonst eine eigene Seite erstellen und dann hin und her verlinken. Jetzt brauchen wir nur noch das, denn was wir hier haben, ist eine interaktive Komponente, die eine Animation enthält, während Sie mit der Wechselröhre schweben. Und dann haben wir hier einfach Instanzen, die den Knoten vergrößern. Wenn Sie Bilder verwenden möchten, die mithilfe von Smart Animate mit interaktiven Komponenten vergrößert werden. Und dann müssen Sie nebeneinander das automatische Layout hinzufügen. Hier kannst du also sehen, dass ich das nicht automatisch gestaltet habe. Das heißt, wenn dieses Bild hier vergrößert wird, werden alle anderen Bilder aus dem Weg geräumt. Eine weitere großartige Sache ist, sagen wir, ich möchte all diesen Instanzen etwas hinzufügen . Dann kann ich das hier einfach zu meiner Variante hinzufügen und es wird dann auf allen vertreten sein. Also lass uns das noch einmal spielen. Und du siehst, dass ich das Plus habe, das einzige, was ich nicht mag, es irgendwie auf seltsame Weise verschwindet , anstatt sich einfach aufzulösen. Denken Sie also daran, dass wir intelligent sind. Figma sucht den gleichen Elementen in Hierarchie und von Anfang bis Ende nach den gleichen Elementen in Hierarchie und Benennung. Das ist also genau dasselbe zwischen Frames oder innerhalb von Komponentensätzen. Lassen Sie uns nur diese Ebenen kopieren , die als Kreuz bezeichnet werden. Und fügen wir es auch zu unserem Ziel hinzu, obwohl wir es hier nicht zeigen wollen. Lassen Sie uns die Größe an die Passform anpassen. Und ich setze das auf Null , nur um es zu überqueren. Okay, lass uns das nochmal spielen. Und jetzt können Sie sehen, dass das Kreuz schön verschwindet weil der Smart-Animate innerhalb des Komponentensets arbeitet. 32. KOMPONENTEN: 04 Videointeraktionen: Wir können auch interaktive Komponenten verwenden , um Videoplayer zu erstellen. In meinem Beispiel hier siehst du also , dass ich einfach ein Video eingebettet habe. In meinem Präsentationsmodus können Sie also sehen, dass es abgespielt wird, aber es wird immer abgespielt. Ich möchte das so ändern, dass es ein Standbild hat und erst wenn ich den Mauszeiger darüber bewege oder nach einer Verzögerung oder einem beliebigen Trigger, den ich möchte, wird es abgespielt. Also, was ich hier tun werde, ist ein zweites zu erstellen. Ich trenne die Instanz, nenne sie Hover. Und ich werde es wieder in eine Komponente verwandeln. Und ich kombiniere diese beiden jetzt zu einem Komponentensatz mit Varianten. Und ich werde nur ein bisschen Transparenz hinzufügen. Und was ich jetzt will, ist das, was immer noch das Video abspielt , weil ich ein Video in der Standardeinstellung und ein Video habe und den Mauszeiger darüber bewegen. Was ich jetzt tun werde, ist das Video auszuwählen und den Shift-Befehl zu wählen und mir diese Kopien als PNG anzusehen. Jetzt ersetze ich das Video einfach durch dieses PNG. Jetzt muss ich nur noch ein paar Prototypen hinzufügen. Also verbinde ich das, die Standardeinstellung mit dem Stahl, mit meinem Video und ich sage, während ich schwebe, wechsle zu Smart Animate. Ich wähle jetzt meinen Rahmen aus. Und schauen wir uns das an. Hier. Ich habe meinen Stahl und wenn ich den Mauszeiger darüber bewege, können Sie sehen, dass das Video abgespielt wird. Beachten Sie, dass das immer dahin zurückgeht, wo ich es verlassen habe. Also, wenn ich ausgehe, geht es wieder da hin, wo ich es aufgehört habe. Wenn Sie das nicht wollen und immer von vorne beginnen möchten. Was Sie dann tun können, ist, während Sie Ihre Interaktion hier einstellen, Videoposition zurücksetzen und dann geht es immer wieder von vorne los. Das ist also eine wirklich großartige Möglichkeit sich einige Bildschirme zu sparen und alles in Ihrem eigentlichen Video zu haben. Weil du das so einstellen kannst, dass es schwebt. Sie können dies so einstellen , dass es nach einer Verzögerung oder wenn eine bestimmte Taste auf Ihrer Tastatur gedrückt wird. Das ist also wirklich, wirklich großartig für die Arbeit mit Videos. Denken Sie daran, dass Videos derzeit nur in kostenpflichtigen Tarifen verfügbar sind. 33. KOMPONENTEN: 05 Interaktive Komponenten und automatisches Layout: Interaktive Komponenten werden besonders leistungsfähig, wenn wir sie mit automatischem Layout kombinieren. Also hier habe ich eine Komponente mit zwei Rahmen, einem roten und einem blauen mit unterschiedlicher Größe. Ich werde hier einfach ein paar Instanzen anklicken und sie auf meinem Rahmen hier platzieren. Und jetzt werde ich ein paar Prototypen hinzufügen. Wenn ich also auf das rote Symbol klicke, sage ich zu wechseln und animiere per Smart in die blaue Form. Und ich werde das von der blauen Form zur roten Form zurückbringen . Also wechselt onClick zu Rot und Smart Animate. Schauen wir uns jetzt an, wie das aussieht. Und bisher wurde nirgends ein automatisches Layout angewendet. Du kannst also sehen, dass es sich ändert, wenn ich klicke. Und du kannst sehen, dass das hier größer wird. Aber sie laufen sich irgendwie über den Weg. Und wenn ich erneut klicke, kehren sie zur ursprünglichen Form zurück. Und der Smart Animate funktioniert in dieser Klick-Animation. Schauen wir uns jedoch an, was passiert, wenn ich alle auswähle. Und jetzt verwandle ich InDesign in einen automatischen Layoutrahmen. Lassen Sie uns den Rahmen etwas nach oben verschieben und ihm etwas mehr Platz geben , und Sie werden in einer Minute sehen, warum. Und jetzt drücken wir Play. Also jetzt kannst du meinen Rahmen hier sehen. Und wenn ich klicke, kannst du sehen, dass es sich auf und ab bewegt. Und der Grund dafür ist, dass das automatische Layout immer den gesamten verfügbaren Speicherplatz beansprucht. So kann ich Smart Animate erstellen und andere Inhalte an die neue Größe anpassen. Ich kann das wirklich auf die Spitze treiben. Nehmen wir also an, ich bewerte diese blaue Form hier auf Null. Und beachte, dass Figma mir nie Null gibt, es gibt mir immer nur diese hier. Also ein kleiner Trick, um das zu umgehen, ist 0,00 für so etwas zu verwenden, und dann geht es auf Null. Es ist also immer noch da, mein Element, aber es ist versteckt. Also lass uns jetzt wieder spielen. Und jetzt siehst du , wenn ich hier auf dieses rote Bild klicke , dann verschwinden sie. Das einzige ist, dass Sie sich wahrscheinlich fragen, ob Sie eine kleine Plus-Schaltfläche hinzufügen oder erneut hinzufügen können , um sie dann hinzuzufügen. Nun, das wird nicht wirklich funktionieren, denn theoretisch sind sie alle hier in Figma. Weiß nicht mehr, welcher. Sie klicken einfach auf welche, wenn Sie es nicht getan haben. Sie könnten es jedoch simulieren. Sie könnten also sagen, sagen wir, fügen wir hier einfach eine kleine runde Schaltfläche hinzu und sagen, dies ist die Plus-Schaltfläche. Wir könnten also sagen, sobald sie gelöscht sind und ich auf diesen klicke, kopiere ich einfach die gleiche Abneigung der bereits existierenden hier. Und dann verbinde ich diese On-Click-Navigation mit und Smart Animate. Also schauen wir uns das noch einmal an. Also lösche ich jetzt. Und dann kann ich in den ursprünglichen Zustand zurückkehren, aber ich kann nicht einzelne auswählen, um wieder zu erscheinen. Sie können damit also wirklich beeindruckende und realistische Aktionen erstellen wirklich beeindruckende und realistische Aktionen . Also hier, z.B. beim Ziehen, wird mir ein kleiner Löschbutton angezeigt und ich kann dann eines dieser Elemente hier löschen. Wie habe ich das gemacht? Nun, es ist genau das gleiche Prinzip. Also hier haben wir unsere Elemente, die hier verwendet werden, und ich fülle sie einfach mit meinen Inhalten. Und dann können Sie in meinen hier festgelegten Komponenten sehen, dass ich hier mein Standardelement habe und es enthält bereits die Schaltfläche Löschen. Also wenn ich diesen Inhalt hier abschalte, siehst du, dass es hier unten schon ist und das ist wirklich wichtig. Denn denken Sie daran, dass Smart Animate einen Anfang und ein Ende braucht , um zu funktionieren. Also bei meinem Löschen hier habe ich nur dieses Label hier nach links verschoben. Das wird also meine Draging-Animation sein. Und ich habe sie einfach mit einer Drag-Animation verbunden. Also bei Drag change zu und smart animate. Sobald Sie darauf geklickt haben, beachten Sie , dass dies nur mit diesem Löschsymbol verknüpft ist, nicht mit dem Rest meines Elements. Also, wenn das verlinkt ist, dann wird es hier hingehen. Und dieser ist gesetzt, in diesem Fall 21. Ich könnte das auch auf Null setzen. Und deshalb sieht es so aus , als würde es gelöscht , weil hier meine Instanzen einfach mit automatischem Layout eingerichtet sind. Wenn also einer von ihnen auf Null gesetzt ist, werden alle nach oben verschoben. Ich ermutige Sie wirklich, mit interaktiven Komponenten und automatischem Layout zu spielen mit interaktiven Komponenten und , da Sie mit dieser Technik wirklich sehr beeindruckende Prototypen erstellen können . 34. COMPONENTS: 06 funnel components: Ich möchte Ihnen einen kleinen Trick zeigen, ich Funnel Components nenne. Was sie im Grunde tun, ist, dass sie Komponenten beim Prototyping über verschiedene Seiten und Dateien hinweg verbinden Komponenten beim Prototyping über verschiedene Seiten und Dateien hinweg . Hier ist mein Design , das aus einer Homepage, einer About-Seite, einem Workshop und einem Newsletter-Bereich besteht. Und wie Sie hier sehen können, kann ich von meinem Header aus zu allen navigieren. Wenn wir nun auf die Kopfzeile klicken, können wir anhand der violetten Farbe und der leeren Rautenform erkennen , dass es sich um eine Instanz handelt. Wenn wir uns ansehen, wo sich unsere Hauptkomponente befindet, springen wir zu einer separaten Komponentenseite. Oder das könnte sogar in einer ganz anderen Datei sein. Denn normalerweise ist es eine gute Praxis, Ihre Komponenten nicht zusammen mit Ihrem Design zu speichern. Also für unser Prototyping bedeutet das jetzt, dass ich jede Seite durchgehen muss und dann die entsprechenden Verbindungen herstellen muss. Also müsste ich zuerst meine Seite hier durchgehen , meine Blog-Seite. Dann muss ich auf meine Seite Über uns gehen und einen Link zurück setzen. Ich müsste das alles für jede der Seiten machen. Sobald ich das gemacht habe, was ziemlich viel Arbeit ist wenn ich Änderungen vornehmen möchte, sagen wir, wie der Newsletter, den ich bemerkt habe, wird eine neue Seite geöffnet, aber das ist eigentlich ein Overlay. Dann müsste ich jede einzelne Seite durchgehen und das ändern. Lassen Sie uns all diese Verbindungen löschen und eine andere Lösung finden. Übrigens, kleiner Trick, klicken Sie im Prototyping-Modus mit der rechten Maustaste auf Ihre Leinwand und Sie können alle Interaktionen entfernen. Das entfernt auch diesen Flow hier und schauen wir uns das an. Das erste, was Sie vielleicht tun möchten, ist in den Hauptkomponentenbereich zu springen. Was ich also wirklich will, ist, dass ich diesen Master im Grunde hier haben möchte. Und dann, wenn ich auf Workshop klicke, sagen wir, ich füge eine Interaktion hinzu. Wenn ich klicke, möchte ich zum Workshop navigieren. Aber wie Sie sehen können, kann ich derzeit in Figma auf keine anderen Seiten zugreifen. Und wie gesagt, wir haben nur die Komponente und eine weitere Seite gespeichert, aber diese Komponente könnte sich in einer völlig anderen Datei befinden wir haben nur die Komponente und eine weitere Seite gespeichert, aber diese Komponente könnte sich in . Wir können also einen kleinen Trick anwenden, bei dem Sie die Komponente einfach kopieren können oder Sie können auch jede dieser Instanzen verwenden , die Sie hier bereits haben. Ich fange einfach bei Null an und erstelle diese Instanz. Jetzt könnte ich diese Instanz verbinden, aber die Sache ist, dass diese Instanz nichts an die anderen Instanzen weitergeben würde. Es muss eine Hauptkomponente sein. Also machen wir hier einen kleinen Trick und wählen ihn aus und packen diese Instanz dann in eine andere Komponente. Also erstellen wir eine neue Komponente und ich werde diesen Funnel nennen. Wenn wir also in unsere letzte Komponente schauen, können Sie sehen, dass sie lediglich eine Instanz unserer Hauptnavigation enthält . Also, wenn wir hierher zurückspringen würden, bin ich zurück, was auch immer das gespeichert ist. Okay, zurück in unserem Design müssen wir jetzt alle unsere vorhandenen Instanzen durch diese letzte Komponente ersetzen . Also werde ich einfach hier und dann Komponenten verwenden. Und dann schaue ich mir jetzt eine Komponentenseite an und gehe auf die Designseite und wähle Navigation Funneled. Du könntest sie auch einfach löschen, eine Kopie davon machen, dann ist es eine Instanz und sie ersetzen. Also, wenn ich jetzt eine dieser Instanzen auswähle und zurück zur Hauptkomponente springe, dann springt sie hier hoch zu meinem Trichter. Jetzt muss ich nur noch den Trichter in meinem Prototyping einmal mit meinen Bildschirmen verbinden . Also dieser geht, lassen Sie uns das auf die Lösung setzen, zum Blog. Dieser geht in den Workshop. Dann geht das hier drüben zu meinem Abonnieren-Button. Ich möchte ein Overlay öffnen. Klicken Sie also auf Overlay-Newsletter öffnen. Jetzt können wir sehen, ob ich hier klicke, dann hat er all diese Verbindungen geerbt. Alle diese Seiten haben also automatisch die Verbindung. Und wenn ich hier etwas ändere, werden sie das erben. Schauen wir uns das an und das funktioniert gut. Ich kann mich durch diese klicken und von überall aus auf meinen Newsletter zugreifen. Ich verwende also wirklich nur diese endgültigen Komponenten, um mein Prototyping einzurichten. Sie haben nichts mit den Hauptkomponenten zu tun. Alle Änderungen am Design der Hauptkomponente würden also einfach von meiner endgültigen Komponente übernommen. Solange die Benennung und Hierarchie nicht geändert werden, würden auch die Verbindungen bestehen bleiben. 35. VARIABLEN: 01 Prototyping mit Variablen: Prototyping mit Variablen. Fangen wir mit den Grundlagen an. Hier habe ich drei Knöpfe und ich habe ein Quadrat. Jetzt möchte ich diese Knöpfe mit verschiedenen Größen füllen. Und wenn ich sie anklicke, soll sich das Quadrat entsprechend der von mir gewählten Größe ändern. Ich sagte über Collection, das ich Prototyping-Beispiel eins nannte Und Sie können sehen, dass ich die Quadratgröße auf 400, Größe auf 100, Größe auf 300, Größe auf 3600 gesagt habe 100, Größe auf 300, Größe auf 3600 Was ich jetzt tun möchte, ist, dass ich zuerst diese Zahlen hier an die Variablen binden möchte. Also wähle ich einfach eine Nummer aus. Und dann kann ich das in unseren Texteigenschaftsfeldern finden, je nachdem, wie viele Sie haben, Sie müssen möglicherweise ein wenig scrollen. Das ist also meine Größe eins. Dann habe ich meine Größe zwei. Und dieser letzte Knopf wird meine Größe drei haben. Jetzt möchte ich mein Quadrat mit der Quadratgröße verbinden, also wähle ich es aus. Und dann können Sie im Eigenschaftenfenster sehen, dass es bereits auf 400, 400 eingestellt ist. Was ist meine Standardeinstellung? Aber ich möchte das an die Variablen binden, damit ich das aufnehmen und diese Größe später ändern kann. Ich wähle die Breite und binde auch die Höhe an diese Variable. Okay, großartig, jetzt haben wir also unser Basis-Setup und können zum Prototyping übergehen Also jetzt verbinde ich diesen Button. Und was ich tun möchte, ist, dass ich ihm sagen möchte, ob ich klicke, dann ändere ich diese Breite, also die Quadratgröße , auf den neuen Wert. Also wähle ich in meiner Dropdownliste „Variable setzen und dann die Quadratgröße aus. Geben Sie einfach den Namen dieser Variablen ein und Sie werden ihn hier sehen. Es wird Sie bereits dazu auffordern worauf Sie es einstellen möchten? Und jetzt kann ich in meinem Dropdown suchen und ich möchte es auf Größe eins einstellen Bevor wir weitermachen, wollen wir sehen, ob das tatsächlich funktioniert. Ich wähle diesen Frame und öffne jetzt die Dateivorschau. Sie können eine Tastenkombination, die Umschalttaste und die Leertaste verwenden , oder Sie können einfach das Drop-down-Menü hier verwenden Ich klicke auf meine 100 und du kannst sehen, dass es funktioniert, meine Quadrate ändern die Größe. Jetzt möchte ich diese Größen einrichten und ich möchte auch einen Return-Button einrichten , um zur ursprünglichen Standardgröße zurückzukehren. Ich wähle meinen zweiten Button. Übrigens können Sie Interaktionen auch kopieren und einfügen. Ich werde das nur Stück für Stück noch einmal durchgehen damit wir uns ein bisschen an den Prozess gewöhnen. Also die Quadratgröße, und das wollen wir auf unsere Variable bis jetzt setzen. Und jetzt machen wir den letzten. Also wollen wir auch wieder set variable auswählen. Wir entscheiden uns für die Quadratgröße und setzen diese auf Größe drei. Jetzt möchte ich nur noch meinen Reset-Button so einrichten, dass er wieder auf 400.400 springt Nun könnten Sie versucht sein eine Verbindung hinzuzufügen Übrigens, ich verbinde mich nur mit dem Quadrat. Um zu „Variable setzen“ zurückzukehren, können Sie hier oben auch ein Interaktionsmenü verwenden , um dies hinzuzufügen. Sobald du eine Variable verwendest, bekommst du hier dieses kleine Zeichen und es verbindet sich nicht mehr wirklich mit dem Quadrat. Sie könnten also versucht sein zu sagen, dass Quadratgröße gleich Quadratgröße ist Quadratgröße gleich Quadratgröße Weil das 400 sein sollten, oder? Ist es nicht. Denn was passiert jetzt? Wenn wir unsere Vorschau öffnen, können Sie sehen, dass sich alle Größen ändern. Aber wenn ich hier draufklicke , ändert sich das nicht. Und das liegt daran, dass wir die neuen Größen in diese quadratische Größe eingeben. Jetzt können Sie es nicht in Ihrer Sammlung sehen, aber im Hintergrund passiert genau das. Wir können das lösen, indem wir einfach eine weitere Variable hinzufügen, die ich als Standard bezeichnen werde . Ich setze das auf meine ursprünglichen 400. Also ändere ich jetzt die Quadratgröße gleich und setze es auf die Standardeinstellung. Versuchen wir es jetzt noch einmal. Wir können die verschiedenen Größen durchgehen. Und wenn ich Reset drücke, springt es auf meine ursprüngliche Standardgröße zurück. Wenn ich eine der Größen hier ändern würde. Lassen Sie uns diesen hier zum Beispiel auf wirklich kleine fünf setzen . Dann kannst du sehen, dass dies nicht nur in meinem Button, sondern auch in meiner Interaktion automatisch aktualisiert wird. 36. 02 Varianten-Swap mit Variablen: Variantentausch mit Variablen. Mit Variablen können wir spezifische Varianten aus einer Komponente abrufen und wir können auch Todesfälle für die Prototypenentwicklung nutzen Hier habe ich ein Komponentenset mit drei Varianten, a, B und C. Und hier oben habe ich eine Instanz von Variante a. Und ich habe drei kleine Blasen. Wenn ich also auf Orange klicke, möchte ich, dass eine angezeigt wird. Dann die mittlere hier, Rot ist B und die blaue wäre C. Also habe ich eine Sammlung eingerichtet. Und Sie können sehen, dass ich in dieser Sammlung eine Zeichenkettenvariable habe , die Auswahl genannt wird. Und dann habe ich Orange, Rot und Blau. Und das ist eigentlich der Name der Varianz. Dies ist also die einzige Stelle, an der Sie bei wirklich vorsichtig sein müssen Benennung wirklich vorsichtig sein müssen, da es sich um die genaue Benennung handeln muss , die Sie Ihrer Varianz gegeben haben Ich sagte F-Sub mit drei verschiedenen Modi und das lasse ich einfach im Add-Modus 12.3 Bitte beachte, dass du wahrscheinlich ein Figma-Problem oder höher benötigst , um Note einzurichten Bevor wir eine Interaktion einrichten, muss ich diese Variable hier, die Auswahl, an meine Instanz binden . Dies muss aktiviert sein, die Instanz funktioniert derzeit nicht innerhalb Ihrer Komponenten-Sets. Wählen Sie also die Instanz aus und dann auf der rechten Seite, in einem Eigenschaftenfenster, wenn Sie den Mauszeiger über den Instanznamen bewegen, erhalten Sie dieses kleine Symbol, zuweisen Jetzt ist diese Funktion wirklich neu. Das bewegt sich vielleicht immer noch ein bisschen, aber es sollte irgendwo hier in der Nähe sein. Verwenden Sie also die Dropdown-Liste und wählen Sie nun die Auswahlvariable aus , die wir gerade eingerichtet haben. Da ich das also mit der Auswahlvariablen verbunden habe, weiß sie jetzt, dass sie eine orange, rote und blaue Varianz Lassen Sie uns zum Prototyping übergehen und das verbinden. Also wähle ich die orangefarbene Blase aus und verwende den Stecker. Sie können auch einfach hier auf Interaction auf ein Plus klicken , um dies einzurichten. Und ich schalte auf Set Variable um. Und jetzt sage ich, setze die Auswahl auf, ich muss den Variantennamen verwenden. Also in diesem Fall die angegebene Orange. Und ich verbinde jetzt den roten auf die gleiche Weise. Also gehe ich zur Einstellung der Variablenauswahl und setze diese einfach auf Rot, die blaue. Ich mache die gleiche Set-Variablenauswahl und setze diese auf Blau. Schauen wir uns das an. Wenn das funktioniert hat, können wir entweder in den Präsentationsmodus oder in die Herbstvorschau wechseln . Ich werde das mit einer Tastenkombination Shift Leertaste verwenden. Wenn ich jetzt auf meine kleinen Knöpfe hier unten klicke, siehst du, dass es die richtige Variante einzieht Das ist also sehr praktisch, um Dinge wie die Anzeige verschiedener Stile desselben Produkts einzurichten . Und beachten Sie, dass ich für dieses Beispiel genau dieselbe Sammlung verwende . Und ich binde diese Variante hier nochmal an meine Variablenauswahl. Und das einzige, worauf ich achten muss , ist , dass meine Varianz den gleichen Namen Dieser ist also immer noch orange, rot und blau. Wenn ich das also probiere, können Sie sehen, dass das genauso gut funktioniert wie unser vorheriges Beispiel. 37. VARIABLEN: 03 Ausdrücke: Prototyping mit Ausdrücken. Beim Figma-Prototyping können wir die Berechnung jetzt mit Variablen kombinieren , also plus, minus, dividiert und Das könnte etwas ganz Einfaches sein, wie eine Variable plus oder minus ein anderer Wert oder eine andere Variable. Sie können dies aber auch für fortgeschrittenere Setups miteinander verbinden Hier habe ich ein Setup aus einer Minus-NA-Plus-Taste und einfach einer Zahl , die gerade auf Null gesetzt ist. Jetzt habe ich schon eine Sammlung eingerichtet. Und Sie können sehen, dass das super einfach ist. Ich habe nur eine Zahlenvariable und der Wert ist auf Null gesetzt. Nun setzen wir diese Null auf unseren Zähler von Null. Ich wähle die Null aus und wähle dann im Bedienfeld „Texteigenschaften“ die Option „Variable anwenden“. Und ich wähle hier unten, meine Theke. Wenn ich also hier auf diesen Plus-Button klicke, möchte ich, dass einer zu meinem Gesamtwert hinzugefügt wird. Und wenn ich ein Minus habe, möchte ich, dass eins von meiner Gesamtzahl abgezogen wird — eine Zahl. Gehen wir also zum Prototyping über. Ich wähle zuerst die Plus-Schaltfläche. Ich füge eine Interaktion hinzu und ich sage onclick, setze die Variable mit dem Namenszähler auf Und jetzt muss ich diesen Variablenzähler wiederverwenden. Und jetzt kann ich plus eins hinzufügen. Mal sehen, ob das funktioniert. Ich wähle den Frame aus und öffne meine Vorschau. Und wenn ich auf Plus klicke, siehst du, dass ich eins hinzufüge. Jetzt möchte ich die gleiche Breite minus nur umgekehrt machen. Also wähle ich meine Minus-Schaltfläche und füge dann eine Interaktion hinzu. Und ich werde die Variable auf den Zähler setzen. Und dann ist der Zähler minus eins. Toll, okay, schauen wir uns das an. Öffnen Sie die Vorschau plus und minus. Ich kann das für so ziemlich alles verwenden. Es muss keine Zahl sein. Was ich also tun könnte, ist, hier einfach eine Form zu zeichnen. Und lass uns das einfach füllen. Und jetzt kann ich jede beliebige Höhe oder Breite dieser Form an die Theke binden . Beachten Sie, dass dies Null ist, aber es wird auf eins gesprungen, da Figma Null hier nicht als Wert Und ich werde meine Schritte einfach etwas größer machen , damit wir es besser sehen können. Stellen wir ihnen also zwei von zehn Schritten vor. Und jetzt, wo wir die Vorschau geöffnet haben, können Sie sehen, dass sich die Zahlen sowie meine Form je nach den Tasten, die ich drücke, ändern. 38. 04 Chaining-Ausdrücke: Beim Figma-Prototyping können wir Ausdrücke auch verketten. In meinem Beispiel hier habe ich ein Sweatshirt zum Preis von 60, und ich habe ein Minus-N, einen Plus-Knopf Also kann ich das hinzufügen. Dies wäre die Gesamtzahl der hinzugefügten Sweatshirts. Und dann möchte ich sehen, wie hoch die Gesamtkosten wären. Also 60 mal die Zahl, die ich hier habe. Habe schon mein Plus und Minus eingerichtet. Die Sammlung, die ich verwende, ist ein Zähler und ein Wert von Null. Und dann können Sie beim Prototyping sehen, dass wir diesen hier auf Zähler setzen und dann Zähler plus eins, die Berechnung, die wir haben Und dann ist dieser hier eingestellt, dass die Gesamtzahl der Konten eine Zahl ist. Schauen wir uns das in unserer Datei-Vorschau an. Wir können also sehen, ob wir Plus hatten, dann steigt das. Und wenn wir Minus hatten, dann sinkt diese Zahl wieder. Jetzt müssen wir etwas mehr hinzufügen. Zuallererst müssen wir den Preis zu unserer Sammlung hinzufügen und wir benötigen auch eine Variable, um die Gesamtsumme zu speichern. Lassen Sie uns also unsere Sammlung öffnen. Also fügen wir den Preis als Zahl hinzu. Und das sind derzeit 60. Dann erstelle ich eine weitere Variable, die auch eine Zahlenvariable ist, und das wird die Summe sein, und sie ist derzeit auf Null gesetzt. Binden wir jetzt unsere Zahlen zusammen. Also ich nehme diese 60 hier und ich werde sie mit meinem Preis verbinden. Und dieser hier wird mein Gesamtwert sein. Gehen wir zum Prototyping über. Nun, diese Knöpfe hier, könnte ich immer noch auslösen. Also lass uns sie öffnen. Und ich habe derzeit die Plus-Taste auf Zähler plus eins eingestellt, also erhöhe ich diese Zahl. Jetzt möchte ich hier eine weitere Aktion hinzufügen. Ich möchte eine weitere Variable setzen. Denn was ich tun möchte, ist , die Summe auf den aktuellen Gesamtpreis zuzüglich Preis festzulegen . Schauen wir uns das an. In der Vorschau. Wir können jetzt sehen, dass, wenn ich einen habe, es 60 sind. Und ich muss jetzt immer plus eins addieren. Großartig. Lassen Sie uns also auch auf Minus setzen. Das funktioniert also ziemlich genauso. Ich füge eine weitere Aktion hinzu, setze die Variable und ich setze die Summe, zwei, insgesamt. Und in diesem Fall abzüglich des aktuellen Preises. Wenn wir uns das in unserer Vorschau ansehen, können Sie sehen, dass es jetzt steigt und wieder sinken wird. Wenn Sie sich fragen, warum wir Variablen verwenden und nicht einfach plus 60 hinzufügen, dann ist das Tolle daran , wenn wir alles in Variablen einrichten, können wir hier einfach den Preis ändern. Nehmen wir an, wir ändern diesen Preis auf at und jetzt würde alles aktualisiert. Es spielt also keine Rolle, wo in Ihrer Datei das verwendet wird, alles würde immer die richtigen Werte verwenden. 39. VARIABLEN: 05 Bedingte Aussagen: Bedingte Aussagen mit Variablen. Also hier haben wir wieder unseren Zähler. Wir haben also Plus und Minus. Und schauen wir uns das Setup kurz an. Das Plus ist also eingestellt, um zu verhindern, dass sich jedes Mal, wenn ich es drücke, um 100 erhöht wird. Und das Gleiche gilt für das Minus, nur dass es um 100 sinkt. Jetzt habe ich hier meine Null. Und das wird zur Variablen des Zählers gesagt. Hier unten habe ich eine Bar und hier habe ich eine Form. Nehmen wir einfach diese Form. Und Sie können sehen, dass das x2 Null ist. Das ist also eigentlich die Variable, die ich hier angewendet habe. Also habe ich den Zähler auf Null gesetzt. Wenn wir uns eine Sammlung ansehen, verwende ich hier eine frühere Sammlung, aber ich verwende wirklich nur diese Variable von counter. Nun, was ich möchte, ist, dass, wenn der Wert 500 erreicht, was bedeutet, dass mein Balken hier voll ist, ich zu dem Bildschirm springen möchte, auf dem u1 hover steht Ich möchte, dass die Zahl, die gewinnt, auf die Zahl gesetzt wird , die das auslöst. Nun, ich könnte das von Hand machen , weil ich weiß, dass es 500 sein sollen, aber es ist viel reibungsloser. Wenn ich das als Variable einrichte, füge ich eine weitere hinzu, die ich Schwellenwert nenne. Bei dieser Schwelle von derzeit weiß ich also , dass es fünfhundert sein sollen Das wird der Zeitpunkt sein, an dem ich mein neues Event auslösen werde. Und ich werde diesen hier tatsächlich binden, zwei bis 500, nur damit alles schön aufgeräumt Lass uns das kurz klären. Los geht's. Schauen wir uns einfach wie das derzeit aussehen würde. Also öffne ich die Vorschau mit Shift und Leertaste. Und ich kann mir vorstellen, dass, wenn ich Plus und Minus hinzufüge, das in Schritten von 100ern erfolgt. Und mit 500 will ich das. Diese Leiste ist gefüllt. Es würde jetzt jedoch einfach über diese Zahl hinausgehen. Und ich wollte, sobald ich dort angekommen bin , auf meinen neuen Bildschirm umschalten. Gehen wir zum Prototyp und wählen wir unseren Plus-Button. Oder wir haben derzeit , dass es um 100 steigt, wenn wir darauf klicken . Klicken wir also auf Plus und fügen Sie eine Aktion hinzu, und wir möchten eine bedingte Aktion hinzufügen. Jetzt kann ich sagen, ob der Zähler und Sie können sehen, dass ich einige Voreinstellungen erhalte , meinem Schwellenwert entspricht Dann möchte ich, dass ich eine Aktion hinzufügen möchte, der ich navigieren wollte. Und jetzt kann ich hier die Seite wählen, wann ich sie einrichte. Ich könnte auch wählen, wie wir navigieren sollen. So schlau, animiere das aus. Ich werde es vorerst einfach auf der Stelle belassen. Jetzt könntest du mit dem Else versucht sein , so etwas hinzuzufügen, die Variable hier zu setzen und diesen Teil dann tatsächlich zu verwenden Verwenden Sie also Zähler und dann Zähler plus 100. Und dann könntest du diesen Teil einfach hier oben löschen. Tun Sie das jedoch nicht. Es würde immer noch funktionieren, aber was passieren würde, ist , dass es auf 500 springt und erst dann, wenn Sie das nächste Mal klicken, es in unseren Wind springt. Was Sie also tun können, ist dieses Feld einfach leer zu lassen , weil es darauf ankommt , in welcher Reihenfolge die Dinge geschehen. Also gehen wir zuerst zum Zähler, um zu erhöhen, wenn wir klicken. Und dann wollen wir, dass Figma überprüft, ob wir unsere Schwelle schon erreicht Lass uns das ausprobieren. Wählen wir diese Open Are in Fire Preview aus und Sie können sehen, wie wir in Schritten von 100 springen. Rückwärts funktioniert immer noch. Wir müssen hier nichts tun. Und wenn wir die fünfhundert erreichen, springen wir zu unserem neuen Wann Und beachten Sie, wie es in dem Moment, in dem wir diese Zahl erreichen, wirklich springt dem Moment, in dem wir diese Zahl erreichen, Ich möchte auf etwas hinweisen, auf das Sie stoßen könnten , wenn Sie mit Bedingungsanweisungen arbeiten. Also hier habe ich ein Beispiel und es ist fast identisch. Und ich verwende dafür genau dieselbe Sammlung. Was hier passiert, ist, dass ich einen Zähler habe. Gehen wir zum Prototyping über. Und wir verwenden diesen, bevor Sie sehen können, dass der Rat um eins steigt. Die Summe steigt um den Preis. Das wird also die Summe sein. Ich wollte sagen. Wenn der Gesamtpreis den Schwellenwert erreicht , der immer noch bei 500 liegt, springen Sie rüber und sagen Sie , dass der Versand kostenlos ist. Wenn wir uns das jedoch ansehen, dann können Sie sehen, dass das eigentlich nicht funktioniert. Ich überschreite meinen Schwellenwert von 500 und nichts ändert sich. Wenn Sie mit konditionalen Aussagen arbeiten, müssen Sie sehr, sehr präzise sein. Das gesamte Setup ist also korrekt. Es heißt jedoch, der Schwellenwert sei gleich. Bevor das funktioniert hat, werden wir aber nie genau 500 als Vielfaches von 60 erreichen. Lassen Sie uns das also loswerden und sagen, die Summe ist größer als. Und jetzt können wir unseren Schwellenwert wieder verwenden. Und jetzt springen wir zurück und schauen, ob das funktioniert. Sie können sehen, dass wir steigen, wir erreichen 500 und wir springen zum neuen Bildschirm mit kostenlosem Versand. Und jetzt müssten wir auch unser Minus berücksichtigen. Wenn ich also auf Nörgler klicke, habe ich hier jetzt auch eine bedingte Aussage und ich springe zurück zu meinem vorherigen Bildschirm Ja, wir könnten sogar mit einer Seite davonkommen , wenn wir der Gleichung einige boolesche Werte hinzufügen 40. VARIABLEN: 06 bedingte Anweisungen und Booleane: Prototyping mit booleschen Werten und Variablen. Derzeit haben wir also ein Setup wie dieses, in dem wir Folgendes haben Lassen Sie uns das ausführen. Wir haben ein Sweatshirt zum Preis von 60. Wir können das in unseren Warenkorb legen. Es wird die Anzahl erhöhen und es wird den Gesamtpreis erhöhen. Und sobald wir diesen Schwellenwert von 500 erreicht haben , springen wir auf diese neue Seite mit kostenlosem Versand. Und wenn wir die Beträge reduzieren, springen wir zurück. Das funktioniert also gut, aber wir können das tatsächlich auf nur eine Seite reduzieren , wenn wir boolesche Werte verwenden Also hier habe ich eine Seite, die bereits den kostenlosen Versand beinhaltet und wichtig, das alles ist als automatisches Layout eingerichtet. Schauen wir uns an, was hier gerade passiert. Wenn ich also auf Plus klicke, füge ich einen Artikel hinzu und der Gesamtpreis erhöht sich um den Preis der Sweatshirts Lassen Sie uns nun unsere Sammlung öffnen. Wir können sehen, dass wir den Zähler haben , und das ist dieser hier. Dann haben wir den Preis , der hier steht, unsere Summe, die wir an diesen gebunden haben. Wie Sie sehen, haben wir den Schwellenwert , den wir bei 500 angegeben haben. Jetzt füge ich eine weitere Variable hinzu und nenne diese, die standardmäßig ein boolescher kostenloser Versand sein wird. Ich werde das auf falsch setzen. Jetzt muss ich zuerst diesen kostenlosen Versand an diesen booleschen Wert hier binden diesen kostenlosen Versand an diesen booleschen Wert Wählen wir es aus. in Ihrem Eigenschaftenfenster unter Ebene Klicken Sie dann in Ihrem Eigenschaftenfenster unter Ebene auf das Auge, aber nicht darauf. Sie einfach sicher, dass es ein Rechtsklick ist und Sie dann die Eigenschaften abrufen. Und jetzt klicken Sie auf Kostenloser Versand, was auf falsch gesetzt ist. Und dieser Teil mit kostenlosem Versand wird verschwinden. Sie können es immer noch in Ihrem Ebenenmenü sehen. Okay, lassen Sie uns jetzt etwas Logik einrichten. Gehen wir also zum Prototyping über und klicken wir hier auf unseren Plus-Button. Was ich jetzt tun möchte, ist eine bedingte Aussage hinzuzufügen. Und ich möchte sagen, wenn die Summe über dem Schwellenwert liegt , dann möchte ich die Variable des kostenlosen Versands von Folds auf True setzen . Wenn ich so minus zurückgehe, wollte ich dasselbe tun. Also möchte ich eine bedingte Aussage hinzufügen. Und ich möchte sagen, wenn die Summe unter dem festgelegten Schwellenwert liegt, dann möchte ich die Variable für den kostenlosen Versand wieder auf falsch setzen . Lassen Sie uns das jetzt schließen und einen Blick darauf werfen. Wenn das war. Wenn ich Plus drücke, steigen wir, wir erreichen unseren Schwellenwert und der kostenlose Versand wird angezeigt. Und ich kann weiter nach oben gehen. Aber wenn ich runtergehe und den Schwellenwert wieder erreiche, dann ist es weg, um den kostenlosen Versand wieder auszuschalten 41. DOCUMENT: 01 Prototypen mit Flows dokumentieren: Sobald Sie Ihren Prototyp fertiggestellt haben, möchten Sie ihn mit anderen teilen. Schauen wir uns an , wie wir das tun könnten. Hier habe ich also ein Beispiel für einen Prototyp, und Sie können sehen, dass ich an derselben Seite sowohl an meinem mobilen Design als auch an meinem Desktop-Design arbeite . Und Sie können auch sehen, dass ich bereits verschiedene Flows eingerichtet habe. Wenn ich beim Prototyping auf den grauen Hintergrund klicke, siehst du hier unten eine Übersicht aller meiner Abläufe. Was ich also gerne mache, ist ihnen ein bisschen Struktur zu geben. Also verwende ich mop für mobile Flows und Deaths für Desktop-Flows. Und dann kann ich den gleichen Ablauf haben, also logge mich ein, sodass ich ein mobiles Login und ein Desktop-Login habe. Und dann wären zwei beim Stöbern und Hinzufügen. Und Sie können sehen, dass Sie derzeit nur dieses Setup für Mobilgeräte haben . Ich kann das hier auch mischen, z. B. kann sie einfach verschieben und dann kann ich sie in der Reihenfolge sortieren oder sie so umbenennen, wie ich es brauche. Jetzt wechseln wir in unseren Präsentationsmodus. könnt es hier auf der linken Seite sehen, ich habe sie schön geordnet und so kann ich sie mobil und Desktop nebeneinander sehen und ich kann sie einfach alle durchklicken und sie werden sich offensichtlich mit dem gesamten, dem gesamten Prototyp verbinden. Aber ich kann immer noch zu bestimmten Abschnitten springen , die ich hervorheben möchte. Das ist ganz nett, aber ich kann für jeden, der meine Dateien eingibt, eine zusätzliche Übersichtsebene hinzufügen . Beachten Sie, dass wir hier einen Link erhalten, wenn wir den Mauszeiger über einen dieser Flows bewegen, sodass wir auf Link kopieren klicken können. Also z.B. für den mobilen Login. Und dann mache ich gerne einen kleinen Überblick. Hier habe ich eine Seite für meine mobile Ansicht und eine für meinen Desktop. Übrigens, vielleicht haben Sie nur eines, wenn Sie gerade an unserer mobilen App arbeiten , oder Sie haben vielleicht auch ein Tablet mit mehreren Füßen. Das hängt wirklich davon ab , woran Sie gerade arbeiten. Und dann tippe ich hier nur verschiedene Flows ein, die ich will, oder vielleicht habe ich einige von ihnen noch nicht bearbeitet. Wählen Sie dann einfach Ihren Text aus, verlinken Sie ihn und dann können Sie den Link, den Sie gerade von der rechten Seite kopiert haben, aus den Flows in dieser kleinen Übersicht kopieren den Link, den Sie gerade von der rechten Seite kopiert . Jeder, der meine Datei eingibt, könnte also direkt auf diese Links klicken , sodass er nicht verstehen muss, dass er zur Vorschau oder so gehen muss. Sie klicken einfach hier und dann öffnet sich die Vorschau. Und es wird einen Überblick über meinen Prototyp geben. Es beginnt immer direkt dem Flow, zu dem ich den Link hinzugefügt habe. Die kleinen Blasen daneben sind auf etwas zurückzuführen , das ich gerne benutze. Sie können also hier in meinem Design-Tab sehen, das ist wie aus einer externen Datei. Also lasst uns einfach da rüberspringen. Öffnen wir einfach diese Datei. Und hier habe ich einfach Varianten eingerichtet. So kann ich sehen, in welcher Phase es sich zum Testen befindet und in welcher Phase sich der Prototyp befindet. Also hier habe ich die erste, dass der Prototyp in Arbeit ist. Also zB Buch ansehen, ich habe diesen Flow noch nicht abgeschlossen und muss daher getestet werden. Und hier seht ihr, dass die Anmeldung zum Prototyp schon immer, bereits abgeschlossen war und gerade getestet wird. Sie können dies absolut an Ihre Bedürfnisse anpassen. Sie könnten hier einen Zuständigkeitsnamen hinzufügen, Sie könnten ein Datum hinzufügen, was auch immer Sie benötigen. Das gefällt mir sehr gut, weil wir auf diese Weise bereits alle Abläufe planen und verschiedene Schritte anordnen können , die wir als Prototyp bauen möchten. Und wir können auch sehen, was beim Testen passiert. Und hier wurden z. B. die Tests bereits durchgeführt und deshalb müssen wir zurückgehen und der Prototyp muss angepasst werden. Es gibt also wahrscheinlich einige Rückmeldungen aus den Tests und ich werde meinen Prototyp entsprechend überarbeiten. Da dies auf einem Rahmen eingerichtet ist, kann ich auch einfach auf Play drücken und dies als Präsentationsfolie verwenden. Und denken Sie auch an unseren kleinen Trick, dass wir animierte Rahmen in die Präsentation einbetten können . Also hier, das sind meine ganzen Prototypen, das ist also mein vertikaler Scrollrahmen, und das habe ich einfach in meine Präsentation hier eingefügt. Und jetzt kann ich das spielen. Schalten wir das aus. Und ich kann das durchblättern. Ich kann auf einzelne Elemente klicken und mein Design wirklich so einrichten. Und ich kann auch meine Übersicht mit den Flows zeigen. So kann ich eine Präsentation haben , die mein Prototyping beinhaltet. 42. DOKUMENTATION: 02 Prototyp-Links teilen: Sie können auch Personen zu Ihrer Datei oder nur zu Ihrem Prototyp einladen , indem Sie ihnen einen Link senden. Dabei gibt es einige Dinge zu beachten. Du könntest Leute direkt über den Link zum Teilen zu deiner Prototyping-Datei einladen . Sie müssten dann die Play-Taste drücken und könnten den Prototyp in Aktion sehen. In den meisten Fällen möchten Sie möglicherweise keine Personen in Ihrer Designdatei haben. Sie wollen ihnen nur den Prototyp präsentieren. Und das könnte nur an Ihrem Prototyp als solchem sein, eingebettet in die Präsentationsansicht mit verschiedenen Abläufen. Oder es könnte eine Präsentation sein, die Sie eingerichtet haben und die in der Präsentationsansicht sichtbar und anklickbar ist. Anstatt also die gesamte Datei zu teilen, während Sie sich in der Prototyping-Ansicht befinden, beachten Sie, wie sich die Schaltfläche ändert, um den Prototyp zu teilen. In unserer Designdatei werden Sie also sehen, dass es einfach Share heißt. Und wenn wir dann in unserer Prototyping-Ansicht, Prototyp teilen , darauf klicken, teilen wir nur den Link zu dieser Prototyping-Ansicht. Es wird alle Flows enthalten, die Sie eingerichtet haben. Bevor wir unseren Prototyp teilen, möchten wir sicherstellen, dass er genau so eingerichtet ist , wie die Person am anderen Ende ihn sehen soll. Unter Option können wir also wählen, welcher Größe wir unseren Prototyp anzeigen möchten. Und dann können wir auch wählen, ob wir unsere Flows ein- oder ausblenden möchten . Und so wird alles , was wir hier eingerichtet haben , in unserem Sharing-Link gespeichert. Und dann bekommt die Person am anderen Ende genau diese Einstellungen. Das beinhaltet nicht nur die Einstellungen in der Prototyping-Ansicht. Wenn wir zu unserem Design zurückkehren, denken Sie daran, dass wir auf dem Prototyp die Prototypeinstellungen anzeigen könnten, sodass Sie eingestellte Hintergrundfarbe hören können. Und was noch wichtiger ist, wir könnten ein Gerät einrichten. Allerdings muss man damit etwas vorsichtig sein wenn man rein arbeitet, sagen wir in der mobilen Ansicht. Und jetzt lasst uns zurückspringen. Dann können wir ein Gerät drum herum hinzufügen, was für eine Präsentation eigentlich sehr gut ist. Wenn Sie jedoch Mobilgerät und Desktop mischen, dann beachten Sie, was hier passiert, denn unsere Desktop-Ansicht, wir werden tatsächlich in dieses Gerät gequetscht. Wenn Sie also Geräte mischen, stellen Sie sicher, dass Ihr Gerät auf „Keine“ eingestellt ist. Ich springe zurück zum ersten Flow wo ich anfangen wollte. Und ich kann jetzt auf Prototyp teilen klicken. Also hier kann ich per E-Mail einladen, oder ich kann auch die Präferenz für den Link festlegen. Und hier können Sie wählen zwischen Kann bearbeiten, kann ansehen und kann prototypisch sein. Wenn du nun mit „Kann bearbeiten“ einlädst, bedeutet das, dass die Leute vollen Zugriff auf deine Datei haben und dein Design bearbeiten können. Dies könnte auch mit zusätzlichen Kosten für neue Redakteure verbunden sein. Seien Sie also sehr vorsichtig, wann und ob Sie diesen teilen. Can View ist kostenlos, bedeutet aber, dass die Leute Ihre gesamte Designdatei sehen können . Jetzt wollen wir bei Kent bleiben und Prototypen ansehen, also teilen wir nur die Prototyping-Ansicht einschließlich unserer Ablaufübersicht. Und ich kann jetzt auch per E-Mail einladen oder den Link setzen und einfach einen Link kopieren und abschicken. Sobald Personen Ihre Datei eingeben, können Sie auch jederzeit ihre Rechte bearbeiten. Jeder, der den Link hat, kann diesen Link jetzt einfach entweder in seinem Browser öffnen oder er wird in die Figma-App springen , wenn er sie geöffnet hat. Und du wirst sehen, dass sie, auch wenn sie nicht angemeldet sind, eine kleine Vorschau bekommen und sie trotzdem deinen Prototyp durchblättern können . Mit dem Link. Sie können den Prototyp auch öffnen, wenn Sie eine FIG my App auf Ihrem Mobilgerät installiert haben. Bei diesem müssen Sie nur ein wenig vorsichtig sein, da diese Bildschirmgröße, die Sie in Figma einrichten dieselbe Größe haben sollte, die zu Ihrem physischen Gerät passt, das Sie verwenden. Andernfalls wird es gedehnt oder zusammengeschoben. Und das könnte zu seltsamen Ergebnissen führen. 43. DOCUMENT: 03 Interaktive Komponenten für die Übergabe dokumentieren: Lassen Sie uns darüber sprechen, wie wir Interaktionen und Figma dokumentieren könnten . Bisher haben wir uns angesehen, wie wir unser Setup für das Prototyping im Allgemeinen kommunizieren. Also, wie wir diese Interaktionen von einer Seite zur anderen zeigen können . Aber ich denke, dass wir auch wirklich kommunizieren und vor allem Mikrointeraktionen dokumentieren müssen . Was passiert also beim Schweben und all den verschiedenen Zuständen, die in unsere interaktiven Komponenten eingebettet sind . Ihre Komponenten werden möglicherweise in derselben Datei auf einer separaten Seite gespeichert , oder sie befinden sich möglicherweise in einer völlig anderen Datei und Sie ziehen sie in Wire-Shared-Bibliotheken ab. Da ich also mit einem wirklich vereinfachten Beispiel arbeite um Ihnen zu zeigen, wie Sie die Dokumentation einrichten, habe ich hier nur ein paar Komponenten und speichere sie einfach auf einer eigenen Seite. Übrigens, wenn Sie Komponenten von einer Seite auf eine andere verschieben möchten , können Sie sie nicht einfach kopieren und einfügen. Sie müssen die besagte Komponente oder Komponenten auswählen, mit der rechten Maustaste klicken und dann zur Seite wechseln. Und Sie können das Ziel auswählen , an das Sie sie senden möchten. Wir werden diese Karte hier als Beispiel verwenden und ich werde Ihnen zeigen, wie Sie das dokumentieren und wie Sie die Interaktion und die kleinen Animationen, die innerhalb der Komponente passieren, kommunizieren können, damit Sie sie an die Entwicklung weitergeben können. Das ist also ein allgemeiner Anwendungsbereich, aber Sie können ihn absolut an Ihre Bedürfnisse anpassen. Aber gehen wir Schritt für Schritt vor. Also nehme ich zunächst die gesamten Komponenten und verschiebe sie auf diesen Rahmen, den ich eingerichtet habe. Und beachten Sie, dass es sich immer noch um einen Komponentensatz handelt. Aber sobald du es in einen Frame verschiebst, verschwinden die kleinen Komponenten, die du hier anmeldest. Also mache ich hier weiter und Sie können sehen, dass ich dieses Setup habe. Also habe ich einen Header, den Daten immer verwenden. In diesem Fall ist es eine coole Karte, ich gebe ihr eine Nummer. Und das ist die Dokumentation. Ich habe hier einen kleinen Stempel. Also das ist auch eine Variante gesagt, dass ich Opener für dich in einer anderen Datei eingerichtet habe . Und so können Sie hier sehen, dass es verschiedene Stufen gibt. Und so kann ich von einem Problem, das sich als zu schwierig erwiesen hat, übergehen was ziemlich oft passiert, und Fortschritte machen und so weiter. Also dieser hier würde genehmigt werden. Dann, weil ich meine Hauptkomponente in diesen Rahmen verschoben habe . Wenn wir zum Assets-Bedienfeld gehen, können Sie sehen, dass er meine lokalen Komponenten hatte, die, die ich nicht auf einem Frame verschoben habe, der hier herumschwebt. Und sobald Sie es in den Rahmen verschieben, ist dies der Name des Frames hier oben. Dann kannst du es öffnen und es wird schön darin aufbewahrt. Das wird also all Ihren Komponenten eine wirklich schöne Ordnung geben . Dann ziehe ich gerne einfach eine Instanz heraus. Also ich kann die Instanz auch hier haben, weil hier, zB wenn wir dieses Dokumentationsblatt abspielen würden, dann würden wir die Animation hier in dieser Instanz schon sehen . Sie können auch weitere Informationen hinzufügen. Also zB ich, ganz gerne einen Screenshot. Hier sehen Sie also alle Ihre Komponenteneigenschaften. Ich füge das hier einfach hinzu, füge einen kleinen Effekt und dann kannst du dir einen wirklich schönen Überblick verschaffen. Obwohl das also jeder sehen kann, wenn er auf eine Komponente klickt, mache ich trotzdem sehr deutlich, dass diese Komponente unterschiedliche Eigenschaften hat. Und eine dieser Eigenschaften ist der andere Status als der Standardstatus und Sie können zu einem Hover wechseln. Deshalb hebe ich das nur noch einmal hervor . Ich möchte nicht viel mehr über allgemeine Dokumentation sprechen mehr über allgemeine Dokumentation , da das ein anderes Thema in einem anderen Kurs ist , den Sie belegen können. Aber nur um es dir dann zu zeigen, werde ich es durchgehen. Also habe ich meine Spezifikationen hier eingerichtet. So können Sie alle Messungen sehen, wie sich alles verhält. Und ich kann immer ein paar Textinformationen geben. Und das ist gerade ein Teil von Interesse. Also hier habe ich meine Animation. Also was ich mache, ist, dass ich hier einfach eine Instanz habe. Also ein Standard und dann der Hover-Status. Und ich sage hier beim Schweben, es wird 800 Millisekunden nachlassen. Und dann kann ich hier in meinen Informationsfeldern einfach weitere Informationen hinzufügen. Hier spreche ich über den Auslöser. Also in meinem Fall auf Hover und ich habe die Aktion ein bisschen genauer beschrieben. Jetzt beschreibe ich das schon mit ein bisschen CSS im Hinterkopf. Das ist nicht notwendig. Du kannst auch einfach beschreiben, was passiert. Wenn Sie jedoch ein bisschen CSS-Notation oder eine andere Codenotation wünschen , können Sie einfach zum Tab Inspect springen. Und beachte auch, dass du den View-Modus nur mit deiner Entwicklung teilst . Das werden sie also automatisch sehen. Und sobald sie ein Element auswählen, dies ihre Informationen. Also was ich gemacht habe, ich habe einfach die Backshadow-CSS-Notation kopiert , z.B. von hier aus kannst du auch auf iOS oder Android umsteigen, je nachdem, woran du gerade arbeitest. Wenn Sie sich fragen, woher ich zur Transformationsskala gekommen bin, dann möchte ich Ihnen einen kleinen Trick zeigen. Also im Moment habe ich in meinen Komponenten hier angegeben, dass Bilder genau die gleiche Größe haben. Und dann, anstatt dies nur manuell zu ändern, können Sie das Bild auswählen und K drücken Und die K-Taste öffnet das Skalierungsmenü. Und jetzt können Sie hier eine Größe wählen. Sie können auch wählen , wo Sie beginnen möchten. Ich fange also von unten in der Mitte an und füge dann 1,2 hinzu, z. B. und es wird um 1,2 skaliert. Und jetzt können Sie einfach diese Skala verwenden, die mit CSS identisch sein wird. Und dann füge ich gerne einen kleinen Play-Button hinzu, denn es gibt wirklich nichts Besseres als eine Demo der eigentlichen Sache, um deine Idee zu vermitteln. Und so richte ich das ein, ICH zeichne einfach einen Rahmen und füge eine Instanz hinzu. Die Instanz enthält also die gesamte Interaktion, Sie haben eine neue Komponente eingerichtet und gesagt, lassen Sie es mich Ihnen zeigen. Wenn ich zum Prototyping übergegangen bin, dann kannst du hier sehen, dass hier meine Interaktion eingerichtet ist und dann wird diese natürlich wie alle anderen Instanzen dieses Verhalten erben. Also, wenn ich jetzt hier auf den Hintergrund klicke, kannst du sehen, dass das Auto Animation heißt und der Flow Karte heißt. Und ich kann den Link einfach kopieren. Und ich kann jetzt den Link hinzufügen, um Animationstexte anzuzeigen. Sobald also jemand auf Play klicken würde, würde es sich in diesem Flow öffnen und er konnte sich die Micro Interaction als kleine Demo ansehen. Sie können natürlich auch auf Ihr gesamtes Dokument verlinken. Also habe ich gerade hier einen separaten Ablauf. Übrigens, wenn Sie Z drücken, können Sie zwischen der Ansicht wechseln. Sie könnten also eine Gesamtansicht der Seite oder einfach eine Detailansicht haben. Und Sie können das in der Instanz sehen, alle Instanzen, die Sie tatsächlich in Ihrem gesamten Design verwenden. Sie würden auch ihre Interaktion sehen. Ich würde für jede Komponente, die ich verwende , eine Seite einrichten . Und wenn es eine Animation gibt, füge ich den Animationsteil hinzu. Wenn Sie keine Interaktion haben und diese offensichtlich nicht benötigen. Wenn Sie sich fragen, dieser letzte Teil hier ist einfach das reaktionsschnelle Verhalten. Es geht also nur darum, wie meine Komponente und ich im Design sitzen würden , wenn sich die Bildschirmgröße ändert. Sie können hier also sehen, dass ich ein Raster für mein Design verwende und es wäre immer dieselbe Komponente einfach die Anzahl der Spalten ändere, die es belegt. Testen und Dokumentieren von responsivem Verhalten ist ein großes separates Thema. Wenn Sie interessiert sind, ich habe dazu einen ganz eigenen neuen Lernkurs. 44. DOCUMENT: 04 Einbetten in externe Dokumentationen: Sie können ein externes System verwenden um Ihr Design und Ihren Code in Ihrer Figma-Datei und das Teilen zu dokumentieren Code in Ihrer Figma-Datei und das Teilen Sie können auch „ Einbettungscode abrufen“ auswählen und diesen Code dann einfach zum Einbetten kopieren. Einige Anwendungen stellen auch eine direkte Verbindung zu Figma her. Eine Liste der derzeit unterstützten Anwendungen finden Sie der derzeit unterstützten Anwendungen der Figma-Website. Klicken Sie dann auf Get Started, verbinden Sie Figma mit anderen Apps und betten Sie Figma ein. Und dann, ganz am Ende dieser Seite, finden Sie eine Liste aller derzeit unterstützten Anwendungen. Und beachten Sie, dass dies normalerweise browserbasierte Anwendungen sind. So können Sie Ihre externe Dokumentation in Notion, Dropbox Confluence, haben. Und der, den ich wirklich mag, ist Zero Highs. Deshalb werde ich Ihnen ein kleines Beispiel zeigen wie das Einbetten mit ihrer Höhe funktioniert. Einer meiner absoluten Favoriten für Dokumentation war Zero Heights, das Beispiel für das jahrzehntelange Designsystem, auf das Sie über Decade Lawn Dot Design zugreifen können. Jetzt klicken wir hier auf Digital. Und diese Seite, die Sie hier sehen, das ist alles eine eingebaute Nullhöhe. Wir wollen also sehen, wie sie ihre Interaktionen dokumentiert haben. Also lasst uns auf Komponenten klicken und auch hier ein wirklich nettes Detail. Sie erhalten zunächst einen Überblick über alle Komponenten und deren aktuellen Status für verschiedene Versionen. Klicken wir einfach auf den ersten Button, eine Schaltfläche und Sie können sehen, dass wir zwischen Web, Android und iOS wählen können. Also gehen wir jetzt einfach ins Internet. Dann haben sie hier ihre Dokumentation eingerichtet. Und so erhalten wir eine allgemeine Anatomie der Schaltfläche, Anwendungsbeispiele, Spezifikationen und so weiter. Und sie sind hydratisiert und geben Ihnen die Möglichkeit, dies so zu bauen , wie Sie es möchten. Sie könnten separate Seiten für Design und Code haben, oder Sie könnten alles zusammen haben. Es liegt wirklich an dir. Und jetzt wollen wir sehen, wie sie uns die Erntehilfen zeigen. Sie können also sehen, dass sie es ein Schaufenster nennen. Und im Showcase gibt es eine Einbettung. Und Sie können die verschiedenen Erntehilfen für diesen Button sehen . Gehen wir nun zurück zu den Komponenten und Sie können sehen, dass wir z. B. zur Karte gehen. Sie verknüpfen das alles auch mit Figma. So kann er wieder den Gebrauch der Anatomie sehen. Und hier sehen wir das Verhalten leider nicht. Aber was ich habe, ist wirklich nett, dir ein kleines Video zu zeigen , wie man das in Figma benutzt. Hier beschreiben sie also auch, wie verschiedene Zustände verwendet werden. Und natürlich haben sie auch einen Abschnitt, in dem erklärt wird, wie Teammitglieder eine Verbindung zu den Figma-Dateien herstellen. Übrigens, du kannst auch eine Kopie dieser Figma-Dateien haben und damit spielen wenn du nicht Teil des Decadland-Teams bist Gehe einfach in den Figma-Community-Bereich, suche nach Decadron und du kannst sie duplizieren und damit spielen. Also probieren wir es selbst aus. In ihrer Größe. Wir können ein kostenloses Projekt bekommen und es kostenlos ausprobieren. Und das ist mein kostenloses Projekt und ich kann hier einfach alles daran anpassen. Und hier sehen Sie die Ansicht, die der Ansicht, die der von Decadron bereits ziemlich ähnlich ist. Was ich also getan habe, ist in den Komponenten, ich habe nur eine neue Seite namens Karte hinzugefügt und Sie können all diese Abschnitte an Ihre Bedürfnisse anpassen. Also hier siehst du, dass ich schon einiges hochgeladen habe und wie das funktioniert ist, dass du dich direkt mit deiner Figma-Datei verbinden kannst. Also habe ich das hier schon eingerichtet. Sie können sehen, dass Sie den Link zu Ihrer Datei einfach in Null hinzufügen müssen. Es wird Sie dazu auffordern, wie das geht. Und dann kannst du all deine Elemente durchgehen. Also hier kann ich meine Farben, Stile, Wichtiges, meine Komponenten, meine verschiedenen Seiten durchgehen . Also alles, was ich hier gemacht habe, habe ich eine Karte ausgewählt und Sie können sehen, dass dies bereits bearbeitet ist. Wenn ich den Avatar hinzufügen möchte, könnte ich einfach diese Taste zum Hinzufügen auswählen. Und dann kannst du sehen, dass es alle Zustände des Avatars hochladen würde . Also würde es auch einen Standard- und den Hover-Status für mich hochladen . Lassen Sie uns das loswerden , weil wir das in diesem Beispiel nicht wollen. Also hier kannst du sehen, dass ich meine Karte habe, also habe ich meine verschiedenen Staaten. Und auch mit den Layouteinstellungen hier können Sie dies anpassen. Ich könnte das also auf verschiedene Arten anzeigen. Und ich kann auch hinzufügen, was mir die Komponenteneigenschaften sehr gut gefallen. Also hier hast du gerade Hover und Standard und könntest auch mehr hinzufügen und Knoten hinzufügen und so weiter. Also habe ich hier meine Spezifikationen hinzugefügt, aber eigentlich würde ich sie nicht einmal benötigen, da Sie einfach auf eine der Spezifikationen klicken können , die Sie aus Figma importieren, und dann öffnet es seinen eigenen Inspektionsmodus. Hier können Sie also einfach auf die verschiedenen Elemente klicken und Sie erhalten die verschiedenen Informationen in der Inspektionsansicht. Also hier oben kannst du auch sehen, dass ich auf dieser Seite alles einrichte, vom Design bis hin zu Figma. Und dann hätte ich hier eine separate Seite, auf der wir vom Code aus eine Verbindung zu der Kartenkomponente herstellen könnten , die jetzt codiert ist. Es ist also wirklich eine fantastische Möglichkeit alles auf eine Seite zu bringen. Und wie gesagt, das ist ein Setup, das Nullhöhe nahelegt. Sie können das alles auch auf einer Seite mischen, sodass Sie Ihr Figma-Design haben und dann die Codeverbindung unten haben , das ist wirklich Ihnen überlassen. Also weiter unten hier seht ihr, dass ich einige Beispiele hochgeladen habe. Also hier habe ich die Bilder, damit Sie sehen können, wie diese Komponente verwendet wird. haben wir nicht und was wir jetzt hinzufügen möchten, ist das Interaktionsverhalten. Also möchte ich zuerst meinen Prototyp hinzufügen. Wenn ich also auf Play klicke, ist das der Prototyp, den ich hinzufügen möchte. Wenn ich also hier klicke, wird neue Seite geöffnet und dort sind auch meine Mikrointeraktionen eingebettet. Also gehe ich zu Share Prototype und muss jetzt den Link für Null Höhe kopieren. Ich brauche keine Einbettung. Okay, springen wir zurück zur Nullhöhe. Und ich kann schon sehen, wie man einen Prototyp anzeigt , indem man Abschnitte einbettet. Also klicke ich hier und dann muss ich nicht Code auswählen, nicht Design hochladen sondern im Bett. Und jetzt gebe ich hier einfach meinen Figma-Link ein. Und du wirst sehen, dass mein Prototyp direkt geladen wird. Ich kann das Fenster jetzt auf die gewünschte Größe ziehen. Lassen Sie uns das etwas größer machen, weil Sie sehen können, dass es oben irgendwie gequetscht ist . Jetzt kannst du es also gut sehen. Jetzt kannst du sehen, dass es meinen Prototyp einbettet und ich kann mich einfach durchklicken. Übrigens, wenn Sie mehr Flows haben und den Link mit einer von Figma geöffneten Registerkarte „ Flows“ kopieren. Dann zeigt es Ihnen auch Flows in dieser Vorschau. Jetzt wollte ich hier auch nur diese kleine Animation der Komponente isoliert hinzufügen . Ich benötige also nicht die gesamte Dokumentation, da ich das alles in Nullhöhe einrichten kann . Was ich ganz gerne mache, habe ich in Figma nicht gemacht und dann kopiere ich z.B. diese Elemente zur Erklärung über 20 hoch. Aber im Moment will ich nur diesen. Drücken wir also die Abspieltaste, um zum Tab Prototyping zu gelangen. Und jetzt werde ich meine Flows schließen , weil das sonst angezeigt würde und ich das einfach zeigen möchte. Und lass uns zu Share Prototype gehen und den Link kopieren. Einige werden das tatsächlich zuerst hinzufügen. Also nochmal, ich muss Embed verwenden. Und dann kopiere ich den Link, den ich gerade aus meiner Vorschau bekommen habe. Und es ist dasselbe wie zuvor. Jetzt können wir das Fenster hier öffnen. Und das wird so bleiben, wie du das eingerichtet hast. Jetzt habe ich also diese kleine Interaktion und dann können Sie meine Komponente in Aktion sehen. So würde unsere Seite für jeden Besucher aussehen , damit er sehen kann, dass wir unsere Komponenten mit Inspect haben. Und dann haben wir hier unten unsere Beispiele. Und am Ende werden unsere Mikrointeraktionen sowie unser anklickbarer scrollbarer Prototyp hier angezeigt . 45. Vielen Dank: Gut gemacht, dass du diesen Kurs abgeschlossen hast. Sie können uns gerne unter moon learning dot io kontaktieren, wir sind immer an Ihrem Feedback interessiert. Sie würden uns auch einen großen Gefallen tun, wenn Sie sich einfach eine Minute Zeit nehmen und hier eine Bewertung hinterlassen könnten . Wenn Ihnen dieser Kurs gefallen hat und schauen Sie sich auch unsere zusätzlichen Kurse an. Bei Moody Learning Punkt io. Wir behandeln alle Themen, von den Grundlagen des UX-UI-Designs bis hin zu Figma und sogar einigen Code-Grundlagen. Besuchen Sie unbedingt unsere Website unter Moody Learning dot IO, wo Sie sich auch für unseren Newsletter anmelden können.