Figma Advanced Masterclass: Designsysteme, Prototyping und reaktionsschnelle Benutzeroberfläche

1. Willkommen zur Figma Advanced Masterclass!: Willkommen zur Figma Advanced Master Class. Wenn Sie sich bereits mit Figma auskennen und Ihre Fähigkeiten auf ein wirklich professionelles Niveau bringen möchten , dann ist dies der richtige Kurs für Hallo. Mein Name ist Ahmed und ich werde dein Kursleiter für diesen Kurs sein Ich bin ein UIUX-Designer mit mehr als vier Jahren Erfahrung in der Arbeit an realen, digitalen Erlebnissen und Produkten wie Websites und Apps in verschiedenen Branchen, wie der Technologiebranche, Tourismusbranche an mehreren Projekten gearbeitet, die habe an mehreren Projekten gearbeitet, die nicht nur ein gutes Auge für Design erforderten, sondern auch effiziente Workflows, Zusammenarbeit und Systeme, die mit der Zeit wachsen können. Und genau das werde ich Ihnen in diesem Kurs beibringen. In diesem Kurs gehen wir über das grundlegende Design hinaus und konzentrieren uns darauf wie fortgeschrittene Designer an realen Projekten arbeiten. Sie lernen, skalierbare Designsysteme zu erstellen, mit Variablen und Teambibliotheken zu arbeiten responsive Layouts zu erstellen , die auf unterschiedlichen Bildschirmgrößen funktionieren. Machen Sie sich auch mit fortgeschrittenen Prototyping-Techniken vertraut, z. B. mit der Erstellung von Mikrointeraktionen, flüssigen Animationen und Gesten All diese Dinge, die Ihr Design zum Leben erwecken werden Darüber hinaus werden wir uns mit modernen Figma-Designtools wie FIG Jam, Figma Buzz, Figma Slides und vielem mehr befassen modernen Figma-Designtools wie FIG Jam, Figma Buzz, , damit Sie verstehen, wann Sie sie verwenden sollten und wie Sie sie verwenden können, um sie in einen professionelleren und effizienteren Arbeitsablauf zu integrieren einen professionelleren und effizienteren Am Ende dieses Kurses werden Sie nicht nur Ihre technischen Fähigkeiten verbessern, sondern auch Ihr Denken als Designer verbessern Sie werden in der Lage sein, schneller, effizienter und strukturierter zu arbeiten . Lassen Sie uns also anfangen. 2. Was macht einen Designer zu einem "Fortgeschrittenen" in Figma + Course Roadmap: Hallo und willkommen zum Figma-Kurs für Fortgeschrittene. Hier lernst du alles, was du wissen musst, um wie ein Senior schnell und professionell Wireframes und Prototypen erstellen zu können wie ein Senior schnell und professionell Für das Dienstalter benötigen Sie jetzt natürlich ein paar Jahre Berufserfahrung Aber in diesem Kurs werden Sie in der Lage sein, die komplexesten Konzepte zu erlernen und zu verstehen die komplexesten Konzepte mit denen wir uns befassen, wenn wir auf Figma entwerfen Sie werden einige Tipps und Tricks lernen, die nur Personen kennen, die über ein hohes Maß an Erfahrung und Wissen über Figma verfügen , und Sie werden im Allgemeinen die schwierigen Tools und die komplexen Mechanismen verstehen, mit Schauen wir uns ohne weitere Umschweife an, was Sie in diesem Kurs lernen werden Ich habe alle Informationen zu diesem Kurs zusammengestellt, einen allgemeinen Überblick , damit Sie verstehen, worauf Sie sich einlassen. Ich würde Ihnen raten, unseren FIGMA-Kurs zu besuchen , den Figma-Basiskurs, nicht den Fortgeschrittenenkurs, falls Sie dies noch nicht getan haben Aber wenn Sie das Gefühl haben, über viel Erfahrung zu verfügen und schon einmal mit Figma gearbeitet zu haben, dann ist dies der richtige Kurs für Sie Kurs Andernfalls versuchen Sie bitte zunächst, die grundlegendsten Elemente im ersten Kurs zu verstehen, in dem wir ein wenig auf diese fortgeschrittenen Funktionen eingehen grundlegendsten Elemente im ersten Kurs zu verstehen, in dem wir ein wenig auf , aber nicht vollständig Aber in diesem Kurs gehe ich davon aus, dass Sie die Grundkenntnisse bereits kennen, Sie wissen, wie man Frames erstellt, wie man Benutzerflüsse erstellt und so weiter Falls Sie also noch nicht ganz da sind als Designer nicht richtig fit fühlen, sollten Sie vielleicht einen Schritt zurücktreten und versuchen, die Grundlagen zu lernen, und dann hierher zurückkehren. Aber wenn du sagst: Hey, weißt du was? Ich weiß das und ich glaube, ich schaffe das. Ich weiß ein paar Sachen über Figma. Ich habe es schon einmal benutzt. Ich habe schon einmal darauf entworfen. Ich bin, weißt du, auf einem guten Niveau, ich möchte besser werden, dann ist das der richtige Kurs für dich. Also das erste Kapitel , das wir haben werden, ist skalierbare Entwurfssysteme und Variablen. In diesem Kapitel werden wir nun über drei wichtige Dinge oder Hauptmerkmale von Figma sprechen über drei wichtige Dinge oder Hauptmerkmale von , die sehr wichtig sind, und einige dieser Funktionen wurden in jüngerer Zeit veröffentlicht Wenn ich kürzlich sage, meine ich in den letzten vier Jahren oder so. Das ist für viele Designer, ziemlich neu. Das erste, worüber wir sprechen werden, ist Komponentenarchitektur, die sich auf die Erstellung wiederverwendbarer Elemente bezieht, die wir Komponenten nennen , die auch unterschiedliche Instanzen und Varianten haben . Dann werden wir über Variablen und Modi sprechen. Ich würde sagen, eine dieser neueren Funktionen, mit denen Sie Variablen, Farben, Texte usw. erstellen können , die sich ändern oder die irgendwann geändert werden können. Und wir werden über Teambibliotheken und Dateiorganisation sprechen , was ein sehr wichtiger Teil der Arbeit innerhalb eines Teams an Figma Es hat also viele Vorteile, und wir werden über sie sprechen Im zweiten Kapitel werden wir uns nun mehr auf das erweiterte Layout und die Reaktionsfähigkeit konzentrieren erweiterte Layout und die Reaktionsfähigkeit Falls Sie nicht wissen, was Reaktionsfähigkeit ist, geht es im Grunde darum, Ihre Apps oder Produkte oder was auch immer sie sein mögen, so zu gestalten , dass sie auf verschiedene Bildschirme passen, einschließlich PC-Bildschirmen, Tablet-Bildschirmen, Telefonbildschirmen In der ersten Lektion werden wir also darüber sprechen, dass wir uns eingehend mit dem automatischen Layout befassen Automatische Layouts sind diese erstaunliche Funktion, über die meistens nur Figma verfügt, mit der Sie Elemente organisieren können Wir werden später darüber sprechen, aber Sie haben wahrscheinlich schon eine Einführung dazu Dann werden wir über Einschränkungen und Grenzwerte sprechen und darüber, wie Sie sie verwenden können, um ein Design responsiv zu gestalten Am Ende werden wir einen Abschnitt erstellen, der in der realen Welt responsiv Das ist im Grunde ein Beispiel, eine Anleitung, in der ich Ihnen zeigen werde, wie Sie ein Design zu einem sehr responsiven Design machen können Jetzt, im dritten Kapitel, werden wir über fortgeschrittenes Prototyping und Mikrointeraktionen sprechen fortgeschrittenes Prototyping und Mikrointeraktionen Nun, als jemand, der kein absoluter Neuling ist, haben Sie wahrscheinlich schon einige Erfahrungen mit dem Prototyping gemacht Sie wissen, wie es verschiedene Elemente gibt und wie Sie sie prototypisieren können Und was das im Grunde bedeutet, ist, dass Sie eine Animation haben können oder Sie können eine Schaltfläche verwenden, um etwas anderes zu tun. Vielleicht führt es Sie zu einer anderen Seite oder vielleicht hat es einen Hover-Effekt Mikrointeraktionen genau das, aber auf Mikroebene, nur kleiner Das wird die erste Lektion sein , über die wir sprechen werden. Mikrointeraktionen, fangen wir mit der Grundstufe an. Dann werden wir über Scroll- und Gesteninteraktionen sprechen . Im Grunde genommen, wie scrollt man horizontal, vertikal usw., denn das muss auch auf Figma eingerichtet werden Am Ende werden wir über Smart Animate Mastery sprechen über Smart Animate Smart Animate ist diese großartige Funktion , mit der Sie flüssige und geschmeidige Animationen erstellen können, ohne viel tun zu müssen. Um ehrlich zu sein, ist es ganz einfach ohne viel tun zu müssen. Um ehrlich zu sein, ist es Von dort aus werden wir zum letzten Kapitel übergehen. Das sind moderne Figma-Tools für fortgeschrittene Designer. Falls Sie noch nichts davon gehört haben, Figma hat seinen Hauptteil, das ist der normale Designteil, über den wir normalerweise sprechen und den die meisten Designer verwenden, aber sie haben bereits eine Reihe von Tools eingeführt , die Sie für andere Zwecke verwenden können Nun, diese Tools unterscheiden sich nicht grundlegend vom Design-Tool, aber sie sind etwas fokussierter Unter diesen Tools werden wir über Figma Jam sprechen. Das hilft Ihnen bei der Teamarbeit und beim Brainstorming mit Ihrem Team. Dann Figma Buzz für soziale Medien, Beiträge und Bilder für Ihre sozialen Medien erstellt unterwegs Beiträge und Bilder für Ihre sozialen Medien erstellt, ohne dass zu viel Mühe geben oder bei vielen Designeinstellungen hängen bleiben Dann Figma-Sites, mit denen Sie Websites direkt von Figma aus entwerfen und veröffentlichen können , Figma-Folien, Figma-Folien, Im Grunde ermöglicht es Ihnen, Diashows genau wie PowerPoint zu erstellen Diashows Dann Figma M, die spezielle KI BiFigma, Sie verschiedene Lösungen, Prototypen und Bildschirme und sogar Code erstellen können , Prototypen und Bildschirme und Nachdem wir jedes einzelne dieser Tools einzeln besprochen und Ihnen einen sehr allgemeinen Überblick und eine Einführung in sie gegeben haben, werden wir abschließend dieser Tools einzeln besprochen und Ihnen einen sehr allgemeinen Überblick und eine Einführung in sie gegeben haben, darüber sprechen, wann diese Tools uns tatsächlich helfen und wann sie uns ablenken Denn Sie müssen bedenken, dass diese Tools großartig sind, aber sie sind auch zielgerichtet Die ganze Idee ist, dieselben Funktionen oder Tools zu verwenden, die Sie normalerweise beim Design haben, aber jetzt konzentrieren sie sich auf spezielle Zwecke wie das Erstellen von Folien, was mit Einschränkungen und Ablenkungen verbunden sein wird Wir werden die bewährten Methoden und meine persönlichen Empfehlungen sowie meine Erfahrungen mit diesen Tools besprechen und meine persönlichen Empfehlungen sowie meine Erfahrungen mit diesen Tools Ich möchte das nicht zu lang machen weil ich mir ziemlich sicher bin, dass Sie wissbegierig und wissbegierig sind, also fangen wir an. Fangen wir an zu lernen, und wir werden langsam anfangen und dann werden wir etwas schneller werden, also machen Sie sich bereit, setzen Sie sich und los geht's Wir sehen uns auf der nächsten Folie. 3. UX-Theorie: Hallo und willkommen zu einer weiteren Lektion des Figma-Kurses. Und in dieser heutigen Lektion geht es darum, Ihnen vorzustellen, was User Experience Design ist, oder genauer gesagt, was UIUX Aber wir werden uns etwas mehr auf den UX-Teil konzentrieren. Also lass uns weitermachen. Lassen Sie uns zunächst kurz definieren, worauf sich Benutzererfahrung beziehen soll. Benutzererfahrung kann im Allgemeinen so definiert werden, dass sie die Art und Weise beschreibt, wie ein Benutzer mit einem Produkt, System oder einer Dienstleistung interagiert und es erlebt , okay? Es kann jedes dieser Dinge sein. Und es beinhaltet die Wahrnehmung von Nützlichkeit durch eine Person. Benutzerfreundlichkeit und Effizienz. Nun, wenn wir das schnell aufschlüsseln wollen, geht es im Grunde um Interaktion. Das ist ein sehr hervorgehobenes Wort. Es geht um die Interaktion und Erlebnis eines Produkts, eines Systems, einer Dienstleistung. Und deshalb sage ich immer eine Art digitales Erlebnis. Ich definiere diese Dinge immer. Es könnte eine Website sein, es könnte eine App sein, es könnte was auch immer sein, oder? Denn wenn Sie physisch sagen, könnte es sogar digital sein. Wenn Sie sagen, dass ein Produkt, das alles sein könnte , ein Produkt ist, oder? Es könnte jede Art von Sache sein. Es könnte eine Tasse sein, es könnte eine Website sein. Es könnte, du weißt schon, eine Nummer sein, die du anrufst und sie bieten dir irgendeine Art von Service, oder? Und deshalb die Art , all diese Dinge zu verkapseln Es könnte ein Produkt, ein System oder eine Dienstleistung sein, weil es verschiedene Kategorien gibt, und es geht darum zu verstehen wie Benutzer mit ihnen interagieren Und es heißt, dass dazu auch ihre Auffassung von Nützlichkeit, Einfachheit und Effizienz gehört ihre Auffassung von Nützlichkeit, Einfachheit und Effizienz Und das sind auch ziemlich große Themen. Finden sie es nützlich? Diese App, Website oder dieser Dienst? Ist sie einfach zu bedienen und effizient? Macht es also das, was es tun soll? Das sind alles sehr wichtige Fragen. Und jetzt werde ich sagen, warte eine Minute. Was ist der Unterschied zwischen Benutzererfahrung und Benutzeroberfläche? Und ich habe genau diese Frage, weil ich auch gelernt habe und mich in diesem Bereich zurechtgefunden habe. Ich habe mich gefragt, wir benutzen immer wieder diese beiden Wörter und sie kommen immer zusammen? Sind sie dasselbe? Sagen wir nur Bleistift oder Stift? Wissen Sie, sie sind so nah beieinander , dass wir nur sagen, dass sie gleichwertig sind. Nein, nicht genau. Okay? Lassen Sie uns also die Unterschiede hervorheben. Bei der Benutzererfahrung geht es also mehr um das Gefühl. Es geht darum, wie sich ein Produkt oder ein Erlebnis anfühlt, wie es jemand erlebt. Auf der anderen Seite geht es bei der Benutzeroberfläche eher um das Aussehen. Es geht darum, wie es aussieht, die Farben, die Typografie, der Text, du weißt schon, die Bilder, oder? Während es bei der Benutzererfahrung eher darum geht, wie fühlen Sie sich durch die Bilder Wie fühlen Sie sich durch den Text? Überzeugt dich der Text? Beruhigt es dich oder macht es dich wütend? Weißt du, es geht also um die Erfahrung, das Gefühl, ein anderer Punkt ist, dass die Benutzererfahrung auch einen Großteil der Nutzerforschung Es geht darum, sich hinzusetzen, mit Benutzern zu sprechen , zu sehen, was sie denken, und zu versuchen, ihr Verhalten zu verstehen, und sich davon bei der späteren Gestaltung, der Benutzeroberfläche leiten zu lassen . Es geht darum, unser Verständnis zu lenken. Es geht darum, tatsächliche Ergebnisse von unseren Benutzern zu erhalten. Während es bei der Benutzeroberfläche eher um Designtrends geht. Bei Designtrends geht es also darum, was es da draußen gibt? Was machen die Leute? Was sind die beliebtesten Designs, Formen und Farben? Weißt du, jedes Jahr kommt etwas Neues auf den Markt. Manchmal lieben wir Farbverläufe und dann in einem anderen Jahr sind Farbverläufe nicht cool Weißt du, einmal waren Ikonen unglaublich. An einem anderen Tag, weißt du, sind Ikonen vielleicht nicht so cool. Und es geht immer um diese sich ändernden Dinge, und es muss sich nicht dramatisch von uncool zu cool oder umgekehrt ändern , aber es könnte sein, dass Formen runde Ecken haben und dann manchmal scharfe Ecken Es gibt all diese Trends, und es geht darum, ihnen zu folgen. Bei der Benutzererfahrung geht es auch mehr um psychologische Prinzipien. Es geht also darum, wie Nutzer die Formen wahrnehmen? Weißt du, wie verstehen sie sie? Es sollte eine psychologische Erklärung dafür geben, was in ihrem Gehirn vor sich geht , wenn sie etwas sehen und wie sie sich dabei fühlen. Auf der anderen Seite geht es bei der Benutzeroberfläche um Gestaltungsprinzipien. Benutzeroberfläche basiert auf Regeln, die wir festgelegt haben und die bestimmen, ob das Design gut ist. Aber die Benutzererfahrung möchte wissen, ob dieses Design gut oder schlecht ist. Funktioniert es? Ruft es die Emotionen hervor , die wir hervorrufen wollen? Führt es zu Verständnis oder verstehen die Leute , wie man es benutzt Ist es einfach? Macht es Spaß und so weiter? Benutzererfahrung ist auch etwas theoretischer Natur. Das heißt nicht, dass es nicht mit der Praxis und mit tatsächlichen Daten, mit der tatsächlichen Implementierung zu tun Praxis und mit tatsächlichen Daten, mit der tatsächlichen hat. Das ist es auf jeden Fall. Aber im Allgemeinen fühlt es sich eher danach an, sich hinzusetzen, etwas zu recherchieren, mit Leuten zu reden, eine Menge, Sie wissen schon, Papierkram zu erledigen. Und es ist kein richtiger Papierkram, sondern es geht mehr darum, die Fakten richtig zu machen, und dann zu entscheiden, was mit Benutzeroberfläche geschehen soll, ist, Sie wissen schon, die Farben auszuwählen, den Text auszuwählen, weiterzumachen, einen Prototyp zu erstellen, eine Skizze oder so etwas Ähnliches Die Benutzererfahrung beinhaltet viele Tests und Iterationen. Es geht darum, zu testen, zu erkennen, dass Sie falsch liegen oder dass es einige Aspekte gibt, oder dass es einige Aspekte gibt bei denen Sie Dinge verbessern können und dann zurückzugehen und sie auf der Grundlage der Ergebnisse zu ändern Die Benutzeroberfläche beinhaltet viel Interaktivität und Animation Das wird also als Ziel hervorgehoben. Wie gesagt, es geht auch mehr um das Aussehen. Es geht also darum, dass Dinge lebendig aussehen, gut aussehen, fesselnd und beeindruckend sind. Und das ist einer der Hauptschwerpunkte. Es ist ein großartiges Bild, um den Unterschied zwischen Benutzeroberfläche und Benutzererfahrung zusammenzufassen zwischen Benutzeroberfläche und Benutzererfahrung Design ist also im Grunde genau wie auf diesem Bild. Sie haben eine wunderschöne Straße oder, Sie wissen schon, eine Straße, einen Gehweg, einen Gehweg in diesem Garten, in diesem Park, und es ist sehr schön geplant, oder? Und dann ist die Benutzererfahrung das, was die Leute tatsächlich tun. Die Benutzer, die dorthin gehen, die den Park nutzen , finden, dass diese Straße am effizientesten Das zeigt sich daran, dass das Gras nicht mehr da ist , weil so viele Menschen darüber gelaufen sind. Und das zeigt Ihnen, dass es einen Trend im Nutzerverhalten gibt. Sie laufen überall herum, und beim Design geht es darum, gut auszusehen und gut auszusehen und es auf schöne Weise zu planen, aber nicht unbedingt auf effiziente oder funktionale Weise. Und der Grund dafür ist, dass man, wenn man dem folgen wollte , den ganzen Weg dorthin laufen müsste, und dann kann man nach rechts gehen. Aber in der Zwischenzeit nimmt das eine Abkürzung. Bei der Benutzererfahrung geht es also darum zu verstehen, was Menschen tatsächlich tun? Es geht nicht nur um Hey, wir haben das für sie entworfen. Nein, es geht darum, ob sie es tatsächlich benutzen? Ist es wirklich nützlich und so weiter. Bei der Benutzererfahrung geht es um Interaktionen. Denken Sie darüber nach, wissen Sie, in Bezug auf diese intelligenten Airpods oder Ohrhörer. Stellen Sie sich die Frage Wie überspringe ich ein Lied? Wie überspringe ich ein Lied? Nun, wenn du mit diesen Arten von Ohrhörern vertraut bist , gibt es normalerweise, du weißt schon, eine Taste oder du musst sie ein- oder zweimal antippen oder vielleicht tippen und gedrückt halten, um einen Song zu überspringen Benutzererfahrung geht es also um diese winzigen Interaktionen , die Sie mit Ihrer Technologie durchführen, um etwas , die Sie mit Ihrer Technologie durchführen zu erreichen, denn Ohrhörer an und für sich sind erstaunliche Erfindungen, und es wird viel Arbeit in ihr Aussehen gesteckt Aber wissen Sie, nachdem ich sie entworfen habe, eines der Dinge, die mir zuerst in den Sinn kommen ist eines der Dinge, die mir zuerst in den Sinn kommen: Wie überspringe ich ein Lied Ich meine, ich habe meine Ohrhörer an. Mein Handy ist in meiner Hose. Ich möchte ein Lied überspringen, ohne mein eigenes zu nehmen . Bei der Benutzererfahrung geht es darum über all die Arten von Interaktionen nachzudenken , die Sie mit Ihrer Technologie, mit Ihrem digitalen Erlebnis, mit Ihrem Service, mit Ihrem Produkt, wie auch immer Sie es nennen möchten, haben mit Ihrem digitalen Erlebnis, mit Ihrem Service, mit Ihrem Produkt, , und darüber nachzudenken, wie Sie es reibungsloser, besser und einfacher machen können es reibungsloser, besser und einfacher machen Und zweitens geht es auch um Erwartungen. Benutzererfahrung geht es also darum, was Sie erwarten, wenn Sie ein Produkt wie dieses sehen? Und was passiert hier zum Beispiel, wenn Sie eines herausnehmen? Und noch einmal, wenn Sie jemals einen gehabt haben, wüssten Sie, dass, wenn Sie einen Ihrer Ohrhörer herausnehmen, die Musik unterbrechen würde Das war ziemlich klug, weil es verstanden hat , dass viele Menschen dieses Bedürfnis haben Sie nehmen einen Ohrstöpsel raus, jemand spricht mit ihnen. Sie wollen ihnen antworten, und sie wollen ein Gespräch fortsetzen oder so. Sie wollen hören, was die anderen sagen oder was auch immer. Also zu verstehen, dass das von einem Bedürfnis herrührt und dieses Bedürfnis bedeutet, vielleicht die Musik zu beenden. Also mit den Erwartungen umgehen. Also der Benutzer, vielleicht weiß er das nicht, vielleicht versteht er es nicht, aber im Grunde geht es darum, aber im Grunde geht seinen Bedürfnissen gerecht zu werden, ohne zu wissen dass es bei der Benutzererfahrung um die Interaktionen geht Benutzer mit dem Produkt haben, und darum, mit ihren Erwartungen umzugehen und sicherzustellen, dass die Technologie das tut, was sie tun soll Und noch etwas sind Emotionen. Und wie fühlst du dich dadurch? Meine ersten Ohrhörer, die ich ausprobiert habe, ich habe mich unglaublich wohl gefühlt Ich fühlte mich wie ein König. Ich hatte das Gefühl, endlich etwas in die Hände bekommen zu , das mich verstand und ich verstand es. Und es entsprach all meinen Erwartungen. Es war intuitiv zu bedienen. Es hat alles perfekt gemacht. Und es war einfach so viel besser als alles, was ich je hatte. Und das ist übrigens keine Werbung für irgendeine Art von Technologie, aber ich sage nur, dass es um Emotionen geht. Und es kommt oft vor, dass sind, wenn Sie ein Produkt oder eine Dienstleistung entwickeln Menschen frustriert Sie können wütend werden. Sie können traurig werden. Sie haben eine Reihe von Emotionen , weil sie Menschen sind. Bei der Benutzererfahrung geht es also darum , mit diesen Emotionen umzugehen und sicherzustellen , dass Sie so viele positive Emotionen wie möglich haben und nur sehr wenige negative. Das ist also die Aufgabe eines Produkts. Es geht darum, Ihnen das Gefühl zu geben, dass Ihre Bedürfnisse erfüllt werden und dass das Produkt unglaublich und großartig und erstaunlich ist. Das ist also eine gute Zusammenfassung dessen, was Benutzererfahrung ist. Lassen Sie uns nun darüber sprechen, warum Sie entwerfen. Es gibt also zwei Hauptteile. Es gibt ein Problem und es gibt eine Lösung, oder? In der Welt, auf der ganzen Welt, in welchem Geschäft Sie auch immer tätig sein möchten, gibt es normalerweise ein Problem und eine Lösung. Das Problem, so könnte ich es beschreiben. Ein Produkt existiert, weil es auf der Welt einen Bedarf oder ein Problem gibt. Denken Sie an jedes Produkt , das Sie haben. Es gibt ein Problem oder einen Bedarf. Du musst etwas erreichen und dafür brauchst du etwas. Du weißt schon, du hast ein Auto, weil du damit sehr lange Strecken zurücklegen willst , weil du vielleicht schon einmal ein Pferd hattest, aber ein Auto ist schneller. Du hattest früher ein Fahrrad, weißt du, billiger, aber ein Auto ist schneller. Es löst also ein Problem und die Notwendigkeit Orte zu sehr günstigen Zeiten zu erreichen , wann immer Sie möchten . Sie müssen nicht auf einen Zug oder einen Bus warten. Sie können gehen, wann immer Sie wollen, wie Sie wollen, zu der Zeit , zu der Sie es wollen. Es ging also darum, ein Bedürfnis oder ein Problem zu lösen. Und wie Sie sehen können, löst der zweite Teil, Lösungsprodukt, Probleme. Darin liegen ihre wahren Werte. Wenn Sie das verstehen, können Sie Ihre Rolle als Designer verstehen. Sie lösen die Probleme der Menschen. Du gibst nicht nur, du weißt schon, etwas Nettes zu haben. Du sagst nicht, hey, sieh dir diese coole App an. Viele Leute laden Apps herunter, weil sie cool sind und weil sie ihrem Leben etwas hinzufügen. Aber oft, weißt du, sind die erfolgreichsten Apps Apps, sind die erfolgreichsten Apps Apps die du brauchst, Apps, die ein Problem lösen, das du hast, oder? Denk darüber nach. Du könntest sagen: Hey, Social Media, weißt du, ich bin in den sozialen Medien. Ich bin auf Instagram. Ich bin auf Facebook. Es löst kein Problem. Ich habe kein Problem. Nun ja. Ich meine, es gibt ein Problem. Es besteht ein Bedarf. Es ist notwendig, mit Menschen in Kontakt zu treten, mit ihnen zu sprechen, sich mit ihnen verbunden zu fühlen, sie zu sehen. Und weil alle diese Apps bereits nutzen, haben Sie das Gefühl verpassen, wenn Sie sie nicht nutzen. Es ist also gewissermaßen die Lösung eines Problems. Und wie Sie auf der rechten Seite sehen können, ist dies das Cover eines Buches mit dem Titel The Design of Everyday Things. Und es wurde von Don Norman geschrieben , der allgemein als, Sie wissen schon, quasi als Urvater des UX-Designs auf dem gesamten Gebiet Und das liegt daran, dass er dieses Buch geschrieben hat , in dem die Prinzipien und Richtlinien des UX-Designs in vielerlei Hinsicht detailliert beschrieben Prinzipien und Richtlinien des UX-Designs Und das war ein sehr aufschlussreiches Buch. Ich würde Ihnen empfehlen, es zu lesen, wenn Sie mehr darüber erfahren möchten . Es ist ein Klassiker. Es wird dir keine Tipps zu Figma oder so geben , weil es ziemlich alt ist, aber es wird dir zeigen, was UX-Design ist, worum es geht und, du weißt schon, wie du die Grundprinzipien anwenden kannst Und Sie werden feststellen, dass das Buch zwar sehr alt ist, aber es behandelt dieselben Bedürfnisse und Probleme, die wir heute haben In diesem Buch erörterte er ein sehr interessantes Konzept, das Norman Doors genannt wird. Und in diesem Konzept, das sehr aufschlussreich ist, sprach er darüber, wie viele Türen es auf der Welt gibt, Sie werden wahrscheinlich den Schritt bemerken Sind ziemlich verwirrend. Und das nennt er eine schlechte Tür. Wenn Sie sich dieses Bild hier ansehen, werden Sie zwei verschiedene Türen sehen. Und die Frage ist, welche Tür drücke ich? Und an welcher Tür ziehe ich, okay? Und ich gebe dir ein paar Sekunden, um darüber nachzudenken. Erledigt. Das ist genug Zeit für dich. Im Grunde ist die linke die, die du ziehst, und die rechte ist die Tür, die du drückst. Und du fragst mich vielleicht, woher hast du das gewusst? Und die Antwort ist ganz einfach , weil es durch die Griffe sichtbar ist, richtig? Dort liegt der Schlüssel. Auf der linken Seite haben Sie einen Griff , mit dem Sie ihn leicht halten, umgreifen und zu sich ziehen können, was für die Zugwirkung recht einfach ist. Auf der rechten Seite hast du nicht wirklich einen Griff, und du kannst ihn nicht wirklich auf diese Weise halten. Es ist nicht leicht zu ziehen, aber es ist ziemlich einfach zu drücken, oder? Es geht also um intuitives Design. Und was Don Norman auffiel, ist, dass er und viele andere Menschen auf der Welt dazu neigten, Türen zu verwechseln Sie gehen zu einer Tür, die gedrückt werden soll , und ziehen daran oder umgekehrt, sie soll gezogen werden und sie drücken sie Und sie denken , dass sie dämlich sind. Sie denken, dass sie etwas falsch machen oder dass sie diese Türen ständig verwechseln , und das ist ihre Schuld Und er stellte fest, dass es nicht deine Schuld ist. Es ist die Schuld des Designers. Wer auch immer diese Tür entwickelt und gebaut und geplant hat, dass sie so geplant hat, ist derjenige, der wegen allem Mist gebaut hat, eine Tür sollte die einfachste sein Weißt du, wir haben das vor langer, langer, langer Zeit entdeckt. Wir sollten es inzwischen herausgefunden haben. Sollte nicht so schwer sein. Aber du merkst, nein, es ist immer noch schwer. Du weißt nicht, wann du an eine Tür kommst, du weißt nicht, ob du sie drückst, ziehst oder ob sie sich von selbst öffnet. Manchmal gibt es Hinweise, aber oft ist man nicht wirklich sicher und muss weitermachen, ziehen, draufdrücken, versuchen zu sehen. Und manchmal weiß man nicht, braucht das Kraft, weniger Kraft? Ist es verschlossen? Ist es nicht gesperrt? Und so sprach er darüber und anhand dieser Geschichte, anhand dieses Beispiels, sprach er darüber wie sich gutes Design zeigt. Gutes Design ist leicht zu verstehen und leicht zu erklären. Braucht eigentlich keine Erklärung. Es ist selbsterklärend. Genau wie bei diesen Türen können wir, wenn wir gute Türen entwerfen, den Griff so deutlich machen, dass die Leute verstehen, wann gedrückt und wann gezogen wird Und das ist genau das Gleiche , was wir haben, wenn es um Design geht. Das bringt uns zu einem zweiten Punkt , dem menschenzentrierten Design. Und es ist ein Problemlösungsansatz , der häufig im Prozess-, Produkt-, Service- und Systemdesignmanagement sowie in technischen Frameworks verwendet Service- und Systemdesignmanagement wird, bei denen Problemlösungen entwickelt werden, indem die menschliche Perspektive in alle Schritte des Problemlösungsprozesses einbezogen die menschliche Perspektive in wird. Es sind viele Worte, ich weiß, ich weiß. Lass es uns aufschlüsseln. Was ist menschenzentriertes Design? Es steht der Mensch im Mittelpunkt. Es ist für Menschen konzipiert, für Menschen. Und wissen Sie, hier stellt es Produkte für Roboter her. Wir machen das nicht für seltsame Roboter, die Code verstehen. Wir machen es für Menschen. Machen Sie es also für die Menschen, die Ihre Benutzer sind, verständlicher . Also empathisch Der zweite Punkt ist, das richtige Problem zu lösen. Viele Menschen neigen dazu, beim Bauen über die falschen Dinge nachzudenken. Nein, machen Sie es Ihren Benutzern einfacher . Konzentrieren Sie sich auf das, was sie zu lösen versuchen , auf ihre Probleme und Bedürfnisse. Und es gibt das Sprichwort: Wenn es nicht kaputt ist, repariere es nicht, oder? Repariere nichts, was nicht repariert werden muss. Konzentrieren Sie sich auf die wirklichen Probleme und lösen Sie sie. Dann müssen wir am Ende iterieren. Human Center Design behauptet , dass der Entwurfsprozess iterativ ist, was bedeutet, dass es sich um einen kontinuierlichen Zyklus von Entwerfen und Neugestalten, Denken und Überdenken, Bauen und Umbauen handelt von Entwerfen und Neugestalten, Denken und Überdenken, Bauen und Umbauen , dass der Entwurfsprozess iterativ ist, was bedeutet, dass es sich um einen kontinuierlichen Zyklus von Entwerfen und Neugestalten, Denken und Überdenken, Bauen und Umbauen handelt. Es wird niemals enden. Es gibt nie ein perfektes Produkt, und es sind immer Produkte oder Dienstleistungen , die immer überarbeitet, verbessert werden müssen und so weiter Das ist eine der Säulen. Lassen Sie mich Ihnen einige Beispiele dafür geben, was gutes UX-Design ausmacht und was schlechtes UX-Design ausmacht. Deshalb werden wir den UI-Teil vorerst ignorieren. Wir werden das Aussehen ignorieren, obwohl beide sehr ähnlich aussehen. Nun, welches würdest du bevorzugen? Ketchup-Flasche links oder rechts. Ich hoffe, die meisten Leute haben es auf der rechten Seite gesagt , weil das die richtige Antwort ist Und das liegt daran, dass, falls Sie es nicht wissen, der linke Teil ziemlich schwer zu handhaben ist, die Art und Weise, wie die Flasche geformt ist und nicht nur das, sondern auch das Material der Flasche, die Tatsache, dass es Glas ist, das sich nicht zusammendrücken lässt. Und die Tatsache, dass der Flaschendeckel von oben ist macht es wirklich schwierig, den Ketchup hineinzulegen , weil man die Flasche öffnen , umdrehen und dann aggressiv anfangen muss, weißt du , sie zu schütteln, sodass ein bisschen Ketchup entsteht, und meistens führt das zu Chaos. Das ist ziemlich chaotisch. Aber der auf der rechten Seite, selbsterklärend. Es besteht aus Kunststoff, sodass Sie es zusammendrücken können, und es ist immer nach unten geneigt Es sollte also immer auf dem Deckel nach unten geneigt sein. Und auf diese Weise zieht die Schwerkraft den Ketchup immer nach unten. Und dann haben wir diese Armaturenbretter von Autos. Nochmals, welches bevorzugst du oder welches hat deiner Meinung nach das bessere UX-Design, das linke oder das rechte, und warum? Okay, lass mich dir antworten. Es ist der auf der linken Seite. Lass mich dir sagen warum. Ich sage das nicht nur, weil es mein Favorit ist oder so. Aber wenn Sie darüber nachdenken, die Armaturenbretter, die wir früher hatten oder die wir immer noch haben, sind die Armaturenbretter, die wir früher hatten oder die wir immer noch haben, aber bei älteren Autos, ziemlich simpel Ich meine, nicht sehr. Sie könnten überwältigend aussehen. Es gibt zum Beispiel eine Menge Knöpfe und viele Formen und Symbole. Aber wie Sie sehen können, werden sie zunächst mit einfachen Zahlen oder Symbolen angezeigt , die angeblich leicht zu verstehen sind. Vielleicht brauchst du einen Tag dem du versuchst , sie alle zu verstehen. Du wirst sie testen, du wirst sie unter Druck setzen und verstehen, was sie bewirken. Aber es gibt Knöpfe , die da sind. Sie haben eine bestimmte Funktion. Manche Dinge dreht man nach rechts, manche Dinge dreht man nach links, manche Dinge drückt man, manche Dinge zieht man. Es gibt all diese verschiedenen Interaktionen, richtig? Wenn du fährst und etwas umschalten willst , willst du etwas drücken. Wissen Sie, dass Sie bei Klimaanlagen die Temperatur ändern müssen, indem Sie die Skala drehen , indem Sie den Knopf nach rechts oder links drehen , oder Sie wüssten also, dass dieses Nein für die Temperatur steht. Sie würden es nicht mit einer Radiospieltaste mischen , weil das eine Taste ist, die Sie drücken. Die Art und Weise, wie das Armaturenbrett gestaltet wurde , war also ideal für Fahrer, die sich auf die Mission, die Aktivität des Fahrens konzentrieren und keine Zeit haben, auf das Armaturenbrett zu schauen. In der Zwischenzeit haben neuere Autos, wie das auf der rechten Seite, einen riesigen Wahnsinn. Es ist cool. Es ist nett. Aber es ist ziemlich ablenkend. Es lenkt dich von der Straße ab. Und was noch nerviger ist , dass es so viele Apps, so viele Funktionen hat , was dazu führt, dass Sie sich, Sie wissen schon, alle Optionen ansehen müssen Es gibt keine Tasten , die Ihnen bekannt vorkommen. Sie wissen nicht, wo die Knöpfe sind. Du weißt nicht, wie sie sich anfühlen. Du weißt, du kannst nicht einfach deine Hand da hinlegen ohne genau zu wissen, worauf du drückst. Du musst auf den Bildschirm schauen und die App verlassen, zu einer anderen App gehen, weißt du, sie mit Bluetooth verbinden, um sie mit deinem Telefon zu verbinden. Und all diese Dinge brauchen Zeit und Aufmerksamkeit und bringen dich in Gefahr. Deshalb ist es schlechtes UX-Design. Lassen Sie uns nun ganz schnell die rechts und links vergleichen. Welches? Das sind zwei verschiedene Blogs oder Magazine oder Nachrichtenartikel, Nachrichtensysteme. Der auf der linken Seite ist offensichtlich älter. Aber was Sie sehen können, ist, dass die auf der linken Seite viel schwieriger zu lesen ist, und dafür gibt es viele Gründe. Aber es enthält ein Layout mit vielen Bildern, verschiedenen Größen, verschiedenen Bildern, und sie sind sehr schwer voneinander zu unterscheiden. Sie wissen nicht, was eine Anzeige ist, was ein Nachrichtenartikel ist, was ein Titel ist, was ist, Sie wissen gar nichts, weil sie, wissen Sie , sie haben alle die gleichen Titel, die gleichen Farben, und das ist ziemlich verwirrend und es ist sehr reich an Informationen. Ich meine, wie viele Artikel siehst du dort? 14, mindestens, 15, 16, so etwas in der Art. Aber wenn Sie auf die rechte Seite schauen, sehen Sie etwas, das viel besser organisiert ist. Zuallererst haben Sie all Ihre verschiedenen Kategorien, USA, Welt, Wirtschaft, Kunst, Lifestyle. Sie können also aus ihnen wählen. Ich glaube, das ist dein Menü. Und dann haben Sie einen großen Artikel, der in der Mitte, etwas links, hervorgehoben ist . Und dann hast du 28 Thanksgiving-Rezepte auf der rechten Seite. Sie haben noch einen Artikel unten. Aber du kannst an den Farben, an den Formen, am fett gedruckten Text erkennen , was ein Titel ist? Was ist kein Titel? Und Sie können zum Beispiel sehen, dass sie live in Rot sagen und es heißt vor 32 Minuten. Es ist also ziemlich selbsterklärend. Du verstehst, okay, das ist live. Das war vor 32 Minuten. Es ist nicht zu chaotisch. Es gibt einen leeren weißen Raum. ist also klar, dass der richtige aus vielen Gründen ein Gewinner ist, Es ist also klar, dass der richtige aus vielen Gründen ein Gewinner ist, aber im Grunde ist er in der Lage, eine viel angenehmere Benutzererfahrung zu bieten eine viel angenehmere Benutzererfahrung zu , damit das Auge versteht, wo und was zu klicken ist. Weißt du, und das auf der linken Seite, es sieht so aus, als ob das alles Werbung ist, um ehrlich zu sein. Es sieht so aus, als wären es keine echten Links. Sieht aus, als ob sie wollen, dass ich auf etwas klicke. Sogar die Tatsache, dass es Stock-Fotos sind, die Hälfte davon. Das ist eine Anzeige. Das ist falsch. Das ist nicht wirklich wild. Der auf der rechten Seite ist irgendwie in der Lage, dir mit all den verschiedenen Designelementen ein besseres Gefühl zu geben, nicht das beste, aber ein etwas besseres. Kommen wir nun zum UIUX-Design Lassen Sie mich Ihnen ein wenig das Prozessdesign Thinking vorstellen, bei dem es sich um den Prozess der Erstellung digitaler Produkte durch UIUX-Design handelt Erstellung digitaler Produkte durch UIUX-Design Es umfasst fünf Hauptschritte. Manche Leute definieren es mit anderen Schritten oder anderen Namen. Es gibt verschiedene Denkschulen. Aber lassen Sie uns diese Schritte verwenden. Der erste Schritt ist Empathie. Der erste Schritt besteht darin, zu verstehen, wer Ihre Benutzer sind, sich in sie hineinzuversetzen und weiterzumachen und, Sie wissen schon, zu versuchen, zu verstehen, woher sie kommen, was ihre Probleme sind, was ihre Bedürfnisse sind Der zweite Schritt ist das Definieren. Es geht also darum, das Problem zu definieren , das Sie zu lösen versuchen, die Lösungen zu definieren, die Annahmen zu definieren , die Sie haben. Wissen Sie, was ihnen helfen kann? Was brauchen sie? Warum haben sie ein Problem? Was ist die Ursache dafür und was ist die Lösung und so weiter? Und es geht darum, die Richtung zu definieren, in die Sie als Unternehmen oder als Designer gehen werden. Welche Art von Lösung bieten Sie ihnen an? Richtig? Was ist Ihr Geschäftsmodell? Was oft ist, liegt das nicht nur an Ihnen. Weißt du, du bist in einer Firma. Sie haben bereits ein Geschäftsmodell. Sie haben bereits eine Strategie. Ihr Teil besteht darin, zu verstehen, wie Sie die Probleme des Benutzers am besten lösen können. Nachdem wir die Richtung besser definiert haben, fahren wir mit der Ideenfindung fort Dann tauschen wir Gedanken aus, machen Brainstorming und versuchen zu verstehen, welche Optionen wir verstehen, welche Optionen Ich meine, was können wir tun? Und du machst weiter und wirfst ein paar Ideen herum. Also im vorherigen Teil, als ich sagte, biete eine Lösung, sagst du nicht, dass wir eins, zwei, drei, vier machen werden. Sie geben nur eine allgemeine Richtung vor. Vielleicht sollten wir eine App entwickeln, um, du weißt schon, Menschen dabei zu helfen, Steuern zu zahlen. Aber du weißt nicht wie. Sie wissen nicht, wie die App funktionieren würde. Sie wissen nicht, welchen Umfang sie hat. Sie wissen nicht, wird es eine App sein oder wird es ein Gerät sein, oder ist es ein Service? Vielleicht ist es ein Service. Du rufst jemanden an und kontaktierst ihn. Es geht also darum und dann stirbst du. Das ist der Moment, in dem Sie tatsächlich einige solide Ideen darüber aufschreiben, was Sie tun möchten. Und dann fahren Sie fort und fahren der Wireframing- und Prototyping-Phase Und dort werden Ihre Gedanken zu Papier oder auf den Bildschirm gebracht, und Sie zeichnen, wie sie aussehen sollten , wenn Sie sie tatsächlich zeichnen Wie sollte das App-Erlebnis sein, oder wenn es sich um einen Service handelt, wie sollte der Service funktionieren? Wie sollten wir uns in Bezug auf Marketing positionieren , in Bezug auf was auch immer. Aber auch hier sind all diese Ideen noch nicht abgeschlossen. Nichts wird für immer getan. Durch diesen Prozess erhalten Sie ein genaueres Bild, Sie wissen schon, indem Sie mit Ihren Kollegen sprechen, mit ihnen zusammenarbeiten, indem Sie es Stakeholdern zeigen, Menschen, die engagiert sind. Es könnten Ihre Chefs sein, es könnten Ihre Investoren sein, Ihre Kunden, wer auch immer es ist, es gibt Leute, die daran interessiert sind Sie müssen also irgendwie durch sie und durch Ihre Kollegen und durch Ihre Arbeit zu einer endgültigen Version gelangen Am Anfang ist es nur eine Skizze. Und wenn du dann mehr Bestätigung bekommst, fängst du an, es ein bisschen genauer zu finalisieren Es wird ein richtiges Website-Design, und darum geht es in diesem Kurs mehr oder weniger Es geht mehr um diesen Teil, das Prototyping. Jetzt werden wir natürlich über alle anderen Teile sprechen über alle anderen Teile Prototyping und Drahtrahmen, das sind unsere Schwerpunktthemen Und Sie studieren einen Figma-Kurs, keinen UIUX-Designkurs Und dann haben wir hier Tests. Jetzt zum Testen. ehrlich zu sein, macht das nicht jeder, aber beim Testen geht es darum, weiterzumachen, Ihre Apps echten Benutzern zu zeigen und zu sehen, was sie denken, Feedback zu erhalten. Und wenn Sie mit dem Schritt fertig sind , können Sie ihn wiederholen, okay? Dann kannst du iterieren und wiederholen und so weiter, indem du dich wieder einfühlsam indem du dich wieder Finden Sie Ihre Ziele, definieren Sie sie neu, entwickeln Sie Ideen, mehr Ideen, mehr Funktionen, mehr Geschichten, mehr Abschnitte, was auch immer es Und dann immer wieder Prototypen erstellen, Probleme beheben, Fehler beheben Weißt du, du wirst keinen perfekten Job machen. Es wird immer Dinge geben, an denen man arbeiten kann. Also behalte das immer im Hinterkopf. Im Allgemeinen ist dies der Prozess des Schaffens mit Design Thinking. Auf diese Weise können Sie als UIOX-Designer von Grund auf neu beginnen, von der Empathie bis hin zum Testen, Prototyping und der Prototyping Das kann je nach Team, dem Sie angehören, sehr unterschiedlich aussehen , aber mehr oder weniger sollte es so Ich hoffe, Sie haben ein oder zwei Dinge darüber gelernt, worum es beim UX-Design von Benutzeroberflächen geht. In den kommenden Lektionen werden wir nun ein bisschen mehr über UI sprechen , und was noch wichtiger ist, wir werden viel mehr über praktische Lektionen, Übungsstunden und reale Projekte darüber sprechen , was Figma ist und wie man es benutzt Was sind die Tools, was sind die Systeme, die Funktionen und so weiter Vielen Dank fürs Zuhören Wir sehen uns in den nächsten Lektionen. 4. Komponentenarchitektur: Hallo und willkommen zu einer weiteren Lektion des Figma-Kurses für Fortgeschrittene In dieser Lektion werden wir nun alles über Komponenten besprechen Falls Sie noch nichts darüber erfahren haben, werde ich es ganz einfach erklären . Komponenten sind Designelemente, die wir auf Figma erstellen und die wir immer wieder verwenden dürfen Und wir haben im Grunde eine Beziehung zwischen einer übergeordneten Komponente und einer untergeordneten Komponente Es ist im Grunde ein Element, das wir kopieren und in mehrere Instanzen einfügen können . Aber es gibt immer die Originalversion. Und sobald Sie die Originalversion geändert haben, kann sie alle anderen Instanzen ändern. Das heißt, wenn Sie eine Schaltfläche haben und sich später dafür entscheiden, die Schaltfläche gelb statt grün zu machen die Schaltfläche gelb statt , müssen Sie das nur einmal tun. Sie müssen die Schaltfläche nicht auf jeder einzelnen Seite ändern. Das ist nur ein Beispiel und Sie werden es im weiteren Verlauf besser verstehen. Apropos Knöpfe, nehmen wir das vorerst als Beispiel. Lassen Sie uns weitermachen und sehr schnell eine Schaltfläche erstellen. Ich hole mir einfach das Textwerkzeug und klicke einmal und ich werde die Schaltfläche schreiben. Jetzt haben wir ein Textelement. Ich mache daraus einen Rahmen, also halte ich Shift und A gedrückt. Das macht es im Grunde zu einem Rahmen mit automatischem Layout. Es sind also bereits einige Werte eingegeben. Wir können diese Werte nach unseren eigenen Vorlieben ändern . Lass es uns ausfüllen. Ich werde es füllen. Ich werde etwas Blau draus machen. Könnte es auch lila sein? Damit kein Problem. Sie müssen nur sicherstellen , dass der Text lesbar ist, dass Sie den Text lesen können, ob er weiß ist oder ob er schwarz sein sollte, es liegt an Ihnen Jetzt können wir am Anfang mit einigen Werten herumspielen Anfang mit einigen Werten Wir können die Polsterung rechts und links etwas größer machen und es dann von oben und unten etwas enger und kleiner Dann können wir es auch etwas runder machen. Zehn oder acht. Es liegt wirklich an uns. Das ist momentan ein Button. Aber normalerweise hätten wir, wie gesagt, gerne eine Komponente, wenn es um Design geht . Also eine Originalversion, die wir kontrollieren können, oder alle anderen Versionen über. Hier haben wir es Frame One genannt. Du gehst hierher und klickst auf Komponente erstellen. Nun, das ist angeblich eine Komponente, und sie heißt Frame One. Wir werden es einfach Button nennen. Und jetzt, wo wir diesen Button haben, ist er großartig. Es ist cool, aber wie sieht diese Schaltfläche mit dem Haver-Effekt aus oder wie sieht sie mit einem Pfeil aus, mit einem Emoji mit vielen Dingen Wir brauchen verschiedene Varianten dieses Buttons. Die Art und Weise, wie wir das tun könnten besteht darin, eine Variante zu erstellen. Wir klicken hier und kommen zu diesem Button hier. Es heißt Variante hinzufügen. einfach darauf klicken, fügen Sie eine weitere Variante hinzu, im Grunde eine andere Version oder eine Variante davon. Das ist im Originalskript. Das sind die Originale, sobald Sie diese Schaltfläche, ich meine, diese Version davon nehmen , sie kopieren , C drücken und dann einfügen Nun, das ist eine untergeordnete Komponente. Sie wissen das wahrscheinlich schon, wenn Sie mit Figma vertraut sind Sie können sehen, dass das hier ein ausgehöhltes Quadrat ist. Das bedeutet, dass dies im Grunde die untergeordnete Komponente ist. Dann haben wir hier die Hauptkomponente. Wie Sie hier sehen können, wird sich die Farbe auch hier ändern, wenn wir die Farbe ändern. Aber das ist eine zweite Variante, also hat das nichts damit zu tun Das ist anders. So funktioniert es also im Grunde . Sie können also den Originalknopf haben und er wirkt sich auf alle anderen Varianten aus. Sie können mehrere Kopien haben, und sie werden alle geändert. Okay? Jetzt, wo wir das aufgeschrieben haben, verstehen wir es. Lass uns weitermachen und unsere Arbeit weitermachen. Deshalb möchten wir hier eine andere Variante erstellen. Ich werde nicht auf die Details des Prototypings eingehen, also werde ich das vorerst beiseite legen Aber wenn wir einen Hover-Effekt haben, ist er normalerweise etwas dunkler es ganz einfach zu machen, können Sie eine schwarze Farbe von 20 oder 30% hinzufügen, oder Sie können es auch heller machen Das ist auch eine Möglichkeit. Alternativ können Sie auch einfach die Farbe von hier aus ändern. Manchmal können Sie es mehr an Ihre Vorlieben diesen Schaltflächen mehr an Ihre Vorlieben anpassen, da es einfacher ist, den genauen Farbton auszuwählen, den Sie möchten. Vielleicht könnte ich das machen, vielleicht könnte ich es sogar mehr in Richtung Blau machen. Es könnte etwas blauer werden. Das liegt ganz bei mir. Nachdem ich diese Hover-Variante erstellt habe, kann ich auch eine Variationsvariante erstellen bei der wir darauf geklickt haben Wir haben nicht nur den Mauszeiger bewegt, sondern auch darauf geklickt. Du kannst weitermachen und eine weitere Variante erstellen oder einfach hier auf das Plus klicken, und dann könnten wir das noch viel dunkler machen Wie Sie sehen können, ist dies eine sehr vereinfachte Version. Wir könnten Schatten hinzufügen, wir könnten Grenzen hinzufügen. Es liegt ganz bei dir, wie du das stilisieren willst. Aber ich mache nur verschiedene Varianten halte es aber für Ihr Verständnis einfach Eine andere Variante, die wir erstellen könnten, ist die aktive Schaltfläche. Das ist also ziemlich üblich. Das heißt also im Grunde , dass diese Taste nicht funktioniert. Wenn Sie es also mit dem Lichtmodus zu tun haben, würden Sie dieses Grau grundsätzlich beibehalten, nur um zu zeigen, dass es nicht funktioniert. Also nur um dir zu zeigen , wie es aussehen würde. Ich werde all diese kopieren, kopieren und ich werde sie hier einfügen. Also so würde es im Grunde aussehen, und Sie können sehen, dass das graue Bild grau aussieht, das inaktiv aussieht, während dieses mit Farbe gefüllt ist und dann mit dem Mauszeiger darauf gezeigt wird und dieses gedrückt wird Man kann also die Bedeutungen anhand der Farben erkennen. Und hier ist die Lesbarkeit vielleicht nicht so wichtig, weil du diesen Button sowieso nicht wählen kannst Aber wir können weitermachen und das zum Beispiel, weißt du, zu einem dunkleren Grau Es ist also etwas besser lesbar und wir könnten den Hintergrund auch etwas heller machen Ja, das sieht eher inaktiv aus. Nun, nur als Hinweis, Sie können die untergeordnete Komponente ändern , sodass Sie sagen können: Wissen Sie was? Ich mache daraus ein gelbes, okay? Und was passiert, wenn Sie das tun, wenn Sie die übergeordnete Komponente ändern, wird es nichts ändern. Im Grunde haben Sie diese Eigenschaft also überschrieben. Sie haben entschieden, dass diese Eigenschaft, die Farbe, jetzt von der Hauptkomponente getrennt wird von der Hauptkomponente getrennt Und jetzt ist es wie ein legitimes Kind. Es wird dem Elternteil nicht folgen oder ihm weiter folgen, es wird seinen eigenen Weg gehen. Wenn es also um den Text geht, wird es ihm immer noch folgen. Wenn es um die Polsterung geht, können wir die Polsterung ändern, sie folgt ihr immer noch Es ist nur die Qualität , die man ändert. Seien Sie also vorsichtig. Achte darauf, dass du deine Eigenschaften nicht änderst , ohne es zu wissen. Versuche sie hier zu ändern, denn wie gesagt, das sollte der Originaltext sein, das Originalwerk, und dann sollte das einfach darauf folgen. Andernfalls werden Sie mehrere Variationen mit unterschiedlichen Farben haben mehrere Variationen mit unterschiedlichen Farben und das wird die Dinge durcheinander bringen. Komponenten werden normalerweise verwendet, um Ordnung zu halten. Sie werden verwendet, damit Sie Überblick darüber behalten können , was Sie tun. Sie möchten nicht, dass der Button eine Million Farben hat. Nein, Sie möchten die Originale haben und dann werden sie in Ihrem Design auf unterschiedliche Weise verwendet Ich denke, soweit ist es klar, aber wir müssen verstehen, okay, wir haben all diese Versionen Wir müssen jetzt verstehen, was , wenn wir sie erweitern wollen. Normalerweise haben Sie eine primäre Taste, und dann haben Sie von der primären Taste aus vielleicht eine andere Farbe. Lass uns weitermachen und das tun. Ich werde sie alle kopieren , kopieren und einfügen. Ich füge sie in diesen Bereich ein. Das heißt, sie sind auch Varianten. Sie können Variante fünf, sechs, sieben, acht sehen. Jetzt werde ich die Farbe ändern. Ich werde sagen, weißt du was? Etwas Gelb ist toll. Aber wenn wir Gelb machen, müssen wir Schwarz für den Knopf machen. Nett. Mal sehen, wie es hier aussieht und nicht schlecht aussieht. Jetzt sollte das nachziehen. Ich werde dieses Gelb wählen. Ich werde es schaffen und es vielleicht ein bisschen in Richtung Orange bringen. Das ist die Schattierung. Wie ich schon sagte, es liegt an dir. Du kannst es leichter machen, du kannst es machen. Du kannst es machen, was du willst, es liegt an dir und ich werde es schwarz machen. Vielleicht kannst du es ändern, es viel heller machen und es dann auch heller machen. Dann wähle ich hier dieselbe Farbe, mache sie noch etwas dunkler, orangefarbener. Wie gesagt, unsere heutige Arbeit in dieser Lektion besteht nicht darin, die Wechselwirkung zu sehen, wir versuchen nur, die Komponente herauszufinden Dann könnte es hier vielleicht auch auf die gleiche Weise bewertet werden Es muss nicht so besonders sein. Wir müssen nicht zwischen diesen beiden unterscheiden . Es liegt an uns. Aber jetzt haben wir ein Problem, weil das Variante acht heißt , das heißt Variante sieben, sechs, ich weiß nicht, sie sind überall. Wir müssen ein System finden , um sie im Grunde zu benennen. Verstehe sie. Das ist also der Fall, wenn es darum geht, Ihre Komponente zu organisieren, denn wenn Sie ständig expandieren, haben Sie verschiedene Varianten und so weiter, und Sie müssen den Überblick behalten Folgendes werde ich tun. Ich werde sagen, das sind die primären Tasten und das sind die sekundären. Was Sie tun werden, ist all diese auszuwählen, Sie werden für Eigenschaft eins schreiben, zweitrangig. Und dann die Immobilie, du wirst Typ sagen. Das ist die Art der Taste. Diese sind zweitrangig. Es wird Ihnen sagen, dass die Eigenschaften und Werte dieser Varianten widersprüchlich sind Ändern Sie die auf diese Variante angewendeten Werte , um dieses Problem zu beheben Das Problem ist, dass all diese Faktoren sekundär, sekundär, sekundär sind. Figma versteht es nicht und sagt: Hey, du kannst sie nicht alle zweitrangig machen, aber wir werden das in einer Sekunde lösen Nennen wir sie jetzt alle primär. Primär. Sie sehen, dieser Variablentyp ist primär und alle diese sind sekundär. Aber es gibt auch einen Unterschied. Ich meine, das sind die Hover-Zustände, und das sind die gedrückten Zustände, und das sind die inaktiven Zustände, und das sind die aktiven Zustände Wie unterscheiden wir diese also? Nun, wir können es wie folgt machen. Wir können also herkommen. Ich meine, so mache ich das. Es gibt wahrscheinlich verschiedene Möglichkeiten, das zu tun. Ich kann zu dem Namen gehen. Ich werde ein Komma hinzufügen und den Status schreiben Aktiv. Und das wird also aktiv sein. Dann werde ich beide auswählen und wieder aktiv schreiben. Ich werde diese auswählen und ich werde Hubbard schreiben, diese und Write Press, und diese, ich werde sie als inaktiv bezeichnen. Okay. Also, jetzt verschwindet diese Benachrichtigung , weil die FIMA es herausgefunden hat, wir haben das unter Kontrolle, wir verstehen die Differenzierung und Sie können sehen, dass die Namen jetzt alle unterschiedlich sind Keiner der Namen wird wiederholt, oder? Und was cool ist, ist, wenn Sie hier zur untergeordneten Komponente kommen , können Sie sie ändern. Sie können ändern, was Sie möchten, ob es aktiv, mit der Maus bewegt, gedrückt oder inaktiv Sie haben Zugriff auf all diese Varianten und können sie aus diesen Drop-down-Menüs auswählen Stimmt das? So können Sie grundsätzlich Ihre Komponenten innerhalb einer Variante organisieren . So können Sie also im Grunde Ihre Varianz innerhalb einer Komponente organisieren Jetzt steckt mehr dahinter. Wie ich bereits erwähnt habe, kommt vielleicht jemand und sagt: Hey, ich möchte, weißt du, einen Pfeil hinzufügen. Das wäre wirklich nett, aber nicht immer. Manchmal möchte ich einen Pfeil haben. Manchmal will ich keinen Pfeil haben, oder? Manchmal, weißt du, die Pfeile auf der rechten Seite, manchmal auf der linken Seite. Mal sehen. Okay? Lassen Sie uns also zunächst einen sehr simplen Pfeil erstellen Also habe ich hier einfach das Linienwerkzeug ausgewählt, und ich werde die Linie verlängern und ich kann hierher kommen und Linienpfeil sagen und auf der anderen Seite werde ich es umdrehen Es ist also sehr simpel und passt genau dazu. Ich werde dieses Control X herausschneiden und das hier hinzufügen Ziemlich nett, oder? Nun, lassen Sie uns das rückgängig machen. Ich möchte es mit all diesen machen. Ich werde sie alle auswählen und die Paste kontrollieren. Jetzt ist es hier überall eingeklebt. Aber es ist ein bisschen chaotisch. Wir müssen das herausfinden. Wir müssen es organisieren. Ich werde sie einfach wegbewegen und ich werde diesen Pfeil wählen und diesen und diesen und diesen. Ich werde sie tatsächlich machen, nicht diesen. Ich werde diesen wählen, diesen, diesen, ich werde sie weiß machen, nur damit sie passen. Nun, diese, ich werde ihnen die Farbe dieses dunklen Graus geben . Da haben wir's. Ordnung. Jetzt können wir auch andere Dinge anpassen. Ich meine, der Abstand zwischen ihnen könnte etwas kleiner sein, vielleicht vier, und ich denke, das ist gut genug. Aber wie wir bereits erwähnt haben, wollen wir nicht , dass das ständig passiert. Wir wollen nicht, dass es immer dieses kleine Ding gibt. Was können wir dagegen tun? Wir wollen nicht, dass es immer einen Pfeil hat. Hier ist ein netter kleiner Trick. Wähle den Pfeil. Wir haben gerade auf den Pfeil geklickt Und dann können wir weitermachen und auf diese kleine Schaltfläche klicken, die besagt, Variableneigenschaft anwenden, und dann auf das Plus klicken und es wird eine Eigenschaft namens Zeile zwei anzeigen hinzugefügt eine Eigenschaft namens Zeile zwei anzeigen Ich werde nur dafür sorgen, dass es einen Fehler anzeigt. Im Moment ist es auf wahr gesetzt, aber ich werde weitermachen und es falsch machen. Ich werde die Immobilie erstellen. Wie Sie sehen können, ist jetzt, was passiert ist, dass es keinen Pfeil mehr gibt. Hier ist kein Pfeil verfügbar, aber er befindet sich immer noch innerhalb des Elements. Es ist nur so, dass Sie umschalten müssen , ob es angezeigt werden soll oder nicht Ich zeige dir, wo es ist. Es ist genau hier. Jetzt haben wir einen Schalter namens Pfeil anzeigen. Wenn wir darauf klicken, ist es da. Wenn wir es entfernen, ist es nicht da. Aber wir haben ein Problem , weil es nur in dieser Variante verfügbar ist, nicht in den anderen. Was wir dagegen tun können, ist, dass wir hierher kommen können, wir können dies auswählen und dann können wir die Variable hier hinzufügen und Sie können sehen, dass sie bereits in den Eigenschaften enthalten ist. Du kannst sie einfach hier anklicken. Ich werde ausspülen und wiederholen. Ich werde hier alle Pfeile auswählen. Und ich werde ihnen dasselbe Eigentum geben. Hier klicken, Pfeil anzeigen, falsch. Jetzt haben alle diesen Schalter. Sie können ihnen einen Pfeil hinzufügen, wenn Sie möchten, oder Sie können ihn entfernen Jetzt passen wir unsere Schaltflächen wirklich in eine Richtung an , die mir wirklich gefällt Wir können noch einen Schritt weiter gehen. Was können wir tun? Nun, wir können sie kopieren, sie alle einfügen, sie hier ablegen. Aber was wir tun werden , ist Ghost-Buttons zu machen . Die Ghost-Buttons sind im Grunde genommen Schaltflächen, die nur Ränder haben. Wir kopieren diesen Hex-Code dieser Farbe, entfernen ihn und machen es hier, einen Strich, spülen und wiederholen machen einfach dasselbe für die anderen Varianten oder es liegt an Ihnen. Sie können es anpassen, wie Sie möchten. Weil das der Hover ist, könnte es sein, dass es eine Geistertaste ist und wenn Sie dann mit der Maus darauf zeigen, wird sie gefüllt, und wenn Sie dann darauf drücken, wird es so, es liegt ganz bei Ihnen, aber wir können die inaktive Version ändern Also einfach so. Wir werden hier dasselbe tun, ich werde das kopieren. Setzen Sie den Strich hier ein und das Gleiche hier. Kopiere den Hex-Code und füge ihn in den Strich ein. Jetzt haben wir sogenannte Ghost-Buttons und sie haben ihre eigene Hover-Taste und eine aktive Variante Was wir tun werden, ist etwas Ähnliches zu tun Also machen wir mit dem Namen weiter und klicken auf Komma und dann sagen wir , dass Ghost gleich Ja ist Wir werden all diese hier und all diese hier auswählen hier und all diese hier Wenn Sie die Umschalttaste gedrückt halten, können Sie viele, ich meine, viele Elemente gleichzeitig auswählen , und wir werden Geister-Ja sagen, und wir werden diese und diese auswählen und Nein schreiben. Passen Sie jetzt auf. Wenn Sie Nein mit einem N oder einem O oder so schreiben, wird es als ein anderer Wert angezeigt. Stellen Sie sicher, dass Sie es auf die gleiche Weise schreiben. Wenn wir jetzt hierher kommen, werden Sie sehen, dass der Geist auch zu einer Umschalttaste geworden Sie können es ein- oder ausschalten, ein- oder ausschalten. Bei jeder kleinen Variante können Sie sie zu Ghost-Buttons machen oder nicht Aber du kannst unseren Fehler hier sehen. Wir haben das zu einem Ghost-Button gemacht, aber der Text ist weiß. Wir müssen das reparieren. Das können wir tun, wenn wir herkommen, wir können es schwarz machen. Wir können den Text schwarz machen oder wir können ihn lila machen. Lass uns jetzt sehen. Da haben wir's. Einfach so. Jetzt haben wir gelernt, nicht nur eine Komponente, sondern viele Varianten derselben Komponente zu erstellen . Wir lernen, Hover-Versionen zu erstellen. Ich meine, Hover-Varianten, wir lernen, wie man eine Varianz mit gedrückter Varianz inaktiv macht gedrückter Varianz Wir lernen, Ghost-Varianten zu erstellen . Wenn du aufpasst, ist das ein bisschen wie eine Tabelle, und ich kann es dir beweisen. Im Grunde sind dies die aktiven Versionen. Das könnte es dir leichter machen. Bei den aktiven Varianten hier haben wir den Hover, Varianz, und hier haben wir die gedrückte Varianz und Es ist im Grunde eine Tabelle mit Spalten und Zeilen und wir können hier dasselbe tun Hier haben wir Primary, und dann ist Primary Ghost der nächste. Ich werde einfach P Ghost schreiben und dann Secondary und dann S Ghost. Und so weiter und so fort. Sie können hier weiterhin viele verschiedene Variablen erstellen, um sicherzustellen, dass Ihre Schaltflächen ein anderes Aussehen und unterschiedliche Aspekte haben . Auf diese Weise können Sie beim Entwerfen nicht etwas Zeit sparen, anstatt darüber nachzudenken, welche Farbe das sein soll. Welche Art von Prototyp-Interaktion sollte ich haben? Sollte es ein Geist sein oder kein Geist? Nein, das musst du nicht tun. Sie haben bereits alle möglichen Varianten in Ihrem Design Ich weiß, das mag nach viel aussehen, aber das liegt nicht daran, dass es sich dabei um Hover-Status, Press-Status und Aktivstatus usw. Es sieht also nach einer Menge aus, ist es aber nicht wirklich. Also behalte das im Hinterkopf. Jetzt haben wir noch eine Sache zu besprechen. Diese Sache ist ziemlich interessant. Es heißt verschachtelte Komponenten. Jetzt sind verschachtelte Komponenten im Grunde Komponenten innerhalb von Komponenten. Wie funktioniert das? Nun, lassen Sie mich das ein wenig klarstellen. Was wir tun können, ist zu sagen, weißt du, naja, manchmal hätte ich gern einen Pfeil, oder? Aber manchmal hätte ich gerne ein anderes Element. Vielleicht könnte es etwas anderes sein als ein Pfeil oder es könnte ein Pfeil nach rechts sein , nach oben, nach unten. Es liegt an mir. Es könnte eine Ikone sein. Es könnten viele verschiedene Dinge sein. Deshalb möchten wir hier einige Symbole hinzufügen. Wie gehen wir dabei vor? Nun, wir können weitermachen und nach einigen Plugins suchen. Es gibt also bereits ein Plugin namens Material Symbols, das von Google bereitgestellt wird. Es hilft uns also, einfach ihre grundlegenden Symbole zu bekommen, und ja, einfach sehr einfache Dinge. Was wir also tun können, ist, ein paar von ihnen hier abzuholen. Ich werde einfach einige von ihnen auswählen. Vielleicht könnten wir ein Plus-Symbol haben. Ähm, wir könnten ein Kamerasymbol haben und lass uns ein Kontosymbol haben. Ich weiß, dass du sie nicht sehen kannst , weil sie eine andere Farbe haben. Also werde ich weitermachen und sie ein bisschen kleiner machen. Mal sehen, wie sie hier aussehen. Ja, ich denke, das ist gut genug. Ich werde weitermachen und einen Rahmen in ihrer Größe erstellen . Ich werde ihm eine Farbe geben, vielleicht vorerst rot. Ich mache daraus eine Komponente und füge das hinzu, achte darauf, dass es vertikal und horizontal zentriert ist. Es ist nicht sehr zentriert, aber das ist okay. Wenn Sie es mit sehr kleinen Elementen zu tun haben, ist es schwierig, sie zu zentrieren. Machen Sie sich darüber keine Sorgen. Wir können jetzt eine weitere Variante davon erstellen. Statt dieses Plus werde ich es löschen. Statt dieses Plus nehme ich dieses Bild, diese Kamera und wir fügen ein weiteres hinzu und machen das Gleiche. Anstelle des Plus werde ich es komplett löschen und dann dieses Kontosymbol hinzufügen und dann dieses hier hinzufügen, es einfügen Bb. Jetzt brauchte ich nur noch das Rot, damit ich die Farbe richtig sehen kann und ich den Rahmen sehen kann, aber ich brauche es nicht mehr, also werde ich einfach die rote Farbe entfernen. Jetzt können wir dieses Symbol oder diese Glyphe oder wie auch immer Sie es nennen möchten, nennen Dann können wir das herbringen. Und füge es der Schaltfläche hinzu. Einfach so haben wir ein Symbol in der Schaltfläche. Jetzt möchte ich es allen auf einmal hinzufügen. Ich werde es einfach kopieren und ich werde alle auswählen und ich werde es einfügen. Während ich das mache, werde ich, unmittelbar bevor ich etwas tue, weitermachen und von hier aus wählen. Eigenschaft anwenden, nicht Pfeil anzeigen, es wird das Symbol anzeigen. Symbol anzeigen. Vorerst lasse ich es für den Moment bei der Wahrheit stehen. Dann kann ich weitermachen und es anpassen. Hier ist der Knopf schwarz, also sollte er schwarz sein und hier dasselbe. Alle Tasten hier sind schwarz, die Symbole sollten den Tasten folgen. Es ist keine Regel, aber ich denke, es ist gut, sie zu befolgen. Die Umschalttaste gedrückt halten und alle auswählen. Hier werde ich den Code kopieren. Jetzt, wo alle Farben sortiert sind, obwohl die Schaltflächen fehl am Platz sind, mache ich weiter und wähle dieses Plus und ich werde hier drüben klicken, passende Ebenen auswählen und es wird alle Pluspunkte auswählen, alle Symbole in diesen Varianten Dann haben wir dieses Show-Symbol, wir können sehen, dass es das Symbol zeigt Jetzt, wo ich sie alle ausgewählt habe, klicke ich hier, gehe zur Eigenschaft und mache es falsch, es wird nicht automatisch das Symbol angezeigt. Das heißt, wenn ich möchte, kann ich einen Pfeil oder ein Symbol anzeigen. Was noch cooler an dem ist, was wir mit diesem verschachtelten Element gemacht haben, ist, dass wir ein Element, eine Symbolkomponente, in die Schaltflächenkomponenten eingefügt haben. Jetzt kann ich das wählen Ich kann das hier wählen und ich kann hier gehen und die Variante ändern. Ich kann ein anderes Symbol daraus machen. Hier könnte es ein Bild hochladen, hier könnte es einloggen oder ein Konto erstellen. Hier könnte es ein Lesezeichen sein. Jetzt haben wir viele Symbole, die wir verwenden können , oder wir können sie einfach löschen oder ausblenden. Eine Sache, die Sie wissen sollten ist eine wichtige Sache, dass wir sie kennzeichnen müssen. Wenn wir hierher kommen, können wir Typ sagen und wir können sagen, das ist ad oder plus. Hier kannst du Kamera, Mitglied oder Nutzer sagen . Und bookmarken. Jetzt ist es viel einfacher zu erkennen , welches Symbol Sie genau verwenden, wenn Sie diese Liste durchgehen Vor allem, wenn Sie eine große Bibliothek haben und viele Icons haben, ist das wirklich praktisch, weil Sie verstehen können: Okay, das ist ein das wirklich praktisch Lesezeichen, das ist ein Benutzer, anstatt darauf klicken zu müssen und zu sehen, was Variante Nummer 27 ist Okay? Also so funktioniert es im Grunde mit diesen verschachtelten Elementen Um es noch einmal zusammenzufassen Wir haben mit einer Schaltfläche begonnen, nur einer Komponente, und dann haben wir verschiedene Varianten davon erstellt, also Variante mit der Maus bewegen, Variante drücken und inaktive Variante Von dort aus haben wir eine sekundäre Variante erstellt und dann angefangen, die Namenskonventionen zu lernen, also, wie man verschiedene Eigenschaften erstellt Also haben wir zuerst mit dem Typ angefangen, also primär und sekundär. Und dann haben wir alle Statustypen benannt, also aktiv, die Maus gedrückt und aktiv Und dann haben wir auch die Pfeileigenschaft eingerichtet. Jetzt konnten wir also eine Eigenschaft einrichten und dafür sorgen, dass sie am Anfang versteckt oder vielleicht wieder eingeblendet wird Es liegt ganz bei Ihnen und Sie haben immer die Möglichkeit, es ein- oder auszuschalten Aber ich behalte es gerne so, dass du am Anfang nur eine Schaltfläche hast, nichts, keine Symbole, keine Fehler, nichts Du kannst das später hinzufügen, wenn du willst, aber es liegt an dir. Dann haben wir gelernt, wie man verschachtelte Komponenten erstellt. Erstellen Sie also im Grunde Emojis als Beispiel, Emojis, Symbole, Glyphen, was auch immer Sie wollen, und Sie können sie zu Ihrer Schaltfläche hinzufügen, und dann können Sie sie ein- oder ausschalten, und dann können Sie die Art des Symbols ändern, das Sie haben So einfach ist das. Das Schöne ist, wenn Interaktionen zwischen diesen Tasten gibt, wenn diese Taste tatsächlich einen Hover-Effekt hat , einen Druckeffekt und Sie das einrichten können, und das werden wir in den nächsten Lektionen sehen, dann behält sie dieselben Eigenschaften Es wird dasselbe Emoji und dasselbe Symbol haben, weil wir es hier so eingerichtet haben , dass es ein Symbol hat In der Hover-Variante wird es also auch dasselbe Symbol haben In der Variante mit gedrückter Taste wird es dasselbe Symbol haben Und so weiter und so fort. Auf diese Weise lässt sich am einfachsten erklären, wie Komponenten funktionieren. Aber wenn du das verstehst , wirst du ein Meister sein. Sie werden in der Lage sein, Komponenten reibungslos, ohne Reibung und ohne Probleme zu erstellen . Aber das Wichtigste ist, dass Sie darauf achten, sauber zu arbeiten , denn wenn Sie ein Designsystem erstellen, eine Designdatei auf Figma erstellen, egal wie erstellen, eine Designdatei auf Figma erstellen, groß oder klein sie ist, kann es sehr schnell chaotisch werden Deshalb ist es immer wichtig, Ihre Eigenschaften, Ihre Schaltflächen, sauber und klar zu definieren, denn das hilft Ihnen nicht nur beim Entwerfen, sondern hilft auch den Entwicklern, die Ihr Design übernehmen und in die Realität umsetzen werden . Deshalb werden wir in den nächsten Lektionen etwas mehr über Komponenten sprechen , aber das wird mehr im Hintergrund sein. Bisher sollten Sie über alle Kenntnisse verfügen , die Sie zum Erstellen von Komponenten benötigen. Mit diesen gibt es jetzt viel mehr Möglichkeiten. Sie können Effekte erzeugen , d. h. Sie können viele verschiedene Varianten mit unterschiedlichen Variablen usw. erstellen . Also mach weiter und probiere es aus. Ich hoffe, du lernst etwas und wir sehen uns in den nächsten Lektionen. 5. Variablen und Modi: Hallo und willkommen zu einer weiteren Lektion des Figma-Kurses für Fortgeschrittene In dieser Lektion werden wir über Variablen, Modi und Stile sprechen Variablen, Modi und Stile Das sind alles verschiedene Konzepte, die wir sprechen werden und von denen Sie vielleicht schon gehört haben. Sie existieren auch in der Entwicklungswelt. Wenn Sie also einen technischen Hintergrund haben oder sich ein wenig mit Programmieren auskennen, dann haben Sie wahrscheinlich schon von Komponenten oder Tokens und Variablen gehört . Sie wissen, wie sie miteinander interagieren. Das ist im Grunde das, was wir heute hier tun. Um das zu erklären, sind sehr einfache Variablen Dinge, bei denen es sich nicht um Konstanten Sie ändern sich. Es könnte also eine Zahl sein, es könnte eine Zahl sein. Einmal ist diese Zahl zehn, einmal 20, einmal 30. Um Ihnen ein Beispiel zu geben Ihr Alter ist eine Variable, die sich jedes Jahr ändert, oder? Es kann sich also jedes Jahr ändern, dass Sie zuerst eins, dann zwei und dann drei Jahre alt sind, bis Sie in den Zwanzigern, Dreißigern sind. Es ändert sich ständig mit Ihnen und es hängt von anderen Umständen ab, Es ändert sich ständig mit Ihnen und es hängt von wie der Zeit Das Gleiche gilt hier für Figma, es ist ein bisschen anders Wir haben also mehrere verschiedene Variablentypen. Der Weg, auf sie zuzugreifen, besteht darin , alles abzuwählen und hier zu Variablen zu wechseln Klicken Sie hier und Sie werden feststellen , dass Sie keine Variablen in Ihrer Sammlung haben Fahren Sie einfach fort und klicken Sie auf Erstellen. Dann werden Sie sehen, dass es diese vier verschiedenen Typen, Farbvariablen, gibt. Sie können also eine Variable haben , die eine bestimmte Farbe hat. Sie haben hier also Lila, Sie haben Gelb, Sie haben eine andere Farbe, eine Zahl, die sich ändert, wie wir zum Beispiel über das Alter gesprochen haben , oder es könnte eine Zeichenfolge sein. Zeichenketten könnten zum Beispiel ein Text sein, und Boolean ist etwas Fortgeschritteneres, also werden wir das für später behalten Lassen Sie uns mit Farbe beginnen, da ich denke, dass dies die praktischste Variable ist , die Sie in Figma verwenden können, und sie ist auch am einfachsten Wichtigste zuerst: Dies ist ein Design, das ich schon einmal gemacht habe, und es ist nur ein Beispiel Es ist kein echtes Design für eine echte App, aber wir können es für unsere Zwecke verwenden. Das Erste, was Sie hier sehen ist, dass es ein bestimmtes Farbschema gibt. Sie haben hier die Farbe Lila. Es gibt eine hellere Version, eine dunklere Version, es gibt einige Farbverläufe Es gibt auch Gelb und hier gibt es diese Farben. Die wichtigste Farbe, die wir hier haben, ist die Primärfarbe, die lila ist. Man könnte sie primär nennen, man könnte sie lila nennen. Es liegt wirklich an dir, aber ich behalte die Dinge gerne primär sekundär, ich würde sie gerne so nennen, nur damit es übersichtlicher ist. Wir können weitermachen und es von hier aus auswählen und wir können diese Primarstufe wählen. Im Moment haben wir das als Variable. Wir können weitermachen und ein weiteres Licht erzeugen, man könnte es Primärlicht nennen. Das ist also die leichtere Version dieser Primärquelle, und dann können wir sie hier auswählen. Wir können diese wählen. Also, das ist jetzt die primäre leichtere Version, okay? Wir können eine sekundäre erstellen. Die sekundäre Variable ist also Gelb. Nun, weißt du, wir wählen es einfach mehr oder weniger zufällig aus, aber wir können zum Beispiel dieses wählen , das wäre genauer. Und wir können auch eine dunklere Version haben, zweitrangig, weißt du, es hängt im Grunde davon ab, was du hier siehst. Hier sehe ich, dass es hier eine dunklere Version gibt, also klicke ich einfach auf I und wähle sie mit dem Augentropfen-Werkzeug aus. Wir können es auch so machen oder wir können es so machen, dass Sie primäres Licht und sekundäres Dunkel sehen können. Wir können es aufschalten, es sowohl primär als auch dunkel und sekundär dunkel machen . Es liegt an dir, wie du das machen willst. Wir können es jetzt machen. Das könnte unsere Hauptversion sein und das ist die dunkle Version davon. Jetzt haben wir das herausgefunden. Wir können viel mehr tun. Wir können zum Beispiel Hintergrundinformationen erstellen. Das ist ein guter. Hintergrund, wo du einfach BG schreiben und den Hintergrund hier auswählen kannst. Es ist weiß, einfach genug, oder? Jetzt haben wir also diese Variablen. Nun, wie verwenden wir diese? Nun, Sie müssen die Farben hier mit diesen Variablen verbinden. Der Weg, dies zu tun , besteht darin, das Element auszuwählen. Komm her und anstatt eine normale Füllung zu wählen, klickst du auf diese vier kleinen Kreise, dann wählst du die Variable aus, die hier primär dunkel ist. Klicke einfach darauf. Eine einfachere Möglichkeit, dies zu tun, besteht darin, den gesamten Rahmen auszuwählen und in die Auswahlfarben zu wechseln . Dann können Sie sie von hier aus auswählen. Sie können das hellviolette Licht hier sehen, es ist das Primärlicht. Sie können diesen weißen Hintergrund sehen. Ich werde einfach hier auf PG klicken. Es gibt auch noch einen hier, aber das sind 50%, achte darauf. Sie können Ihren Variablen nicht wirklich 50% hinzufügen, also müssen Sie das so lassen , wie es ist. Wir haben noch viel mehr. Jetzt können Sie Gradienten nicht mehr als Variablen verwenden Es ist ziemlich traurig, weil es unser System durcheinander bringt. Was ich jetzt machen werde, ist etwas anderes als diese, ich werde alle Farbverläufe oder die meisten davon ändern, und ich werde sie zu normalen Farben machen , nur um das ein bisschen einfacher zu machen Ich werde das zu unserer sekundären und ich werde das zu unserer primären machen , Dinge auswählen Du kannst sehen, da ist Schwarz und da ist dieses Grau, also werde ich einfach schreiben. Grau, Schwarz. Das ist absolut schwarz. Und ich werde den Rahmen erneut auswählen. Ich werde Schwarz für diesen wählen. Ich werde das auch schwarz machen. Ich meine, es ist dunkelgrau, aber ich mache es schwarz. Du kannst dich fragen, wo sich das befindet und du kannst hier drücken und du siehst, dass sie zum Beispiel diese Farbe haben. Ich verstehe nicht, okay, das sind die Linien. Ich glaube, wir können sie grau machen, aber das ist zu grau, also werde ich hellgrau machen. Wie Sie sehen können, ist es ein Prozess. Es geht darum zu verstehen, welche Farben haben wir? Welche Farbe brauchen wir? Und dann, hier, gibt es ein Verständnis. Also das sind verschiedene Grautöne, und jetzt können wir sie hellgrau machen . Jetzt wählen wir erneut aus, wir gehen zu den Auswahlfarben, und Sie können sehen, dass noch einige übrig sind. Ich meine, wir können das einfach grau machen. Das ist auch einfach grau. Und die anderen, schauen wir mal, was wir gegen sie tun können. Ich denke, einige davon können wir einfach so lassen, wie sie sind. Ja, wir müssen nicht alles ändern. Jetzt haben wir all diese Einstellungen. Was an Variablen wirklich cool ist , ist, dass es, genau wie wir über Komponenten gesprochen haben, eine übergeordnete Komponente gibt , ist, dass es, genau wie wir über Komponenten gesprochen haben, eine übergeordnete Komponente , die alle anderen untergeordneten Komponenten steuert. Wir haben hier das gleiche Konzept. Was Sie hier also tun können, ist zu sagen: Weißt du was? Ich habe beschlossen, das gesamte Schema zu ändern. Statt lila möchte ich es blau machen. Du kannst weitermachen und es blau machen, du musst es auch dunkler machen, und dann kannst du es orange machen, wenn du willst. Mach das auch orange. Einfach so, wir haben hier viele Farben geändert , okay? Also die Karten, wir lassen sie sein, weil Karten sind und sie Farbverläufe haben, was schwer zu ändern ist Aber alles andere, die Hauptfarben, die wir hier haben, die Primärfarben hier, wurden größtenteils geändert Abgesehen von diesem , weil auch das ein Farbverlauf ist, aber ich meine, wir könnten diese Änderung auch so machen oder wir müssen es nicht. Also mache ich weiter und drücke einfach Strg Z und setze alles wieder dahin, wo es war. Dies ist jedoch nur ein Beispiel , um Ihnen zu zeigen, was Sie mit diesen Variablen machen könnten . Also das ist wirklich cool. Das ist also eine Sache , die du tun kannst. Jetzt werde ich Ihnen zeigen, was wir mit anderen Arten von Variablen machen können. Ich werde eine Zahlenvariable erstellen. Ich werde es weglegen, nur um eine gute Trennung zwischen ihnen herzustellen . Ich möchte nicht, dass sie miteinander vermischt werden. Wenn es um die Zahl geht, ist das ein bisschen interessanter. Bei Zahlen geht es um Werte und Sie fragen sich vielleicht, wofür brauche ich das? Nun, eine Sache, die Sie verwenden könnten, ist, dass Sie es zum Beispiel für Abstände verwenden könnten. Wenn Sie feststellen, dass sich die meisten davon in automatischen Layouts befinden und automatische Layouts normalerweise über Abstände verfügen. Sie können hier sehen, dass es 16 sind. Sie können hier sehen, dass es 24 ist, hier ist es Auto. Hier hast du Null, aber dazwischen ist es automatisch. Hier ist es zum Beispiel sieben, also die Sache ist, ich meine, hier sind es sieben, hier sind es 12. Wir haben hier also eine Menge Inkonsistenzen. Das ist Null, das ist sieben, das ist 12. Das ist also etwas, das wir versuchen können zu beseitigen. Wir könnten also sagen: Okay, lass uns den Abstand zwischen Text und Elementen auf acht festlegen, richtig? Also ich weiß nicht, wir können es genau dieses Textelement oder so nennen , und wir können es acht nennen, oder? Und was wir dann tun werden, ist, dass wir hierher kommen und wir werden zu dem Abstand hier kommen. Entschuldigung, das ist nicht Null, das ist fünf. Anstatt also fünf zu haben, klicken wir hier auf diesen Pfeil und dann Variable anwenden, um Text plus Element auszuwählen. Jetzt ist es als acht eingerichtet, aber nicht nur als acht. Das ist ein Element, also ist es hier miteinander verbunden. Ich werde hier einfach genau das Gleiche anwenden, Variable anwenden und dann die Variable auswählen , die wir gerade erstellt haben. Variable anwenden. Oh. Jetzt haben wir es eingerichtet Es ist schön, wenn wir uns entscheiden, warte mal. Das ist besonders wichtig denn wenn Sie Kunden haben, werden sich Kunden immer beschweren, sie werden ihre eigenen Kommentare haben und sie werden sagen: Hey, der Abstand hier sieht nicht so gut aus oder vielleicht Ihre Designkollegen oder Ihr Chef oder wer auch immer, sie könnten sagen, verdoppeln Sie den Abstand, machen Sie den Abstand doppelt so groß. Alles, was Sie tun müssen, ist, hier Ihr Variablenfenster aufzurufen und das von hier aus zu ändern. Du klickst einfach auf 16 und das Verbot hat sich überall geändert. Aber dann werden wir feststellen, oh nein, jetzt kannst du nicht mehr erkennen, ob deine Karten mit dem Element oben oder dem darunter zu tun haben, weil es genau in der Mitte ist. Lass es uns zurücklegen, Control Z. Bam, es ist einfach so zurückgestellt Wir können das machen und das für viele verschiedene Dinge wiederholen , okay? Aber man kann sagen, dass wir es für Abstände für viele Dinge verwenden können. Aber was noch cooler ist, ist , dass du herkommen kannst. Und du kannst dieses Einstellungs- oder Bearbeitungssymbol wählen und schon kommst du hier zum Bereich. In diesem Bereich können Sie nun auswählen, wo diese Variable angezeigt werden soll. Nun, wir wollten, dass dies hauptsächlich für Lücken und automatische Layouts verwendet wird. Es ist kein Textinhalt, es ist kein Eckenradius, es ist nicht Breite und Höhe, es ist nichts davon. Also im Grunde können wir das einfach rückgängig machen und dann wird es in allen Eigenschaften entfernt und wir werden es einfach drin haben Wenn wir also zum Beispiel zu einem anderen Element kommen , schauen wir mal Ich meine, Schlaganfall. Wenn wir hier also einen Strich hinzufügen und sagen können, schauen wir uns an, welche Art von Variablen wir haben? In dieser Datei wurden keine Variablen erstellt, und das ist genau das, was wir wollten. Wir können es hier hinzufügen, und jetzt haben wir es hier drüben. Aber das müssen wir nicht. Okay? Es geht also nur darum zu verstehen, dass dieser Text plus Element nur für Lücken gedacht ist. Wir können weitermachen und den Strich hier entfernen. Wir können einen anderen erstellen und wir können Radius sagen. Eckenradius tut mir leid, ich habe gerade eine Farbvariable erstellt. Ich werde es einfach löschen. Also werden wir eine Zahl eins erstellen und sie Eckradius oder einfach Radius nennen. Ich werde sehen, was für einen Radius wir hier haben? Es ist 16, hier, es ist 16. Ich werde einfach 16 schreiben. Und ich werde all diese auswählen. Ich meine, wenn du sauber arbeitest, hättest du das idealerweise schon als ersten Schritt tun sollen , okay? Also, jetzt kommen wir her, klicken darauf und wählen Radius, bam, es ist eingerichtet Wenn wir uns dafür entscheiden, dass es nur scharfe Ecken hat, können wir das einfach auf Null setzen und bumm, jetzt ist es eine Null, wie Sie sehen können Einfach so. Ich meine, nicht alle Elemente, aber du verstehst die Idee. Wie wir bereits sagten, können wir den Umfang überprüfen und alles abhaken und sagen, dass dies nur für den Eckradius gilt Das ist eine ziemlich coole Funktion, die du für all diese Dinge verwenden kannst Sie können es für Konturen, für Text, für Effekte, für Zeilenhöhe für viele Dinge verwenden. Sie müssen es nicht einschränken. Sie können es in allen unterstützten Eigenschaften behalten, aber dann wird es ziemlich chaotisch Okay, das ist es also, was Sie mit diesen Zahlenvariablen machen können mit diesen Zahlenvariablen machen Und dann haben wir Zeichenkettenvariablen. Nun, String-Variablen sind meiner Meinung nach etwas weniger nützlich, aber vielleicht verwende ich sie nicht optimal. Zeichenkettenvariablen sind also im Grunde Variablen , die entscheiden, welchen Text Sie haben. Wenn Sie hier zum Beispiel Text haben , haben Sie eine Zahl, oder? Sie können hier klicken. Und Sie können wählen, ob Sie es als Zeichenkettenwert verwenden möchten. Im Moment ist der Zeichenkettenwert ein Zeichenkettenwert, aber Sie können sagen, dass es 100$ sind, und das wird es ändern. Nun, das ist für verschiedene Zwecke gut, aber es ist grundsätzlich gut, wenn Sie dieselbe Zahl oder denselben Text an vielen verschiedenen Stellen haben möchten dieselbe Zahl oder denselben . Anstatt sie dann immer wieder ändern zu müssen, können Sie sie einfach so an einem Ort bleiben lassen. Das ist es, wenn es um String-Variablen geht. Jetzt möchte ich weitermachen und untersuchen, was wir Modi nennen. Modes ist eine weitere Seite dieser Funktion, eine Ergänzung, eine Erweiterung dieser Funktion, was wirklich cool ist. Und im Grunde siehst du all diese Variablen, die wir erstellt haben. Hier gibt es eine Tabelle. Das ist eigentlich eine Tabelle, die wir erweitern können, und wir haben diese Spalte, aber wir können eine weitere hinzufügen, und das nennt man Modus. Jetzt haben wir also zwei Modi, Modus eins und Modus zwei. Nun, dafür gibt es viele verschiedene Verwendungen, oder? Aber die Hauptanwendung oder eine der besten Verwendungen , die ich finde, besteht darin, verschiedene Modi oder Farbschemata oder den Tagmodus und den Tageslichtmodus oder den Nachtmodus zu erstellen verschiedene Modi oder Farbschemata oder , oder Wir können also sagen, das ist Tageslicht. Und das ist Nacht. Wir haben jetzt diese beiden Modi. Was cool ist, ist, dass wir direkt vor uns sehen können , wie wir diese verschiedenen Modi auswählen und sie unterschiedlich anzeigen können. Ich werde dieses Dashboard kopieren. Ich werde es kopieren und einfügen. Ich werde es hier kopieren und einfügen. Ich werde herkommen, du siehst diesen Auftritt. Sie klicken auf Variablenmodus anwenden, Sammlung eins, und ich klicke auf Nacht. Kehren wir nun zu unserem variablen Fenster zurück. Was wir tun werden, ist das Farbschema zu ändern. Wir werden einige dieser Farben umkehren, insbesondere die Weiß -, Schwarz- und Grautöne . Wir werden sie rückgängig machen. Alles Schwarz sollte jetzt weiß sein und alles Weiß sollte schwarz sein. Es muss nicht komplett schwarz sein. Es kann ein bisschen dunkelgrau sein. Der Grund dafür ist, dass wir Schatten haben, die wir hier weiterhin zeigen möchten. Dann können wir herkommen und sagen, für Hellgrau muss es Dunkelgrau sein. Okay. Lass uns sehen. Du siehst es hier. Solange es sichtbar ist, es seinen Zweck erfüllt, und dann sollte dieses Grau heller sein. Sie können sehen, dass dies der Text ist. Dieser Text sollte lesbar sein. Jetzt drehen wir diese um. Sie können schon sehen, dass das ziemlich gut aussieht. Es funktioniert, aber an manchen Stellen ist es nicht hier, zum Beispiel hier, es funktioniert nicht, weil Schwarz nicht funktioniert. Wir können mehrere Lösungen haben. Eine Möglichkeit, dieses Problem zu lösen, besteht darin , sicherzustellen, dass dieser weiße Text weiß bleibt. Stattdessen können Sie diese auswählen anstatt es mit diesem BG zu verbinden, wir können es einfach immer weiß machen. Das ist eine Möglichkeit, das Problem zu lösen. Eine andere Möglichkeit, das Problem zu lösen, besteht darin, im Grunde diese Dunkelheit in diese Dunkelheit vorzudringen und diese Dinge im Grunde rückgängig zu machen. Wir werden dieses Licht machen und vielleicht sogar noch heller als das. Dann machen wir es ziemlich dunkel, aber nicht zu dunkel. Jetzt können Sie sehen, dass wir auch diese Farben umkehren. Aber das funktioniert nicht immer so. Es gibt keine Methode, denn jetzt könnte man sagen, naja , das ist ein ganz anderes Violett als dieses. Es hat nicht dieselbe Identität. Sie könnten Recht haben, und so können wir mit unserer anderen Lösung fortfahren , dies manuell einfach weiß zu machen. Dieser ändert sich also nicht mit den Modi. Es bleibt einfach weiß. Als allgemeine Faustregel gilt Wenn Sie das Tageslicht in den Dunkel-, Nacht - oder Dunkelmodus ändern , möchten Sie, dass Sie einige Farben etwas heller machen können . Dieses Lila sieht nicht so toll aus, wenn es hier noch dunkel ist. Es ist schön, es ein bisschen heller zu machen und das Gleiche gilt für diesen. Siehst du? Jetzt sieht es konsistent aus. Es sieht nicht so seltsam aus, aber wir haben diese Purpurtöne tatsächlich viel heller gemacht , das hat einen Zweck Es gibt einen Zweck der Sichtbarkeit. Nun, eine Sache, die wir mehr tun könnten, ist, diese Schatten etwas intensiver zu machen diese Schatten etwas intensiver , weil sie momentan größtenteils unsichtbar sind. Wir sehen die Differenzierung nicht. Eine Möglichkeit, dies zu tun, besteht darin, diese so auszuwählen, dass Sie sehen können, dass es hier einen Schlagschatten gibt. Wir werden also eine Variable erstellen und wir werden eine Zahlenvariable erstellen und sie Schatten nennen. Es könnte sein, dass wir herausfinden, was diese Variable sein sollte. Wenn wir also den Effekt der Schatten hier öffnen , haben wir mehrere Dinge. Wir haben Unschärfe, wir haben eine Position und wir haben uns ausgebreitet Lassen Sie uns nun sehen, welche Auswirkungen diese haben. Wir können dafür sorgen, dass es sich weiter verbreitet. Wir können es stärker verwischen, wir können dafür sorgen, dass es mehr Abstand hat, aber wir können die Opazität leider nicht wirklich ändern Das können wir mit diesen Modi ändern. Also müssten wir entweder eines dieser Elemente auswählen um es mit der Variablen zu verbinden , oder wir müssten es einfach manuell ändern. Es liegt mehr oder weniger an dir. das Problem zu umgehen, könnten wir ihnen auch einen Strich geben und ihm eine Variable geben, sodass Sie sagen können: Stroke Und hier, der Stroke im Normalmodus, ich meine, lassen Sie uns ihn verbinden Geben wir ihm einen Schlaganfall. Okay? Es könnte sehr hellgrau sein. Und wenn es dann hierher kommt, könnte es dunkelgrau sein. Nun, das ist im Allgemeinen eine gute Lösung, weil es sicherstellt , dass der Schatten nicht so unsichtbar Es macht sehr deutlich , dass es sich um spezifische Elemente handelt, dass es sich um Karten oder Boxen handelt. Wenn Sie es dann in den Dunkelmodus schalten, ist es auch immer noch sichtbar. Es ist sehr gut sichtbar. Aber anstatt sich nur auf Schatten zu verlassen, die im Dunkelmodus schwerer zu erkennen sind, verlassen sie sich mehr auf diese Grenzen, und wir können hier dasselbe tun. Wir können einen Strich hinzufügen und so, jetzt haben wir hier und da einen Strich und auch für diese Schaltflächen. Also werde ich ihn einfach hier hinzufügen. Und ich werde sie auch dort haben. Ordnung, jetzt haben wir zwei verschiedene Modi, Tageslichtmodus und den Nachtmodus oder den Dunkelmodus. Wie Sie sehen, können Sie auf diese Weise Modi zu Ihrem Vorteil nutzen, sodass Sie aus einem einfachen Design zwei verschiedene Typen und zwei verschiedene Farbschemata machen können einem einfachen Design zwei verschiedene Typen . Es ist ein ziemlich cooles Feature. Benutze es. Ich meine, wenn du es brauchst, benutze es. Wenn du nicht musst, nicht. Aber was cool ist, ist, dass du immer damit herumspielen kannst. Sie können das Erscheinungsbild jederzeit von hier aus ändern. Sie können von diesem zu dem wechseln, oder Sie können es zurücknehmen. Es liegt ganz bei dir. Und lass mich dir noch einen Trick zeigen. Sie werden also weitermachen, dieses Fenster schließen und einen Abschnitt erstellen, einen großen Abschnitt erstellen. Und dann bringen wir dieses Dashboard hinein und wählen dann den Bereich aus, kommen hierher zum Erscheinungsbild und machen es Nacht. Und sieh dir an, was passieren wird , wenn ich das hier rausnehme. Es wird Tagesmodus oder Hellmodus, und hier ist es Dunkelmodus. Das ist ein ziemlich netter Trick, und er ist wirklich nett, denn wenn Sie alle Ihre Bildschirme und all Ihre Designs fertig haben, müssen Sie sie nur noch duplizieren und in einen Abschnitt wie diesen einfügen, und dann können Sie genau sehen, wie es im Dunkelmodus aussehen würde. So können Sie Variablen also zu Ihrem Vorteil nutzen, wie ein Meister, wie ein Profi. Sie können Farbvariablen verwenden. Sie können Zeichenkettenvariablen verwenden. Sie können auch eine Reihe von Variablen verwenden, und Sie können sie für Abstände verwenden. Sie können sie für Farben, Zeichenketten und alles verwenden , was Sie wirklich brauchen. Sie wirken wie ein Zauber. Aber es gibt immer diese Frage. Warum brauche ich Variablen? Nun, ich habe auf der einen Seite erklärt , warum du sie brauchst, denn erstens, hey, du kannst viele Dinge von einem einzigen Ort aus ändern, einem einzigen Fenster aus, das alles entscheidet, oder? Der zweite Grund ist, dass dies Ihren Arbeitsablauf offensichtlich einfacher und schneller macht und es für Sie einfacher und sauberer macht, zu wissen , was Sie getan haben und welche Farben Sie gewählt haben, anstatt Ihre Farben überall Auf diese Weise ist es ein bisschen besser definiert. Aber es stellt sich auch die Frage, warum sollte ich nicht einfach Stile verwenden, oder? Wenn Sie sich mit Stilen nicht auskennen, haben wir sie hier. Stile sind ein ähnliches Konzept. So können Sie Textstile und Farbstile erstellen. Darüber hinaus können Sie aber auch Effektstile und Layoutlinien verwenden. Lassen Sie mich das jetzt sagen. Ich meine, Variablen sind kein Ersatz für Stile. Versuche einfach, das auf dich wirken zu lassen, versuche es zu verstehen. Es ist kein Ersatz. Ich denke, dass Variablen an vielen Stellen das Richtige sind, während an anderen Stellen Stile besser zu verwenden sind. Okay, lassen Sie mich Ihnen zunächst erklären, falls Sie nicht wissen, was Variablen sind und was Stile sind, wir haben die Variablen bereits erklärt, aber lassen Sie uns lernen, was Stile sind. Stile sind nun einfachere Möglichkeiten , Variablen damit zu verwenden. Sie können weitermachen und eine Farbe wählen und Sie können einfach eine Farbe angeben und sagen, das ist lila, ich werde das als Stil wählen. Du kannst ihm einen Namen geben. Sie können eine Beschreibung hinzufügen, wenn Sie möchten. Aber das Schöne daran ist, dass Sie innerhalb eines Stils mehrere verschiedene Farben hinzufügen können . Das ist eine Sache , die Variablen nicht können , und darüber hinaus können Sie einen Stil erstellen, der auch ein Farbverlauf ist. Das können Variablen noch nicht. Wenn wir also einen Stil auf sehr ähnliche Weise erstellen, klicken wir einfach auf diese vier Felder, vier Kreise, und wir können sehen, dass dies alle unsere Variablen sind, und dann haben wir hier auch Stile. Das ist also etwas, das verwendet werden kann, und es wird auf sehr ähnliche Weise wie Variablen verwendet. Stile und Variablen sind sich also sehr ähnlich. Der Unterschied liegt jedoch in der Tatsache, dass Sie bei Stilen keine unterschiedlichen Modi haben können. So wie Sie hier Variablen haben, haben Sie alle Ihre Stile hier. Sie können sie also von einem Ort aus ändern. Wenn du deine Meinung änderst und sagst: Hey, ich möchte das Farbschema ändern, ich möchte es blau machen. kannst du machen. Das kannst du machen. Und wenn wir den Stil hier eingerichtet hätten, würde er sich hier widerspiegeln. Aber die Idee ist, dass man keine Modi haben kann. Du kannst nicht Demde, Dunkelmodus und so weiter haben. Das ist eine Sache, aber sie zeichnet sich in anderen Dingen aus. Wenn es also um Effekte geht, können Sie vollständig erstellte Effekte hinzufügen. Sie können Schlagschatten verwenden, Sie können ihm eine bestimmte Zahl, eine bestimmte Deckkraft oder sogar eine bestimmte Farbe zuweisen All diese Dinge können Sie einrichten. Sie können es in Rauschen oder Ebenenunschärfe ändern. Nachdem Sie es eingerichtet haben, haben wir es nicht eingerichtet, aber lassen Sie uns jetzt einen Effekt hinzufügen und wir werden ihn als Stil erstellen Jetzt können wir weitermachen und es von hier aus auswählen. Auswirkungen. Jetzt haben wir Schlagschatten. Wir können beispielsweise sicherstellen, dass alle unsere Schatten innerhalb des Designs mehr oder weniger konsistent sind. Variablen können das nicht. Behalte das im Hinterkopf. Wir haben auch alle unsere Stile hier. Sie können die Farbstile und die Effektstile sehen, und was noch cooler ist, sind die Textilien. Jetzt erinnern Sie sich vielleicht, dass ich gesagt habe, wissen Sie, die Zeichenkettenvariablen sind mehr oder weniger nutzlos. Zumindest habe ich keinen soliden Anwendungsfall für sie, und ich denke, die meisten Designer das auch nicht, weil wir es oft, wissen Sie, nicht oft mit Zahlenvariablen zu tun haben. Wir haben es nicht mit Textvariablen zu tun. Wir haben es mit Farben und Formen und so zu tun, und Zeichenkettenvariablen sind nicht immer hilfreich, wenn es darum geht. Aber hier können Sie diese Stile einrichten, die sich auf die Typografie beziehen Nehmen wir an, wir möchten eine konsistente Typografie innerhalb des Designs beibehalten eine konsistente Typografie innerhalb des Wie Sie hier sehen können, gibt es regelmäßig einen Willkommensbonus. Weißt du, es ist eine normale Schrift , und dann ist diese fett und größer, und dann ist diese kleiner, diese ist fett, die ist viel größer und so weiter und so fort. Wir haben also verschiedene Stile. Vielleicht haben wir sogar verschiedene Schriften. Der Weg, das zu tun, ist ein Textil zu kreieren und zu sagen, weißt du, ich meine, lass uns sehen, was für ein Textil das ist. Das ist Inter um, 16, und das ist Inter Bold 24. Also machen wir weiter und wir kreieren einen Stil und wir sagen. Wir kreieren einen Stil und sagen, das ist Inter, es sollte 16 sein und es ist normal, okay? Wir können sogar, weißt du, die Zeilenhöhe wählen und so weiter. Und wir können es benennen. Wir können sagen, das ist normal oder wir können sagen, es ist Text. Und das ist ziemlich wichtig , wenn Sie Überschriften schreiben möchten, oder? Sie werden also Überschrift eins, zwei, drei, vier haben, und hier haben wir sie Wir haben also 24, also können wir hier weitermachen und einen Stil kreieren. Was ist nett? Ich meine, du musst das nicht tun. Du kannst einfach hierher kommen, auf die vier Kreise klicken und dann auf Plus klicken. Du kannst einfach sagen, speichere all diese Einstellungen, die ich hier habe und erstelle einfach einen Stil daraus. Wir können H eins sagen. Das ist unser H eins, und dann können wir herkommen und sagen, das ist H zwei. Klicken Sie erneut auf die vier Kreise plus H zwei, und das ist unser H drei. In Ordnung, erstelle den Stil. Dann können wir alle unsere Textilien hier sehen. Wir müssen sie hier verbinden. Hier, das ist verbunden. Das ist nicht verbunden, wir werden es hier nur mit Text verbinden. Dann können wir herkommen und sagen, weißt du was? Ich habe beschlossen, H um eine Überschrift eins zu machen, um so viel größer. Ich kann 36 schreiben. Bam, hier wird es größer. Ich könnte sagen, H zwei oder H drei, das ist viel zu klein. Es ist 12. Lass uns 16 daraus machen, du kannst sehen, dass sich dieser geändert hat. Ich meine, idealerweise sollten wir das auch auf H drei einrichten und alle anderen auch. Du verstehst die Idee. Stile sind Variablen sehr ähnlich, wenn es darum geht, Dinge von einer zentralen Stelle aus zu ändern, aber Stile haben viel mehr Kontrolle über viele verschiedene Dinge, Textstile, Farbstile, Effektstil. Variablen sind zwar immer noch etwas eingeschränkt. Ich meine, ich erinnere mich, als diese Funktion zum ersten Mal herauskam, ich glaube, sie war mehr oder weniger im Beta-Modus. Es war also nicht sehr zuverlässig oder stabil. Jetzt ist es so, aber wie gesagt, es ist immer noch ein bisschen eingeschränkt, also musst du darauf achten und schauen, was du damit arbeiten kannst weil ich denke, Variablen sind cooler, wenn es um Farbe geht, wenn es vielleicht um Schnüre geht, aber Stile sind viel besser, wenn es um Textilien geht, wenn es um Effektstile geht, weil es dir viel Zeit spart und du kannst immer zurückgehen und sagen, weißt du was? Dieser Schatten sieht nicht gut aus. Ich muss ihn nicht von jedem einzelnen Element aus ändern . Ich kann es einfach mit einem Knopfdruck machen. Ich kann das alles ändern. Und ja, idealerweise solltest du keinen Schatten namens Drum Shadow haben. Du solltest Button-Schatten sagen, und dann kannst du große Schatten, Kartenschatten sagen. Ich weiß nicht, einfach verschiedene Schatten für verschiedene Elemente oder Effekte , die Sie zeigen möchten. Und ja, das sind die Hauptunterschiede zwischen Stilen und Variablen. Ich hoffe, dass ich das verständlich gemacht habe. Also mach weiter und versuche mit diesen Effekten zu arbeiten, versuche mit diesen Elementen, Funktionen, Variablen und Stilen zu arbeiten , ich meine. Aber um ehrlich zu sein, wenn Sie das Gefühl haben, dass Ihr Projekt keinen so großen Umfang hat und Sie keine Variablen oder Stile benötigen , dann müssen Sie sie auch nicht verwenden. Ich meine, ich würde immer vorschlagen, sauber zu arbeiten. Verwenden Sie also Stile, wenn Sie können, wenn Sie die Zeit haben , vor allem, wenn Ihr Unternehmen das Budget dafür hat. Aber wenn Sie das Gefühl haben, dass Sie keine sehr schnellen Designs erstellen , die nicht besonders konsistent sein müssen, dann brauchen Sie sie natürlich nicht. Versuche, deine Prioritäten zu messen und sie zu verstehen. Müssen wir uns darauf konzentrieren, viel Zeit darauf zu verwenden, die Effektstile herauszufinden und einen konsistenten Stil zu kreieren , der sich wiederholt und tatsächlich konsistent ist, oder versuchen wir einfach, etwas Schnelles und Schmutziges zu machen und achten einfach nicht Es liegt an dir. Ich hoffe, das macht Sinn für dich und wir sehen uns in der nächsten Lektion. 6. Teambibliotheken und Dateiorganisation: Willkommen zu einer weiteren Lektion des Figma-Kurses für Fortgeschrittene. In dieser Lektion werden wir über Teamdateien und das Veröffentlichen von Teamdateien sprechen , um Komponenten in verschiedenen Dateien zu haben Komponenten in verschiedenen Dateien und sie mit Ihrem Team zu teilen Lassen Sie mich erklären, was ich meine. Was wir in den letzten Lektionen getan haben, wenn Sie sich das nicht angesehen haben, können Sie es jetzt überprüfen. Wir haben im Grunde Variablen erstellt, wir haben Komponenten mit unterschiedlichen Varianten und wir haben auch Stile erstellt, und all das sind unterschiedliche Konzepte. Aber alle beziehen sich auf eine sehr nette Art und Weise aufeinander , denn ein wesentlicher Bestandteil ihrer Verwendung ist die Konsistenz. Wenn Sie also an einem bestimmten Projekt arbeiten, sagen wir, wir erstellen gerade eine Finanz-App, genau wie Sie es hier sehen, dann möchten wir wahrscheinlich mehrere Dateien erstellen , oder vielleicht möchten wir innerhalb derselben Datei dieselben Komponenten, dieselben Stile usw. haben . Um diese Konsistenz in allen Figma-Dateien wiederherzustellen und aufrechtzuerhalten, möchten wir sie grundsätzlich diese Konsistenz in allen Figma-Dateien wiederherzustellen und aufrechtzuerhalten, zurückholen können Der einfachste oder direkteste Weg, dies zu tun, wäre nun direkteste Weg, dies zu tun, wäre , etwas zu kopieren und einzufügen Wenn Sie also Ihre Schaltflächen hier haben, können Sie sie kopieren und einfach in die anderen Dokumente einfügen . Aber das kann anstrengend werden. Ich meine, auf den ersten Blick scheint es am einfachsten zu sein, ist es aber nicht Was eigentlich sinnvoller ist, ist, sie zu teilen, sie im Grunde über Ihre Teambibliothek zu veröffentlichen. können das hier tun, sodass Sie hier zwei Tabs haben. Sie haben Ihre Akte und Sie haben Ihr Vermögen. Jetzt zeigt Ihnen die Datei die Seiten, die Sie haben, sowie die Ebenen. Jetzt können Sie diese auch reduzieren, sodass Sie sie ausblenden können, wenn Sie möchten. Wir werden zu den Vermögenswerten übergehen. Das Asset Sab zeigt Ihnen all die verschiedenen Komponenten, Stile und Variablen, die Sie haben, oder einfacher gesagt, es zeigt Ihnen alle Bibliotheken, die Sie gespeichert haben Jetzt kannst du hier ein paar Bibliotheken sehen , die ich habe, und das liegt daran, dass wir sie auf der Community-Seite gesehen haben Ich habe sie gesehen. Sie sind öffentlich verfügbar und ich habe sie hinzugefügt. Ich kann weitermachen und zu iPadOS 26 gehen, zum Beispiel gibt es ein UI-Kit, und so konnte ich alle Komponenten sehen, die in diesem Kit enthalten sind Ich kann alles von hier in meine aktuelle Designdatei übernehmen. Ich kann Face ID sagen, lass mich die Face ID holen, damit ich sie einfügen kann und schon habe ich eine Instanz von Face ID, die verschiedene Varianten hat, zum Beispiel den Authentifizierungserfolg und so weiter Wir können das Gleiche tun, was Apple mit ihren UIKits macht Der Weg, dies zu tun, besteht darin, auf diese Schaltfläche zu klicken Wählen Sie also Ihre Bibliotheken aus, und was Sie hier sehen werden, Elemente, die in dieser Datei erstellt wurden. Es wird also Assets geben , die auf diese Datei beschränkt sind. Dies sind wiederum die Stile, Variablen und Komponenten, und dann haben Sie Bibliotheken zu dieser Datei hinzugefügt. Ich kann sie entfernen, wenn sie zu lästig sind und ich sie nicht verwenden möchte. Ich glaube zum Beispiel nicht, dass ich WatRos 26 oder Vision OS verwenden werde, also kann ich sie einfach von hier entfernen oder sie wieder hinzufügen Aber was Sie dann tun möchten, falls Sie bereits eine Reihe von Komponenten haben , die Sie in dieser Datei erstellt haben und die Sie veröffentlichen möchten, werden Sie fortfahren und auf Veröffentlichen klicken. Also wird es dir hier sagen, ich meine, im Moment ist es bereits veröffentlicht, aber normalerweise werden dir hier die Änderungen mitgeteilt, oder? Es zeigt dir also, was du hinzugefügt hast. Also, was wir hinzugefügt haben, ich meine, vorher wurde es nicht wirklich veröffentlicht. Wir haben unsere Variablensammlung hinzugefügt, und es zeigt Ihnen hier, dass wir 12 geänderte Variablen haben. Dann haben wir die Stile. Es zeigt Ihnen also, dass ich Textil H eins, Textil, H zwei Stil, H drei Stil hinzugefügt habe . Wir hatten einen Stil in Bezug auf die Stile, wir haben einen Farbverlauf hinzugefügt, wir haben einen Schlagschatten hinzugefügt. Die meisten davon haben wir in der letzten Lektion gemacht. Da wir über Stile und Variablen gesprochen haben. Wie Sie sehen können, gibt es die Variablen, die Stile und die Komponenten. Bisher haben wir nur zwei Komponenten erstellt, nämlich die Schaltfläche und das Symbol. Das gibt dir die Möglichkeit, jedes davon zu entfernen und zu sagen: Weißt du was? Ich möchte die Komponenten nicht mit anderen teilen, da diese Komponenten spezifisch für diese Datei sind. Aber ich möchte zum Beispiel die Sammlung mit anderen teilen . Ich möchte die Variablen darin teilen, und Sie können sehen, welche Variablen Sie haben, welche hinzugefügt wurden und welche nicht. Ich denke, sie wurden alle hinzugefügt. Sie können sie alle hier sehen. Auch hier kannst du wählen, alle abzuwählen und dann veröffentlichst du wirklich nichts, oder du kannst alle hinzufügen. Wir werden weitermachen und sie veröffentlichen. Es heißt, es ist eine Verlagsbibliothek. Es wird eine Weile dauern. Perfekt. Jetzt ist es veröffentlicht. Hier öffnen wir eine neue Designdatei, und wenn wir in die Bibliotheken gehen, finden wir unsere eigene Bibliothek nicht. Also werden wir einfach weitere Bibliotheken hinzufügen und wir gehen zu Teams und Sie werden innerhalb der Teams finden, Sie werden die freiberufliche finden. Sie können es zu dieser Datei hinzufügen , falls es noch nicht hinzugefügt wurde. Sie einfach darauf klicken, greifen Sie auf alle verfügbaren Komponenten zu. Darüber hinaus können Sie den Stil auch verwenden. Wenn wir hier irgendein Objekt erstellen, kann ich hier weitermachen und ich werde mir hier all die verschiedenen Bibliotheken ansehen . Nun, wir haben unserer Bibliothek keinen Namen gegeben, also sollten wir das vielleicht tun , um ehrlich zu sein. Wenn wir einfach herkommen, gehen wir in die Bibliothek und können hier einfach den Namen ändern, sodass wir Finanz-App sagen können. Und dann heißt es hier Finanz-App. Wenn wir hier also einen Stil hinzufügen, wollen wir einen Stil hinzufügen. Es wird also heißen, dass es die Finanz-App ist. Sie können hier also alle unsere Variablen oder Farbvariablen sowie unseren Stil hier sehen , der nur ein Farbverlauf war. Wenn wir also Text hinzufügen, testen wir das nur aus. Also hallo hallo Welt. Ich kann die Typografie überprüfen und werde meine Finanz-App, Typografie-Stile, sehen meine Finanz-App, Typografie-Stile, Jetzt kann ich natürlich alle anderen Systeme sehen, denen ich hinzugefügt habe, die Benutzeroberflächen, die Bibliotheken Aber im Moment brauchen wir nur dieses, das wir selbst erstellt haben. Und einfach so haben wir die Teambibliothek erstellt und veröffentlicht , und jetzt konnten wir sie in einer anderen Datei verwenden. So einfach ist das. Aber cooler ist es, wenn wir uns hier an die Arbeit machen und entscheiden, weißt du was? Lassen Sie mich eine weitere Komponente erstellen. Ich meine, lassen Sie mich dieses Ding oder vielleicht eines davon machen, ich werde es zu einer Komponente machen, ich klicke einfach hier und sage, Statistik, richtig? Dann kann ich gleich hier in meine Bibliotheken gehen. Und dann heißt es hier eine Änderung. Es verfolgt die Änderungen, die Sie vornehmen. Eine Änderung, weil wir eine Komponente erstellt haben. Lass uns einen neuen Stil kreieren, lass es eine Farbe sein. Wir werden es einfach grau machen und wir werden es einfach ohne Namen erstellen, also geben wir einfach den Hex-Code ein . Dann schauen wir jetzt nach und dann heißt es zwei Änderungen. Sie sehen, es behält den Überblick wenn wir zu den Variablen kommen. Im letzten Beispiel fügen wir eine Zeichenkettenvariable hinzu. Wir werden es nicht einfügen, wir werden es einfach dort schreiben. Und dann werden wir es jetzt überprüfen. Auch hier gibt es drei Änderungen. Jetzt müssen Sie diese Änderungen manuell akzeptieren oder veröffentlichen, damit sie wirksam werden. Also werde ich mit der Veröffentlichung fortfahren und ich werde sie alle auswählen. Ich kann wählen und sagen: Hey, weißt du was? Nein, ich möchte nicht, dass Statistiken erstellt werden. Ich möchte nicht, dass diese Farbe angenommen wird. Ich bin mir nicht sicher, warum oder in welchem Fall, jemand würde sich dafür entscheiden. Es liegt wirklich an Ihnen, welche Anwendungsfälle Sie haben. Vielleicht entscheiden Sie, dass dies nicht Teil des Systems sein sollte. Das war etwas außerhalb dieses ganzen Designsystems. Es war vielleicht aus Versehen. Also du willst, du weißt schon, es ausschließen, das liegt an dir. Sie können hier sehen, dass alle unveränderten Stile und Variablen auch hier nur zu Ihrer Information aufgeführt sind. Dann können wir weitermachen und es veröffentlichen. Jetzt haben wir eine neue Komponente, einen neuen Stil und eine neue Variable. Lassen Sie uns jetzt überprüfen, wie schnell das geht. Während wir nachschauen. Innerhalb von 3 Sekunden wurde es aktualisiert. Nach 3 Sekunden, in denen ich hier gewartet habe, wurde es aktualisiert und ich kann es hierher bringen, genau wie diesen Drachentropfen, wo ich darauf klicken kann und mir die Sammlung ansehen kann. Ich kann sehen, wie der Demo-Dunkelmodus aussieht, und das Gleiche hier, ich kann alle Instanzen überprüfen. Das ist eher eine Vorschaufunktion, falls du sie dir ansehen möchtest, nun, lass es mich ausprobieren. Was kann ich hier machen? Dann können Sie überprüfen, wie es aussieht, und dann können Sie die Instanz einfügen. Aber um ehrlich zu sein, ich denke, das ist ein längerer Weg und es dauert länger. Ich ziehe es eher vor , es einfach per Drag-and-Drop zu ziehen und es dann nach Belieben anzupassen. Machen Sie es zweitrangig, aber aktiv , was auch immer ich will. Auf diese Weise können Sie Teambibliotheken zu Ihrem Vorteil nutzen, um Ihre Änderungen zu veröffentlichen, wenn Sie am Anfang Änderungen vorgenommen haben, um sie zu veröffentlichen. Wenn Sie dann Änderungen vornehmen, können Sie sie erneut veröffentlichen oder diese Änderungen speziell veröffentlichen . Sie können die Steam-Bibliothek in Ihren Dateien verwenden und wiederverwenden. Nun, das ist wahrscheinlich sehr beruhigend für viele Leute, viele Designer, die gerne projektübergreifend arbeiten und Elemente haben möchten, egal ob es sich um dieselbe Markenidentität handelt oder ob es sich um spezifische Elemente handelt, die Sie entworfen haben und die in verschiedenen Projekten funktionieren könnten Du musst nicht, ein Button sollte nicht immer super einzigartig gestaltet und fantastisch sein Sie können ihn verwenden und wiederverwenden. Es liegt an Ihnen, hängt von Ihrem Arbeitsablauf ab, hängt davon ab, wie Sie gerne arbeiten. Aber dieses Feature wurde mehr oder weniger in Bezug auf ein Projekt betrachtet. Sie haben ein Projekt, bei dem Sie, sagen wir, etwas haben , das UI-Kits sehr ähnlich ist. Es muss also ein einheitliches UI-Kit wie IOS 26 sein, und dann haben Sie eine Taste oder, was die Tasten angeht, Sie haben diese mehreren Tasten, also gibt es Flüssigglas, es gibt normale Tasten. Und wenn du darauf klickst, wirst du so viele Optionen sehen. Ich meine, ist es getönt oder nicht? Ist es Hellmodus, Dunkelmodus? Es zeigt dir, ob es aktiviert oder deaktiviert ist? Ja, und du kannst die Farben wählen. Es ist sehr interessant zu sehen und anzusehen. Ich meine, es sieht hier natürlich nicht besonders gut aus, aber ich denke, wenn wir es einmal platziert haben , würde es viel sinnvoller was diese Einstellungen wirklich ändern. Ich habe das Gefühl, dass diese Funktion, es zu sehen, Vorschau Ihrer Schaltfläche oder Ihres Elements anzuzeigen, nicht immer perfekt funktioniert Sie sollten es also einfach per Drag & Drop ziehen und sehen, wie es aussieht, besonders wenn es eine solche Hintergrundunschärfe hat. Es ist schön zu sehen, wie es aussehen würde Ich meine, das ist ein Glaseffekt. Sie können herausfinden, wie es mit etwas im Hintergrund aussieht, und wir können hier die verschiedenen Möglichkeiten überprüfen. Ja, ziemlich nett. Zum Abschluss haben wir in dieser Lektion gelernt, wie wir unsere Bibliothek, unsere Teambibliothek, veröffentlichen. Das bedeutet, dass wir unsere Variablen, Stile und Komponenten veröffentlichen müssen. Auf diese Weise können wir sie in einer Datei veröffentlichen die in verschiedenen Dateien zugegriffen werden kann, und wir haben gelernt, wie man diese Bibliothek aktualisiert, indem man die Komponenten aktualisiert. wir also an diesen Komponenten, den variablen Stilen, arbeiten und sie ändern können wir sie einfach aktualisieren und erneut veröffentlichen. Dabei haben wir gelernt wie wir diese Komponenten in jedes andere Designprojekt einfügen in jedes andere Designprojekt Natürlich hat es seine Grenzen. Ich meine, du kannst es nicht in einem anderen Konto oder in einem völlig anderen Team tun einem völlig anderen Team es sei denn, es wird veröffentlicht und hinzugefügt. So können wir zum Beispiel das Zeug von IOS hinzufügen , weil es öffentlich verfügbar ist. Aber wenn du in einem völlig anderen Account wärst, müsstest du irgendwie auf diese Bibliothek zugreifen, also muss sie irgendwie geteilt werden. Aber wenn du in demselben Konto bist, kannst du es einfach von hier aus hinzufügen, weitere Bibliotheken hinzufügen, und du findest es deinen Team-Bibliotheken direkt hier. Ich hoffe also, dass Sie etwas Nützliches gelernt haben und dass Sie diese Funktion nach Belieben verwenden, solange sie Ihnen hilft, Ihre Ziele als Team zu erreichen und Ihren Arbeitsablauf ein wenig zu verbessern. Vielen Dank und wir sehen uns in der nächsten Lektion. 7. Automatisches Layout Deep Dive: Hallo und willkommen zu einer weiteren Lektion. In dieser Lektion werden wir über responsives Design sprechen. Genauer gesagt werden wir über bestimmte Verhaltensweisen sprechen. Dies sind die festen Umarm-and-Fill-Einstellungen oder -Zustände. Ich bin mir nicht sicher, wie sie jemand nennen würde. Sie sind ein bisschen schwer zu definieren und schwer zu verstehen. Ich denke, dass viele Designer diese Funktion leider nicht kennen. Sie verwenden es nicht oft, aber dies ist Ihr erster und wichtigster Schritt wenn es um responsives Design geht. Versuche zuzuhören, was ich sage, versuche es aufzunehmen, zu verstehen, wenn du nicht noch einmal versuchst zuzuhören. Ich werde versuchen, diese Lektion so einfach wie möglich zu erklären , aber zögern Sie nicht, Fragen zu stellen wenn Sie sie später nicht verstehen. Es dauert lange, das zu verstehen, und das ist nur mit Übung möglich. Lassen Sie uns also zunächst besprechen, was responsives Design bedeutet. Responsive Design nennen wir, Sie wissen schon, eine App oder Website oder was auch immer es ist, wenn Sie es nach rechts und links ausdehnen können und, Sie wissen schon, es ändert sich entsprechend. Um das zu verstehen, meine ich, können wir uns das in Figma ansehen Also haben wir das Seitenmenü. Weißt du, wir können es nach rechts und links ausdehnen, und es behält die gleichen Elemente bei. Es gehen keine Elemente verloren oder werden gelöscht. Aber manchmal, weißt du, wenn hier langer Text steht, wird er vielleicht gekürzt. Das ist kein Problem. In ähnlicher Weise haben wir hier dasselbe. Bestimmte Elemente werden länger, während andere Elemente die gleiche Größe behalten, aber einige von ihnen sind rechtsbündig ausgerichtet, einige von ihnen sind linksbündig und so weiter. Wir können sogar die gesamte Größe dieses Fensters ändern. Wenn wir Figma öffnen, können wir die gesamte Größe von Pigma ändern, und es wird immer noch Sinn machen Es werden weiterhin alle relevanten Informationen angezeigt , die wir benötigen Das ist genau das, worüber wir sprechen. Responsive Design ist die Fähigkeit eines Designs, sich an unterschiedliche Bildschirmgrößen und unterschiedliche Bedingungen anzupassen, unterschiedliche Bedingungen anzupassen, wodurch es kleiner, größer und breiter wird. Dünner, wie auch immer du es nennen willst. Um das zu verstehen , müssen wir zuerst dieses Konzept verstehen, sich auf die automatischen Layouts bezieht Umarmen und Füllen haben wir hier behoben. Worauf ich mich genauer beziehe, ist dieser Button. Wir haben hier Knöpfe. Sie sind dieselbe Komponente , die wir zu Beginn des Kurses erstellt haben. Nun, das ist im Grunde ein Rahmen mit einem automatischen Layout, und dieser Rahmen mit einem automatischen Layout enthält ein Textelement. Ignoriere die Linie, ignoriere das Symbol, sie sind versteckt. Wir haben nur einen Rahmen mit automatischem Layout. Es enthält ein Textelement. Was wir tun werden oder was ich bereits getan habe, ist ich das Textelement hier so eingestellt habe, dass es repariert wird. Es hat eine feste Breite, und wir können ihm auch eine feste Höhe geben. Dann haben wir hier eine Umarmung. Hier hat es Umarmung für die Breite und Umarmung für die Höhe. Nur als Hinweis: Sie können diese Einstellungen nur vornehmen, wenn Sie ein Element haben spielt keine Rolle, ob es ein Textelement ist, es könnte ein Objekt sein, es könnte eine Formlinie oder was auch immer es ist, es muss sich innerhalb eines Rahmens mit automatischem Layout befinden. Wenn wir hier also einen Text erstellen und etwas Text hinzufügen, können Sie ihn weder umarmen noch füllen. Das ist nicht verfügbar. Aber wenn wir zu diesem Text kommen, können wir zwischen fester Breite, Umarmung oder Füllung wählen Das sind die Dinge , auf die ich mich beziehe. Dann haben wir satt und für die Höhe haben wir eine Umarmung, was vorerst keine Rolle spielt Ich meine, wir konzentrieren uns am meisten auf die Breite, okay. Also, was bedeutet das genau? Nun, behoben ist durchaus verständlich. Es bedeutet im Grunde, dass es eine feste Breite und eine feste Höhe hat . Egal, was der Text darin ist, er wird seine Abmessungen nicht ändern. Also lass uns das testen. Also werde ich hier sagen, abonnieren Sie jetzt. Wie Sie sehen können, hat das Feld selbst, das Textfeld, seine Abmessungen nicht geändert. Was passiert, ist, dass der Text nicht gerade verläuft, er geht runter, er bricht ab, okay? Und aufgrund dieser Einschränkung geht es über den Tellerrand hinaus, oder? Das ist also ein klarer Fall von falscher oder falscher Übereinstimmung oder Nichtübereinstimmung Sie haben die Einstellungen, die Abmessungen dieser Schaltfläche im Grunde falsch eingerichtet die Abmessungen dieser Schaltfläche im Grunde falsch Es verhält sich also nicht auf eine Weise, die reagiert oder, Sie wissen schon, vielleicht nicht reagiert, sondern auf eine Weise, die korrekt ist Jetzt, wo wir herkommen, haben wir genug. Wir haben also diesen Button mit Ausfüllen und wir werden hier den gleichen Satz schreiben. Wir werden jetzt abonnieren schreiben. Nun, was Sie hier bemerken, wir haben ein anderes Verhalten, anderes Ergebnis als das Behobene. Nun, hier haben wir gesagt, es soll aufgefüllt werden. Was das im Grunde bedeutet, heißt es, fülle den Raum so weit wie möglich aus. Dehne dich so weit aus , wie es dir der Rahmen erlaubt. Nun, der Rahmen erlaubt dir nicht viel. Es ist grundsätzlich begrenzt. Es ist behoben. Aber inzwischen ist die Höhe riesig. Es ist als Umarmung eingerichtet. , Umarmung bedeutet, dass Sie so viel verlängern können, wie Sie benötigen Also weil wir „ Jetzt abonnieren“ geschrieben haben , ist der Rahmen begrenzt, also ging der Text runter, aber die Box ging mit ihm runter Der Rahmen hat ihn trotzdem umhüllt. Wie Sie sehen können, sind dies die Unterschiede, einige der Unterschiede. Die Art und Weise, wie sich das Feld hier verhält, besagt, dass dies das Textfeld ist, es ändert sich nicht Der Text wird das Textfeld verlassen , weil er nirgends zu finden ist, aber wir werden nichts ändern Die Größen werden alle gleich sein. Das ist ein sehr statischer Weg. Es ist tot. Es reagiert in keiner Weise. Das hier ist ein bisschen besser, denn obwohl der Text nicht so angezeigt wurde, wie wir ihn gerne hätten, ging er trotzdem runter und die Box ging mit ihm runter. Die Größe der Schaltfläche wurde mit dem Text angepasst. Das ist ein bisschen besser. Aber ich möchte, dass du merkst, was passiert, wenn ich die Box verlängere. Wie Sie jetzt sehen können, hat die Kiste Gestalt angenommen, die Form hat sich weiterentwickelt und hat sich normalisiert. Das Textfeld hat wieder seine normale Größe angenommen. In der Zwischenzeit passiert nichts, wenn wir diesen erweitern. Warum? Weil es eine feste Größe hat. Es wird sich nicht ändern, egal was passiert. Aber hier ist es so eingerichtet, dass es gefüllt ist. Es heißt im Grunde, wenn Platz ist, werde ich meine Beine ausstrecken. Wenn es keinen Platz gibt, werde ich an diesem Ort eng werden . Das ist genau das, was passiert Es ist eng, aber hier hat es Platz, also dehnt es sich Das ist es, was passiert. Schauen wir uns jetzt diesen Button hier an. Lass uns sehen, was es macht. Wir haben den Button hier als Umarmung eingerichtet. Was hier passiert, wäre richtig, jetzt abonnieren. Es hat das perfekte Verhalten, weil der Text nicht nach unten geht weil Buttons als Faustregel gelten sollten, Buttons sollten nicht mehrere Zeilen haben, idealerweise sollte ich nicht abonniert sein und dann in der nächsten Zeile jetzt, da sollte es nicht mehrere Zeilen geben oder so. Sie können sehen, dass dieser Button dazu passt. Der Rahmen der Schaltfläche dehnt sich mit ihr aus. Dies ist einer der Unterschiede, die Sie haben, und das bezieht sich nicht nur auf Textobjekte oder Textelemente, sondern auch alle Arten von Elementen haben das gleiche Verhalten. Zusammenfassung. Wir haben Umarmen und Füllen repariert Mit der Option Fixed bleibt die Textgröße exakt gleich, während Hug sich mit dem Text erweitert Aber es gibt ein Problem mit Hug Sie können bis ins Unendliche schreiben Es wird niemals untergehen. Dies könnte später ein Problem sein denn was ist, wenn Sie ein sehr, sehr langes Element haben? Es sollte irgendwann untergehen. Aber für diesen speziellen Anwendungsfall haben wir hier eine Schaltfläche. Weißt du, als Faustregel gilt, dein Button nicht viel zu lang sein sollte. Okay? Also das ist kein Problem dafür. Phil, weißt du, Phil ist schlau, weil er die Grenze des Frames erkennt. Es geht nicht weiter als das Limit. Es ist also ideal, aber nicht vier Tasten. Also das ist quasi nur eine Zusammenfassung. Und das Schöne an der Umarmung ist, dass du den Rahmen nicht anpassen musst, Der Rahmen wird bereits von selbst angepasst. Wenn Sie also etwas löschen, wird es angepasst. Wenn Sie währenddessen beim Füllen etwas löschen, folgt der Rahmen nicht Sie müssen also weitermachen und es selbst machen, was möglicherweise nicht sehr genau ist und auch nicht besonders gut ist. Du machst alles in zwei Schritten. Das ist einer der Hauptunterschiede. Du kannst das üben und du kannst sehen, wo das Textfeld Grenzen setzt, nicht nur was das allgemeine Aussehen angeht, sondern schau dir auch das Textfeld hier an, das hier behoben wurde. Es ging mit. Ich habe ständig an den Elementen gezerrt Wenn es mehr Text hätte, würde es ihn umarmen, es würde ihn enthalten In der Zwischenzeit füllt es ihn aus, aber solange der Rahmen Platz hat Schau, obwohl der Text bis hierher reicht, reicht das Textelement darüber hinaus, es reicht bis zum Ende des Rahmens, und das ist es, was füllen bedeutet. Fülle den ganzen Raum aus. Wenn es Wasser gibt, fülle den ganzen Bereich mit Wasser auf, was immer du willst. Das ist es, was hier passiert. Betrachten Sie es, denken Sie in diesem Begriff darüber nach. Wenn noch Platz ist, wenn es eine Flasche gibt , wird sie gefüllt. Lassen Sie uns nun weitermachen und versuchen , unsere eigenen Elemente zu erstellen. Ich möchte Sie nur daran erinnern , dass das nicht so einfach ist, weil Sie den Rahmen haben, der auch feste oder umarmte Inhalte hat, und dann haben Sie auch die Elemente darin, die auch feste Umarmungs- oder Fülloptionen haben Das ist gar nicht so einfach. Aber lassen Sie uns versuchen, es ein bisschen genauer zu erklären. Also hier habe ich eine Karte. Diese Karte zeigt Ihnen also eine Bewertung, Namen der Bewertung, den Nachnamen und den Inhalt der Bewertung, die eigentliche Bewertung. Dies ist nur ein Beispiel dafür, wie eine Bewertung aussehen könnte. Kopieren wir das jetzt und geben wir ihm einen Namen. Es heißt Rezension, und wir werden es hier in diesem kleinen Rahmen platzieren, okay? Wir werden es größer machen. Und was wir jetzt tun werden, ist, wir würden das gerne ein bisschen testen, oder? Also werde ich hier einen Namen schreiben und dieser sollte Jonathan Simpson, Elder John, heißen Ich weiß nicht, ich schreibe nur Sachen. Dann wirst du merken, warte mal , das passt nicht. Ich meine, es verlässt den Rahmen. Das ist ein Problem, weil wir hier mehrere Dinge haben , um uns die Anatomie anzusehen , hier gibt es einen Rahmen. kannst du sehen. Das ist der Hauptrahmen. Dann gibt es ein Textelement und dann gibt es noch einen Rahmen mit automatischem Layout. Dieser Rahmen hat einen Kreis, eine Ellipse und ein Textelement, und dann haben Sie den Überprüfungsinhalt Der Hauptrahmen hat ein automatisches Layout mit drei Elementen, Text, Rahmen eins und Überprüfungsinhalt Schauen wir uns das an und versuchen zu verstehen, wo das Problem liegt. Das Hauptproblem, das hier passiert , ist also , dass sich das zu weit ausdehnt. Um das Problem zu beheben, müssen wir auf dieses Element klicken und sehen, was es hat? Also, es hat eine Umarmung. Der Inhalt der Umarmung sorgt dafür, dass es sich ausdehnt und weitermacht und weitermacht Alles klar? Nun wollen wir sehen, was passiert, wenn wir es reparieren. Nun, was mit Fixed passiert ist, ist, dass es irgendwie die Nummer 162 hat, und das liegt daran, dass das die ursprüngliche Nummer ist, okay? Weil ich meine, in dem Bild hier war es 162. Also wird es im Grunde genommen zu seiner ursprünglichen Größe wechseln. Oder hier kannst du 162 sehen. Was passiert, wenn wir einen Füllbehälter aufstellen? Wie Sie sehen können, hat es sich an den Rahmen angepasst, in dem es sich befindet, und es hieß: Ich werde den Behälter füllen, aber ich werde nicht darüber hinausgehen. Stattdessen werde ich zu einer zweiten Zeile übergehen. Jetzt ging es zu einer zweiten Zeile über. Jetzt gehen wir zurück und umarmen es. Nun, es gibt einen anderen Weg, wie wir das lösen könnten. Ich meine, wenn Sie darüber nachdenken, ist das Problem, dass der Rahmen diese Dinge nicht enthält. Der Rahmen ist vielleicht kleiner, anstatt dass dieser Text kleiner ist. Ich meine, wir können ihn nicht kleiner machen. Vielleicht möchten wir den Rahmen etwas länger machen. Das könnte auch funktionieren. Aber wir sollten es nicht manuell machen, indem wir es verschieben. Ich gehe zurück. Was wir tun sollten, ist vielleicht, ich meine, mal sehen, behoben, es ist schon behoben. Wir wollen, dass es ein bisschen interaktiver ist. Entweder sollte es den Inhalt umarmen oder den Behälter füllen. Nun, lass uns dafür sorgen, dass es den Behälter füllt. Okay. Jetzt siehst du, was passiert ist, als dieser ganze Rahmen ein Container ist. Es ist ein Frame mit automatischem Layout, und es ging weiter und es wurde über den gesamten Frame ausgedehnt . Es hat den ganzen Raum in Anspruch genommen. Aber das Ergebnis ist , dass wir jetzt viel leeren Leerraum haben, der vielleicht nicht benötigt wird . Also, wie behebt man das? Nun, lassen Sie uns den Inhalt umarmen. Nun, Hug Content hat nichts gebracht, oder? Nun, umarmt es den Inhalt? Lass uns nachschauen. Die Bewertung läuft bis hier. Okay? Und es gibt Polsterungen an den Seiten, nur damit du weißt, es gibt 24, 24 von oben und unten, 24 von rechts und links Okay, die Bewertung wird also eingedämmt. Und dann ist dieser Text auch enthalten, nett, und wir schauen hier, hier gibt es ein Problem. Nun, dieser Text enthält nicht die darin enthaltenen Elemente , die Elemente werden gelöscht. Vielleicht sollten wir auch dafür sorgen, dass es einen riesigen Inhalt hat. Einfach so haben wir es repariert. Inhalte zu umarmen bedeutet also dich genauso zu erweitern wie die Elemente in dir Um es noch einmal zusammenzufassen Wenn es einen langen Namen gibt, dann solltest du dich an diesen langen Namen anpassen und selbst länger werden Du solltest wissen, dass du ihn als Rahmen enthalten solltest. Wenn wir also einen Inhalt umarmen, wird er ihn enthalten, und dann sollte der Rahmen außerhalb des Inhalts ihn auch umarmen Wenn Sie also mehrere Elemente ineinander haben, mehrere Layouts, die ineinander verschachtelt sind, müssen Sie ihnen sagen, dass sie sich gegenseitig enthalten , als würden Sie den Inhalt in sich umarmen Also hier haben wir eine Umarmung und hier haben wir eine Umarmung. Du umarmst dich, okay? Dann lassen Sie uns diese Elemente überprüfen. Nun, lass uns vielleicht hier eine Rezension schreiben, ich werde schreiben. Der Film hat mir sehr gut gefallen. Es war absolut fantastisch und unterhaltsam, bla, bla, bla. Jetzt fängst du an, auf einige Probleme zu stoßen. Sie haben es wahrscheinlich schon bemerkt. Ich führe Sie nur durch den Prozess, ein Element zu erstellen und zu verstehen, wie diese Dinge mit dem Element zusammenhängen. Nun, wir haben mehrere Probleme. Ein Problem ist, dass, wenn man sich das Element anschaut, es nicht die gesamte Fläche einnimmt. Das zweite Problem ist, dass es sich über die Linie hinaus erstreckt, über den Rahmen hinaus. Wenn Sie sich an dieses Problem über den Rahmen hinaus erinnern, haben wir es bereits mit dem Namen gelöst. Die Lösung bestand darin, die Umarmung zu benutzen Die Option „Inhalt umarmen“. Jetzt haben wir also schon den Inhalt umarmen, aber das ist für die Breite Jetzt müssen wir dasselbe für die Höhe verwenden. Genau wie wenn wir das tun, löst es das Problem sofort Es geht runter. Wenn wir diesen Text kürzen, wird er steigen. Dadurch reagiert das Element ein bisschen auf dich. Jetzt hat der gesamte oder der höchste Rahmen auf beiden Seiten eine Umarmung in der Breite und Höhe Aber wir haben noch ein anderes Problem, das, wie gesagt, nicht den ganzen Rahmen einnimmt Wie machen wir das? Ziemlich einfach. Nun, das wird durch die Umarmungsoption nicht gelöst , weil Hug es auf derselben Linie belassen wird Wenn es um Text geht, bleibt er einfach in derselben Zeile Aber diese Karte sieht nicht wirklich gut aus, da sie sehr lang ist, vor allem, wenn wir den Text hier verdoppeln, sie wird sich einfach bis ins Unendliche erstrecken. Ich gehe einfach zurück, ich mache es rückgängig. Die Lösung besteht darin, anstelle von festem W oder Hug-Content einen Füllbehälter zu verwenden Wenn Sie also einen Container füllen, heißt es, füllen Sie den Bereich, der hier ist , der leer ist, richtig Wenn wir also Fixed machen, wird Fixed einfach exakt gleich bleiben , es wird nicht reagieren. Aber wenn wir füllen, heißt es nein, füllt nur den Bereich aus , der verfügbar ist. Und im Moment ist dies der einzige Bereich, der verfügbar ist. Wenn wir also mehr Text hinzufügen, wird er erweitert, und dann nimmt er den verfügbaren Bereich ein. Siehst du, wovon ich spreche? Es geht also darum, diese Elemente so zu gestalten , dass sie ihren Bedürfnissen entsprechen, und zu verstehen, dass, hey, der Name vielleicht nicht in zwei Zeilen stehen sollte. Ich meine, egal wie lang dein Name ist, er sollte sich irgendwie immer noch erstrecken. Aber wenn ich das verstehe, hey, deine Bewertung sollte nicht lang sehr breit sein, aber vielleicht sollte sie runter gehen , anstatt nach rechts zu gehen, sie sollte runter gehen. Und das ist im Grunde die gesamte Verwendung dieser Elemente. Fest ist also toll, feste Breite oder Höhe, aber es ist sehr starr. Es ist statisch. Es ändert sich nicht von selbst. Aus diesem Grund verwenden wir Hug Elements und Fill Container, damit wir diesen Elementen sagen können, wie sie sich im Verhältnis zueinander verhalten sollen sich im Verhältnis zueinander verhalten Und nur damit du es weißt, es gibt auch die Möglichkeit, Container auch der Höhe entsprechend zu füllen Das ist auch eine Möglichkeit. Wenn Sie also sagen, Behälter für die Höhe füllen , hat es im Moment nichts getan, aber es wird ihn füllen, wenn Platz dafür ist. Also, wenn wir das hier erweitern, erweitern wir es aus irgendeinem Grund. Wir überprüfen das Element und Sie sehen das Textfeld den Bereich bereits ausgefüllt hat Also nahm ich es und sagte: Hey, das ist meins. Also, ich werde es niemandem geben, okay? Lass uns jetzt zurückgehen. Lass uns das rückgängig machen. Also im Moment ist die Karte nicht schlecht. Ich meine, es ist nicht perfekt. Lass uns das als Füllung einrichten. Aber es ist nicht schlecht. Es funktioniert für unsere Zwecke. Wenn wir den Namen kürzer machen, ich meine, Elder John, ich weiß nicht, was das ist, es sieht immer noch ziemlich gut aus, oder? Also haben wir den Namen kürzer gemacht, damit wir die Rezension lesen können und alles ist perfekt. Nun, lass uns spielen, lass uns noch einen Schritt weiter gehen und mit einigen weiteren Elementen spielen. Wir können das also kopieren und einfügen, also kopiere ich dieses Element. Und nur damit du es weißt, habe ich, wie ich schon erwähnt habe, den ganzen Rahmen zu einem automatischen Layout gemacht, aber er hat eine feste Breite, also reagiert er nicht darauf, okay? Und jetzt haben wir diese beiden Objekte. Jetzt können wir eine interessante Sache machen, okay. Also, was dieses Ding ist, vielleicht schauen Sie sich dieses Design an und sagen, naja, wissen Sie, hier gibt es Leerraum. Es ist einfach leer. Es sitzt einfach da. Warum füllen wir es nicht? Aber wenn ich eine weitere Bewertung hinzufüge, wird sie abgeschnitten. Das will ich nicht. Ich will, dass sie zwei Bewertungen und ich will, dass sie den Platz einnehmen. Nun, es gibt einen Weg, das zu tun. Also wähle diese, diese beiden Elemente und mach weiter und anstatt sie umarmen zu lassen, also umarmen sie im Grunde nur ihren Inhalt, sie sind nur so breit, wie ihr Inhalt es braucht Wir sagen „Behälter füllen“. Was hier passieren wird, ist, dass beide versuchen werden , den Raum so weit wie möglich auszufüllen. Das Ergebnis, das wir haben , ist , dass sie beide um den Weltraum kämpfen. Die allgemeine Regel, wenn es um Figma geht , lautet: Wenn Sie zwei Elemente in einem automatischen Layout haben , die beide so eingerichtet sind, dass sie den Raum ausfüllen , werden sie 50% und 50% beanspruchen Das ist die allgemeine Idee. Wenn wir weitermachen und das kopieren und einfügen und dann haben wir drei Elemente, jetzt werden sie 30%, 30%, 30% ausmachen. Natürlich ohne den Abstand, weil es einen Abstand zwischen ihnen gibt , sind das zehn Pixel. Aber jetzt sieht es ein bisschen abgefahren wenn du es bemerkt hast, weil der Name jetzt zu lang ist und weil wir das so eingerichtet haben den Container füllt, aber den Inhalt nicht wirklich umarmt. Es kümmert sich nicht um den Inhalt darin, es kümmert sich nur darum, den Behälter zu füllen Das ist ein Problem, weil, hey, wir haben gerade gelernt, wie man Dinge responsiv macht, und jetzt machen wir sie kaputt. Nun, das ist ein natürlicher Teil der Nutzung dieser Technologien. Dafür gibt es eine Lösung. Eine Lösung ist, dass ich all diese Elemente auswählen werde. Anstatt das als Umarmung zu verwenden, können wir daraus eine Füllung Dann wählen wir den Text und verwandeln ihn auch in eine Füllung, dann wird der Text hier aus zwei Zeilen bestehen Dann werden wir der Höhe auch sagen, dass sie sich umarmen soll, weil Sie sehen, dass sie über den Rahmen hinausragt Wir werden dem Rahmen sagen, dass er nicht alles in Bezug auf die Höhe umarmen soll, und dann nimmt er die Höhe an, und dann nehmen sie einfach richtigen Platz Ich meine, jetzt sehen sie nicht verrückt aus, sie verlassen den Rahmen nicht und sie passen sich gut an ihren Rahmen und sie passen sich gut Du kannst es einfach so lassen, wie es gerade ist. Die andere Lösung besteht im Grunde darin , diese auszuwählen und hier rüber zu gehen. Jetzt werde ich dir etwas völlig Neues beibringen, nämlich das Minimum und das Maximum. Okay, für Breite und Höhe haben Sie immer die Möglichkeit, eine minimale Breite oder eine maximale Breite hinzuzufügen . Nun, in diesem Fall haben wir drei Elemente, die um den Raum kämpfen, und das führt dazu, dass sie kleiner sind als beabsichtigt, vielleicht sollten sie nicht klein sein. Dieser Typ. Was wir also tun können, ist, eine Mindestbreite hinzuzufügen. Im Moment sind wir bei etwa 220. Okay? Also können wir sagen, weißt du was? Du darfst nicht kleiner als 300 sein. Jetzt setzen wir die Mindestbreite für alle auf 300. Wie Sie jetzt sehen können, wird es bis zu 300 kleiner und dann hört es auf. Aber das Ergebnis ist, dass einer von ihnen versteckt ist. Nun, das hat eine einfache Lösung. Wir werden den Rahmen wählen, der all diese Karten enthält, und wir werden hierher kommen und diese Option wählen, die als eintönig bezeichnet wird. Dadurch alle Elemente, die nicht passen, weggenommen und abgelegt Jetzt sehen die Elemente sehr reaktionsschnell aus und füllen den Rahmen ausreichend aus, ohne sich selbst zu verzerren Schau, was passiert, wenn wir das kopieren und einfügen, es ordnet sich genau wie die obigen perfekt an. Was ist, wenn wir es kopieren und wieder einfügen? Es legt eins gleich hin, und ich zeige dir, wie es aussieht, und so weiter und so fort. Es ist das gleiche Prinzip. Auf diese Weise können Sie dieses responsive Design verwenden und insbesondere die Optionen „ Inhalt umarmen“, „ Behälter füllen“ Behälter füllen“ und „Minimal“ und „Maximum“ verwenden, um sicherzustellen, dass diese Elemente ordnungsgemäß miteinander interagieren und nicht verzerrt werden miteinander interagieren und nicht verzerrt werden Gehen wir nun in ähnlicher Weise ein wenig zurück. Lassen Sie uns das hier löschen. Es gibt etwas , das wir tun können. Ich werde sie alle auswählen. Diese Sache ist im Grunde so, wenn man darüber nachdenkt, könnte man sagen, eine Rezension sollte niemals so lang sein. Ich meine, es könnte lang sein, es müssen nicht 300 sein, aber es sollte niemals so lang sein. Die Lösung besteht im Grunde darin, hier eine maximale Breite hinzuzufügen und zu sagen: Weißt du was? Sie sollte zwischen 300 dem Minimum und zwischen 400 und dem Maximum liegen. Was hier passiert, ist, dass Sie sehen, dass diese Bewertung nicht länger als 400 wird und wenn wir sie dann kopieren und einfügen, wird sie nicht kleiner als 300. Schau dir an, was passiert, wenn ich weitermache und den ganzen Rahmen ausdehne. Die Karten werden etwas länger bis 400 und dann hören sie auf. Sobald ich etwas mehr Platz habe, haben sie jetzt drei verschiedene Spalten. Ich mache mehr, und dann haben wir vier verschiedene Spalten. Was ist, wenn es kleiner wird? Siehst du das? Das ist genau das, wovon ich spreche. Es ist die ganze Idee der Reaktionsfähigkeit, die Tatsache, dass der gesamte Rahmen sowie die darin enthaltenen Elemente auf die Größenänderungen reagieren und es so glatt aussieht Natürlich ist es nicht perfekt, aber Sie können sehen, dass es sich selbst so organisiert , dass es reagiert Es ist wie ein lebendes Wesen. Und es ist nicht, weißt du, was die Leute normalerweise tun, was viele Designer tun. Leider sie weiter und erstellen das und sie bekommen die Bewertung, und sie stellen sie hier, und sie kopieren und fügen sie ein, und sie fügen sie hier ab. Und dann sagen sie: Ups, weißt du, es ist nicht in der Mitte, also werde ich es in die Mitte verschieben Ich werde es hier ablegen und dann werde ich sie kopieren, einfügen, herunterholen Und dann werde ich sie alle kopieren, einfügen, herunterholen. Ups, ich stelle nur sicher, dass alle Leerzeichen perfekt aufeinander ausgerichtet sind Und was letztendlich passiert, ist sobald du das länger machst, musst du darüber nachdenken, was mache ich jetzt? Und, bringe ich die her? Nun, sie passen irgendwie. Aber was mache ich dann mit denen? Wie lange sollten sie noch dauern? Jetzt muss ich herausfinden, wie lang, so lang, komplett länger. Und wenn sie dann sagen: Oh, machen wir es zur mobilen Version, und dann müssen sie die ganze Sache von Anfang an überdenken die ganze Sache von Anfang an Dies ist ein Beispiel für schlechtes Design, das nicht reagiert , schlechtes Design, das nicht reagiert Lass es uns ein bisschen größer machen. Hier ist ein Beispiel für gutes , responsives Design. Du weißt schon. Und nur um, weißt du, dieser Rahmen ist kein Bildschirm, es ist keine Seite. Das ist wahrscheinlich nur ein Element innerhalb einer Seite, okay? Ich glaube also nicht, dass das das ganze Design ist. Das sieht nicht wie ein ganzes Design aus, aber weißt du, so macht man es im Grunde. Wenn es um responsives Design geht, geht es darum, sicherzustellen, dass die Dinge elastisch und flexibel sind und auf Ihre Berührung reagieren. Dies sind die Grundlagen des responsiven Designs mit automatischen Layouts. Nun, da steckt noch viel mehr dahinter. Wir haben das Beispiel einer Bewertungskarte genommen und wir haben das Beispiel einer Schaltfläche genommen. Aber es ist viel tiefer als das, okay? Sie müssen nur die drei verschiedenen Hauptmodi verstehen . Du kannst entweder eine feste Größe haben , die sich nie ändert, oder du kannst eine Umarmung haben, die sich nur ändert, je nachdem, was drin ist Wenn es Text gibt, dann passt er sich dem Text darin an. Wenn es Elemente, Designelemente, Objekte gibt, dann umarmt es diese Aber wenn es um Text geht, geht es normalerweise nicht in eine zweite Zeile Es geht einfach weiter und weiter. Wenn es ums Füllen geht, heißt es nur, ich werde den Behälter so weit füllen , wie es verfügbar ist. Ich werde nicht darüber hinausgehen, und wenn nicht genug Platz vorhanden ist, gehe ich zu einer zweiten Zeile, einer dritten Zeile, einer vierten Zeile. Das ist im Grunde die ganze Idee. Sobald Sie das verstanden haben, wenn Sie es verinnerlicht und verstanden haben, worum es geht, können Sie damit beginnen, Ihr eigenes gutes responsives Design zu erstellen Ihr eigenes gutes In der nächsten Lektion werden wir nun etwas mehr über Einschränkungen und Grenzwerte sprechen , was sich auch auf responsives Design bezieht Machen Sie also weiter und versuchen Sie, das zu üben, versuchen Sie, es ein bisschen besser zu verstehen In der nächsten Lektion werden wir dann diesen ganzen anderen Teil des responsiven Designs besprechen, der immer noch sehr viel mit dem zu tun hat, worüber wir gesprochen haben, aber er ist etwas weiter von automatischen Layouts entfernt. Es hängt nicht vollständig von ihnen ab. Ich selbst liebe automatische Layouts, und ich denke, du solltest das auch tun, weil sie deine Freunde sind. Sie helfen dir und sie bewirken Wunder, dass es das ist, was Figma so besonders macht, dass es sich von der Konkurrenz abhebt Deshalb ist es ein großartiges Tool. Aber wie gesagt, in der nächsten Lektion werden wir ein wenig über Einschränkungen und Grenzwerte sprechen , falls Sie diese nicht kennen , und uns das in der nächsten Lektion ansehen Wir werden auch ein Beispiel haben, das Ihnen in Echtzeit zeigt , wie wir eine Webseite oder eine App beantworten können . Deshalb haben wir hier nur einen kleinen Abschnitt mit Ihren Ansichtskarten erstellt Aber in den nächsten Lektionen werden wir es mit einem echten Designprojekt machen, und das ist nur zum Üben. Wissen Sie, wenn ich wirklich sage, meine ich realistisch. Ich meine nicht, dass es ein echtes Projekt ist, das gebaut wird, sondern nur etwas, das wir uns ansehen können. 8. Einschränkungen und Haltepunkte: Hallo und willkommen zu einer weiteren Lektion des Figma-Fortgeschrittenenkurses In dieser Lektion werden wir über Grenzwerte und Einschränkungen sprechen über Grenzwerte und Einschränkungen In der letzten Lektion haben wir über responsives Design gesprochen und darüber, wie wir das durch automatische Layouts, durch Einstellungen zum Zusammenfassen von Inhalten und zum Füllen von Containern erreichen können das durch automatische Layouts, durch Einstellungen zum Zusammenfassen von Inhalten und zum Füllen von Containern erreichen durch Einstellungen zum Zusammenfassen von Inhalten und zum Füllen von Containern . Sie haben das noch nicht gesehen, sehen Sie es sich an, aber dies ist eine Fortsetzung, obwohl es nicht genau um dasselbe geht Wir sprechen immer noch von responsivem Design. Hier werden wir automatische Layouts los. Ich meine, wir können automatische Layouts verwenden, aber das muss sich nicht vollständig darauf verlassen. Wir verwenden vorerst hauptsächlich sogenannte Einschränkungen. Einschränkungen sind im Grunde Möglichkeiten, mit Figma zu kommunizieren und Dinge so einzurichten, dass wir ohne Layouts sicherstellen können, dass Designs responsiv sind und sie auf die eine oder andere Weise reagieren Auf die Veränderungen in ihrer Umgebung, insbesondere auf die Änderungen des Rahmens oder der Bildschirmgröße Wie Sie jetzt sehen können, habe ich hier ein Element erstellt , das Ihnen ein Produkt zeigt, einen Matcha, eine wunderbare Geschmacksmischung, und Sie können es jetzt bestellen, und es gibt einen Preis Nehmen Sie sich eine Minute Zeit, um dieses Element zu analysieren und zu verstehen Es ist nur ein völlig isoliertes Element, das ich sehr schnell ausgearbeitet habe und das keine perfekten Abmessungen hat, aber Sie verstehen schon , was ich meine. Du verstehst, wohin das führt. Was wir jetzt versuchen werden ist zunächst zu verstehen, was Einschränkungen sind, und dann werden wir versuchen zu verstehen, wie wir das Ganze ein wenig anpassungsfähiger versuchen zu verstehen, wie wir machen können, nur um Sie wissen zu lassen, dass Reaktionsfähigkeit niemals ein absolutes Attribut ist Es geht nicht darum, zu reagieren oder nicht zu reagieren, sondern es gibt verschiedene Ebenen Es ist wie ein Spektrum. Es gibt eine wirklich, wirklich gute Reaktionsfähigkeit oder eine hohe Reaktion darauf, und dann gibt es eine geringe Reaktionsfähigkeit Man kann nicht vollkommen perfekt sein, aber wir versuchen es zu sein, wenn es darum geht, Produkte tatsächlich herzustellen Wir versuchen es zu sein, aber manchmal sind wir in Bezug auf FigMA sehr eingeschränkt und dann müssen wir nur sicherstellen , dass die Entwickler ihre Arbeit richtig machen Gmas sind sehr begrenzt, aber mit Codierung, mit Programmierung können wir eine viel höhere Reaktionsfähigkeit erreichen Was sind Einschränkungen? Wenn Sie in einem Rahmen ohne automatisches Layout auf ein Element klicken , werden Sie diese gepunkteten Linien bemerken Das sind im Grunde Seile , an denen dein Element hängt. Du kannst ein Seil von oben und von links sehen. Das sind deine Einschränkungen. Sie sind im Grunde genau hier, du kannst sie von hier verstecken. Oder du kannst sie öffnen und es zeigt dir , an welcher Seite dieses Rahmens dieses Element gebunden ist. Was bedeutet das? Nun, wenn wir die Größe ändern, passiert nichts. Aber ich möchte, dass du merkst, was passiert, wenn ich die Größe von oben ändere. Siehst du das? Das Element steigt mit der Oberseite. Aber wenn ich es von unten ändere, passiert nichts. Es ist statisch. Ebenso passiert rechts und links, von rechts, von links nichts, das Element gehört dazu. Das ist es, was im Grunde passiert, es ist gebunden und links, und du kannst das ändern, indem du es festlegst Jetzt ist es nach unten und links gebunden. Wenn ich es jetzt nach unten bewege, die untere Seite bewege, bewegt es sich entlang der Seite. Es wird sich damit bewegen, ähnlich wie hier. Es wird sich jetzt mit der rechten Seite bewegen. Das ist eine wichtige Sache, die wir tun können. Nur um Ihnen eine Idee zu geben, ich kann das kopieren und hier platzieren, und dann kann ich sagen, das sollte oben und links gebunden werden . Das sollte nach oben und nach rechts gebunden werden. Was dann passiert, ist , dass sie getrennt sind. Okay, jetzt dehnt es sich so weit aus, wie wir wollen, und das bleibt rechts, dieses Ding links. Aber um ehrlich zu sein, was meistens passiert, ist wenn man das zu klein macht, wird es einige Überschneidungen geben, oder? Das ist es, wovon ich spreche, das ist nicht perfekt, denn ohne automatische Layouts können Sie nicht die volle Reaktionsfähigkeit erreichen Also das ist quasi die Hälfte der Lösung, okay? Und wenn du wirklich ein gutes responsives Design haben willst, solltest du sowohl Einschränkungen als auch automatische Layouts zu deinem Vorteil nutzen, okay? Also, wie ich bereits erwähnt habe, passiert hier, dass du einfach damit herumspielst und es zur Seite geht, was toll ist, aber es reagiert nicht vollständig. Wir können hier dasselbe tun. Wir können das hier einfügen kopieren und wir können sie an den unteren Rand binden. Lassen Sie mich nur sagen, wenn Sie auf Control klicken, werden hier einfügen kopieren und wir können sie an den unteren Rand binden. Lassen Sie mich nur sagen, wenn Sie auf Control klicken, die Einschränkungen deaktiviert Sie können es ohne Einschränkungen vergrößern. Ohne Kontrolle gehört es dazu. Sie sehen, wovon ich spreche. Jetzt haben wir auf jeder Seite ein Element und es passt zu ihnen. Aber das ist keine perfekte Lösung. Eine bessere Lösung wäre, all diese Elemente in ein automatisches Layout zu integrieren. Dann, wie Sie jetzt sehen können, gibt es einen Wrap, der besagt, wenn nicht genug Platz vorhanden ist , legen Sie es ab, und dann müssen wir es responsiv einrichten. Aber gehen wir einen Schritt zurück und lassen Sie uns einfach all diese Dinge entfernen. Lassen Sie uns diese einfach löschen und einfach mit einem arbeiten. Jetzt gibt es verschiedene Einschränkungseinstellungen. Wir haben von links oben nach unten gesprochen, aber es gibt auch Mitte. Sie können es entweder von hier oder von hier abholen. Jetzt gibt es die Möglichkeit , links und rechts zu machen. Also, was hier passiert, ist von beiden Seiten unentschieden. Okay. Was Sie jetzt sehen, ist, dass es zerreißt oder das Element in ihm erweitert. Aber das ist eine der Optionen. Wir können das Zentrum machen. Nun, Mitte, dehnt es nicht das Element selbst aus, dehnt es es nicht aus, sondern versucht nur, es in der Mitte zu halten. Offensichtlich ist es nicht in der Mitte. Es ist da, mehr im ersten Drittel, und es versucht sicherzustellen, dass es immer im ersten oder zwischen dem ersten und zweiten Drittel ist. Das ist eine weitere Option und dann haben wir Skalierung. Bei der Skalierung geht es eher darum, sie auszudehnen. Es ist sehr ähnlich wie links und rechts, und es besagt im Grunde, dass es sich dehnt, so viel man nimmt. Wenn du es kleiner machst, wird es auch kleiner. Wir haben die gleichen Einstellungen für hoch und runter. Lass mich das einfach wie links einrichten. Dann können wir auch skalieren. Sie können sehen, dass es skaliert wird. Wir können alles oben und unten machen. Es dehnt es auch aus und wir können es mittig machen. Zentren versuchen, es in der gleichen Position zu halten , mehr oder weniger in der Mitte. Okay. Also das sind nur ein paar Optionen. Aber wie Sie feststellen, dehnt es sich nicht wirklich richtig aus, wenn wir es ausdehnen. Es wird verzerrt. Also können wir versuchen, dieses Problem zu beheben. Der Weg, dies zu tun, besteht darin, in dieses Element innerhalb dieses Rahmens zu gehen und auf die Objekte darin zu klicken. Nun, das ist kein automatisches Layout. Was wir hier gemacht haben, das waren alles automatische Layouts. Hier wollte ich Ihnen mehr über Einschränkungen beibringen. Auch dieser Rahmen hat kein automatisches Layout. Siehst du diesen Button? Es ist nicht umgeschaltet Wir werden dieses Bild auswählen und versuchen Einschränkungen dafür festzulegen, weil es eine Einschränkung hat, aber auch die darin enthaltenen Elemente haben Einschränkungen Fragen Sie sich selbst, was soll passieren, wenn wir den gesamten Rahmen erweitern ? Soll das Bild in der Mitte bleiben oder sollte es sich ausdehnen? Nun, ich denke, es sollte sich ausdehnen. Ich würde sagen, Maßstab. Lassen Sie uns jetzt sehen. Wie Sie sehen können, wird das Bild skaliert. Jetzt können wir den Fokus des Bildes nicht kontrollieren, wie Sie sehen, es ist zentriert. Wenn wir es ausdehnen, wird es natürlich nicht mehr sichtbar sein, um welche Art von Produkt es sich handelt. Aber ignorieren wir das vorerst. Wir können später bessere Bilder haben. Aber für den Moment ist das gut genug, wir haben diese Waage gemacht. Was ist mit oben und unten? Wenn wir es bewegen, sollte sich das Bild auch mit uns bewegen oder sollte es gleich bleiben? Nun, ich denke, wenn wir es kleiner machen, sollte es kleiner werden. Wie könnten wir das machen? Nun, lassen Sie uns Scale ausprobieren und sehen, wie es funktioniert. Okay, das ist nicht so schlimm. Lass uns etwas anderes ausprobieren. Was ist mit dem Zentrum? Nun, in der Mitte geht es aus dem Rahmen raus, was nicht gut ist, wir ignorieren diese anderen Elemente Jetzt werden wir zu ihnen kommen. Was ist mit oben und unten? Es geht nur darum, es zu versuchen. Also, ich mag hier oben und unten wirklich. Hier kann man den Unterschied erkennen. Der Grund ist zuallererst, dass es hier einen gleichen Raum lässt. Es macht es nicht kleiner und es verringert auch nicht die Ränder hier. Wenn wir es jetzt mit der Skalierung vergleichen, würde es so aussehen. Wie Sie sehen können, sieht es sehr ähnlich aus, aber zuallererst war dieser Bereich jetzt komplett kleiner, es gibt also keinen Platz mehr für den Text, und Sie können sehen, dass die Ränder hier auch kleiner geworden sind, die Abmessungen hier sind durcheinander Aber gehen wir zurück nach oben und unten. Wir wählen hier oben und unten aus. Und Sie können sehen, dass die Ränder von oben, links und rechts immer noch gleich sind und dieser Bereich für den Text intakt ist. Das ist perfekt. Wofür haben wir uns hier jetzt entschieden? Wir haben die Skala für rechts und links gewählt und für oben und unten haben wir uns für oben plus unten entschieden. Perfekt. Kommen wir nun zu diesen. Nun, eine Sache, die ich weiß, ist, dass das an der Unterseite festgemacht werden sollte. Das sollte immer im unteren Bereich bleiben und es sollte nicht in die Länge gezogen werden, wir werden nicht skalieren und wir werden nicht oben und unten vorgehen. Was wir tun werden, ist einfach unten. Lassen Sie uns es jetzt testen. Jetzt, egal wie sehr wir damit herumspielen, es wird im Boden bleiben. Was ist, wenn wir es nach rechts und links strecken? Es dehnt sich nicht? Nun, wir wollen, dass es sich dehnt. Das heißt, wir können skalieren oder wir können es rechts und links machen. Lass es uns testen. Aber ein Problem mit der Skalierung ist, dass man beim Skalieren den Abstand sehen kann, die Ränder hier werden auch größer, das Gleiche gilt für das Bild. Also wählen wir beide aus und geben sie links und rechts. Wenn wir sie jetzt skalieren, bleiben die Ränder intakt. Das ist perfekt. Lassen Sie uns nun herausfinden, was wir auch damit machen können. Eine Sache, die ich weiß, ist nach links gebunden werden sollten. Sie sollten nicht gerade ausgestreckt sein oder sollten sie vielleicht. Lass uns sehen. Lassen Sie uns sie vorerst an den Boden binden. Wir können sehen, dass sie an der Unterseite befestigt sind, was perfekt ist, und ich werde das auch an der Unterseite festbinden. Das sind die Einschränkungen, und sie funktionieren perfekt, wenn wir die Größe der Dinge in diese Richtung ändern. Bis hier, dann kannst du das Bild nicht mehr sehen. Aber bis hier ist es ziemlich gut, finde ich. Noch weiter als das, dann ist die ganze Sache durcheinander. Das ist das Minimum, wir können das als Mindestgröße festlegen, aber wie Sie sehen, können Sie es erweitern, viel größer machen, ohne Probleme Was ist mit rechts und links? Nun, mit denen gibt es kein Problem, aber vielleicht sollten die fünf nach rechts gebunden werden. können wir machen. Einfach mit der rechten Maustaste klicken. Jetzt geht der Preis immer nach rechts, ganz rechts, und diese bleiben links, was Sinn macht. Nun, bis hier. Das ist ein Problem. Leider kann ich das nicht ohne ein automatisches Layout lösen, dafür benötigen wir ein automatisches Layout. Wenn wir einfach zurückgehen, können wir diese hier in ein automatisches Layout einfügen und wir können links und rechts sagen. Jetzt werden sie sich ausdehnen und du kannst sehen, dass es genau hier aufhört und dann können wir es Ap sagen. Rap heißt, sobald es zu knapp ist, sollte der Preis sinken. Wie Sie jetzt sehen können, ist der Preis gesunken, aber es ist ein bisschen durcheinander weil die Einstellungen hier durcheinander sind Hier steht Auto, aber für den vertikalen Abstand sind es 58, was keinen Sinn ergibt Also machen wir 16 oder acht. Aber dann wird die Nummer durch den Knopf verdeckt Also am besten sollten wir auch den Knopf drücken, weißt du, ich werde nur Z kontrollieren, werde nur ein bisschen zurückgehen Um es noch einmal zusammenzufassen Wir machen aus diesem Abstand acht, und wir machen daraus ein automatisches Layout mit einer Zwei, und wir sagen links und rechts und binden es an die Unterseite Lassen Sie uns nun sehen, was passiert. Wir werden es viel breiter machen, funktioniert immer noch. Ungefähr zu klein. Jetzt funktioniert es, aber jetzt hat die Macha ein Problem. Esfix, wir nehmen die Macha, wir schneiden sie ab und wir fügen sie hier hinzu und wir platzieren Mit den Pfeiltasten können Sie es einfach nach unten oder oben oder einfach mit der Maus Ich werde nur den Abstand zwischen ihnen verkleinern, vielleicht vier. Schauen wir uns jetzt links und rechts unten an. Testen Sie noch einmal, breiter funktioniert. Was ist mit klein. Wie Sie sehen können, funktioniert es, aber es trifft immer noch auf das Bild, was ein Problem darstellt. Was mit unten ist, funktioniert perfekt. Alles klar. Der letzte Schritt ist also, das Ganze zu nehmen, es auszuschneiden und zu diesem Ganzen in das automatische Layout einzufügen . Und dann würden wir es, du weißt schon, testen. Lass es uns einfach ausprobieren. Jetzt erstreckt es sich bei uns nicht mehr nach links und rechts. Was ist mit unten? Es verlängert sich auch nicht. Was wir hier tun werden, ist, dass wir einfach darauf klicken und sagen, Behälter für rechts und links füllen, lassen Sie uns das einfach hier runterbringen. Okay. Also machen wir es jetzt breiter. Es funktioniert. Perfekt. Wie wäre es, es abzunehmen? Funktioniert nicht. Hier werden wir ihm auch sagen, dass er den Behälter von der Höhe her füllen soll. Jetzt funktioniert rechts und links rauf und runter funktioniert nicht. Der Grund dafür ist, dass wir die Einschränkungen ändern müssen und hier sagen wir oben und unten. Lass uns jetzt sehen. Perfekt. Diese sind nicht betroffen. diese Elemente sind nicht betroffen, aber das Bild wird größer und die Größe wird entsprechend dem Rahmen angepasst Ich denke, das ist eine ziemlich gute Lösung. Es ist immer noch begrenzt, wenn du soweit bist, aber ich denke, du solltest immer ein Limit für deine Karten haben. Ich meine, sie sollten nicht kleiner als eine bestimmte Anzahl sein. Wenn du deine Karte erstellst, solltest du das verstehen. Aber wir können das weiter optimieren , indem wir diese Füllung machen. Okay? Also fassen wir ein paar Lektionen zusammen, weißt du, aus der letzten Lektion, die wir hatten Und ja, ich benutze einfach diese beiden Dinge, Einschränkungen, und automatische Layouts, um das herauszufinden Okay? Vielleicht ist es Betrug, vielleicht auch nicht Aber ich denke, das ist die ideale Lösung. Ordnung. Also das ist eine Möglichkeit, es zu tun. Und hier können Einschränkungen sehr nützlich sein. Es ist die Tatsache, dass Sie ihm sagen können, wie es sich genau verhalten soll. Und jetzt können wir auch Einschränkungen für den gesamten Frame festlegen. Wenn wir also den Rahmen hier erstellen, wissen Sie, zum Beispiel einen Telefonrahmen, und ein Telefonrahmen ist normalerweise etwa 300, sagen wir, etwa 390 93, 393 breit. Wir können das machen. Wir können es so einstellen, dass es links und rechts ist. Also das ist für links und rechts, das sind die Einschränkungen, und für oben und unten wird es einfach oben sein. Wenn wir jetzt vom Telefon zum Tablet wechseln , wird genau das passieren. Es wird die Karte grundsätzlich erweitern. Dies ist eine Möglichkeit, dies zu tun. Eine andere Möglichkeit, dies wie zuvor zu tun , besteht darin, dies zu kopieren, einzufügen und als automatisches Layout zusammenzustellen. Wir können es sogar weiter kopieren und einfügen. So würde es auf einem Telefon aussehen. Dann werden wir sagen , dass das horizontal sein sollte. Wie Sie jetzt sehen können, ist es horizontal, aber es ist durcheinander, aber wir werden sagen, wickeln Es wird nicht eingepackt, es geht nicht runter. Der Grund dafür ist, dass sie so eingerichtet sind , dass sie ohne Mindestmaß gefüllt werden. Wir werden nein sagen, weißt du, es sollte ein Limit geben. Wie ich dir gesagt habe, sollte es ein Limit geben. Es sollte niemals unbefristet sein. Oh, es kann so klein wie möglich sein. Nein. Es muss zum Beispiel 200 als kleinste Grenze haben. Mal sehen, was jetzt passiert, wenn wir das hier Mobile nennen und dann werde ich es kopieren und einfügen. Dann sind das Breakpoints. Wir werden sagen: Okay, so würde es auf dem Handy aussehen Aber wenn wir dann auf das Tablet kommen, werden wir den Bildschirm vergrößern. Okay. Entschuldigung, wir werden es einfach reparieren , hat es vermasselt Wir werden die Einschränkungen beheben. Wir werden links und rechts sagen. Wenn wir das jetzt verlängern, wird es sich auch auf uns erstrecken, wie Sie sehen können. Das ist responsiv. Wenn Sie ein kleines Telefon haben, wird es so aussehen. Das ist das kleinste, was es kann. Ich kann es nicht kleiner machen. Wenn Sie ein größeres Telefon haben, wird es so aussehen. Wenn Sie ein Tablet haben, wird es so aussehen, wie Sie sehen können. Jetzt können Sie sehen, dass dies ein iPad M ist und dann ist dies ein richtiger iPad-Querformatmodus, was auch immer es ist. Jetzt haben wir einen sehr ähnlichen Effekt erzielt wie bei diesen automatischen Layouts. Wir haben es hier erreicht und das ist zum Beispiel der Tablet-Modus. Dies sind Breakpoints. Das nennen wir Breakpoints. Jetzt haben wir über Einschränkungen gesprochen. Breakpoints definieren bestimmte Zahlen, Breakpoints definieren bestimmte Zahlen bei denen Ihr Design auseinanderbricht oder nicht, aber von der mobilen Ansicht abweicht und in eine Tablet-Ansicht umgewandelt wird oder sich in eine Tablet-Ansicht verwandelt Was wir jetzt gemacht haben, war ein gutes responsives Design oder gutes Edge-Responsive-Design, weil wir es so eingerichtet haben, dass diese Elemente zusammenpassen ein gutes Edge-Responsive-Design, weil wir es so eingerichtet haben, dass diese Elemente zusammenpassen Wenn wir mehr Elemente hinzugefügt haben, wenn wir mehr Elemente zu diesem Rahmen hinzugefügt haben, sollten sie auch einrasten. Egal wie wir die Größe ändern. Aber alternativ könnten wir auf dem Tablet einfach sagen, es sollte so sein, auf dem PC sollte es so sein Nur um Ihnen ein Beispiel zu geben, lassen Sie uns eine viel breitere Version erstellen. Jetzt werde ich es erweitern und zeigen, wie es für den PC aussehen sollte. Das ist eher PC-Größe, Laptop-Größe. Aber was Sie hier feststellen, ist, dass dieser viel zu groß ist. Das ist ein Fehler, den wir hatten. Zuallererst haben wir kein Maximum für die Größe festgelegt . Wir können das Problem lösen, indem wir die maximale Breite für all diese Karten festlegen , oder wir können sie einfach manuell ändern. Wir können sagen, nur für den PC, ich werde hier PC schreiben, nur für den PC-Bildschirm sollten sie ein Minimum haben, nicht 200, sondern 300. Und dann sollten sie ein Maximum von 500 haben. Wenn ich noch eins hinzufüge, werde ich dir zeigen, wie es aussieht , als ob es nur 500 haben sollte. Wie Sie jetzt sehen können, unterscheiden sich die Elemente hier von hier. Sie haben unterschiedliche Mindest - und Höchstwerte Genau darum geht es bei Breakpoints. Es geht darum, anzupassen, wie die Dinge aussehen würden. Basierend auf der Bildschirmgröße, oder? Wie ich bereits sagte, ist es nicht möglich, ein Design zu erstellen, das vollständig, vollständig und vollständig responsiv ist. Es wird immer Probleme geben. Es wird einen Bildschirm geben, der viel zu klein oder viel zu groß ist. Ich selbst arbeite. Ich habe einen Ultrabreitbildschirm , der viel zu breit ist. Daher sehen die meisten Websites nicht genau richtig aus, und das ist völlig normal. Das passiert. Wenn Sie eine Website öffnen, ist sie meistens geschrumpft. Sie haben den Bildschirm so groß, und dann nimmt die gesamte Website nur den mittleren Teil oder vielleicht den linken Teil ein Das ist also üblich weil wir nicht sicherstellen können, dass Sie wissen, unser Design auf allen Geräten, allen Bildschirmgrößen zu 100% gut aussieht . Deshalb müssen wir einen Kompromiss eingehen. Dieser Kompromiss wird Breakpoints genannt. Und an diesen Grenzpunkten haben wir die Freiheit, Dinge anzupassen . Wir können sagen, weißt du was? Stattdessen zum Beispiel am Telefon. Nun, du kannst auf dem PC sehen, ich kann bis zu sieben Getränke sehen, oder? Auf dem Tablet sehe ich vier Getränke und zwei Hälften Auf dem Handy kann ich nur drei sehen. Dann können wir sagen, warte eine Minute, warte eine Minute. Vielleicht sollte das auf dem Handy keine Scrollbewegung zum Ansehen sein , vielleicht sollte es ein Slider sein. Dann deaktiviere ich den Zeilenumbruch und lasse ihn als Schieberegler so stehen, sodass Sie die Elemente von rechts nach links verschieben können . Viele Apps machen das und wir werden Beispiele dafür sehen. Dann können wir dir alle Getränke hier ansehen und dann können wir das kopieren, einfügen, und dann hast du hier andere Getränke, vielleicht andere Arten von Getränken oder eine andere Farbe. Hier hast du deine erste Option, du kannst sie durchblättern und ich kann dir zeigen, wie es aussehen würde. Ich werde es einfach einrichten und ich werde horizontales Scrollen sagen Und so würde es am Telefon aussehen. Das macht sehr viel Sinn. Vielleicht sollte das Telefon etwas länger sein. Dies ist sehr sinnvoll, da Sie verschiedene Kategorien sehen möchten und manchmal zeigt Ihnen das horizontale Scrollen viel mehr, wenn Sie einfach nach unten scrollen Anstatt drei große Karten zu sehen, sollten die Karten vielleicht klein sein Auch hier geben Ihnen Breakpoints die Freiheit, Ihre Inhalte je nach vorhandener Bildschirmgröße oder je nach vorhandener Bildschirmgröße anzupassen und anzupassen Ihre Inhalte je nach vorhandener Bildschirmgröße oder je nach vorhandener Bildschirmgröße anzupassen oder je nach vorhandener Bildschirmgröße Hier müssen Sie also keine horizontalen Schieberegler verwenden. Sie sehen bereits eine gute Menge auf Ihrem Bildschirm, also brauchen Sie das nicht Das ist also etwas, worüber man nachdenken sollte. Um also zusammenzufassen, was wir heute gelernt haben, lernen wir zwei Hauptkonzepte kennen, nämlich Einschränkungen und Grenzwerte. Einschränkungen sind im Grunde unsere Art Inhalte in einem Rahmen zu binden, um Figma mitzuteilen, an welche Seite dieses Rahmens dieser Inhalt gebunden werden soll, an den oberen oder unteren Rand oder an beides. Wenn wir diesen Bildschirm erweitern, Wenn wir diesen Bildschirm erweitern, soll das Element expandieren oder soll es an den oberen oder unteren Rand gebunden bleiben? Und genauso, rechts oder links, und das ist im Grunde das ganze Konzept Auf diese Weise können wir mit Figma kommunizieren die Dinge so einrichten, dass Elemente erweitert, ausgestreckt oder auf die richtige Weise bewegt werden können , ausgestreckt oder auf die richtige Weise bewegt Wir haben auch etwas über Breakpoints gelernt, die es uns ermöglichen, verschiedene Bildschirmgrößen zu erstellen und für jede Bildschirmgröße ein anderes Aussehen einzurichten Für das Handy hat es ein anderes Aussehen für Tablets, anderes Aussehen und für den PC ein anderes Jetzt sind es normalerweise nur diese drei. Sie müssen nicht weiter gehen und sagen großer PC-Ultra-Wind-Monitor. Nein, das brauchst du nicht. Und meistens kannst du es auch so einrichten, dass du alles, was kleiner als diese Größe ist, sagen kannst , bis 393 oder so, 393-530, das wird alles mobil sein Nur um das ein bisschen besser zu verdeutlichen. Das heißt, dass alles, was die Breite angeht, über 393 und weniger als 530 diesem Design entsprechen sollte. Dann alles zwischen 530, angefangen bei 530 oder welcher Zahl wir auch immer eingerichtet haben, diese Zahlen sind einfach zufällig. Ich suche sie einfach nach dem Zufallsprinzip aus. 530-1200, der Bildschirm wird als Tablet-Bildschirm betrachtet und folgt genau diesem Design-Look Sobald es von einem Bildschirm mit einer Bildschirmgröße von 1274 oder höher geöffnet wird, sollten diese Regeln befolgt werden Das hat also im Grunde seine Grenzen, aber wenn wir mit automatischen Layouts arbeiten, vermeiden wir viele dieser Einschränkungen Mein Rat an Sie ist, beide Best Words zu verwenden , automatische Layouts zu verwenden, Einschränkungen und Breakpoints zu verwenden, um das absolut beste Design zu erstellen und keine Kompromisse einzugehen, wenn es um die Reaktionsfähigkeit geht Weil wir versuchen sollten, so viel wie möglich die maximale und beste Reaktionsfähigkeit zu erreichen die maximale und beste , und dann können wir Schluss machen. Aber nur mit Einschränkungen zu arbeiten ist zu einschränkend und nur die Arbeit mit automatischen Layouts ist auch immer noch zu einschränkend Versuchen Sie also, diese beiden Dinge zu verwenden. Nun, um Ihnen ein Beispiel zu geben, ein letztes Beispiel, was Sie mit Einschränkungen machen könnten. Es ist ein ganz besonderer Fall dessen, womit wir normalerweise arbeiten. Es muss nicht auf diese Weise gemacht werden, aber das ist eine Möglichkeit, es zu tun. Fügen wir nun hier einen McPro 16-Zoll-Bildschirm hinzu. Nehmen wir an, wir entwerfen eine Website Diese Website wird normalerweise eine Navbar haben Ich erstelle hier einen Rahmen und gebe ihm eine Farbe, also sollte er vielleicht grün sein Normalerweise hätten wir ein Logo. Aber statt eines Logos füge ich einfach diesen Kreis, diese Ellipse Das ist momentan unser Logo. Lassen Sie uns daraus ein automatisches Layout machen. In diesem automatischen Layout befindet sich ein Rahmen, und dieser Rahmen ist unsere Navbar Nennen wir es Navbar. Es hat unser Logo hier. Ich nenne es Logo. Und dann hat es ein paar Menüpunkte. Ich könnte sagen, es könnte Arbeit oder Kunstwerke oder so etwas bedeuten. Du kannst daraus 24 machen. Das macht eine sehr große Navbar. Dann heißt es hier Team Au us. Und dann haben wir Kontakt. Dann haben wir vielleicht einen Knopf. Ich kopiere das, füge das ein, mache dieses automatische Layout mit Shift und A und gebe ihm dann eine Farbe und dann wähle ich diesen Klick I, um die Pipette zu verwenden, wähle hier die Farbe und dann mache ich diese Runde mit einem Eckenradius wähle hier die Farbe und dann mache von acht oder vielleicht 24 und dann mache ich diese 16 und dann mache ich es von oben und runter Auf der Schaltfläche sollte „Einen Termin buchen“ stehen. Ich werde sie hier nach rechts bringen . Fangen wir links an. Jetzt haben wir dieses Menü hier drüben und wir werden es überprüfen und sehen , dass es 1728 breit ist Aber was ich tun werde, ist , all diese auszuwählen und sie einzurahmen. Ich werde sie einrahmen, keine automatischen Layouts. Im Moment versuchen wir, so viel wie möglich nicht mit automatischen Layouts zu arbeiten. Das Wichtigste zuerst, jetzt haben wir einen Rahmen. Darin heißt es NAB-Leiste. Nennen wir das Essential Navbar Essential Navbar Items Dann haben wir diese Punkte und wir haben diesen Rahmen , der unser Aufruf zum Handeln ist, CTA , wir werden das einrichten Wir werden diese auswählen und dann weitermachen und auf diese Schaltfläche klicken Sobald Sie viele Elemente ausgewählt und auf diese Schaltfläche geklickt haben, werden die Abstände zwischen ihnen ausgeglichen Ich werde sie alle auswählen und sie nach rechts ausrichten Anstatt sie nach oben auszurichten, werden sie zur Mitte ausgerichtet Und dann werde ich sie einfach ganz rechts vom Rahmen platzieren , sodass Sie sehen können, dass der Rahmen genau hier ist, und ich werde sie auch zentrieren , sie in die Mitte stellen Jetzt sind sie im Rahmen zentriert. Ähnlich werde ich es auch hier nach links ausrichten. Es ist bereits ausgerichtet und ich werde es in der Mitte machen. Also lass es uns testen. Wenn wir hier die Größe ändern, passiert nichts, aber wir müssen die Größe des inneren Navbar-Elementrahmens ändern des inneren Navbar-Elementrahmens Sie können sehen, dass es funktioniert, und wenn wir es nach rechts drehen, funktioniert es. In Ordnung. Also, was wir jetzt tun werden, ist, diese wichtigen Navbar-Elemente auszuwählen und die Einschränkungen dafür festzulegen Wir sagen links und rechts, links und rechts, und wir werden sagen , dass es auch oben und unten geben wird Was jetzt passiert, ist, wenn wir das erweitern, wird es mit ihnen kommen, es wird zentriert sein. Und wenn wir es nach rechts ausdehnen, wird es dazu passen. Aber was wir tun werden, ist dass es jetzt als Füllung eingerichtet ist. Die gesamte Navigationsleiste ist als Fill eingerichtet. Bedenken Sie nun, dass wir diesen 16-Zoll-Bildschirm des MacBook Pro haben diesen 16-Zoll-Bildschirm des MacBook Pro Aber was wäre, wenn es kleiner wäre? Siehst du das? Jetzt haben wir die Navbar so eingerichtet, dass diese Elemente auf der rechten Seite und das Logo auf der linken Seite bleiben und das Logo auf der linken Seite Und was ist, wenn es größer ist? Nun, es wird immer noch gut aussehen. Ich meine, von hier aus wird es ein bisschen leer aussehen , aber das ist völlig in Ordnung. Aber es gibt ein Problem, denn wir erst einmal die Größe erreicht haben, wenn wir erst einmal die Größe erreicht haben, sollten Sie einen Breakpoint haben solltest du sagen, wann es soweit ist , dann wird es zum Tablet-Modus oder sogar zum Telefonmodus Das ist der Zeitpunkt, an dem wir anfangen, den Bildschirm als Tablet und nicht als PC zu betrachten . Dann können wir anstelle dieser horizontalen Navigationsleiste ein Burger-Menü verwenden anstelle dieser horizontalen Navigationsleiste ein Burger-Menü Aber das ist eine Lektion für ein anderes Mal. Aber wir haben ein anderes Problem Wenn wir es zu weit ausdehnen, sagen wir, Sie haben einen weißen Bildschirm wie meinen, dann haben Sie all diese Optionen auf der einen Seite und das Logo auf der anderen Seite, es sieht ein bisschen durcheinander Wie können wir das beheben? Nun, es gibt eine Möglichkeit, das zu beheben. Der Weg, das zu tun, besteht darin, im Grunde die innere Nickerchenleiste, die wesentlichen Elemente der Nab Bar, einzurichten die wesentlichen Elemente der Nab Bar und zu sagen, dass diese eine maximale Breite haben sollte Aber das geht nur, wenn wir der Navbar selbst ein automatisches Layout machen Wir müssen automatische Layouts verwenden. Sobald wir das getan haben, werden Sie hier einige Einschränkungen sehen, wir können diese anpassen, wir können die 16, 24 machen , es liegt an Ihnen. Dann wählen wir hier genau das aus , die innere Navbar, die wesentlichen Navbar-Elemente , und wir werden sagen, die maximale Breite von 1.400 hinzufügen Okay. Dann richten wir es so ein, dass es den Behälter füllt, und wir werden sicherstellen, dass der NAP-Balken, der gesamte Rahmen, in der Mitte zentriert ist. Es ging nach links, wir haben es einfach zentriert. Beobachten Sie jetzt, was passiert, wenn wir es erweitern , oder beobachten Sie, was passiert , wenn wir es verkleinern. Nun ja, bis zu einem gewissen Punkt passt es sich immer noch richtig an, was wir hatten Nun, was haben wir davon profitiert? Warum mussten wir das automatische Layout verwenden? Nun, jetzt, wo wir es so viel breiter machen, hört es auf. Wie Sie sehen können, hat es an einem bestimmten Punkt aufgehört zu wachsen und dieser bestimmte Punkt ist genau 1.400, weil das das Maximum ist, das wir festgelegt haben Nun, was ist die ganze Aufregung? Warum haben wir das getan? Nun ja, der Hauptgrund Sie das tun könnten , ist sicherzustellen, dass jemand, der einen größeren Bildschirm sein Erlebnis nicht nach links verlagert weil diese Extreme die Person daran hindern, die Navigation richtig zu sehen Als Faustregel gilt normalerweise, dass Sie ein Maximum festlegen könnten oder sollten, sodass alles, der größte Teil des Seiteninhalts, in der Mitte bleibt Ich würde dies sogar für den größten Teil des Inhalts empfehlen. Wenn Sie eine Website oder eine App oder ein Programm haben oder was auch immer es ist, sollte es nicht bis zum Äußersten reichen, es sei denn, der Anwendungsfall ist etwas professioneller Zum Beispiel Figma selbst, wenn Sie einen Breitbildschirm haben, verwenden Sie den Breitbildschirm, um mehr Platz zum Arbeiten zu haben Und dann können Sie diese Fenster auf der linken Seite haben. Es ist in Ordnung. Sie müssen nicht zentriert sein. Was zentriert werden muss, ist Ihre Arbeit. Aber in einem solchen Fall müssen Sie es aus der Perspektive der Benutzererfahrung betrachten. Sie müssen es aus der Perspektive der Benutzer selbst denken . Wenn es um eine Website geht, ist die Navigation einer der wesentlichen Bestandteile. Inhalt Ihrer Website. Wenn es ein Bild gibt, wenn es einen Text gibt, möchten Sie, dass dieser Text sichtbar und lesbar ist Sie sollten in der Lage sein, es zu lesen und die Website zu erleben Der beste Weg, das zu tun, besteht darin, es mehr oder weniger in der Mitte zu halten, nicht vollständig ausgestreckt. Lassen Sie mich erklären, was ich meine. Wenn wir hier ankommen, machen wir es klein für ein Tablet, und dann fügen wir hier etwas Text hinzu und wir sagen, ich weiß nicht, ich werde einfach KI verwenden. Schreiben Sie 600 Wörter über Delfine. Jetzt bitte ich dich, etwas zu schreiben, und es ist etwas sehr Langes zu schreiben Also werde ich es auf 300 beschränken. Okay. Jetzt ist es mit dem Schreiben fertig. Im Moment ist es in diesem automatischen Layout. Ich werde daraus ein eigenständiges automatisches Layout machen indem ich auf Shift und A klicke , nur um es etwas aufzufüllen Nehmen wir nun an, das ist Text auf Ihrer Website. Jetzt können Sie diesen Rahmen auswählen und schon ist er so eingestellt, dass er gefüllt wird. Wenn Sie dies nun erweitern, der Text mit ihm erweitert, was ziemlich cool ist, weil Sie jetzt viel mehr Platz zum Lesen haben. Nun, was wäre, wenn dein Bildschirm wirklich breit wäre? Das ist extrem schwer zu lesen, denn an diesem Punkt müssen Sie jetzt ganz von links bis dorthin lesen und dann wieder zurückgehen, und das ist ziemlich anstrengend Die meisten Websites passen sich an breitere Bildschirme an, indem sie ein Limit festlegen Ich spreche nicht von wirklich, wirklich breiten Bildschirmen. Ich meine, genau hier haben wir 2.600. Aber selbst 1.600, 1.800, 900, es gibt eine Menge solcher Bildschirme, und das ist immer noch Die Lösung dafür besteht darin, dieses automatische Layout zu wählen und ihm ein Maximum von 1.400 oder 1.200 oder was auch immer Sie wollen zuzuweisen, und Sie können es links oder vorzugsweise mittig nach oben, in der Mitte ausrichten vorzugsweise mittig nach oben, in der Mitte und dann schauen , Egal wie groß Ihr Bildschirm ist, Sie werden immer noch den Text in der Mitte finden , der etwas einfacher zu lesen ist Wenn Sie ihn verkleinern, wird es nicht diesen weißen Bereich geben, diesen leeren Bereich rechts und links. Es wird sich anpassen. So würde es auf einem Tablet aussehen, immer noch lesbar und es gibt keinen verschwendeten Platz auf der rechten oder linken Seite und so weiter So funktioniert es im Grunde. Verwenden Sie Einschränkungen, verwenden Sie Layouts, um Ihren Text lesbar zu machen und ihn für alle Arten von Bildschirmen anzupassen Aber wie wir bereits erwähnt haben, ist die Verwendung von Breakpoints eine großartige Sache, ist die Verwendung von Breakpoints eine großartige Sache da sie Ihnen hilft, diese Situationen zu vermeiden Sie können nicht zeigen, wie es auf dem Telefon aussehen würde , weil das Menü völlig durcheinander ist Sie benötigen also ein mobiles Daran sollten Sie denken. mobile Menü ermöglicht es Ihnen einen Haltepunkt einer mobilen Version zu haben. Eine mobile Ansicht kann Ihnen helfen, diese Navbar zu ersetzen , anstatt hier dieses überlappende Chaos zu haben Aber ich wollte euch nur zeigen, wie ihr eine Navbar mit automatischen Layouts und Einschränkungen erstellen könnt eine Navbar mit automatischen Layouts So funktioniert es im Grunde, und stellen Sie sicher, dass Sie die Maxima und Minima sowie die Einschränkungen und Breakpoints verstehen Minima sowie die Einschränkungen , weil sie Um ein Design auf einer g 9. Reales responsives Abschnittserstellung: Hallo zusammen. In dieser Lektion verwenden wir dieses Design, das ich in den Community-Formularen gefunden habe und das öffentlich verfügbar ist. Jemand hat es gemacht. Danke, Fremder. Ich werde versuchen, daraus mehr oder weniger ein responsives Design zu machen , indem ich die Konzepte verwende , die wir über die Techniken und Konzepte gelernt haben, die wir kennengelernt haben, einschließlich automatischer Layouts, Einschränkungen und Breakpoints Wir haben nicht viel Zeit. Ich werde versuchen, das sehr schnell zu machen. Wie Sie bereits sehen können, fehlt diesem Design sehr viel. Es funktioniert nur mit Gruppen und ohne automatische Layouts oder ähnliches . Das kannst du hier sehen. Ich glaube, hier gibt es ein automatisches Layout , aber, weißt du, es ist nur ein Button oder so. Also würden wir jetzt natürlich von vorne beginnen. Wissen Sie, wir würden damit beginnen, Schaltflächen zu erstellen, die konsistent sind und so weiter. Aber das werde ich nicht tun. Ich werde einfach mit dem arbeiten, was ich habe, nur um dir einen kleinen Einblick zu geben, wie es aussehen könnte Ich werde das einfach kopieren und einfügen , damit wir eine Originalversion haben und dann quasi eine bearbeitete Version, okay? Lassen Sie uns das als Erstes zum Flow-Ausgangspunkt machen, und ich möchte sehen, wie es aussieht. Also möchte ich es mir in der Vorschau ansehen und sehen, wie es auf meinem Bildschirm aussieht. In Ordnung. Also das Wichtigste zuerst, wir werden versuchen zu verstehen, was hier mit diesem Abschnitt vor sich geht. Ich kann sehen, dass hier ein Bild mit Text und diesem Bild darüber ist. Nun, es ist völlig in Ordnung, diese Art von Gruppe zu verwenden, aber das sollte überhaupt keine Gruppe sein . Also lass es uns überprüfen. Jetzt sehen wir zuerst, dass dies ein Bild im Hintergrund ist und dann gibt es eine Überlagerung darüber und dann ist da noch dieser Text Also das Wichtigste zuerst, ich werde damit beginnen das grob nachzubilden, und ich werde versuchen zu sehen, wie nah ich herankommen kann Also haben wir die richtige Breite gewählt, und das ist fast richtig Also werde ich versuchen, den Radius zu sehen. Also hier sind es sechs. Also werde ich mir das Bild holen. ich die Taste gedrückt halte, wähle ich die Füllung aus, füge sie hier hinzu, und dann haben wir diese lineare Füllung. Ich werde es oben hinzufügen, aber ich werde sicherstellen, dass es mehr oder weniger ähnlich ist , so etwas in der Art. Dann nehme ich den Text hier. Das scheint zu sein, ist das eine Gruppe? Das ist eine Gruppe, also werde ich sie hierher bringen. Und ich werde ein automatisches Layout erstellen , indem ich Shift und A gedrückt halte. Jetzt ist es nicht mehr eine Gruppe, sondern ein automatisches Layout mit vier Abständen. In der Zwischenzeit ist dies kein automatisches Layout, also werde ich es in ein automatisches Layout umwandeln und dann wird es so aussehen. Ich nehme hier nochmal die Maße und mache die richtige Größe und auch die Breite ist 270. Zuallererst werde ich nur sicherstellen, dass das Bild nicht beschnitten ist, sondern gefüllt sein sollte Auch wenn es nicht eins zu eins aussieht, stellt Fill sicher, dass das Bild bei einer Größenänderung kein Problem darstellt Sie sehen, wie das aussieht. Das ist problematisch. Deshalb müssen wir die ausgefüllte Option verwenden. Wenn wir das verwenden, sollte es kein Problem geben. Dann werden wir sicherstellen, dass der Text an der richtigen Stelle ist, also werden wir ihn platzieren und wir werden sicherstellen, dass auch der Abstand und die Polsterung richtig sind Lassen Sie uns 16 mal 16 daraus machen und Feierabend machen. Jetzt haben wir die gleichen Abmessungen. Ich werde daraus eine Komponente machen und ich sage Artikelkarte. Ich werde es hier ersetzen und ich werde es einfach hier einfügen. Dann werde ich mit diesem Bild eine weitere Version direkt darunter erstellen . Ich nehme einfach die Füllung, füge sie hier ein, entferne die alte Füllung, füge das Bild hier ein und mache wieder diese Füllung, keine Stütze Dann werden wir sehen, wir werden diesen Text kopieren. Die Schrift hier ist anders, also werde ich sie einfach durch Monster Rot auf der ganzen Seite ersetzen . Okay. Das mit Montserrat tut mir leid. Ersetze es auf der ganzen Seite, wähle Stil Sollte ein mittelgroßer Ersatz sein. Es sieht nicht sehr ähnlich aus, ist aber okay. Keine Probleme. Dann heißt es heute hier. Ich werde sie einfach löschen und ich werde sie bringen und sie in ein Autolayou bringen , indem ich die Shift-Taste in A gedrückt halte. Dann siehst du Es ist innerhalb einer Gruppe. Ich werde es aus der Gruppe entfernen und ich werde es hier hinzufügen. Der Abstand hier ist 23. Wir machen 24 draus, nur damit wir eine richtige Zahl haben. Dann haben wir das hier. Nun können wir uns dafür entscheiden, das mehr oder weniger als ein Bild beizubehalten , das liegt an uns, weil es ein bisschen ist und es sich nach links ausdehnt, was für mich ein bisschen problematisch ist. Eine Sache, die wir tun können, ist, dass wir das jetzt als automatisches Layout haben können . Also klicke ich einfach auf Shift und A. Anstatt dass es eine Gruppe ist, ist es jetzt ein automatisches Layout, und dann haben wir diesen Typen und das, all diese Dinge, ich mache daraus einen Rahmen, klicke mit der rechten Maustaste und dann sagen wir Rahmenauswahl. Was ich tun werde, ist , sie zu erstellen. Ich werde das Seitenverhältnis hier sperren, indem ich hier klicke. Wenn wir die Größe ändern, ich meine, wenn wir sie aus einem Frame herausnehmen, werde ich es entfernen, indem ich die Rücktaste gedrückt halte , und ich werde sie zu einer Gruppe mit Kontrollgenen machen einer Gruppe mit Kontrollgenen Ich werde das Seitenverhältnis sperren , sodass sie, wenn wir ihre Größe ändern, im Grunde nicht verzerrt Dann können wir die Einschränkungen nach rechts, diese nach links und diese nach links machen und dann schauen wir uns an, wie es aussieht, wenn die Rückseite es vergrößert Ich denke, es ist nicht so schlimm, oder? In Ordnung. Im Moment ist es nicht so schlimm. Jetzt können wir sie zu einem automatischen Layout zusammenfügen , Shift und A gedrückt halten. Jetzt werden sie natürlich ein bisschen anders angeordnet Jetzt werden sie natürlich ein bisschen anders angeordnet, aber jetzt sind sie ein automatisches Layout Lassen Sie uns nun herausfinden, was mit dem Menü los ist. Hier, das ist ein Rechteck. Das Erste, was wir tun werden ist, das zu löschen. Wir haben kein Rechteck im Hintergrund. Wir haben nur einen Rahmen. Halten Sie F gedrückt, erstellen Sie einen Rahmen , und dann enthält dieser Rahmen all diese drei Elemente. Wir werden das in ein automatisches Layout umwandeln. Einfach so wurde sichergestellt, dass der Abstand und alles korrekt und richtig sind. Dann werde ich sie halten und daraus ein inneres automatisches Layout erstellen, falls du dich daran erinnerst, was ich beim letzten Mal gemacht habe. Ich werde sagen, dass die maximale Breite 1.400 sein sollte. Wir können es noch kleiner machen als 200 und wir werden es so einstellen, dass es den Behälter füllt Wir werden das auch einstellen, ich meine, jetzt, noch nicht, aber wir werden dafür sorgen, dass es später den Behälter füllt. Wir werden es füllen, wir werden es weiß machen. Wenn Sie feststellen, dass der Hintergrund ein wenig cremefarben ist. Lass uns überprüfen, wie es jetzt aussieht. Okay. Nett. So anders sieht es nicht aus. Ich werde das in ein festes Menü überführen. Weil ich das mag. Weißt du, jetzt kommt es bei uns runter und es geht weiter. Eine Sache, die ich daran nicht mag, ist, wie ein Button aussieht, aber normalerweise sollte es ein Feld sein. Ich werde es einfach erweitern und es linkszentriert machen, und ich werde es ein bisschen lesbarer machen. Ich werde den Text hier so gestalten, ihm dieselbe Farbe geben, ihn aber etwas dunkler machen. Und vielleicht kann ich den Hintergrund etwas heller machen. Das sieht eher danach aus. Jetzt sieht es nicht mehr wie eine Schaltfläche aus, es sieht aus wie ein Feld. Okay. Ich kann den Behälter auch einfach füllen. Im Moment können wir hier sehen, dass es 101 gibt. Statt 101 werde ich es Auto machen. Auto erzeugt lediglich automatische Abstände. Sie sehen, dass die Sportnachrichten zu umfangreich sind. Ich werde dafür sorgen, dass es sich umarmt. Lassen Sie mich hier einfach die Schrift ersetzen. Ich gebe ihr einfach eine andere Schrift. Ordnung. Das Problem ist, dass alles nah beieinander liegt, was für mich ein Problem darstellt. Versuchen wir es also herauszufinden. Statt Auto können wir ihm 24 geben. Nun wollen wir sehen, wie es aussieht. Es sieht ein bisschen besser aus. Wir können es sogar 36 schaffen. Das sieht etwas natürlicher aus. Ein bisschen geräumiger. Jetzt haben wir diesen Abschnitt herausgefunden. Hier, was können wir tun? Versuchen wir es zu verstehen. Hier haben Sie ein Rechteck mit Fußball drin, was schon eine Katastrophe ist Ich werde stattdessen einen Rahmen erstellen Dieselbe Farbe, ich gebe ihm einen Radius und füge diesen Fußball hinzu. Jetzt haben wir dieses Element hier einfach ersetzt. Wir werden dasselbe für die anderen tun. Kopiere das, füge es und ich werde stattdessen Basketball spielen. Wir können das auch zu einem Autoayp machen, und ich werde hier einfach die gleiche Länge haben und ich lösche das und das Da haben wir's. Platziere es hier und spüle es ab und wiederhole es. Es muss nicht perfekt sein. Nein, das sind nur Bilder, also können wir sie nur als Bilder behalten. Das ist völlig in Ordnung. Okay? Also, was ich tun werde, ist, anstatt sie direkt nebeneinander zu platzieren, ich werde zuerst sagen, lass mich zuerst, wähle einfach diese ganze Gruppe aus und ich werde sie zusammenklappen. Ich werde die Gruppe entfernen und ihre Gruppierung aufheben, indem ich die Strg- und Rücktaste gedrückt halte Dann wähle ich diese aus und mache daraus ein automatisches Layout, diese, aber dann als automatisches Layout, korrigiere den Tippfehler hier. Es spielt keine Rolle Hier, automatisches Layout hier. Hier sehen Sie, dass es auch das gleiche Problem gibt, wenn sich darin ein Bild befindet. Wir vergrößern einfach das Bild, vergrößern es und ich mache es schwarz darunter, oder ich lasse einfach die Farbe hier fallen und gebe sechs. Jetzt braucht dieses Bild diesen Hintergrund nicht . Dann werde ich diese zusammenstellen. Jetzt sollten die Abstände idealerweise ähnlich sein. Hier ist es 31, 30, 31. Lass uns einfach all diese 36 machen. Wie wär's damit? Wir setzen sie zusammen und machen aus der ganzen Sache ein automatisches Layout Ich werde nur sichergehen, dass sie alle an den Rand kommen. Fast. Ich sehe hier, dass es hier einige unnötige Elemente gibt. Ich werde alles auswählen und dann werde ich dieses automatische Layout abwählen Ich habe alles hinter ihnen gelöscht. Gut. Hier heißt es Kategorie und dann mache ich daraus ein automatisches Layout und der Abstand hier ist 16. Gut. Erinnern wir uns daran. Nun, ich werde sie einwickeln , damit sie , falls ich sie je kleiner mache, einfach so einwickeln. Wir können sie auch so einrichten, dass sie gefüllt werden. Das können wir auch tun. Das liegt an uns. Sie können sehen, dass es voll ist. Aber wenn wir das tun, müssen wir sicherstellen dass sie nicht beschnitten, sondern gefüllt sind Nun, das wird natürlich ein wenig von der Rahmung ablenken , die derjenige, der das getan hat Aber jetzt müssen wir dieses Risiko eingehen, kein Problem Ich muss es auch hier machen. Ordnung. Es sieht nicht schlecht aus. Aber lassen Sie uns sicherstellen , dass es ein Minimum gibt. Wir sagen, ein Minimum sind 200. Sobald wir sie zu klein machen, brechen sie einfach zusammen und geraten unter einander. Ich finde, das sieht ziemlich gut aus. Ziemlich ordentlich. Das ist eine ziemlich nette Reaktionsfähigkeit. Hier kommen wir zu einem weiteren schwierigen Teil. Wir wählen sie zusammen aus und machen daraus ein automatisches Layout mit gleichmäßigen Abständen. Ich meine, das müssen wir nicht tun. Wir können diese selbst zu einem automatischen Layout machen. Das sind also vier und damit ist der Abstand 12. Und dann machen wir damit ein automatisches Layout. Der Abstand ist automatisch, sollte es am besten nicht sein. Ich meine, lass uns 16 draus machen. Also nehme ich das, Kaffee, füge es ein, mache es zu einem Bestandteil und sage , vertikal oder horizontal, es ist keine Karte. Wir haben Artikelkarte, Artikel horizontal, und dann lösche ich das hier drüben, als Basis. Perfekt. Dann kopiere ich es und nehme den Text hierher. Es gibt hier viele verschiedene Schriftarten , die sie verwenden und die ich nicht schätze, weil es lange dauert, sie herauszufinden. Ich werde dieses Monster Rot, halb fett, einfach wiederholen. Okay. Okay. In Ordnung. Also haben wir das kopiert, oder? Nein, tut mir leid, wir haben das nicht kopiert. Kopiere das, füge es ein. Bum. Wir nehmen das Bild, indem wir die Strg-Taste gedrückt halten, fügen es ein, entfernen es, kopieren und fügen den Text wieder ein, fügen ihn wieder ein, nehmen diesen Text, fügen ihn hier ein, nehmen diesen Text, legen nehmen diesen Text, fügen ihn hier ein, ihn hier ab, und dann haben wir auch das Bild, nehmen es, fügen es ein, bumm. Jetzt löschen wir diese beiden Versionen und fügen sie hier ein. Okay. Und jetzt werden wir diese mit den Unterteilungen auswählen diese mit den Unterteilungen und ich werde daraus ein automatisches Layout machen , und ich werde sie nach rechts verschieben Sie werden nach rechts ausgerichtet sein. Sie können also den gleichen Abstand sehen, den sie hatten. Wir können zwar zum Beispiel den Abstand festlegen, aber wir können technisch gesehen dafür sorgen, wir können technisch gesehen dafür sorgen dass er den gesamten Teil so oder einfach so ausfüllt. Ich meine, mir hat gefallen, wie es war. Kein Problem. Und dann haben wir dieses Bild hier. Sie müssen an alles in Bezug auf automatische Layouts denken. Ist es horizontal oder vertikal ausgerichtet? Diese sind vertikal ausgerichtet. Dies ist vertikal auf sie ausgerichtet. Du siehst, das ist acht, aber hier waren es 16, vielleicht solltest du es 16 machen, oder? Dann haben Sie diese horizontal ausgerichtet. Aber zuerst müssen wir daraus ein automatisches Layout machen. Wir werden das tun, indem wir dieses Bild erstellen. Wir werden den Text nehmen. Ich meine, lassen Sie uns sehen, was das ist, legen Sie es zur Seite. Nimm das Bild, mach es mit sechs abgerundeten Radien und nimm diese Füllung. Es liegt bei 60%. Machen Sie die 60%, entfernen Sie die weiße Füllung und dann nehmen wir diesen Text und legen ihn oben auf dieses Layout. Wir werden ein automatisches Layout mit Shift und A erstellen. Wir werden 12 statt 14 daraus machen. Sie können sehen, dass dieser Text zu groß ist, also werde ich ihn einfach umarmen Es scheint, als würden wir einfach den Text ändern. Montserrat, fett, mach es extra fett oder so. Okay. Keine Probleme. Jetzt nehmen wir die Sache mit der Kategorie, wir stellen sie auf. Jetzt nehmen wir das und machen aus der ganzen Sache ein automatisches Layout. Nun, Figma ist intelligent, der Abstand, versucht, ihn ähnlich zu machen, so dass das oben und das unten ist, aber es macht 358 Stattdessen sagen wir einfach Auto. Auto bedeutet, egal wie groß es ist, der Radverkehr wird steigen und dieser wird sinken. Mir ist gerade aufgefallen, dass sich das Bild dehnt, also werden wir es wieder gut füllen und wir werden sehen, was wir noch tun können. Wir machen diese Werte richtig: 16, 16 oder 24, 24, und wir werden das ganze Chaos hier löschen. Jetzt werden wir das ins Rampenlicht rücken. Wir werden es dehnen und wir werden dieses Feld löschen und stattdessen einen Rahmen erstellen. Dieser Rahmen wird all diese Elemente enthalten, wie Sie sehen können, und wir werden daraus ein automatisches Layout machen. Wir werden das darin einbeziehen müssen. Wir werden das in den Rahmen einbauen. Da haben wir es. Wir werden das Ganze zu einer automatischen Ebene machen und dann werden wir sie hier erweitern. Wir werden dafür sorgen, dass beide einen Füllbehälter haben. Sie werden sich 50 50 teilen. Das wird passieren. Aber wir werden sicherstellen, dass es rechts und links eine Polsterung Lassen Sie uns eigentlich keine Innenabstände erstellen, weil das Bild keine Polsterung benötigt, aber wir haben daraus eine eigene automatische Ebene gemacht, also geben wir dieser einen eigenen oben und unten links und rechts, und dann machen wir den Abstand zwischen ihnen Okay. Und wir geben diese Farbe an, die, glaube ich, diese Farbe ist, und sie muss einen Eckradius von sechs haben. Aber Sie können sehen, dass es hier ein bisschen Abstand gibt. Wir können diesem Bild also sagen , dass es auch die Höhe ausfüllt. Jetzt füllt es die Höhe , sodass es keine Abstände nach oben und unten gibt. Sie können sehen, das sieht ziemlich gut aus, ziemlich ähnlich. Ich meine, hier gibt es ein bisschen mehr Abstand. Wir können das 36, 36 machen. Ich denke, es ist ähnlicher und es gibt weniger Abstand zwischen dem Bild und dem anderen Text. Wir können es zu zweit machen. Oder so ähnlich. Okay? Gut. In Ordnung. Großartig. Nun, was wir tun werden, ist sicherzustellen, dass das auch responsiv ist. Was passiert, wenn wir es zu klein machen, das passiert. Das ist nicht ideal. Wir werden also Mindestwerte dafür schaffen und wir werden Mindestwerte dafür sagen, wenn sie 400 erreichen, müssen sie zusammenbrechen oder sie müssen untereinander untergehen, ich meine, wir klicken auf Mist, um sicherzustellen, dass das passiert Lassen Sie uns das jetzt überprüfen. Okay. Nett. Aber dieser Teil reagiert überhaupt nicht , also lasst uns daran arbeiten. Also werden wir sie anklicken und sie ausfüllen lassen, wofür sie bereits eingerichtet sind . Aber wir stellen fest, dass manche Dinge nicht funktionieren. Es kann also hier auf der Komponentenebene liegen , und das ist wahr. Also hier ist nichts eingerichtet. Also lassen wir sowohl das Bild als auch diesen Text, diesen Rahmen, beide füllen, also teilen sie sich eine 50 50, und dann kommen wir zum Text, und er ist hier schon gefüllt, hier ist er schon gefüllt. Perfekt. Ich denke, das ist ziemlich gut genug. Mal sehen, wie es jetzt reagieren wird. Wie Sie sehen können, reagiert es ein bisschen. Wir haben das Problem mit der Bildverzerrung, das können wir beheben Und wir haben noch ein weiteres Problem , nämlich die Tatsache, dass sich der Text hier überschneidet Das Problem ist hier ein großes Inhaltsproblem. Hier geht es um das Umarmen von Inhalten, aber hier gibt es etwas, das nichts mit Inhalten zu tun hat Was ist das? Es sind diese. Sie sollten in Bezug auf die Breite füllen, sie sollten den Behälter füllen, aber sie sollten einen großen Inhalt haben , wenn es um den Inhalt geht, den sie haben Diese Option ist aus irgendeinem Grund nicht verfügbar. Jetzt müssen wir also Fehler beheben . Versuchen wir also zu verstehen warum es ein Problem gibt. Also werden wir diese Umarmung hier einrichten. Mal sehen, wie es jetzt funktioniert. Es gibt immer noch ein Problem. Okay, ich glaube, wir haben hier einen Fehler gemacht , weil es ein Bild in einem Bild war. Ich habe den unteren Rahmen entfernt, also ist es jetzt nur dieser Rahmen und dann die darin enthaltenen. Lassen Sie uns das jetzt überprüfen. Es ist immer noch irgendwie nicht verfügbar. Manchmal passiert das, weil Sie ein bisschen zu konzentriert sind und versuchen müssen zu verstehen, was das Problem ist oder wo Sie Mist gebaut haben, und das kann ein bisschen knifflig werden Im Moment funktioniert es überhaupt nicht, also müssen wir auf einer gewissen Ebene Mist gebaut haben Das hat eine Füllung. Das hat eine Füllung. Diese haben eine Füllung. Da ist etwas los. In Ordnung, nur um es noch einmal zusammenzufassen, hier haben Sie eine Füllung. Hier haben Sie eine Füllung, und hier haben Sie einen Füllbehälter. Wenn du in diese gehst, sind sie nicht mehr gefüllt. Dort befinden wir uns. Wir werden wählen, das ist kein automatisches Layout. Da liegt das Problem. Also diese sollten einen Füllbehälter haben und die ganze Sache sollte sich umarmen Lass es uns jetzt überprüfen. Perfekt. Das war das Problem. Bis zu einem gewissen Grad hatten wir kein automatisches Layout, aber es sollte alles mit automatischen Layouts geregelt werden. Jetzt beheben wir das Problem. Okay, wir haben immer noch das Problem, dass sich der Text überschneidet Wir werden es lösen, indem wir diesen Ha-Hub-Inhalt erstellen. Jetzt werden wir sehen, perfekt, es funktioniert perfekt. Wir müssen nur sicherstellen, dass dieses Bild nicht ähnlich beschnitten wird hier nicht ähnlich beschnitten wird. Lassen Sie uns das jetzt überprüfen Perfekt. Jetzt werde ich die anderen Teile überprüfen und sehen, was wir haben. Wir haben ein Newsletter-Abonnement. Wir haben das Zeug, cool, cool. Also lass uns jetzt etwas mit Einschränkungen versuchen. Ich werde das auf der linken Seite hinzufügen. Entschuldigung, das hier rechts, diese links, oben, unten oder ich denke hier ist es, ich denke, unten. Dieser Typ wird ihn auf den Boden legen. Wir werden das nach rechts legen, die nach links. Mal sehen, wie es aussieht. Ja, das ist nicht toll. Ja, wir machen das nach rechts und links. Also, das ist nicht so schlimm, wie Sie sehen können. Ordnung. Aber diese Teile sind ein bisschen, ich meine, wir haben nicht die Zeit, all das zu machen, also lasst uns das alles bis hier machen. Der nächste Schritt , den wir tun werden , besteht darin, sicherzustellen, dass all diese Dinge im selben Rahmen enthalten sind. Ich mache aus dem Ganzen ein automatisches Layout und füge es direkt in diese Rasterlinien ein, die 1170 sind Ich bin mir nicht sicher, warum diese Rasterlinien hier waren, ich werde sicherstellen, dass sie etwas zentriert sind Ich werde sicherstellen, dass das auch zentriert ist. Ich lasse es eine Zeile schreiben , sodass diese Zeilen nach rechts zeigen, und dann kann dieses Bild ohne Probleme ein bisschen nach links gehen , weil es hier nicht das wichtigste Bild ist. Ich meine, es ist nur ein Bild, und das ist der Text , der gelesen werden muss. Jetzt, wo wir das herausgefunden haben, müssen wir sicherstellen, dass es tatsächlich reagiert. Jetzt haben wir dieses automatische Layout und das als automatisches Layout, und wir werden jetzt die ganze Seite zu einem Autolayout machen , den Jetzt ist das Ganze also ein Autoayou. Mal sehen, wie es aussieht, wenn wir es erweitern. Es passiert nichts, weil wir diesen Füllbehälter machen müssen, aber wir müssen ihn einschränken Füllen Sie den Behälter mit maximal 1.200. Jetzt schauen wir mal, wie es aussieht, es passiert nichts, aber wenn wir es kleiner machen, sollte es sich neu Okay, es passiert nicht. Warum? Wir müssen alles zu einem Füllbehälter machen. Wir müssen es anpassen, um sicherzustellen, dass alle Bereiche darin den Behälter vollständig füllen. Ordnung. Also lass uns das jetzt überprüfen. Okay. Sie können sehen, dass sich die Dinge hier anpassen. Aber diese Gegend ist nicht großartig. Warum? Ich meine, dieser Bereich hat Frames, einige automatische Layouts, aber es ist nicht alles komplett automatisch gestaltet. Das ist kein automatisches Layout und es füllt den Container nicht Was wir hier tun werden, ist, dass wir das hier machen werden. Das ist eine Helden-Sektion, und wir werden dafür sorgen, dass sie den Container füllt. Jetzt passen wir es hier rein und wir werden dafür sorgen, dass es auch den Behälter füllt. Aber wie Sie sehen können, wird es zu viel Platz beanspruchen, also geben wir ihm ein Maximum von 300. Noch weniger 250, oder? Ich weiß es nicht. Lass es uns jetzt noch einmal überprüfen. Okay. Also die Dinge sehen toll aus, andere Dinge wie diese Gegend sehen nicht so gut aus. Was ich persönlich vorschlagen würde, ist, daraus irgendwie einen Rahmen zu machen. Also werden wir daraus eine Frame-Auswahl machen. Ich meine, es wäre am besten, die ganze Sache als Bild zu nehmen , um ehrlich zu sein. ist eine sehr große Sache, es als Bild zu nehmen , weil das sehr helfen würde. Das können wir versuchen . Wie machen wir das? Wir können das kopieren, hier einfügen und wir machen einen Screenshot davon, einfach so. Wir fügen den Screenshot ein. Und dann löschen wir das ganze Bild und wir nehmen und fügen es als Hintergrund zu diesem Heldenbereich hinzu. Wir werden diesen Heldenbereich in ein automatisches Layout umwandeln und wir werden die Füllung hinzufügen und wir werden ihn viel größer machen. Dieser Abschnitt ist voll, aber wir geben ihm ein Maximum von 400 und wir werden ihn ein bisschen erweitern. Einfach so, wir haben es als Bild. Mal sehen, wie es aussieht , wenn wir es kleiner machen. Also die Dinge laufen. Wir werden dafür sorgen , dass es den Behälter füllt. Ordnung. Wie Sie sehen können, ist das Bild jetzt nicht mehr lesbar. Sie können es nicht mehr lesen, aber entweder müssen Sie damit leben, oder Sie können weitermachen und vielleicht das Seitenverhältnis fixieren , sodass das Bild auch kleiner wird, wenn Sie es verkleinern. Das ist etwas, was du tun kannst. Eine Sache, die mir klar wurde, ist, dass der Hintergrund nicht vollständig weiß ist. Aber hier haben wir es wohl sehr weiß gemacht, damit wir das rückgängig machen können, wir nehmen einfach diese Farbe. Ordnung, wir können Figma einfach bitten , den Hintergrund zu entfernen Wir lassen es sein Ding machen? Okay. Jetzt werden wir nachschauen. Okay. Nun, eine Sache, um sicherzustellen, dass Sie auch dieses gesamte automatische Layout haben, ist , den gesamten Hauptteil der Seite zu übernehmen . Sie sollten es rechts und links etwas Und wenn es darum geht, solltest du ihr auch etwas Abstand nach rechts und links geben , 24 oder Und dann werden wir es ein bisschen erweitern. Tut mir leid. Ich werde den Inhalt aus der Höhe umarmen. Sie können jetzt sehen, wie es aussieht, wenn ich die Größe ändere. Sie können also sehen, dass viele dieser Elemente sehr gut aussehen. So würde es auf einem Telefon, einem sehr weißen Telefon oder einem Tablet aussehen . Aber hier haben wir immer noch einige Probleme , nämlich die Verpackung. Wir können auch dieses Layout erstellen, Behälter füllen und ihm mindestens 400 geben . Mal sehen, wie es jetzt aussieht. Aber wir müssen sie einwickeln. Sie wickeln schon ein. Das sind also 250. Das machen wir, ja, 500 oder so. Wie Sie sehen können, geben wir, sobald es soweit ist, mindestens 200. Also, wenn wir an diesem Punkt angelangt sind, geht es einfach runter. Das Problem ist, dass wir dem ein Maximum gegeben haben , sodass es sich jetzt nicht auf das gesamte Gebiet erstrecken kann. Das ist also ein Problem, und hier kommen Breakpoints ins Spiel. Was wir hier tun können, ist, dass ich sie entfernen kann. Ich kann das kopieren, einfügen und sagen, kopiere es nochmal, oder lass uns einfach eine mobile Version machen. Ich werde das machen. Dann sage ich 393, so sollte ein iPhone aussehen. Das Wichtigste zuerst, ich werde es anpassen, 16 machen oder ich bin mir nicht sicher, was ich daraus machen soll. Ich passe die Dinge einfach so an, dass sie gut aussehen. Lass uns das aus dem Weg räumen. Großartig, großartig. Das ist alles nett. Aber hier gibt es ein Problem, weil dieser Text, glaube ich, ein Minimum oder so etwas enthält. Das hat ein Minimum. weiter und machen das Minimum von 300. Du wirst sehen, was hier passiert. Aber wir werden hierher kommen und sagen, dass das irgendwann abgeschlossen sein sollte und die Mindestanzahl sein sollte, wir werden ein Minimum festlegen, das vielleicht 200 ist Dann kannst du sehen, dass es jetzt viel besser aussieht. Ordnung. Jetzt gehen wir rauf, hier herrscht Chaos. Also sagen wir für Mobilgeräte, nur für Mobilgeräte als Grenzwert, wir werden hier das Maximum streichen. Wir klicken hier und wir werden das minimale Maximum sehen. Wir werden das Maximum entfernen , damit es auf das Maximum ausgedehnt werden kann. Und wir werden die Polsterung des gesamten Bereichs auf 16 statt 24 einstellen, nur damit wir mehr Platz auf dem Bildschirm haben. Und Sie können sehen, dass dieses Bild hier ein bisschen chaotisch ist , weil es ein Minimum, glaube ich, oder ein Maximum hat glaube ich Also werden wir versuchen, das herauszufinden. Also, was ist das Problem hier? Das hat ein Minimum, entferne das Minimum und dann wird es so durcheinander kommen. Ich werde sagen, ich werde versuchen, es zu reparieren. Okay. Geh zurück in ein bisschen unerforschtes Gebiet. Also sagen wir, wir werden versuchen, die Größe selbst zu ändern, um das Minimum zu entfernen Und wir werden sagen, okay, wir werden sagen, dass sie vertikal und nicht horizontal sind Und dann werden wir hier das Seitenverhältnis entfernen . Wir werden das ändern. Und vielleicht können wir das Bild nur in diesem Fall zuschneiden. Wir werden es kleiner machen. Wir werden es so bringen. Das heißt, wir werden es so bringen. Das ist es im Grunde. Dann werden wir das Seitenverhältnis ändern, nur damit dieser Typ nicht Nun, was wir im Grunde machen und wir können übrigens die Schriftarten ändern, ich denke, wir können sie ändern, wir können sie kleiner oder größer machen. Wie wir wollen. Sie können sehen, dass dieser Abschnitt im Vergleich zu dem, was wir hier hatten, ziemlich schrecklich aussieht . Ich meine, es sah hier viel schöner aus. Hier sieht es ein bisschen schrecklich aus. Wir können also mit diesen herumspielen, sodass es Text, Bild, Text, Bild, Text, Bild ist mit diesen herumspielen, sodass es Text, Bild, Text, Bild, , oder was wir tun könnten, ist sogar, wir können das Ganze zu einer Art machen, ich bin mir nicht sicher, wir können daraus einen Slider machen. Auch wenn ich mir nicht sicher bin, wie schön das wäre. Aber du musst dich fragen, was ist der ganze Zweck dieser Knöpfe? Sind sie anklickbar? Kannst du etwas mit ihnen machen oder nicht Aber ja, ich schätze, du könntest daraus etwas machen , das du durch einen horizontalen Schieberegler oder so etwas schieben kannst durch einen horizontalen Schieberegler , wenn es wirklich nötig ist. Ja, das ist also die ganze Idee, die Land-Dink-Seite in mobiler Form für mobile Bildschirme zu optimieren Genau darum geht es bei Breakpoints , denn wie Sie gesehen haben, konnten wir das nicht perfekt machen Selbst jetzt ist es immer noch nicht perfekt. Wie das Menü hier, mir wurde gerade klar, dass wir es zentrieren müssen. Ich war nicht zentriert. Das ist manchmal so, dass man diese Dinge erst viel später bemerkt, hier muss man statt dieser Art von Menü haben, ich werde das löschen. Ich werde löschen. Ich werde das löschen. Sie benötigen nur drei Zeilen für das Hamburger-Menü. Es muss nicht perfekt sein. Ich schneide das aus, füge es hier und mache es automatisch. Jetzt haben wir dort ein Hamburger-Menü. Hier, wir müssen das Ding nur testen. Wie Sie hier sehen können, gibt es ein Problem mit der Suche. Ich meine, es wird hier komplett ausgelöscht. Vielleicht können wir ein Minimum dafür haben. Wir können sagen: Hey, mindestens 100. Wenn wir das kleiner machen, wird es das erreichen und dann wird es verschwinden. Das ist ein guter Kompromiss, würde ich sagen. Anstatt dass es gekürzt wird, wird es einfach verschwinden und so weiter und so fort, weil wir es nicht schaffen können dass sich diese Dinge überlagern oder so. Das ist nicht wirklich möglich. Dies ist jedoch eine sehr schnelle und anschauliche Demonstration wie Sie eine Seite in etwas Responsiveres verwandeln können . Es ist nicht einfach, aber es ist auch nicht die schwierigste Sache der Welt Es ist kein Hexenwerk. Also mach weiter und probiere es selbst aus. Diese Seite war eine Herausforderung, um ehrlich zu sein, denn sie hatte viele Elemente nach rechts und links und nach oben und unten, und das kann Sie in Schwierigkeiten bringen. Wie Sie sehen können, müssen wir alles mit automatischen Layouts machen . Und ich denke, die Arbeit mit automatischen Layouts ist am saubersten. Einschränkungen sind nett, aber sie sind sehr begrenzt. Sie bringen dich in eine sehr schwierige Lage. Deshalb habe ich versucht, sie diesmal zu vermeiden. Ich habe dir hier gezeigt, wie du sie für einige Elemente wie diese verwenden kannst , aber es ist sehr wackelig, also würde ich es nicht wirklich empfehlen Und so wird es gemacht. Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion. 10. Mikrointeraktionen: In dieser Lektion möchte ich also über Mikrointeraktionen sprechen Was wir Mikrointeraktionen nennen, sind im Grunde die kleinen Interaktionen, die Sie haben, wenn Sie eine Website oder eine App oder eine andere Art von digitalem Erlebnis nutzen oder darin navigieren eine Website oder eine App oder eine , und es gibt sehr kleine Dinge, die sich ändern. Vielleicht ändern sie sich in Farbe, Form und Größe. Etwas passiert und diese Mikrointeraktionen, sie sagen dir etwas, sie vermitteln bestimmte Arten von Informationen. Nun, eine dieser Mikrointeraktionen, die wir heutzutage fast für alles verwenden, sind Schwebeeffekte, um ehrlich zu sein Dies ist etwas, das wir normalerweise mit Tasten verwenden. Wir verwenden sie mit vielen Elementen, vor allem aber mit Schaltflächen. Heute werden wir das üben und versuchen zu verstehen, wie Mikrointeraktionen auf die Benutzererfahrung auswirken , und versuchen herauszufinden, wie wir das mit Figma auf einfachste Weise anwenden können Glauben Sie mir, das ist ziemlich einfach. Wenn Sie also bis jetzt noch keine Prototypen gebaut haben, wird das etwas Neues für Sie sein Wenn Sie also nicht wissen, was ich meine, haben Sie hier Ihre Designseite, Ihren Design-Tab Wenn du also auf ein Element klickst, kannst du es designorientiert einrichten, und dann hast du hier deinen Prototyp-Tab dem du die Interaktionen einrichten kannst, okay? Wie Sie sehen können, wird es weiß, wenn ich mit der Maus über Interaktionen Ich meine, es ist ein bisschen gräulich. Und wenn du mit der Maus drüber fährst , wird es weiß. Und genau das meine ich, wenn ich über Mikrointeraktionen spreche , weil mir das sagt , dass Figma versteht, worauf ich mich bewege. Wenn ich also hier klicke, wird etwas passieren, wie Sie sehen können, es ist bereits etwas Lassen Sie uns versuchen, mithilfe dieser Schaltflächen, diesen Instanzen einer Komponente, die wir bereits in einer früheren Lektion erstellt hatten, einige Mikrointeraktionen diesen Instanzen einer Komponente, die wir bereits in einer früheren Lektion erstellt hatten, zu erstellen. nun, wie gesagt, zuerst zur Registerkarte Prototyping Nun, wie Sie feststellen werden, sehen die Dinge ein bisschen anders aus als normal Wenn Sie also einen Gegenstand auswählen, werden Sie diese kleinen Kreise auf jeder Seite sehen. Und wenn Sie sich ihnen nähern, werden sie Pluszeichen sein. Das ist auch eine Mikrointeraktion. Wenn Sie zu ihnen gelangen, sind dies Optionen, die Sie anklicken und gedrückt halten können, und dann können Sie hier einen Pfeil auf jede andere Instanz setzen. Sie können es auch auf andere Frames platzieren. Aber für die Zwecke dieser Lektion, bei denen es sich um Hover-Effekte handelt, werden wir sie jetzt denen es sich um Hover-Effekte handelt, werden wir in den Hover-Zustand versetzen Richtig? Sobald Sie das getan haben, erstellen Sie sofort eine Interaktion, die Sie hier sehen können. Für die Interaktion sind bereits einige Felder eingerichtet. Wenn Sie jetzt eine Interaktion erstellen, wird sie standardmäßig per Mausklick ausgeführt. Dann versteht Figma, dass die Aktion, die wir ausführen wollen, darin besteht, zwei zu ändern, also ändern wir die Schaltfläche von dieser auf diese, und dann wird angezeigt, dass Sie zu wechseln Der Typ ist primär, also wechseln Sie von primär. Zwei primäre. Sie sind beide primär, aber was ist das für ein Status? Das ist der Hover. Also wechseln wir von diesem Modus zum primären Hover, nicht zum Ghost. Dann hier, du musst das in diesen Begriffen verstehen, hier hast du deinen Auslöser. Um wie viel Uhr erscheint diese Animation oder Interaktion? Wie wird sie ausgelöst? Hier können Sie onclick wählen. Du könntest sagen, beim Ziehen ziehen und, du weißt schon, gedrückt halten, wenn du etwas hältst und es ziehst, und hier hast du es, während du den Mauszeiger bewegst , während du die Taste oder das Gamepad drückst, sodass du einige Tasten hier auf deiner Tastatur platzieren kannst , um sie als Auslöser einzurichten Maus eingeben, Maus verlassen, Maus runter, Maus hoch oder einfach nach einer gewissen Verzögerung nach einer gewissen Verzögerung nach Oder zehn Millisekunden. Was wir also für unsere Zwecke tun werden, ist Wir möchten es so einrichten, dass, wenn Sie mit der Maus darauf zeigen, es sich zu ändert Auch hier bietet die Aktion viele andere Optionen. Sie können dafür sorgen, dass es zu navigiert. Wenn Sie also möchten, dass Sie beim Drücken dieser Taste zu einer anderen Seite wechseln , zu der Sie navigieren möchten. Sie könnten zurückgehen, zur vorherigen Seite gehen, zu einem bestimmten Element scrollen, einen bestimmten Link öffnen, Sie können eine Variable festlegen, einen Variablenmodus festlegen, bedingt. Overlay öffnen, Overlay austauschen, Overlay schließen. Das sind Dinge , über die wir etwas später sprechen Aber im Moment fangen wir klein und einfach an. Jetzt richten wir die Aktion ein und jetzt müssen wir die Animation einrichten. Jetzt ist die Animation manchmal als Standard für das eingerichtet , was Sie zuvor hatten. Wenn Sie es also auf Instant hatten, wird es sofort funktionieren. Am Anfang ist es immer als Instant eingerichtet. Sie haben aber auch andere Hauptanimationen wie Dissolve und Smart Animate. Hier haben wir ein paar Optionen herabgestuft, weil du mit der Änderung zur Aktion nicht machen darfst Aber wenn du etwas wie „Navigiere zu“ wählst, bekommst du ein paar mehr Animationen. Wenn wir wissen, dass sich hier etwas bewegt, können Sie sehen, wie es sich bewegt, also das ist eine Bewegung in der Animation. Sie können sich das vorstellen, wenn Sie schon einmal mit PowerPoint gearbeitet haben . Das sind deine Übergänge, oder? Also, wie der Übergang aussehen würde und wie die Animation aussehen würde Aber nehmen wir es zurück, um es auch zu ändern, und primär und der Status sollte höher sein. Im Moment haben wir also nur diese Optionen. Sofort, lass es uns ausprobieren. Also sofort bedeutet im Grunde , dass das nur ein Bug war, mach dir darüber keine Gedanken. Das heißt, wenn wir es einmal drauf haben, wechselt es sofort zu dieser Farbe. Also, das ist ziemlich nett , weil es sehr schnell ist. Es reagiert sehr schnell und sagt dir, dass dies eine Taste ist, mit der du interagieren kannst. Diese Schaltfläche ist zwar statisch, zeigt aber kein Leben, keine Interaktionen, keine Animationen. Instant ist nett. Was wir tun können, ist uns auch aufzulösen. Sobald Sie sich für Auflösen entschieden haben, können Sie bestimmte Kurven auswählen. Wenn Sie sich also ein wenig mit Animationen auskennen, beginnen die Animationen mit Kurven. Fängt sie an? Beruhigt es sich? Fängt es sehr langsam an und nimmt dann an Fahrt auf, oder fängt es normal an und lässt dann nach, als ob es am Ende langsamer wird Man kann lockerer rein und raus machen, also wird es am Anfang langsamer und dann schneller und am Ende langsamer, oder man könnte sich erholen, wissen Sie, oder Sie könnten es sanft angehen lassen gibt es viele Hier gibt es viele verschiedene Optionen , die Sie erkunden können, und dann können Sie die Dauer festlegen Die Standardeinstellung ist jetzt 300 Millisekunden. Schauen wir uns also an, wie das aussieht. Wenn du also merkst, dass das viel flüssiger ist , weißt du, es braucht Zeit, was bedeutet, wenn du sehr schnell mit der Maus darüber fährst, wird es vielleicht nicht angezeigt oder die Animation wird nicht beendet Aber es ist viel flüssiger und eleganter, um ehrlich zu sein, weil es seine eigene Zeit braucht , was ziemlich nett ist Also das ist eine, die ich empfehlen würde, und dann haben wir die letzte Option, Smart Animate, die auch eine Kurve und Dauer hat Aber mit Smart Animate können Sie im Grunde verschiedene Dinge animieren, oder ? können Sie im Grunde verschiedene Dinge animieren, Um Ihnen eine bessere Vorstellung zu geben, nehmen wir an, dass wir das tun werden , ich bin mir nicht sicher Wir werden hinzufügen, wir werden ein Symbol hinzufügen. Es wird eine Schaltfläche sein und dann wird es ein Symbol haben. So ändern wir das, um das Symbol auszublenden. Und wenn wir jetzt mit der Maus darüber fahren, gehen Sie zu den Größenanpassungen und dann wird ein Symbol hinzugefügt Wie Sie sehen können, zeigt Ihnen dies Flexibilität. Es zeigt eine interessante Animation. Ich glaube natürlich nicht, dass das für einen echten Button sehr produktiv wäre . Sie sollten eine Animation nicht einfach nach dem Zufallsprinzip anzeigen, aber es ist interessant, das zu tun, weil das eine nette Art ist , die intelligente Animationsoption zu sehen Nun, lassen Sie mich Ihnen den Unterschied zwischen Dissolve zeigen. Wenn du dich also auflöst, zeigt es dir einfach nichts, es dehnt es nicht langsam und gleichmäßig aus. Was es tut, ist, dass es das einfach ausblendet und den anderen Knopf einblendet Es ist sehr unflüssig und ziemlich nervig. Aber wenn Sie die Option „Intelligentes Animieren“ verwenden, tut mir das leid, reibungslos. Aber wie dem auch sei, ich denke nicht , dass Sie das tun sollten, aber es gibt einige nette Hover-Effekte, mit denen Sie eine intelligente Animationsanimation verwenden könnten , um ehrlich zu Aber im Moment brauchen wir das nicht. Wir können bei Smart Animate bleiben. Oder wir können es als aufgelöst machen. In diesem Fall machen sie so ziemlich dasselbe. Jetzt, wo wir das haben, können wir dasselbe für sie tun. Und nur um Ihnen zu zeigen, dass das eine andere Art ist , es zu tun, anstatt sie in der Hand zu halten, was meiner Meinung nach der bessere Weg ist weil es viel visueller ist. Was Sie stattdessen tun können, ist, einfach auf Plus zu klicken und dann eine Interaktion zu erstellen, und dann sagen Sie Trigger bei Klick, und dann können Sie zu wechseln. Primärer aktiver Geist. Das ist primär, weil es lila ist, aber es ist ein Gespenst und dann wollen wir, dass es von hier nach hier geht, was Schwebegeist ist P Ghost wie Primary Ghost. Primärer Schwebeflug, Geist. Jetzt können Sie einen Pfeil sehen, der sich gerade selbst erstellt hat, und dann können Sie ihn als Auflösen einrichten und dann können wir ihn kopieren und einfügen und daraus einen Geist machen und dann sehen, wie das aussieht Wir haben einen Fehler gemacht. Wir haben den Schwebeflug nicht gemacht Wir haben Klick gesagt. Mal sehen, wie das jetzt aussieht. Du klickst einmal darauf und dann wird es farbig. Aber das ergibt keinen Sinn. Also lass es uns einfach entfernen. Ich werde es neu starten. Okay. Es scheint, dass hier etwas durcheinander ist, also lade ich einfach den ganzen Tab neu Das passiert manchmal. Sie werden nur sicherstellen, dass, wenn es nicht genau so aussieht wie das, was Sie hier haben, einfach neu laden und es repariert sich von selbst Sie können den Hover-Effekt auch hier und hier sehen. Es ist so ziemlich dasselbe, und das bedeutet, dass es funktioniert Jetzt können wir Smart Animate ausführen , um zu sehen, ob es einen Unterschied gibt, wirklich nicht viel, aber gut Nett. Gehen wir jetzt zum nächsten Level über. Ich werde wieder kommen und den Pfeil halten , weil ich finde, dass das sinnvoller ist. Ich werde die gedrückte Animation machen. Jetzt heißt es bei Klick, aber wir wollen nicht OnClick, weil OnClick bedeutet, dass es sich hier ändert, sobald Sie darauf klicken, und dann geht es nie wieder zurück Stattdessen werden Sie sagen, während Sie drücken Wenn du drückst, wird es dunkler. Und dann wird es primär gedrückt, kein Geist. Gut. Es wird nett sein, ein Lächeln zu animieren. Aber ich würde das gerne etwas dunkler machen , nur um den Unterschied deutlicher zu beweisen oder zu zeigen. Mal sehen, wie es jetzt aussieht. Ich werde einfach klicken. Ich werde mich nur auffrischen. Starten Sie neu. Okay. Nun, es gibt einen Fehler, weil es nicht funktioniert und ich werde dir sagen, was der Fehler ist. Ich habe die Animation oder die Interaktion hier gemacht. Aber wenn du darüber nachdenkst, wenn du mit der Maus darüber fährst, wird es sofort in diesen Zustand wechseln und in diesem Zustand gibt es keine Interaktion Sie werden also diese Presseinwirkung gedrückt halten, Strg C gedrückt halten, sie kopieren und hier einfügen Jetzt haben Sie genau dieselbe Interaktion. Jetzt zeigt unser Cursor diese Hand, wobei der Zeigefinger nach oben zeigt und der Zeigefinger nach oben zeigt. Das heißt, es ist anklickbar. Während wir hier sind, ist es nicht anklickbar. Hier gibt es einen Hover-Effekt, der aber nicht anklickbar ist. Hier gibt es einen Hover-Effekt und er kann angeklickt werden. Sie sehen, dass ich drücke und wenn ich drücke, wird es wirklich dunkel, ich meine, fast schwärzlich, und das soll zeigen, dass ich darauf klicke Stimmt? So kann man es im Grunde machen. Sie können hier dasselbe tun. Also ich kann es auch für mehrere machen Ich kann eine Interaktion für mehrere Tasten machen. Ich kann sie verschieben, sie beide halten. Und jetzt, wie Sie sehen können, strecke ich zwei Pfeile aus und dann kann ich sagen, während ich drücke, fertig. Lass uns jetzt sehen. Lassen Sie uns jetzt weitermachen und das mit diesem anderen Knopf ausprobieren. Um es noch einmal zusammenzufassen: Ich werde es hier halten und sagen, während Mauszeiger darüber halte, und dann werde ich beide auswählen und sie auf die gedrückte Version zeigen und sagen, während ich drücke Lassen Sie uns jetzt sehen. Es gibt einen Hover-Effekt Großartig. Sobald ich drücke, wird es richtig dunkel. Nun, was Sie tun können, wenn Sie möchten, Sie können diese Interaktionen wählen und sie einfach zum Spaß 100 Millisekunden machen, dreimal schneller Wenn Sie klicken, reagiert es viel schneller. Ich denke, das macht Sinn , weil ein Klick nicht lange dauert. Es passiert sofort. Bam, bam, bam. Ich sollte mir nicht viel Zeit nehmen. Sie können es sogar sofort machen, wenn Sie möchten. Du siehst, das blinkt nur. Aber ich finde es immer schön, eine sehr kleine Dauer zu haben Es macht es ein bisschen glatter. Also ja, so können Sie die Interaktionen im Grunde nutzen , um diese Mikrointeraktionen wie Hover-Effekte zu erzeugen diese Mikrointeraktionen wie Hover-Effekte Nun, eine Sache, die wir tun könnten , die als Mikrointeraktion gilt, aber das betrifft nicht nur Schaltflächen und Hover-Effekte, ist eine Ladeanimation Wie ich bereits erwähnt habe, können wir viele Hover-Effekte machen, aber Sie haben bereits gesehen, wie das funktioniert und Sie können verstehen, wie es in anderen Fällen funktionieren wird Aber eine Sache, die wir tun können, ist, wie gesagt, Animationen zu laden Es gibt viele verschiedene Ladeanimationen , die du machen könntest, aber etwas, das ich dir gerne zeigen würde. Ich meine, eine Methode, die ich als sehr regelmäßig, sehr standardmäßig empfinde und die immer funktioniert, besteht darin, sie wie folgt durchzuführen. Das Wichtigste zuerst: Wir werden einen Kreis bilden. Halten Sie beim Erstellen die Umschalttaste gedrückt, damit beim Erstellen ein festgelegtes Seitenverhältnis beibehalten wird. Dann ist es nicht länger oder breiter als es ist, weißt du, die Dimensionen sind nicht durcheinander Was wir jetzt tun werden , ist, auf Stroke zu klicken und ihm einen weißen Strich zu geben Machen wir es ein bisschen kleiner, nur der Größe halber, also vielleicht so etwas. Und wir können es grau machen, um ehrlich zu sein, ein bisschen gräulich Jetzt kopierst du das und fügst es ein. Jetzt haben wir eine zweite Version und dann kopieren und erneut einfügen, aber entfernen Sie den Strich und geben ihm eine violette Farbe. Jetzt, wo wir diese lila Farbe haben, haben wir drei verschiedene Kreise. Das sind die gleichen, und dann haben wir den Kreis mit einer violetten Farbe. Wenn Sie nun auf den Kreis zeigen, finden Sie hier diesen kleinen Kreis, dem Sie den Kreis ausschneiden können. Du machst weiter und machst das und du wirst vielleicht ein Quartal verdienen. Jetzt haben wir 25% eines Kreises. Und wenn wir das drehen, es sich innerhalb des Kreises, was ein netter Effekt ist und das ist eigentlich der Effekt , den wir erzielen wollen. Dann machen wir weiter und klicken darauf und auf den Kreis mit dem Strich darunter. Und wir werden weitermachen und zur Maske gehen. Sobald Sie das getan haben, maskiert der Strich dieses Viertel eines Kreises und dann sieht es aus wie ein Ladebalken. Alles, was wir tun müssen, ist , dies im Grunde zu drehen, um den Effekt zu erzielen, dass etwas geladen wird. Jetzt können wir natürlich auch hier weitermachen und den Strich etwas dicker machen. Geben wir vier und gehen wir hierher und geben vier, okay? Das ist jetzt also ein dicker Ladekreis. Aber jetzt ist die Frage, wie animieren wir das? Also mach weiter und füge sie in eine Gruppe ein, gruppiere sie mit der rechten Maustaste und Gruppenauswahl oder einfach Gruppe G, tut mir leid, einfach Strg G, und dann mach weiter und mach weiter und mach sie zu einer Komponente Also werden wir eine Ladeanimation schreiben. Sie werden eine weitere Variante erstellen. In dieser Variante behalten Sie diese Maskengruppe bei und drehen sie dann um 25%. Dann werden Sie eine weitere erstellen, und Sie werden sie zu der anderen drehen , ich meine, ein bisschen mehr. Wie Sie sehen können, drehen wir es hier um 90 Grad und dann noch einmal um 90 Grad und am Ende machen wir es noch einmal um 90 Grad. Es wird also so ziemlich hier landen. Also das bedeutet, dass das im Grunde deine Keyframes sind. Das ist also das erste Bild und dann bewegt es sich bis hierher und dann wird es hierher kommen und sich bis hierher drehen, und dann geht es zurück. Das sind also die vier Hauptrahmen, die wir haben, okay? Also machst du weiter, halte das Plus und bring es her. Anstatt auf einen Klick zu klicken, wird es nach der Verzögerung sein und die Verzögerung Null Millisekunden setzen und es wird standardmäßig auf eins gesetzt, was kein Problem ist Dann bearbeite hier nichts, mach es einfach intelligent, animiert Jetzt sollte es sich linear bewegen, es dauert 100 Millisekunden, was einer Zehntelsekunde entspricht, um von hier bis hierher zu gelangen Jetzt können wir das verlängern und genau das Gleiche tun. Nach der Verzögerung Null, das war's. Spülen und nach Verzögerung Null wiederholen, und dann schließen wir diese Schleife. Wir werden es nach der Verzögerung wieder auf den ersten Wert bringen , Null. Dann lass es uns testen. Wir werden es hier in der Mitte platzieren und sehen, wie es aussieht. Starten Sie neu. Jetzt, wie Sie sehen können, läuft es sehr gut. Nun, wenn Sie möchten, können Sie die erste Animation so einrichten, dass sie leicht eingeht die erste Animation so einrichten, dass sie leicht eingeht und die letzte , die entspannt wird. Mal sehen, welche Art von Effekt das haben wird. Wie Sie sehen können, gibt es hier einen schönen Effekt , wenn es langsamer wird. Aber ich würde allen empfehlen, dass du hierher kommst, sie alle auswählst und zu den Interaktionen gehst und es vielleicht 300 Millisekunden machst , weil das viel zu schnell ist. Wenn du wieder kommst, werde ich 200 oder 300 machen Das sieht ziemlich gut aus oder du kannst es einfach linear machen, wo es überhaupt nicht aufhört Aber ich finde das ziemlich gut. Jetzt ist die Frage, wie machen wir das, damit, wenn wir auf eine Taste drücken, diese angezeigt wird. Das ist eine sehr gute Frage. Lassen Sie uns weitermachen und diese Schaltflächen löschen. Lassen Sie uns weitermachen und diese Schaltflächen löschen und hier eine Schaltfläche mit den Worten „Rechnung bearbeiten“ oder „Rechnung senden“ erstellen . Dann werden wir es zentrieren. Wir werden das auch zentrieren. Aber anstatt das hier zu haben, nehmen wir es raus und fangen an, mit Überlagerungen zu arbeiten, worüber ich später noch etwas mehr sprechen werde später noch etwas mehr Aber was wir hier tun werden, ist, dass wir das halten und wir werden es hierher bringen und wir sagen es, wenn du klickst, du wirst das Overlay öffnen und es wird zentriert sein, dann kannst du wählen, den Flügel zu schließen, wenn du draußen klickst und den Hintergrund schwarz getönt machen, die Animation wird aufgelöst, zum Beispiel. Schauen wir uns nun an, wie es aussieht. Ich drücke Rechnung senden und dann bekommen wir diese Ladeanimation. Aber lassen Sie uns einfach dieses Hintergrundding entfernen. Ich werde neu starten, hier klicken und dann können Sie sehen, dass diese Animation läuft. Jetzt wird sie verarbeitet. Du könntest noch einen Schritt weiter gehen. Sie könnten noch einen Schritt weiter gehen und Sie können es im Grunde so gestalten , dass diese Animation nach einer Weile aufhört. Der Weg, dies zu tun, besteht darin, einen Frame zu erstellen. Entfernen Sie die Füllung, fügen Sie diesen Kreis hinzu, zentrieren Sie ihn und verbinden Sie ihn dann mit dem äußeren Rahmen Gehen Sie dann zum Rahmen und fügen Sie eine Interaktion hinzu und sagen Sie, nach 4.000 Millisekunden, also in 4 Sekunden, müssen Sie das Overlay schließen Schauen Sie sich jetzt an, was passiert. Wir werden einfach diesen Frame öffnen, sobald ich auf Sind-Rechnung drücke, erhalte ich die Animation für 4 Sekunden und dann ist sie weg. Einfach so. Das ist also ziemlich nett, weil es den Prozess imitiert , bei dem Sie tatsächlich eine Rechnung senden oder eine Animation erstellen, und das sind die kleinen Interaktionen, die dem Benutzer sagen, was vor sich geht, was passiert ist, was passieren wird Sobald Sie das getan haben, sagen Sie Rechnung senden, und dann erhalten Sie diesen kleinen Kreis Es läuft, es wird geladen. Und dann sollten Sie idealerweise gleich hier sein, Rechnung wurde erfolgreich versendet, was auch immer. Weißt du, das ist also die ganze Idee. Auf diese Weise können Sie eine Reihe großartiger Mikrointeraktionen erstellen , die effektiv mit dem Benutzer kommunizieren , ihm Feedback geben und ihn wissen lassen, dass Sie gerade auf einer Schaltfläche schweben Wenn Sie klicken, drücken Sie jetzt auf eine Schaltfläche. Sie haben jetzt eine Ladeanimation, was bedeutet, dass etwas verarbeitet wird. Auf diese Weise können Sie auf sehr einfache Weise eine Ladeanimation erstellen. Natürlich können Sie es, wie gesagt, auf viel komplexere oder coolere Weise tun , aber das sollten Sie selbst ausprobieren. Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion. 11. Scroll- und Gesteninteraktionen + Beherrschung intelligenter Animationsfunktionen: Hallo zu einer weiteren Lektion des Figma-Kurses für Fortgeschrittene. In dieser Lektion werden wir über verschiedene Konzepte sprechen, darunter Overflow, Scrollen und Gesten, Animationen Ich würde sagen, das sind alles sehr unterschiedliche Konzepte, aber sie sind in gewisser Weise stark miteinander verbunden in gewisser Weise stark miteinander Sie sind alle miteinander verbunden. Es mag scheinen, was hat das damit zu tun? Was hat Overflow mit Scrollen zu tun? Aber wenn Sie ein wenig Erfahrung mit Programmieren haben, dann wissen Sie wahrscheinlich, dass diese beiden Begriffe in gewisser Weise miteinander verwandt sind Ich möchte die Unterschiede zwischen diesen Aktionen verdeutlichen und Ihnen gleichzeitig zeigen, wie Sie Ihre eigenen, einzigartigen Interaktionen einrichten können . Nun, wir haben in anderen Lektionen über Mikrointeraktionen gesprochen, also die Idee, einen sehr geringen Effekt zu haben, der einen sehr geringen Effekt zu haben, Ihre Erfahrung in irgendeiner Weise verbessert. Und das Beispiel, das wir genommen haben, war ein Button. Um uns mit der Lektion zu verbinden Wenn man einen Knopf hat und er einen Her-Effekt hat, ist das eine sehr einfache Sache und man braucht ihn nicht unbedingt. Sie können ihn einfach entfernen. Du musst keinen Her-Effekt haben. Es ist einfach mehr oder weniger eine ästhetische Sache, die auch eine Funktionalität hat, die dem Benutzer zeigt, dass dies anklickbar ist Das ist etwas, auf das man klicken kann oder mit dem man auf die eine oder andere Weise interagieren kann Aber das ist eher auf der Mikroskala. Worüber wir heute sprechen werden, bezieht sich ein bisschen mehr auf das Makro, weil es nicht nur um Ästhetik geht, sondern auch darum , wie man mit Dingen interagieren kann , um mehr Informationen zu erhalten oder irgendwohin zu gelangen. Lasst uns weniger reden und mehr arbeiten und ausprobieren. Lass mich dir zeigen, wovon ich spreche. Also werde ich weitermachen und das öffnen, nur damit wir es testen können. Hier haben wir mehrere verschiedene Möglichkeiten, einen Überlauf zu verursachen. Ich weiß, dass Sie sich im Moment nicht sicher sind, was ein Überlauf ist. Ich werde es dir ganz einfach erklären. Overflow ist der Idee des Scrollens eigentlich sehr ähnlich Overflow ist die Idee, dass, wenn Sie einen Rahmen wie diesen haben , Elemente überfließen Wie Sie jetzt sehen können, wenn ich die Ebenen hier durchgehe, können Sie sehen, dass diese Karten aus dem Rahmen herausragen Hier fangen wir an, ein Problem zu haben. Das ist die Tatsache, dass es Informationen außerhalb des Rahmens gibt. Die Frage ist, wie kommen wir dazu? Die Antwort ist durch Scrollen. Hier dreht sich eigentlich alles um Scrollen, die Tatsache, dass Sie vertikal, horizontal oder in beide Richtungen scrollen können horizontal oder in beide Aber der offizielle Begriff, Figma dafür verwendet, ist Overflow Ich werde einfach weitermachen und diese als Flowpoints einrichten diese als Flowpoints Wir werden vertikal haben und dann werden wir horizontal haben. Und beides. Gehen wir und probieren es aus. Im Moment funktioniert es bereits. Es scrollt auf und ab. Wenn wir zur Horizontalen kommen, meine ich, wie Sie sehen können Es ist die Tatsache, dass etwas horizontal von rechts nach links scrollen könnte. Und du siehst, das hat nichts mit Auf und Ab zu tun. Es ist einfach rechts und links. Es geht nicht rauf und runter. Dann haben wir hier ein Beispiel eine Karte, die in beide Richtungen scrollt Sie haben wahrscheinlich jede Art von Kartenanwendung gesehen , die Sie persönlich verwenden, und Sie können sehen, dass sie genauso funktioniert Sie scrollen nur in beide Richtungen. Diese sind sehr, sehr einfach einzurichten. Der Weg, dies zu tun, besteht darin, zunächst einen Rahmen zu erstellen. Nun, dieser Rahmen sollte vorzugsweise ein automatisches Layout sein, aber das muss er nicht sein. Wenn Sie einen Rahmen erstellen, fahren Sie fort und hier haben wir einen Rahmen. Wir haben mehrere Artikel darin. Stellen Sie also sicher, dass Sie Artikel haben, die den Rahmen verlassen. Wenn sie sie nicht verlassen, funktioniert es nicht. Wenn Sie diesen Rahmen haben, habe ich ein automatisches Layout daraus gemacht Wie Sie sehen können, habe ich diese Elemente hinzugefügt und sie kopiert, eingefügt, eingefügt, eingefügt Das kann jede Art von App sein, die Listen hat, und ich habe dafür gesorgt, dass sie überfüllt Sobald Sie das haben, gehen Sie zu dem Rahmen über, der diese überlaufenden Elemente enthält Du wirst an einem Prototyp arbeiten. Okay. Dann siehst du hier das Scrollverhalten und unter Scrollverhalten siehst du einen Überlauf, und da gehst du hin und klickst auf Vertikal Jetzt ist es normalerweise so eingerichtet, dass kein Scrollen mehr möglich ist. Mal sehen, wie das aussieht. Du kannst nicht wirklich scrollen. Ich versuche zu scrollen, es funktioniert nicht, und dann gehen wir zurück zur Vertikalen, und dann funktioniert es. Okay. So kannst du es im Grunde machen. Und das Gleiche könntest du hier tun. Aber was wir hier gemacht haben, ist ein bisschen anders. Wir haben nicht den gesamten Rahmen zu einem automatischen Layout gemacht, sondern wir haben ein automatisches Layout nur für den Teil erstellt , durch den gescrollt werden muss und der verschoben werden muss. Dieser Teil ist der, den ich meine, und ich habe daraus einen Rahmen gemacht Nun, dieser Rahmen hier ist ein automatisches Layout mit mehreren Elementen. Aber auch hier müssen Sie sicherstellen , dass der Rahmen nicht alle enthält. Ich hätte es so machen können, dass es den Inhalt umarmt. Aber wenn du das tust, wird es ein bisschen schwierig. Es funktioniert nicht oder es funktioniert vielleicht ein bisschen, aber nicht genau so, wie du es willst. Sie machen es kleiner und am besten sollten Sie es so groß machen wie der Bereich, in dem es gesehen werden soll. Normalerweise ist dies der Bereich , in dem gesehen werden sollte. Natürlich siehst du diesen Teil immer noch, aber der Grundgedanke ist, dass das nicht zählt, weil es eine Polsterung von rechts und links gibt Sie können hier sehen, dass es diese Ränder gibt. Und auch von rechts. Das zählt nicht. Alles was zählt ist hier, so kannst du es im Grunde machen. Wenn ich es also zerlegen wollte, baue ich es einfach wieder zusammen Ich werde diesen Artikel kopieren. Lassen Sie mich das zum Beispiel aus dem Weg räumen. Ich kopiere das und ich werde den ganzen Rahmen entfernen. Jetzt ist es kein Frame. Ich wähle all diese Elemente aus und halte dann Shift und A gedrückt . Ich mache daraus direkt einen Rahmen mit automatischem Layout. Und dann sind da 15 was im Grunde der Abstand zwischen ihnen ist. Anstatt irgendetwas zu tun, gehe ich zum Prototyp und gehe zu Scrollverhalten Overflow, und dann gehe ich zu horizontal Okay. Aber wir sind noch nicht da. Wir sind noch nicht da. Es funktioniert nicht. Du musst es kleiner machen. Wie gesagt, lassen Sie es nur erscheinen, zeigen Sie den Bereich, der normalerweise zu sehen ist. Und wenn du das tust, funktioniert es einfach so. Super einfach. So kann man es im Grunde machen. Das ist keine große Sache. Gehen wir einfach zurück , um es wieder so zu machen, wie es war, und das war's. Kommen wir nun zur letzten Option, hier haben wir einen Rahmen. Ich habe das nicht mit Absicht zu einem Autoau gemacht. In diesem Rahmen können Sie also sehen, dass ich ein Bild hinzugefügt habe Das ist nur ein Bild. Sie könnten jedoch Ihre eigene Karte mit vielen Details erstellen. Es wird viel Zeit in Anspruch nehmen, aber stellen Sie sicher, dass diese Karte in eine Gruppe oder einen Rahmen eingefügt wird , damit Sie alles wie dieses Bild zusammenhalten können . Und dann werden Sie dieses Bild einfach platzieren, wo immer Sie wollen. Ich habe es einfach in der Mitte belassen und dann zum Rahmen gegangen und dann einfach in beide Richtungen geklickt. Und das ist es. Auf diese Weise können Sie eine Karte erstellen, die in beide Richtungen scrollt Kommen wir nun zu etwas anderem, das sich auf das Scrollen bezieht, aber nicht gerade um Scrollen geht Hier geht es mehr oder weniger um die Positionierung. Nennen wir das einfach Positionierung. Ich habe genau die gleiche vertikale Scroll-Situation hergebracht , die wir hatten Aber was ich hier gemacht habe, ich habe sie in einen Rahmen gesteckt, all das in einen Rahmen, und ich habe diesen Rahmen gemacht Ich habe es als automatisches Layout beibehalten, aber ich habe sie hier gesperrt. Jetzt haben wir etwas, das sich Positionierung nennt. Es gibt mehrere Dinge , über die ich Ihnen gerne erzählen würde. Eines davon, und das ist sehr wichtig. Ist das, was du eine Navbar nennst. Also, diese Gegenstände, nur diese Elemente, ich habe sie aus dem materiellen Vermögen Dies ist das Material Design Kit für Android. Ich habe es gerade von dort bekommen. Du kannst es bekommen und es reagiert ziemlich schnell, funktioniert sehr gut, nur damit du Dinge ausprobieren kannst. Ich werde das halten und es in das automatische Layout bringen . Aber ich werde hier klicken, wodurch das automatische Layout im Grunde ignoriert wird und dieses Element aus dem automatischen Layout Ich rufe es auf und füge es hier Jetzt, wo ich es hier eingefügt habe, ist das im Grunde das, was wir eine Navigationsleiste nennen könnten Ich meine, Abkürzung für Navigationsleiste. Dies ist die Leiste, mit der Sie zwischen verschiedenen Tabs wechseln können . Normalerweise sollte diese Leiste dort bleiben. Machen wir einen Flow daraus und nennen wir es NAP-Leiste. Was Sie jetzt aber sehen, ist, dass es nicht dort bleibt. Warum? Weil das ein scrollbarer Rahmen ist, den wir hier gebaut haben. Durch diesen ganzen Rahmen kannst du scrollen. Es gibt eine Lösung dafür, und das bezieht sich auf die Positionierung. Alles, was Sie tun müssen, ist zum Prototyp zu gehen, von Design zu Prototyp zu gehen und zur Position zu gehen. Anstatt Scroll with parent zu sagen , was die Standardeinstellung ist, fahren Sie fort und wählen Sie entweder Sticky oder Fixed, okay? Also das müssen Sie tun. Im Moment können wir nicht „behoben“ auswählen, und das liegt daran, dass wir das innerhalb eines Rahmens platzieren. Es gibt also einen Rahmen innerhalb des gesamten Rahmens. Was Sie tun müssen, ist, einen Rahmen innerhalb eines Rahmens zu platzieren , sodass zwei ineinander verschachtelt Wir werden das mit Control X ausschneiden und hier einfügen. Stellen Sie also sicher, dass Sie es nicht in einem anderen Rahmen platzieren Dann kommen wir hierher und können das Problem beheben. Das heißt, bleib an Ort und Stelle. Lass es uns jetzt testen. Wie Sie sehen, bleibt es an seinem Platz und Sie können jetzt zwischen verschiedenen Teilen wechseln. Dies ist eine wirklich coole Funktion, die Sie verwenden könnten. Viele Websites verwenden sie oben. Sie haben Ihr eigenes Menü, viele Apps verwenden sie unten. Es gibt verschiedene gemeinsame Standards. Aber alles, was Sie wissen müssen, ist, dass Sie das Problem mit dieser Positionierungsfunktion an seiner Stelle beheben können , aber wir haben noch eine weitere Funktion. Also werde ich dieses Etikett verwenden. Das sind im Grunde Kategorien. Ich werde sie hier einfügen und herausnehmen. Ich möchte sie zwischen diese Elemente einfügen , was schwierig ist. Ich werde das einfach mit Control X ausschneiden und hier einfügen . Ich werde es einfach draußen lassen. In diesem Bild haben wir das, diese Beschriftungen und dann haben wir diese, okay? Ich habe es draußen gelassen, weil ich will, dass es klebrig ist . Was bedeutet klebrig? Lass uns sehen. Klebrig ist im Grunde genommen, wenn du weitermachst und die Positionierung hier klebrig wählst, was bedeutet, dass du am oberen Rand anhältst. Das bedeutet also, dass dieser Gegenstand nicht repariert ist, aber wenn du einmal zu ihm gekommen bist, bleibt er bei dir, okay? Wenn du also merkst, bleibt diese Bewegung bei dir. Viele Apps verwenden das, vor allem, wenn Sie durch eine Liste von Dingen scrollen und dann Ihre Filter hier haben Nehmen wir zum Beispiel an, das ist eine Musik-App, das wäre, ich weiß nicht, wie Popmusik oder ich weiß nicht, das wäre Rock und das wäre Metal und das wäre Country Und was auch immer es ist, du hast diese Labels und du gehst runter, und dann kannst du einfach aus ihnen wählen. Sie bleiben also an der Spitze , sodass Sie, wenn Sie nach unten gehen, immer aus ihnen wählen können. Wir haben hier jedoch ein Problem, und auf dieses Problem könnten Sie stoßen. Wenn wir hier scrollen, stellen wir fest , dass all die anderen Artikel oben auf unseren Etiketten stehen, oder? Das ist durcheinander. Warum? Ich meine, das Etikett sollte oben sein, oder? So sollte es sein . So weiß ich es. Nun, das stimmt, aber wir können das auf verschiedene Weise beheben. Gehen Sie zunächst zu Ihrem automatischen Layout und stellen Sie sicher, dass Ihre Chips nicht transparent sind. Wenn sie keine Füllung haben, dann sind sie natürlich transparent und du wirst sie durchschauen. Als Erstes stellen wir fest, dass sie transparent sind. Also mach weiter und gib ihnen eine Farbe oder stelle einfach sicher, dass der gesamte Rahmen hier eine Farbe hat. Ich kann sehen, dass der gesamte Rahmen eine Füllung hat, sodass wir nicht jedem von ihnen eine Füllung geben müssen. Der ganze Rahmen hat eine Füllung aus, aber er ist immer noch durchsichtig. Der Grund dafür ist , dass es hinter diesen Elementen dahinter auftaucht . Aber gleichzeitig meine ich, das ist ein automatisches Layout. Wenn ich das also nach unten verschiebe, wird es nicht angezeigt. Ich möchte, dass es oben steht, aber gleichzeitig möchte ich, dass es vor dem Text erscheint. Nun, dafür gibt es eine schnelle Lösung. Sie gehen einfach zu dem gesamten Frame, der diese Elemente enthält. Und dann kommst du her. In Autoayout haben Sie also diese Einstellungs- oder Einstellungsoption Und dann siehst du hier Canvas Stacking und oben steht „Zuletzt“ Das bedeutet, dass die letzten Elemente zusätzlich zu den darüber liegenden berücksichtigt werden Das ist also mehr als das, und das ist genau das Problem, das wir haben. Also machen wir einfach weiter und machen es rückwärts und schaffen es zuerst nach oben. Und einfach so, jetzt sind die Beschriftungen über den, ich meine, diesen Elementen, allen. Jetzt haben wir also dieses feste Menü und wir haben dieses selbstklebende Menü oder nicht gerade ein Menü, sondern diese selbstklebenden Banner oder Klebeetiketten , die wir oben haben. So können Sie im Grunde genommen verschiedene Positionierungsverhaltensweisen zu Ihrem eigenen Vorteil nutzen. Auf diese Weise können Sie Ihre mobile App oder Ihre Website so einrichten , dass sie ein wenig interaktiv ist. In diesem Sinne wird es also nicht langweilig sein, du scrollst einfach durch die Dinge, aber es wird auch in der Lage sein, den Leuten Elemente zu zeigen und sie fest oder dauerhaft zu halten , wenn sie sie brauchen, richtig, also denk einfach daran, nur als Notiz, manchmal, wenn du das tust, hast du einige Probleme, wie zum Beispiel, hier haben wir die NAP-Leiste, die so angezeigt wird, als ob sie hinter dem Text wäre. Aber wenn wir tatsächlich zum Design gehen, stellt sich heraus, dass es ganz normal ist. Bei diesem Scrollverhalten mit diesen Positionierungen können Sie also manchmal mit diesen Positionierungen einen Unterschied zwischen Ihrem Design, dem, was Sie hier tun, und der tatsächlichen Anzeige feststellen was Sie hier tun, und der tatsächlichen Also behalte das einfach im Hinterkopf. Es macht ein bisschen schwierig, Dinge zu bearbeiten , weil es so aussieht, als ob hier etwas nicht stimmt , aber da nicht. Also behalte das einfach im Hinterkopf. Okay. Nun gibt es noch eine Sache , durch die ich Sie führen möchte, und das ist eigentlich die Idee von Gesten. Sie haben wahrscheinlich eine App verwendet, in der Gesten verwendet wurden. Ich denke, die meisten Mobiltelefone haben heutzutage Gesten, und ich spreche von der Tatsache , dass beim Scrollen oder beim Wischen mit dem Finger vom unteren Bildschirmrand nach oben etwas passiert, und das ist tatsächlich die Tatsache, dass Sie Ihre App schließen Und wenn du scrollst und deinen Finger nach oben hältst, scrollst du, als ob du von unten wischst und einfach so gedrückt hältst, du scrollst von unten und du hältst ihn Was passiert, ist, dass du normalerweise alle Apps siehst , die geöffnet sind und so weiter und so fort Und wenn du scrollst und von oben nach unten wischst, siehst du auch dein Kontrollzentrum oder deine WLAN-Einstellungen oder was auch immer es ist Das ist also etwas , das du auch hier anwenden kannst . Ich gebe dir ein Beispiel. Viele Apps haben diese Schaltflächen, mit denen Sie zwischen verschiedenen Tabs Ihres Nabbar wechseln können zwischen verschiedenen Tabs Ihres Nabbar wechseln Einige von ihnen haben aber auch eine Wischbewegung, und das können wir einrichten. Hier erfahren Sie, wie Sie das tun können. Was ich jetzt tun werde, ist diese horizontale Seite auszuwählen, und ich werde diese und diese Seite bringen, und ich werde sie hierher bringen. Wir werden sie herunternehmen und sie als unsere zweiten Tabs verwenden. Jetzt, wo wir diese Navigationsleiste auswählen wollen, gehen wir einfach nach oben, gehen zum Frame und öffnen die Ebenen, und wir werden im festen Teil sehen, dass dort feste Navigationsleiste steht und scrollt Das sind die Dinge , die tatsächlich mit dir scrollen und du wirst all die anderen sehen. Aber im Moment machen wir einfach mit der Lösung weiter, okay? Also das ist der, den wir wollen. Und was wir tun können, ist , das zu kopieren und es hier in das horizontale einzufügen. Wir haben es hier eingefügt, was wir tun werden, ist , dieses mittlere Label auszuwählen, und wir werden ausgewählt sagen, und wir werden das Ausgewählte von hier entfernen Das ist unser Tab in der Mitte. Und dann werden wir das wiederholen. Kopieren Sie das, fügen Sie es ein, stellen Sie sicher, dass es repariert ist, und dann wählen wir das Bild auf der rechten Seite aus, machen es ausgewählt. Okay. Normalerweise, am besten, würden Sie sie im Grunde genommen austauschen. Wenn ich also herkomme und diese auswähle, kann ich das ändern. Ich kann ihm ein anderes Symbol geben. Ich meine, hier ist es ein Stern. Hier gibt es viele verschiedene Symbole. Das ist, sagen wir, eine Karte. Mal sehen, ob sie etwas über Karte wissen, oder sagen wir, es ist nur eine Suche. Dann komme ich her und wähle auch die Suche. Und dann auch hier. Für den zweiten , ich weiß nicht, behalte ich einfach den Stern, und für den ersten lasse ich mich etwas aussuchen. Ich nehme einfach den Play-Pfeil. Dann mache ich hier dasselbe. Ich werde einfach mitspielen. Normalerweise wäre es sinnvoll, wenn Sie das als Komponente hätten , damit Sie es nicht jedes Mal ändern müssen . Aber wie dem auch sei, jetzt, wo wir das erledigt haben , werden wir es so einrichten , dass Sie mit nur einem Klick durch sie blättern können. Und so würde ein normaler Button aussehen. So haben wir es immer gemacht. Wir würden das also so machen, dass wir zum Beispiel diese auswählen und sie hierher bringen würden und wir würden sagen, auf Klick, navigiere dorthin. Ich meine, es könnte sofort geschehen oder es könnte intelligent sein. Also das ist eine nette Art, es zu tun. Und wir können den mittleren, diesen und diesen wählen , und dann könnten wir es einfach in den mittleren Rahmen bringen. Schließlich könnten wir sie auswählen und sie leiten. Ups, wähle den falschen. Ich wähle dieses Element, Bezeichnung und die Bezeichnung aus, und ich lasse sie hierher führen. Halte einfach das Plus gedrückt und bring sie her. Jetzt werden sie dorthin navigieren , du musst es nicht einrichten. Alles ist gut. Jetzt lass es uns testen. Ich klicke hier, es geht dorthin. Perfekt. Es ist ziemlich nett, weil es dich nur dazu bringt, zu dem Tab zu gehen, den du brauchst. Okay, also wie reparieren wir das? Nun, es gibt eine saubere Lösung. Siehst du, wir haben es hier oft miteinander verbunden. Wir hatten überall Interaktionen. Sie werden also die Ziehoptionen auswählen , die Sie benötigen. Das ist also einer. Das ist einer. Und das sind Drag-Optionen. Das war keiner. Das ist einer. Jetzt glaube ich, wir haben sie alle. Was Sie tun werden, ist, weiterzumachen und zu Ihrer Drag-Animation zu gehen. Statt Smart Animate wählen Sie „Move in“ oder Push“. Push sieht am besten aus. Ich verstehe jetzt, dass wir nicht alle Drag-Ones ausgewählt haben. Lass uns das eins nach dem anderen machen. Du wirst es von hier nach dort schleppen wollen. Das heißt, es sollte von rechts nach links kommen. So wie das hier. Und gleichzeitig gibt es die entgegengesetzte Art von Animation, von rechts nach links, die so aussehen sollte. Lassen Sie uns das jetzt selbst testen. Bam. Einfach so können wir von rechts nach links wechseln Das ist genau die Art von Animation, die wir gerne hätten. Aber es gibt ein Problem. Ich sehe mir die Navbar an Es wechselt auch auf seltsame Weise. Nun, die Lösung dafür besteht darin, auf passende Ebenen animieren zu klicken Ich werde mich auch für die andere entscheiden. Dadurch wird sichergestellt, dass eine passende Ebene wie diese Navbar nicht beeinträchtigt wird Stattdessen würde es auf eine bestimmte Weise animiert werden. Wie Sie sehen können, funktioniert das genau so. Es ist wirklich nett. Mach weiter und probiere es aus. Ich habe es auch mit der Navbar verbunden , aber das brauchst du eigentlich nicht Ich werde das einfach löschen . Das brauchst du nicht. Lassen Sie uns jetzt weitermachen und sehen, was wir tun können. Wir werden uns auch für diese entscheiden. Also dieser von rechts nach links. Das heißt, die Animation sollte so sein, und jetzt wählen wir das Gegenteil. Sollte so sein. Was haben wir sonst noch? Sonst noch was? Lass es uns überprüfen. Wir haben es vergessen. Wir müssen sicherstellen, dass es passende Animationsebenen gibt Das ist die Einstellung, die wir wollen, und jetzt testen wir sie Mit diesem ist es schwierig, weil du eine Karte hast, du kannst nicht wirklich scrollen oder die Gesten ausführen, sodass du vorsichtig sein musst, wenn es darum geht. Aber mal sehen, ich bin von hier nach hier gegangen, und ich bin auch dorthin gegangen. Aber wie Sie sehen können, gibt es manchmal Probleme , die auftauchen, weil es hier keinen Hintergrund gibt. Es gibt also manchmal einige Schwierigkeiten. Und normalerweise hätte es kein Problem, aber weil es nach links geht, gibt es ein Problem. Um das Problem zu beheben , müssen Sie sicherstellen, dass Elemente wie zum Beispiel dieser Rahmen eine weiße Füllung haben. Wenn Sie scrollen, ist es nicht transparent, es steckt nichts dahinter. Das stellt sicher, dass es kein Problem gibt und das Gleiche hier, wir können sicherstellen, dass all diese, wir können sie alle platzieren. Wir können sie in einen Rahmen setzen und ihnen etwas Polsterung geben und so weiter, und wir können einfach sicherstellen , dass sie einen weißen Hintergrund haben Wenn wir es jetzt testen, ja, ich meine, es ist immer noch problematisch, oder Also ja, du musst aufpassen. Ich meine, weil hier etwas anderes passiert. Weißt du, das ist etwas , worauf man achten muss. Sie müssen sicherstellen , dass Sie für diese Art von Problemen bereit sind . Stellen Sie sicher, dass Sie versuchen, sie auf Ihre eigene Weise zu lösen. Aber wie gesagt, das ist ein bisschen ein fehlerhafter Prozess Es funktioniert nicht immer perfekt, und Sie müssen sicherstellen, dass Sie daran arbeiten müssen Wie Sie hier mit der Navbar sehen können, gibt es einige Probleme, und das passiert, aber Sie sollten nicht akzeptieren, dass Sie weitermachen und versuchen sollten, es auf und das passiert, aber Sie sollten nicht akzeptieren, dass Sie die eine oder andere Weise zu beheben Vielleicht besteht eine Lösung dafür darin, dass das Ziehen auch mit der Navbar selbst funktioniert die gesamte Navbar gedrückt halte, könnte ich sie ziehen und sie einfach so nach links bewegen lassen Mal sehen, wie es funktioniert. Sie sehen also, mit der Navbar selbst kann ich das machen Sei es, es macht Sinn. Ich meine, ich scrolle hier. Ich schaue auf meiner Karte nach. Ich will nicht woanders hingehen. Aber wenn ich weit genug gehe, scrollt es. Wenn ich weit nach links gehe, wird es funktionieren. Offenbar nicht die ganze Zeit. Aber ja, ja, stellen Sie sicher, dass es mit dem Menü mit der Navbar funktioniert und dann kann es losgehen Ja. Aber abgesehen von diesen Fehlern können Sie auf diese Weise im Grunde tun, wie Sie Gesten verwenden können, und zwar nicht nur damit, nicht nur mit der Navigation. Es gibt viele verschiedene Animationen, die du machen kannst. Also mach weiter, probiere sie aus und sieh, wie sie für dich funktionieren. Und genau darum geht es bei der Arbeit an Figma. Es geht darum, zu versuchen und zu experimentieren und zu sehen, was funktioniert und was nicht In dieser Lektion haben wir etwas über Positionierung gelernt. Wir haben etwas über Overflow und Scrollen gelernt, und jetzt haben wir endlich etwas über Gestenanimationen gelernt Ich hoffe, dass Sie daraus einen Sinn gemacht und dass Sie jetzt alleine weitermachen und üben können Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion. 12. FigJam: Hallo und willkommen zu einem weiteren Kapitel des Figma-Kurses für Fortgeschrittene In diesem Kapitel werden wir verschiedene Arten von Diensten oder Tools untersuchen , die von Figma selbst bereitgestellt werden Abhängig von Ihrem Abonnement handelt es sich häufig um Tools, die Sie zusammen mit Ihrem Paket erhalten Aber auch dies hängt von Ihrem Abonnement bei FIGMA ab. Einige davon sind möglicherweise auch im Rahmen des kostenlosen Kontingents verfügbar , wenn Sie Student sind oder wenn Sie das kostenlose Abonnement irgendwie erhalten können In dieser Lektion werden wir genau hier über Fig Jam sprechen Jetzt sehen Sie, dass es Design gibt. Dies ist das Hauptprodukt , das sie anbieten, oder das Hauptwerkzeug. Dann haben wir Fig Jam, Slides, Buzz, Side und M. Heute beginnen wir also mit Fig Jam, und alles, was Sie tun müssen , ist einfach zu diesem Symbol hier zu gehen und einfach darauf zu klicken Und einfach so öffnet sich ein FikJam-Fenster. Nun, das könnte ein kleiner Schock für Sie sein. Es war für mich, O, weil Sie wahrscheinlich daran gewöhnt sind dass Ihr Bildschirm im Dunkelmodus ist, wenn Sie ihn nicht eingerichtet haben und dann ist er plötzlich sofort nur noch weiß. Aber das ist im Grunde die Oberfläche, die du auf Fike Jam bekommst Lassen Sie uns zunächst sagen, was Fike Jam ist. Fig Jam ist ein Tool, mit dem du mit deinen Freunden jammen kannst, genau wie jemand, der in einer Band oder mit Musikern Sie spielen Musik einfach zufällig, die vielleicht chaotisch ist , die nicht strukturiert oder spezifisch geübt ist, sondern auf eine Art, gemeinsam Musik zu machen, um mit der Community, mit den Leuten, mit denen du zusammen bist, etwas zu erfinden den Leuten, mit denen du zusammen bist, und etwas Schönes zu bekommen Das ist genau das, was du tun solltest. Als Designer. Jetzt können Sie natürlich auch mit anderen Designern, mit Projektmanagern, sogar mit Ingenieuren daran arbeiten mit anderen Designern, mit Projektmanagern, . Das ist so ziemlich selbsterklärend. Im Vergleich zum anderen Teil von FigMA ist es sehr einfach Vergleich zum anderen Teil von FigMA Zuerst haben wir hier eine Markierung. Hier kannst du einfach Dinge zeichnen, deine Ideen hier drüben zeichnen und du kannst es einrichten. Sie können einen Textmarker wählen, Sie können ein Washi-Tape und einen Radiergummi wählen und weitermachen und das, was Sie getan haben, löschen Gleichzeitig meine ich, das ist eine neue Funktion, aber hier wird dir gesagt, du weißt schon, du kannst KI verwenden, um diese Funktion zu nutzen, bestimmte Diagramme oder was auch immer zu erstellen Aber lassen wir das vorerst beiseite. Davon abgesehen, ich meine, wir haben mehrere Dinge. Wir haben Haftnotizen. Das ist ziemlich cool. Wenn du im Team bist, kannst du weitermachen und eine Idee einbringen und sagen, wie, oder du kannst einfach sagen, das ist eine App für ältere Menschen, die sich online verbinden möchten , und du könntest sie einfach dort platzieren und verschieben, du kannst sie für später verschieben oder du kannst andere Haftnotizen daneben hinzufügen. Sie haben Formen, aber viele Dinge sind sehr rudimentär Es ist sehr einfach. Du erschaffst keine Dinge, die verrückt aussehen. Natürlich können Sie Dinge einrichten, Sie können bestimmte Farben ändern, aber Sie sollten nicht so tief darüber nachdenken. Das sollen sehr einfache Dinge sein, nur um Ideen zu entwickeln und sie mit dem Team zu brainstormen Sie können auch diese Art von Diagramm erstellen, was wirklich nett ist, weil Sie Dinge und so weiter erweitern und andere Zweige erstellen können, was wirklich nett ist Sie können einfach normalen Text, Ideen oder Ideen für die Website oder was auch immer hinzufügen , Ideen oder Ideen für die Website oder , und ich kann es einfach hier platzieren Wir haben auch Abschnitte. Dies ist auch dem, was wir im Figma-Design haben, sehr ähnlich im Figma-Design haben Wir haben Tische, was ziemlich ordentlich ist. Sie können eine Tabelle erstellen und auswählen, auf wie vielen Spalten Sie wie viele Zeilen Sie sich befinden, und einfach hineinschreiben. Es ist einfach sehr selbsterklärend, sehr einfach. Mach einfach weiter und probiere es aus und springe hinein. Aber der ganze Zweck besteht darin, im Grunde mit Menschen zu arbeiten und effektiv mit ihnen zu brainstormen Sie können auch einen Stempel mit Ihrem eigenen Bild haben, was nett ist, weil Sie sagen können: Das ist meine Idee oder ich stimme Oder noch besser, du kannst einfach ein Like setzen. Wenn dann jemand vorbeikommt, kann er sehen, wer das gesagt hat und sagt: Oh, die Person, die das genehmigt hat, ist Ahmed, so toll Sie können auch die normale Kommentarfunktion verwenden, und Sie haben auch einige der KI-Funktionen hier, und dann können Sie auch Ihre Widgets haben und Sie haben andere Dinge wie Sticker und so weiter Es ist dem normalen Designbereich sehr ähnlich, hat aber nur ein paar weitere Ergänzungen , die dir das Leben ein bisschen einfacher machen Sie haben hier auch einige Vorlagen, was ziemlich nett ist. Ähm, wir können zum Beispiel eine hinzufügen. Sie können sehen, dass diese Vorlagen Ihnen einfach genau zeigen, ich meine, was Sie brauchen. Zeigen von gestern, heute blockiert Aktionselemente und es ist dasselbe, und für verschiedene Teammitglieder könntest du das jeden Tag tun, um zu organisieren oder nicht jeden Tag, aber alle zwei Tage oder so um zu organisieren, was du tun sollst, was du tun willst oder deine Blocker und Und hier hast du die tägliche Synchronisation, gut für den Empfang von Aufgabenberichten, Updates, bla, bla, bla alles ist wirklich nett. Also mach weiter und probiere es aus. Es ist eine nette Art, nicht alles so ernst zu nehmen , wie es auf Figma steht, und nicht alles ist nur Design und Wireframing und Prototyping, sondern manchmal hat man einfach ein paar Ideen Sie möchten nur hier und da ein paar Haftnotizen anbringen. Du könntest sagen: Oh, ich nehme die rote Haftnotizenfarbe, damit du sie unterscheiden kannst, aber ich meine, dein Name steht trotzdem drauf. Ja, darum geht es bei Fake Jam im Grunde . Es gibt noch ein paar weitere Dinge, die du hier erkunden kannst, wie Timer, Musik, das sind ziemlich nette Funktionen , die du zu deiner Sitzung hinzufügen kannst Und wenn ihr zusammen arbeitet und ihr auch an der Unterhaltung teilnehmt, könnt ihr miteinander reden, Musik abspielen oder einen Timer einrichten Also ja, es ist ein ziemlich nettes Feature. Danke fürs Zuhören. Wir sehen uns in der nächsten Lektion. 13. Figma Buzz (Marketing-Teams): Ein anderes Tool, über das Figma jetzt verfügt und das mehr oder weniger neu ist, heißt Gehen Sie weiter und gehen Sie hierher und klicken Sie darauf, und dann öffnen Sie die Figma-Buzz-Datei Und als Erstes werden Sie aufgefordert, eine Vorlage auszuwählen Jetzt können Sie weitermachen und wählen, einfach weitermachen und Ihr eigenes Design von Grund auf neu beginnen. Es liegt wirklich ganz bei Ihnen. Aber lass es uns überprüfen. Das Schöne ist, dass es Ihnen sagt, dass Sie ein leeres Asset starten können , und es gibt Ihnen einige Vorschläge. Instagram, Facebook, X und so weiter. Bevor wir weitermachen, lassen Sie mich einen Schritt zurücktreten und Ihnen sagen, worum es bei Figma Buzz eigentlich geht Figma Buzz ist ein Tool, an das meistens gedacht wird. Die ganze Idee dahinter ist, das Social Media Management und das Social Media Design erheblich zu vereinfachen Social Media Management und das Social Media Design erheblich Weil Figma erkannt hat , dass viele Menschen für soziale Medien entwerfen müssen Ich meine, es wird immer beliebter, besonders bei Tools wie Canva Viele Leute nutzten FIGMA als Designtool für viele Dinge, auch für soziale Medien Sie dachten, warum es nicht offiziell machen. Aber anstatt es einfach zu demselben komplexen Tool zu machen, genau wie die Verwendung von Photoshop, ist Photoshop ziemlich kompliziert wenn Sie nur Social Media Management betreiben. Sie haben es Designern und Social-Media-Managern also viel einfacher gemacht , zu kreieren und zu interagieren. Also werde ich es dir gleich erklären. Was Sie also tun können, ist, zunächst nur mitzuteilen, dass Sie Ihre Arbeit von Figma Design nach Figma Buzz kopieren und angeleitete Vorlagen veröffentlichen können Figma Design nach Figma Buzz kopieren und angeleitete Vorlagen veröffentlichen , oder Sie können Ihre Arbeit einfach kopieren und einfügen , weil es manchmal bequemer ist , an Figma-Design zu arbeiten Es hat viel mehr Tools. Aber wie gesagt, du kannst mit einem leeren Satz beginnen und sie geben dir schon einige Vorlagen. Ich meine, keine Vorlagen, sondern Formate. Und dann hast du einige Vorlagen von Figma selbst. Und du hast auch nach Kategorien sortiert. Anzeigen, drucken. Sie können sogar ein Geschäft mit Drucksachen betreiben. Ich finde sie wirklich toll, aber um ehrlich zu sein, bin ich ein bisschen enttäuscht von der Menge oder der Vielfalt. Ich bin mir nicht sicher, wie sehr sie es gerade erweitert haben, aber lange Zeit hat es sehr gefehlt, vor allem, weil man bis jetzt sieht, dass das nicht viel ist. Die Sache ist, ich denke sie verlassen sich hauptsächlich nur auf ihre eigene Arbeit. Ich bin mir nicht sicher, ob es gerade Leuten zugänglich ist, es ist nur von Figma Es ist sehr einschränkend. Aber wenn Sie möchten, können Sie eine Vorlage auswählen und sie einfach hier hinzufügen. Sie haben hier Text, Bild, Text. Nur um Ihnen das vorzustellen, es gibt zwei Modi. Es gibt den Designmodus, der dem normalen Figma-Modus sehr ähnlich ist Ich meine, es hat die meisten Tools hier. Es gibt einige Unterschiede, aber es ist sehr ähnlich und dann hast du deinen Buzz-Modus Buzz-Modus ist also hauptsächlich für Der Buzz-Modus ist also hauptsächlich für Social-Media-Manager, für Projektmanager, für Leute, die vielleicht nicht viel mit dem Design selbst zu tun haben , aber tatsächlich den Inhalt bearbeiten Also jemand, der nicht viel über das Layout zu sagen hat oder sich vielleicht nicht viel für das Layout interessiert, aber ihm ist wichtig, was hier geschrieben steht, welches Bild hierher kommt oder vielleicht, wie es aussortiert ist, wie es organisiert ist Also, wie ich schon erwähnt habe, können Sie hier viele Dinge tun, aber Sie können sehen, dass die Ebenen hier abgelegt sind, und dann haben Sie hier Ihre verschiedenen Rahmen. Und abgesehen davon haben Sie hier fast die gleichen Steuerelemente, haben Sie hier fast die gleichen Steuerelemente außer dass Sie nicht die Registerkarte „Prototyping“ haben Sie können auch die Asset-Ansicht sehen, also nur ein Asset, oder Sie können die Rasteransicht sehen Auf diese Weise können Sie, ich meine, mehrere Versionen, Zeilen und Spalten erstellen . Und was Sie dann sehen können ist, dass Sie hier zum Beispiel dieses und jenes unterschiedliche Designs haben, oder Sie können eines davon nach dem anderen sehen, einfach wie Folien oder so. Lassen Sie uns also vorerst die Vorlagen schließen und zu dieser zurückkehren. nun zu den meisten Designsachen, über die wir bereits gesprochen haben, Lassen Sie uns nun zu den meisten Designsachen, über die wir bereits gesprochen haben, zur Figma-Buzz-Seite übergehen Was hier wirklich interessant ist, ist, dass es sehr begrenzt ist. Es bietet dir nur bestimmte Dinge wie Farbe. Sie können jede gewünschte Farbe wählen, aber wie Sie sehen, ist dies nicht die erste Option, die Sie erhalten. Du kannst die Grenzen wählen und so, aber es ist sehr, sehr vereinfacht, als ob es für Babys wäre. Und das soll nicht heißen, dass Projektmanager oder Social-Media-Manager nicht all das sind Social-Media-Manager nicht all das sind oder nicht so viel Verständnis haben, sondern es ist einfach die Tatsache, dass sie unterwegs sind und sondern es ist einfach die Tatsache, dass sie unterwegs sind und sich manchmal nicht wirklich um das Design kümmern. Deshalb ist es für sie viel wichtiger, zu sehen, wie die Dinge zusammen funktionieren und welchen Inhalt das hat. Wenn sie also bereits eine Vorlage haben , können sie damit arbeiten. Es muss nicht perfekt sein. Der beste Arbeitsablauf , den ich vorschlagen würde, ist also , dass jemand die Vorlagen hier entwirft und dann gibt es einen Social-Media-Manager , der die Vorlagen in seinem Design verwendet. Wie Sie sehen können, ist es sehr einfach. Und hier stehen ihnen Tools zur Verfügung, die ihnen zur Verfügung stehen. So können sie bestimmte Medien hinzufügen , die auch von FigMA bereitgestellt werden Sie können Text hinzufügen. Nun, dieser Text enthält, wie Sie sehen können, eine Menge Basistext. Mit dieser Idee versuchen sie mehr oder weniger FigMA zu kopieren. Sie können bestimmte Dinge wie Symbole oder Aufkleber und so weiter einfügen , und natürlich gibt es Plugins, weil es immer Plugins gibt Sie können weitermachen und sie selbst erkunden. Aber was wirklich interessant ist, Sie können sehen, dass sie alle ziemlich regelmäßig sind. Was wirklich interessant ist, ist die Option zur Massenerstellung. Das Coole daran ist die Tatsache, dass Sie eine Tabelle mit vielen Informationen hochladen können eine Tabelle mit vielen Informationen hochladen Es ist eine Tabelle, die besagt, dass der Titel so lauten sollte und dann sollte die Beschreibung so sein und dann sollte dies der kleine Text sein Dann könntest du das für so viele Beiträge einrichten , wie du willst, und du kannst sie alle sehr einfach, sehr leicht und sofort erstellen lassen, nur mit Figma oben so viele Beiträge einrichten , wie du willst, und du kannst sie alle sehr einfach, sehr leicht und sofort erstellen lassen, nur mit Figma Sie müssen nicht alle Informationen manuell eingeben , indem Sie das Dokument hochladen Das ist erstaunlich, weil viele Leute ihre Inhalte im Voraus geplant haben und anstatt jeden Text kopieren und einfügen zu müssen anstatt jeden Text kopieren und einfügen zu müssen, können sie einfach die gesamte Excel hochladen die sie haben, was ziemlich cool ist. Und hier können Sie sehen, dass dies auch eine viel vereinfachte Version von dem ist, was Sie hier sehen. Das ist sehr visuell und es ist sehr textbasiert. Das ist also für Leute, die sagen, ich will das nicht anfassen, ich will das Layout nicht kaputt machen, ich will die Vorlage nicht kaputt machen. Also kannst du einfach weitermachen und ihnen sagen: Okay, du musst es nicht kaputt machen, Dinge vom Textteil aus ändern . Und es ist auch einfach schneller, das zu tun. Du kannst also sagen: Hallo, Los Angeles, jetzt lass uns das machen. Hallo in New York. Und dann suchen wir nach einer Brista, bist du es? Klar, das kann bleiben. Und dann neuer Standort. Ich weiß nicht was. Und dann kannst du auch Medien aufnehmen und ein Bild durchstöbern, dieses oder jenes auswählen und Feierabend machen. Einfach so, du änderst einfach Dinge. So ziemlich funktioniert dieses Tool. Sie haben nicht viel mit diesem Tool vor sich, aber genau das macht es perfekt, weil es einen großartigen Workflow zwischen Designern und Social-Media-Managern schafft einen großartigen Workflow zwischen . 14. Figma-Folien: Deshalb werden wir heute über ein weiteres großartiges Tool von Figma sprechen ein weiteres großartiges Tool von Figma Es scheint wirklich so, als ob es nur ein ganzes Paket ist, das mit dem Abonnement geliefert wird, und es gibt einfach weiter Heute werden wir über Figma-Folien sprechen, und die Entstehungsgeschichte ist ziemlich nett weil viele Leute Figma aus irgendeinem Grund im Grunde als Ersatz oder Alternative zu PowerPoint verwendeten Figma aus irgendeinem Grund im Grunde als Ersatz oder Alternative zu PowerPoint weil es dort viel einfacher war, dort zu entwerfen Und FigMa hat das erkannt und die Gelegenheit genutzt und eigenen Bereich für die Erstellung von Folien eingerichtet, was Wenn Sie sich die Figma-Folien ansehen, werden Sie wieder dieselbe Idee sehen, genau wie wir sie bei anderen Diensten oder anderen Tools hatten Sie können bei Null anfangen. Sie können mit einer Gliederung beginnen, die Sie in Ihrer FIG-Marmelade gemacht haben, was super cool ist. Ich meine, das ist nett, weil es von deinen anderen Arbeiten inspiriert ist, was nett ist. Nochmals, weil du nicht alles manuell machen musst. Oder Sie können eine Vorlage erstellen und diese wiederverwenden lassen. Sie können auch eine dieser Vorlagen auswählen , die Sie hier haben Einige davon sind nett. Sie können weitermachen und einfach eine auswählen. Dieser ist ziemlich nett. Pixel-Grid-Thema, und Sie können auswählen, welche Sie hinzufügen möchten. Sie können nacheinander neue Folien hinzufügen, oder Sie können alle hinzufügen und sehen , welche Sie behalten möchten und welche Sie entfernen möchten. Ich füge nur eine nach der anderen hinzu. Auch hier haben sie es in Bezug auf die Einfachheit wirklich geschafft und auch ein Layout erstellt, das PowerPoint sehr ähnlich ist Sie können hier normalerweise Ihre Notizen sehen, Ihre Moderatornotizen, sodass Sie dies schließen oder öffnen können, wann immer Sie möchten Dann haben Sie Ihre Folien hier. Sie können sie auch so sehen , als wären sie Rahmen . So haben viele Leute ihre Folien entworfen , bevor diese Funktion auf den Markt kam. Dann haben Sie einen Vorlagenstil, also können Sie hier weitermachen, Sie können die Farben mischen oder sie ändern. Mischen Sie sie neu, wie Sie sehen können, was ziemlich praktisch ist, weil Sie oft etwas anderes ausprobieren möchten, aber Sie wissen nicht genau, wie das geht Ja, mal sehen, ob wir zu unserer ursprünglichen Farbe zurückkehren können. Nicht wirklich originell, aber es funktioniert und man kann die Dinge auch genauer anpassen. Sie können also direkt zu den Farben gehen und sie nach Ihren Wünschen ändern. Zum Beispiel mag ich dieses Blau nicht. Könnte es in ein anderes Blau verwandeln. Es liegt ganz bei mir. Was nett ist. Diese Option zu haben ist ziemlich nett. Aber Sie können sehen, dass alles vereinfacht ist. Ihr Hintergrund ist einfarbig. Ihr könntet sagen, nein, das gefällt mir nicht. Machen wir einen Gradienten daraus. Welche Art von Gradient? Lass es mich dir zeigen. Ich mache selbst einen Farbverlauf. Ja, Sie können das tun und Sie können natürlich Ihre Auswahlfarben ändern, Ihre Auswahlfarben ändern genau wie Sie es mit Figma tun würden Dann haben Sie hier einige der Tools, einige davon kennen wir bereits, Text, Bild, das ist eine andere Sache, aber es ist nur eine Importfunktion Sie klicken einfach darauf und wählen das Bild aus, das Sie hinzufügen möchten. Fügen Sie ganz schnell ein Bild hinzu. Also kann ich es einfach hier ablegen. Jetzt ist es in den Text aufgenommen, was ziemlich nett ist, oder ich kann es zurückbringen. Und dann kann ich es ziehen und hierher legen. Einfach sehr einfach und intuitiv. Wir können auch alle Arten von Formen erstellen, die wir wollen. Wir können diese Funktion hier verwenden, bei der es sich um Live-Interaktion handelt. Mit dieser Funktion können Sie Ziehpunkte, Stempel, Ausrichtungen und Dinge hinzufügen , die Ihre Präsentation interaktiv machen . Nur um Ihnen zu zeigen , wie ein Loch aussehen würde Sie können hier eine Option hinzufügen und sagen, ich weiß es nicht Sie können Rot oder Blau sagen. Es ist nicht richtig blau. Dann kannst du es deinem Publikum zeigen und es darüber abstimmen lassen und damit interagieren lassen. Lass mich dir zeigen, wie es aussehen würde. Hier haben wir noch keine Stimmen und dann könnten die Leute Rot oder Blau wählen und dann darüber abstimmen. Das Interessante an dieser Funktion ist die Art und Weise, wie sie so konzipiert ist, dass Benutzer Ihren Folien beitreten können. Sie werden nicht einfach Ihren Bildschirm mit einem Publikum teilen, sondern vielleicht laden Sie Personen ein , an Ihrer Präsentation teilzunehmen. Sie kopieren das einfach hierher und geben es dann jemandem, der kommt und sieht sich Ihre Präsentation live an, während Sie sie Ihre Präsentation live an, während präsentieren, oder Sie können sie von hier aus teilen. Aber so muss es nicht sein. So soll es nur sein, wenn es interaktive Elemente wie dieses gibt , über das die Leute abstimmen können. Aber ja, du kannst auch andere Arten von Interaktionen sehen, sodass die Leute ihre Stempel aufdrücken können. Die Leute können ihre Ausrichtung angeben, sich selbst bestimmen, ich stimme zu, ich bin anderer Meinung Lass mich dir zeigen, wie es aussieht. Stimmt voll und ganz zu oder nicht, damit es abstimmen kann. Aber es scheint nicht richtig angezeigt zu werden. Ergebnisse ausgeblendet. Also kann ich sagen, weißt du was? Ich stimme voll und ganz zu oder nicht. Es ist eine sehr einfache Funktion, um ehrlich zu sein. Es platziert einfach ein Bild, wo immer ich hinklicke. Aber es kann etwas Interaktivität hinzufügen oder Sie können einen Prototyp hinzufügen Dann haben Sie den Kommentarbereich. Sie haben Ihre KI und Plugins. Und hier können Sie auch Tabellen, Codeblöcke, Symbole und viele verschiedene Dinge hinzufügen . Auch hier können Sie, so wie wir uns immer daran gewöhnt haben, jederzeit zu Ihrem Designmodus zurückkehren , der Ihnen viel mehr Kontrolle gibt. Ich meine, dieses Design-Panel, dieses Seitenmenü ist mir sehr vertraut. Es ist bequem und ich weiß genau, worauf ich klicke und was passiert. Ich kann komplexe Dinge kreieren anstatt nur einfache Farben zu wählen. Ich kann komplexe Effekte erzeugen und einfach mit Dingen herumspielen. Warum nicht? Ich glaube, das ist die ganze Idee. Wenn Sie ihn benötigen, haben Sie immer diesen Modus, sodass Sie jederzeit zu Ihrem Entwurfsmodus zurückkehren und das Design so erstellen können Ihrem Entwurfsmodus zurückkehren und das Design so erstellen , wie Sie es möchten. So sieht das Tool also ungefähr aus. Probieren Sie es für Ihre nächste Präsentation aus und lassen Sie mich wissen, wie es funktioniert. Es ist nicht unbedingt jedermanns Sache, aber wenn Sie das Gefühl haben, dass Sie das möchten, dann machen Sie weiter. Danke fürs Zuhören und wir sehen uns in der nächsten Lektion. 15. Figma-Standorte (Übersicht): Figma-Sites, vielleicht haben Sie davon gehört. Wenn Sie es nicht getan haben, müssen Sie es tun. Obwohl ich glaube, dass es sich noch in der Beta-Phase befindet, ist es immer noch nicht zu 100% richtig entwickelt. Es ist nicht da draußen. Figma Sites ist jedoch ein Tool, mit dem Sie in Figma ein Design einer Website erstellen und alles von Figma aus veröffentlichen Wie Sie hier sehen können, steht dort Beta Gestalten und veröffentlichen Sie Ihre Website also ausschließlich Auf diese Weise können Sie eine Website erstellen, die responsiv, interaktiv und vollständig einsatzbereit ist , interaktiv und vollständig einsatzbereit Es ist ziemlich erstaunlich. Lass uns weitermachen und es testen. Jetzt musst du natürlich wissen, dass das ziemlich begrenzt ist. Wir können mit einer Vorlage beginnen , nur um Ihnen zu zeigen, was andere Leute gemacht haben. Auch hier gibt es viele Einschränkungen. Aber lassen Sie uns etwas wählen , das schwer zu bewerkstelligen aussieht. Du weißt schon, nicht nur eine normale Seite. Ich finde, das ist interessant, ich meine, das ist ein ziemlich interessantes Layout. Ich kann klicken und sehen, wie sie es gemacht haben. Es ist nicht so komplex, aber wir können eine Vorschau dieser Website im Browser anzeigen. Hier ist die Website und Sie können sehen, dass sie funktioniert. Ich meine, um ehrlich zu sein, ich finde, das ist die beste, nicht gerade die beste Website oder Beispiel, das wir uns ansehen können, es ist nicht so schlecht. Ich meine, das Bild ist nicht von so hoher Qualität, aber vielleicht, weil es eine FigMA-Seite ist oder weil es nur eine Test-Website ist, sieht es so Aber es ist ziemlich erstaunlich und revolutionär, dass Sie in der Lage sind, Websites von Figma aus zu entwerfen und sie mit wenig bis gar keinen Programmierkenntnissen veröffentlichen zu lassen in der Lage sind, Websites von Figma aus zu entwerfen und sie mit wenig bis gar keinen Programmierkenntnissen veröffentlichen zu Also können wir jetzt eine andere Vorlage wählen und sie uns einfach ansehen, etwas, das wiederum nicht so typisch ist Aber ich weiß nicht, das sieht ziemlich gut aus, ziemlich ordentlich. Vielleicht kannst du damit gehen. Ja, lass uns einfach sehen, was sie hier haben. Lass uns diese Vorlage verwenden. Wir werden die Vorlage verwenden und sehen, wie sie aussieht und ob wir sie überhaupt veröffentlichen können, nur um sie zu testen. Sie können hier die heutigen Zutaten sehen, Mangold, Bite Me, Tagesdosis Vegan, dann haben Sie hier ein paar Produkte. Ähm, oder Artikel auf der Speisekarte, sie laden immer noch die Bilder Und Sie können hier sehen, das sind die Bruchstellen. Wir haben bereits darüber gesprochen, und so erstellt man im Grunde ein richtiges Design Sie können die verschiedenen Bruchstellen hier sehen und sie schreiben auf, zwischen welchen Werten dieser Bildschirm angezeigt würde. Das sind also 1280 Pixel plus. Das ist 800-1279 und das ist 1-799, was ziemlich interessant ist 1-799 Schauen wir uns an, wie diese Website aussehen würde. Genau wie beim Öffnen der Vorschauversion können wir auf diese Weise im Grunde sehen, wie sie aussieht, und ich kann sie auf dem Tablet ansehen, ich kann sie auf einem Telefon ansehen und ich kann versuchen, mit den Elementen zu interagieren. Ich meine, das sollte fortgeschrittener sein als Figma denn das ist nicht einfach, du weißt schon, FigMa, das ist eine interaktive Website die richtig mit den Benutzern interagieren sollte Lass uns sehen. Wir gehen auf die Seite Über mich, wir finden diesen Typen. Wir gehen zu TikTok und es führt uns tatsächlich zu Tik Tok. Die Links funktionieren also einwandfrei. Nett. Aber was mich verwirrt , ist, wenn du nach Hause gehst, sehen sie aus, als ob sie anklickbar sind. Okay. Ich habe es geöffnet. Es ist anklickbar. Ich dachte, diese wären auch anklickbar, aber das sind sie nicht wirklich. Ich gehe einfach zurück Okay. Schauen wir uns Apfelzitrussalat an. Ich denke, sie blättern oder schauen sich nur meine täglichen veganen Rezepte an. Ja, da steht Tomatensuppe und dann ist es immer Basilikum-Kali, die beste Pasta Aber ich denke, das ist nur ein Beispiel, weil es nur eine Vorlage Aber das soll etwas sein, das veröffentlicht werden kann. Mal sehen, was passiert, wenn wir diesen Link teilen oder wenn wir ihn veröffentlichen Sie können auf Veröffentlichen klicken und der Site einen Titel geben Außerdem können Sie hier die Probleme sehen, die Sie haben. In Bezug auf das automatische Layout, in Bezug auf den Überlauf und in Bezug auf die Barrierefreiheit Das ist wirklich das einzig Wahre. Sie sind noch nicht da, aber es ist ziemlich toll, was sie tun. Ja, du kannst sehen, wie es aussieht. Wir haben hier viel mehr verschiedene Optionen. Sie fügen eine Webseite hinzu, es ist nur eine Seite und dann können Sie ihr Tablet-Haltepunkt, einen mobilen Breakpoint oder einen benutzerdefinierten Breakpoint hinzufügen mobilen Breakpoint oder einen benutzerdefinierten Breakpoint Das ist von Anfang an ganz anders als nur Frames Dann haben Sie Sigma Make, über das wir später sprechen werden, und Sie haben Einbetten, Sie haben Formen und dann haben Sie die normalen Stift - und Bleistiftwerkzeuge, Import, Bildimport, Text, Kommentar und so weiter und so weiter Vieles ist ähnlich Sie können Ihre Ebenen hier finden, so wie Sie es gewohnt sind, aber Ihre Webseiten finden Sie hier. Sie können sehen, dass wir ein Zuhause haben, was die Einreise angeht. Das sind die drei Hauptseiten, die wir momentan haben, aber ihr könnt euch die Interaktionen oder das Prototyping ansehen und ihr könnt sehen wie sie miteinander verbunden sind Nun, alle Schaltflächen hier, alle eine Verbindung zu dieser Seite her, aber normalerweise sollten sie jeweils ihr eigenes Linkziel haben ihr eigenes Linkziel Sie sollten jeweils ihre eigene Seite haben. Aber im Moment ist das so ziemlich genug für eine Vorlage. So funktioniert dieses Tool im Grunde. Um ehrlich zu sein, ist es etwas komplexer als die normale Designversion. Sie werden auf einige Einschränkungen stoßen und weiter, wenn Sie sie mit der normalen Version vergleichen, aber Sie müssen verstehen , dass Sie damit eine eigene Website erstellen oder für Sie veröffentlichen Wenn wir veröffentlicht werden, können wir es tatsächlich veröffentlichen. Das ist eine Sache, die Sie im Hinterkopf behalten können. Sie müssen nur einen Titel eingeben, und im Moment wird es nur diese URL verwenden, aber ich bin mir ziemlich sicher, dass Sie zu einem anderen Zeitpunkt Ihre eigene URL eingeben können . Aber ja, ziemlich nett. Mach weiter, probiere es aus und ich denke, das ist die Zukunft. Ich denke, das wird in ein paar Jahren die Standardlösung sein und jeder wird Websites direkt mit diesen Tools erstellen , die keinen Code enthalten. Vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion. 16. Figma Make (Anwendungsbeispiel Ideation): Und jetzt kommen wir zu Figma Make. Figma Make ist eine Art Figmas eigene KI. Es ist also nicht genau das, und es könnte ein wenig verwirrend sein, aber es wird Sie durch den Prozess führen und Sie Ihre Tools zu verbinden und Konnektoren hinzuzufügen, um sie mit dem Kontext Ihrer Lieblings-Apps zu erstellen einfach hier klicken, können Sie weitermachen und ein Design anhängen. Fügen Sie also einen Figma-Rahmen oder ein Bild ein, um es daran anzuhängen. Sie können mit jedem der Rahmen fortfahren , die wir zuvor entworfen haben Also wie bei diesem, ich kann es kopieren und hier einfügen, einfach so, es wird hinzugefügt und eingefügt. Sie haben hier verschiedene Modi , weil es auf Gemini und Cloud und verschiedenen Versionen oder Modellen davon basiert und Cloud und verschiedenen Versionen oder Modellen davon Sie können auch hierher kommen und eine Bibliothek auswählen wenn es um das Design und die Komponenten und so weiter geht Oder Sie können von einem Beispiel ausgehen, das bereits erstellt wurde. Aber alles, was Sie in der Realität tun müssen, ist, genau wie bei jeder anderen KI, Ihre Idee zu beschreiben , darüber zu sprechen, was Sie machen möchten, und sie könnte alles tun, was Sie wollen. Ich weiß, dass du ihn immer noch nicht verstehst. Generiert dieses Tool ein Bild? Generiert es kostenlos Text? Was ist hier los? Ich meine, wir haben Chat GIT, wir haben Gemini, wir haben viele andere Tools Was macht das eigentlich für mich? Ich sage dir, was es ist. Es baut dir etwas, das ein bisschen interaktiver ist als alles womit du Erfahrung hast. Ich setze das ein und ich werde sagen, baue mir ein App-Dashboard für eine Kryptobank mit Kreditkarten und Analyse von Ausgaben, Wert, Investitionen usw. Und eine Zusammenfassung der Ausgaben. Und ja, das sage ich nur. Dann könnte ich etwas sagen. Ich bin mir nicht sicher, was sie sich einfallen lassen wird, weil es manchmal schwierig ist, von ihrem Verhalten oder ihren Ergebnissen zu erwarten ihrem Verhalten oder ihren Ergebnissen , dass sie wissen, was sie sich einfallen lassen werden. Also werde ich nur sagen, dass es eine interaktive Option geben sollte , um zwischen verschiedenen Karten zu wechseln. Also werden wir darauf klicken und dann werden wir unseren Chat hier auf der linken Seite haben, und dann wird es anfangen, nachzudenken und unsere Idee mit Code zu entwickeln , der, glaube ich, JavaScript und andere Skripte verwendet und so weiter, es wird versuchen, einen Prototyp zu erstellen Diesen Prototyp können wir weitermachen und zurück in Figma to Figma Design importieren, oder ich denke, wir können ihn sogar irgendwie verwenden, falls Sie ihn dem Design Ihrer eigentlichen Website oder der App hinzufügen möchten . Aber ich bin mir nicht sicher, wie das geht, um ehrlich zu sein, das ist überhaupt nicht mein Bereich In Ordnung, hier haben wir also schon ein Ergebnis. Was daran ziemlich erstaunlich ist, ich meine, wir haben es bereits mit dem tatsächlichen Design, das wir haben, gefüttert. Aber es ging weiter und machte viele Dinge interaktiv. Ich habe seine eigenen Entscheidungen getroffen. Es änderte die Piktogramme entsprechend dem, was es für besser hielt Es hat die Größe der Elemente hier geändert und hier Man kann sehen, wie es mit einigen Dingen gespielt und ich glaube, wenn man es neu startet, es sogar eine Animation hinzugefügt, was ziemlich beeindruckend ist Sie können sich also die Animation ansehen wie sich die Dinge zeigen, und dann gehen Sie runter und sehen, ob wir das Seite an Seite vergleichen, meine sieht wie ein Kinderspiel aus. Es sieht so aus, als ob jemand einfach zufällig war und diese hier sieht aus wie eine echte App, Bitcoin Eerium oder wie auch immer sie ausgesprochen wird Bitcoin Eerium oder , und sie gibt die Zahlen an, von denen ich nicht weiß, wie viel Sie investiert haben, Ihr Anlageportfolio, Ausgabenübersicht, und Sie können sehen, dass sie weitergemacht und einen Balken hinzugefügt hat, um anzuzeigen wie viel Prozent von diesem oder jenem ausgegeben wurden. Aber ich meine, es wurden nur die Kategorien und dann die einzelnen Transaktionen angezeigt Ich glaube, es ist meinem Design hier treu geblieben. Aber du kannst hier sehen, es hat genau das getan, was ich ihm gesagt habe. Ich sollte in der Lage sein, zwischen verschiedenen Karten zu wechseln. Ich meine, es hat unser Setup hier entfernt, was mir ein bisschen besser gefallen hat, wo man die Karten gestapelt sehen konnte Was es hier gemacht hat, ist dass es ein bisschen funktionaler wenn man zwischen ihnen wechselt, was ziemlich cool ist Mal sehen, was passiert. Kann ich darauf klicken? Kann ich damit interagieren? Nicht wirklich, aber Sie können sehen, dass es den Namen Newman auf dieser Seite herausgefunden den Namen Newman auf hat und John Newman einfach behalten hat Ich habe gerade die Daten geändert. Aber lustig genug, diese Karte ist abgelaufen. Sie läuft 2024 ab. Dieser ist noch nicht abgelaufen. Dieser ist bereits abgelaufen. Du kannst also sehen, ich meine, manche Dinge wurden vielleicht nicht durchdacht, oder vielleicht war es nur ein Beispiel aus der Vergangenheit. Und gleichzeitig gibt es Dinge, bei denen ich mich fragen könnte: Okay, warum hast du das geändert? Warum hast du diese Größe hier geändert oder so? Aber trotzdem ist es ziemlich cool, weil du ein Tool hast, das einfach weitergemacht hat und verstanden hat, was ich wollte, und es hat es so verändert, wie ich es wollte. Dann kann ich es um verschiedene Dinge bitten. Oder Sie können hier sehen, dass drei Warnungen stehen. Sie können sehen, was die Warnungen sind. Breite Null und Höhe Null der Ladung sollten mit Null bewertet werden Und das ist verbindendes Verbinden. Ich bin mir nicht sicher. Ich denke, ein Programmierer könnte das viel besser einschätzen oder verstehen , und wir können ihn bitten, es einfach für mich zu reparieren Im Moment werde ich es einfach schließen. Wir können weitermachen und dieses Design kopieren und es einfach hier einfügen. Eines sehe ich sofort: Aus irgendeinem Grund ist es kein mobiles Design mehr . Ich bin mir nicht sicher, warum sie das getan haben, aber das ist eine interessante Wahl, und wir können natürlich versuchen, sie zu ändern. Wie Sie sehen können, ich meine, in vielerlei Hinsicht bin ich mir nicht sicher. Das ist ein sehr unordentliches Produkt, was sie hier für uns produziert haben Ich meine, es ist nicht wie das Werk eines Künstlers. Viele Dinge sind durcheinander und funktionieren nicht und ich bin mir nicht sicher Aber es ist etwas, mit dem du arbeiten kannst. Ich denke, das ist eine wirklich gute Grundlage. Ich meine, wie du siehst, habe ich einfach eine Menge Dinge, damit es richtig funktioniert. Aber ich denke, wie gesagt, es ist eine hervorragende Grundlage für das eigentliche Design. Das ist ein guter Anfang, um zu sehen, was kann ich anpassen? Was kann ich ändern? Ich kann sagen, dass ich schon ein paar Dinge vermasselt habe, was kein Problem ist Aber ich betrachte es Seite an Seite und denke mir, weißt du was? Das ist überhaupt nicht schlecht. Es ging weiter, nahm meinen Entwurf. Manche Dinge sind hier nicht perfekt, ich bin mir nicht sicher, warum der Abstand so ist, oder haben wir es vermasselt. Es sieht so aus, als hätten wir es irgendwie vermasselt. Ja. Ich weiß nicht, wie wir es vermasselt haben, oder vielleicht haben wir es durch Kopieren vermasselt Aber einige Dinge muss ich mich fragen , warum hat es das so gemacht ? Macht das Sinn? Worum geht es bei all dem? Aber ja, viele andere Dinge funktionieren ziemlich gut. Wie gesagt, nimm das als Inspiration als Grundlage und arbeite von dort aus weiter. Vielleicht wäre es sogar eine bessere Idee, das gar nicht zu tun, eine Grundlage aus Ihrem eigenen Design hinzuzufügen und es dann zu bitten, es anzupassen. Vielleicht sollte es andersherum sein. Jetzt sage ich, mach es so, dass ich, wenn ich auf eine Kreditkarte klicke, die Gesamtbeträge und Statistiken sehe und ich Entscheidungen treffen kann, wie die Karte zu löschen oder als gestohlen zu melden und solche typischen Dinge bei Banking-Apps. Okay. Also jetzt scheint es, als ob es eine zweite Version hinzugefügt hat. Mal sehen, was jetzt passiert. Ich kann schon sehen, dass es anklickbar ist. Wenn ich jetzt darauf klicke, B, erhalte ich sofort das Mir ist nur klar, dass ich das ändern kann. Es reagiert vollständig, was mich gerade umgehauen hat. Ähm, weißt du, weil es super cool ist , dass ein solches Tool bereits reagiert. Es erstellt nicht nur Ihre gesamte App, sondern macht sie auch responsiv, baut eine Animation ein und fügt Dinge hinzu, nach denen Sie nicht einmal gefragt haben. Es sagt dir, wie viel du in diesem Monat ausgegeben hast, fügt hinzu, ich habe nach Statistiken gefragt, aber es wurde nicht definiert, welche Art, es heißt aber es wurde nicht definiert, welche Art, , dein aktuelles Guthaben ist so hoch und das verfügbare Guthaben ist so hoch. Und du kannst es einfrieren oder du kannst es herunterladen. Ich bin mir nicht sicher, was du hier herunterlädst und was ich meine, okay, ich schätze, du kannst es einfach einfrieren. Erklärung heruntergeladen. Ich meine, es gibt eine Benachrichtigung , dass etwas heruntergeladen wurde. Dann heißt es hier auch ausstehend. Sie können die Karte als gestohlen melden. Schau, dafür hat es sogar ein Pop-up gebaut. Siehst du, das sind ziemlich coole Sachen. Sie können die Karte löschen. Oh mein Gott, und es hat es sogar gelöscht. Ich habe mir überlegt , es zu löschen. Ich meine, was würde passieren, wenn wir alle Karten löschen würden? Jetzt bin ich neugierig. Wird es einen leeren Staat haben? Schau, und jetzt heißt es, dass keine Karten verfügbar sind. Ich habe auch an diesen Fall gedacht. Das ist es, was an dieser Funktion absolut überwältigend ist , und Sie können viele Dinge oder die meisten Dinge sehen und Sie können viele Dinge oder die meisten Dinge sehen, die nicht wirklich prototypisch waren, und Sie können hier sehen, dass dies den Rahmen verlässt, was Ihnen sagt, dass dieses Tool nicht perfekt ist. Aber viele Dinge , zu denen es bereits in der Lage ist, müssen nicht perfekt sein. Sie sind schon sehr beeindruckend. Aber du musst bedenken, nur um ehrlich zu sein, dies mehr oder weniger auf den Entwürfen anderer Leute basiert. Ich glaube, dass es sich auf Daten der Menschen stützt, die sie beim Entwerfen gesammelt haben. Wenn Sie und ich also mit unseren eigenen Dateien entwerfen , wird Figma das irgendwie verwenden, oder vielleicht verwendet es Produkte in der Öffentlichkeit oder was auch immer es ist Aber diese KI muss sich auf Daten einiger Leute als Trainingsdatensätze stützen, also ist es wirklich so, dass Sie sie mit diesen Daten füttern und sie sie Ihnen zurückgibt Die Tatsache, dass, wenn wir das neu laden, die Tatsache, dass sie versteht, wie man eine Karte verwalten kann, ich habe ihr gerade gesagt, finde heraus, mach das interaktiv und sie findet interaktiv und sie findet heraus , was man alles lernen kann Sie können sehen, dass es hier einige Bugs gibt. Das sind runde Ecken und dann scrollst du und dann ist es nicht mehr rund. Es ist also komisch. Aber es hat eine Menge Dinge herausgefunden, aber gleichzeitig weiß es das, weil es andere Banking-Apps gesehen hat. Es weiß, wie sie funktionieren, und so klaut es mehr oder weniger diese Ideen und mischt sie für Sie neu Und ja, Sie können sehen, dass es diese Farben so eingerichtet hat, dass sie zu den Farben passen, die wir bereits haben Nochmals, es ist großartig, aber du musst vorsichtig sein, wenn du dem vertraust , denn was auch immer es dir gibt, wird etwas sein , das irgendwann irgendwo von jemandem gemacht wurde Behalte das also im Hinterkopf. Aber auch hier ist dieses Tool großartig. Mach weiter, probiere es für viele verschiedene Dinge aus. Das ist nur die Spitze des Eisbergs. Es gibt noch viel mehr Dinge , die Sie damit machen können Probieren Sie es selbst Danke fürs Zuhören Wir sehen uns in der nächsten Lektion. 17. Wenn diese Tools helfen oder ablenken: wir uns nun viele oder alle Tools angesehen haben, die derzeit in Figma verfügbar sind, ist es an der Zeit, dass Sie die Entscheidung treffen und das Urteil fällen und verstehen, ob diese Tools zu Ihren Gunsten sind, ob sie Ihnen nützen und Ihnen helfen, Ihre Ziele zu erreichen und Ihre Arbeit zu erledigen, oder ob sie Ihnen im Weg stehen und Sie stattdessen ablenken Das kann ich nicht für dich entscheiden. Aber vielleicht kann ich Ihnen eine Idee geben , indem ich Ihnen meine eigenen Erfahrungen erzähle. Nun, ich liebe und schätze den Designmodus absolut, und ich finde ihn absolut brillant und er ist das Herzstück von Figma Ich meine, es ist das Kernprodukt. Von dort oder davor haben wir Fig Jam bekommen. Fi Jam eignet sich auch hervorragend für Teamarbeit Es eignet sich hervorragend für Brainstorming und viele dieser Prozesse Aber wenn Sie kein großes Team haben oder nicht so eng zusammenarbeiten, wenn Sie nicht auf diese Weise zusammenarbeiten, kann FikJam Ihnen in die Quere kommen Vielleicht stecken Sie, anstatt die eigentliche Arbeit zu erledigen, in einer Analyselähmung fest Sie werden einfach Ideen aufschreiben, sie aufstellen, kategorisieren, Kommentare schreiben und so weiter, und nie etwas fertig bekommen Es ist also ein großartiges Tool. Probieren Sie es aus, aber alles hängt von Ihrem Anwendungsfall ab. Ich persönlich verwende es nur bei einigen Projekten, bei denen ich der Meinung bin , dass Teamwork dort sehr wichtig ist, und es gibt Leute, die begeistert und bereit sind, teilzunehmen und ihre Ideen zu teilzunehmen und ihre Ideen ohne zu viel Zeit zu investieren Dann haben wir Figma Slide, das zweifellos ein großartiges Tool ist Aber ich persönlich bevorzuge es, etwas wie PowerPoint zu verwenden. Ich weiß, das mag konservativ oder traditionell erscheinen, aber ich habe wirklich das Gefühl, dass sich PowerPoint in der Branche als führendes, vertrauenswürdiges und zuverlässiges Produkt erwiesen hat sich PowerPoint in der Branche als führendes, vertrauenswürdiges und zuverlässiges Produkt erwiesen vertrauenswürdiges und zuverlässiges Produkt Was auch immer passiert, ich weiß, dass PowerPoint mir den Rücken freihält und wenn mein Computer Feuer fängt, und ich weiß, dass, wenn ich woanders hingehe und zum Computer eines anderen gehe, wahrscheinlich PowerPoint hat Ich weiß nicht, ob sie Figma haben. Ich meine, natürlich kann ich Figma online aufrufen, aber ich weiß nicht, ob ihr Computer es richtig ausführen kann Viele dieser Fragen kommen Sinn und deshalb denke ich, dass PowerPoint einfach die einfache Option ist , die naheliegende Option Aber wenn Sie nach etwas anderem suchen und etwas, das ein bisschen mehr Flexibilität und Abwechslung ermöglicht, dann ist FigMA Slides kostenlos Dann haben wir Figma Buzz, was meiner Meinung nach definitiv eines der Top-Produkte von Figma ist eines der Top-Produkte von Nach dem Design ist es vielleicht das zweite oder dritte nach Es ist einfach großartig. Es ist absolut fantastisch für Leute, die soziale Medien verwalten und einen klaren Überblick darüber benötigen, was sie tun, ohne all diese komplexen Tools zu haben. Dann haben wir die Figma-Website, auf der ich es schon einmal gesagt habe, und ich werde jetzt sagen, dass sie revolutionär und einfach großartig ist revolutionär und einfach großartig Aber um ehrlich zu sein, die Tatsache, dass sie sich noch in der Beta-Phase befindet, gibt mir viele Zweifel Ich denke, bevor Sie ein Portfolio, eine Website oder eine Reihe von Websites erstellen , warten Sie ein wenig, denn wir wissen nicht, wohin das führt und wir wissen nicht, wie das in Zukunft funktionieren wird. Aber ich kann nicht leugnen, dass es ein unglaubliches Feature ist. Am Ende haben wir dann M. Figma Make ist ein großartiges KI-Tool, und ich würde mir vorstellen, dass es sogar umwerfend ist und sich von vielen anderen Tools, vielen anderen KIs und der Tatsache unterscheidet sich von vielen anderen Tools, vielen anderen KIs , dass es spezifisch ist und sich auf UIUX-Design und Prototyping konzentriert Es geht nicht nur darum, sich Text oder Bilder auszudenken, sondern es macht beides und es entwickelt Frames, es entwickelt Interaktionen und Benutzerabläufe und so weiter. Aber ich würde Sie davor warnen und sagen, seien Sie vorsichtig. Lass dich nicht dadurch ersetzen. Machen Sie sich nicht ersetzbar , wenn Sie es überbeanspruchen. Und denken Sie daran, dass ich mir ziemlich sicher bin , dass es sich bei den Quellen, die sie verwenden, um Designs anderer Leute handelt Wenn Sie ein Design auf Figma öffnen oder vielleicht ein Design in der realen Welt veröffentlichen, Figma AI vielleicht darauf gestoßen und hat es verwendet und als Trainingsdaten verwendet, was ein bisschen durcheinander ist, weil das Ihr Lebensunterhalt ist Das ist deine Arbeit und niemand bittet dich um Erlaubnis und sie machen weiter und sie nehmen einfach deine Arbeit und erstellen Ethik angeht, ein bisschen suspekt, aber abgesehen davon ist die Fähigkeit, über die sie verfügt, absolut verrückt Ich denke, es ist irgendwann notwendig , dass jeder UIUX-Designer verwendet Pigma regelmäßig und auf effektive Weise lernt und Ja, das ist meine persönliche Meinung, meine persönliche Bewertung all dieser Tools Wenn es nach mir ginge, würde ich sagen, mach weiter und benutze sie alle. Verwenden Sie sie und schauen Sie, was funktioniert und was nicht, um sicherzustellen, dass sie Sie nicht von der eigentlichen Arbeit ablenken Sie nicht von der eigentlichen Arbeit Wenn sie dir beim Brainstorming helfen, sie dir bei der Präsentation helfen, sie helfen, deine Ideen zu organisieren oder deine Website ohne Code zu veröffentlichen deine Website ohne Code zu veröffentlichen , dann Ich freue mich für dich. Aber wenn du das Gefühl hast, dass das aus der Bahn gerät und du dir aus dem Weg gehst, etwas zu tun, dann tu es nicht. Konzentrieren Sie sich auf das echte Design. Also, vielen Dank fürs Zuhören Wir sehen uns in der nächsten Lektion. 18. Abschlussprojekt: Reaktionsfähiges SaaS + Mikrointeraktionen: Hallo und willkommen zu einer weiteren Lektion des Figma-Kurses für Fortgeschrittene In dieser Lektion werden wir an einem fiktiven Projekt von uns arbeiten, eine Art Praxis, wenn Sie Hier haben wir also eine sehr vereinfachte Aufforderung mit einem sehr simplen Designsystem, nicht wirklich ein Designsystem, sondern nur ein paar Elemente, sondern nur ein paar Elemente uns im Entstehungsprozess leiten sollen, Dinge, die ich getan habe und die ich kurz vor dieser Lektion gemacht habe Hier haben wir also ein Logo oder ein Symbol. Nochmals, sehr simpel, und das ist für eine App namens Itify und hier sind die Farben Lassen Sie sich nicht täuschen, das ist nicht Spotify, das ist nicht Spotify, nichts damit zu tun, sondern es hat einen sehr ähnlichen Namen Spotify Die ganze Idee dieser App oder dieses Software-as-a-Service-Produkts besteht darin Menschen im Grunde dabei zu helfen, Einblicke zu gewinnen und Daten zu analysieren, eine ganze Reihe von Der gesamte Anwendungsfall dieses Projekts besteht darin, dass wir oft auf Daten stoßen. Wir sammeln viele Fotos, wir sammeln viele Zahlen und Informationen über Menschen , ob es für Forschungszwecke oder für Studien ist oder ob wir dann nicht wissen, was wir damit anfangen sollen. Ich habe absolut keine Ahnung. Normalerweise können Sie jetzt auf Ihrem Telefon zu bestimmten Produkten gehen , um bestimmte Dinge zu tun. Sie können ein Dokument mit Ihrem Telefon scannen. Sie können ein Dokument in die Cloud oder etwas Ähnliches hochladen . Aber was passiert, wenn Sie nicht wissen, was Sie damit anfangen sollen? Heutzutage geht man einfach direkt zu KI, künstlicher Intelligenz. Sag mir, was kann ich damit machen? Das ist wie eine KI-gestützte App, die Ihnen hilft zu verstehen, was Ihre Daten und sie Ihnen hilft, sie zu visualisieren. Es ist wie eine KI-Eingabeaufforderung , die bereits eingegeben wurde und bereits bestimmte Optionen bietet. Lassen Sie uns mit der Gestaltung beginnen. Also werde ich die Telefonschnittstelle entwerfen, damit sie wie eine App aussieht. Und das ist ein Software-as-a-Service-Produkt. Denken Sie also an Zoom, denken Sie an Slack, denken Sie an Dropbox oder Google Drive Dies sind Dinge , die diese Software als Service verkaufen diese Software als Service Das ist also ein Service, den wir Menschen anbieten. Es ist also so etwas wie ein Geschäftsmodell. Also fügen wir einfach einen iPhone 17-Rahmen hinzu. Ich werde versuchen, das Einfache zu halten , nur damit ich diese fünfstündige Lektion nicht mache diese fünfstündige Lektion , weil Sie keine Stunde erstellen können, aber wir werden versuchen, das zumindest für die Hauptseite zu tun , das zumindest für die Hauptseite Also das Wichtigste zuerst, ich meine, Sie sollten einige frühere Wireframes, frühere Entwürfe und Skizzen haben, um zu verstehen, was Sie tun möchten und wie Sie es am besten tun Aber im Moment springen wir in den Prozess ein. Wir haben das Logo schon hier. Also können wir dieses Logo benennen, und ich werde es vorerst einfach hier kopieren und einfügen, und ich werde es mit K behandeln, ich kann die Größe ändern und ich kann es vorerst hier platzieren, ich kann auch den Hintergrund entfernen Also ist es hier nur das Logo. Okay. Also das ist unsere App. Jetzt werde ich versuchen, die Navigation oder die erste Seite zu verstehen, und lassen Sie uns mit der Navigation fortfahren und versuchen zu verstehen , wie das sein wird. Ich werde weitermachen und versuchen, eine Apple-Navigation zu erstellen . Also werde ich dem 50 runde Ecken geben und ich werde es so gestalten, dass es hier eine ganze Leiste gibt, falls Sie mit der neuen Apple-Designsprache nicht vertraut sind, und hier gibt es eine Schaltfläche. Okay, aber wir werden versuchen, sie so klein wie möglich zu halten , nicht zu groß. Ich denke, das ist gut genug. Dann werde ich weitermachen und sie auffüllen. Die Füllung kann etwas gräulich sein. Wir können diese Farbe gezielt verwenden und ihr einen Strich geben Jetzt möchte ich das bei Glassy machen , ihm ein glasiges Aussehen geben Pass auf, was ich versuchen werde zu tun. Es ist nicht so einfach, aber du kannst versuchen zu sagen, wohin ich gehe. Also, wenn es um den Schlaganfall geht, möchte ich, dass er ungefähr so ist. Und dann gebe ich 50% Und ich werde hier kopieren. Da haben wir's. Das sind unsere Buttons und ich muss eigentlich nicht zwei Versionen erstellen. Ich kann einfach eine davon erstellen und von dort aus weitermachen. Aber lassen Sie uns sehen, was wir mit ihnen machen können. Das Wichtigste zuerst: Wir werden hinzufügen und dem etwas Transparenz hinzufügen und dem Ganzen einen Hintergrundunschärfeeffekt von vielleicht zehn geben einen Hintergrundunschärfeeffekt von vielleicht zehn Dann erstelle ich hier ein Quadrat darunter einfach die Größe und gebe die Farbe Blau, klicke auf I, setze es in den Hintergrund und jetzt können wir diesen Effekt der Hintergrundunschärfe untersuchen Nur um sicherzugehen, dass wir es wirklich so hinbekommen , wie wir es haben wollen Jetzt kann ich sagen: Okay, das ist ein bisschen besser. Ich meine, weil es sonst nicht gut lesbar ist, also müssen wir einen Weg finden, das zu umgehen, einen guten Wert zu finden. Sie können entweder die Unschärfe erhöhen oder wir können sie weniger transparent machen. Es liegt wirklich an uns Sie können alternativ auch einfach den Glaseffekt verwenden. macht es also so ziemlich das In diesem Fall macht es also so ziemlich das, was Sie von ihm erwarten, und es ist ziemlich gut. Lassen Sie uns das vorerst einfach verwenden, da es ein neues Feature ist und ich es ausprobieren möchte. Und was wichtig ist, ist, dass man sehen kann, auch wenn sie es nicht sind, ich meine es steckt nichts dahinter, sodass man sie sehen und erkennen kann , dass sie getrennt sind, und das ist etwas , was wir derzeit damit erreichen können , , was wir derzeit damit erreichen können, was einen Hinweis darauf gibt, was hier passiert. Lassen Sie uns nun mit den Knöpfen weitermachen. Jetzt können wir mit Symbolen arbeiten und ich versuche nur zu verstehen, was ich hier für diese Navigation hinzufügen möchte. Nichts, was ich unbedingt haben möchte, lassen Sie uns zuerst deren Größe ändern und sicherstellen dass die Schriftart hier Rubik ist, was ich gewählt habe, damit wir hier Rubik verwenden können, fett oder nicht fett Dann lass uns einfach darüber nachdenken, was wir hier hinzufügen wollen. Ich persönlich denke, es sollte einen Tab für Berichte, Berichte oder Analysen geben, und dann sollte es einen Tab für Profil oder Einstellungen geben, und dann sollte es hier einen Tab für Werbung geben. Oder erstellen oder analysieren. Ich mache es hier einfach wie eine Plus-Schaltfläche und dann bringe ich sie hier in die Mitte. Und dann können wir eine dritte Schaltfläche haben, und diese dritte Schaltfläche könnte etwas über die Community oder so etwas Ähnliches sein, um zu sehen, was die Community vorhat, oder? Schauen wir uns also an, wie wir das herausfinden können. Also jetzt kannst du das herbringen , nur um zu sehen, wie es aussehen würde. Mal sehen, wie es aussieht. Okay, wir müssen es vielleicht etwas kleiner haben und sehen , wie das läuft. Okay. Also, im Idealfall werden wir jetzt hier ein Symbol haben. Ich werde tolle kostenlose Icons verwenden. Und das Schöne an diesen ist, dass du manchmal den Namen des Symbols schreiben kannst , das du verwenden möchtest, aber du musst nur sicherstellen, dass es solide und nicht normal ist. Also zum Beispiel Berichte, ich könnte Dokumente oder ähnliches oder Papier schreiben oder, weißt du, ich kann schreiben, wir können überprüfen, was sie haben. Du musst sichergehen, dass das, was auch immer du haben willst , auch wirklich so heißt. Hier sehen Sie zum Beispiel, es gibt nichts, was Dokumente genannt wird, aber Sie müssen sicherstellen, dass es kostenlos ist. Du kannst weitermachen und es von hier bis kostenlos filtern und dann schauen, was dir einfällt. Zwischenablage ist ziemlich gut für Berichte, Ich denke, die Zwischenablage ist ziemlich gut für Berichte, also kannst du sie einfach verwenden Sie können das normal und solide verwenden. Das hängt von der Verfügbarkeit ab. Wir werden es größer machen. Und dann werden wir ein automatisches Layout zwischen diesen erstellen , indem wir Shift und A gedrückt halten. Jetzt haben wir hier eine Schaltfläche Wir machen weiter und machen daraus eine Komponente, also sagen wir Nav-Taste So werden wir es nennen. Aber im Idealfall sollten wir das Ganze ein wenig nach oben und unten aufpolstern, oder? Und dann wird durch Doppelklicken die Breite angepasst. Ich meine, ja, jetzt umarmt es sich. Und was wir tun werden , ist einen Hintergrund zu erstellen, eine Füllung zu erstellen und ihm eine runde Ecke zu geben Weil das der Button sein wird , den wir haben werden, oder? Das ist also quasi der Bereich , den wir umrissen haben wollen. Und was wir tun können, ist das zu kopieren und hier einzufügen und zu sehen, wie es aussieht. Wir können die Farbe hier ändern und Sie können sehen, wie es aussieht. Ich meine, vielleicht brauchst du ein bisschen mehr Polsterung auf beiden Seiten. Sie sehen also, das ist der Bereich, der ausgewählt wurde. Wir müssen es nicht auf diese Weise verwenden, aber es ist einfach gut zu wissen. Ja, jetzt haben wir sie und wir können sie im Grunde kopieren und einfügen, kopieren und einfügen. Jetzt machen wir das Ganze von hier aus zu einem automatischen Layout . Jetzt ist es ein Autolayout mit vier Pixeln als Abstand. Dann können wir diese hier ändern. Wir sagten Einstellungen und dann können wir hier Zahnräder schreiben. Mal sehen, ob Zahnräder funktionieren. Das hat nicht funktioniert. Ausrüstung oder Zahnräder. Aber das ist nur verfügbar , wenn es solide ist. Vielleicht müssen wir das Ganze einfach solide machen. Das passiert, wenn Sie ein begrenztes Budget haben. Wenn Sie jedoch die Pro-Version verwenden, können Sie die Solid-Version und die Pro-Version verwenden. Dann haben wir Community. Wir werden hier einfach Community schreiben und dann werden wir Benutzer haben , vielleicht funktioniert das perfekt. Nutzer. Jetzt haben wir diese drei Knöpfe. Idealerweise sollten Sie keine Knöpfe haben, die so unterschiedlich geformt sind , ich denke, es sollte nicht sein, dass einer so viel größer ist als der andere und so weiter Ich meine, das passiert. Sie können damit leben, oder im Idealfall können Sie dafür sorgen, dass sie alle die gleiche Größe haben. Lass uns einfach weitermachen und diese 12 machen und sie etwas kleiner machen und dann werden wir sehen und sie auch ein bisschen kleiner machen. Wir machen den ganzen Button ein bisschen. Lass uns die Dinge auf den Kopf stellen. Okay. Was wir dann tun können, anstatt es zu umarmen, können wir es auf eine feste Breite legen Diese feste Breite könnte also, ich bin mir nicht sicher, 70 oder so Aber das Problem ist, ich meine, sie haben jetzt schon ihre eigenen Werte. Also geh einfach zurück. Gehen Sie also von Umarmung aus und schreiben Sie dann einfach eine Zahl und Sie müssen sie nur bearbeiten, weil sie alle ihre eigenen Größen haben Sie umarmen sich also nicht einfach, du musst es nur auf 60, 70 machen Aber wie Sie wissen, ist das Problem hier, ich meine, sie werden wirklich schlecht geformt, wenn Sie diese Sie müssen also sicherstellen, dass sie so groß sind wie die größte, nämlich diese. Mal sehen, wie breit dieser ist. Also 89 können wir einfach 90 für alle machen. Dann sieht es ein bisschen besser aus. Stellen Sie sicher, dass alles drin ist , sodass auch dieser Text zentriert sein sollte, und dann sieht er ein bisschen schöner Wir werden das löschen und testen, wie das aussieht Ich werde das einfach entfernen oder ich kann es einfach sehr grau machen und dann sehen, wie es aussieht. Okay. Sieht okay aus. Es sieht besser aus. Schauen wir uns das mit dem eigentlichen Geräterahmen an. Es ist nicht so schlimm. Wir können es etwas zur Seite legen. Ja, das ist nicht so schlimm. Machen Sie daraus eine Komponente. Lass uns weitermachen und versuchen, das zu tun. Wir können zwei Versionen davon haben, oder wir können das einfach verstecken und so etwas wie einen Kreis derselben Größe erstellen. Wir sagten, das sind 90 und 54, 90. Und dann kannst du ihm 50 runde Ecken geben und dann können wir es mit 10% schwarz machen, dann können wir es nehmen und es hier hinzufügen und wir ignorieren das automatische Layout, also wird es hier nur im Hintergrund sein. Was wir tun werden, ist, zwei verschiedene Versionen der Nav-Schaltfläche zu erstellen . Eine von ihnen wird grau und die andere wird vollständig farbig sein. Mal sehen , wie das aussehen könnte. Wir werden das in den Hintergrund rücken, und dann werde ich das auswählen und schauen, wie es mit Variante zwei aussieht. Nun, es sieht nicht sehr gut aus. Lass es uns einfach hier hinzufügen und sehen, wie es auf dem echten Deal aussieht. Es sieht hier ein bisschen besser aus, um ehrlich zu sein, nicht schlecht. Okay. Jetzt können wir uns an die Arbeit machen. Dies heißt rnVBR und wir können mehrere Versionen davon hinzufügen Ich werde einfach weiter hinzufügen. Und dann werde ich das hier nehmen und das hier geben , dann mache ich Variante zwei daraus. Das hier, mach es zu Variante eins und das Gleiche hier, Variante zwei, Variante eins, und dann nehme ich den Hintergrund und bringe ihn hierher. Okay. Jetzt haben wir also diese verschiedenen Versionen, und ich nenne diese eine Berichte, diese eine Einstellung und diese eine Community. Sie können die gesamte Eigenschaftenseite aufrufen. Und jetzt haben wir dieses Nabbar-Setup, und es sieht sehr nach Apple Das ist also ziemlich nett. Und ja, jetzt haben wir das. Wir werden es gleich zum Laufen bringen, aber ich denke darüber nach, die andere Version zu erstellen, nämlich die Plus-Schaltfläche. Ich werde das kopieren und hier einfügen, und dann werde ich zwei davon löschen. Ich lösche den zweiten Kreis Als Erstes klicke ich mit der rechten Maustaste und trenne diese Instanz. Dann schreibe ich Plus, sodass wir eine Plus-Schaltfläche erstellen können, oder wir können unsere eigene Plus-Schaltfläche erstellen Aber was am wichtigsten ist , ist, dass er eine Höhe von 54 hat, genau wie dieser hier, er sollte dieselbe Höhe haben Eigentlich war das nicht 64, vergewissere dich, dass es 64 ist. Jetzt ist das zentriert. Wir können es ein bisschen größer machen und wir können ihm die gleiche Farbe geben. Auch hier gibt es keinen Grund, warum das den ganzen Bereich einnehmen sollte, also lassen wir es einfach umarmen und dann nennen wir diese Werbeschaltfläche, kopieren, einfügen, sie hierher bringen und wir werden daraus ein automatisches Layout machen, beide platzieren sie in der Mitte, und da haben wir es Jetzt haben wir diese beiden Knöpfe. Sie sehen nicht perfekt aus, aber sie sehen ziemlich gut aus, würde ich sagen. Fügen wir das jetzt einfach in den Hintergrund ein, um zu sehen, wie es aussehen würde. So sehen die Buttons aus. Sie sind ein bisschen, aber sie interagieren mit dem Hintergrund. Ich habe das Gefühl, das könnte etwas kleiner sein. Aber lassen Sie uns es von der eigentlichen Komponente aus bearbeiten. Also werde ich 64 mal 64 machen und das automatische Layout in der Mitte erstellen und ich werde dieses 24 machen , nur damit die Symbole so unterschiedlich aussehen. Das sieht ein bisschen besser aus, und dann werden wir hier anfangen, am eigentlichen Layout zu arbeiten . Wenn Sie zu Berichten wechseln, sollten Sie jetzt normalerweise ein paar Schaltflächen haben , auf denen aktuelle Berichte, diese Berichte, jene Berichte, was auch immer steht. Gleichzeitig sollten wir eine Vorstellung davon haben, was wir auf der Hauptseite haben. Ich meine, was haben wir? Haben Sie einen aktuellen Bericht oder nicht? Was wir tun können, ist, einen leeren Staat zu erstellen. Nun, das ist ein leerer Zustand also wenn es nichts gibt, zeigt man das. Was wir tun können, ist, dass du es nicht tust, lass uns Rubik daraus machen Sie haben noch keine Berichte. Wir können das in die Mitte setzen, 16, und dann können wir hier eine Illustration machen oder etwas hinzufügen. Ich meine, wir können selbst etwas tun , ein trauriges Gesicht oder so. Nun, das soll die Benutzer dazu bringen, Ihr Produkt zu benutzen. Ich kann einfach den Hex-Code hier kopieren, raus. Kopieren und einfügen. Ich kopiere das. Ich werde es so machen. Dann ist es besser, wenn du irgendwie eine Identität für diese ganze Sache behältst. Ich werde sie gruppieren und sie dann zentrieren. Ich werde die Gruppierung entfernen Und ich kann zum Beispiel eine Brille hinzufügen, weil das eine App für Einblicke und so weiter ist Das könnte zeigen, dass, hey, weißt du, wir sind alle ein paar Nerds Das ist ein netter Hinweis darauf, weil es einige Identitäten schafft Es ist nicht nur ein generischer leerer Zustand, sondern es zeigt, was vor sich geht Ich wähle diese aus und mache daraus die Brille. Und ich könnte sie auch etwas dünner machen, wenn wir wollen. Sie haben also noch keine Berichte. Das ist unsere Hauptseite. Ich sage nur, dass es noch keine Berichte gibt, aber gleichzeitig könnten wir hier ein automatisches Layout erstellen und ihm ein bisschen Farbe geben. Wir können das wieder wählen und daraus 36 machen und dann etwas Text hinzufügen, ein automatisches Layout erstellen. Nun, dem Text, wir könnten ihm vorerst die gleiche Farbe geben. Und gib uns etwas Polsterung. Also acht mal acht, oder es könnten 12 sein oder was auch immer wir wollen Dann könnten wir im Grunde genommen aktuelle Berichte sagen oder wir können einfach ein paar Kategorien haben. Schaffen Sie einen gewissen Abstand zwischen ihnen und wir könnten alle aktuellen Nachrichten haben, was auch immer. Ich werde rechts und links etwas mehr Polsterung hinzufügen 16 wäre eigentlich viel schöner. Also das ist für dich, um das Ganze zu filtern, einfach um alle Berichte zu filtern, die du hast, falls du welche hast, aber im Moment haben wir keine Also, wie gesagt, vor Kurzem, alles was wir sagen könnten, visuell oder Text oder so ähnlich, nur um die Berichte zu filtern. Und ja, wir können ihm auch eine ähnliche Identität geben, ihm den gleichen Strich geben oder so. Aber du musst es irgendwann auch verstehen. Ich meine, welches ist die Navbar. Im Moment lassen wir es so, nur um zu zeigen, dass das ein Element ist, das nicht sehr wichtig ist Das sollte hervorgehoben werden , aber dieses sollte es nicht sein, also werde ich es einfach so belassen. Das ist unsere erste Seite. Wir haben unser Logo hier. Wir könnten es auch in der Mitte platzieren. Oder was viele Apps heutzutage tun, ist, dass sie das Logo nirgends haben , nur um Platz zu sparen. Das könnten Sie tun, und ich würde Ihnen raten, es zu tun. Aber ja, das musst du selbst entscheiden. Oder du könntest es alternativ einfach ein bisschen kleiner machen. Dann werden wir drei verschiedene Versionen erstellen und sicherstellen , dass die Seiten richtig ausgerichtet sind. Wir werden sie prototypisieren, sodass, wenn Sie auf ein Element klicken, z. B. jetzt zu der Komponente wechseln, der ursprünglichen Komponente, wenn Sie auf Einstellungen klicken, diese zu den Einstellungen wechseln sollten. Wenn du auf Community klickst, sollte es zur Community-Seite gehen, und wenn du auf Berichte klickst, sollte es zur Ports-Seite gehen. Also verlinke ich sie gerade irgendwie. Und danach werde ich es auch so einrichten, dass es eine Drag-Bewegung gibt. Wir haben das in einer früheren Lektion gemacht, sodass beim Ziehen oder Wischen auf der Seite eine Wischgeste von der ersten Seite zur zweiten zur dritten Seite gewechselt werden kann zur zweiten zur dritten einfach durch Das können Sie tun, indem einen Prototyp oder eine Interaktion erstellen. Diese Interaktion sollte durch Ziehen erfolgen, nicht durch Tippen, Ziehen, und dann nicht intelligent animiert werden, sondern Es könnte also gedrückt werden, es könnte bewegt werden, es könnte gedrückt werden, aber Drücken ist am sanftesten und sieht gut aus Ich meine, es wird am häufigsten benutzt, dann muss man es von rechts nach links machen Sie sehen also, dass der Bildschirm von rechts nach links kommt, und dann können Sie ihn auch umkehren, wenn Sie von rechts nach links gehen Sie können den Bildschirm von links nach rechts bewegen. Du verstehst die Idee. Jetzt möchte ich ein kleines Popup-Menü erstellen. Dies ist ein Menü, das Ihnen, wenn Sie auf das Pluszeichen klicken , einige Aktionen anzeigt. Hier lasse ich mich ein wenig von Google Drive inspirieren , da Google Drive einige Optionen bietet. Es heißt Dokument scannen, Datei hochladen, Dokumente erstellen, Blätter erstellen und so weiter. Dies sind die Optionen, nach denen wir hier suchen. Nur als Beispiel könnten wir eine Datei analysieren, ein Dokument scannen oder ein Diagramm oder etwas Ähnliches erstellen. Lassen Sie mich die Symbole für sie besorgen, sie richtig einrichten, ein gewisses Maß an Polsterung erstellen und los geht's Jetzt werde ich einen Prototyp erstellen , sodass, wenn jemand auf die Plus-Schaltfläche klickt , das Overlay geöffnet wird und dieses Overlay manuell ist, also wähle ich es das Overlay geöffnet wird und dieses Overlay manuell ist, aus und es wird direkt darüber angezeigt , genau Und es wird geschlossen, wenn man nach draußen klickt. Es wird einen Hintergrund mit 25% schwarzem Hintergrund haben und es wird sich auflösen, aber es wird sehr schnell gehen. Es wird 100 Millisekunden dauern oder so ähnlich. Jetzt haben wir das. Jetzt wollen wir sehen, wie es aussieht. Wir kommen zurück zu Click und so sieht es aus. Jetzt können wir natürlich eine Animation davon erstellen. Es wäre viel sinnvoller , das zu tun. Aber lassen Sie mich Ihnen zeigen, wie wir das sehr schnell machen können. Fügen Sie also eine Schaltfläche hinzu, und ich nenne dieses Pop-up eins und Pop-up zwei. Fügen Sie zwei ein. Was ich hier machen werde, ist , es kleiner zu machen und ich werde es von oben oder von unten machen , okay? Also wird es sich einfach so öffnen oder vielleicht sogar so, und dann wird es seine volle Größe annehmen. Und so machst du das, indem du das Plus hinzufügst und sagst, nach der Verzögerung, und du machst die Verzögerung auf Null, was eine Millisekunde sein wird, und du sagst Smart Animate und Swap-Overlay Es wird mit Smart Animate von diesem Overlay zu diesem wechseln , und das wird in 300 oder sagen wir 100 Millisekunden passieren und die Komponenten zurücksetzen Scrollposition zurücksetzen und mal sehen. Jetzt werde ich es testen. Lassen Sie mich das einfach zu einem Flow-Ausgangspunkt machen. Also werde ich einfach löschen, das sollte kein Flow-Ausgangspunkt sein. Und dann klickst du angeblich hier und so passiert es. Aber ich meine, es sollte von unten nach oben gehen. Das ist die ganze Idee. Sie erstellen eine kleine Animation, die Ihnen einige Optionen bietet. Jetzt können wir natürlich etwas mehr Abstand zwischen den Optionen hinzufügen , nur um sicherzustellen , dass die Leute sie anklicken können, wenn sie möchten. Stellen Sie also sicher, dass das verfügbar ist, und dann werde ich es so einrichten , dass es jetzt eine andere Position hat. Lass uns sehen. Okay, Sie können also Dateien analysieren und Dokumente scannen. Ich kann es etwas niedriger stellen. Und da haben wir's. Sie können diese Aktionen ausführen. Sie können diese Seiten einfach so wechseln, wir haben ein Produkt , das Gestalt annimmt. Jetzt müssen wir nur noch ein paar schnelle Einstellungen vornehmen, schnelle Optionen hier, ich werde dieses Element hier kopieren, es hier einfügen. Und ich werde es ein bisschen ändern. Ich werde es so machen, dass das 20 ist, und das ist auch 20. Jetzt sind die Größen unterschiedlich und ich werde das kopieren und einfügen. Ich werde etwas mehr Abstand zwischen ihnen hinzufügen, vielleicht 16, und ich werde daraus ein automatisches Layout machen. Ich werde den Abstand zwischen ihnen auf 24 einstellen und sogar eine Zeile hinzufügen. Klicken Sie also auf L, halten Sie die Umschalttaste gedrückt , und dann können Sie eine gerade Linie zeichnen, sie hier einfügen und sicherstellen , dass sie den Behälter füllt. Sie können es auch sehr hellgrau machen, und dann können Sie den Container erweitern, und Sie können sehen, dass diese auch den Behälter füllen, und dann meine ich, ich ziehe es vor, daraus eine Komponente zu machen, also nenne ich dieses Element. Lass uns mit diesem ein bisschen schicker werden. Ich werde es etwas aufpolstern. Und doppelklicken Sie, damit es sich an die Höhe anpasst. Dann schauen wir uns an, wie es mit, mit einer Füllung aussieht . So würde es aussehen. Wir können es so lassen. Ich meine, das ist ziemlich quadratisch, oder wir können unseren abgerundeten Ecken folgen und es ein bisschen abgerundet machen. Dann können wir einen Status hinzufügen und den Hover-Status festlegen. Das tut mir leid Feststelltaste an. Dann würden wir beim Zustand Huber eine Füllung hinzufügen, die schwarz ist und 10% beträgt. Das ist, wenn du darauf klickst. Auch hier können wir einen Prototyp erstellen und es so gestalten , dass es beim Tippen oder Drücken so aussehen würde. Kopieren Sie das, fügen Sie es hier ein, löschen Sie sie und bringen Sie dann einfach die Linie dazwischen, um zu sehen, wie groß der Abstand ist. Es fühlt sich an, als wäre es zu viel. Ich mache das auf 16 und dann kopieren/einfügen, kopieren/einfügen, kopieren/einfügen. Das sind deine Einstellungen. Ich werde sie in die Mitte legen und sicherstellen, dass rechts und links etwas gepolstert ist Ich meine, wir können es erweitern und ihm etwas Polsterung geben, nur 16 oder so Das sind unsere Einstellungen, und wir können einfach einen großen Text schreiben, in dem Einstellungen stehen Das können wir tun. Dann, wie Sie sehen können, ist der Raum hier nicht derselbe wie der Raum darüber. Wir können also 16 Füllungen von oben und unten hinzufügen , nur um sicherzugehen, dass alles gleich ist Wir können hier auch eine Linie erstellen, nur um zu zeigen, dass das der Titel ist und dann ist alles andere hier irgendwie, du weißt schon, Teil, du kannst die Farbe hier kopieren und schauen, ob das klar genug ist Ich würde sagen, das ist es. Aber jetzt stellen wir sicher, dass das verständlich ist, welche Art von Einstellung, also können wir Benutzereinstellungen sagen und dann Benutzer hier schreiben. Dann können wir Datenschutz und Allgemeine Geschäftsbedingungen sagen. Wir können Profil sagen und ich schreibe Handshake und dann hier Netzwerk, vielleicht oder nicht sicher Okay. Abonnement. Also sagen wir einfach Münzen. Oder einfach ein Abonnement. Wie würde ein Abonnement aussehen? Nein, das ist nicht hilfreich. Also können wir ein Auge schaffen und das ist quasi Privatsphäre. Also kopiere das hier, und wir können die Allgemeinen Geschäftsbedingungen einfach bis zum Ende verschieben und die Zeile damit machen Und für das andere Zeug können wir uns einfach etwas einfallen lassen Also Benutzereinstellungen, Datenschutz, Abonnement, Benutzerprofil. Öffentliches Profil oder soziales Profil. Lassen Sie uns das hier ansprechen. Ich schreibe ein Profil. Es ist Circle-Benutzer. Circle-Benutzer. Also auf diesen können wir umschalten. Wir können es vergrößern, nur um zu verdeutlichen , dass dies die Einstellungen sind, und wir können ihm dieselbe Farbe geben. Ich meine, momentan ist Dunkelschwarz ein bisschen hart, also kannst du ihm das geben und hier können wir auch den gleichen Text hinzufügen und Berichte sagen. Da hier eher nach links geneigt oder nach links ausgerichtet ist , kannst du das auch hier machen oder wir können es in der Mitte belassen kannst du das auch hier machen oder wir können es in der Mitte belassen , da das nur ein Filter ist, es liegt ganz bei dir Es ist völlig okay, das so zu machen, und dann können wir es hier einfügen und Community sagen H Wie Sie sehen können, richte ich das momentan nicht perfekt aus, wir arbeiten nur sehr grob Nun, was können wir hier tun? Ich meine, lass mich das wieder hier hinstellen. Anstatt das zu tun, können wir es tun. Normalerweise gibt es in sozialen Medien eine „Für dich “ -Seite und dann gibt es eine Community-Seite oder Seite , auf der es eigentlich nur eine Folgeseite ist eine Community-Seite oder Seite , dir nur zeigt, was du verfolgst anstatt dir nur die gesamte Community zu zeigen. Das ist etwas, das wir auch vollständig nutzen können. Also können wir es so lassen. Also für dich und die folgenden und eine Sache, bei der wir nicht sicher waren, ist, dass wir das hier kopieren und in diesen Rahmen bringen und dann die Größe ändern können hier kopieren und in diesen Rahmen bringen , nur um sicherzugehen, dass klar ist, welche Option gerade ausgewählt ist, oder? Also zentrieren Sie das einfach. Also im Grunde so. Und das Gleiche hier. Wir können es schaffen. Ich meine, wir können es hier auf 5% bringen, damit es nicht zu stark ist und das Gleiche hier, da haben wir es. Jetzt ist es ein bisschen verständlicher , wo Sie sich befinden und was Sie tun. Ich werde das etwas weiter oben platzieren, und dann haben wir unsere Community-Seite, auf der wir Beiträge und Informationen von Leuten haben sollten Beiträge und Informationen von , worüber sie sprechen und so weiter. Dies ist eine sehr rudimentäre Benutzeroberfläche nur um Sie wissen zu lassen, dass dieses Projekt momentan ziemlich simpel ist Ich versuche hier, Ihnen zu zeigen, wie Sie diese fortgeschrittenen Fähigkeiten mit FigMA nutzen können diese fortgeschrittenen Fähigkeiten mit FigMA um ein gutes Erlebnis auf einer App oder Website oder Mir wurde gerade klar, dass all diese Interaktionen, die wir mit diesen Buttons gemacht haben, nicht intelligent animiert sein sollten, sondern eher Stellen Sie also sicher, dass Sie das notiert haben. Aber du musst sicherstellen , dass es von hier bis hier ein bestimmter Schub sein wird. Also wird es so sein. Ja. Dann zur Community, es wird genauso sein. Und so weiter und so fort. Aber hier wird es umgekehrt. Sie sehen also und stellen sicher, dass für alle Animationsebenen passende Animationsebenen ausgewählt sind Animationsebenen passende Animationsebenen ausgewählt Wählen Sie sie aus, halten Sie Strg Alt A gedrückt, oder Sie können einfach hier oder hier klicken , und dann können Sie auf alle passenden Ebenen klicken und dann hier gehen und sicherstellen, dass Sie passende Animationsebenen haben Das Gleiche hier. Und hier. Das ist Handarbeit. Wenn wir sie jetzt anklicken, wird es immer einen Scroll-Effekt geben Sie können sehen, es ist ziemlich glatt, ziemlich nett und wir haben hier wieder diese Schaltfläche, die uns sagt, was wir tun können, Datei analysieren, scannen, dokumentieren, Diagramm erstellen oder was auch immer es sein mag Ich werde nicht so viel auf der Community-Seite arbeiten , weil uns das in eine andere Position bringen wird. Aber ich würde gerne mehr an der Hauptfunktion arbeiten, dem MVP, das darin besteht , Dateien zu analysieren, Dokumente zu scannen und Diagramme zu erstellen Eine Sache, die wir tun können. Ich kann ganzen Rahmen kopieren und einfügen, kopieren, einfügen, ich kann ihn hierher bringen, alles daraus löschen. Und dann werde ich es ein bisschen kürzer machen. Ich werde ihm einfach so ein bisschen abgerundete Ecken geben , aber direkt oben, nicht von unten, und ich werde hier einen kleinen Balken hinzufügen. Das ist im Grunde ein Pop-up , das von unten auftauchen wird. Mach einfach diese drei oder so, mach es ein bisschen grau und gib uns dann ein paar abgerundete Enden. Ich füge es hier hinzu. Okay, perfekt. Das sieht sehr nach iPhone aus, und ich werde das Analyze-Datei nennen. Wenn Sie also auf Datei analysieren klicken , werden Sie aufgefordert, Ihre Datei zu teilen. Dazu müssen wir nun verstehen , wie es funktioniert, wenn Sie eine solche Datei teilen möchten und wie es funktioniert. Sie klicken auf Datei hochladen. Und wenn es um iPhones geht, wird ein Fenster geöffnet , in dem Ihre Dateien angezeigt werden Es wird so etwas wie auf meinem Handy oder auf meinem iPhone sagen meinem Handy oder auf meinem iPhone Es wird es hier platzieren und dann wird es hier ein paar Schaltflächen für dich platzieren oder dir vielleicht sogar ein paar Dateien zeigen . Lassen Sie uns also weitermachen und das IOS-Dateisymbol schreiben. Nicht einkaufen, sondern Bilder. Sobald Sie eines gefunden haben, mit dem Sie zufrieden sind, können Sie dieses Bild kopieren und es bis zu Figma bringen Dann werde ich den Bereich umkreisen und ihm sagen, dass er ihn isolieren soll Jetzt haben wir dieses Symbol, das wir isoliert verwenden wollten. Jetzt können wir es hierher bringen und zeigen, wie es auf einem iPhone aussehen könnte. Ich werde hier einfach Downloads oder so schreiben oder was auch immer es sein mag. Kopiere es und füge noch etwas hinzu. Vielleicht nicht iCloud, aber vielleicht ist hier ein X oder so ähnlich. Sie haben die Idee und dann gehen wir zu Datei analysieren, halten sie und bringen sie bis zur Datei analysieren. Wir sagen grundsätzlich „Overlay öffnen“, wir sagen „ Unten in der Mitte Es wird es hier in der unteren Mitte platzieren. Und ich meine, schauen wir mal, ob es funktioniert. Und wir sagen, dass der Hintergrund geschlossen wird, wenn Sie nach draußen klicken, und es bewegt sich von unten nach oben, und zwar innerhalb von 300 Millisekunden Mal sehen, ob das funktioniert. Wir klicken hier und klicken auf Datei analysieren. Und einfach so hat es es geöffnet. Aber wir können nicht wirklich, ich meine, Sie können sehen, dass wir es schließen können aber was ist, wenn wir es im Grunde herunterziehen wollen, wir können nicht auf die andere Seite gehen, aber wir können es nicht herunterziehen. Der Weg, das zu tun, besteht im Grunde darin, das Ganze zu halten, ihm eine Interaktion zu geben, und diese Interaktion sollte gezogen werden. Nun können Sie sehen, ob wir hier Ziehen einsetzen. Wir haben ein Problem, weil wir zwei Drag-Optionen haben. Ich meine, es funktioniert, aber wir müssen tatsächlich eine davon wechseln. Das sollte nicht zu den Einstellungen gehen, wie Sie sehen, wir sollten nicht in der Lage sein, darauf zu klicken und dann zu den Einstellungen zu gehen. Stattdessen möchten wir, dass das Overlay geschlossen wird, anstatt zu navigieren Overlay geschlossen wird, anstatt zu Wenn Sie es nach unten ziehen, sollte es geschlossen werden. Mal sehen, ob das einfach so funktioniert. Es war einfach so einfach. Du ziehst es runter und sagst dann, nein, nein, nein, ich wollte keine Datei analysieren. Vielmehr wollte ich ein Dokument scannen. Nun, ein Dokument könnte auch dasselbe sein, oder wir können einen iPhone 17-Rahmen erstellen und eine Kamerasituation erstellen. Das würde so funktionieren, dass zwei schwarze Balken angezeigt werden. Und dann ein weißer Kreis. Wir können diese Bar etwas kleiner machen. Und dann können wir dieses X auch wieder hierher bringen. Also, lass uns sehen. Ich meine, das könnte die Option für gescannte Dokumente sein, und dann können wir hier weitermachen. Und wir können zum Beispiel zeigen, wie ein Dokument aussieht. Bild eines Formulars auf einem Tisch. Von einem Dokument. Okay, jetzt habe ich ein Bild gefunden, das ziemlich lustig ist. Ich meine, jemand meldet Insolvenz an, was nicht immer lustig ist, sondern einfach ein lustiges Bild für diesen Anwendungsfall. Jemand versucht, ein Dokument zu scannen und es öffnet seine Telefonkamera und das ist der erste Bildschirm. Ich werde die Überlagerungen hier lassen oder die spezifischen Aktionen hier unten nur um sie ein wenig zu organisieren Ich werde das hier löschen. Wir brauchen es nicht. Dann müssen wir das Dokument scannen und dieses würde es im Grunde als Overlay öffnen, nehme ich an Und es wäre mittig oder man könnte sagen, auch unten in der Mitte, wir können es genauso machen und wir können es auch ein bisschen kürzer machen Ich lasse uns mal sehen , wie es jetzt aussieht. Wenn du darauf klickst, öffnet es einfach die Kamera oder du kannst sie von hier aus schließen. Wir haben diese Interaktionen nicht wirklich prototypisiert, Overlay schließen, das Gleiche hier, aber es sollte nicht so weit oben sein Oder wir können hier auch diese kleine Leiste haben , um zu zeigen, dass du das herunterziehen kannst Dann können wir hier dieselbe Aktion ausführen. Wir können die Interaktion einfach kopieren, hier einfügen und dann, wie Sie sehen, können wir sie herunterziehen. Das bedeutet aber auch, dass wir ihr 36 abgerundete Ecken von oben und unten geben müssen 36 abgerundete Ecken von oben und , damit sie glatt aussieht. Du kannst auch den ganzen Rahmen auf diese Weise etwas kleiner machen . 19. Kursprojekt: Entwerfen einer reaktionsfähigen SaaS-Oberfläche: Jetzt ist es an der Zeit, alles, was Sie gelernt haben, in die Praxis umzusetzen. Für dieses Klassenprojekt werden Sie eine Software-as-a-Service-Schnittstelle entwerfen, werden Sie eine Software-as-a-Service-Schnittstelle entwerfen die fortschrittliche Figma-Funktionen und -Techniken wie Komponenten, automatische Layouts, Variablen und Mikrointeraktionen verwendet fortschrittliche Figma-Funktionen und -Techniken wie Komponenten, automatische Layouts, Variablen und Mikrointeraktionen Erstellen Sie zunächst ein sauberes und skalierbares Designsystem , das Sie in Ihrem Design verwenden können Das heißt, wählen Sie die Farben aus, die Sie verwenden möchten, richten Sie Ihre Variablen und Stile ein, wählen Sie Schriftarten und all die kleinen Details , die Sie genau richtig machen möchten. Wenn Sie damit fertig sind, können Sie mit der Erstellung Ihres Designs beginnen. Erstellen Sie einen Bildschirm. Sie können mit einem Desktop-Bildschirm oder mit einem mobilen Bildschirm beginnen. Wenn Sie mit dem Erstellen und Entwerfen fertig sind , stellen Sie sicher, dass es auch responsiv ist, indem Sie automatisches Layout und Einschränkungen verwenden. Stellen Sie sicher, dass Sie es dehnen und auf verschiedenen Bildschirmgrößen anzeigen können , damit es immer noch gut aussieht. Als kleinen Tipp können Sie auch Breakpoints verwenden, um eine andere Version zu erstellen, eine für einen Desktop, eine für ein Tablet und eine für ein Telefon Erwecken Sie jetzt Ihr Design zum Leben, indem Mikrointeraktionen und Animationen mithilfe von Smart Animate und den erweiterten Prototyping-Funktionen Wenn Sie fertig sind, exportieren Sie Ihr Projekt und laden Sie es in die Projektgalerie Sie können gerne eine kurze Beschreibung Ihrer Designentscheidungen hinzufügen , über Ihr Designsystem sprechen und so weiter, nur um zu verdeutlichen, was Sie getan haben und warum Sie es getan haben Denken Sie daran, dass das Ziel hier nicht nur darin besteht etwas zu entwerfen, das gut und schön aussieht, sondern auch etwas zu entwerfen, das real und funktionell aussieht, genau wie eine produktionsreife Oberfläche Dies ist Ihre Chance, Ihre fortgeschrittenen Figma-Fähigkeiten unter Beweis Nehmen Sie sich also Zeit und haben Sie Spaß damit 20. Wir gratulieren!Was kommt als Nächstes?: Herzlichen Glückwunsch zum Abschluss des Kurses. Inzwischen haben Sie gelernt, Figma wie ein fortgeschrittener Designer anzugehen und zu nutzen, vom Aufbau skalierbarer Designsysteme und responsiver Layouts bis hin zur Erstellung ansprechender interaktiver Prototypen und dem effektiven Einsatz moderner Tools Dies sind genau die Fähigkeiten , die wirklich einen Unterschied machen, wenn Sie an professionellen Projekten arbeiten Und der Schlüssel, um all das zu meistern, ist Übung, viel, viel Übung Experimentieren Sie also weiter, probieren Sie immer wieder verschiedene Dinge aus und verfeinern Sie Ihre Arbeitsabläufe und wenden Sie diese Techniken auf Ihre eigenen Projekte an Falls Sie es noch nicht getan haben, laden Sie bitte Ihre Designdateien in die Projektgalerie Ich würde wirklich gerne sehen, was ihr euch ausgedacht habt. Und wenn Ihnen dieser Kurs gefallen hat, können Sie uns gerne eine Bewertung hinterlassen. Es hilft uns wirklich, ein bisschen Feedback zu erhalten , um noch bessere Inhalte für dich zu erstellen. Vielen Dank, dass Sie mitgemacht Wir sehen uns im nächsten Kurs.