Figma UI UX Design für Fortgeschrittene: Werde ein Figma-Profi

1. Einführung in den Figma-Kurs für Fortgeschrittene: Hallo zusammen. Hey, mein Name ist Dan Scott und das ist der Figma Advanced Course Also wer bin ich? Ich bin Dan. Ich bin UX-Designer und Figma-Instruktor. Ich habe mehrere Lehrpreise gewonnen und durch meine Kurse mehr als 1 Million Menschen geholfen mehr als 1 Million Menschen , bessere Designer zu werden. Dieser Kurs richtet sich nun an Personen, die die Grundlagen von Figma bereits kennen Sie haben entweder meinen Essentials Figma-Kurs gemacht oder sind Autodidakt Aber Sie wissen, dass es Tools und Tipps sowie Workflows und Updates gibt , für deren Erkundung Sie einfach keine Zeit hatten. Das klingt also vertraut. Lass uns Kurse für dich machen. Während des Kurses erhalten Sie Ihr eigenes Briefing und Ihre eigene Persona und erstellen eine App, die bereit ist, in Ihr Portfolio aufgenommen zu Sie beginnen damit, sich eingehend mit mehrstufigen verschachtelten Sie werden robuste Komponenten herstellen, die leicht zu aktualisieren, aber schwer zu beschädigen sind . Lernen Sie Workflow-Tricks für die Verwaltung von Designelementen, Stilen, Komponenten, Raster - und Spaltenlayouts kennen. Schließlich lernen Sie, Variablen zu verwenden und sie zum Laufen zu bringen. noch vollständigere Prototypen erstellen können Sie Variablen verwenden, um einfache Hell- und Dunkelmodi sowie Versionen mit kompakten und komfortablen Abständen für all Ihre Komponenten zu erstellen. Und mit all unserem neuen Variablenwissen werden wir in der Lage sein unsere eigenen Design-Tokens zu verstehen und zu erstellen. Erlernen Sie fortgeschrittene Animationstechniken in Figma. Du erstellst responsive Elemente , die für jede Gerätegröße geeignet sind, lernst dabei die besten Shortcuts und Plugins kennen, die dich zu einem effizienteren UX-Designer machen. Du wirst lernen, wie mächtig filmic sein kann, um Bilder und Videos zu manipulieren und zu maskieren Sie werden alle fortschrittlichen Typografiefunktionen kennen und wissen, wie Sie KI in Ihrem Prozess einsetzen können, um aus Ihnen einen besseren UX-Designer zu machen Sie lernen alle fortgeschrittenen Prototyping-Techniken , um Ihre Benutzertests zu Natürlich wäre da irgendwo ein Mops drin. Es gibt Ihre Tools und Techniken zum Erlernen der richtigen Barrierefreiheit. Du wirst ein Varianten-Boss. Erfahren Sie, wie Sie diese unhandlichen hundert Variantenkomponenten durch Mastering Properties auf eine reduzieren können, rufen Sie die besten Möglichkeiten an, mit anderen Designern, Entwicklern und allen Beteiligten zusammenzuarbeiten , Entwicklern und allen Beteiligten Jetzt gibt es so viel mehr als das, in diesem Kurs gibt es mehr als 160 Videos. Schauen Sie sich also das Inhaltsverzeichnis an, um zu sehen, was wir behandeln. Schauen Sie sich die Bewertungen und Testimonials der Schüler an. Und Sie werden sehen, dass dieser Kurs Sie von Figma good zu Figma In diesem Kurs verwenden wir praktische Projekte aus der Praxis. Sie können die Übungsdateien und die Kurzbefehle herunterladen , damit Sie mit mir an den Mini-Klassenprojekten arbeiten können , nicht an den Hausaufgaben. Wenn du also deine Figma-Fähigkeiten auf das nächste Level bringen willst , melde dich an und werde vom guten zum Figma-Superhelden Ich fühle mich während des gesamten Kurses wie ein Superheld. Sie werden sehen, wie ich mir die Brust ausgepufft habe, weil ich sonst einige der Wiederholungen gesehen habe Du siehst, wie mein **** in meinen Bauch gefaltet wird , meinen hungrigen Bauch. Niemals, niemals, niemals, niemals. Rooney-Design Es gibt also viel Pusten in der Brust. Jedenfalls 2. Erste Schritte in Figma Fortgeschrittenenkurs: Ordnung, um loszulegen, zunächst die Übungsdateien herunterladen Es wird also einen Link auf der Seite geben. Laden Sie jedoch die Dateien, die wir für diesen Kurs verwenden , in diesen Ordner Dort wird es auch die Kurzanleitung geben. Es ist ein PDF. Du kannst es ausdrucken und es werden viele Abkürzungen in diesem Kurs Ich werde sie viele durchgehen, aber es wäre praktisch, das neben dir zu haben, damit du bei denen bleiben kannst, die du wirklich magst und an die du dich wirklich erinnern willst. Ja, also laden Sie die Dateien herunter und was kommt dann als Nächstes? Das ist das, was als Nächstes kommt. Wie schnell spricht Dan? Die meisten Leute denken, dass ich zu schnell gesprochen habe und das tue ich wahrscheinlich. Manche Leute. Die Leute haben gesagt, ich spreche zu langsam, sie wollen mich beschleunigen. Ratet mal, was ihr könnt. Da unten in der unteren Ecke ist ein Rädchen unten in der unteren Ecke Du kannst mich so schnell hinsetzen, wie du willst. Schwul, fahr schnell langsamer und was auch immer du willst. Kannst du das mit der kostenlosen Version machen? kannst du auf jeden Fall. So ziemlich den ganzen Kurs kannst du die kostenlose Version von Figma machen Wir werden uns einige der kostenpflichtigen Funktionen ansehen , da es sich um einen Kurs für Fortgeschrittene handelt. Sie möchten wissen, was Sie möglicherweise verpassen, wenn Sie das kostenlose Konto nutzen. Aber das meiste davon betrifft größere Teams und es fehlen nicht so viele Funktionen. Es hat mehr mit Zusammenarbeit zu tun, aber ich werde Sie durch diese führen , damit Sie ein Gefühl für sie bekommen. Aber ja, Sie können den größten Teil dieses Kurses mit der kostenlosen Version und den kleinen kostenpflichtigen Teilen absolvieren . Es lohnt sich, zu wissen, was getan werden kann, auch wenn Sie die kostenlose Version haben . Wenn Sie in einer Position landen, in der Sie sich die kostenpflichtige Version ansehen. Ich bin mir nicht sicher, was das ist. Was sonst? Okay, zu guter Letzt sind Level eins und Level zwei. Wenn Sie sich den Inhalt ansehen, werden Sie feststellen, dass einige der größeren Themen, die klobige Teile von Figma mit seiner Menge zu Ich habe mich in zwei Teile aufgeteilt. Stufe eins. Stufe zwei. Warum? Hauptsächlich, weil ich verrückt wurde, als ich versuchte, es zusammenzustellen, weil diese Dinge wie Autolayouts eine Menge beinhalten, eines davon zum Beispiel, da ist viel dran und es ist wirklich wichtig, in diesem Kurs zu lernen, aber alles auf einmal zu machen, sogar wenn ich es vorbereite, ich dachte einfach, Mann, ich muss etwas anderes machen Und genau das habe ich getan. Ich habe die wirklich guten Chunky Best Bits und Level Eins Dann verdunkeln die den falschen Weg, es zu zerlegen , sodass wir, je detaillierter wir sind, es später im Kurs fortsetzen Wir werden zwei Versuche mit ein paar dieser großen Themen machen, Stufe eins, Stufe zwei, macht das Sinn? Weil ich verrückt wurde und ich weiß, dass du dich auch langweilen wirst. Weil das wirklich lang ist. Wir wollen es auch ein bisschen aufmischen, aber Autolayout lernt eine Menge guter Mach eine Pause, mach ein paar andere Sachen. zum automatischen Layout zurück und werden Sie wirklich gerne superfortgeschritten In Ordnung, das war's, der Einstieg. Lass uns anfangen. Tu etwas 3. 03 Responsive Design: Hallo alle zusammen. Willkommen zum eigentlichen Kurs. Dieses Video hier ist wie ein Nachholvideo. Es sind einige Grundlagen , die du wahrscheinlich schon kennst, okay? Nur um sicherzugehen, dass alle auf dem gleichen Level sind, okay? Ich muss sichergehen , dass jeder weiß was eine grundlegende Erstellung eines automatischen Layouts ist, wofür es gut ist, für Komponenten , solche Dinge. Und wir werden diese beiden Seiten hier machen. Sie sind nichts Besonderes. Wenn Sie also einigermaßen fortgeschritten sind, können Sie diese überspringen, wenn Sie sich in der Mitte befinden oder sich nicht besonders sicher sind. Du willst nur sichergehen, dass es euch allen gut geht. Willst du dich auffrischen? Das ist das Video für dich. Ich werde mich vergewissern. Außerdem werde ich in diesem Video einige gute Abkürzungen einfügen, um sicherzugehen, dass es wertvoll ist. Aber wenn du sagst, Mann, das Dinge, die wir schon wissen, das ist okay. Überspringe weiter. Wir werden im Kurs immer weiter fortgeschritten. Ich muss nur sichergehen, dass es allen gut geht. Bist du okay? Die Kurzversion ist Auto. Layouts sind großartig, weil du solche Dinge machen kannst. Du kannst es bewegen. Es ist verstellbar. Es ist flexibel. Okay. Ich kann entscheiden, dass es hier auf diesem unterschiedlich großen Rahmen sein wird, dem größeren iPhone. Und ich kann Dinge ein- und ausschalten. Deshalb sind automatische Layouts gut, Komponenten sind wirklich gut. Weil ich später vielleicht entscheiden werde, dass dieser Typ hier, ich zoome rein, okay, er ist eine Komponente, wir machen ihn in diesem Video. Aber vielleicht entscheide ich , dass er hier drinnen ist. Ich weiß nicht, ich habe das im Griff, ich weiß nicht, was das ist. Aber weil er eine Komponente ist, hat K ein Gehör, sieht aus wie mein Haarball an der Spitze, K, kannst du sehen, dass sich dieser auch anpasst Lassen Sie uns also überdenken, was ein automatisches Layout macht, warum und wie Komponenten erstellt werden Außerdem werde ich einige interessante Dinge über Symbole, Symbolgrößen und deren Skalierung erläutern. Richtig. Und wir werden den Anfang unseres Projekts beginnen. Würdest du weitermachen, Dan? Okay. In Ordnung, lass uns anfangen. Ich werde die neue Designdatei verwenden. Es gibt viele verschiedene Möglichkeiten, eine Designdatei zu starten. Sie wählen die, die Ihnen am besten gefällt. Ich werde diesen anstelle von Untitled umbenennen. Ich doppelklicke einfach auf den Titel. Ich werde diese App Event App V 1.0 nennen . Drücken Sie die Eingabetaste und jetzt wird die erste Tastenkombination die Taste für den Frame sein. Okay, da ist es, da ist das Symbol, und ich werde ein Telefon einbauen. Jetzt rate ich Ihnen, das Telefon auszuwählen , mit dem Sie die Tests durchführen. Okay, wenn Sie ein wirklich altes iPhone haben, verwenden Sie dieses, wenn Sie das neueste haben, das Sie mit der Figma-App auf Ihrem Telefon testen können Sie können es vom Android- oder App Store herunterladen Auch hier ist es toll, sich darüber lustig machen zu können , weil es gut zusammenpasst , weil es gut zusammenpasst Es wird immer die Zukunft sein, wenn Sie sich das vielleicht iPhone 27 ansehen . Benutze das. Okay, ich werde das iPhone 14 verwenden und würde gerne auch einen Rahmen in einer anderen Größe verwenden. Also werde ich mir den FK wieder holen. Ich werde die größere Größe plus das Telefon 914 verwenden und warum? Weil ich glaube, dieser Kurs zeigt Ihnen, wie man Komponenten, automatische Layouts, Einschränkungsvariablen und all diese Dinge erstellt automatische Layouts, Einschränkungsvariablen und all diese Dinge Ist so, dass wir Einheiten bauen können , die wir in unseren Designs verwenden können, die sehr flexibel und widerstandsfähig gegenüber verschiedenen Größen sind , okay? Und es verändert sich und wird von anderen benutzt. Und weißt du, das ist das Ziel hier in dieser Art von Fortgeschrittenenkurs, Dinge zu tun, die nicht nur das falsche Wort dafür sind, sondern einfach Dinge erledigen und dann weitermachen Wir wollen Dinge machen, die wirklich responsiv sind. Nutzung auf verschiedenen Geräten kann von verschiedenen Teammitgliedern verwendet werden, aber ohne dass es kaputt geht und wenn Sie es in Zukunft verwenden, sparen Sie sich Zeit. Okay, das Erste, was wir tun müssen, ist sie in eine Reihe zu stellen. Okay? Also müssen sie sich an der Spitze aufstellen. Ich bin mir nicht sicher, warum dir Schicht eins alles zeigt, was auf deinem Dokument steht. Nur ein paar kleine Abkürzungen , um unsere Muskeln zu trainieren. Wir kennen sie wahrscheinlich schon. Okay, als Nächstes werden wir ein paar Icons reinbringen. Also werden wir eine andere Abkürzung verwenden , die wir sehr gut kennen. Wahrscheinlich vielleicht Command Shift K auf einem PC, es ist Strg Shift K bringt Symbole oder Bilder ein, zumindest in deinen Übungsdateien gibt es ein gefaltetes Spielfeldsymbol. Bringen wir all diese Typen rein. Lass uns jetzt auf Öffnen klicken, wenn du mehrere Bilder einfügst, okay, du kannst einmal klicken und du bekommst ungefähr die Größe, der das SPg zugewiesen wurde Okay. Manchmal sind sie riesig und man kann sie nicht einmal sehen. Sie sind so groß. Sie haben das schon mal gemacht? Okay. Es ist, als ob du eine gigantische SG Illustrator-Datei mitgebracht hast Okay. Sie können klicken und ziehen. Okay, aber wenn du am Ende diese Tintenfischgrößen hast, kannst du sie verschieben, um sie reinzubekommen. Richtig? Aber es ist nicht das, was wir wollen. Was ich tun möchte, ist, sie rückgängig zu machen , um sie alle loszuwerden. Drücken Sie auf einem PC die gleiche Tastenkombination Shift K, ControlShift K. Bringen Sie sie alle rein und es ist einfacher, sie alle zu platzieren und sie irgendwie in der Mitte Ihres Dokuments hängen. Lassen Sie uns zunächst sehen, dass sie sich alle innerhalb von Rahmen befinden. Da hast du's. Okay. Und ich würde dir gerne sagen, ich werde sie alle hier an die Kanten verschieben, nur um sie für den Moment vom iPhone-Rahmen zu entfernen. Weil ich ein paar Dinge tun möchte. Als Erstes möchte ich sie zu Komponenten machen, weil normalerweise alles eine Komponente ist . Mir wird die Frage gestellt, was sollte eine Komponente sein? Die meisten Dinge tun nicht weh , es zu einer Komponente zu machen. Und wir werden dir später helfen, vor allem, wenn es mehr als einmal verwendet wird , wie diese Symbole. Und zwar mehr als einmal, nicht unbedingt auf derselben Seite oder gar im selben Dokument. Vielleicht wird es in einer anderen, du weißt schon, einer völlig neuen Figma-Datei verwendet du weißt schon, einer völlig neuen Figma-Datei Okay? Und weißt du, es wird für zukünftige Projekte verwendet werden. Es sollte eine Komponente sein, weil sie alle auf das Original zurückführen, und wenn Sie ein Update vornehmen, kommen sie gleich mit. Alles sei eine Komponente. Alles klar. Als Nächstes möchte ich sie machen, ich habe sie alle hier ausgewählt. Ich möchte eigentlich nur sagen, mehrere Komponenten herstellen, nicht nur eine riesige, okay? Ich möchte mehrere Komponenten voneinander trennen, okay? Sie sind alle da, nett. Bringen wir sie auf eine angemessene Größe. Jetzt ist es einfach, sie zu skalieren, oder? Wenn Sie sie alle ausgewählt haben, halten Sie die Umschalttaste gedrückt und Sie nehmen die Ecke und sie werden verkleinert Das funktioniert meistens. Meiner Meinung nach ist es jedoch besser , das Skalierungswerkzeug für die gesamte Skalierung zu verwenden. Es ist also die K-Taste auf Ihrer Tastatur. Okay, oder du kannst es einfach hier auswählen. Okay, benutze das, weil es Dinge wie den Strich und die Effekte gleichzeitig skaliert . Wenn Sie schon einmal die Icons von jemand anderem heruntergeladen und sie nicht richtig skaliert und die Striche gleich bleiben und die Drop Shelter komische Sachen machen, benutzen Sie einfach das Skalierungswerkzeug Die andere nette Sache am Skalierungswerkzeug ist hier drüben. Sie können Waagen auswählen. Du kannst sagen, ich möchte, dass es so ist, weißt du, du arbeitest an einem Design, das viermal so groß oder halb so groß ist. Aber ich neige dazu, es zu benutzen, ist, dass ich es eintippen kann. Hier drüben kann ich es sehen. In Ordnung, ich möchte, dass du eine gute Symbolgröße hast. Was ist eine gute Symbolgröße? Sie können eine beliebige Symbolgröße wählen, aber 32 oder 48 sind im Allgemeinen eine wirklich gute Symbolgröße. An alle, ich wollte eine etwas genauere Erklärung reinwerfen . Ein paar Leute haben sich verirrt. Ich wollte dir nur zeigen, wie du da rauskommst, wenn du selbst nicht weiterkommst. Und es ist gut für alle zu wissen ich die habe, sie sind alle gestapelt Und wenn ich sie alle auswähle und zu Befehl K übergehe. Nein, drücke einfach die K-K-Höhle und lass uns alle dieselbe Höhe und Breite haben, die perfekt funktionieren Wenn ich es rückgängig mache, wenn ich ihnen nur eine faule Auswahl gebe und dasselbe mache, gehen wir zu K und machen sie 32. Was letztendlich passiert ist, dass ich tatsächlich, kannst du sehen, dass alle Namen hier draußen sind, aber die Symbole sind hier unten. Also der Rahmen, der auf der Außenseite ein ist, wurde nicht skaliert, aber die Teile im Inneren hatten Sie am Ende so komisches Ding, wo der übergeordnete Wrapper ist, okay Der Rahmen, der Vektor im Inneren unterschiedliche Größen und das macht alles richtig knifflig, okay? Und manchmal kann man nur Teile von einem auswählen und nicht von dem anderen. Also, wenn du am Ende mit diesem Namen in der Mitte eines Niemandslands rumhängst, wenn du am Ende einen Namen hast, der einfach irgendwie im Raum rumhängt, du denkst, was ist das Gefahr bedeutet, dass Sie ein Symbol haben , das irgendwie von seinem übergeordneten Rahmen getrennt ist Es ist immer noch da drin, du kannst dir den Namen schnappen und ihn verschieben. Die Sache mit den Namen ist auch nur, um es noch einmal zu wiederholen, wenn Sie sich tatsächlich in einem Frame befinden, okay, Sie befinden sich in einem übergeordneten Frame, der Name verschwindet. Es gibt nur dem äußersten Wrapper den Namen. Daran hat sich nichts wirklich geändert, aber Sie können den Namen hier nicht sehen Habe immer noch das gleiche Problem. Der riesige Rahmen mit dem Ding auf der Innenseite. Okay. Also das ist etwas , worauf man achten sollte. Okay. Achte nur darauf, dass du dir beim Skalieren alles schnappst und hier im Ebenen-Panel ein Auge darauf behältst , dass die Eltern alle vor dir ausgewählt sind , Kleine. Das Problem war, wenn ich ein Skalierungswerkzeug hätte, liegen sie alle übereinander , und wenn ich sie alle 32, 32 mache , sind sie alle 32 breit. Aber wenn ich sie in diesem Kurs anders einführe, ziehe ich oft einfach Dateien hinein Sie sehen, es wurde anders eingefügt als früher, wo wir die Datei verwenden, die Datei importieren, sie importieren, sie übereinander stapeln. Wenn wir sie hineinziehen, erhalten Sie am Ende dieses kleine Raster. Wenn Sie das jetzt tun, gehen Sie zu K und gehen Sie zur Breite von 32. Gehen wir zu Schicht zwei und vergrößern sie. Was letztendlich passiert, ist, dass die gesamte Gruppe 32 Pixel breit ist, nicht die einzelnen Symbole. Dieses Symbol hat jetzt nur noch 15,4 Pixel, sodass es leicht zu reparieren Sie können sich individuell zurechtfinden und sie alle zu 32 machen, oder Sie können sie einfach an die gleiche Position bringen wie die anderen Importoptionen Stapeln Sie sie einfach mit horizontaler und vertikaler Ausrichtung übereinander . Und dann mach genau das Gleiche. Gehe zu K und mache die Breite oder Höhe und 32. Da hast du es. Nur ein bisschen zusätzliches Wissen für Sie, für jeden, der sich vielleicht verlaufen hat, und für diejenigen von Ihnen, die es richtig verstanden haben , es ist einfach gut, dass Sie irgendwann auf dieses Problem stoßen werden Ordnung, mach weiter. Alles hängt davon ab wofür du es verwendest, wo sie hin müssen. Sie können größer werden, sie können kleiner werden. Es ist wirklich üblich, obwohl Sie ein Vielfaches von Acht verwenden. Wir werden später im Kurs darauf eingehen , warum das so nützlich ist Okay, also ich mache sie alle auf eine Höhe von 32 und du hast das vielleicht schon gemacht. Vielleicht habe ich geklickt und gegangen, oh, ich kann nicht damit umgehen, sie müssen angelegt werden, Dan Okay, ich werde das rückgängig machen. Egal, du musst es nicht tun. Aber ich lasse sie einfach da, weil ich sie alle löschen werde und Shift A K für mein automatisches Layout drücken werde Und das ist die Abkürzung für das automatische Layout wie bei Shift A. Es ist dasselbe auf Mac und PC Figma scheint oft zu dieser Shift-Taste zu wechseln, um eine Abkürzung zu sein Weil es für Mac und PC und Linux oder was auch immer Sie Figma verwenden, dasselbe und Linux oder was auch immer Sie Figma verwenden Und dann gehen wir, wir bekommen ein automatisches Layout oder haben wir ein kaputtes Auto Okay, sie haben das kleine Ding in Figma geändert und es hat im Kurs ein paar Probleme verursacht Ich bin zurück, um es zu aktualisieren. Und es ist wirklich interessant , weil Sie wahrscheinlich noch nicht darauf gestoßen sind Das könntest du getan haben. Aber was am Ende passiert, ist im Video Ich habe all diese ausgewählt und wir haben gesagt, lass uns das Auto großartig machen. Und sie stapeln sich alle nebeneinander , weil sie jetzt alle übereinander liegen. Okay, sie haben beschlossen dass sie, anstatt sie standardmäßig alle in einzelne Objekte zu verteilen, sie einfach alle übereinander gestapelt haben und dieses Ding namens Auto-Out sie einfach alle übereinander gestapelt haben gemacht Immer noch. Bis auf die Innenseite dieses Rahmens. Der Unterschied ist jetzt, kannst du diese drei Typen sehen? Kannst du den Unterschied in den Symbolen erkennen? Im Grunde ist es etwas, das als absolute Positionierung bezeichnet wird. Wenn Sie sich mit grundlegendem Webdesign auskennen, wissen Sie, was hier passiert. Aber im Grunde wird es gezwungen, alles übereinander aufzustellen, indem man etwas verwendet , das als absolute Positionierung bezeichnet wird. Wir werden das später im Kurs genauer behandeln, aber im Moment müssen wir es nur ausschalten. Okay, wenn ich zu dir gehe, hast du absolute Positionierung, weil ich sehe das Symbol das Ding A auf der Außenseite hat. Du kannst es auswählen und hier überall hingehen und es ausschalten. Hier gibt es also eine Option. Ich will keine absolute Positionierung. Ich werde die letzten beiden ganz nach hinten reinlegen , okay? Und sie sind jetzt alle nicht absolut positioniert. Sie haben eine sogenannte relative Positionierung, was die Standardeinstellung war, aber jetzt bedeutet das nicht nur, dass sie sich so stapeln, wie wir es von unserem Menü erwarten. Und in unserem Fall trete ich gegen den äußeren Rahmen und sage ihn stattdessen nach unten, wir gehen nach rechts, eigentlich waagerecht. Und für den Rest des Videos wird alles gut sein. Das Seltsame ist, dass dies die verschiedenen Komponenten sind. Und wenn sie nicht übereinander gestapelt sind, okay, ich kann es machen und auf das automatische Layout klicken und es funktioniert perfekt Es ist horizontal, es macht alles, was ich tun musste , außer diesem Typen, sieh dir diesen Typen an, er ist nicht dabei. Warum wurde er nicht aufgenommen? Okay, na ja, da haben wir's. Wir wissen, wenn dieser Typ nicht dabei ist, ist es einfach so, als würde man etwas Seltsames tun. Schau dir das an. Vertikal, Horizontal. Warum hat der Typ das nicht aufgenommen? Es ist ein weiterer Fehler, den ich gerade in diesem Video gefunden habe. Es ist jedoch ein guter Anwendungsfall dafür, warum es wichtig ist, im Auge zu behalten, wenn etwas nicht funktioniert. Schau in den Ebenen nach, ob es absolut positioniert ist. Schalte es aus und jetzt wird es Teil der Gang sein. Los geht's. Scheinbarer Rahmen von oben nach unten. Hervorragend. Wir werden das Verpacken machen, was später im Kurs ebenfalls neu ist . Da hast du's. Wenn die Dinge nicht funktionieren, überprüfen Sie, ob sie nicht absolut positioniert sind. Bevor ich gehe, noch ein kleiner Tipp , den ich gesehen habe, hat nur ein paar Leuten geholfen und es ist praktisch, das zu wissen. Rückgängigmachen. Rückgängigmachen. Rückgängigmachen, Rückgängigmachen, Rückgängigmachen Wenn wir an Symbolen arbeiten, arbeite ich in der Regel an einem Okay, nicht in diesem Niemandsland. Wenn du im Niemandsland bist, siehst du den kleinen Namen, wie auch immer sie heißen. Sie können diesen Frame-Namen sehen, Ka, oder in unserem Fall den Komponentennamen. Wenn Sie am Ende das Innere herausziehen, sagen wir, ich gehe versehentlich hinein und ich kann es getrennt davon ziehen, okay, das ist natürlich schlecht Okay, was du machen willst , ist, wenn sie draußen sind, es ist wirklich einfach, die Namen zu nehmen und zu ziehen , anstatt zu versuchen, die Objekte zu greifen Meistens funktioniert es okay, aber manchmal kann man den inneren Teil getrennt vom Rahmen nehmen. Es ist also einfach, sich den Namen zu schnappen, wenn man draußen ist und es so etwas wie Niemandsland ist. Okay. Es ist ein bisschen einfacher zu arbeiten, wenn Sie sich tatsächlich in einem Frame befinden, der Name verschwindet und die Auswahl etwas bewusster ist Auswahl etwas bewusster Bitteschön, ein kleiner Update-Bonus für dich. Mach mit dem Video weiter. Also werden wir das coole, reaktionsschnelle Ding unten machen, hast du gesehen. Also haben sie Komponenten in sich. Sie haben ein automatisches Layout. Sie haben wahrscheinlich schon einmal automatische Outs gemacht. Okay, die Grundlagen sind, sieh dir das kleine Symbol dort an, das ist der Rahmen für mein automatisches Layout. Ich bin hier drüben und überlege , wo ich all meine Optionen habe. Das liegt daran, dass ich immer noch maßstabsgetreu bin. Drücken Sie die V-Taste K und alles wird wieder angezeigt K, Scale gibt mir einige sehr spezifische Dinge und dann werde ich V haben, um zu meinem Verschiebe-Tool zurückzukehren eigentlich hat es gerade dort eingetippt Ich drücke das Kreuz und gehe weg. Ordnung, die Reihenfolge der Layouts normalerweise standardmäßig das richtige. Wir können nach links und rechts gehen. Wir können mit dem Abstand spielen. Okay, wir haben das alle schon einmal gemacht. Klicken und ziehen Sie das kleine Symbol , um mit den Abständen zu spielen. Lass es uns hierher verschieben, damit du es sehen kannst. Okay? Du kannst es auf dem Dokument machen. Okay? Also kannst du darauf klicken. Und ich werde ein bisschen zoomen. Und du kannst sehen, dass du es draufziehen kannst. Hervorragend. Einfach. Wir können diese neu anordnen, indem wir nur auf eine davon Okay? Oder darin eintauchen. Sie können sich diesen Klick sofort ansehen. Doppelklicken Sie darauf, um hineinzugehen. Und du kannst sie herumziehen, weil ich möchte, dass das das erste ist, ich möchte, dass das Herz als nächstes dran ist, und du kannst sie stattdessen ziehen. Sie können Ihre Schlüssel verwenden, sodass Sie einen ausgewählt haben. Benutze einfach links und rechts oder du bist hoch und runter, je nachdem , in welche Richtung du das machst. Okay? Und ich will das Ticket, also doppelklicken , Linkspfeil Ich will das da haben. Was ich für diesen tun möchte, ist eigentlich, dass ich das Ticketing, die Ticketoption ausschalten Okay? Für die Person, die nicht eingeloggt ist, weil sie noch keine Tickets hat und es wertvollen Speicherplatz beansprucht. Nun, tief v. Wo wir gerade von tiefem V sprechen, nennen wir es Navi, Bindestrich niedriger Wir werden später im Kurs die richtige Benennung vornehmen. Okay? Aber es wird mein niedriger Wert sein. Ich setze die Nerven an erste Stelle, damit sie gut angeordnet sind sodass Sie nie einen niedrigeren Navi haben können Okay. Und ich möchte auf diesen Typen doppelklicken, ****, das ist er. Und ich möchte den Augapfel ausschalten. Ich bin gekommen, lösche ihn. Okay. Ich kann ihn löschen und diesen Doppelklick ansehen. Lösche ihn und er ist komplett weg . Das will ich eigentlich nicht. Ich will ihn später zurückholen wenn die Person eingeloggt ist, ich will, dass er wie von Zauberhand auftaucht Das ist das Schöne an der automatischen Ausgabe, ja, die Abstände sind cool, aber es ist diese Art von Umfließen, okay, diese Reaktionsfähigkeit, die es sehr nützlich macht Also ich will für den Moment nur diese drei. Als Nächstes möchte ich die Leertaste gedrückt halten. Lass uns das hier runterholen und es einfach in die untere Ecke werfen Okay? Und zieh das hier rüber und du kannst hier herumspielen. Automatische Ausgänge. Okay, ich nehme den mittleren. Du kannst mit deinem Abstand herumspielen. Okay, wir haben also unser automatisches Layout. Ich werde es auf das größere Telefonformat duplizieren. Halte meine Wahltaste auf einem Mac gedrückt, meine Wahltaste auf einem Mac gedrückt, Taste auf einem PC und klicke es einfach an und ziehe es drüber, du kannst ein Duplikat bekommen, nimm das Quadrat in der Ecke. Wenn du das Quadrat nicht greifst, kannst du manchmal die Polsterung nehmen, und das kann ein bisschen frustrierend sein Okay. Also nimm das Quadrat und ich kann die Größe ändern, nach der anderen größeren Größe suchen und alles passt gut hinein Es ist noch nicht besonders widerstandsfähig. Okay. Aber gut genug , um anzufangen. Das Problem mit unserem automatischen Layout ist momentan, dass, wenn ich dann sage, okay, großartig. Dan sagte, ich könnte das Ticket dafür einschalten. Okay, das ist der mit einem angemeldeten Benutzer. Hoppla. Falsch Also, iPhone Plus, und hier will ich dieses. Mach es an, das ist gut. Okay. Und ich kann darauf doppelklicken und ich kann es anpassen und das könnte reichen. Okay. Aber wir sind wegen der fortgeschrittenen Dinge hier. Wir brauchten einen automatischen Reflow, wollten reaktionsschnell und widerstandsfähig sein Lass uns das im nächsten Video machen. 4. 04 Auto Spacing: Hallo zusammen. Wir werden uns den automatischen Abstand zwischen diesen verschiedenen Symbolen ansehen. Weil wir im Moment etwas haben , das ziemlich manuell ist. Und das Problem dabei ist, dass, wenn wir andere Symbole einschalten , die Dinge nicht wieder fließen Nun, der Reflow ist nicht sehr gut, alles läuft irgendwie über. Während dieser hier, jetzt, wo wir die automatische Einstellung aktiviert haben, okay, wenn wir unser kleines Ticket einschalten, sehen Sie, dass alles Wir haben immer noch alle unsere Polsterungen links und rechts. Alles ist nett und ansprechend. Wir werden am Ende, nachdem wir Auto gelernt haben, auch ein bisschen machen , nur um so etwas wie abgerundete Ecken und eine Farbe der Benutzeroberfläche im Hintergrund hinzuzufügen . Ein kleiner Schlagschatten hier auf unserem automatischen Layout Es gibt keinen guten Grund, außer um während dieses Kurses tatsächlich etwas zu machen , anstatt einfach nicht einzelne Tools zu lernen, lassen Sie uns gemeinsam etwas erstellen. Okay, schicke das einfach an Auto, anstatt ein festes Leerzeichen zwischen etwa 98, das ich habe. Okay. Alles, was Sie tun müssen, ist , es hier unter Automatisches Layout ausgewählt zu den drei kleinen Punkten zu gehen. Hallo zusammen, ein kleines Update. Und sie haben es jetzt von den drei gepunkteten Linien unter dieses Drop-down-Menü verschoben unter dieses Drop-down-Menü Und sie haben den Namen geändert. Also hieß es früher Space Between, also wirst du im Internet Sachen sehen, auf denen Leerzeichen dazwischen steht . Und dann geh zu den drei kleinen Punkten. Aber jetzt ist es dasselbe, aber sie haben es etwas Neues genannt und sie haben es woanders hinverlegt. Jetzt ist es also unter dieser horizontalen Lücke. Okay? Wenn du mit der Maus darüber fährst, wird es zu einem kleinen Drop-down-Menü Und dieses Dropdown hat Auto. Okay? Also statt Leerzeichen dazwischen ist es automatisch und es wird statt meiner 98 eingegeben, es wird das Leerzeichen automatisch gefüllt. Der Rahmen hat also eine bestimmte Größe, die Symbole haben eine bestimmte Größe, alles andere ist automatisch. Sie werden es einfach füllen. Und was wir jetzt tun müssen, ist tatsächlich die Polsterung an der Außenseite anzubringen, und das ist auch ein neues Update Das könnte sich also ändern , weil sie es aktualisiert haben und es wirklich schmerzhaft ist, die Polsterung tatsächlich im Früher konnte man einfach mit Maus über die Seite fahren und sie einfach hineinziehen Das könnte sich wieder ändern. Behalte es im Auge. Du kannst es bekommen. Schau dir das an, suche danach, sieh dir die kleine Zahl an, die dort erscheint. Wenn ich darauf klicke und es gedrückt halte und ziehe , erhalte ich Rückenpolster für die rechte Hand Okay. Und ich kann versuchen , es hier zu finden. Und das ist eigentlich rechte, das ist die Polsterung für die linke Hand Wenn du es dir schnappst und die Option auf einem Mac gedrückt hältst , kannst du auf einem PC beides gleichzeitig machen Kannst du sehen, dass es sich auf beiden Seiten zieht, was ziemlich praktisch ist. Das Gleiche gilt für den Boden Wenn du etwas Polsterung am Boden willst, ist es einfach sehr schwierig, die Nummer herauszufinden. Können Sie sehen, dass die Schaltfläche blinkt, also ziehen Sie sie nicht auf das Dokument. Gehen Sie einfach hierher und geben Sie es ein, um zu sagen, dass ich den linken und rechten und den vertikalen Abstand haben möchte , wenn Sie möchten Sobald es drin ist, ist es wirklich einfach, es zu ziehen und ein bisschen zu vergrößern Und wenn Sie mit der Maus darüber fahren, werden Sie feststellen, dass das wie eine kleine blaue Linie Diese blaue Hashlinie ist die Polsterung. Wir spielen also nicht mit dem Rahmen herum. Der Rahmen hat die spezifische Größe. Wir spielen nur mit der Polsterung herum, die sich hervorragend für diese automatische Option eignet Lassen Sie uns zum Video zurückkehren und Ihnen zeigen warum es bei responsiven Designs großartig ist Denken Sie an zwei Änderungen: Der Abstand dazwischen heißt jetzt automatisch, und es ist wirklich mühsam, sich an Innenabstände zu halten. Geben Sie es einfach hier ein. Da hast du's. Aber das Tolle daran Sobald ich meinen Rand festgelegt habe, ist das einfach automatisch, Sie können sehen, dass sie einfach an die Größe angepasst Und das heißt, wenn ich es jetzt hier drüben hinzufüge, es rüberziehe und die ältere Option gedrückt halte, schaue ich mir das Wenn ich jetzt die Ecke ziehe, kannst du das sehen? Es bleibt derselbe Rand übrig , weil ich beschlossen habe, dass ich ziemlich oft Rand sage , wenn ich Polsterung meine. Polsterung, Figmadin Okay, ich habe immer noch genau die gleiche Polsterung auf der Außenseite, die ich mir für die Konsistenz zwischen verschiedenen Aber ein bisschen mehr Platz, und schauen Sie, wie es automatisch geht und füllt diesen Raum Warum ist das gut? Im Moment würdest du sagen, ja, das kann ich machen. Das ist, wenn man verschiedene Teile ein - und ausschalten muss. Okay. Und sorge dafür, dass die Dinge hier unten wieder zum Laufen kommen. Schau dir das an Das ist der alte mit dem festen Abstand. Okay. Wenn ich meinen Augapfel einschalte, sieh dir das an Mach es an. Es wird wegen meines festen Abstands ruiniert. Okay. Es versucht all das zu erzwingen und es gibt einfach nicht genug Platz. Wenn es dagegen automatisch ist, okay, ich kann sagen, wo es ist. Ich kann sagen, dass Sie bei meinem verkauften Ticket die Augen verdrehen. Okay. Schau dir das an. Alles, was automatisch zurückfließt, ist großartig Ich möchte aus Gründen der Konsistenz eine bestimmte Polsterung am Rand, aber diese dürfen hin und her jonglieren Jetzt neige ich dazu, den langen Weg nicht zu nutzen. Okay. Der Abstand, den ich gepackt habe, der Raum dazwischen. Das ist in Ordnung. Okay, du kannst es schneller machen und einfach die Nummer hier drin ersetzen. Okay, der horizontale Raum zwischen den Objekten. Okay, der Abstand zwischen unseren Symbolen, doppelklicken Sie einfach darauf und geben Sie einfach ein Auto ein. Es ist im Allgemeinen schneller und einfacher. Sie können sehen, wie sich das Aussehen des Symbols vorher, nachher, vorher, vorher ändert . Sie können es tatsächlich auch hier unten eingeben , und das ist das. Wenn ich Rückgängig mache, kannst du einmal darauf klicken und du siehst, dass 113 eine Bestellung eingeben soll. Okay, wir verwenden unsere Tastenkombination Alt oder Option, um beide Seiten gleichzeitig zu ziehen, oder du kannst es hier eingeben. Du kannst sagen, dass links und rechts 48 oder vielleicht 56 sein werden , je nachdem, wie viel Abstand du möchtest Ordnung, als Nächstes möchte ich den Rahmen stylen Das hat absolut nichts mit dem automatischen Ausgang zu tun. Wir müssen das nur tun, bevor wir weggehen, weil ich finde, dass es in Ordnung ist, in einem Rechteck zu arbeiten. Aber wenn Sie auf Ihr Telefon schauen, werden Sie feststellen, dass Sie kein Rechteck haben. Es ist rechteckig mit abgerundeten Ecken. Also werde ich das mit unserem Rahmen machen. Bevor wir weitermachen, können Sie weitermachen, wenn Sie keine abgerundeten Ecken machen möchten. Ich werde auf den Namen iPhone 14 klicken , um auf diesen Rahmen zu klicken. Und ich werde sagen, du hast einen Grenzradius von 30, okay? Und es geht um alles herum, es ist realistischer für ein Telefon. Vor allem, wenn Sie versuchen, Ränder und Polsterungen zu erstellen. Sie können sehen, dass es irgendwie zu nah am Boden war, aber mit abgerundeten Ecken, ausnahmsweise zu nah am Also werde ich auf mein Bestelllayout klicken und ich möchte etwas Polsterung von unten Okay, 24, es ist ungefähr richtig. Wenn du darüber nachdenkst, was richtig ist, wer legt diese Regeln fest? Du kannst deine eigenen Regeln aufstellen, je nachdem , wie oft du das Betriebssystem verwendest, okay? Wie Android oder iPhone. Wie sehr du es nachahmen willst, oder wie sehr du dein eigenes Ding machen willst Wenn Sie suchen und Sie neu in UX sind, neu im UI-Design, und Sie finden es ein bisschen schwierig Zum Beispiel, warum hat er sich für das entschieden, was ich normalerweise mache, wenn ich an einer Komponente arbeite , von der ich nicht viel weiß, wie dieser unteren Navigationsleiste. Ich werde mir die IOS-Dokumentation oder die Google Android-Dokumentation ansehen . Okay, schauen wir uns einen von ihnen an. Sie können sich einen von ihnen ansehen. Beide. Okay, schauen wir uns das hier an. Ich benutze die Android-Version. Ich designe viel mehr auf Android, weil das das Telefon ist, das ich habe, auf dem ich testen möchte, und sie haben eine wirklich gute Dokumentation. Okay. Google Android nennt ihr Designsystem Material. Okay, es ist bei M drei. Im Moment könnte es M 20 sein , bis du da bist. Aber das Schöne daran ist, dass du zu solchen Dingen gehen kannst, okay? Gehen Sie zu Komponenten, schauen Sie sich um, ob Sie den Namen der Sache finden , die Sie entwerfen möchten. Und wenn Sie ein neues UI-Design haben, wissen Sie es vielleicht nicht einmal. Möglicherweise müssen Sie einige Zeit hier verbringen und dann gehen, was zur Hölle ist eine Navigationsschublade? Was ist eine Navigationsschiene? Einige von ihnen sind einfach, ich möchte zum Beispiel eine Navigationsleiste. Das Coole daran ist , dass es eine Menge Dokumentation darüber geben wird , wie man es benutzt. Wo kann man es verwenden ? Das Beste ist, können Sie sehen, dass es dafür tatsächlich ein Figma-Design-Kit gibt? Du kannst es öffnen und anfangen, Teile zu kopieren und einzufügen. Zu gut. Okay, lies es dir durch. Es ist gut, deine Sprache richtig zu verstehen. Also weißt du, du benutzt, du weißt schon, ein Burger-Menü und kein Nav-Sandwich weil es niemand außer Dan so nennt. Okay? Und du kannst alles Mögliche über Abstände herausfinden, okay? Wie weit von den Dingen entfernt sein sollten, okay? Hier sind viele gute Sachen drin. Wie viele solltest du hier reinpassen? Wie viele sollten da nicht reinpassen? Wie groß sollten sie sein , damit sie anklickbar sind. Jede Menge gute Sachen, zusammen mit Beispielen. Jetzt machen wir es hier für Android. Sie können sich die IOS-Apple-Version ansehen. Sie können sich vielleicht ein Framework ansehen, das Sie verwenden. K, sagen wir, es ist ein Webdesign , das du machst. Schau dir an, was sie gemacht haben. Bootstrap, Rückenwind, Wordpress. Sie alle werden eine spezifische Dokumentation darüber haben , wie Dinge in K-Anführungszeichen implementiert werden sollten Und das können Sie als Ausgangspunkt für Ihr Design verwenden. Als Nächstes möchte ich meine abgerundeten Ecken haben. Ich möchte das etwas größer machen. Ich hätte gerne ein bisschen Polsterung an der Spitze. Okay, oft ist es unten mehr Polsterung als oben. Denken Sie an ein gerahmtes Foto oder ein gerahmtes Gemälde an einer Wand, so wie ein Kinn an der Unterseite Da ist mehr als die Oberseite, das gibt dem Ganzen einen guten Halt Fundament hält es in unserem Fall vom Rand des Rahmens fern Die andere Sache, die ich machen will, ist, du hast es am Anfang gesehen, vielleicht hast du es getan. Ich möchte, dass die Hintergrundfarbe hier eine etwas andere Schnittstellenfarbe hat als die Vorderseite. Lass das ein bisschen abheben. Wir machen nur ein paar grundlegende Dinge, du kannst jetzt weitermachen. Keine coolen Sachen mit automatischem Layout mehr, mehr nur Designkram Ich werde dem iPhone eine bestimmte Farbe geben, okay? Fff ist das Weiß, F Sieben ist das, was ich an diesen Farben hier mag Wenn du nur eine öffnest, weiß ich, dass die Farbe, die ich will, 777 ist. Okay? Bei Wiederholung. Wenn du einfach eine davon eintippst und eingibst, füllt ich sie alle für dich aus und gibt dir die gewünschte Farbe. Das ist die Farbe, die ich will. Okay? ein dunkleres Grau, irgendwie so. Hintergrundfarbe des Windows-Betriebssystems. Es ist so, wenn ich zu diesem automatischen Layout hier unten gehe und sage, ich möchte, dass du einen Hintergrund voller weißer Farben hast, sehe ich, dass es einen gewissen Kontrast zwischen den beiden gibt. Nicht riesig, es ermöglicht uns nur , die Grenzen zwischen diesen beiden zu erkennen. Was ich tun werde, ist tatsächlich ein bisschen Schlagschatten hinzuzufügen. Ich werde Effekte sagen. Ich werde Schlagschatten sagen und auf die kleine Sonne klicken, um das zu ändern. Ich möchte, dass es ein bisschen höher ist. Ich möchte, dass es auf Null sinkt. Und ich möchte, dass es verschwommen ist. Und ich möchte, dass es so ist, lassen Sie uns einen Blick auf die erste Schicht werfen , um alles zu sehen Es ist wahrscheinlich ein bisschen stark. Ich werde sagen, du bist auf 15 gesunken. Ich will nur diesen kleinen subtilen Hinweis, dass ich, hör mal, davon getrennt bin. Ein kleines Update zum Video ist, falls du das beim Hinzufügen von Schlagschatten gefunden hast, also habe ich sie alle hier unten ausgewählt, Effekte hinzugefügt. Und die Schlagschatten, die Sie hier sehen , beziehen sich auf die Symbole und nicht auf den Hintergrund, was Sie vielleicht verpasst haben. Okay. Oder die Sache, die Sie noch einmal überprüfen müssen ist, dass ich es rückgängig machen werde, um es loszuwerden, ist, dass Sie den äußeren übergeordneten Frame benötigen. In meinem Fall muss der Rahmen mit Weiß gefüllt werden und dann der Effekt hinzugefügt werden. Der Effekt wird auf die Außenseite des Rahmens angewendet und nicht auf das Material, das sich darin befindet. Ich habe den Effekt angewendet, ich kann ihn nicht sehen, also werde ich auf die kleine Sonne treffen. Ich werde sagen, ich möchte, dass du etwa minus sechs bist, nur damit du sehen kannst. Okay, also wenn der Rahmen keine Füllung hat, wird der Schlagschatten auf die Symbole selbst angewendet. Praktisch zu wissen. Mach weiter. Ordnung, jetzt möchte ich diese Rahmendetails in diesen kopieren . Okay, ich wähle den Titel des Frames aus. Gehen wir zu Befehlsoption C. Es ist also quasi wie Kopieren. Okay, aber mit dieser zusätzlichen Taste auf einem PC ist es ähnlich, es ist die Steuerung Olt, um sie zu kopieren Und dann hier drüben sind es dieselben zwei Schlüssel. Und wieder V, es bringt meine Hintergrundfarbe durch, bringt alle Radien durch. Jetzt gibt es Abkürzungen Jetzt sagen wir, Mann, ich werde mich nicht an all das erinnern. Dann finde ich die Superabkürzung , die vielleicht jeder kennt, die du vielleicht nicht. Ich habe es hier ausgewählt. Ich kann mich nicht erinnern, was Paste-Eigenschaften sind. Wenn es ausgewählt ist, halten Sie einfach die Befehls- oder Steuertaste auf einem PC gedrückt die Befehls- oder Steuertaste auf und drücken Sie den Schrägstrich Schauen Sie sich Ihre Tastatur an. Okay, es ist der Schrägstrich, der sich nach vorne lehnt und einfach , ich weiß nicht, Eigenschaften Sie können dort Eigenschaften kopieren und einfügen, Sie werden die Abkürzungen lernen Aber es ist auch fast genauso schnell, einfach auf diese zu klicken, vor allem, wenn es sich nicht um eine Abkürzung handelt, die Sie ständig verwenden. Das ist Befehl auf einem Mac, Steuerung auf einem PC und Schrägstrich, du kannst jede beliebige Tastenkombination bekommen, die du magst , Eigenschaften einfügen, ich habe sie dafür nicht gebraucht In Ordnung, wir sind also auf ein kleines Problem gestoßen. Okay, das wurde mit einem Schlagschatten aktualisiert und hat einen weißen Hintergrund. Dieser hat es nicht getan. Warum nicht? Oh, weil es keine Komponente ist, Komponenten innerhalb von Komponenten Lass uns das im nächsten Video machen. 5. Wann und wann du Komponenten in Figma verwenden solltest: Hallo alle zusammen. Lassen Sie uns darüber sprechen , wann Sie Komponenten erstellen sollten und wann nicht, und einige ihrer Cookie-Dinge, die mit Komponenten zu tun haben, wenn Sie sie herstellen. Lassen Sie uns damit beginnen, dies zu einer Komponente zu machen, da dies zwei separate Autolayouts sind und Sie sie hier sehen können Das kleine Symbol ist nicht unsere schöne Waffelform oder diese Diamanten Okay, wir werden es konvertieren und das Erste wird passieren. Es wird irgendwie komisch sein. Schau dir das an. Ich habe es ausgewählt. Ich verwende meine Tastenkombination, die Befehlstaste auf einem Mac, Strg-Alt-Taste auf einem PC. Und klicken Sie darauf. Und es wird es in unsere Komponente umwandeln. Großartig. Was ist hier passiert? Okay. Es hat all diese internen Komponenten ausgespuckt Die waren in meinem Autolayout und ich sagte, Hey, du kannst hier nicht drin sein Also haben sie sie ausgespuckt und Exemplare dieser Komponenten darin gelassen , bis es aussieht wir es also rückgängig und machen eine kleine Aufschlüsselung, damit Sie eine Vorstellung davon bekommen, was passiert. Also hier drin sind diese, das sind meine Hauptkomponenten. Diese regeln alle anderen Komponenten alle anderen Optionen. Und es ist am besten, sie nicht einfach auf Seite eins zu belassen. Viele Leute tun das und sie können arbeiten. Das Problem ist, dass wir diese Hauptkomponenten, die all das steuern, nicht in einer anderen Hauptkomponente haben können diese Hauptkomponenten, die all das steuern, . Wenn du es also schaffst, benutze deine Tastenkombination, merke dir die Befehlstaste auf einem Mac, Strg-Optionstaste, die Control-Taste , die Alt-Taste auf einem PC, es geht, du musst hier drin sein und sie hier drüben ausspucken und wir haben diese Komponenten hier im Gange Okay? Und dann nicht einmal innerhalb dieses Rahmens, okay, sie hängen einfach irgendwie darunter rum Was wir also tun können, ist, dass das in Ordnung ist, quasi völlig in Ordnung. Es kollabiert. Ich schnapp sie mir alle. In diesem Fall ist es ein Augapfel, weil wir es ausgeschaltet haben bevor wir sie uns alle geschnappt haben, und wenn sie ausgewählt werde ich sie einfach hierher verschieben Lassen Sie uns sie ein wenig vergrößern. Wenn Sie ein ausgewähltes Mitglied ausgewählt haben, können Sie die Umschalttaste drücken und es wird zu dem von Ihnen ausgewählten Element gesprungen. Und wir werden dieses Aufräumen nutzen , nur weil Aufräumen großartig ist Hast du bemerkt, bevor wir nicht hier oben sind, ich konnte nicht aufräumen, weil Icahn nicht passt Du gehst zum Heranzoomen. Hier ist es. Du musst nur in einer Zoomstufe sein, in die das Ding passt, und sie einfach so gut machen. Großartig. Das könnte dir passieren und du merkst es vielleicht nicht einmal, am Ende hast du komische Sachen, sich irgendwie unter anderen Ebenen verstecken und das ist ein kleines Problem Aber hey, wir haben es geklärt. Und die andere Sache ist, dass wir das auch nicht hier belassen werden. Denn beim ersten Bild kannst du, okay, ich kann mir nicht vorstellen, dass ich das in eine andere Komponente einfüge , aber es könnte funktionieren. Es ist also eine gute Übung, es hierher zu ziehen, meine Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt zu halten, gedrückt zu halten und ziehen und es einfach hierher zu bewegen. Und was ich habe, ist eigentlich weniger einfach das Ganze ziehen, nicht das ziehen. Drücken Sie auf das eigentliche Symbol selbst. Also werde ich meine Hauptkomponente hier behalten und lassen Sie uns eine Instanz behalten. Meine ganze erste Zeichenfläche. Los geht's. Er ist jetzt ein Bestandteil. hier muss ausgetauscht werden. Sie müssen alle die Instanzen sein. Und weil wir das Setup haben, Schatz, oh, wir sollten einfach gehen können, du siehst so aus, das ist alles gut. Sie können hier sehen, dass dieser auf Auto eingestellt ist. Da dieser hier alles gut von unserer Hauptkomponente gesteuert wird, haben wir es verstanden. Die Frage, wann Komponenten hergestellt werden müssen , ist, dass es keine spezifische Regel gibt wenn Sie sich in der ersten Entwurfsphase und Sie einfach gerne Dinge übersehen. Sie benötigen keine Komponenten. Erst wenn du den zweiten Frame hast. Und insbesondere bei Dingen wie Schaltflächen und Symbolen sollten sie immer Komponenten sein, sollten sie immer Komponenten sein da Sie sie wiederverwenden werden . Aber wie ich, wirst du am Ende Dinge machen, bei denen du quasi eine kleine Karte machst, und am Ende duplizierst du Komponenten, anstatt sie herzustellen Und dann gibt es nichts, das sie alle kontrolliert. Sie müssen also alles durchgehen und wiederholen oder zumindest jedes einzelne anpassen, damit Sie am Ende darauf stoßen, wann Sie Komponenten benötigen Das Letzte an Komponenten ist , dass, wenn Sie Ihre Hauptkomponenten zur Seite legen, sich oft auf einer anderen Seite befinden. Wenn Sie ein etwas großes Dokument haben, halte ich es auf derselben Seite, wenn die Designs ziemlich klein sind, da fehlt viel. Ich möchte oft zu den Hauptkomponenten zurückkehren, also lege ich sie hier einfach über die Seite. Aber wenn du sie übertrieben hast, ist es wirklich wichtig, sie in einen Platzhalterrahmen zu legen in einen Platzhalterrahmen Also das FK für Frame Tool, und ich werde sie einfach darauf setzen. Ich werde wahrscheinlich eine andere Farbe nehmen, nur damit ich den Kontrast des Weißen sehen kann, weshalb sie hauptsächlich da drinnen sind. Also lass uns das hier herausbringen. Es ist also nicht innerhalb eines Elternrahmens, sondern hängt einfach alleine rum. Sie werden MainComponent Hier drüben gibt es nichts, womit du die Beschränkungen festlegen kannst , die Beschränkungen. Lass uns das nach Hause gehen, weil es in meinem Telefonrahmen ist. Es heißt, ich kann die Einschränkungen oben oder links setzen, meinem Fall wahrscheinlich unten links. Okay, weil ich möchte, dass es bis zum unteren Rand dieses Rahmens klebt . Das heißt, wenn ich diesen anpasse, nur den Eltern-Frame. Kannst du sehen, dass es am Boden klebt. Perfekt. Aber ich möchte das für die Hauptversion tun, also ist es die Standardeinstellung. Also jedes Mal, wenn ich einen herausziehe, muss ich ihn ändern. Aber hier drüben, hör zu, das kann ich nicht tun. Aber wenn es einsichtig ist, wird es das tun. Ziehen Sie den Namen, wenn er sich darin befindet können Sie sehen, dass die Einschränkungen angezeigt werden, da sie sich innerhalb eines übergeordneten Frames in nur einem Platzhalter befinden und ihn für etwas anderes verwenden , als um zu sagen, dass es das ist Wenn ich also neue herausziehe, wird standardmäßig unten und links angezeigt. Hauptkomponenten können nicht eingesehen werden, andere Hauptkomponenten. Und es ist praktisch, sie alle innerhalb eines Platzhalterrahmens zu haben , auch wenn er sich auf einer anderen Seite befindet, damit Sie Dinge wie Ihre Einschränkungen festlegen können Oh, ein letzter Tipp dazu ist auch, dass Sie keine Dinge in Komponenten löschen können. Also, wenn ich hier reingehe und bevor wir weitermachen, haben wir etwas gelöscht, es ist aus dem Korb verschwunden. Wenn ich meine Löschtaste drücke, denke ich an Komponente. Kannst du sehen, wie der Augapfel gerade ausgeschaltet ist Lass uns das verschieben, damit du es sehen kannst. Also habe ich auf meiner Tastatur Löschen gemacht. Auf Wiedersehen, es macht einfach den Augapfel ein und aus. Okay, das Coole an Komponenten ist, dass man nichts löschen kann. Wenn Sie es löschen möchten, müssen Sie zur Hauptkomponente zurückkehren und es dann von hier aus löschen. machen alle Elemente, die wir bauen, etwas widerstandsfähiger und stellen sicher wenn andere Leute sie verwenden, sie anderen Mitarbeitern zur Verfügung stellen, die es nicht riskieren, und Teile dort komplett entfernen, einfach den Augapfel ein- und ausschalten Da haben wir's. Dev wurde etwas länger als ich dachte, dass wir das einfach in eine Komponente umwandeln werden . Da haben wir's. Hoffe du hast etwas gelernt. Nächstes Video 6. 06 Guter Abstand: Hallo. Lass uns das machen. Es ist nur ein Leitfaden für Helper-Spacer und es ist eine Antwort auf eine Frage Ich höre oft, wie weit sollten die Dinge voneinander entfernt sein? Welchen Abstand sollten sie haben? Welche Größe sollten sie haben? Was ist wirklich üblich? Es sind diese. Und was macht das? Es ist nichts. Es ist nur ein visueller Hinweis. Also, wenn wir etwas entwerfen, fragen wir uns, wie groß sollte es sein? Du kannst dir das ansehen und gehen, es sollten ungefähr 24 sein , eigentlich 32. Wie weit sollte es voneinander entfernt sein? Ah, lass uns sechs nehmen. Lass uns 16 plus verwenden. Das gibt mir einen Grund, dir ein wirklich cooles Plug-In zu zeigen. Okay, das wird uns helfen, all diese Art von Dokumentation für uns zu erledigen . Es ist gut für diese kleinen Räume hier. Aber auch, wenn Sie weiterkommen und anfangen, Dinge wie Designspezifikationen für Ihren Entwickler und vielleicht ein Designsystem zu erstellen . In Ordnung, Boxen und Plug-ins, Leerzeichen zwischen Boxen. Lass es uns machen. In Ordnung, also lass uns ein Raster erstellen Ich werde es hier machen. Ein kleines Abstandsraster. Ich nehme das Rechteckwerkzeug halte die Umschalttaste auf meiner Tastatur gedrückt , damit Höhe und Breite gleich sind. Und ich will, dass mein erster acht ist. Das ist ein gutes Basislevel. Wenn sie miteinander verknüpft sind, sollten sie beide acht werden. Okay. Die Breite und die Höhe. Und ich drücke Enter auf meiner Tastatur. Hervorragend. Ich werde unsere wirklich kontrastreiche Farbe wählen. Ich würde gerne ein Vielfaches von acht haben, wenn wir aufsteigen Okay, wenn wir ein bisschen zoomen, können wir auf einem PC die Optionstaste Ok gedrückt halten , um zu duplizieren Und ich werde es einfach eine Größe herausziehen. Und ich werde hier meine Mathe anwenden, weil ich nicht gut in Mathe bin, und sag einfach, plus acht. Los geht's, 16. Okay? Ich kann das rechnen, aber lass uns noch eins machen. Lass uns plus acht gehen. Und ich werde einfach weiter auf eine Größe steigen , die zu groß wird. Lass uns das machen. Ich möchte das im Geschwindigkeitsmodus machen, okay. Das ist wahrscheinlich genug. In Bezug auf den Abstand. Okay. Und Dinge, die von den Rändern anderer Dinge entfernt sind. Ich finde, das ist groß genug wenn wir es auf 48 bringen, es ist ziemlich riesig. Du kannst weiter auf dich zukommen. Ich mag es auch, den Abstand zwischen den Dingen zu sehen. Das ist gut für ähnliche Einheiten von Dingen. Wie groß sollte deine Ikone sein? Wie groß sollte diese Bildbox sein? Wie weit sollte sie von den Rändern entfernt sein? Eine andere Möglichkeit ist, dass der Abstand dazwischen beim Erstellen visuell sehr hilfreich sein kann. Und auch dafür gibt es einige gängige Größen. Ich habe meine erste Kiste. Wie weit ist die kleinste Entfernung entfernt? Die kleinste ist Null. Wir brauchen also keine Null. Wir können uns alle Null vorstellen. Schauen wir uns den ersten an. Ist vier, okay? Also vier Pixel breit. Woher weiß ich, dass es vier sind? Okay, es ist eine vergrößerte Ansicht. Kannst du das Gitter dort sehen? Ich kann sehen, dass es vier sind. Sie können auch überprüfen, ob die Option KampC gedrückt ist, und Sie können einfach den Mauszeiger über Dinge bewegen und Sie können sehen, schauen Sie, ich bin vier Pixel entfernt Vier, sechs ist der nächste. Das ist die nächste wirklich übliche Größe, nicht teilbar durch acht Ich weiß das, aber es ist ein wirklich üblicher Abstand zwischen Dingen Bitteschön, sechs. Das nächste, wenn wir mehr Pixel von etwas entfernt haben, acht von etwas entfernt, ist es wahrscheinlich einfacher, es einfach neben das Objekt zu ziehen , ganz daneben, zu sagen, X und Y bewegen sich bitte plus vier Pixel entlang des X. Lassen Sie uns herausfinden, wie Sie den Abstand anpassen können. Es gibt ein paar kleine Zahlen, 468, und dann gehen wir im Grunde entweder in ganzen oder halben Achterabteilungen vor Ich nehme 12 für die nächste, 12. Der nächste wird 16 sein , also zwei acht. Meine letzte, ich habe keine letzte, ich brauche wahrscheinlich eine 20 dazwischen. Also gehe ich, dieser wird plus acht, plus acht sein, und ich werde 20 daraus machen, das ist ein weiterer Abstand, den ich verwende. Nochmals, das sind nicht die Regeln, aber oft sind wirklich gute Größen für Dinge und das sind wirklich gute Abstände zwischen Dingen. Nun, das ist praktisch, aber es ist schwer zu wissen. Nun, du kannst tatsächlich darauf klicken und sagen, oh ja, das sind 48 und dann losgehen und Sachen machen und dir den Abstand ansehen und sagen, okay, wie weit sollte das von oben entfernt sein? Darüber. Halte deine Option gedrückt, Koga, das sind 12. Und dann geh wieder da rüber. Sei nett. Wenn sie alle beschriftet sind, kannst du sie ausschreiben. Das ist langweilig und mühsam. Schauen wir uns unser erstes Plug-In für den Kurs an. Plugins findet ihr also in diesem Icon hier unter Ressourcen. Okay, wir gehen zu Plug Ins und das , was wir uns ansehen werden, ist Design Doc für diesen Fall. Jetzt gibt es viele Konkurrenten für diese spezielle App. Finden Sie die, die Ihnen gefällt, und Design Doc funktioniert möglicherweise seit einiger Zeit nicht mehr. Wenn ich diese Kurse mache, ist es im Grunde an der Zeit, dass derjenige, der sich für dieses Plug-In entschieden hat , beschließt, es nicht mehr zu aktualisieren. Also nochmal, das ist zum Beispiel eher ein Beispiel als ein Versuch, diesen speziellen zu benutzen. Also werde ich es finden, indem ich nach dem Designdokument suche. Ein Wort, ich werde es überprüfen. Dieses Ding öffnet sich. Das ist ziemlich süß. Schau dir das an. Wenn ich auf diesen klicke, verschieben wir ihn hierher und sagen, ich gebe mir die Höhe darüber. Schau, bumm. Dieser hier. Ich will die Höhe darüber haben. Bum. Du kannst es nicht sehen, oder? Bitteschön. Und es macht es einfach schön groß und einfach, sodass ich das nicht messen muss. Da haben wir's. Wir können das für zukünftige Projekte verwenden, sobald wir es geschafft haben. Was ich auch tun möchte, ist auf dies und das zu klicken. Ich halte die Umschalttaste gedrückt, um zwei Dinge auszuwählen und eigentlich möchte ich mir den äußeren Abstand zeigen. Sehr gut gestaltetes App-Plug-In. Okay, ich werde das für alle tun . Bin in einer Sekunde zurück. In Ordnung, das ist also eine süße App. Schnelle kleine Tastenkombination, Optionssteuerung, Alt P, um den letzten Stecker zu öffnen. Und wenn Sie es immer wieder verwenden und einige von ihnen schließen, nachdem Sie sie benutzt haben , ist das eine gute Abkürzung. Ich werde dafür sorgen, dass das auf dem Shortcut-Blatt steht . Okay, mit dieser App hier ist es großartig. Es hat das gemacht, kannst du sehen, es ist quasi ein überlagerndes Ding geworden Ich will, dass sie alle miteinander vermischt sind. Ich möchte sie wahrscheinlich alle in ihrem eigenen Rahmen haben. Im Moment sind sie in einer Gruppe, sie ziehen dort eine kleine gepunktete Linie , also rutsche ich ab, nehme mein Rahmenwerkzeug, zeichne ein Kästchen um alles herum und sage, du hast eine Füllung mit dieser dunklen Farbe und ich muss mit einer Ebene spielen, sie bestellen, ein paar meiner Rechtecke und einen Teil des Containers nehmen , nicht alles Es ist ein Container, du gehst über all das hinaus. Ich habe alle meine Rechtecke hier. Wir machen Layer Madness. Später im Kurs weiter. Okay, aber im Moment werden wir es im Stil von Höhlenmenschen tun Zieh sie einfach an die richtige Stelle, sie haben nicht ganz funktioniert Da haben wir's. In Ordnung, das werden meine Maße sein. Fantastisch. Das ist praktisch. Stecken Sie beide ein für das, was wir gerade tun, und später, wenn Sie anfangen Spezifikationen für den Entwickler zu erstellen, entweder ein Übergabedokument oder vielleicht ein Designsystem Das werden wir also als visuelle Anleitung verwenden , während wir diesen Kurs durchgehen Ja, um unseren Abstand zu und zu wissen, wie groß Dinge sein sollten. Ja, auf zum nächsten Video. 7. Welche Abstände sollte ich für Web- und App-Design in Figma verwenden: Hallo alle zusammen. Lassen Sie uns nur ein bisschen mehr darüber sprechen, wie der Abstand sein sollte. Ich habe dir ein paar generische Sachen gegeben und dem letzten, das wir gemacht haben, habe ich diese Magie bekommen. Wie wirst du besser darin? Wenn du deine Abstände schon ziemlich gut beherrschst , kannst du weitermachen Aber wenn Sie ein bisschen mitmachen und sicherstellen möchten , dass die Dinge konsistent und einfach sind , können Sie mit Ihrem Entwickler zusammenarbeiten , wenn Sie Ihre App weitergeben , ohne Probleme zu verursachen oder zumindest auf den Entwickler zu achten und darauf, womit er arbeiten wird Schau dir dieses Video an. Es gibt also viele Orte, an denen ich auf deiner App oder Website landen werde. Und was am Ende passieren wird, ist Ihr Ingenieur, Ihr Entwickler, wen auch immer Sie verwenden, um es zu machen, es könnten Sie sein. Es ist sehr wahrscheinlich, dass es auf einem sogenannten Framework aufbaut , Ihr Entwickler, Sie wird nicht all die Knoten und Nullen durchmachen und setzen Sie werden auf Dingen aufbauen, die auf Dingen aufbauen die auf Dingen aufbauen, die auf Dingen aufbauen. Wenn Sie also iOS-Entwickler sind, verwendet der Entwickler die vorgefertigten oder zumindest die Richtlinien von Apple Wenn es Android ist, wird es dieses Material sein , wie sie es nennen, ein Designsystem. Und sie geben dir viele hilfreiche Dinge darüber, wie die Dinge voneinander entfernt sein sollten Wenn du auspeitschen willst, könnte es Bootstrap sein, es könnte Rückenwind sein Sprechen Sie also mit Ihnen, um unsere Idee zu entwickeln , wohin es führt, worauf es aufbaut, und lesen Sie dann ein wenig herum. Es kann verwirrend sein, aber wir müssen in solchen Dingen zitiert werden, damit Sie anfangen können , vielleicht ein bisschen CSS zu verstehen , ein bisschen Code, damit Sie Ihren vielleicht ein bisschen CSS zu verstehen , ein bisschen Code, Entwicklerabstand von sieben nicht über den Haufen werfen , weil sieben schwierig ist weil Sie es nicht in zwei Hälften teilen können. Du hast irgendwie ein halbes Pixel. Du kannst genug aufteilen. Sie können vier Pixel haben. Schauen wir uns an, warum acht auch gut ist. Schauen wir uns also Material für Android an. Da drin, Material IO, sie sind in Zukunft an ihrer dritten Version, Sie könnten bei Version vier oder fünf sein, den Schwanz einziehen. Okay, ich bin im Stiftungswesen. Ich schaue mir das Layout an und verstehe das. Und es ist einfach nett, durchzugehen und zu sagen, dass der Abstand zwischen den Spalten ein Standardwert von 24 DP ist, was im Wesentlichen Pixel sind, kurz für geräteunabhängige Pixel. Sie verwenden dies, weil viele verschiedene Telefone unterschiedliche Pixeldichten haben Betrachte es einfach als Pixel, wenn du verstehst, dass DP beim Entwerfen in Figma gleich Px ist Sie verwenden also einen Abstand von 24, um sicherzustellen, dass Sie 24 erhalten, wenn Ihren kleinen Abstandshalterblock aufbauen und Sie Ihren kleinen Abstandshalterblock aufbauen und zuerst zu Android Sie Ihren kleinen Abstandshalterblock aufbauen und zuerst zu Android wechseln. Das ist die Standardeinstellung. Es ist glücklicherweise durch acht teilbar, nicht zufällig, oder zumindest ist es im Moment ein wirklich üblicher Abstand Schauen wir uns das an. Und iOS hat durchgelesen, was sie tun. Ich denke, sie verwenden 20 für ihre Margen auf ihren Seiten, sie haben einige andere Standardeinstellungen als viele andere. Und die Sache mit iOS ist, dass es beide Telefone gibt, es gibt Fernseher, es gibt Gadgets, es gibt Uhren. Schauen Sie sich das mal an. Wofür entwirfst du? Es wird eine Dokumentation online geben. Wenn Sie beispielsweise eine Website oder Web-App erstellen möchten, finden Sie heraus, dass WordPress WordPress ist, das Bootstrap verwendet Bootstrap ist ein Framework, das Entwicklern hilft, schnell zu arbeiten, okay, und was sie am Ende tun werden, ist, einen kleinen Blick darauf zu Ich habe das gefunden, die Dachrinnen nennen sie das, der Raum zwischen den Dingen. Und die Standard-Dachrinnen haben 1,5 Felgen. Und Sie können dort sehen, dass 24 Pixel genauso sind wie Material. Wenn ich also 24 als Abstand verwende, wird es dem Entwickler gefallen, weil es irgendwie konsistent mit Bootstrap und mit Android konsistent ist , je nachdem, wohin Sie Mittlerweile gibt es 100 verschiedene Frameworks, Leuten Rückenwind gibt, die dies häufig verwenden um beim Styling zu helfen Sie können hier sehen, dass ich unter GAAP K Bootstrap Cause a Gutter gefunden habe , Tau1 verursacht Es ist alles nützlich, als UI-Designer zu wissen. Sie können hier sehen, was ein Entwickler eingibt, wenn er die Nummer nicht wirklich eingegeben hat. Sie werden hoffentlich in der Nähe eines davon sein. Sie geben also beim Codieren Abstände ein, um zu sagen, dass Abstand Null ist, was Null ist, Lücke ist eins, was 0,25 von Marine entspricht, ein Ring ist standardmäßig 16,25 von 16 vollen Pixeln Denken Sie daran, dass wir vorher einen kleinen Abstand hatten, das ist hier der Mindestabstand. Es ist eine gute Regel, nicht zu gehen. Drei Abteilungen werden knifflig und du entwickelst dich. Es muss gehen und viele der Framework-Standardeinstellungen überschreiben viele der Framework-Standardeinstellungen Sie können es tun, aber Sie entwickeln eine, die Sie wahrscheinlich einfach ignorieren und einige der Standardeinstellungen verwenden , sofern Sie sie nicht erzwingen. Okay, schauen wir uns das an. Also 166810. Oh, das sind zehn. Vielleicht entscheidest du in deinem Design, dass du eine Dose brauchst oder war es das? Wir haben keine Dose. Wir haben 46812 Es gibt keine festen Regeln dafür, was diese sein können, aber einige entwerfen für Frameworks oder verstehen sie ein bisschen, besonders wenn Sie wissen, wohin es führt Wenn Sie wissen, dass der Entwickler Rückenwind großartig verwendet , geben Sie all diese Informationen ein Die großen Imbissbuden sind ein Vielfaches von Acht. Gut. Aber du solltest dir wirklich ansehen, wie es gemacht und kopiert wird , was den Übergang von Figma zum eigentlichen Design und zur Entwicklung nicht viel reibungsloser macht und das musst du auch nicht, aber ich habe auch ein Wave Essentials, das viele der Dinge abdeckt, die wir uns hier ansehen, wie zum Beispiel, was hat der Rand mit der DP Was ist Bootstrap? Was macht Flexbox Es gibt viele gute Dinge, die du lernen kannst, die dein Design beeinflussen werden, wenn du in Figma bist, aber das würde den Rahmen dieses Kurses Aber ein bisschen HTML- und CSS- und Framework-Kenntnisse machen Sie meiner Meinung nach zu einem besseren UX-Designer. In Ordnung, war das verwirrend? Ein bisschen schlängelnd. Wie dem auch sei, lassen Sie uns zu einigen weiteren Hard Skills in Figma übergehen 8. 08 Auto-Layout im Vergleich zu Einschränkungen: Hallo, lassen Sie uns über Einschränkungen sprechen. Wir haben es im Grundlagen-Kurs ein wenig behandelt. Schauen wir uns an, ob es nicht kaputt geht, wenn wir die Größe für verschiedene Telefone ändern. Wir wollen in der Lage sein, etwas zu haben, das belastbar, robust und reaktionsschnell ist. Okay. All die Rs , damit, wenn wir uns ändern, es mitfährt. Du und mein Freund müsst Android Mini sein. Oh, schau, wie schnell und einfach das ist, damit du es nicht kaputt machst, deine Teamkollegen machen es nicht kaputt Und es sieht auf all Ihren Geräten gleich aus. Okay, es ist also einfach. Was wir tun müssen, ist , auf unserem unteren Navi auszuwählen. Wir sollten es wahrscheinlich mit unserer Hauptkomponente machen, so dass, wenn wir es später duplizieren, wir es alle irgendwie mit dieser machen. Wenn du keine Einschränkungen sehen kannst, sind sie da, okay. Denken Sie daran, dass sie sich in einem übergeordneten Frame befinden müssen. Meins ist wie ein Platzhalter. Nur damit ich es ändern kann, okay? Es macht gar nichts. Aber ich werde eigentlich sagen, bleib nicht links und unten, lass uns unten bleiben, was gut ist. Aber ich wollte nicht nach links, sondern nach links und rechts gehen. Ich möchte, dass es sich ausdehnt. Ich möchte nicht, dass es in diesem Fall skaliert , weil ich den Inhalt nicht skalieren möchte. Ich wollte mich nur bis zu den Rändern dehnen. Jetzt können wir ein oder zwei Dinge tun, denn das ist eigentlich keiner meiner Fälle. Also werde ich ihn löschen und diesen herausziehen, während ich meine Wahltaste gedrückt halte. Und jetzt sollte er standardmäßig links, rechts, unten sein. Und du sagst, das schien nicht sehr nützlich zu sein, okay, weil wir es einfach in die Länge gezogen Das ist, wenn du von hier weitermachst. Also wenn du gehst, okay, ich brauche jetzt zwei davon, oder ich brauche eine andere Größe. Also werde ich meine Android-Größe anpassen. Ich werde das Ganze duplizieren. Okay? Das wird Android heißen. Okay? Und ich werde sagen, eigentlich muss es die Größe von haben, also habe ich den Namen ausgewählt. Es hat einen Rahmen. Lass uns zum iPhone gehen. Es wird Android Small sein. Okay? Eines der kleinsten Geräte, für das wir in diesem Kurs entwerfen werden. Siehst du, was passiert ist? Oh, sieh dir das an. Wenn du es nicht an hast, hätte ich das tun sollen. Hätte vorher und nachher sein sollen. Ich denke, wir waren an der Spitze festgefahren. Ja, oben und links. wenn wir das nicht machen und sagen, hey, passen wir die Größe an Genieß es klein, nicht sehr nützlich. Es ist irgendwie aus dem Rahmen verschwunden, also hol es zurück und ich werde es wieder auf die kleinere Größe umstellen. Es geht los. Das ist jetzt eine ziemlich reaktionsschnelle kleine Komponente. Erinnern Sie sich jetzt an ein paar Notizen. Wenn Sie bei Ihrer Größe nicht die Größe ändern können, die Sie möchten, liegt es wahrscheinlich daran, dass Ihr Auto nicht für den Abstand eingerichtet ist, okay? Sie können es also verschieben und sicherstellen, dass es automatisch ist, sonst macht es vielleicht nicht genau das, was Sie wollen Und denken Sie daran, Einschränkungen können nur gefunden werden wenn sie sich in einem übergeordneten Frame befinden, okay? Und mit Elternteil meine ich , dass es dieses Äußere gibt und dass dieses Kind, okay, ohne es innerhalb des Elternteils ist. Okay. Da geht weg. Nun, ein weiteres kleines Problem , das ein paar Leute haben, möchte ich hier hinzufügen, falls deins nicht funktioniert. Es ist seltsam, dass ich keine Lösung gefunden habe . Ist es ein Bug? Ist es ein Feature? Ich bin mir nicht sicher, aber das ist meine Hauptkomponente hier drüben. Ich habe es Frame One genannt und es einfach schnell neu aufgebaut. Ich erkenne eine Instanz. Kann ich es hierher ziehen und alles gut in eine Reihe bringen? Okay, jetzt die ursprüngliche Hauptkomponente, eigentlich die Hauptkomponente, okay, wenn sie ausgewählt ist, hat sie standardmäßig Beschränkungen von links nach oben. Und du sagst, okay, das ist eine Instanz davon und das ist auf links und oben gesetzt, das macht Sinn. Aber wenn ich sage, du Hauptkomponente und ich sage, dass du links und rechts bist und ganz unten bist, wie ich es zuvor getan habe, sollte die Instanz aktualisiert werden und es kann nicht verstanden werden, warum ich mir das eine halbe Stunde lang angeschaut habe und verschiedene Dinge ausprobiert habe. Wenn du es weißt, lass es mich in den Kommentaren wissen , was ich falsch mache, kann es nicht herausfinden und wie ich es im Video gemacht habe, deshalb sieht es nicht so aus, als ob es ein Problem ist, was ich getan habe, ist, dass ich das gelöscht habe und sobald ich es auf links und rechts und unten geändert habe, dann habe ich eine Instanz herausgezogen. Okay. Und dann habe ich die Größe geändert und es kam mit Aber auch hier, der Instant wird nicht aktualisiert, wenn ich ihn ändere Wenn ich sage, dass du jetzt die Hauptkomponente sein musst , wirst du denken, das kommt mit, aber es ist immer noch unten, fühlt sich an wie ein Bug Das mag sich ändern, wenn du zu diesem Video kommst, aber ja, ich habe ein paar Leute erwischt und es war auch für mich interessant, es zu lernen. Ein bisschen nervig, ein neues Exemplar davon herausziehen zu müssen . Aber hey, ho, los geht's. In Ordnung, mach mit einem Video weiter. Jetzt wenden wir Beschränkungen auf eine Komponente an. Sie können sie auf alles anwenden, normale alte rechteckige Beschränkungen solange es sich innerhalb einer übergeordneten Komponente befindet. Es könnte automatisches Layout sein, es kann Text sein, es kann alles sein. Aber das wusstest du schon. Das andere Interessante an Einschränkungen ist, dass sie hier Einschränkungen genannt werden, K n Figma Aber falls Sie das Wort Flexbox schon einmal gehört haben, sind das im Grunde die Attribute, die wir dem hinzufügen Sie machen das Gleiche. Wenn Sie noch nie von Flexbox gehört haben, ist es eines dieser Dinge , die Sie sich ansehen sollten. So ist es auf der Website implementiert. Also entweder machst du es selbst, hackst dein eigenes CSS, oder wenn du Webflow verwendest, nennen sie es Flex Es ist dasselbe. Komponenten, Flex-Box, Flex-Layouts. Es hat alles damit zu tun, wie Kinder mit ihren Eltern umgehen, okay? Und Sie können ganz einfach ein paar verschiedene Optionen auswählen. Eine letzte Sache ist, dass wir beim Ändern der Größe einfach alles eingegeben und alles neu gemacht haben Wenn du es einfach ziehst, funktioniert es auch, okay. Das heißt nur, dass du viel Güte und Flexibilität hast Güte und Flexibilität , denn genau das versuchen wir zu tun Mache Dinge, die nicht kaputt gemacht werden können, sie können in vielen verschiedenen Situationen verwendet werden Gehen Sie mit Einschränkungen, alles klar , zum nächsten Video. 9. Abkürzungen für Autolayout: Tipps und Tricks, um mit Auto Layout schneller zu arbeiten: Hallo. Ich werde alle Autolayout-Kurzbefehle und wenn das Video sie irgendwie Videos verteilt hat, für sie alle an einer Stelle platzieren, damit du später darauf zurückkommen kannst Lesezeichen für dieses Video. Wenn Sie es automatisch gestalten möchten, einfach, streichen Sie alle, schalten Sie um. Es ist ein automatisches Layout. Es ist Ich muss ein automatisches Layout aufteilen. Es ist irgendwie dasselbe. Es verschiebt eine Plus-Option auf einem Mac, Alt auf einem PC, drückt all diese Optionen und es geht rückwärts. Es ist nur ein Rahmen, kein automatisches Layout. Um Dinge zu einem automatischen Frame hinzuzufügen, können Sie einmal doppelklicken, auf das Element klicken, das sich im Bestellrahmen befindet, es kopieren und einfügen. Leute drücken zum Duplizieren gerne den Befehl D oder Strg D, spielt keine Rolle Sie können durch Ziehen hinzufügen, woher kam dieser Stapel? Hab es gemacht, mir das anzusehen. Ich klicke, halte und ziehe, und es erscheint einfach in meinem schönen Autolayout. Das funktioniert nicht. Wenn Sie versuchen, in die Instanz zu ziehen, machen Sie den Vorgang rückgängig. Das, das hier nicht rein will, muss in das Hauptfach gehen, auch wenn du es hier haben willst. Aber hier drüben, denken Sie daran, dass Sie es nicht wirklich löschen können, es macht nur den Augapfel aus Der Hauptbefehl bestimmt alles, auch wenn du mehr als du brauchst , damit du gehen kannst, sind Ich brauche dich auf? Ich brauche dich raus. Aber es ist für den Star. Zurück zu diesem Punkt: Möglicherweise müssen Sie etwas zu viel in Ihre Komponente hineindrücken , damit sie für Sie funktioniert. Die Sache, die nicht in unser automatisches Layout aufgenommen wird, ist Folgendes. Es ist ein Hauptbestandteil. Es ist die Hauptkomponente für mein Ticketsymbol. Ich kann sie nicht reinlegen. Schau, ich gehe einfach nicht. Wenn es ein Beispiel dafür ist , wird es da rein gehen, okay. Okay. Warum liegt das nicht daran, dass es sich um ein automatisches Layout handelt, sondern daran, dass dies eigentlich eine Hauptkomponente selbst ist. Sie können keine Hauptkomponenten in andere Komponenten stecken , das hat mir nicht gefallen. Sie können Hauptkomponenten darin platzieren, was nur ein automatisches Layout ist, keine Komponente. Du gehst glücklich rein, das macht Sinn. Hauptkomponenten ineinander. Dann gehst du, es ist eine kleine Abkürzung für die Polsterung Also habe ich meine Komponenteninstanz ausgewählt. Ich habe eine ganze Menge Polster am Laufen. Ich drücke auf Null, Tab Null, Tab Null, Tab Null. Um alles loszuwerden, klicken Sie auf Aus, klicken Sie auf Zurück. Und ich habe hier nur diese beiden Optionen , mit denen man normalerweise konfrontiert wird, man kann sagen, eigentlich möchte ich, dass es 48 sind. Und dann machen wir beide Seiten. Ich kann die Tabulatortaste wechseln und dann kann ich oben und unten durch ein Komma getrennt sagen oben und unten durch ein Komma getrennt Ich kann also sagen, dass ich eigentlich möchte, dass es oben 64 ist und dann ein Komma und unten Hilfe bekommen und auf meiner Tastatur die Eingabetaste drücken Es geht von oben und unten aus. Da haben wir's. Deine schicke Coda , dass du mit Kommas Teile eines automatischen Layouts und alles andere kopieren und einfügen kannst Teile eines automatischen Layouts und alles andere kopieren und Nachdem dies ausgewählt ist, möchte ich es auf diese andere Instanz legen . Ich kann die Tastenkombination verwenden , die wir zuvor verwendet haben , wenn wir den Frame kopieren. Denken Sie daran, es ist Befehlsoption C zum Kopieren Strg Alt C, um auf einen PC zu kopieren, okay, dieselben beiden Tasten, aber V, sieh dir das an. Er ist irgendwo da unten. Da ist es. Und es hat meine Polsterung geklebt. Und in diesem Fall habe ich hier eine absolute feste Höhe. Es funktioniert also irgendwie nicht. Also sage ich: Du, mein Freund, auf einer festen Höhe, du kannst den Inhalt bitte umarmen, und er sieht genauso aus Und den letzten haben wir schon gemacht. Sie können auf diese klicken und sie mit den Pfeilen nach links und rechts bewegen. In Ordnung, das sind unsere Abkürzungen für das automatische Layout. Bisher gibt es in deinem Shortcut Sheet , das du herunterladen kannst und wir werden sie im Laufe des Kurses weiter üben . Danke Video 10. Projekt 01 – Responsive Navigation mit niedrigerer Geschwindigkeit: Hallo, hey, willkommen zu dem erstklassigen Projekt. Und ich habe einen einfachen. Ich möchte, dass du schon da bist, wo wir im Projekt sind. K, ich will drei Bilder und ich möchte, dass du das kannst. Es gab keine Arbeitsgruppe, Dan. Okay. Ich war unten und links und rechts. Also ich wollte antworten oder die Icons bewegen, ich wollte ganz unten bleiben obwohl ich dir gezeigt habe, was zu tun ist. Ich möchte also drei verschiedene Versionen. Stellen Sie sicher, dass sie eingearbeitet haben. Wenn du noch nie einen Kurs bei mir gemacht hast, machen wir Klassenprojekte, nur um dich auf dem Laufenden zu halten. Du schaust also nicht nur zu, du machst sogar Kurse, die dir gehören. Du musst sie nicht machen. Ich bin nicht die meisten von euch, aber der Teil mit dem Tun ist es, der es wirklich ausmacht. Wenn Sie also daran interessiert sind, die Klassenprojekte in den Übungsdateien aufgeführt. Okay. Klassenprojekt, mach keinen, ich möchte, dass du drei verschiedene Handygrößen erstellst. Der niedrigere Navi, ich möchte, dass er auf all diese Größen reagiert. Wir werden uns also diesen Hauptthemen befassen, dem automatischen Layout, dem automatischen Abstand zwischen den Elementen und Das Letzte , was ich verpasst habe, stellen Sie sicher, dass Ihr Navi eine Komponente ist. In diesem Fall die Ergebnisse. Ich würde mich freuen, wenn du einen Screencast machen könntest einen Screencast machen könntest Warum wollen Sie nicht, dass Sie ein Video machen, in dem Sie diesen Frame machen, der Sie diesen Frame machen so läuft und alle Befragten NICHT antworten, Dan, ich habe keine Ausreden Ich will, dass es das macht. Okay. Also Video, die Screencasts, die das machen, das ist alles Jetzt kann es für manche Leute schwierig sein, Ihren Bildschirm aufzunehmen. Andere Leute werden damit einverstanden sein wenn du es noch nie gemacht hast Max hat ein eingebautes Ding namens Bildschirmaufnahme. PCs haben etwas Ähnliches. Ich bin mir ziemlich sicher, wenn du willst, es gibt eine Art eingebauter Weg in Figma Gehe zu Erscheinen, gehe zu deinen Plugins. Und das letzte, coole Vimeo-Album. Sie müssen sich mit einem Vimeo-Konto anmelden und Status ist gestiegen, falls Sie keins haben. Es ist kostenlos Es ist wirklich gut darin , dass Vimeo nach einer kurzen Bestätigung der E-Mail-Adresse und all dem Zeug Bestätigung der E-Mail-Adresse und all dem Zeug deinen Bildschirm aufzeichnet? Ja, bitte. Okay. Du kannst es ausführen und du kannst tatsächlich einfach deinen Bildschirm von Tim aufnehmen, meine Kamera aus, mein Mikrofon aus, weil ich eine Bildschirmaufnahme machen wollte. Und wenn du fertig bist, kannst du es auf Vimeo hochladen und dann bekommst du einen Link und schnappst dir diesen Link Und das kannst du für dein Klassenprojekt einreichen. Wenn das alles viel zu schwierig ist, erlaube ich einen Screenshot. Stellen Sie sicher, dass Sie etwas ausgewählt haben, damit wir sehen können, was Sie tun , dass Auto da ist und Einschränkungen eingetroffen sind, die vorübergehen, aber hoffentlich können wir die Bildschirmaufnahme machen In Ordnung, und das ist es. Geh dahin, wo wir schon sind. Vielleicht hast du es schon gemacht, ja, mach einfach die Bildschirmaufnahme. Wenn du nur zugesehen hast, komm schon, jetzt ist die richtige Zeit. Geh zurück, tu diese Dinge, wenn du es kannst, wie du willst Oh ja, das verstehe ich. Beweise es. Lass es uns machen. Aber das liegt an dir. Vorerst aber. Kommen wir zum nächsten Video. Eigentlich gehst du und machst das, und dann sehen wir uns im nächsten Video. In Ordnung? 11. 11 Dateibehandlung: Guten Morgen zusammen. Es ist ein neuer Tag. Und heute beginnen wir mit einigen fortgeschrittenen Workflow-Tricks. In diesem Video dreht sich insbesondere alles um den Umgang mit Dateien. Klingt langweilig, aber es ist eine dieser Abkürzungen, die Ihnen im Laufe Ihres Arbeitstages viel Zeit sparen werden. Und ich werde sie während des gesamten Kurses verwenden. Ich werde sie alle hier vorstellen, damit sie in netten kleinen Gruppen sind , sodass wir wissen, was wir tun. Und ich werde versuchen, sie während des gesamten Kurses zu machen , damit du wie ich ein Figma-Shortcut-Master im Umgang mit Dateien wirst Ordnung, lass uns anfangen. Alles klar, der erste ist einfach, vergewissere dich einfach und finde heraus, du ein paar Tabs geöffnet hast, auch wenn es nur unbetitelte Dokumente sind. Das ist in Ordnung Und auf einem PC auf Befehl Automatische Steuerung drücken und einfach 1234 drücken, damit man wieder zur Heimatbasis zurückkehrt, okay? Und 234 bedeutet nur, dass Sie zwischen zwei verschiedenen Apps hin- und herschalten können : Kopieren und Einfügen Wenn du wie ich bist, hast du am Ende fast alle Tabs voll Es funktioniert meistens auch in einem Browser. Also dieselbe Tastenkombination, ich bin dabei, Chrome-Befehl oder -Steuerung auf einem PC 123, außer dass man nicht zur Home-Base zurückkehrt, sondern zu einem beliebigen Tab wechselt. Und wie bei Chrome können Sie mehrere Tabs haben. Wenn ich dort bis zu fünf hochgehe, ist das nur eine normale alte Website. Es ist also nicht speziell für Figma, sondern nur für alle Tabs. Das ist Kontrolle, das ist Befehl auf einem Mac. Steuerung auf einem PC. nächste Dateibeherrschung ist, dass Sie diese Dateien hier anheften können Das ist also der Hauptteil, mit dem ich arbeite, Event auf einmal Anstatt alles durchzugehen, können Sie rechten Maustaste darauf klicken und sagen, dass Sie bitte einfach diesen Tab anheften. Wird eine nette kleine Version. Du kannst all den anderen Müll hier haben, in dem Wissen, dass es dein guter ist Du kannst sie auch neu mischen. Also sag Untitled, das, an dem du gerade arbeitest. Also willst du es hierher verschieben. Klicken Sie einfach in einem Browser auf dasselbe, klicken Sie mit der rechten Maustaste darauf, pinnen Sie es an. Zieh es herum, ganz einfach. Randnotiz, ich mache das die ganze Zeit. In Chrome habe ich einige Dokumente, auf die ich ständig verweise, meine Aufgabenlisten wie Junk-Schublade, all die verschiedenen E-Mails, die ich überprüfen muss, und mein Kalender ist einfach immer geöffnet Dann habe ich Platz, um meine anderen Dinge wie Figma zu erledigen und im Internet zu suchen Al, jetzt gleich, der nächste, Al. Richtig? Als Nächstes haben diese kleinen Punkte hier oben all Ihre letzten Dateien , die nützlich sein können, anstatt darauf zurückzukommen und dann in der Community zu sein und an den richtigen Ort gehen zu Gehen Sie einfach all Ihre letzten Dateien dorthin. Wenn du wie ich bist, kann das auch unbrauchbar werden weil du jede Menge unbenannter Ständer hast , damit es funktioniert Maus über alles, was Sie die ganze Zeit benutzen , und sehen Sie diesen kleinen Stern hier Sie können zwei Favoriten hinzufügen. Kannst du sehen, wie sie hier erscheinen? Also die Dinge, an denen du die ganze Zeit arbeitest und die Dinge du hinter dir lassen und Müll sein willst, okay? Oder vom Strom verschluckt werden. Aber die hier werden in meiner Lieblingsdatei sein, okay? Und weißt du noch, auf der Desktop-Version hast du eine kleine Heimversion, was ist das? Wie kommst du schnell dazu? Es ist richtig. Kommandiere einen oder kontrolliere einen. In der Browserversion kann ich immer noch zu Befehl eins gehen, aber es geht einfach zum ersten Tab und alle meine Dateien sind dort irgendwie im F versteckt. Sehe dasselbe. Alle Favoriten sind bereit für den nächsten. Zum einen, wenn Sie an wirklich großen Dateien arbeiten oder mit einem wirklich alten, beschissenen Laptop arbeiten Es gibt diese Ansicht hier, es gibt eine, die als Ressourcennutzung bezeichnet wird Hey Leute, sie sind gegangen und haben den Namen geändert. Früher hieß es Ressourcennutzung, jetzt heißt es Speichernutzung. Du hättest es herausgefunden. Ich weiß. Und ein bisschen mehr Veränderung gibt es, wenn du darauf klickst. Früher gab es hier nur ein kleines Fenster darüber, wie viel Stress Ihr Computer hatte. Jetzt gibt es ein riesiges Panel wie stark Ihre Computer belastet sind. Wir werden das im Video behandeln. Eine andere Sache ist, dass Sie jetzt auf diese Schaltfläche klicken können, und sie bietet Ihnen viel mehr Details als früher. Aber die vorherigen Tipps funktionieren immer noch einwandfrei. Sie haben nur ein bisschen mehr Details, um herauszufinden was Ihrem Computer viele Probleme bereitet. Wenn es die Ebenen sind, für welche Ebenen können Sie ein kleines Kontrollkästchen aktivieren. Und Sie können hier sehen, dass mir keine Probleme bereitet, weil ich keinen Speicherverbrauch habe, weil ich nichts mache und es eine sehr kleine Datei ist. Fahren Sie mit der Änderung des Videonamens fort. Erinnerst du dich jetzt an Ressourcen, Speicher, okay? Und es wird dir sagen, wie viele Schichten du hast. Es wird dir sagen, wie viel, quasi Gigabyte es verbraucht Im Grunde haben Sie 2 Gigabyte , die Sie in dieser Datei verwenden können, okay, Figma, und wenn Sie sich dem Ende nähern, können Sie sehen, ob die Dinge langsam laufen Schau es dir an, um zu sehen, ob du fast das Maximum erreicht hast. Die andere Sache, die auch passieren kann , ist, dass die Anwendung stressig sein kann . Und es wird Ihnen in dieser letzten Leiste hier angezeigt, wenn ich ein großes Dokument einfüge, füge ich eine große Datei ein. Ich kann sehen, dass es da oben irgendwie hingegangen ist, ich werde es loswerden. Siehst du, es macht manchmal Dinge, die auch voll ausgeschöpft werden können , je nachdem, was du tust Oft kann es ein Plug-In sein, das einfach schlecht oder einfach nur sehr systemintensiv ist . Vielleicht findest du das, warum ist das alles kaputt? Öffne das und du kannst sehen, alles klar, es versucht etwas zu tun, ist es super hilfreich? Freundlich ist irgendwie genug. Wenn es aber das Maximum erreicht, können Sie sagen, dass große Bilder wie dieses einfach zu groß für Figma sind Und wenn Sie Hunderte davon haben, okay, Ihnen können die Ressourcen ausgehen Sie müssen sie also verkleinern, nicht nur verkleinern, sie müssen kleiner sein. Komm rein. Und wenn das nicht angemessen ist, haben Sie einfach mehrere Dokumente für eine Datei. Wenn das Design Ihrer App oder Website immer umfangreicher wird, müssen Sie möglicherweise tatsächlich zwei separate Dateien haben und diese irgendwie aufteilen damit nicht versucht wird, alles zu verarbeiten. Die andere Sache, die passieren könnte, ist, dass Sie möglicherweise die Bibliothek einer anderen Person verwenden. Okay, gehen wir also zu unseren Vermögenswerten. Schauen wir uns unsere Bibliotheken an. Wenn wir, werde ich eine unserer Bibliotheken einschalten und sie wird möglicherweise unsere, unsere ist nur sehr klein. Okay? Also macht es nicht viel. Aber Sie können die Bibliothek eines anderen benutzen, die Tausende hat. Es könnte eine Gemeinschaft sein, eine, in der jemand dieses gigantische Ding geschaffen hat , das wirklich gut aussieht Aber das ist es, was Ihren Computer verlangsamt. Es kann sein, dass Sie das Zeug auswählen müssen , das Sie benötigen, oder Ihre eigene Version der Bibliothek erstellen Ihre eigene Version der müssen, nur um sie aufzuräumen Es kann auch einfach sein, dass jemand Komponenten und Variablen erstellt hat und sie nicht sehr intelligent erstellt hat, sie sind einfach wie Kopien und Kopien und Kopien und Kopien und Kopien Und Sie versuchen, diese entweder über eine Bibliothek zu verwenden oder sie einfach zu kopieren und einzufügen In diesem Kurs werde ich zeigen, wie man aufräumt und sie schön gestaltet, aber vielleicht arbeiten Sie mit der Datei einer anderen Person Behalte das einfach im Auge, du kannst es loswerden. Klicken Sie sofort. Doppelklicken Sie darauf, tatsächlich wieder, dieser befindet sich auf dem Desktop und im Browser, und in beiden gilt dasselbe Limit von zwei Gigabyte . Es ist eine Art Browser-Sache. Und genau das ist es, was diese Desktop-Version von Figment ist Es ist nur der Browser, der ohne all die Chrome-Bits geladen wird. Noch einer, ein kleiner. Schau dir das an, du kannst die Größe ändern. Wusstest du das? Das wusste ich lange nicht. Das ist wirklich praktisch, vor allem, wenn man sehr langen Benennungen anfängt. Du kannst einfach gehen , das ist besser, und alternativ kannst du es kleiner machen. Warum ist das praktisch? Ich fand es praktisch, als ich es entdeckte. In Ordnung. Nächster Tipp. Eigentlich der letzte Tipp. Schnelle Aktionen. Wir haben das schon einmal gemacht. Es ist Command-Forward-Schrägstrich, okay. Oder kontrollieren Sie den nach vorne geneigten Schrägstrich. Okay? Und du kannst alles Mögliche eintippen , es gibt so viele Abkürzungen in diesem Kurs und dann denkst du, okay, was war das für eine Sache, die Ressourcennutzung, von der er gesprochen Schau dir den RS an und ich kann gehen, okay, lass uns den einschalten Okay, sie haben tatsächlich eine weitere Abkürzung dafür gemacht , zum Beispiel für internationale Tastaturen, es ist Shift P. Es ist nicht Shift P, es ist Befehl P. Okay, und es wird wieder angezeigt und Sie können Ressource eingeben , und da ist wieder diese Okay, und es funktioniert für jede Tastenkombination. Ich könnte also nur für mich selbst zum Kommando wechseln. Ich werde besser darin, den Befehl P zu benutzen, weil ich den Schrägstrich mit dem Befehl Forward Slash immer mache Command Backslash oder Control Backslash ist das Ein- und Ausschalten der Benutzeroberfläche, was ein guter Tipp ist. Bitteschön. Aber ich mache das die ganze Zeit und mache dann diesen, weil das der ist, den ich eigentlich will Verwenden wir Befehl oder Strg P, zwei Abkürzungen, um dasselbe zu tun Sie werden feststellen, dass das in Figma immer häufiger passiert. Weil sie, wie du weißt, am Anfang die USA-Quirt-Tastatur verwendet Und jetzt versuchen sie, Abkürzungen zu erstellen , die für verschiedene Sprachen etwas universeller sind verschiedene Sprachen etwas universeller Tastaturen. Das wirst du also finden Warum gibt es zwei? weil es zwei gibt Ordnung, das ist meine Zauberei beim Umgang mit Dateien . Auf das nächste Video 12. Wie verwende ich fortgeschrittene Tricks zum Kopieren, Einfügen und Auswählen in Figma?: Ja, du hast das Intro gelesen, oder? Erweitertes Kopieren und Einfügen bei der Auswahl von Inhalten. Ich werde versuchen, es spannend zu machen, aber es ist fortgeschritten und es ist gut. Du wirst es wissen müssen. Also los geht's. Lass uns gehen. Ich spüre dich dort. Du sagst, ich werde dieses Video ein bisschen überspringen , um schnell gut zu werden. In Ordnung, es wird dir ein paar nützliche Sachen bringen. Wir wissen also, wenn wir etwas aus diesem Framing nehmen, es kopieren und es auf diesem Bild haben wollen, können wir auf Einfügen klicken und es genau dort platziert, wo es in diesem Bild entstanden ist, was nicht wirklich nach unten ausgerichtet Ja. Okay. Das stimmt. Beeindruckend. Welche Abkürzung hat Dan? Was wir tun können, ist es wie zuvor zu kopieren und dann auf das Ding zu klicken, über das wir es kleben möchten. Okay, klicken Sie darauf und Sie können Command Shift V oder Control Shift V drücken Command Shift V oder Control Shift V und sehen Sie sich das an. Es platziert es über dem oberen Rand, nicht dort, wo es nicht der Rahmen ist, aber wir haben geschlafen, als ob ich darauf klicken würde und gleichen Tastenkürzel verwenden: Shift V, Strg Shift V. Es wird einfach über das das Sie ausgewählt haben, was fast gut ist Guck mal. Es ist aber immer noch da. Ich habe es nicht ersetzt, nur irgendwie draufgelegt. Also werde ich das rückgängig machen. Ich kann immer noch nicht herausfinden, warum das gut ist. Aber das Ego kann man bei einer Auswahl ganz oben ersetzen. Was jedoch besser ist, wenn ich es kopiere und eine etwas andere Tastenkombination verwende, nämlich Command Shift V R oder Control Shift. Bumm, es setzt es tatsächlich und ersetzt das , was Sie ausgewählt haben. Du hast das und du musst das Tor dieser Fitnessstudios austauschen. Ich kopiere es und wähle es aus und gehe zu Command Shift V. Ich gehe Command Shift R los. Es hat es ersetzt. Das Ding hatte ich ausgewählt, nicht weil man normalerweise kopiert. Du klickst auf den Rahmen und er geht genau dorthin, wo du ihn haben willst. Das ist ziemlich gut und meistens hilfreich. Du kannst es auch in vielen Zielen tun, was besagt, dass ich das rückgängig machen und unsere schönen Comic Sans zurückbringen werde . Ich werde das kopieren. Ich gehe zu dir und du wirst es damit machen , wir machen es mit Command Shift, Control Shift oder wo auch immer es auf dem Rahmen ist. Es ist nicht einfach übertrieben. Es hat es ersetzt. Das wird auf jeden Fall in deinem Shortcut Sheet stehen. Und die meisten von Ihnen werden die Abkürzung kennen. Ich zeichne einfach ein Rechteck, das obere Beispiel, schwul, und ich wähle all diese Frames aus, indem ich die Umschalttaste gedrückt halte und auf Einfügen drücke, nur normales altes Tempo Kannst du sehen, dass es auf jeder einzelnen Kunstplatte steht. Das hier jetzt, tut mir leid, Rahmen. Das passt nicht rüber, aber das ist okay. Tolle Möglichkeit, Nav über viele verschiedene Frames gleichzeitig zu bringen . Das ist Multipaste. Du hast nichts getan. Sie wählen einfach mehrere Frames und klicken auf Einfügen und es klebt es an der Stelle, an der es auf alle Bilder gekommen ist. Das Interessante ist, wenn ich das kopiere und was Regel passiert, ist wie bei den meisten Programmen, wenn ich zu diesem gehe und auf Einfügen klicke, wird es genau dort platziert, wo es es hergekommen ist. Oder wenn Sie nichts ausgewählt haben, es es einfach dort ein, wo es von der Einheit abgerufen wurde , mit seinem Duplikat darüber Ist das praktisch? Sie können tatsächlich mit der rechten Maustaste darauf klicken und wir haben Sie rechten Maustaste auf Ihren Cursor geklickt, dies ist diese spezielle Option Das ist Paste hier. Also sagen Sie, Sie wollten, denn andernfalls, wenn ich hier oben bin und auf Einfügen drücke, können Sie sehen, dass ich es hier haben will, nicht da unten, dann geht es weg und es überlappt sich Ich sage, klicken Sie hier mit der rechten Maustaste auf Einfügen. Es geht dorthin, wo sich Ihr Cursor befindet. Ich versuche es aber mit sechs. Es hat aber ein gutes, richtig. Es war sowieso mit den dreißig Sekunden. Okay. Es ist Zeit, den Boden des Fasses abzukratzen Als nächstes wählen Sie invers aus. Nehmen wir an, ich möchte das Navi auf dieser Ausrüstungsseite über allem anderen lassen . Wählen Sie also alles aus, Befehl a, wählt alles aus. Das Coole an Befehl a ist, dass, wenn Sie sich innerhalb eines Frames befinden, alles innerhalb dieses Frames ausgewählt Wenn Sie nichts ausgewählt haben und Befehlstaste a oder Strg-A drücken und alles in Ihrem Dokument auswählen , können Sie auf Löschen klicken Aber wenn Sie hier drin sind, wählen Sie alles aus, normalerweise alles innerhalb des Frames oder tun Sie, was Sie brauchen, um es zu kopieren, fügen Sie es ein, fügen Sie es vielleicht hier ein. Aber jetzt gibt es eine Auswahl-Inverse, okay, also ich bin hier, ich möchte alles auswählen, aber das, ich mache das die ganze Zeit Ich werde hier alles löschen die Farbe von allem im Rahmen ändern, aber nicht das, was du nicht willst, gefällt mir nicht Drücken Sie Command Shift a oder Strg Shift a auf einem PC und es wählt alles in umgekehrter Reihenfolge aus, außer diesem Blick, er ist zurückgeblieben Außer seltsamerweise in Figma im Moment wählt dieser Shortcut alles in jedem Frame aus, wählt dieser Shortcut alles in jedem Frame Weil ich es oft brauche wenn ich hier drin bin und ich bin wie in dieser Gruppe hier und ich bin in der Gruppe und ich möchte dieses hier in Ruhe lassen, weil ich die Farbe geändert habe . Ich möchte einfach bei allem anderen bleiben , weil hier viele verschiedene Dinge drin sind, Command Shift Day, aber es erfasst alles in jedem Frame, das es gibt Ich hoffe, das wird in Figma Chicken behoben . Es könnte behoben sein. Dafür gibt es jetzt ein Plug-In , und zwar eines namens Select Inverse for Real Lass es uns bei einigen innerhalb dieser Gruppe hier machen. Ich habe das ausgewählt und es wird alles auswählen. Lass uns das Plugin ausführen. Hermans mit einer Abkürzung zum Ausführen vorherigen Plugins ist, Stimmt Niemand erinnert sich an die Befehlsoption P auf einem Mac oder die Strg-Alt-P. Das ist praktisch wenn Sie ein bisschen ein Plugin-Liebhaber sind. Und das hier, es ist ziemlich cool, denn wenn ich meine Befehlsoption P, K verwende, läuft einfach das letzte Plugin, das ich benutzt habe, das Ego, es zuerst zu finden, es auszuführen, und dann kannst du diese Abkürzung benutzen. Halt, das Plugin tut, ist genau das. Gehen wir also noch einmal zu meinen Gruppen wie dieser. Und weil ich das Plug-in bereits ausgeführt habe, Command Option P, Control Option P, klicken Sie auf Löschen. Schau, es hat alles ausgewählt , aber das ist nicht nur alles im Dokument. Hoffentlich wird das nur die reguläre Standardfunktion in Figma Ordnung, also Select Inverse things mithilfe eines Plugins ist das A und O für mein fortgeschrittenes Auswählen, Kopieren und Einfügen Es ist mit einem guten abgeschlossen, Sie vielleicht schon kennen. Schalte eins, um dir alles anzusehen. Ich möchte wirklich alle Nerven auf den hundert App-Boards, hundert Frames, die ich jetzt habe, fassen alle Nerven auf den hundert App-Boards, hundert Frames, die ich jetzt habe mich jemals an die Abkürzung für dieses erinnern. Also verwenden wir die Tastenkombination für Regel oder Abkürzungen. Denken Sie daran, es ist ein Schrägstrich für Befehl oder Kontrolle, aber wir werden anfangen, den Befehl oder die Strg-Taste P zu verwenden , weil das einfacher erscheint, okay, und ich tippe dasselbe Dann wählst du etwas aus wie ich navigiere. Wir sagen, wählen Sie alle dieselben Immobilien aus. Bitte schön. Es ist eine großartige Möglichkeit, alles auszuwählen und zu löschen, verschieben, alles zu finden und die Farbe zu ändern. Offensichtlich ist ALS eine Komponente also könnten wir es dort oben machen, aber los geht's. Wählen Sie Gleiche Eigenschaften aus. Gleiche hier. Nur um diese Tastenkombination noch einmal zu üben, Command oder Control P. Und weil sie dort schon oben steht, muss ich nicht einfach auf meiner Tastatur eingeben, Command oder Control P auswählen. Und Sie können dort sehen, ich habe die letzten paar, die verwendet haben , wen sie eingeben müssen. In Ordnung, wie ist es gelaufen? War das superfortgeschrittenes Kopieren und Einfügen und Auswählen? Hoffentlich war einer von ihnen gut und wir werden versuchen, sie alle im Kurs irgendwo im nächsten Video wieder zu verwenden . 13. Wie kannst du verrückte Dinge mit deinen Figma-Feldern machen?: Ordnung, willkommen zu all den verrückten Dingen, die Sie mit Feldern in Figma machen können. Es ist ziemlich cool. Also so ziemlich jedes Feld, das du willst, ich habe hier nur einen Rahmen. Jedes dieser Felder kann mit der Tastatur bedient werden. Nehmen wir an, ich möchte abgerundete Ecken hinzufügen und Sie sind sich nicht sicher, ob Sie nur einmal darauf klicken und den Aufwärtspfeil verwenden. Okay, kannst du dir vorstellen, es einfach hinzuzufügen? Verschieben wir es, damit der Editor nicht so stark zoomen muss wie wir. Sie können es schneller machen, indem Sie die Umschalttaste gedrückt halten und auf und ab drücken, es geht ein Vielfaches von acht Wir sind also bei 20, jetzt geht es um eins nach oben, dann geht es um acht. Warum acht? Du weißt, warum acht jetzt jeder acht liebt. Das ist ein guter Schubs. Ohne es geht man bei gedrückter Shift, geht in ein beliebiges altes Feld, dreht es, tippt es herum, bis es einem gefällt , funktioniert es zum Beispiel auch mit Farbe. Okay, diese Füllung hier, ich habe meinen Cursor ausgewählt, jetzt benutze ich meinen Aufwärtspfeil. Kannst du sehen, dass es sich auf der Helligkeitsskala nur sehr geringfügig nach oben bewegt . Das ist es, was es tut. Wenn Alt Shift gedrückt wird, wird es in größeren Blöcken ausgeführt. Eigentlich geht es in diese, nicht in die Helligkeit. Es geht in den Farbton. Kannst du sehen, wie es weitergeht? Das ist nicht so nützlich, als die Opazität besser ist. Und sagen Sie den Strich hier, Sie sind sich nicht sicher, welche Größe ich in einer Zeile angeklickt habe, hoch und runter Achterspringen ist in diesem Fall wahrscheinlich nicht so nützlich Aber auf alles, was Sie klicken möchten, können Sie die Umschalttaste gedrückt halten, um es schneller zu machen. Mir gefallen die Schriftgrößen, okay, also wählen Sie hier, klicken Sie auf diese und verwenden Sie einfach Ihre Hoch- und Runtertaste, bis Sie die gewünschte Größe gefunden haben. Willst du aufwärts und achteln, weil du dich an ein Acht-Punkte-Raster halten willst , alles praktisch, praktisch Nun, viele der Dinge kannst du genauso gut tun, wie du sie schrubben kannst, okay Alles, neben dem ein kleines Symbol steht. Also ihr alle, dieser hier an meinem Schnittpunkt oder lasst uns den Abstand nehmen, los geht's Zieh es einfach. Ich habe keine Zeilenhöhe, aber Sie haben die Idee Gleiche gilt für diese hier, anstatt zu versuchen, ein Ticket zu erstellen, und Sie können sie einfach ziehen, sagen wir mit der Drehung, eines der Felder, die ein Symbol haben, darauf klicken, es gedrückt halten, ziehen und es wird sozusagen durch das Feld schrubben Fügen wir einen Strich hinzu und sehen wir das kleine Strichsymbol. Da haben wir's, schrubben. Wenn wir jetzt Dinge bewegen , indem wir meinen Pfeil heben, benutzen wir nichts davon. Ich klicke einfach mit meinem Pfeil hoch, runter, links, rechts darauf. Okay. Das nennt man Nudging, okay? Und Sie können es in großen Stücken verschieben, indem Sie die Umschalttaste gedrückt halten. Das weißt du wahrscheinlich schon. Welche großen Brocken verwendet es? Es verwendet wahrscheinlich acht. Wenn Sie das Acht-Punkte-Raster nicht verwenden , weil Sie etwas anderes verwenden, können Sie es und Ihre Einstellungen ändern. Ich hole mir ein bisschen, wenn ich zu den Einstellungen gehe . Dort ist es. Und hier unten gibt es eine Analogie Mt, klicken Sie darauf. Und beim großen Schubs, bei dem die Schicht auf acht gedrückt wird, könnten Sie entscheiden, dass Ihr kleiner Schubs acht und Ihr großer Schubs 16 ist. warst du wahrscheinlich nicht. Aber du könntest darauf zurückkommen. Dies war lange Zeit die Standardeinstellung in Figma und Sie verwenden möglicherweise nicht das Acht-Punkte-Raster mit dem richtigen Punktabstand Also geh zurück zu Zehn. Ich lasse meins nachts stehen, damit ich mich um die Verwaltung kümmern kann. Nun, acht ist auch gut, vielleicht vier, weil die Hälfte von acht, und manchmal muss man das selbst machen , aber jetzt weiß man, dass es da ist. Schließlich denke ich, dass wir das bereits behandelt haben. In diesen Dingen kann man rechnen. Wenn Sie also durch den umgekehrten Schrägstrich, den Schrägstrich 2/2, geteilt werden müssen, können Sie plus, sagen wir U1 plus acht Pixel hinzufügen sagen wir U1 plus acht Offensichtlich wusstest du es minus acht Pixel. Du kannst Times verwenden, das ist der kleine Hash, nein, nein 50. Los geht's. Jedes dieser Felder, 100%. Sie möchten, dass es halb geteilt durch zwei ist. Okay, das sind all die coolen, verrückten Dinge, die du mit Feldern in Figma machen kannst. Wenn du die Wörter Cool und Crazy hinzufügst , erscheint alles aufregender Du magst mich wahrscheinlich, freust dich auf diese Tipps und Tricks und Figma In Ordnung, lassen Sie uns auf ein paar mehr davon eingehen. 14. Frame-Tricks: Tipps und Tricks, um mit Figma-Frames effektiv zu arbeiten: In Ordnung, lernen wir alle Tipps und Tricks zur Arbeit mit Frames, Shortcuts und dergleichen Okay, lassen Sie uns zunächst auf dieses Bild klicken und ein Tastenkürzel verwenden , das Sie mit Shift to verwenden, um es irgendwie zu vergrößern Wenn Sie zum nächsten Bild wechseln möchten, tippen Sie einfach auf Ihrer Tastatur hinein und schauen Sie sich das an. Es ist so, als würde ich alle verfügbaren Frames durchgehen alle verfügbaren Frames Nett. Rein, geht irgendwie rückwärts, vorwärts, einfach rückwärts reintippen, einschalten Super nützlich. Manche Leute bevorzugen die Home- und End-Taste auf Ihrer Tastatur. Schau auf deine Tastatur. Hast du Home and End? Manche Tastaturen tun dies nicht, oder Sie müssen einige spezielle Funktionstasten gedrückt halten Warum ist es besser oder schlechter? Es macht genau den gleichen Job, der eine zoomt und der andere nicht Verwenden wir also end, um zum nächsten Frame zu gelangen. Kannst du sehen, dass es nicht in die Mitte des Bildschirms gezoomt hat. Das Gleiche gilt für den nächsten , Ende, nächsten. Es zoomt nicht, wohingegen die Taste like das nächste Bild so schnell und so groß wie möglich füllt, wohingegen Ende die gleiche Zoomstufe beibehält Okay? Entscheide, welches dir am besten gefallen hat. Entweder am Ende oder am Ende. Home geht rückwärts und es zoomt einfach nicht. Welches verwende ich? Ich verwende hauptsächlich in, denn wenn ich mein MacBook Pro benutze, ist es wirklich schwierig, in Indien nach Hause zu kommen. Aber wenn es hier angeschlossen ist, wenn ich meine Tutorials mit einer schicken Tastatur mache, klick und klack, klack id2 Ich habe mein Zuhause in Inky, also kann ich es hier machen. Der süße Trick ist, dass ich zu diesem gehen möchte. Android doppelklickt einfach auf das Symbol und es bewegt sich einfach dorthin, zoomt über einen ICC Nein, du siehst es irgendwie in der Mitte des Bildschirms, wenn ich zu den Messungen zurückkehre. Nett, ein weiterer kleiner Trick für Rahmen ist momentan, ich habe die Größe dieses Rahmens herausgezogen und einfach alles hineingeworfen, was Sie tun können, ist zu sagen Ihre Maße einfach zusammengedrückt wurden, um die Dinge, die darin sind, zu wickeln um die Dinge, die dass Ihre Maße einfach zusammengedrückt wurden, um die Dinge, die darin sind, zu wickeln . Das kann praktisch sein, wenn Sie an einer Zeichnung innerhalb eines Rahmens arbeiten oder wenn Sie einige Punkte gelöscht haben irgendwie nett umwickeln Du kannst es auf diese Weise zusammendrücken. Es gibt eine Abkürzung, du hältst sie gedrückt. Du kannst es dort sehen. Halten Sie eine ältere Tastenkombination gedrückt und drücken Sie dann. würde ich mich nie erinnern . Klicken Sie einfach auf die Schaltfläche. Okay, der nächste ist praktisch für die Verwendung von Frames. Ich werde ein Bild reinbringen, nur weil es hoffentlich diesen Shortcut Bidder ausdrückt Ich bin Befehlstaste K, Strg-Umschalttaste. Auf einem PC haben Ihre Trainingsdateien einen Ordner mit dem Namen Bilder , holen Sie sich Bild eins. Und ich halte einfach die Umschalttaste gedrückt und ziehe eine Größe heraus. Und nehmen wir an, wir werden etwas horizontales Scrollen durchführen, was wir in diesem Kurs tun werden Wir brauchen also Dinge, die uns gefallen, vom Seitenrand entfernt werden. Was passiert, wenn wir diese am Ende duplizieren? Kannst du sehen, dass es tatsächlich entkommen ist? Ich wollte weg von der Seite sein , aber hier versteckt sein. Und das kann schwierig sein. Die Dinge fangen einfach an, außerhalb des Frames zu springen. Wie repariere ich das? Halten Sie beim Ziehen die Leertaste gedrückt. Also werde ich das kopieren und einfügen. Ich habe zwei davon. Das heißt, wenn ich anfange, rüber zu ziehen, will es herausspringen Du kannst es irgendwie über den, in den Schichten sehen . Ich kann es sehen. Es wird sich hinüberbewegen. Und du kannst es hier auf meiner Zeichenfläche sehen Aber wenn du die Leertaste gedrückt hältst während du rüberziehst, schau, du kannst hier überall hingehen und es ist immer noch draußen. Da haben wir's. Gleiche gilt für Dinge wie, wenn ich möchte, dass ein Bild so aussieht, als wäre es unten irgendwie gefrostet und es ist fast so, als ob es fast vom Bildschirm verschwindet, wenn man die Und du, so wie ich, wolltest nur die Leertaste gedrückt halten. Schau, es kann überall sein, wo du willst. Es kann bis hier drüben sein. Es ist immer noch in diesem Frame oder der Leertaste Der letzte, er steht hier auf meiner Liste. Ich werde es dir zeigen, weil das der Kurs für Fortgeschrittene ist. Ich weiß aber nicht, warum es hier ist. Ich verwende meine Tastenkombination Command P, okay, für meine schnellen Aktionen. Und ich tippe die Sache ein , die ich habe, weil ich nie weiß, was es ist. Sie zeigen Rahmenkonturen. Wenn du gehst, kannst du den klitzekleinen Rahmen sehen? Und dann schau. Da haben wir's. Den Rahmen anzeigen Outlines Command P Nochmals, ich kann einfach auf die Eingabetaste klicken Da hast du's. Dadurch werden die Rahmenkonturen aktiviert. Es ist da. Irgendjemand wird es irgendwo brauchen. Ich habe es nie gebraucht. Lass es mich in den Kommentaren wissen. Wenn du diese Person bist. Es ist ein Frame, der nicht so hilfreich ist. Nur allgemeine Konturen sind eine ziemlich gute Abkürzung. Es ist nicht Teil der Frames, aber hey, wir sind hier. Befehl eins, drücken Sie nicht Befehl eins, sondern drücken Sie eins, um alles zu sehen. Dann können Sie die Umschalttaste gedrückt halten und 0 für Konturen drücken. Halten Sie also die Umschalttaste gedrückt und drücken Sie 0. Auf Mac und PC ist es genauso. Sie können umschalten, um die Konturen von Dingen zu sehen, Illustrator-Benutzer eigentlich sehr praktisch ist, welches Allel Sie sind Command Y, welches Allel Sie sind Command Y, das auch hier in Illustrator funktioniert Illustrator Sie können also eine Person für Schicht 0 oder Befehl Y sein, spielt keine Rolle. Das zeigt die Konturen der Opfer. Ordnung, das ist alles, was ich für die Bewegung für den süßen Rahmen habe , ein paar Tricks und Tipps, um mit dem Kurs weiterzukommen Wenn Sie einen Trick oder Tipp für Rahmen haben, Aluminium, die Kommentare Ich bin immer auf der Suche nach mehr, um mein Repertoire zu erweitern und für zukünftige Kurse hinzuzufügen . Und wenn du zuschaust, sieh dir die Kommentare an, schau, ob da noch andere gute drin sind. Aber lassen Sie uns zunächst mit dem nächsten Video fortfahren. 15. Zoomtechniken für Fortgeschrittene für Präzisionsarbeit in Figma: In Ordnung, lass uns lernen, wie man ein- und auszoomt. Woran sie festhalten. Es ist Advanced. Ich mache Luftzitate, Fortgeschrittene, Tipps und Tricks zum Zoomen , Dinge, die Sie vielleicht nicht wissen Schnallen Sie sich an und erleben Sie Spannung. Jetzt wissen wir alle, wenn Sie die Befehlstaste gedrückt halten und auf einem PC Plus oder Strg Plus drücken, dieselbe Taste vergrößern, aber Minus, um herauszuzoomen. Das gilt für alle Adobe-Produkte. Was mir bis vor kurzem nicht bewusst war, da Sie einfach Plus und Minus auf Ihrer Tastatur drücken können und es wird ein- und ausgezoomt Du gehst. Ich bin quasi institutionalisiert mit Adobe-Kurzbefehlen, aber nur Plus oder Minus funktioniert Ein aufregenderer Tipp ist, ich habe das hier unten ausgewählt und zoome mit derselben süßen Tastenkombination hinein und zoomt in die Mitte meines Bildschirms auf das Objekt, das ich ausgewählt habe Sie können das als Ihre Präferenz ändern, okay, unter Ihren kleinen Figma-Optionen gehen wir zu den Einstellungen Und das ist standardmäßig ausgeschaltet. Ich mag es auf Werken wie Adobe Illustrator. Wir sind, du hast etwas ausgewählt und du drückst auf Plus. Es zoomt auf das Objekt , das Sie ausgewählt haben . Das könntest du hassen. Du kannst es also ausschalten, eins verschieben, um alles zu sehen, dann weiter an diesem Ding hier arbeiten. Und dann plus, plus, plus, plus, und dann zoomt man drauf, ist das fortgeschrittenes Zoomen? Vielleicht nicht. Der letzte kleine Tipp und Trick ist für Leute, die Mäuse verwenden, sie haben ein Scrollrad. Ich mache das die ganze Zeit. Wenn ich eine Maus mit einem Scrollrad habe, was meistens der Fall ist, wenn ich an einen großen Bildschirm angeschlossen bin einen großen Bildschirm angeschlossen geht das Scrollrad hier standardmäßig auf und ab, wenn Sie die Umschalttaste gedrückt halten, geht es nach links und rechts Wenn Sie auf einem Mac die Befehlstaste gedrückt halten, auf einem PC die Steuerung gedrückt halten, geht es rein und aus. Aber alles Scrollrad. Wenn Sie kein Scrollrad haben, funktioniert das nicht . Da hast du's. Scrollen Sie nach oben und unten, schalten Sie die Umschalttaste nach links und rechts, drücken Sie die Befehlstaste oder Strg, um die Ansicht zu vergrößern oder zu verkleinern. Nett. In Ordnung, das war's für fortgeschrittene Luftzitate, Zooming-Techniken In Ordnung, kommen wir zum nächsten Video. 16. Helles oder Dunkles vs. Systemthema: Welches soll in Figma verwendet werden?: Hallo zusammen. Sie fragen sich vielleicht, warum sein Hintergrund UY oder dunkel und launisch und cool ist, wenn Ihrer so ist, haben Sie den Lichtmodus aktiviert Das ist normalerweise die Standardeinstellung. Lassen Sie mich Ihnen zeigen, wie Sie zwischen den beiden umschalten und einige der Dinge, die mit den Standardeinstellungen passieren, wenn Sie sie ändern In Ordnung, also wie habe ich meinen dunklen und stimmungsvollen Hintergrund bekommen? Wir ändern es in den Lichtthemenbefehl P, Control P. Und sagen wir einfach, Sie verwenden den Lichtmodus. Hey, alles ist leicht. Der Hintergrund ändert sich nicht. Sobald du es geändert hast. Wenn ich ein neues Dokument erstelle, verwendet es all das leichte Zeug. Kannst du Live UI sehen, aber auch eine helle Hintergrundfarbe. Die Hintergrundfarbe wird nicht aktualisiert. Es ist so, als ob man einmal sitzt und es ist fertig. Wenn ich also diesen Befehl ändere P and go dark mood, können Sie die Hintergrundfarben, den Status und den Lichtmodus sehen . Du kannst dich selbst ändern, richtig, wenn nichts ausgewählt Wähle einfach eine dunkle Farbe. Sobald Sie es jedoch geändert haben, wird sich jedes neue Dokument daran erinnern und im Dunkelmodus sein und einen dunklen Hintergrund haben. Und warum gibt es außer dem Cool-Faktor noch einen Hellmodus und einen Dunkelmodus, der Doc-Modus ist übrigens cool, er ist voll, wenn Sie in einem schlecht beleuchteten Raum oder es Nacht ist und Sie im Dunkeln arbeiten, die Benutzeroberfläche und der Lichtmodus Das Licht ist eigentlich ziemlich hell, besonders wenn der Hintergrund während der Fahrt mitkommt. Es ist eigentlich ein ziemlich helles Licht im Raum. Nicht dass es deinen Augen weh tut, weil sich deine Augen anpassen, aber es ist vielleicht eine Ablenkung von der Arbeit Für mich mache ich mir in Figma keine Sorgen, ich habe den Dunkelmodus gewählt, weil er cool aussieht Aber wenn ich so etwas wie Premiere Pro , Photoshop und Lightroom verwende, wenn ich viel Farbkorrektur und so mache , dann möchte ich mich nicht von der Benutzeroberfläche ablenken lassen Sie können es dazu bringen, alles zu verfolgen, was Ihr Computer tut. Also wie bei meinem Mac gibt es hier eine Option, mit der Sie ihn auf Auto setzen können. Nachts wird es also dunkel und am Tag fängt es an hell zu werden. Ich habe einfach falsch gemacht, dass die Benutzeroberfläche meines MSc leicht ist. Aber du kannst es dazu bringen, dem zu folgen. Du kannst es vortäuschen, es irgendwo finden, wo es ist. Drücken Sie also das F, gehen Sie zu Einstellungen, gehen Sie zum Thema und Sie können auf Systemdesign klicken und es wird aktualisiert, je nachdem, was Ihr Computer sagt. Ich weiß nicht, ob das auf einem PC funktioniert. Bleib an einem PC genau hier vor mir. Warte, tauche ein. Ich wusste es. Ich wusste, wenn ich so schnell anfangen würde, würde das so etwas wie Updates im Gange sein. Bitte warte. In Ordnung, warten wir bitte. In Ordnung, so wie es vorbei ist. Und ja, Sie können System Theme auch auf einem PC ausführen. War es das dann wert? Nein, war es nicht. Wie dem auch sei, ich habe keinen hasserfüllten PC. Ich bin etwas spät dran für BC. Aber wenn es Monas sind, sind sie genauso gut für den halben Preis genug Gehen wir zum nächsten Video über. 17. Projekt 02 für den Kurs: Beschränkungen der Veranstaltungskarte: Hallo. Hey, es ist Zeit für ein weiteres Klassenprojekt. Ich werde dich bitten, eine Event-Karte mit einem Datumsfeld zu machen , das an der Ecke klebt. Lass es mich dir zeigen. Also wollen wir, dass du daraus ein Rechteck machst und einen Rahmen setzt und ein kleines Datumsfeld in die Ecke legst , das in der Ecke klebt Okay. Es bringt sogar das zum Laufen. Es sind Fähigkeiten, die wir bereits im Kurs gelernt haben . Aber ich wollte nur Dinge tun, von denen ich möchte, dass du sie übst weil du es manchmal einfach einmal machst und es dir irgendwie an den Kopf fällt Aber wir werden es auch verwenden, um in diesem Kurs mit dem Aufbau von Netzen fortzufahren in diesem Kurs mit dem Aufbau von Netzen Wir schauen uns also nicht nur Funktionen an, wir machen tatsächlich etwas, machen so etwas. Die abgerundeten Ecken sind optional. Wisst ihr, was wir irgendwann erreichen werden, ist, dass wir etwas machen werden, das in den kommenden Videos nur ein bisschen responsiver ist . Also müssen wir den Kern machen und ein bisschen üben. Wenn Sie dazu nicht in der Lage sind, machen Sie sich keine Sorgen. Im nächsten Video mache ich ein fertiges Video. Wir machen es eigentlich nur für den Fall, dass du dich verirrst. Was du nur mit meiner Methode vergleichen wolltest , die einzige andere Sache, an die du dich bei diesem Klassenprojekt erinnern solltest, ist sicherzustellen, dass es sich um eine Komponente handelt, von der wir hier Instanzen haben, die wir verwenden, und wenn wir unsere Hauptkomponente vom Flugwerk fernhalten. Sonst noch etwas? Ergebnisse, die gleichen wie beim letzten Machen Sie ein Video, wenn Sie können, wenn nicht, einen Screenshot. Und ich möchte nur, dass du den Rand ziehst, um zu zeigen, dass er responsiv ist , und den Link zu deinem Video hochlädst. Oft kannst du das Video selbst hochladen. Also habe es auf etwas wie Vimeo oder YouTube. Das sind die besten Orte. Und dann verlinke es einfach und poste den Link dann im Projektbereich Assignments Slash In Ordnung, viel SPASS beim Nachmachen. Wenn du nicht weiterkommst. Wir sehen uns im nächsten Video. 18. Projekt 02 – Beschränkungen der Veranstaltungskarte – abgeschlossen: Ordnung, das ist die abgeschlossene Version des Klassenprojekts Also für den Fall, dass Sie nicht weiterkommen und sich nicht sicher waren, wie Sie das machen sollen. Du kannst dir das ansehen. Ich zeige Ihnen, wie Sie die Dinge, die in der oberen rechten Ecke hängen, ganz schnell erledigen können Das ist ziemlich einfach. Und dann mache ich weiter und mache eigentlich einfach den Rest. wie ich es auf professionellem Niveau machen würde, zum Beispiel sicherstellen, dass es Bestandteil ist. Ich werde dieses Ding in ein automatisches Layout umwandeln weil ich beibehalten werde, dass ich es wirklich mit Absicht gemacht habe. Ich habe es gemacht und später entdeckt, wie großartig es war. Aber das machen wir, stellen sicher, dass es wirklich fließt und an der Ecke bleibt. Ich zeige dir, wie du es rausschiebst, sodass es 16 mal 16 ist. Hier gibt es ein paar kleine Tipps und Tricks, aber du musst dir das Video nicht ansehen , weil du siehst, dass es ein bisschen lang ist. Aber für diejenigen, die wir mitfahren wollen, könnte es interessant sein, zumindest um zu vergleichen, wie Sie es gemacht haben, wie, warum. Manchmal ist es immer schön , das zu sehen. In Ordnung, springen wir rein. In Ordnung, Leute, ich habe hier darüber nachgedacht und auf den Frame-Namen geklickt. Ich schiebe eins, schiebe zwei, um die Ansicht zu vergrößern. Wenn du wie ich am Anfang bist, warst du dir als Kommando nicht sicher und bist dann zur ersten Schicht übergegangen. Du meinst, ich habe mich geirrt. Soweit ich mich erinnere, ist es so, als ob ich mit der Schicht eins bis drei meine Ansicht ändere, wohingegen ich Ihnen befehle, zu dem Sie die Tabulatoren wechseln sollen. Hilft es? Sowieso? Lass es uns machen Einfach ganz schnell, die Grundlagen, damit wir, du sie haben und dann werde ich mein ganzes durchgehen und entwerfen , das Dinge codiert oder am Anfang. Und du kannst dir gerne ein paar anschauen, wenn du die Erfahrung brauchst. Willst du sehen, wie ich es gemacht habe? Nun, vielleicht ist es irgendwo hängen geblieben. Lassen Sie uns also die Grundlagen machen. Lass uns gehen, wenn es wichtig ist, weil es besser ist als ein Rechteck. Weitere Optionen für einen Rahmen, ich werde eine Größe angeben. Ich gebe ihm eine Farbe, damit du siehst, was ich mache. Wählen Sie eine beliebige Farbe, grün, grünlich, türkis. Wenn du hineinkommst, wird es ein weiterer Rahmen sein. Also drücke ich noch einmal die F-Taste und wenn sie ausgewählt ist und ich irgendwie drüber ziehe, geht es schließlich hinein. Sie können Frame eins sehen, was kein guter Name dafür ist Es ist cool. Dieses eine Karte mit Bindestrich Event Dann wird dieser mein Staat sein. Okay, ich gebe dem eine weiße Farbe, nur damit du es sehen kannst. Ich will nur Datum sagen. Mein kleiner Frame Guy ist auf die linke Note nach rechts beschränkt Nach oben. Ja. Wenn ich das jetzt auswähle, wackelt es hin und her, kommt von alleine. Fantastisch. In Ordnung, entlassen. Sofern Sie nicht alles sehen möchten, gibt es einige Tipps und Tricks. Aber wie du an der Zeit sehen kannst, werde ich mich irgendwie durcharbeiten, ich würde rumhängen, wenn ich du wäre, aber das musst du nicht In Ordnung, lassen Sie uns etwas genauer darauf eingehen. Das muss eine Komponente sein , weil ich es viele Male benutzen werde. Also denk an die süße Abkürzung. Sie erinnern sich an die Befehlsoption K, die sich direkt auf einer Mac-Steuertaste auf einem PC Er ist jetzt unsere Hauptkomponente. Und die Hauptkomponenten sollten da drüben hängen. Und wir sollten hier Instanzen haben. Lass uns einfach ein paar trinken , weil es interessant ist. Aber wir müssen das meiste mit der Bearbeitung in der Hauptkomponente tun , weil wir ein paar Dinge durchgehen wollten, wir haben wollen, wenn wir haben wollen, ich klicke gedrückt und ziehe das kleine Symbol dort nach rechts, halte die Umschalttaste gedrückt und es springt nach oben und acht Wie viel wollen wir? 16, 24, 24, verwenden wir 24. Achte darauf, dass es ein Kringel ist. Ich habe die kleinen Optionen hier getroffen, die kleinen Punkte getroffen, weil Kringel besser aussehen als nur abgerundete Ecken Ich mache dieses Ding so, dass sich die Ecke, die man Ecken nennt, glatt bewegt. Ich zoome rein. Wir werden mein Scrollrad benutzen. Es hält die Befehlstaste oder die Strg-Taste auf einem PC gedrückt und zoomt hinein und heraus. in die falsche Richtung und du gehst, kannst du sehen, wie sich die Kanten dann verändern? Magst du es? Interessiert es dich überhaupt? Und du sagst, ja, es ist irgendwie dasselbe dafür. Also los geht's, deine Acht wird gut mit dem Glätten der Ecken sein In Ordnung, Zecken, die da drin sind. Also schnappe ich mir mein Type-Werkzeug und wenn du etwas hineinklickst, kommt es oft rein Kannst du es sehen, wenn in diesem DataFrame irgendwie funktioniert. Ich sage also, was die Größe 17 angeht, es bedeutet, diese kleine Abkürzung zu verwenden, wenn du darauf klickst und nach oben oder unten Okay, was willst du meins gegen 10:10 ist ziemlich klein für eine App, aber das ist eher ein Vorschlag und kein vollständiges wie die Barrierefreiheit und ein wie die Barrierefreiheit und Datum werden in der tatsächlichen Das ist eine kleine Karte, die versucht, zu viele Informationen hineinzustopfen Ich habe zwei Textteile. Hier heißt es Mama, Großbuchstaben Mask, wähle alles aus und drücke Command B, damit es fett wird. Control B auf einem PC wird sofort fett, was cool ist. Ich werde Escape drücken , um da rauszukommen. Halten Sie die Umschalttaste gedrückt und klicken Sie auf beide. Ich halte die Wahltaste auf meinem Mac gedrückt , die Alt-Taste auf einem PC und drücke H, um sie horizontal an derselben Taste auszurichten, da V sie vertikal ausrichtet. Wir nehmen einfach die Spiele. Ich kann mich nicht erinnern , was diese Abkürzungen sind weil sie keinen Sinn ergeben, aber diese ist sinnvoll Suchen Sie auf einem PZ H nach der Option- oder Alt-Taste für die horizontale Ausrichtung. Okay, also ich werde die machen. Und was ich gerne tun würde, ist, dass meins in meinem Rahmen gelandet ist, was gut ist. Du kannst es rausziehen, wenn du eine Gruppe brauchst , und es auf diese Weise rüber ziehen. Ich hätte meins gerne drinnen. Ziehen Sie also ULs in diesen DataFrame. Denn was ich tun will, ist ich will diesen Rahmen im Moment habe ich eine feste oder ist es Sie sind eine feste Breite und Höhe 32. 32, tolle Größe, aber ich möchte, dass es erweitert wird, wenn es länger sind. Und einige der Ziffern werde ich hier perfekt hineinpassen. Also wollte ich das in ein automatisches Layout einbauen, vielleicht Schichttag, damit es perfekt in der Mitte ist. Kannst du sehen, dass es standardmäßig Inhalte umarmt wenn es keine feste Breite hat, okay Du kannst sagen, lass es einfach alles von innen umarmen , damit ich weiß, was kurz ist, wenn später jemand geht . Es ist wahrscheinlich genauso lang. Ich wollte, ich wollte expandieren und schrumpfen. Und es gibt mir hier ein bisschen Kontrolle, mochte es nicht, sagen wir, ich kann mit diesem Abstand spielen, wenn ich will Die Polsterung sorgt für ein bisschen mehr Reaktionsfähigkeit. Also lass uns Schicht eins gehen. Es ist das, was dort schön erscheint. Ich möchte, dass die Linien etwas besser vom Rand entfernt sind. Plus, plus, plus. Ich lösche unterwegs. Ich möchte, dass meins irgendwie in diese obere Ecke hier oben passt. Aber ich will, dass es so ist, ich wollte minus wie viel? Nutzen wir unser kleines Rastersystem. Wie ich die beiden irgendwie anders sehe, was die Abstände angeht, was denken wir? 12 16er bis 16? 16 fühlt sich wie ein guter Abstand zu den Rändern an. Also sage ich, du wirst -16 sein, um rüber zu gehen, und dann plus 16 runter Und ich weiß, dass es perfekt ist, betrachte es als perfekt und hoffentlich reagiert es immer noch. Das bedeutet, sich für die richtige Seite zu entscheiden, die Einschränkungen perfekt einzurichten. Vielleicht die Einschränkungen bei fertig mit einem Elternteil, es ist mit einem Kind auf der Innenseite gemacht , das sich innerhalb eines Frames befindet? Ja. Aber arbeite an diesem Kerl. Schau, du hast Einschränkungen, oben und rechts. Macht Sinn. Und jetzt das Schöne, Schicht eins ist, dass ich die auf einem kleineren Gerät haben kann , in voller Breite, aber auf diesen größeren ist mein Plan, zwei davon auf einem wirklich großen, breiten Telefon zu stapeln und Raster wie dieses zu haben D. Das wird auch für unsere Desktop-Ansicht funktionieren. Aber eines der Probleme hier ist die gewisse Konsistenz mit den Abständen, die wir durchgehen können und so, du als ob es ein Gemälde wie du ist, ich möchte, dass es was Plus acht, plus 16, okay? Und das kannst du für alles tun. Aber ein Rastersystem wird uns helfen, das viel schneller zu machen und es uns ermöglichen, über viele Dinge hinweg ein bisschen konsistenter zu sein , anstatt es einfach zu ziehen und zu versuchen, nicht zu vergessen, 16 statt 17 zu verwenden Sorry, das ist der Segway zum nächsten Video, weshalb wir in diesem Abschnitt namens Grids Ordnung, jetzt, du hättest es vielleicht anders gemacht . Das ist okay. Es ist egal, solange es irgendwie in der Ecke steckt, okay Und Sie könnten es entwerfen, aber in Bezug auf das Aussehen anders. Sie könnten es dann vielleicht nicht verwenden, dann Autolayout, war es notwendig? Wahrscheinlich nicht. Ich hatte das Gefühl, dass wir es sowieso brauchten. Warum könnte es gut sein? Eigentlich könnte das gut sein. Später könnten wir es auf einer Desktop-Version verwenden und wir könnten es auf diese Weise verwenden. Schau dir das an. Ich kann die Richtung des automatischen Layouts in einer Instanz nicht ändern Richtung des automatischen Layouts in einer Instanz Okay, ich muss es hier oben machen. Du hauptsächlich und es ist ein, du kannst diesen Weg gehen. Schau dir das an oder das ist, ich hätte damit leben sollen. Das ist ein sehr guter Anwendungsfall für Autolayout. Geh du, lass uns so tun, als hätte ich das mit Absicht getan. Okay, das ist das Ende des Videos. Ich hoffe, Sie haben einige Tipps mitgenommen oder Ihr Wissen bestätigt oder Sie haben herausgefunden, wie Sie es besser machen Lass es mich in den Kommentaren wissen. Wenn du es anders gemacht hättest. Wenn du dir dieses Video ansiehst, wirf einen Blick in die Kommentare. Du könntest ein genialer Weg sein, an den Dan nicht gedacht hat. In Ordnung, das ist es Ich werde aufhören, über mich und die dritte Person zu sprechen . Weiter geht's mit dem nächsten Video. 19. Grid v Constraints v Autolayout in Figma: Welche und wann verwendest?: Hallo, hey, bevor wir uns eingehender mit Rastern befassen, lassen Sie uns über den Unterschied zwischen Rastern und Constraints und Autolayouts sprechen Rastern und Constraints und Autolayouts weil sie verwirrend sein können darum geht, wann jedes von ihnen verwendet werden soll ? Es ist verwirrend, weil sie alle einen ähnlichen Zweck verfolgen. Es geht um Reaktionsfähigkeit. Und wenn ich ehrlich bin, habe ich dieses Video schon etwa zehnmal aufgenommen und versucht, es kurz zu machen, ohne dass ich 15 Minuten lang rumgewaffelt Es soll eine Zusammenfassung sein, Dan, komm schon, Zusammenfassung. Fangen wir mit Autolayouts an. Autolayout Wir wissen bereits, dass wir vier verschiedene Dinge aufnehmen können und wir können für ein automatisches Layout „Shift a“ sagen Und es gibt uns eine gewisse Reaktionsfähigkeit. Und es hat mehr mit den internen Inhalten in unserem Autolayout zu tun als mit Einschränkungen und Rastern, als mit Einschränkungen und die auf die Rahmengröße reagieren Okay, wenn ich also eine andere Desktop-Größe oder ein anderes Telefonmodell habe , ist die Reaktionsfähigkeit , die dort entsteht Raster und Einschränkungen, automatische Layouts und mehr, die damit zu tun haben, was innerhalb meiner kleinen Gruppe hier reagiert Also kann ich reingehen und sagen, dass es tatsächlich so ist, anstatt das Konto auszusuchen, Sie sehen, wie es wirklich fließt Es reagiert nicht auf den äußeren Frame, sondern nur auf die inneren Teile. Ich kann dich packen und gehen, du gehst. Und Reaktionsfähigkeit. Hervorragend. Okay, aber die Einschränkungen, die wir gemacht haben, wenn ich das auswähle und sage, eigentlich möchte ich, dass du Einschränkungen des Aufzugs bist und, tut mir leid, das ganz oben anmerke. Das heißt, wenn ich die Größe dieses Desktops ändere, okay, vielleicht für eine Tablet-Ansicht, sehen Sie, wie Sie mitfahren Es ist also responsiv, aber es hat mehr mit der Bildgröße zu tun. Sie verwenden diese beiden also oft zusammen. Ich kann die Größe ändern und ich kann hier reingehen und sagen, eigentlich loggst du dich nicht ab, eigentlich loggst du dich nicht ab, ich möchte mich abmelden und das automatische Layout passt Also Grids, warum haben wir sie? Sie sind visuell nützlich. Sie helfen Ihnen nur dabei, konsistente Ränder und konsistente Abstände zwischen den Seiten auf mehreren Seiten zu erzielen. Sie haben einige andere nützliche Dinge. Habe ich das? Sie werden sehen, wie es darauf einrastet, was großartig ist. Ich kann konsistente Abstände zwischen ihnen allen auf verschiedenen Seiten haben. Ich habe bereits gesagt, dass es dort, wo es sehr nützlich wird , tatsächlich an Einschränkungen anknüpft. Hier drüben sagten wir, du hast dich auf rechts und oben beschränkt Aber wir können mit einem Raster sagen, ich möchte mich auf die linke und rechte Seite beschränken , aber es macht nicht den gesamten Frame, es macht eigentlich nur das Raster selbst Warum ist das cool? Ist das so, wenn Sie eine andere Größe haben, haben wir eine andere Seitengröße. Okay. Nehmen wir an, es ist eine kleinere Seite. Schau, was passiert. Schau dir das an. Raster, die mit Einschränkungen verknüpft sind, sorgen also für einen gleichmäßigeren Rifffluss und ein responsiveres Design Ist das wie, diese drei verschiedenen Dinge in ihre eigene kleine Schachtel zu legen ? Und kannst du sehen, wie sie sich gegenseitig Komplimente machen ? Hoffentlich. Wann benutzt du jeden von ihnen? Also Autolayouts, ich habe ungefähr drei oder vier Ebenen Und was dein anfängliches heruntergekommenes Design angeht, wir haben keine Ahnung, was du tust Ja. Du bringst einfach die Dinge auf die Seite, bringst alles ins Lot Du brauchst keins davon. Sie benötigen kein Autolayout oder Einschränkungen sind Raster, sofern Aber in dieser Phase gibt es oft so viel Wandel und Fluss, dass man die Dinge einfach herumschleppt und versucht, die Dinge in Ordnung zu bringen Konzeptphase, keines von diesen oder jenen nützlich. Wann werden sie nützlich? Zu verschiedenen Zeiten finde ich das Grid nützlich. Wenn Sie diese Konzeptphase abgeschlossen haben, sollten Sie grundsätzlich Raster verwenden, da Sie damit über Ihre verschiedenen Designs hinweg konsistent bleiben können , und es ist eines dieser Dinge , die leicht zu erreichen sind, richtig? Wissen Sie, welche Rastergröße Sie verwenden werden, wie viele Spalten? Machen wir das auf allen Seiten. Fantastisch. Das automatische Layout ist eine weitere Option, die Sie zu Beginn Ihres Designs verwenden können. Weil du, du, du immer noch Dinge anpassen willst. Du bewegst Dinge und bewegst sie. Sie hatten also immer noch eine vernünftige Konzeptphase, aber es ist viel einfacher, ein automatisches Layout zu haben diese Dinge umzuleiten, als sie manuell auszuschalten und zu löschen, den perfekten Abstand zwischen ihnen allen zu erreichen Oft verwende ich Autolayouts zu Beginn meines Designprozesses, nach dem Konzept, vielleicht nach einer Genehmigung durch den Kunden, oder vielleicht bin ich einfach zufrieden mit meiner Aussage, oder vielleicht bin ich einfach zufrieden mit Wire-Frame wird High-Fidelity und ich möchte Also rastet das frühe Autolayout schon früh auf, wo ich mir Gedanken über Einschränkungen mache, ist später, wenn ich verschiedene Größen ausarbeiten muss Oft arbeite ich einfach an einer Telefongröße, egal mit welchen typischen generischen Größen ich anfange, das Gleiche gilt Aber wenn ich mich dem Ende meines Projekts nähere wo ich tatsächlich herausfinden muss , was ich für das Tablet machen werde? Was mache ich für einen großen Bildschirm, für einen kleinen Bildschirm, für ein Pro Max-Handy oder ein winziges kleines Android-Handy , dann werden Einschränkungen viel nützlicher. Also das ist für mich, habe ich verschiedene Größen? Aber auch, wenn du zu anderen Leuten gehst. Sobald Sie sie also jemand anderem geben müssen, sollten Sie wahrscheinlich entscheiden, sollten Sie wahrscheinlich entscheiden wie diese Dinge Einschränkungen haben, also genau so, wie Sie es sich vorgestellt haben. Wow, das war ein großes Waffelchaos, aber das war das große Waffelchaos, das ich mir einfallen lassen konnte , in der Hoffnung, dass es ein bisschen hilft Meine Abschiedsworte sind, dass Autolayouts, Einschränkungen und Raster überhaupt nicht verwendet werden müssen, besonders am Anfang, wo sie nützlich werden, besonders am Anfang, wo sie nützlich werden wenn Sie mehr als eine Seite haben, mehrere Seiten, und Sie wollen Konsistenz, weil Sie ein einigermaßen etabliertes Design haben, und Sie wollen Konsistenz, weil Sie ein einigermaßen etabliertes Design haben und sie sind absolut wichtig, wenn Sie mit anderen Teammitgliedern zusammenarbeiten mit Dinge für dich selbst, die du später in zukünftigen Projekten verwenden kannst. Oder ich sollte wahrscheinlich damit beginnen. In Ordnung, das ist das Ende des Videos. Lass uns weitermachen, ein paar Sachen zu machen. Dan, hör auf zu reden 20. Kopiere und füge Raster ein und exportiere Rasterstile in Figma: Hallo zusammen. In diesem Video erstellen wir ein Säulenraster, nur ein großes mit Rändern an der Seite. Wir erstellen ein zweites Raster das in diesem Fall in einem Acht-Punkte-Raster ausgeführt wird, damit wir ein gutes Layout innerhalb unserer Karten erzielen können, nicht nur im übergeordneten Rahmen. Ich werde zeigen, wie man Raster von einem Frame in einen anderen kopiert und einfügt Ich zeige Ihnen, wie Sie einen Stil erstellen, diesen Stil mit ein paar Abkürzungen. Lass uns darauf eingehen. Ordnung, lassen Sie uns ein Raster erstellen, das auf das erste Telefon, den Telefonrahmen, klickt erste Telefon, den Telefonrahmen, Und ich sage Layout Grid Plus. Und ich werde die Spalten verwenden. Gehen Sie also auf das kleine Symbol dort und schalten Sie zwei Spalten um. Okay, ich werde ein einspaltiges Layout für mein kleines Telefon haben Layout für mein kleines Telefon Und ich werde einen Rand eines wirklich kleinen, engen Layouts verwenden, das 16 Pixel verwendet, als ob es ziemlich nah an den Rändern ist. Und wenn Sie viel zu haben, müssen Sie das vielleicht tun. Okay. Aber ich werde 24 verwenden, damit es an den Rändern etwas mehr Luft zum Atmen hat. Und ich habe den Luxus , weil ich nicht so viel zum Reinstopfen habe. Jetzt können Sie diese beiden verschiedenen Telefone kopieren und einfügen. Wenn Sie viele verschiedene haben, können Sie diese einfach kopieren und einfügen. In meinem Fall klicke ich auf den Rahmen. Und was Sie tun möchten, ist Ihr Layoutraster zu finden und dann in diesen zufälligen Bereich hier zu klicken. Ich weiß nicht, nicht da. Sie ermöglichen es dir einfach, Dinge auszuwählen. Das kannst du mit vielen Dingen machen. In diesen weißen Bereichen können Sie hier auswählen. Und Sie können sie kopieren und einfügen , sobald Sie sie ausgewählt haben. Okay, also ich gehe, du kopierst und ich kann auf so viele Freunde klicken, wie ich will , und einfach auf Einfügen klicken. Es gibt also nur Command C, Command V oder Control C, Control V, nur Ihr normales Kopieren und Einfügen. Das ist eine gute Möglichkeit, viele Dokumente zu vermitteln. Aber das Problem dabei ist, dass es wahrscheinlich einfach ist. Benutze einfach einen Stil. Dann machen wir das rückgängig und ich klicke zurück auf meinen ersten Punkt und ich treffe die kleinen vier Punkte dort, sagen wir, mache aus diesem Raster einen Volumenkörper. Ich füge einen hinzu. Okay? Und ich werde das 11-Kolumne nennen. Und ich könnte den Rand auch hier reinschreiben, damit ich auf einen Blick weiß, was es ist , weil ich vielleicht verschiedene Seiten haben muss, vielleicht muss ich verschiedene Ränder haben. In Ordnung, lass uns einen Stil kreieren. Wenn du einen Stil aktualisieren musst, kannst du entweder im Hintergrund auf Aus klicken , damit du alle deine Styles siehst, oder auf dem Telefon klicken, um deinen Stil dort zu sehen. Sie können den Stil ändern, sodass er nicht verbunden ist , oder Sie können ihn anpassen. Wir können es anpassen, indem wir einfach darauf klicken. Da ist es da. Und du kannst es bearbeiten, indem du auf diesen kleinen Kerl klickst. Sieh es dir an, Stile. Und es wird halbwegs so, großartig, ich kann den Namen ändern, aber ich möchte sagen, die Marge auf 24-3 ändern Du kannst tatsächlich hier darauf klicken, dieses kleine Symbol dort. Du kannst in die Tiefe gehen, deinen Rand ändern und du bekommst ein, okay, das ist das Erstellen und Bearbeiten unseres Rasters, die Abkürzung, um es mit Shift G ein- und auszuschalten . Habe ich das schon gemacht Ich bin mir nicht sicher. Schicht G. Okay. Weil es toll ist, wenn du es auslegst. Aber wenn du Sachen entwerfen willst, ist dieses große rote Ding nicht so nützlich. Die andere Sache, die Sie sicherstellen sollten, wenn Sie Ihre Raster hinzugefügt haben , ist das Festlegen der Einschränkungen Hängt davon ab, ob du deine willst, ich werde minus diese Seite abschneiden und hier drüben schnappen diese Seite abschneiden und hier drüben schnappen Gleiche gilt auch für diese, ich werde die löschen, weil sie nur Beispiele für sich selbst sind . Und ich werde sicherstellen, dass beide ausgewählt sind, nicht nur links, sondern links und rechts, damit sie, wenn sie sich anpassen, mitfahren. Sonst tun sie es nicht. Lass uns noch einen Stil machen, den wir verwenden werden. Anstelle der Spalten erstellen wir ein Raster. Wir werden es hier auf dieser Karte machen, weil wir versucht haben, die Dinge über 16 Pixel und 16 Pixel nach unten zu verschieben . Und nehmen wir an, dass ich hier unten einen Teil meiner Karte haben will Wie stelle ich sicher, dass standardmäßig ein Vielfaches von acht verwendet wird? Und das können wir mit einem Grid machen. Also klicke ich auf das eigentliche, wir könnten es mit der Instanz machen, aber wenn wir es mit der Hauptkomponente machen und sie durchläuft sie alle. Und ich kann sagen, dass ich eigentlich ein Raster auf dich legen möchte. Ich belasse es beim Grid. Es ist standardmäßig auf acht Punkte voreingestellt. Wir können es ändern, indem wir hier auf das Symbol klicken. Und es bedeutet einfach, dass ich jetzt, wenn ich Dinge mit meinem Rahmen auslege , weiß, dass er zerbrechen wird. Kannst du sehen, dass es an den verschiedenen acht Punkten anspringt? Okay, Consistency, Dan, ich liebe es. Was ich tun könnte, ist, dem Ganzen noch etwas Reaktionsfähigkeit hinzuzufügen noch etwas Reaktionsfähigkeit Nicht alles wird ein Punkt sein, weil alle Telefone und Desktops so unterschiedlich sind. Aber lassen Sie uns meine Hauptkomponente übersichtlich gestalten. Okay, ich habe nur ein bisschen vergrößert, damit ich die acht Punkte sehen kann . Es rastet nicht ein, wenn Sie die Außenseite des Rahmens machen, die Außenseite des Rahmens machen, es schnappt mit Dingen auf der Innenseite, wie dem Rahmen, ich gemacht habe und den Sie nicht sehen können, geben wir ihm eine Farbe Aber die Kanten hier, lass uns das einfach aufräumen, indem wir sagen, der Boden ist, wo ist der Punkt? Im unteren Teil werden es ebenfalls acht Punkte sein. Alles. Okay, und lassen Sie uns zu einem Stil übergehen. Also wähle ich die Außenseite aus und sage, lass uns dir einen Rasterstil erstellen. Und das ist unser Acht-Punkte-Raster. Es ist großartig. Ich style. In Ordnung, wir haben also ein paar verschiedene Stile Eine Sache, die Ihnen vielleicht aufgefallen ist und die mir auch gerade aufgefallen ist , ist, dass sich das nicht anpasst. Warum passt das Constraints an, Dan? Okay. Also werde ich es dort bis zum Rand kleben, aber ich wollte es je nach Elternrahmen tatsächlich erweitern und verkleinern. Also ich sage, wir wissen, dass Einschränkungen die Rechte aufheben. Es wird uns helfen und es wird bis zum Grund hängen bleiben. Nett. Merken Sie sich die Tastenkombination Shift G ein und aus. Okay, das nächste, was ich tun möchte, ist wenn wir die Größe für die verschiedenen ändern. Sie können sehen, dass es nicht darum geht, wie kann ich es an einem Punkt ausrasten können sehen, dass es nicht darum geht, wie kann ich es an einem Punkt ausrasten Ich kann das Raster darin sehen, aber der äußere Rahmen nicht. Ich kann hineinzoomen und nach rechts gehen. Lassen Sie uns das einfach an das Acht-Punkte-Raster anpassen. Perfekt. Ish. Fügen wir unseren dritten Satz von Rastern hinzu, der Zeilen enthält Wir haben Spalten gemacht, wir haben Raster gemacht. Schauen wir uns das Hinzufügen von Zeilen an 21. So fügst du Zeilen und Spaltenraster zu einem Layout in Figma hinzu: Hallo zusammen. In diesem Video werden wir von einer Spalte in der Mitte als sehr hilfreiches Raster zu Zeilen übergehen der Mitte als sehr hilfreiches Raster zu Zeilen Es sieht so aus, als ob wir als Waldo, wo sind Wally? Je nachdem, woher du kommst. Aber diese kleinen gestreiften Kerle sind sehr hilfreich, wenn es darum geht mithilfe unseres schönen Acht-Punkte-Rasters ein einheitliches Layout Okay, aufgepasst, ich glaube, mir fehlte die Runde mit meinem Layout, da ich es nicht ganz an den Rand der Spalte gebracht Ich werde dafür sorgen, dass dieser auf dieser Seite feststeckt . Was ich auch machen will, sind Grids, okay, gut. Ich benutze sie nicht sehr oft. Ich zeige es dir, weil es viele Leute tun. Also, was ich für diese Event-Karte hier tun werde , ist, dass ich meine, ich werde von meinem Raster nehmen. Ich habe es als Stil, aber ich kann es später verwenden und anwenden. Es wird es für den Moment ausschalten. Ich zeige dir, warum ich Reihen Bitter mag. Sie sind nicht wirklich besser als zumindest optisch weniger verwirrend für mich. Und benutze meine F-Taste für einen Frame, zeichne heraus. Es wird meine Top-Navigation sein und ich ziehe es einfach nach oben und zu den Seiten. Während ich hier bin, sage ich, mach es oben, tut mir leid, mach es links und rechts, damit es mit dem Rahmen skaliert Ich gebe ihm eine Füllfarbe. Ich gebe ihm vorerst jede alte Farbe. Und jetzt, wo es links und rechts Einschränkungen gibt, wird die Größe perfekt angepasst, aber wie hoch habe ich es gemacht Ich habe es einfach auf eine zufällige Höhe gebracht, die okay aussah. Okay. Und es waren 55. Aber ich möchte konsequent sein. Ich möchte ein Acht-Punkte-Raster verwenden. Es gibt genug Flexibilität und um die Größe zu ermitteln, möchte ich in verschiedenen Projekten geräteübergreifend konsistent sein können . Also lass uns unser Rosenlied einschalten. Ich klicke auf den äußeren Rahmen. Im Moment wird ein Stil darauf angewendet. Okay, also ich hatte irgendwie noch einen. Also werde ich sagen, lassen Sie uns das aufteilen weil ich die Spalte behalten möchte, aber ich möchte eine weitere hinzufügen, kein Raster, aber ich möchte Zeilen hinzufügen. Rosa seltsam. Nicht seltsam, aber im Moment ist das Dehnen, also habe ich fünf von ihnen auf fünf umgestellt. Okay. Es ist nah dran. Wechseln Sie zu dem Ding, das ich ausgewählt habe , und diese fünf von ihnen und es dehnt sich aus, sodass es passt. Und das funktioniert für Spalten, aber nicht so sehr für Zeilen, denn Zeilen, ich kann auf dem Bildschirm nach oben und unten scrollen, solange ich will. Es ist keine feste Größe. Also wir werden es tun, ich werde darauf klicken und ich werde diese Zeilen bearbeiten. Und ich sage, du warst nicht dehnbar, du bleibst einfach oben Und ich möchte, dass du acht groß bist und auch eine Dachrinne von acht Es ist eine Art Wiki. Sie sind da oben, du brauchst nur viel mehr davon. Wie viele noch? Gib einfach eine riesige Zahl auf. Hundert, solange es deinen gesamten Rahmen bedeckt. Du kannst es auf 200 setzen, das ist eigentlich egal, geht einfach irgendwie ins Unendliche Du kannst sehen, wie das ist. Für mich. Ich habe meine Einschränkungen für meine Spalte, links und rechts. Jetzt habe ich meine Reihen und jetzt kann ich so etwas wie das Grid verwenden, aber weniger missy Okay. Also ich kann einfach zu dir gehen und ein paar Schnappschüsse machen, damit ich sagen kann, dass 48 perfekt ist Es ist nah genug an den zufälligen 50-Leuten, die ich ausgewählt habe. Und jetzt mit diesen Gegenständen kann ich anfangen, sie auszulegen und in die Oberseite einzurasten Das Gleiche gilt für den Boden. Okay. Wenn ich entscheide, dass der untere Teil die Höhe sein muss, wird er an meinem Punktraster ausgerichtet. Was ist der Abstand zwischen ihnen und was nicht? Nehmen wir an, es sind 16 Punkte. Ich brauche die Eventkarte hat ein weißes Ding drin. Lassen Sie uns das von weißem Gay-Frame zu einer dunkleren Farbe ändern Gay-Frame zu , damit es hier unten besser sichtbar ist. Es ist kein komischer Dan, aber es heißt, kannst du sehen, ich kann, ich halte Shift gedrückt, um sicherzugehen, dass es hoch und runter geht. Ich müsste es eigentlich einfach herumschleppen. Und ich, weißt du, es sind 16 zwischen den beiden. Willst du zum Äußeren passen. Ich kann es noch einmal ziehen, um meine 24 zu bekommen. Da haben wir's. Bros sind besser als Grids. Meiner Meinung nach. Dieser steht nicht in der Schlange. Also wird es diesen Typen löschen und los geht's, du gehst 24. Nett. Denken Sie daran, das eigentliche Ding zu überprüfen und auszuwählen. Halten Sie die Wahltaste gedrückt, anämisch, OK Canopies, und bewegen Sie dann den Mauszeiger über die Komponente darüber und schauen Sie sich das an. Es ist 24. Perfekt. In Ordnung, schieb eins, um alles zu sehen Klicken wir auf diese Verschiebung zu. Und es sieht so aus, wo ist Waldo immer Wally, wo ich herkomme Streifen Sie Ihr Rot und Weiß ab. Aber das ist praktisch, wenn du Dinge anordnest, wenn du versuchst , etwas zu entwerfen, das ihnen im Weg steht Was ist die Abkürzung, um sicherzustellen, dass es verschwindet? Es ist richtig, Shift G. Das benutzt also Zeilen und Spalten. Du kannst sehen, dass mein Top nicht genug ist. Ich gehe zu dir, das sind Zeilen und Spalten in Figma, Ingrids, wenn du sie verwenden willst In Ordnung, weiter zum nächsten Video. 22. Aktualisiere Rasterstile in Figma: Alle zusammen, lasst uns über die Bearbeitung eines vorhandenen Rasterstils sprechen . Sobald wir einen Stil haben, okay, ich habe diesen Rahmen ausgewählt. Ich habe hier diesen Stil, der als eine Spalte bezeichnet wird, aber ich möchte, dass alle Zeilen auch Teil davon sind. Also, anstatt den Link zu brechen und ihn zu einem neuen zu machen, aber ich hätte es im letzten Video tun sollen , mit dem hier ausgewählten , kann ich tatsächlich gehen, ich will den Link nicht unterbrechen, möchte ihn tatsächlich bearbeiten. Also werde ich hier auf dieses kleine Symbol klicken. Und das werde ich hier sagen. Ich würde mich gerne anpassen. also, dass es statt einer Spalte Ich möchte also, dass es statt einer Spalte eine Spalte mit einer Reihe von acht Punkten ist. Okay? Ich möchte nichts hinzufügen, um zu haften, anstatt es zu brechen und ein anderes Raster-Layout hinzuzufügen , auf das ich hier eingehen werde, in meinen Stil und in diesem, nicht in dem. Ich möchte in die Reihen gehen und ich möchte, dass sie an der Spitze stehen. Wie viele sollten hier drin sein? Wie viele, weißt du, es wird geladen. Okay. Und ich möchte, dass es nach oben reicht und nicht dehnbar ist Ich möchte, dass die Höhe Ass ist und ich möchte, dass die Dachrinne acht ist Wenn Sie beim Versatz daneben gehen, ist es nur der Versatz der Oberseite. Vielleicht möchten Sie sagen, 20 Pixel rundum sind der obere Rand und das bringt Ihr Acht-Punkte-Raster durcheinander Sie können tatsächlich einfach bei den 20 Offset, Ihre Ränder auf 20 erhöhen und dann trotzdem ein Acht-Punkte-Raster darin verwenden. Das ist völlig in Ordnung. Ich freue mich, dass ich es rundum benutze. Also los geht's, ich habe das aktualisiert. Warum willst du das jetzt nicht machen, ich kann sie tatsächlich loswerden und sagen, lass uns den Stil einer Spalte und aller Zeilen anwenden. Nett. Okay, es gab eine kurze Aktualisierung der Stile in Figma 23. Gitter in Frames, die nicht der Hauptrahmen sind: Hallo alle zusammen. Fügen wir diesem Frame hier Spalten hinzu, nicht den gesamten Frame, weil wir diesen seltsamen Anwendungsfall haben , bei dem wir nur vier Spalten nur für dieses kleine Feld hier benötigen, wir fügen ein kleines Spaltenlayout-Raster hinzu. Dann gehen wir noch ein bisschen weiter. Und wir werden an dieser einen Schicht arbeiten, wo wir eine Navigation mit fester Breite haben. Vielleicht ist es der Admin-Teil unserer Website. Das muss diese Größe haben, aber der Rest muss dehnbar und reaktionsschnell sein, einfach zu handhaben sein und es ermöglichen, dass die Raster für unsere spezifischen Anforderungen etwas einzigartiger Okay, los geht's, damit wir Spalten oder jede Art von Layoutraster innerhalb von Frames hinzufügen können Spalten oder jede Art von Layoutraster innerhalb von Frames Also schnappe ich mir mein Rahmenwerkzeug. Ich werde es hier wie ein Feature-Set von Boxen zeichnen, aber ich wollte vier Spalten haben. Also anstatt zu versuchen, es mit dem Gesamtrahmen zu machen, das ist mein Handy, werde ich es einfach mit diesem Frame machen. Ich werde sagen, Layoutraster hinzufügen. Und ich möchte, dass es Kolumnen sind. Und ich möchte, sagen wir, vier sein , was sich stark von meinem unterscheidet. Aber es ist nur so einzigartig wie kleine Feature-Karten. Und ich mache hier kleine Kästchen, auf die du klicken kannst, um zu den verschiedenen Unterkategorien der Gigs zu gelangen den verschiedenen Unterkategorien der Gigs Und das Bauchgefühl ist, dass ich andere Sachen zusammenfüge, 24, vielleicht 16. Und das heißt, wenn ich jetzt meinen F2 zeichne und darin Felder zeichne, okay, ich kann ihn an den Zeilen einrasten lassen, aber ich kann ihn auch an diesen neuen Spalten einrasten lassen , die sich darin befinden Und ich kann sagen, kannst du links und rechts sein? Geben wir ihm eine Füllfarbe. Wo bist du? Du bist unsichtbar. Füllfarbe ist nicht weiß. Das bedeutet, dass sich diese anpassen werden. Sie können also Spalten haben, nicht nur im übergeordneten Frame, sondern auch innerhalb von untergeordneten Frames, wie bei besonderen Anlässen wie diesem. Lass uns das machen. Zum anderen hast du den Anfang mit dem festen linken Navi sortiert . Also lasst uns jetzt aus einem mobilen Land springen und es drücken die F-Taste. Und lass uns zum Desktop gehen. Und ich wähle eine generische Desktop-Größe und lege sie hier ab. Okay, wir wollen das generische 12-Spalten-Raster nicht . 12 Spalten sind ein wirklich gutes Raster für Desktops. Und ich werde dasselbe tun. Gott wird 24 Jahre alt. Ich werde einen Spielraum von, zwei , vielleicht ein bisschen mehr haben. 40. Das Problem ist, ich brauche dieses feste linke Navi. Also, was ich tun möchte, ist zu wechseln, um zu zoomen. Lassen Sie uns die F-Taste verwenden, um meine Navigation zu gestalten. Okay, also ich gehe zu einer festen Größe. Wie breit wird es sein? Es könnte das Acht-Punkte-Raster verwenden. Sie können alles eingeben, was Sie möchten, da es sich um eine feste Breite handelt. Es wird sich nicht ändern, je nachdem , auf welchen Computern es angezeigt wird. Dieses Zeug muss sich ändern. Das muss keine feste Größe sein damit alles passt, was wir hier brauchen. Also, was machst du damit? Also, was ich tun werde, ist, dem eine Füllfarbe zu geben, alles auszusuchen, solange es grünlich ist Und was ich tun werde, ist diesen Stil zu kopieren und einzufügen, oder wir könnten ihn löschen, aber ich wähle ihn hier aus. Wir waren am kleinen Rand, aber da ist Copy. Ich lösche es davon. Und ich werde mir den Rahmen schnappen und eine Kiste herausziehen , die hier reinpasst. Du siehst, was wir tun werden. Es wird es hier anwenden. Sie müssen also den Modus verlassen, in dem Raster nur auf den Hintergrund angewendet werden, aber Sie können einzelne Frames bearbeiten Also lass uns auf Einfügen klicken. Und warum wollen wir nicht sichergehen, dass es links und rechts einschränkt Dieser wird nicht einschränken und sich wundern, dass dies eine Lösung ist, also wird er sich heben Und was ich tun könnte, ist oben und unten zu machen. Bei diesem dehnt es sich also genauso aus, oben und unten. Jetzt haben wir ein festes linkes Navi, N dehnbare Spalten auf dieser Seite Okay, das sind Layoutraster mit untergeordneten Frames, nicht nur dem gesamten übergeordneten In Ordnung, wir haben jetzt unser Grid repariert, lassen Sie uns zu etwas anderem übergehen 24. Kursprojekt 03 - Event-Branding: Hallo, es ist Zeit für ein Klassenprojekt. Ich möchte, dass du eine kleine Marke kreierst. Wir werden nichts ausgeben, es ist kein Branding-Kurs, aber lassen Sie uns etwas Einzigartiges für uns alle haben . Wenn wir weitermachen, bauen wir etwas, das wir in unserem Portfolio verwenden können , und das wird es dann, wenn wir es teilen. Aber nicht alle machen Limerick-Techno. Wie bekommen wir ein bisschen Abwechslung? Und wir verwenden in deinen Klassenprojekten, es wird einen Link zu diesem zufälligen Projekt generator.com Ich habe das mit dem Team von Bring Your Laptop gemacht , damit Sie ein generiertes Briefing erhalten. Okay, also mach weiter, geh zum Figma Advanced und verbessere die Schrift in deinem Dorf, deiner Stadt, deiner Stadt Es spielt keine Rolle. Okay, und dann sollte dir Limerick präsentiert werden und dann ein Musikgenre und du solltest einfach das verwenden , das es dir gibt Es wird Ihnen helfen, an Projekten zu arbeiten, die vielleicht nicht mein Favorit sind, Jazz, aber da ich hier einige Einschränkungen habe, werden wir mir wohl helfen, zu definieren, wie die App aussieht , anstatt nur die gleichen alten Dinge in meinem Portfolio zu tun . Also benutze das als deinen Namen und das ist das Logo. Also, was wir verwenden eine Logo-Markierung und Sie müssen nicht zu viel Zeit darauf verwenden oder Sie können. Du kannst also einfach ein Icon für meinen Vogel verwenden, ein kostenloses Icon. Ich zeige dir das nächste Video und ein interessantes Widget. Um kostenlose Icons zu erhalten, bekommst du Bonuspunkte, wenn du etwas Zeit damit verbringst , dein Logo zu erstellen, es aber tatsächlich selbst entwirfst. Das wäre super toll, wenn du dir etwas Zeit nehmen könntest, um in diesem Fall das offizielle Logo für Limerick Jazz zu entwerfen in diesem Fall das offizielle Logo für Limerick Wir haben also unseren Auftrag, wir haben unseren Namen, okay, und ich möchte, dass du ein Logo erstellst, entweder ein kostenloses Aktiensymbol oder dein eigenes entwirfst. Und dann möchte ich, dass du ein paar Farben auswählst. Sie waren irgendwie wie drei Grundfarben. Sie benötigen eine Primär-, Sekundär - und eine neutrale Farbe. Möglicherweise haben Sie hier eine zusätzliche dritte Art von Akzentfarbe usw. Es liegt an dir. Ich bin damit gelandet. Mein primäres. Meine zweite Farbe wird meine neutrale Farbe sein. Ich habe diesen. Es ist nicht meine Akzentfarbe, das ist meine Schnittstellenfarbe. Du musst diesen nicht haben. Ich mag es einfach, der Hintergrund hier die Farbe der Benutzeroberfläche ist, die wir zuvor gesehen haben. Es ist so, dass ich weißes Zeug drüber legen kann und es etwas mehr abhebt. Das ist optional für Sie. Es gibt viele Orte , an denen man Farbmuster finden kann, okay, ein paar Farben, die zusammen passen okay, ein paar Farben, die zusammen Ich habe einen Link zu Adobe Color gesetzt, das ich häufig verwende. Wenn Sie sich eingehender mit Farbe befassen möchten, habe ich hier zwei Links für das ältere Materialsystem, das Designsystem und die neuere M3-Version hinterlassen. Sie könnten ein M4-Out sein. Jetzt geh und sieh dir die an. Wenn du ein bisschen mehr darüber erfahren möchtest, es sind viel mehr Details und das werde ich in diesem Video machen, aber das Minimum ist, einfach drei Farben auszuwählen. Wie bin ich zu meinen drei Farben gekommen? Ich bin gerade zum Moodboard gegangen und habe eines gechipt. Okay. Und ich hatte jede Menge Zeug und ich dachte, ich habe mich umgesehen und ich habe einfach angefangen das mit der Pipette auszuwählen, nachdem das Rechteckwerkzeug die Umschalttaste gedrückt gehalten hat, also ist es Dann hatte ich die I-Taste auf meiner Tastatur und Wind. Das gefällt mir. Nein. Kannst du dich erinnern, dass ich sie von habe. Ich bezweifle, dass ich sie bekommen habe. Ich glaube nicht, dass ich sie alle vom selben Ort habe. Und dann glaube ich, habe ich sie geändert, aber mein Moodboard ist ein guter Weg, vielleicht davon abzuweichen. Ich, manchmal ziehen sie sie einfach direkt aus einem Bild heraus, weil es einfach ein wirklich cooles Bild mit paar coolen Farben gibt und du sagst, Oh, los geht's. So habe ich meine bekommen. In Ordnung, Sie benötigen also Ihr Logo, Sie benötigen zwei Farben und die Ergebnisse sind drei Screenshots Ihres Du kannst entweder einen Screenshot davon machen oder es gibt einen Download als PNG. Und dann möchte ich deine Farbauswahl und das Logo auf deinem Navi sehen , okay, wenn du sie hier schön anordnest, kannst du einen Screenshot von all dem machen, okay? Und das wäre perfekt, wenn dein Name lang wird. Am Ende hast du also klassische Musik und es ist wirklich lang. Sie können ein Akronym verwenden. Es war also klassische Limerick-Musik. Darüber freue ich mich auch. Wählen Sie eine Schriftart nach Ihren Wünschen. Wir werden später über Schriften sprechen, oder zumindest werden wir später im Kurs viel fortgeschrittener in die Typografie einsteigen später im Kurs viel fortgeschrittener in die Wir werden uns mit Farbe befassen, auch für Fortgeschrittene. Aber im Moment wähle ein paar Farben aus, mache ein kleines Logo oder verwende einfach ein kostenloses Stock-Icon, wie ich es getan habe, lade es hoch und wir sehen uns im nächsten Video. 25. Logos mit Iconscout: Wie erstelle ich Logos mit Iconscout?: Hallo zusammen. In diesem Video zeige ich Ihnen, wie Sie ein Platzhalterlogo erstellen Und wir verwenden, oder ich habe unser Symbol aus diesem Plugin hier verwendet . Könnte sein, Iconscout kann keine eingetragene Marke sein , weil es ein kostenloses Icon aus dem Internet ist, also jeder es verwenden kann, aber es eignet sich hervorragend für unser Portfoliostück hier. Außerdem kann es etwas schwierig sein, einige dieser Symbole zu bekommen. Also ich werde Ihnen zeigen, dass es einige sind, vielleicht sind Sie auf einige Probleme gestoßen Und im letzten Video möchte ich dir zeigen, wie man so etwas wie diesen scheinbar einfachen Vogel nimmt , bei dem tatsächlich ziemlich viel Gruppierung und Maskierung vor sich geht Ich werde dir zeigen, wie man es nicht mag, es zu einem wirklich einfachen Opfer heruntermacht Es könnte etwas einfacher zu bedienen sein. Außerdem wird der Mohawk-Vogel auch unser oberstes Navi oder unsere Hauptkomponente sein und dort auch ein Logo einfügen, das auch Bestandteil sein wird In Ordnung, lass uns gehen. In Ordnung, also das Icon, das ich verwende, oder zumindest das Plug-in, das ich verwendet habe, heißt Iconscout Wir können die Umschalttaste gedrückt halten, um dieses Ressourcen-Panel hier zu öffnen . Und es wird einfach standardmäßig das verwendet , was Sie zuletzt ausgewählt haben. Also diese Schicht habe ich sowohl auf dem Mac als auch auf dem PC, und ihr könnt den Iconscout sehen Nun, Iconscout ist vielleicht nicht der beliebteste, als Sie gesucht haben Okay, ich benutze, manchmal dirigiere ich auch. Es gibt viele verschiedene Icon-Plugins , so wie ich seine auswähle . Ich habe nur geschaut, ob sie von wie vielen Leuten verwendet werden? Wenn etwas nur von wenigen Leuten benutzt wird, ist es meiner Meinung nach nicht so gut wie das, das von vielen benutzt wird. Es ist also keine gute Maßnahme. Aber wie dem auch sei, ich werde Iconscout verwenden und dann gehen wir, okay, jetzt mit Iconscout und den meisten von ihnen gibt es eine Option für kostenlos und Premium Also gehe ich ins Freie und habe Vogel eingegeben. Und ich habe ewig gescrollt und meinen Mann schließlich irgendwo gefunden , irgendwo unten Ich kann mich nicht erinnern. Aber ich habe es gefunden. Da ist er. Hallo. Das Coole an diesen ist , lass uns einfach ein anderes zufälliges auswählen. Suchen wir uns diesen Typen aus. Er sieht cool aus. Schauen wir sie uns an. Da ist der Schöpfer oder Radius. Vielen Dank. Und oft ist es Teil eines Rudels. Wenn du nach anderen Tieren oder anderen Symbolen in ähnlichen Stilen suchst , kannst du oft zum Rudel gehen und nachschauen und sagen: Oh ja, die kleine Krone in dieser speziellen App bedeutet, dass das bezahlt ist. Also verschenken sie ein paar kostenlose Sachen. Aber wenn du das ganze Märchenpaket haben willst, kannst du Pro werden und entscheiden, ob sich das für dich lohnt. Viel einfacher als all diese zu zeichnen. Eine Sache, die ich tun werde, ist, darauf einzugehen. Und dieser, er hat ein SVG und ein PNG. Ich füge das SVG ein, okay, und lass uns noch einmal den guten Vogel eines anderen auswählen Kostenlos, es ist nicht, nun, ich nehme einfach diesen Typen, er ist frei. Also lass uns das noch einmal machen. Ich werde dir den Unterschied zwischen den beiden zeigen. Ich habe mir diese schon einmal angesehen und sie sind irgendwie anders wenn man nicht viel in Figma gezeichnet hat, das kann ein bisschen schwierig sein Dieser, er ist einfach. Ich schaue. Also ich habe diese beiden Vogel-Embed-Frames drinnen, dieser ist einfach auch, da ist eine Vektorzeichnung und dann gibt es einen Kanal für das PSI, der ziemlich einfach zu verstehen ist, und fange an zu manipulieren und zu entscheiden, dass ziemlich einfach zu verstehen ist, und fange an zu ich das Auge nicht will Klicken Sie darauf. Ich kann den Augapfel ausschalten. Du verabschiedest dich von mir für eins und doppelklickst darauf und schnappst dir das Versteckte. Sagen wir, er braucht einen Enten-Mohawk. Perfekt. In diesem Fall können Sie sehen, dass es oben herausgeschnitten wird Also klicke ich auf meinen Frame. Und ich sage, schneide den Inhalt nicht ab. Und was ich mit dem Rahmen machen könnte können Sie hier sehen, diese Option hier ist, die Größe anzupassen, die Größe meines Rahmens so zu ändern, dass alle Teile hineinpassen Dieser ist ziemlich einfach. Dieser ist kniffliger Um einen kleinen Blick hinein zu werfen. Lassen Sie uns hineinzoomen, um zu wechseln. Und innerhalb dieses Rahmens ist Coppard eine Pfadgruppe, okay? Innerhalb dieser Gruppe befindet sich eine weitere Gruppe. Und innerhalb dieser Gruppe gibt es eine Reihe verschiedener Vektoren, die leicht zu verstehen sind Hier war eine Moschee im Gange, okay? Sie können sehr kompliziert werden je nachdem, wer sie gezeichnet hat. Also, was wir tun können, ich finde, es ist einfach, einfach darauf , den übergeordneten Frame auszuwählen, mit der rechten Maustaste darauf zu klicken und zu sagen, lass uns diesen Befehl E glätten . Jeder macht das von Photoshop aus mit den Händen nach oben Nur ein Smoosh, alle Schichten zusammen. Es ist immer noch Vektor, was cool ist. Es ist nur der Tidying Victor. Es gibt nicht so viele Gruppen über Gruppen und Interessengruppen. Es liegt an dir. Das hängt von deiner Figma-Erfahrung ab. Mein hat einen schwarzen Rand, jetzt doppelklicke ich darauf , um in meinen Vektor zu gelangen. Ich klicke auf den äußeren Teil. Ich kann umschalten, auf alle Ecken klicken oder einfach auf Löschen klicken und erneut löschen. Ich bin nicht gegangen, um mehr zu kicken. Gut von Parent Frame. Und jetzt klicke ich auf Fertig. Ich überlasse dir nur diese einfachere Sache , die ich ein bisschen besser verstehe. Befehlsoption P öffnet das letzte Plugin, das Sie auf einem PC verwendet haben. Mit Strg Alt P wird es geöffnet. Das Letzte, was ich möchte, dass du tust, ist Schicht eins. Schauen wir uns an, was wir hier tun: Wenn T2 das Scrollrad „Command“ oder „Control“ ist, gedrückt halten. Und schauen wir uns das an. Ich werde daraus eine Komponente machen. Mein Bauteil ist hier drüben, wohingegen du da sie sind. Okay, es ist mein Hauptbestandteil. Ich werde es an den Rahmen anpassen. Und anstatt es einfach Logo zu nennen, nennen wir es Logo-Marke. Und mein ist kalt, Limerick-Techno. Okay, also wie komponierst du außerhalb deines ersten Frames Stellen Sie es hier in die Anfänge eines Top-Navigats und stellen Sie sicher, dass unsere Grids eingeschaltet sind. Also schiebe G, K und stelle einfach sicher, dass dieser Rahmen hier für meinen Hintergrund an meinem 16-Punkte-Raster ausgerichtet ist Finden Sie etwas, das für Sie funktioniert, finden Sie eine Logogröße , die für Sie geeignet ist. Und positionsmäßig oder das sieht gut aus. Shift G, schalte sie aus. Diese ganze Sache sollte ein Bestandteil sein. Also Command Option K, Control Option K, es heißt Frame Tool, es heißt dieses Tool, Navi Bindestrich oben Okay, und wir sollten das Original hier behalten und auf diese Weise eine Instanz wieder rüberbringen. Das Letzte, was ich tun werde, bevor ich gehe, ist mein Zoomen rückwärts, also benutze ich mein Scrollrad, wie ich bereits erwähnt habe, ich befehle runter oder steuere ich gehe, ist mein Zoomen rückwärts, also benutze ich mein Scrollrad, wie ich bereits erwähnt habe, ich auf einem PC, Sie können ein Scrollrad verwenden, um rein und raus zu gehen Der Verstand arbeitet rückwärts. Jeder mag es das Scrollrad etwas anderes macht. Ich bin es gewohnt, in die andere Richtung zu gehen. Also nehme ich Figma oder Preferences. Wir können hierher gehen und zu den Einstellungen gehen und dort die Zoom-Richtung umkehren. Das will ich, weil ich es vorziehe, es so zu machen. Es ist nur so, das heißt, wenn ich alles getan habe ist die Art und Weise, wie der Zoom geht, hin und her geschaltet habe. Du verstehst, oder? Wenn ich jetzt scrolle, zoomt mein Rad rein, anstatt herauszuzoomen, was sich sowieso nicht richtig angefühlt In Ordnung, so habe ich mein Logo bekommen. Alles, was Sie wirklich tun müssen, ist nur sicherzustellen, dass Ihr Logo und Ihr Navi zwei separate Komponenten sind. In Ordnung, nächstes Video 26. Was sind Widgets im Vergleich zu Plugins in Figma?: Hallo alle zusammen. In diesem Video schauen wir uns den Unterschied zwischen Plugins, traditionellen Figma-Plugins, und diesen neuen, schicken, neuen, ausgefallenen Widgets an. Warum haben wir zwei davon? Ich zeige dir den Unterschied und ich zeige dir ein paar meiner Favoriten. Wir werden uns das ansehen. Automatisches Farbstyling, nett. Okay, der allgemeine große Unterschied besteht darin, dass Plugins mehr können Widgets sind ziemlich einfache Kreaturen. Plugins neigen dazu, potenziell viele Dinge zu tun. Die andere Sache ist, dass du nur ein Plugin haben kannst, Moment öffnen, bearbeiten und Widgets Sie können Lose gleichzeitig offen haben , da sie leicht sind. Plugins werden im Allgemeinen wie dieses kleine Symbol angezeigt. Iconscout erscheint in einem eigenen kleinen Fenster und produziert Sachen für deine Leinwand Wenn Sie damit fertig sind, schließen Sie es, wohingegen Widgets auf Ihrem Canvas gespeichert sind, okay, und Sie hätten dazu führen können, dass sie geöffnet Lassen Sie uns diesen hier öffnen. Das alles tut es, naja. Manchmal landen sie an seltsamen Orten. Also wurden die Gedanken daran gebunden und es steckt da drin fest. Das bringt ein gutes Argument zur Sprache. Widgets in dir Und sie wurden von vielen verschiedenen Menschen entwickelt, alle mit unterschiedlichen Fähigkeiten. Und einige von ihnen werden ständig aktualisiert , um Schritt zu halten, und andere nicht. Also werde ich hier ein paar davon teilen, aber manchmal funktionieren sie einfach nicht. Dieser tut das normalerweise, aber sehr oft gebe ich hier drinnen auf und kann sie nicht wirklich finden Option, klicken Sie auf das kleine Ding dort, in dem er versteckt ist. Wenn ich also die Wahltaste auf einem Mac gedrückt halte, auf einem PC die Alt-Taste gedrückt halte und auf den kleinen Chevron klicke, wird alles, was ich sagen kann, einfach aus der Luft kommen und für mich herkommen Manchmal muss man bei Plugins und Widgets Figma schließen und wieder öffnen , bevor sie richtig und dauerhaft funktionieren Aber ich bin oft auf dieses Problem gestoßen. In diesem hier können Sie nur ein Datum auswählen. Das Datum, an dem Sie etwas getan haben, funktioniert sowohl für FIG Jim als auch für Figma Und es ist cool. Es ist in einem Winkel. Sie können verschiedene Winkel wählen. Sie können ein anderes Datum wählen. Okay. Es könnte alles Datum sein, das abgeschlossen werden muss. Das Datum war abgelaufen, der Tag, an dem du es liefern wirst, gekauft. Das Coole daran ist, dass es dort ein süßes kleines Symbol bekommt . Okay, es ist mein kleines Widget, aber ich kann mehr als eine Schicht haben. Ich öffne die Ressourcen und da sind sie, da. Wir werden diesen im nächsten Video verwenden, Color Levels Generator. Es ist großartig, Okay, und es lebt auf der Leinwand. Und obwohl Plugins in der Regel etwas produzieren, das quasi auf der Leinwand gemacht wird, wird es einfach produziert und fertig. Diese sind dynamisch. Ich kann das Datum ändern und das passt sich an. Und das hier, ich kann die Farben ändern und es passt sich an. Es ist dynamisch. Es macht etwas Leichtes, aber es macht etwas. Ich kann diese Styles in meiner Stilbibliothek speichern. Es ist alles sehr cool. Deshalb haben wir Plug-ins und Widgets. Ich wünschte, sie würden sie einfach zusammenschlagen , weil ich das Gefühl habe , dass die Begriffe dasselbe bewirken Aber jetzt wissen wir alle, dass Sie mehrere Widgets gleichzeitig auf der Leinwand haben können , Plugins, nur eines gleichzeitig geöffnet Aber im Allgemeinen können sie immer mehr Rechenleistung, Widgets, leichte, einfache Dinge tun Und zu guter Letzt, bevor wir zur Abkürzung gehen: Wer erinnert sich daran, das letzte von Ihnen verwendete Plugin zu öffnen? Falls du es noch nicht getan hast, finden wir ein Plugin, das du kennst und liebst und das du ständig benutzt. Dies wird eine praktische Abkürzung werden. Ich verspreche es. Stimmt, ist die Befehlsoption P auf einem Mac, Strg Alt P auf unserem PC, los geht's, es gibt keine solche für das Plugin. Oh, eine letzte Sache zu Plugins. Sie können sie tatsächlich kopieren und einfügen. Du hast zwei davon. Ich habe jetzt zwei gleiche Plugins, ich muss diese haben, um zwei von ihnen zu verbinden. Nicht wirklich, wahrscheinlich brauchen diese aber viele. Ordnung, da haben wir's. Plugins im Vergleich zu Widgets in Figma 27. Wie erstelle ich UX-Farbvarianten mit einem Figma-Widget?: Hallo alle zusammen. Lassen Sie uns einige Farbvarianten aus unseren Primär-, Sekundär- und Neutralfarben erstellen. Nur damit wir einige Varianten dieser Farben für verschiedene Situationen in unserem App-Design haben , werden wir dieses Widget verwenden als Farbstufengenerator bezeichnet wird. Es ist praktisch, es kreiert Stile. Ich zeige dir, wie du deine Styles aufräumen dieses Ding manchmal etwas zu viele produziert Und wir werden kurz darüber sprechen , was diese Zahlen bedeuten. In Ordnung, machen wir ein paar Farbvarianten. Schicht I, ich werde ein Widget namens Color Levels Generator verwenden . Das gefällt mir, aber du musst bedenken, dass es in Zukunft vielleicht nicht mehr unterstützt wird. Es funktioniert vielleicht nicht mehr. Figma, starke Veränderung. Sie könnten da draußen besser sein. Also das ist nur ein Beispiel, okay, also ich verwende den Farbstufengenerator. Und ich werde es hier drüben hinstellen. Geh aus dem Weg. Das funktioniert so, dass ich mir meine Primärfarbe schnappen werde . Ich füge das hier ein. Ich werde nachsehen, dass es alle meine Farbvarianten gemacht hat. Schau dir das an. Fünfhundert ist die Hauptfarbe, das ist die, die ich eingegeben habe Und dann ist da weniger, und dann ist da mehr als du, wie wir es im Essentials-Kurs gemacht haben, wie wir es im Essentials-Kurs gemacht haben, wir haben einfach die Helligkeit verringert und sie erhöht Bei diesem füge ich einen Farbnamen hinzu. Das wird meine Grundfarbe sein. Das Coole daran ist, dass es eine wirklich gute Namenskonvention verwendet Dies wäre im Webdesign sowohl für Schriftfarben als auch für Schriftstärken sehr typisch . Sie verwenden diese Art von Stilen. Fünfhundert ist die Mitte, und du hast ungefähr 1.000 wäre eine wirklich helle Schrift und 900 wäre deine schwarze Schrift Nun, das können wir tun, Sie können auch auf Stile speichern klicken. Das ist das Coole an Widgets. Diese Dinger machen tatsächlich Sachen. Und du kannst dir hier oder meine Styles ansehen Wenn du das ausgewählt hast , sind sie vielleicht nicht da. Also im Hintergrund abklicken. Entkomme, wenn du tastest, schau in der Primärfarbe nach und ich habe alle meine Farben da. Nun, das sind wahrscheinlich viel zu viele Details, als ich brauche. Ich neige dazu, das zu tun. Kannst du sehen, dass ich alle mittleren herausgeschnitten habe, also lass uns zurückgehen. Also ich will keine 50, es ist zu hell. 100 ist viel, wie ich will. Ich will keine hundert, ich will keine 400. Ich will keine 600. Ich will keine 800. Du kannst so tun, als ob es dafür keine Regel gibt, aber ich finde, das ist eine ausreichend breite Streuung für mich. Ich mache die drei anderen Farben. Sie können diese einfach duplizieren, wie Sie alles duplizieren. Ich halte meine Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt, um es herauszuziehen. Und ich werde meine anderen Farben hinzufügen. Ich werde den Redakteur bitten , das zu beschleunigen. Während ich es beschleunige. Ich habe meine Stile hinzugefügt und vaginal und ich nenne sie primär, das hat meine Farbstile irgendwie außer Kraft gesetzt Also habe ich vergessen, den Namen zu ändern. Ich werde rückgängig machen, rückgängig machen, rückgängig machen und nur sicherstellen, dass Sie den Namen ändern, weil er in meinem Stil meine ursprünglichen Primärzahlen überschrieben Also mach das rückgängig. In Ordnung, das ist meine Sekundärfarbe. Speichern Sie Stile. Flucht ist mein primäres, dass ich sie rette, sie vor. Jetzt beschleunigen wir und machen den letzten. Gut, schnell zu fahren, Dan Okay. Wie die anderen werde ich Ew, Ew, Ew, Ew, Ew, Ew loswerden. Ich habe hier nur eine ungerade Nummerierung , genauso wie bei dieser, meine sekundäre Geschwindigkeit, die Geschwindigkeit Nun, diese können Stile färben, wenn Sie sie verwenden. Nehmen wir an, ich habe meine Lektion. Er beschreibt es. Wenn Werkzeug für das Rahmenwerkzeug, ziehen Sie es heraus und wenn Sie hier sind, okay, meine Füllfarben, werde ich auf meine Füllstile klicken. Und es kann ein bisschen lang werden, je nachdem, wie viele Sie hier haben. Manchmal ist es nett , einfach 500 einzugeben. 500 ist dieser mittlere Stil, das ist die volle Vollfarbe. Du kannst hier sehen, da ist meine Grundfarbe. Denken Sie daran, dass ich fünfhundert ausgewählt habe und alles, was darunter liegt, ein bisschen heller Alles darüber ist etwas dunkler. Also bei dir kann ich hier einfach 500 eingeben und es gibt mir einfach meine, es einfach auf ein überschaubareres Niveau Letzte, was ich tun möchte, ist, dass ich Farbe meiner Benutzeroberfläche hinzufügen möchte, und das werde ich nicht auf diese Weise tun. Ich will nicht, dass all die verschiedenen Variationen ihm als Stil bearbeitet werden wollen. Und dieser wird Interface heißen. Das hast du vielleicht nicht. Was dir auffallen wird, ist wenn ich im Hintergrund abklicke, habe ich dich. Aber all diese Typen in einer Gruppe. Damit bin ich jetzt zufrieden. Und nur zur Erinnerung, du kannst sie neu anordnen , je nachdem wie, du weißt, welches du eingegeben hast, okay, also du kannst sagen, okay, zuerst Sekundär, wir sind nur für den Fall, dass du es falsch verstanden hast Primär, Sekundär, und ich werde ganz unten die neutrale Position haben. Ich kann die Oberfläche dort nicht nach unten verschieben weil es unten separate Farbgruppen oben einzelne Farben sind. Sonst noch etwas? Eine Sache ist, dieser spezielle funktioniert nicht sehr gut. Wenn du den Hash nicht davor hast, ist es irgendwie nur, wenn ich sage, wenn, wenn, wenn wenn wenn wenn ich einfach nicht weiß, was zu tun ist, standardmäßig das ist, was es vorher war Stellen Sie also sicher, in welchen Hash der Hash geht und benötigen Sie diese. Du löschst sie nicht einmal. Es ist also sauber am Rahmen. Geh weg, geh weg, geh weg. Ordnung, wir haben also einige unserer Farben, aber wir haben jetzt auch Farbvarianten Gib mir ein Handy, um unsere App zu erstellen. In Ordnung, weiter zum nächsten Video. 28. Einführung in verschachtelte und responsive Auto-Layouts Abschnitt: Hallo alle zusammen. Hey, ich habe keinen Computer mehr. Hey, ich wollte rausspringen , weil ich diesen nächsten Abschnitt vorstellen wollte. Die Vor- und Nachteile: Wir werden uns verschachtelten und responsiven Auto-Layouts befassen Wissen Sie, was Auto-Layout ist, ist, dass wir jetzt anfangen, sie ineinander und dann ineinander zu platzieren . Und dann mehr als, mehr als mehr von ihnen. Einschränkungen. Und es wird einigermaßen fortgeschritten sein. Eine ziemlich komplizierte Komponente, die großartig ist und toll zu lernen ist. Und es wird für verschiedene Geräte verantwortlich sein. Und es wird es für jemanden sehr schwer machen , es in deinem Team oder deinem zukünftigen Ich durcheinander zu bringen . Ein bisschen Vorarbeit, um das zu erledigen. Lassen Sie mich Ihnen zeigen, was wir tun werden , bevor ich Ihnen die Nachteile nenne. Lassen Sie mich Ihnen einfach zeigen, was ich mache. In Ordnung, also das machen wir. Es ist eine Event-Karte. Und das Coole daran ist, dass wir es so machen werden, dass es responsiv ist, das heißt , es kann genau dieselbe Komponente hier anpassen , es ist kein anderes Format, dieselbe Komponente, aber Sie können die Ebenen unterschiedlich sehen. Dieser hat den Text über dem Early-Bird-Preis als dieser. Sie können sehen, dass wir sogar den Frühbucherpreis so geändert haben, dass er links und rechts angezeigt wird. Und es ist super responsiv, was wirklich cool ist. Also werden wir etwas entwickeln , das ziemlich weit fortgeschritten ist , weil es ziemlich widerstandsfähig ist , damit andere Leute es benutzen können. Wir können es gut und in allen verschiedenen Größen verwenden. Und in Bezug auf diesen Kurs wird es sehr praktisch sein, da reinzukommen und zu lernen, wie man ein S und eine Seitlichkeit in Nester legt ein S und eine Seitlichkeit in Nester Und einige der damit verbundenen Komplikationen. Wir können coole Dinge tun, indem wir mitreden, ich möchte, dass du die größte Größe hast. Ich werde dir gehen, und ich werde sagen, dass du tatsächlich die größere Größe mit einem anderen Layout hast. Aber wenn wir dieses Layout gemacht haben, möchte ich, dass oben steht, oder vielleicht entfernen wir es einfach alles zusammen. Okay, also eine wirklich coole Einzelkomponente mit viel Flexibilität. Es gibt also drei Gründe, warum ich das wie ein kleines Zwischenvideo machen wollte das wie ein kleines Zwischenvideo Zum einen wollen wir dir zeigen, was wir machen, denn es einige Videos, bevor wir zu etwas wirklich Cooles kommen . Es ist viel langweilig, aber es ist ja, ich werde ein paar Sachen machen. Eins ist, ich wollte dir zeigen, was ich machen werde. Als Nächstes wollte ich Sie wissen lassen, dass es sich bei den nächsten Videos eigentlich nur um mechanische Produktionsvideos mit einem Doppelpunkt handelt. Wir machen eigentlich nur ein paar Sachen, die wir in zukünftigen Videos verwenden können . Wir werden Boxen zeichnen und wirklich einfache Autolayouts erstellen , um alle Komponenten zu erhalten, die Also, wenn du mitmachst, beobachte sie, du baust deine. Wenn du nur irgendwie dorthin springst, gib mir die fortgeschrittenen Sachen, du kannst ein paar Videos überspringen Gehen Sie zu dem Video mit dem Titel Nest multiple autolayouts, 60 name, okay, und das bringt Sie direkt zum eigentlichen Erstellen und Sie können den Teil mit der Erstellung von Assets überspringen, aber überspringen Sie ihn auf eigene Gefahr, es sei denn, Ihr Vorschuss Sie können es überspringen es sei denn, Ihr Vorschuss Sie Die andere Sache, die ich machen wollte, war darüber zu sprechen, dass das Ding, das wir bauen, wahrscheinlich viel zu kompliziert sein wird. Wir werden einige Zeit im Gras verbringen, damit dieses Ding perfekt funktioniert und anpassbar ist. Und es ist großartig für diesen Kurs weil er es uns ermöglicht, unsere Grenzen dessen, was wir wissen und was wir tatsächlich machen können, zu erweitern. Aber in der realen Welt geht es bei UX, genau wie bei guter UX, oft darum , schnell voranzukommen. Deshalb ist Figma großartig Es geht darum, schnell Prototypen zu erstellen und sie herauszubringen, sie testen zu lassen und mit der Entwicklung zu beginnen Nicht übermäßig kompliziert machen. Und Komponenten und Variablen. Dafür gibt es Zeiten, aber ich glaube, ich wollte das hier einfach mal reinwerfen. Quizspiel. Manche Leute werden sagen, ich werde nie in der Lage sein, alles so zu machen. Und das musst du vielleicht nicht. Aber es wird Zeiten geben, in denen die Dinge dem zumindest nahe kommen müssen , weil sie wiederverwendet werden oder in ein Designsystem einfließen oder mit einem riesigen Team mit vielen Leuten zusammenarbeiten mit einem riesigen Team mit vielen Leuten Aber das ist nicht jeder in uns allen. Aus diesem Grund ist das Intro-Video hier. Lass uns das Ding eigentlich einfach machen. Und warum habe ich gesagt, mach das Ding? den nächsten Videos werden wir die Dinge für das Ding machen . Und dann tauchen wir in das supernerdige automatische Layout ein. Güte 29. Produktionsvideo: Aufräumen meines Frame- und Komponenten-Chaos: Hallo zusammen. In diesem Video werden wir dieses große alte Chaos aufräumen, das angefangen hat Dieses Video kannst du komplett überspringen, wenn du willst, denn ich werde nur die Komponenten aufräumen und ein paar Abkürzungen behandeln, aber nur solche, aber nur solche Ich werde mich nur ein bisschen von meinen Hauptkomponenten entfernt aufstellen . Der Moment, der sich überall verdoppelt, okay, das meine ich Ich werde alle meine Hauptkomponenten in diesen Behälter stecken , okay, eines Telefons, damit es einfacher zu entwerfen ist. Ich werde die rüberschieben nur damit das Zeug nicht überall ist. Und so kann ich meine süße Abkürzung verwenden, die wir früher in, in, in gelernt haben, anstatt sie früher zu benutzen, anstatt sie früher zu benutzen, wir sind reingegangen und sind einfach um all die Frames geflogen, die ich überall herumliegen hatte. Das werden wir tun. Oh ja, wir werden die Icons lila machen. In Ordnung, machen wir es Ordnung, ich fange damit an, hier drüben einen großen alten Rahmen zu machen hier drüben einen großen alten Rahmen Und wir werden das eine Hauptkomponenten nennen. Ich gebe ihm eine Hintergrundfarbe. Das ist ein guter Kontrast zum Telefon. Ich habe einige große, die einfachen. Messungen können also hier reingehen. Es wird sicherstellen, dass es sich in meinem Hauptkomponentenrahmen befindet. Okay, du kannst für den Moment hier runter gehen. Farben können hier auch reinkommen. Diese Komponenten können sich überschneiden. Oder werden sie sich dort zusammendrücken. Und wenn ich zu- und hineinzoome, kann ich sie einfach ein bisschen aufräumen Vielleicht sind das gerade Komponenten, aber es sind Hauptbestandteile, was gut ist. Wenn ja, was kann sonst noch drüber gehen, das kann in den Mülleimer gehen. Das war nur ein Beispiel. Du sagst, Hey, ich würde nicht zulassen, dass du dich behalten kannst - all die anderen Dinge, die wir brauchen Was ich gerne machen würde, ist, dass dies, das und das nicht sehr nützlich sind und dann einfach für sich alleine liegen, besonders wenn du versuchst, deine Event-Karte zu entwerfen. Du musst es sagen, oder ich werde es hier entwerfen. Aber ich muss hier drüben im Auge behalten. Das ist nicht gut. Also, was ich tun werde, ist, einen Ort zu schaffen, an dem all meine Hauptkomponenten getrennt von meinen Produktionstelefonen hier drüben leben können . Ich werde nur ein separates hier drüben haben , das sie nur enthalten wird. Meine Hauptkomponenten werden hier entworfen und sie spiegeln sich hier einfach wider. Ich dupliziere das nur. Okay. Ich werde das Ganze viel größer machen müssen. Füge deine eigenen Soundeffekte hinzu. Ich werde das jetzt benutzen. Ist mein Platzhalter. In dem Moment, in dem Sie sehen können, heißt es iPhone 14. Ich nenne das eine App-Komponenten. Hier drinnen habe ich Instanzen und ich will keine Instanzen, ich will dich nicht, ich will, meine Hauptkomponente hier versteckt dass meine Hauptkomponente hier versteckt ist, damit sie sich, wenn ich Designs mache, auf all diesen anderen Seiten widerspiegelt. Was ich also tun kann, ist zu sagen, ich möchte dir meinen Hauptbestandteil herausschneiden und wer süße Abkürzung entfernt, wo diese süße Abkürzung entfernt, wo wir sie austauschen wollen, ich möchte einfügen, um sie zu ersetzen , und vergiss nicht, was es ist. Es ist Command Shift R auf einem Mac, Control Shift auf einem PC. Du hast es. Okay, also ich habe diese Instanz gerade gegen meine Hauptkomponente ausgetauscht. Ich werde alle meine Netze umdrehen. Wer erinnert sich an die Abkürzung für Grid Shift G, wenn du Shift H drückst, mache ich das ständig. Schau, Shift H , drehe horizontal, tippe versehentlich darauf, Shift G. Okay, jetzt kann ich das ausrichten und sagen, dass ich dich da haben will. Kannst du sehen, warum ich das mache? Es ist so, wenn ich das jetzt anpasse und ich sage eigentlich will ich, dass das hier Dover ist. Es spiegelt sich tatsächlich in meinen verschiedenen Produktionsrahmen wider. Das ist genau wie die Kontrolle über sie alle. Und weil ich das gemacht habe , weil es tatsächlich auf einem Telefon angeordnet ist, kann ich die Abstände und alles richtig machen. Das Gleiche gilt für das hier unten, das ist ein Beispiel, weil ich es hier dupliziere. Ich will mein Hauptfach oder das Versteck. In diesem gibt es diese. Also werde ich ihn auch rausschneiden und dieselbe süße Tastenkombination verwenden : Shift oder Control Shift down auf einem PC, um zu wechseln und jetzt ist er die Hauptkomponente. Wenn ich also Designänderungen vornehme, fange ich wieder an, mit Dingen herumzuspielen. Es macht eigentlich all diese verschiedenen App-Boards. Das dort ändert sich nicht einmal. Oh, er hat ein paar Overrides für den größten. Da haben wir's. Was haben wir noch? Das muss ein Zuhause haben. Er ist ein MainComponent Und wenn ich ihn ausschneide, klicke ich hier auf diese Instanz, befehle Shift, Shift auf einem PC krank wird oder sie sind nicht neu, dann gehst du, er ist ein Logo und du triffst sozusagen in die Mitte. Was bedeutet das ist die Grids-Abkürzung für Grids, Shift G, nichts Shift H. Ordnung, es ist ein kleiner Blick in die Tonart Da ist mein letztes Android-Handy. Ich habe diesen riesigen Rahmen hier oben. Ich muss es nicht auswählen und im Schlüssel löschen. Was haben wir? Ich habe hier die Hauptkomponenten und dann nur meine drei Produktionstelefone. Fantastisch. Ich werde tun, dass Sie MainComponent die Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt halten, um beide Seiten Weil ich ein bisschen wissen will, was die hier unten sind. Sie sind nur ein bisschen nützlicher , um sie sehen zu können, während ich daran arbeite , diese ganze Sache ist zu schließen. Bitte lass mich gehen. Und jetzt ist es komisch, es ist nicht aufgereiht. Da haben wir's. Das Letzte, was ich tun möchte, bevor wir weitermachen, ist, ich könnte es mit den Instances machen, aber ich möchte es eigentlich mit diesen Komponenten hier unten machen. Meine Hauptbestandteile kann ich dann meine Auswahlfarbe machen , ich möchte meine Dokumentenfarben verwenden, lokale Farben. Den will ich benutzen. Sie ändern sich also im gesamten Dokument. Jetzt haben wir ein paar Farben, mit denen wir arbeiten können. In Ordnung, das war's für dieses Video. Ein bisschen aufräumen. Mache ich das so, wie ich gehe? Nein, ich komme an einen Punkt, an dem ich denke, das ist Macy muss es reparieren und dann räume ich es auf Oder wenn ich meine Datei mit jemand anderem teilen muss, dann räume ich sie auf und mache plötzlich Dinge mit Namen durch . Bis dahin kann ich sowieso ein bisschen chaotisch werden. In Ordnung, das ist es. Ich werde es im nächsten Video sehen. 30. 30 Unsplash-Plugin: Leute, wir werden Bilder mit meinem Lieblings-Bild-Plug-In namens Unsplash einbringen meinem Lieblings-Bild-Plug-In namens Ich werde oft gefragt, was die besten Plugins sind. Das ist einer meiner Favoriten, es ist ziemlich einfach zu benutzen. Wir haben das hier so eingerichtet , dass es irgendwie in den Hintergrund tritt Es gibt ein bisschen mehr Informationen über Bilder, nicht nur, wie man sie auf einer Seite platziert, sondern wenn Sie mit Bildern und Unsplash vertraut sind, sondern wenn Sie mit Bildern und Unsplash vertraut sind von denen Sie schon einmal gehört haben, fahren Sie fort und überspringen Sie dieses Video Ich möchte es hier behalten, weil wir etwas bauen. Wir sind alle auf unterschiedlichen Ebenen. Und wenn du vernünftig bist, weißt du, du weißt schon, was du tust, springe vielleicht einfach zum Ende dieses Videos. Der Redakteur wird den Timecode hier eintragen, okay, wo ich ihn kaputt mache. Und aus irgendeinem Grund, wenn ich das ändere, ändern sich diese alle nicht, okay? Und ich werde das Problem lösen, das ich habe. Das könnte für Sie interessant sein, wenn Sie es schon einmal hatten, und wenn Sie es nicht getan haben, werden Sie es wahrscheinlich in Zukunft haben. Also lass uns gehen und ein paar Bilder zu unserem Design hinzufügen. In Ordnung, fangen wir mit einem Plug-In an. Okay, ich werde das Plug-In verwenden. Es ist wirklich üblich, dass kostenlose Stockbilder unsplash verwenden , je nachdem, wie Sie es wünschen Es gibt viele von ihnen. Der ist wirklich gut, okay? Und was ich suche, ist ein Bild zu finden , das zu deiner Art von Briefing passt, in dem du dein Land hast, westlicher Typ, das passt, okay? Je nachdem, welches Genre Sie haben, könnten Sie kreativ werden. Häkchen. Nein, du hast genug, okay. Wenn du Bilder von irgendwelchen Plug-ins einbringst , inklusive Unsplash. Es ist wahrscheinlich so, dass es zwei Möglichkeiten gibt, oder? Sie können einfach einmal klicken und Sie erhalten diese riesige Version. Manchmal können sie wirklich groß sein. Es ist also einfacher, zuerst einen Rahmen hinzulegen zuerst einen Rahmen hinzulegen und dann darauf zu klicken, wenn du wissen willst, was. Okay, Sie können also ein eigenes Bild haben. Sie können ein Bild in einem Rahmen haben, wodurch Sie zusätzliche Bonuspunkte erhalten. Okay? Es gibt dir Dinge wie automatische Layouts, was nur ein einfaches altes Bild ist , aber nicht. Da hast du's. Die andere Sache, die Sie tun können, ist, dass Sie einen Rahmen in meiner Komponente haben können . Also werde ich versuchen, es mit reinzuziehen. Auf Wiedersehen. Also vorbei, schau, okay. Und es gibt zwei Möglichkeiten, wie wir das erreichen können. Ich kann versuchen, es hier reinzubringen wenn es zu groß ist, es weiß nicht wirklich, wo es hin soll. Ich finde es einfacher , Dinge kleiner zu machen und dann springen sie leichter in meine Karten-Event-Komponente. Okay. Vorher saß es einfach drauf. Also ich kann es auf zwei Arten machen. Ich kann das Bild in der oberen Hälfte haben und mein Ding unten haben. Oder ich kann es vielleicht komplett dort laufen lassen, es nach hinten verschieben und dieses Ding vielleicht irgendwie durchsichtig machen. Ich glaube, das ist es, was ich tun möchte. Es ist nicht wirklich wichtig, außer wie ich es darlegen werde. Wenn ich es als separate Einheit hier oben haben will , okay, es muss immer noch hinten sein. Ich benutze meine Abkürzung eckige Klammern, also schau mal auf deiner Tastatur nach. Auf meiner Tastatur befinden neben der Taste offene, geschlossene eckige Klammern. Dadurch wird es innerhalb der Komponente einfach vorwärts und innerhalb der Komponente einfach vorwärts Okay? Meine Event-Karte oder meine Karten-Event-Komponente. Und manchmal ist das nützlich wenn Sie es nur als vollständigen Hintergrund haben möchten. Es ist kein wirkliches Problem damit, es dabei zu belassen. Aber eigentlich wäre es vielleicht schöner, als diese Ereigniskarte zu haben , die ihren eigenen grünen Hintergrund hat Und dann habe ich da drinnen noch einen Rahmen, der irgendwie chaotisch ist Okay. Ich nenne es Bild, um es weniger chaotisch zu machen, das brauche ich nicht wirklich Richtig. Was ich tun kann, ist zu sagen, eigentlich weiß ich, dass mein übergeordneter Frame, okay, die Komponente einen Füllhintergrund hat. Lass uns das für ein Bild ändern. Es gibt ein paar verschiedene Möglichkeiten. Ich mache das am liebsten so, dass ich auf mein Bild klicke und sage, auf diesem Rahmen ist ein Phil abgebildet. Ich werde auf diesen Teil klicken. Vielleicht dieser kleine Teil von draußen. Okay, lassen Sie mich das Ganze auswählen. Ich habe gerade eine Kopie bekommen. Ich werde den Rahmen jetzt loswerden. Auf Wiedersehen. Klicken Sie auf die Hauptkomponente. Okay, mein Kartenevent. Und Sie können zwei Füllungen haben , die einfach direkt über die Oberseite geklebt werden. Jeder, ein paar Leute, sind auf ein kleines Problem gestoßen, nur ein paar Leute, ich kann es nicht wiederholen, aber in den Kommentaren gab es eine Lösung für dieses Problem, gab es eine Lösung für die ich nicht lösen kann Also werde ich es hinzufügen, falls Sie darauf stoßen. Im Grunde ist es Kopieren und Einfügen. Wenn es nicht von einem zum anderen geht. Okay, es gibt einen Workground. Was wir tun sollen, ist auf diesem Rahmen auszuwählen , der diese Füllung hat Ich denke, eines der Probleme könnte sein, dass es eine PC-Mac-Sache ist. Das andere ist, dass ich denke es das vielleicht nicht auswählt, richtig, weil man bei diesem Ding irgendwie auswählen kann. Du musst wirklich in diesen kleinen Bereich hier klicken , damit er blau wird. Gehen Sie dann zum Kopieren, klicken Sie auf das Bit, in das es eingefügt werden soll, und klicken Sie auf Einfügen. Okay. Wenn das nicht funktioniert, okay, es ist der Workaround, den Haley ausgearbeitet hat Danke. Hayley klickt darauf Anstatt einfach nur zu kopieren, was der Befehl C auf einem Steuerelement auf einem PC ist, können Sie zum Bearbeiten gehen und zu dem Steuerelement wechseln, in können Sie zum Bearbeiten gehen und zu dem Eigenschaften kopieren steht Wir verwenden Eigenschaften kopieren und Eigenschaften einfügen. Sie haben gesagt, dass das ihre Probleme behebt. Ich werde darauf klicken und Eigenschaften bearbeiten und einfügen gehen. Okay, das funktioniert für mich. Und es scheint auch das Problem zu beheben. Wenn Sie dieses Problem haben, können Sie das tun. Ordnung, mach mit dem Video weiter. Brauche ich den? Ich werde es wahrscheinlich rot lassen, nur für den Fall, dass ich das Bild lösche. Okay. Als Backup muss ich nur sichergehen, dass es oben steht. Auf geht's. Es ist nicht wirklich wichtig, außer dass das aufgeräumter ist, besonders wenn du es jemand anderem gibst Und es gibt eine Menge Rahmen, die du nicht wirklich brauchst Und dieser hier wird der untere Teil davon sein. Ich rufe statt Frame Two an, das wird Card Lower heißen. Und es wird eine Füllung aus meinen lokalen Farben sein, das wird mein Violett sein, mein 500. Ich wünschte, es wäre eine Liste für dich hier, weil sie dann oder vielleicht auch einfach nur auftauchte, um dir zu sagen, wie der Name lautete, als du mit der Maus darüber gefahren bist Ich schätze, es ist in der Mitte. Sieht aus wie 500 Und ich werde die Kapazität auf etwa 80, 70 reduzieren . Was Sie tun müssen, ist, dass Sie mit ein paar Bildern testen müssen , bevor Sie sich entscheiden. Okay, das ist wirklich dunkel. Also lass mich meinen letzten Stecker öffnen, den ich benutzt habe. Wer erinnert sich, was die Abkürzung ist? Erinnerst du dich? Interessiert es dich überhaupt? Ich verwende die Befehlsoption P auf einem PC. Das funktioniert allerdings nicht, wenn Sie Figma geschlossen haben , weil es sich nicht erinnert Irgendwie erinnert es sich nicht, was der letzte ist. Wenn du willst, schalte es aus und komm am nächsten Tag wieder, es erinnert sich nicht, es ist alles in Ordnung. Wir werden dir vergeben. Ich muss gehen und nachsehen. Stellen Sie nur sicher, dass ich ein Bild finde , das ich tatsächlich hier auswählen werde. Ich kann sehen, dass ich das richtige habe. Und ich klicke auf diesen und das Lila ist in Ordnung. Darüber hinaus werde ich auch lesen können. Ich werde jeden holen , der dazu bestimmt ist. Aber diese werden nicht aktualisiert. Sie sollten die Hauptkomponente ändern. Ändere das. Ich lösche es und füge es erneut hinzu. Sie löschen Fremdheit nicht. Sie warten dort. Ich werde Figma schließen und wieder öffnen. Super komisch. Nun ja, ich werde diesen auswählen und ich werde gehen, also werde ich Ford befehlen, zu meinen Schnellaktionen zu gehen, und ich werde dieselben Eigenschaften auswählen. Okay. Also wählt es alles in meinem Dokument aus, was dasselbe tut. Du gehst weg, Phils. Wenn ich Phil Phil wegnehme und es nicht weiß ist, was passiert, Film, dann will ich wirklich nichts hinzufügen Diese müssen von Anfang an übergeordnet sein. Ich muss so viel mit ihnen gemacht haben oder damit herumgespielt haben, dass sie nicht vollständig überschrieben wurden nicht vollständig überschrieben wurden Also hört es sich das nicht an. Also, was ich tun muss, ist, dass du, mein Freund, das Gleiche noch einmal auswählst, aber ich sage Rechtsklick. Und ich werde Changes umsiedeln, und die Werke sind alle tot Jetzt lustige Zeiten, dann lasse ich das im Kurs , weil solche Dinge passieren Okay, jetzt muss ich mit dem Film gespielt haben. Deiner könnte funktionieren. Es könnte mich in den Kommentaren nicht wissen lassen. Aber jetzt, wenn ich mein Bild ändere, sollte ich in der Lage sein, zu Zuck zu gehen und sie alle löschen Los geht's, Mann, ich hasse dieses Bild jetzt, ich habe es früher im Kurs ausgewählt Ich bin kein Fan, ich werde es wieder auf ein cooles Techno-Album umstellen In Ordnung, das wird es also sein. Ich, wir werden es im nächsten Video sehen. 31. Produktionsvideo: Herstellung der Teile für unser verschachteltes Autolayout: In Ordnung, hier gibt es nichts zu sehen. Gehe zum nächsten Video. Wenn du rumhängen willst, werden wir ein paar Autolayout-Boxen erstellen , die wir brauchen werden, wenn wir zu einigen verschachtelten Autolayouts kommen kommen Aber das sind einfach alte Autolayouts , sodass, wenn ich Dinge eintippe und sie in verschiedene Preise eingebe , sie sich Wenn Sie wissen, wie das geht, können Sie weitermachen . Hier gibt es nichts Besonderes. Wenn du aber rumhängen und mir Gesellschaft leisten willst , bleib hier. Lass uns ein paar Textfelder erstellen. Okay, das erste langweilige Ding ist, ich möchte die Schriftgröße hier ändern, habe das auf meinem Handy getestet, es mir angesehen, und das Datum war viel zu klein, also habe ich es auf 14 Der nächste Teil ist, ich will den Early-Bird-Text, eine Raute aus Netzstoff mit einer Umhüllung an der Außenseite Ich weiß also, dass ich den Wrapper außen haben möchte, also weiß ich, dass es ein automatisches Layout sein muss Anstatt sich also darauf zu verlassen, dass Sie möglicherweise über Methoden verfügen, werden Sie möglicherweise in das Textwerkzeug eingegeben und geben Frühaufsteher Und dann nimmst du an, es muss ein automatisches Layout sein , was du mit Text nicht machen kannst. Es muss also in einem Rahmen sein. Also werde ich die Rahmenauswahl mit der rechten Maustaste aufrufen. Jetzt kann ich Autolayout machen, OK, und jetzt kann ich mein Padding und so und die Hintergrundfüllung hinzufügen mein Padding und so und Okay, um hinzuzufügen, lassen Sie mich Ihnen zeigen , dass Sie das vielleicht tun, oder? Polsterung auspressen . Da haben wir's. Das ist eine Methode, aber wir können zur Sache kommen und T für Type Tool wählen und lassen Sie uns wieder Early Bird eingeben. Okay, und geh einfach, drücke Escape, um das Textfeld zu schließen. Denn wenn Sie V drücken, um zum Move-Tool zurückzukehren , und einfach ein V-Escape erhalten und dann einfach eine Zeichenfolge an eine Komponente anhängen, weil die Komponente sie in einem Rahmen verdeckt und ein Frank einem automatischen Layout zugewiesen werden kann. Also Befehlsoption K oder Steueroption, sorry, Strg-Alt-Taste auf einem PC. Und lassen Sie uns einfach Autolayouts machen. Es ist ein bisschen schneller und es ist bereits eine Komponente. Nett, okay, und ich werde dort ein bisschen Speed Design für dein Gewicht machen. In Ordnung? Du gestaltest deins, wie es dir gefällt. Es. Es war einfach ein Auftragsrahmen und es hieß umarmen, umarmen, damit, wenn sich der Text ändert , mitfahren In Ordnung, früh fertig. Als nächstes kommt der Preis. Und weil es die meiste Arbeit erledigt hat , werde ich es duplizieren. Ich möchte kein Beispiel dafür haben und versuchen, Varianten und so, weil es so anders ist. Also schnappe ich es mir einfach dort und zerbreche es. Es heißt eigentlich Detach Instance, aber es heißt Beef or break it apart Also geht es nach B. Also das ist Command Option B oder Control Alt B von B, zerlegst es, und jetzt ist es nur vierteljährliches automatisches Layout, komisch. Kein guter Name. Also werden wir das hier nennen. Eigentlich setzen wir einfach Enterprise ein. Ich lebe in der Eurozone. Also werden wir 24, 95 haben. Du hast deinen Preis eingegeben. Ich möchte nicht als Frühaufsteher bezeichnet werden. Jetzt werden wir es uns zur Gewohnheit machen, die Tastenkombination Command R zu verwenden oder die Alpha-Umbenennung zu kontrollieren Nur anstatt dort oben doppelklicken zu müssen. Lass uns das von jetzt an machen, Dan Wilson Price. Und ich werde es darüber hinaus verschieben, aber ich möchte noch nicht, dass es sich in der Komponente befindet. Okay, also wer erinnert sich daran, wie ich die Dinge über mich halte , ohne mich ihnen anzuschließen? David hat das schon erwähnt, ich habe die Leertaste gedrückt. Sie können sehen, dass es eigentlich nicht in die Karte passt, sondern nur darauf liegt. Wenn ich nicht versuche zu entsorgen, sieh hier drüben, versuche ich reinzugehen Also bleibe ich bei der Leertaste. Es liegt einfach auf den Schichten. Also ich kann jetzt gehen, welche Farbe soll es haben? Ich werde meine lokalen Farben verwenden und beim Kauf kann Weiß verwendet werden. Die Textfarbe wird nicht weiß sein, aber ich werde anfangen, für viele Texte lokale Farben zu verwenden . Ich werde meine neutrale Farbe verwenden. Okay, die fünfhundert, irgendwie schwarz, aber irgendwie kein bisschen schwungvoll In Ordnung, also da ist, du kannst die beiden runtergehen. Ich gehe superschnell und springe einfach zu ein paar Textfeldern In Ordnung, wir werden so weit springen und es kann gestalterische Überlegungen geben Weiß sieht auf diesem dunklen Hintergrund gut aus, aber sobald sie einen hellen Hintergrund haben, wird es nicht mehr so gut funktionieren. Und so brauche ich entweder einen richtig starken Schlagschatten oder eine Backbox dafür. Und das werde ich tun, aber eine kleine Backbox drum herum, im Grunde in der Reihenfolge laut. Lass mich direkt dorthin springen. In Ordnung, lass uns hierher springen. Eine Sache, die Sie beachten sollten, ist, dass ich das nicht tue, ich habe eine Hintergrundfarbe verwendet. Ich möchte, dass es ausgeblendet wird, aber es ist alles nur ein Auftragsrahmen Worauf ich also achten muss, ist nicht die Deckkraft der Ebene zu senken, sondern die Fülldeckkraft auf 50% zu senken, denn denken Sie daran, dass die Ebene das Ganze heruntergeht Jedenfalls. Lass uns ein bisschen weiter springen. In Ordnung, los geht's Ich füge hier einfach ein Textfeld ein, das ist, dass dieses hier eine feste Höhe und Breite hat, wohingegen dieses hier schon ist, wohingegen es dehnbar Die Worte dehnen sich nicht. Ihr mögt die Zecken darin. Da ist es, die Reihenfolge der Breite mit, das war's , damit es für immer eingetippt werden kann Es ist auch eine gute Idee, einen Titel zu finden, der sehr lang ist. Ich habe es nur von einer Eventlocation in meiner Nähe bekommen, oder sollte es eine gute Veranstaltung sein? Ich bin mir sicher. Aber ich habe mich für einen wirklich langen , weil ich für einen wirklich langen Titel entwerfen möchte. Das möchte ich später nicht überraschen. Was sollte Komponente sein? Das ist wahrscheinlich nicht nur ein Textblock, der das nicht tut. Ich habe vor, dies wahrscheinlich mehrmals in der App und auch hier zu verwenden dies wahrscheinlich mehrmals . Das ist also schon Bestandteil. Dieser wird einer sein. Also Befehlsoption K, Steueroption, Strg-Alt-Taste auf einem PC, es ist Komponente. Hervorragend. Okay, das sind die Teile, die wir brauchen, damit du loslegen und sie machen kannst , während wir den Kurs durchlaufen, ich muss sie bauen. Sie wollen es nicht überspringen. Habe ich, aber es gibt einige Leute , die den gesamten Prozess gerne verfolgt haben, besonders wenn wir immer mehr Autolayouts machen, du gehst, du musst es dir ansehen In Ordnung, wir sind bereit. Es ist Autolayout-Wahnsinn. Ich verspreche, dass ich dich ab jetzt im nächsten Video sehen werde. 32. Verschachteln mehrerer Auto-Layouts ineinander in Figma: Ordnung, wir werden anfangen, uns den Mutterleib hinunter zu rebellieren In Ordnung, wir werden anfangen, uns den Mutterleib hinunter zu rebellieren, ganzer Kaninchenbau, ein ganzes Kaninchenloch mit verschachtelten Autolayouts entlang des verschachtelten Autolayouts Und besonders in diesem Fall werden wir eine einfache Verschachtelung machen Also werden wir das Out-Autolayout, das ein Frühaufsteher ist, innerhalb des Preises platzieren Out-Autolayout, das ein Frühaufsteher ist, , dass es so aussieht Und dann haben wir die Möglichkeit, daraus eine Variable zu machen, sodass wir einigen dieser anderen gehen und die ersten Wörter sagen können , die nicht zu diesem gehören, sodass wir es ausschalten können, sodass es wirklich in den richtigen Teil fließt Es reagiert ziemlich schnell. Der Einstieg ist einfach genug. In den kommenden Videos werden wir immer mehr unser Mutterleib schlitzen Kaninchenloch hinunterrutschen Aber lassen Sie uns vorerst diesen machen. Ordnung, also ich möchte, dass diese Komponente in dieses, nun ja, dieses Autolayout hineinpasst , dass sie in dieses Autolayout geht, wie kann ich das erreichen In Ordnung, also ich möchte, dass diese Komponente in dieses, nun ja, dieses Autolayout hineinpasst, dass sie in dieses Autolayout geht, wie kann ich das erreichen? Um es reinzuziehen, gehst du, warum zieht es sich hinein? Geh da rein. Ich mache es hier drüben. Ich gehe früh. Bird wird in den Preis reingehen, da ist er . Warum macht es das? Weißt du, weil die Hauptkomponenten in andere Hauptkomponenten gelangen können, also mach es besser und wenn du da rumhängst, kann ein Beispiel dafür sein und das wird hineingehen. Es ist schwer, die gleiche Größe zu gewinnen. Early-Bird-Instance, das ist der kleine Diamant dort. Geh rein in den Preis, du gehst. Es funktioniert. Es ist nicht das Layout, das ich will. Also klicke ich auf das äußere übergeordnete Element, ihre Hauptkomponente. Ich gehe runter und gehe in die Mitte. Und lassen Sie uns mit den Abstandenden herumspielen, bis Sie warten, dass es diesen Kredit für Y4 gibt Vier mal vier. Okay. Ich wollte nur sehen, wie es aussieht. Ich bin zufrieden damit. Es wird hierher passen. Ich mag es wahrscheinlich, wenn es gemacht wird, aber ich werde auf die abgerundeten Ecken verzichten müssen , damit sie dort funktionieren. Wir gehen, zufrieden damit und dass mein Freund Auto Layouts innerhalb anderer Autolayouts hat und Komponenten hineinwirft , um verwirrend zu sein, aber sie werden verwirrend, ich habe kein Hydrid gemacht Als Nächstes möchte ich es in eine Variable umwandeln. Warum? Weil ich diese Art von Autolayout-Zeug gemacht habe, weil ich den Frühbucherrabatt ausschalten wollte ausschalten wollte , weil ich nicht immer brauche, dass das Ding nicht immer zu einer Zeit ist, in der dieses Ding nicht fast ausverkauft ist Ich möchte also meine Hauptkomponenten auswählen. Ich möchte eine Eigenschaft hinzufügen und ich möchte, dass es sich bei der Eigenschaft um eine Variante handelt. Okay? Und ich weiß, dass ich Variante und Variablen quasi synonym verwende und Variablen quasi synonym Es ist eine Variante, die wir wollen. Im Rest des Kurses, wenn ich Variablen sage, meine ich Varianten, weil sie irgendwie verschiedene Dinge sind. Ordnung, diese Variable wird also beliebig sein, aber was will ich wirklich Ich möchte Varianten und ich möchte, dass auf die unterste Variante kein Doppelklick erfolgt Niemand würde das tun. Hervorragend. Also ich habe jetzt zwei davon, ich werde geklickt, klicke auf Meine Eltern Komponentensatz An der Außenseite befindet sich eine kleine gepunktete Linie, Sie erinnern sich vielleicht an den Essentials-Kurs Es handelt sich also um eine Komponente mit zwei verschiedenen Varianten. Und in dem Moment, in dem sie Standard und Early Bird genannt werden. Also sage ich und klicke auf das X, du klickst auf dieses. Okay? Und ich sage Frühaufsteher, der erste Wert wird an und aus sein. Wenn Sie Wörter ein- und ausschalten, wird es wie von Zauberhand in einen Kippschalter umgewandelt Damit meine ich, lassen Sie uns eine Instanz dieser Komponente herausziehen . Also werde ich zu meinem Vermögen gehen, mir die lokalen und Komponenten ansehen, die wir hier noch nicht waren, du würdest schwer sein. Ich habe diesen hier. Da ist es mein erster Preis. Ich werde sie rausschleppen. Und jetzt , weil ich das Wort an und aus verwende, wird es eine Variante mit diesem Kippschalter Nett. Ich möchte auch, dass diese Komponente hier drin ist. Ich möchte, dass es in dieser Hauptkomponente für meine Event-Karte enthalten ist. Ich möchte, dass dieser Text kleiner ist, damit er passt. Da. Wir gehen. Es muss irgendwie das K brechen. Wir haben ein paar Dinge zu erledigen und wir werden es auf den anderen Seiten behandeln Und was Sie feststellen werden, ist, dass es nicht sehr reaktionsschnell ist. Warum ist es hier nicht oben rechts ? Oh, du hast es. Komponenteneinschränkungen , wenn es ausgewählt ist. Ich sage dir, dass du dich auf rechts und oben beschränkst , wahrscheinlich unten, nein, oben, oben wird besser aussehen Es heißt nur jetzt und es ist hier drüben. Wenn ich die Größe ändere, reagiert es viel besser . Der Text ist kaputt. Also okay, wir reparieren das in einem anderen Video. Aber los geht's damit, dass wir uns ein bisschen darauf einlassen. Wir mussten die Layouts automatisch anordnen, wir stapelten sie ineinander . Dann wollten wir variieren. Also haben wir es zu einem Komponentensatz gemacht, was automatisch passiert, wenn Sie so vorgehen und einfach eine Eigenschaft hinzufügen. Es wird zu einem Komponentenset. Okay, wir sagen also, dass Sie die Eigenschaft der Variantenkomponente verwenden möchten , da ja, wir wollen mindestens zwei davon und dann etwas anderes machen Und es kann sein, dass es dunkel oder hell ist oder eine andere Farbe oder eine andere Größe hat. Aber wir haben einfach etwas an- und ausgeschaltet, das ist die Iturbide-Sache Und es wird gut zusammenpassen, weil es ein automatisches Layout innerhalb eines anderen Autolayouts war ein automatisches Layout innerhalb eines anderen Autolayouts Oh ja, machen wir es. Hier können wir also sagen, Ordnung, das ist ein Frühaufsteher Dieser ist es nicht. Also werde ich auf meine Komponente eingehen. Ich werde hier den Preis finden und ich kann einstellen, dass es losgegangen ist. Da haben wir's, und sogar die Mitarbeiter oben rechts. Das Letzte, was ich tun möchte, ist, dass ich mit meinem Abstand herumspielen möchte, aber dafür musst du nicht herumhängen. Ich werde das einfach so anpassen, dass es etwas höher ist und wir sehen uns im nächsten Video. Nun, ich vermisse ungefähr, wie groß das alles sein sollte. 33. Verschachtelung mit Varianten und responsivem Text in Figma: Jeder im Moment, das ist es, was unsere Little Responsive Card macht. Funktioniert irgendwie. Das sieht nach Zecken aus. Settext funktioniert nicht. In diesem Video. Wir werden dafür sorgen, dass es diese Art von Swatch-Re-Shuffles Und wir werden auch eine Variante hinzufügen. Sagen wir, wir drehen den Preis ab. Schau, die Texte sind Flows. Ja, ich habe die Schreibweise von Ägyptisch durcheinander gebracht. Das ist auch Teil dieses Videos. Eine Sache, auf die ich hier eingehen möchte , ist , dass Sie es möglicherweise verwirrend finden. Manche von euch mögen es, ein Kinderspiel zu machen, ist einfach. Für diejenigen unter Ihnen, die es schwierig und schwierig finden, müssen sie so komplex sein? Das tun sie nicht. Aber es ist gut, diese Dinge zu verstehen , sodass man komplexe Dinge bauen kann , wenn man sich am Ende auf diese komplizierteren Dinge einlässt, es macht die Dinge, die schwierig erscheinen, einfach. Der Vergleich mit Hechten schlägt uns in den Sinn. Und Sie sind vielleicht wie ich und mögen die Herausforderung, diese Dinge zu bauen, die sehr reaktionsschnell und widerstandsfähig sind , und wir können sie durchschauen und die Leute können nicht kaputt gehen, kaputt gehen. Zieh es runter, dann runter, aber ein zukünftiges Video Aber im Moment ist es gut, dass das Reflow dauert. Ordnung, wir brauchen also diesen Text-Reflow und der ist da drin Außerdem wollen wir das zu einer Variablen machen , damit wir es ein- und ausschalten können. Es gibt zwei Dinge, die wir tun müssen. Wir müssen es zu einem automatischen Layout für den gesamten unteren Teil machen, und wir müssen dafür sorgen, dass dieses Textfeld den Container füllt Also im Moment, wenn ich auf genug klicke, okay, innerhalb meines Hauptbestandteils, das ist meine Karte, habe ich das hier unten einfach eingerahmt , das als lila Schachtel begann und dass ich den Preis hineingestopft habe und etwas Text hineingeworfen habe Also das Erste, was ich machen muss, ist der gesamte Rapa, dieser Rahmen hier und er hat das automatische Layout erstellt Wir kennen die Abkürzung für diesen Schichttag, machen das den ganzen Tag und kümmern uns in einer Sekunde um das Layout. Wo willst du einsteigen und Polsterung und Rand machen? Aber lass es mich dir zeigen. Die andere Sache, die wir tun müssen, ist, dass dieses Textfeld hier im Moment eine feste Breite hat Deshalb funktioniert es nicht wirklich, wenn ich die Größe dieses Wenn wir sagen, fülle den Behälter, ändert sich eigentlich nichts, außer dass, wenn ich antworte, es den Raum füllt, vorausgesetzt, in dem Moment, in dem es an den Rand geht. Schau, was passiert , wenn wir die Größe ändern? Ich werde hinzufügen, dass sich das anpasst. Du gehst. Sie haben dieses Order Lab innerhalb dieses erlaubten Labors, das jetzt in diesem Autolayout ist, Und bevor wir das Padding reparieren, lassen Sie uns das Letzte tun und es in eine Variable umwandeln, nur um in Schwung zu kommen Muss das variabel sein? Wir machen es trotzdem. Damit die Varianz der Variablen sinkt, muss es sich um einen Komponentensatz handeln , der dasselbe ist wie eine Hauptkomponente Und wir können eine Hauptkomponente nicht scheinbaren Hauptkomponente leben. Du sagst, ich bin draußen und mache das Video aus. Wir haben einfach angefangen, uns wurde heißer. Das ist gut. Wir werden weiter üben. Du wirst hier rübergehen. Du wirst im Moment kein Bestandteil sein. Also werde ich sagen, du hörst dich jemals Meine Hauptkomponente, Befehlsoption K, Strg Alt K, du bist eine Komponente. Ich möchte eine Immobilie hinzufügen. Nun, Property, eine Variante, keine Variable. Das hat zwei Varianten. Und lass es uns irgendwo hinstellen. Schnappen wir uns den Rand und legen ihn irgendwo hin. Es ist keine Überlappung und alles in einer zweiten Variante müssen wir hier ausschalten und weil es in einem automatischen Layout ist, machen Sie es einfach dann Schau dir das an. Es ist ein automatisches Layout, was bedeutet, dass es verschwindet, alles, was wir fließen. Und weil dieses Ding sagt, Behälter füllen , nichts repariert, geht es gut, ich werde den Behälter füllen In diesem Fall füllt es sich bis zum Rand, weil etwas im Weg ist. Aber wenn nichts im Weg ist, heißt es, ich fülle es immer noch. Schau mal, wie weit ich gehe. Stell etwas da drüben hin. Wie bekommen wir es? Gehen wir zum Bedienfeld „Assets“. Lass uns eine Instanz davon nehmen und sie hier drüben platzieren. Es ist nicht am richtigen Ort. Wenn ich mir also unsere Schichten ansehe, muss ich bei diesem NACADA-Event dabei sein Jetzt werde ich mit der Polsterung herumspielen, um zu versuchen, dass sie schön aussieht Und was ich damit meine, ist das Autolayout hier im unteren Navi, ich werde einfach versuchen, alles zu drehen . Aber ich werde es in der Instanz nicht tun . Das mache ich in der Instanz. Und dann werde ich dir zeigen, wie es jedem geht, den du magst, und das sieht gut aus, das ist großartig. Schauen Sie sich dann die Polsterung auf der rechten Seite an. Du willst, dass es 16 sind. Perfekt. Okay, ich verstehe das Ding. Schau rein, süß. Und dann merke ich, dass ich an der Instanz arbeite . Was mache ich? Warum mache ich das? Sie können die Inzidenz auswählen und rechten Maustaste sagen und sagen, ich will pushen, wo gehen wir hin? Änderungen auf die Hauptkomponente übertragen. Dann wird es sich hier anpassen. Wo ist der da? Weil du es vergisst und es ist irgendwie schwer, das einfach anzupassen und dann diesen im Auge zu behalten , diesen zu korrigieren Manchmal ist es einfach , die Instanz einfach anzupassen und sie dann auf die Hauptinstanz zu verschieben . Hauptsächlich , weil ich es vergesse. Und während wir loslegen, räumen wir das auf, es ist tatsächlich hier drüben. Lassen Sie uns die Namen der Immobilien aufräumen. Das wird also der Preis sein. Und ich würde gerne, ich wähle diese kleine Option, um an und aus zu sagen. Du kannst wahr oder falsch sagen, das funktioniert auch. Ich kann mir noch andere vorstellen. Geh und hör auf. Das funktioniert nicht. Wenn Sie noch andere kennen, die diesen Coup-Kippschalter einschalten, lassen Sie es mich in den Kommentaren wissen Los geht's. Sie werden feststellen, dass sich der Boden in diesem Fall ändert. Wie repariere ich das? Ich schalte es aus, repariere es und meine Instanz, erhöhe es um ein weiteres Pixel Dann sage ich, du machst Component. pushen, bevor ich es vergesse. Wenn ich jetzt ein- und ausschalte, gehen wir los. Ein anderes Problem ist, dass ich meine gesamte Polsterung angepasst habe, als ich das anhatte , um es so zu bekommen, wie ich es wollte Ich habe es zurück zur Hauptkomponente geschoben, dem Komponentensatz hier. Aber diese sind eigentlich getrennt. Jetzt können Sie sehen, dass der Abstand in diesem Fall anders ist. Also brauche ich den Abstand dazu. Eigentlich sollte der Abstand von 1651010 derselbe sein wie dieser 1651010 derselbe sein wie Ich kann es mit Befehlsoption C kopieren , um es mit Strg Alt Z und dieser zu kopieren, also dieselben zwei Tasten plus V. Los geht's. Hoffentlich ist dieser hier drüben, was mache ich? Oh, wir haben uns ein bisschen verirrt. Los geht's. Du, mein Freund , musst da drüben sein. Du hast gesehen, wie ich es gemacht habe. Ich weiß nicht, wie ich das gemacht habe, aber jetzt kann ich bestimmt hier reingehen und das ein- und ausschalten Das Gleiche. In Ordnung, es war also gut Wir haben ein paar fehlende Punkte bei einer der Varianten gekauft einer der Varianten und gehen davon aus, dass Sie es für beide tun, dann Ihren Fehler erkennen und diese Eigenschaften kopieren und in beide einfügen können . In Ordnung, ab in den Bonus. In Ordnung, lass uns eine letzte Sache machen. Eigentlich dachte ich nur, wir haben ein paar Varianten im Gange. Ich kann eigentlich sagen, dieser hier. Meine Karte niedriger. Mein Preis hat tatsächlich einen eigenen Kippschalter. Wally, ich habe gesteuert und sie sagen, ich dachte, ich habe das gerade zum Laufen gebracht Funktioniert nicht. Das tut es tatsächlich. Es ist nur so, dass sie, es ist tatsächlich, Sie können sehen, dass es sich ausbreitet. Aber so wie der Ägypter, wenn es kleiner wäre, wäre es besser. Los geht's. Lassen Sie uns diesen Schalter einschalten. Ausschalten. Funktioniert jetzt. Es hat funktioniert, die Idee zu bekommen , aber die Linie war zu lang, um zur nächsten zu übergehen. In Ordnung, und ich bin zurück. Ich habe dieses Video beendet und das Outro gemacht Und dann dachte ich, ja, schau ein Coulomb Dadurch wird die Variable ein- und ausgeschaltet. Wenn ich also auf die untere Zeile doppelklicke, setze ich das bei einem Angebotsempfänger fort. Warum wird es aber nicht nett und responsiv Okay. Das liegt daran, dass, wenn ich auf meine untere Karte klicke, okay, die Einschränkungen und die Umschalttaste gedrückt halte, sodass wir links und rechts gehen, wo du sie von hier aus auswählen kannst. Was für eine Arbeit. Warum sind sie weggegangen? Weil es am Anfang funktioniert hat. Erinnern Sie sich an die Zeit, als ich das gemacht habe, weil ich gesagt habe , dass ich es zu einer Komponente machen muss. Also lass es uns hier rausziehen. Und ich habe ein Bauteil gemacht und es dann wieder eingesetzt. Als es hier rauskommt, hat es es wieder getan. Schau, ich habe es herausgezogen und es geht es hat es nicht herausgezogen und es nicht verloren Aber als ich all diese Sachen gemacht habe, habe ich das irgendwie verloren und bin einfach linksbündig geworden Sie gehen. Das ist das Rätsel, gelöst. Das Problem, das ich verursacht habe und das wir behoben haben. Ich tue gerne so, als ob ich sie manchmal als Lernerfahrungen einfüge Aber Mann, wenn du diese Dinger baust, als sie anfingen, komplizierte Dinge zu machen , wie wir es jetzt tun, musst du am Ende Spielautomaten testen und dann loslegen. Was ist passiert? Wie in den nächsten Videos werden wir gehen Was passiert hier? Ignoriere das für den Moment. Wir werden all das beheben und gleichzeitig Autolayout-, Component-, Variablen-, Sorry-, Variant- und Constraint-Master werden Component-, Variablen-, Sorry-, . Da haben wir's. Wir sehen uns im nächsten Video. 34. 34 erweiterte automatische Layouts: Hallo. Hallo, wir werden diese Version machen. Okay, wir haben die kleine Spalte des größeren iPhones ignoriert die kleine Spalte des größeren iPhones Wir haben hier etwas entworfen und das ruiniert und es einfach ignoriert, aber Dan, sieh mal, es passt nicht Warum passt es nicht ? werden wir in diesem Video ansprechen. Wir werden etwas machen, das schön und dehnbar ist. Es hat sowohl den Preis darunter, was fantastisch ist, den Preis, der Seite an Seite liegt , um den Raum besser zu nutzen Und es reagiert. Kannst du vier Linien sehen? Drei Linien? Zwei Zeilen. Es wird ein bisschen Wurmlochkaninchen Heilig. Okay, wir machen das Ding wahrscheinlich viel zu kompliziert, aber es macht Spaß für den Kurs, aber es kratzt auch ein bisschen am Kopf Also, wenn du das so findest wie , oh mein Mann, wird von mir erwartet, dass ich das nur für wirklich große Budgets und große Teamjobs mache? wirklich große Budgets und große Teamjobs Und selbst dann könnten diese zu kompliziert sein. Es ist vielleicht besser , nur ein paar Beispiele zu haben und den Entwickler das machen zu lassen, aber das macht keinen Spaß. Lassen Sie uns das Ganze etwas komplizierter machen , damit Sie die einfachen Dinge einfacher machen können Das ergibt Sinn. Wie dem auch sei, schauen wir uns das an, schauen wir uns an, wie viel Spaß es macht. Das Wichtigste zuerst, ich werde es einfach hierher verschieben. Meine kleine Version. Warum? Weil ich das anpassen werde. K, meine Hauptkomponente und all diese Komponentensätze K diese Varianten. Ich möchte sie also in der Nähe haben, anstatt hin und her schrubben Also gut, was stimmt nicht mit diesem? Zuallererst möchte ich einfach die Instanz zurücksetzen. Okay, du kannst schreiben, darauf klicken, es gibt eine Abkürzung. Ich kann mich erinnern, was es ist. Änderungen rückgängig machen, sieh mal, es gibt nicht mal eine Abkürzung. Deshalb kann ich mich nicht daran erinnern Okay, ich habe es ausgewählt , dass das auf ein wirklich gutes Exemplar zurückgeht. Keine Überschreibungen, das ist gut. Denn dann kann ich so weitermachen und wissen, dass ich nicht wirklich, es gibt nicht allzu viele Änderungen an dieser Sache Das große Problem ist also , dass ich zuallererst möchte, dass der Preis darunter liegt, weil er nicht wirklich in dieses kleine zweispaltige Layout passt. Also lass uns das machen. Wir haben keine zwei Spalten. Was nett wäre, wäre, wenn Sie auf die Instanz von My Card Lumber klicken und dann, alles klar, automatisches Layout, los, runter, Sie gehen nach rechts, gehen Sie runter Das wäre einfach, aber du kannst es nicht auf der Instanz machen. Ich schwöre, das könntest du früher machen. Okay. In den Tagen von Figma, aber ich weiß nicht, aber ich kann das nicht wirklich beweisen, also ist es vielleicht nie passiert Also müssen wir es wieder hier mit meiner Hauptkomponente machen , die eine Variante ist , tut mir leid, eine Variable Ich möchte die Hauptversion nicht ändern , weil das dort gut ist. Dieser hier ohne den Preis ist in Ordnung, also brauche ich einen anderen. Ich werde das erste machen , weil da der Preis drin ist. Und ich werde sagen, dass Sie dieses vertikale Layout haben können. Es funktioniert fast. Ich werde ihm etwas Platz geben. Ich werde auf „Es ist rausgesprungen“ klicken , es ist allen rausgeschmissen es ist allen rausgeschmissen Neues Update für Figma. Hier gibt es diese neue Option mit der Aufschrift Wrap. Wenn du fragen könntest, wäre es so, als könnten wir das anstelle dieser dritten Variante tun , um sie übereinander zu stapeln? Die Antwort lautet nein, es wird bei uns nicht funktionieren. Es eignet sich besser für Dinge wie nur einen Stapel von Symbolen, einen Stapel wiederholbarer Genau das Gleiche, was wir tun, ist, sie zu stapeln, aber wir wollen auch den Text so ändern, dass er zentriert wird Wir möchten, dass die Größe geändert werden kann. Das Verpacken wird also nicht funktionieren. In diesem Fall gibt es zu viele Dinge, die wir im Nachhinein ändern wollen , die aber nicht gelöst werden. Wir werden uns später im Kurs mit Rappen befassen. Es ist wirklich nützlich, funktioniert nur nicht für dieses Video. Und die andere Sache ist, dass ich aktualisiere. Ist dieses Video wirklich schwer. Ich habe es am Anfang irgendwie gesagt, aber wenn du dich in diesem Video verirrst, denke ich, dass jeder, okay, sogar ich, wenn ich mir dieses Video ansehe, verloren gehen könnte. Okay, zum ersten Mal ist das eine knifflige Sache. Verschachtelte verschachtelte Instanzen. Es wird, ja, es wird ziemlich unheimlich und wenn man zum Ende kommt, denkt man, oh, ich habe Teile davon, aber es ist Das ist okay, es war ein kniffliges Video. Ich habe versucht, früh mit einigen fortgeschrittenen Dingen klarzukommen. Im Grunde genommen sind viele der Dinge, nach denen ich gefragt wurde, als die Leute den Kurs für Fortgeschrittene wollten, wir wollen automatische Laute und wir wollen verschachtelte Autolauten und wir wollen Meister der automatischen Laute werden Ich habe das Gefühl, dass das vielleicht schwierig sein könnte, wenn du gerade den Grundlagen-Kurs hinter dir hast den Grundlagen-Kurs hinter Aber ja, mach es. Wenn du es nicht verstehst, mach dir keine Sorgen. Die meisten Leute finden das wirklich schwierig. Im Laufe des Kurses wird es einfacher und diese Dinge werden sich im Laufe der Zeit verdoppeln. Da hast du's. Das Verpacken behebt das nicht, und ja, das ist ein superhartes Video. Ich hoffe es gefällt dir trotzdem. Ordnung, mach weiter. Okay, ich werde da hingehen. Ich will nicht rausspringen. Wie schaffe ich es nicht, dass es herausspringt? Oh, erinnerst du dich an die Abkürzung? Halten Sie die Leertaste gedrückt. Okay, fange zuerst an zu ziehen, dann halte die Leertaste gedrückt, springe nicht heraus Die andere Sache ist, ich kann darauf klicken und es einfach in der Größe ändern, oder ich kann mein süßes Tastenkürzel verwenden Wir haben schon früher gelernt, eine Art Rahmenauswahl, das hier. Aber das Tastenkürzel sind alle Tasten plus R. Also nennen wir das Äußere ausgewählt. Wählen Sie eine Wahltaste oder drücken Sie Olt Shift und drücken Sie R. Zu viele Abkürzungen Dan, können Sie die ignorieren , die Sie nicht wollen Und dieser hier ist großartig. Es ist oben und unten. Und ich kann hier raufgehen und sagen, dass du weder ein- noch ausgeschaltet sein wirst. Der Kippschalter ist kaputt, okay? Der Preis für mich beträgt drei, okay? Das ist der. Jetzt, wo wir mehr als zwei haben, okay, wir hatten ein- und ausgeschaltet, und das hat super funktioniert. Wir haben einen Kippschalter gebaut, etwas wie einen Kippschalter mit drei Einstellungen , also geht er einfach kaputt Also wählen wir das aus und gehen zu unseren Optionen hier für unsere Immobilien und sagen, dass es Sinn macht, wenn der Preis immer noch gut ist Immobilien und sagen, dass es Sinn macht, wenn der Preis immer noch gut Sie können groß sein und wir können klein sein. Das macht mehr Sinn. Also kann ich jetzt raufgehen und sagen, ich will den kleinen. Vielleicht sind horizontale Layouts besser. Ja, das ist sowieso besser. Also müssen wir ein paar Dinge tun, wenn ich das ändere und es so aussieht, als ob es funktioniert, aber das ist es nicht. Wackeln Sie mal. Okay. Du kannst sehen, dass es irgendwie funktioniert, diese Strecke. Es geht nicht darum, die Höhe zu dehnen, was wahrscheinlich die Hauptsache ist. Die andere Sache, die ich tun werde, ist diesen Teil einfach auszuschalten. Ich werde den Augapfel ausschalten , weil wir das in einem zukünftigen Video korrigieren werden Es wird dem, was wir hier machen, sehr ähnlich sein. Also Teile davon funktionieren, Teile für nicht. Die erste Sache ist, wie ich das Ding dazu bringe, am Boden zu kleben. Und hier mache ich sogar irgendwie das, was ich mache. Und ich weiß, dass ich auf Anhieb nicht genau weiß, was es ist, aber ich werde Ihnen meine Methode zeigen, es durchzugehen und es einfach herauszufinden, dauert nicht allzu lange Manchmal stolpert man beim ersten Mal darüber. Was könnte er also tun? Das ist wahrscheinlich der Höhepunkt dieses Dings, okay? Oder die Einschränkung. Schauen wir uns die Einschränkung an. Wir können also sagen, liegt es an diesem Ding? Nein, nicht die diesbezüglichen Einschränkungen. Du hast sie, aber das ist ein Teil, der da drin ist. Das ist mein Hauptbestandteil für meine Veranstaltung. Ich kann also auf diesen klicken und sagen, du bist von unten nach oben, sozusagen. Bitteschön. Ich hatte nicht wirklich einen Plan, für welchen ich im Laufe der Zeit raten würde . Und wir haben einiges davon richtig gemacht. Okay. Das Problem ist jetzt, dass es am Boden klebt, was toll ist. Es wächst einfach nicht. Warum wächst es nicht? Also lass uns dasselbe tun. Schauen wir uns das an und sagen warum wächst du hier nicht? Es ist ein umarmender Inhalt, was ich will, und das tut es nicht Vielleicht sind es die Einschränkungen, in denen es funktioniert, vielleicht ist es das. Lass uns darauf klicken. Das ist die Hälfte von dem, was ich wollte. Ich wollte, dass es in den Mittelpunkt rückt. Okay, das ist es also. Und dieser Text hier, während ich hier bin, möchte ich, dass er zentriert ist. Da hast du's. Aber es wächst immer noch nicht. Warum wächst es nicht? Du draußen wächst nicht. Okay. Also ist es nicht, das ist ein Teil davon, ja, dieses, vielleicht auch nicht. Also, dieser hat eine feste Höhe, sodass er den Inhalt eng anschmiegen kann Vielleicht hier unten, vielleicht sind es die Einschränkungen unten Und das ist das lustige Spiel, bei dem es darum geht, was kontrolliert. Wenn Sie innerhalb von, verschachtelten automatischen Layouts verschachtelt sind, kann das ziemlich knifflig sein, weil es manchmal gar nicht das automatische Layout ist In diesem Fall wette ich, dass es das Textfeld ist. Ich werde diesen benutzen. Okay? Und ich werde dir sagen, dass du keine feste Größe hast. Ich möchte, dass du den Behälter füllst und den Inhalt umarmst. Nun, es funktioniert irgendwie, aber das ist es nicht. Ich glaube, es ist dieser Typ, du, mein Freund, hast feste Größe, das ist ein großer Inhalt, es ist ein Füllbehälter Nee. In Ordnung. Ich mache eine Pause und setze meinen Denkhut auf und versuche herauszufinden, was es ist. Ich sollte mich mehr vorbereiten. In Ordnung. Ich habe es nicht getan, aber ich habe darüber nachgedacht. Ich denke, ich kann es tatsächlich als Instanz machen und sagen: Inhalt umarmen, Behälter füllen Nein, Inhalt umarmen nein, Behälter füllen. Oh, ich dachte, das war's. In Ordnung. Zurück zum Nachdenken, oh, vielleicht ist es die Karte, nicht die eigentliche Schachtel. Also gehen wir, es ist fest, Höhe schwer, da wir es geschafft haben. Teamwork. Weiß Dan überhaupt, was er tut? Nicht, wenn wir diese tief in diese automatischen Layouts und seine Varianten zusätzlich zu diese automatischen Layouts und den automatischen Layouts einarbeiten, kann es knifflig werden. Also, wenn du Probleme hast, sagst du, Mann , ich habe ewig gebraucht, um zu trainieren, mach dir keine Sorgen. Wenn du nicht gerade etwas Einfaches tust, kann es eine Weile dauern, bis du es herausgefunden hast. Das ist sowieso meine Ausrede. Okay, was werden wir hier machen? Ich möchte den Abstand hierher verschieben. Ich möchte es öffnen, aber ich kann es auf dieser Instanz machen, dann muss ich es auf allen machen. Also werde ich einen Schritt zurückgehen und sagen, da ist tatsächlich ein bisschen Polsterung drin Oh, da ist noch ein Wort. Also, was ich auch tun muss, ist mit der Abstandsgröße herumzuspielen, tut mir leid. Also 18 wird nicht funktionieren , oder? Also werde ich meinen Abwärtspfeil benutzen, wahrscheinlich auf 16 gehen und ich werde, wenn der Entwickler das baut, eine Zeichenanzahl haben müssen, damit sie nicht eine Zillion haben und die Größe des Ganzen irgendwie übertreiben In Ordnung, das ist also die Größe. Ich muss sagen, du brauchst etwas kleinere Polsterung. Hier bist du Lassen Sie uns es testen, nur um sicherzugehen, dass wir es nicht kaputt gemacht haben, damit es richtig funktioniert. Schauen wir uns seine anderen Körper an, wie die Instanz, in der eine große untere Karte drin ist. Okay, und es funktioniert. Würde ich es jetzt einfach stehen lassen? Müssen wir es auf drei reduzieren? Lass es uns tun, weil wir bereits gelernt haben, was es ist. Wir haben gelernt, dass es der Text selbst auf der Instanz ist, der auf Umarmen gesetzt werden muss und dass der Elternteil bereits zur Umarmung geschickt werden muss Da haben wir's. In Ordnung, nett. Lass uns noch eine letzte Sache machen, denn das ist keine wirklich gute Raumnutzung. Lass uns das Seite an Seite machen, okay? Und denk dran, ich kann nicht reingehen, in meinem Fall, wie am Anfang, ich kann dich nicht sagen, oder? Also kann ich zu diesem zurückkehren. Ich möchte ein Duplikat davon. Ich werde D sagen, und was ich damit meinte, ist Befehl D oder Steuerung D. Und dieser hier kann so gehen. Klicken Sie auf die Außenseite, alle Tasten plus R, es ist Befehls-Option-Shift oder Strg+Umschalt-Taste und drücken Sie R. Okay, und was ich tun möchte, ist, dass mein Schalter wieder kaputt Lass uns einen Blick darauf werfen. Lass uns auf das Set klicken. Klicken wir hier auf die Einstellungen. Frühaufsteher ein, aus und dann horizontal. Okay. Oder ja, ich denke, das ist besser. Nun, ich kann zu diesem gehen und sagen, dass Sie horizontal sind. Mehr Platz. Haben wir ein Monster geschaffen? Wir haben hier auf jeden Fall ein Monster geschaffen. Würde ich so etwas machen? Ja. Es macht Spaß, Figma dazu zu bringen, sich meinem Willen zu beugen Bart, habe ich einen halben Tag damit verbracht, es zum Laufen zu bringen? Wahrscheinlich. Ist es das wert? Es wird vom Job abhängen. Größere Designsysteme, bei denen viele Leute es auf einem Seitenelement verwenden , das häufig verwendet wird. Sicher. Auch wenn du nicht zu weit in dieses Kaninchenloch vordringen , in dem all diese Dinge stecken. Tun Sie es für diesen Kurs, damit Sie sich wirklich daran gewöhnen können , zu mögen, wonach Sie suchen müssen. Und, weißt du, wenn du Probleme mit einer vielleicht weniger komplizierten Anlage in Figma al hast , oder? Das ist es. Ich werde dich im nächsten Video sehen. 35. 35 Responsive Texte: Eins. In diesem Video werden wir dafür sorgen, dass der Name des Veranstaltungsorts im Preismodul für Frühbetten an erster Stelle steht. Okay. Also diese Art der Anpassung ist jetzt im ursprünglichen Kurs etwas flüssiger Okay. Ich habe es aufgenommen und konnte einfach nicht herausfinden, wie es geht. Ich habe mich einfach so verirrt. Stattdessen hatte ich ein Platzhalter-Video, in dem stand, dass mir jeder im Kurs geholfen hat Und ihr habt geantwortet. Unten gab es viele tolle Kommentare. Okay, darüber, wie Sie dieses Problem lösen könnten. Und ich glaube, ich habe es auf das Nötigste reduziert Es war ein echter Wahnsinn für mich. Du hättest das Originalvideo sehen sollen. Es ist irgendwie verzweifelt, ich bin vom Weg abgekommen. Zum Glück habe ich euch Hilfe bekommen, und die eigentliche Lösung ist ziemlich einfach. Ordnung, lassen Sie uns einsteigen. In Ordnung, zuerst habe ich meine Hauptkomponente. Ich werde eine Instanz davon herausziehen. Okay? Weil ich zurück zu meiner Hauptkomponente gehen möchte und ich möchte sagen, dass es sich dabei um Think oder Frame Four handelt, was für mich quasi der Name eines Veranstaltungsortes Ich werde ihn zunächst umbenennen und ihn Veranstaltungsort nennen Okay. Und Sie werden feststellen, dass es irgendwie funktioniert. Aber sobald es auf ein paar verschiedene Linien aufgeteilt wird, verschwindet es einfach. Ursprünglich war es in diesem Video irgendwie die falsche Reihenfolge, ich konnte es einfach nicht herausfinden. Meine wichtigste war , oh, schnapp dir das einfach und sag Einschränkungen. Lass es uns nach unten bringen und es funktioniert immer noch nicht. Also habe ich mich irgendwie verlaufen und um deine Hilfe gebeten und du hast es getan, du hast geliefert. Okay. Also die Art und Weise, das zu beheben, ist okay. Ich gehe zurück zu meiner Hauptkomponente. Ich habe hier zwei Dinge ganz unten, den Veranstaltungsort und die Preisgestaltung ganz unten. Okay? Dieses Ding heißt Price, aber da sind alle möglichen Dinge drin. Das sind die beiden Teile unten. Was ich tun kann, ist beide glatt zu machen. Ich mache es hier in den Schichten, okay. Und ich schreibe Click, jetzt klicke ich einfach hier und sage, wickle diese in einen Rahmen ein, aber nicht nur in den alten Rahmen. Und automatisch raus, okay, und du machst so, oh, tolle Pausen. Es wird schlimmer als das, was es war. Also müssen wir einen Frame umschließen, geben wir ihm einen Namen statt Frame sechs, nennen wir ihn Wrapper Dieser Wrapper muss ein paar Dinge tun. Er muss Einschränkungen haben. Lass es uns auf den Boden legen, was großartig ist. Lass es uns ganz nach links und rechts laufen lassen. Es funktioniert immer noch nicht. Es funktioniert so, als ob ich in den Wrapper doppelklicke , okay, das ist dieses Ding hier, das ein paar meiner Teile enthält, meinen Veranstaltungsort und meinen Preisblock Okay. Es geht nach links und rechts. Kannst du es sehen? Lässt sich bis zu den Rändern wickeln. Aber dieser unterste Block bleibt nur hier hängen. Warum? Lass uns einen Blick darauf werfen. Lass uns darauf klicken. Ich bin in meiner Hauptkomponente, eigentlich nicht. Ich bin in meiner Instanz im Bereich Meine Hauptkomponente löschen, werde unten auf „Gehe zu diesem Preismodul “ klicken . Und ich werde sagen, eigentlich möchte ich nicht, dass du eine feste Breite hast. Ich möchte, dass du den Behälter füllst , in dem sich die Verpackung befindet Und der Verpackungsbehälter sagt, ganz links sein, ganz rechts sein und unten kleben Jetzt sind wir in Ordnung, das ist die Lösung. Was am Ende passieren könnte ist eines der Dinge , die ich gefunden habe , als ich damit herumgespielt habe, um zu versuchen, es zum Laufen zu bringen, ist, dass dieser Text hier im Moment vielleicht geändert werden muss um den Behälter zu füllen Es kann standardmäßig ein fester Wert Am Ende erhalten Sie etwas, das funktioniert, aber nicht ganz Okay, dehne es sogar aus. Wenn ich zu diesem Text gehe, muss dieser Text von fest zu gefüllt werden. Es gibt einige skurrile Dinge mit Figma. Ja, da hast du's. Hat funktioniert. Danke an die Hilfe deiner Leute. Danke vielmals. Wenn deins ein bisschen anders ist und es immer noch nicht funktioniert, werde ich ein paar Dinge tun, schau dir die Kommentare an, denn es gab ein paar andere Lösungen. Ich hatte das Gefühl, dass das die einfachste , am meisten synthetisierte Version Die andere Sache, die ich tun werde, ist meine Hauptkomponenten durchzugehen Lassen Sie uns also all die verschiedenen Teile schließen. Und du kannst auf dem Bildschirm sehen, welche Einstellungen ich hier habe . Das ist meine Vent-Karte, okay? Es ist kein Öl raus. Nur ein grundlegender Hauptkomponentenrahmen. Dann habe ich diesen Wrapper. Okay, dieser Wrapper, ich gebe dir die Möglichkeit, ihn anzuhalten und zu sagen, oh, okay, er ist repariert und umarmt und verschiebe ihn nach links und links und rechts und unten Arbeite dich einfach durch deine verschiedenen Teile. Okay. Wir sehen uns. In einem Veranstaltungsort befindet sich nur das Textfeld Sie den Veranstaltungsort aufrufen können, auf den diese Einstellungen angewendet wurden. Okay. Das Preismodul hat alles im Griff und Sie können sich die Einstellungen für das automatische Layout ansehen Gehen Sie es einfach durch und überprüfen Sie es einfach und vergleichen Sie es mit Ihrem, falls es nicht funktioniert Schauen Sie sich also die Ebenenstruktur hier an. Was ich mit den Designoptionen gemacht habe, Venue Wrapper, vergleichen Sie einfach Ihre. den anderen Dingen klicken wir auf den eigentlichen Text selbst, damit Sie sehen können, ob sich etwas von Ihrem unterscheidet . Ghetto-Funk Und das Preismodul. Da hast du's. Und wir sollten in der Lage sein, es von Off auf Horizontal umzustellen . Und man kann sehen, dass es uneben wird und es passt immer noch, weil das Ding auch mitfährt Gut. Gut, das ist es. Viel Glück mit dem Video Ich werde es im nächsten sehen. 36. Abstrakter Gradientenhintergrund in Figma auf die einfache Weise: Hallo alle zusammen. Wir werden diese kleine Animation mit verschwommenem Hintergrund mit Farbverlauf machen . Wir werden es uns irgendwie von dieser Seite hier ausleihen, stripe.com, okay, jeder Animierter Farbverlauf. Kannst du sehen, wie es den Hintergrund bewegt? Wir werden es zunächst schnell und einfach und dreckig machen. Wir animieren nur ein Bild, hauptsächlich um unsere Animationsfähigkeiten zu Erinnern wir uns an all die Dinge, die wir im Grundlagenkurs gemacht haben, um sicherzustellen, dass wir alle am selben Ort sind. Und wir werden mit Gradientennetzen und guten Sachen, guten Abkürzungen und auch hier immer weiter fortgeschritten mit Gradientennetzen und guten Sachen, guten Abkürzungen und auch hier Aber ja, lass uns das in Figma machen. In Ordnung, beginnen wir mit der Erstellung unseres Willkommensbildschirms. Wir werden es hier unten machen. Wenn die Taste gedrückt ist, benutze ich das Telefon, iPhone 14. Es wird an einer beliebigen Stelle platziert, sie hier unten starten und ihnen einen Namen geben. Das wird mein Willkommensbildschirm sein. Das wird der erste Willkommensbildschirm sein. Wir werden in dieser Animation Bild für Bild machen und dann zeige ich Ihnen in einer kommenden Animation , wie Sie es schicker machen schicker In Ordnung, ich will alle Details dazu. Ich gehe, ich werde diesen Rahmen streichen , weil ich die abgerundeten Ecken in der Hintergrundfarbe haben möchte in der Hintergrundfarbe Also verwenden wir Command Option C zum Kopieren, das ist Control Alt C auf einem PC. Und die gleichen Tasten plus V geben mir meine Hintergrundfarbe und können meine abgerundeten Ecken sein. Lass uns ein Plugin verwenden. Und jetzt gibt es ein paar Plugins, um das abstrakte Bild zu bekommen, das wir verwenden werden. Also werden wir das Bild animieren , oder? Anstatt sie alle getrennt zu machen, was wir gleich tun werden, fangen Sie einfach an, werden Sie komplizierter. Jetzt verwende ich einfach Unsplash und besorge mir kommerzielle Bilder für dieses Bild, besorge mir einen abstrakten Hintergrund Wenn Sie bei der Suche Farbverlauf eingeben, werden Sie feststellen, dass es eine Menge Gradientenhersteller gibt , die entscheiden, wie das Kostüm aussehen soll. Okay, nicht wirklich erforderlich weil wir unsere eigenen Farbverläufe zeichnen können Aber fangen wir einfach mit einem Bild an. Okay, es ist Unsplash und ich werde abstrakt verwenden. Und ich werde einfach den ersten benutzen. Jetzt möchte ich es nicht in den Hintergrund stellen , weil ich es animieren möchte Ich möchte also nicht, dass es ein Hintergrund für diesen Bildschirm ist. nehme einfach meinen F2 für den Frame und zeichne größer als mein Handy, weil ich ihn dort hin und her bewegen möchte , während es ausgewählt ist Klicken Sie darauf. Und lass uns sehen. Da haben wir's. Eigentlich möchte ich wahrscheinlich all die verschiedenen Farben sehen können , damit ich sie verschieben kann. Und ich muss mein Plugin schließen und sicherstellen, dass es sich im Frame befindet. Also du Es ist irgendwie falsch gemacht , weil ich den Rahmen um das Telefon herum mache Es ist irgendwie durcheinander. Also ziehe ich es nach oben. Kein Willkommensbildschirm. Geh da raus, bitte. Da ist es. Kannst du die kleine Linie sehen, die erscheint, damit es jetzt nicht wieder passiert. Also drinnen, draußen, los geht's. Und du kannst da draußen reingehen. Es ist ein bisschen eins. Siehst du die kleine Linie dort? Es, es zoomt rein, schaut nach draußen, nach innen. Frames werden Gradient heißen. Fügen wir etwas Text hinzu. Jetzt habe ich einige Texte hinzugefügt. Das einzige, was passiert ist, ist, dass es automatisch in den Rahmen gelegt wurde , den ich Farbverlauf genannt habe, nur weil ich darin gezeichnet habe. Also werde ich es herausziehen, sodass es nicht innerhalb des Farbverlaufs liegt. Es ist einfach neben N und muss oben sein, und wir gehen, in Ordnung, also werde ich zwei von diesen Befehlen D oder Control D auf einem PC haben diesen Befehlen D oder Control D auf einem PC Es wurde nett umbenannt: Eins zu Bildschirm Zwei. Jetzt müssen sie geändert werden. Ich klicke auf den Verlauf selbst und du kannst alles tun, nur eine kleine kleine Drehung , um den falschen zu betrachten. Dieser. Okay, und ich will, was werde ich tun? Ich werde es bewegen. Und ich werde es ein bisschen drehen und wahrscheinlich auch ein bisschen skalieren. Los geht's. Der Trick hier besteht nun darin, diese beiden mit Shift zu verbinden, um sie hinzuzufügen. Ich möchte auf den Prototyp umsteigen. Also werden wir die Abkürzung lernen. Haben wir es schon gemacht? Ich bin mir nicht sicher. Shift E. Okay. Wechseln Sie zwischen Design und Prototypen, denn ehrenwerterweise, sobald Sie diese letzte Phase eines Designs erreicht haben, wechseln Sie am Ende zwischen den beiden Lasten hin und Es gibt verschiedene Abkürzungen, um diese zu verwenden, wenn Sie es wissen Ambit Shift ist entweder nur ein guter Umschalter. Also sei beim Prototyp. Klicken Sie hier auf diesen Rahmen. Und ich möchte sagen, du gehst zu diesem. Du hast vielleicht das gleiche Problem wie ich. Das ist mir vor diesem Kurs noch nie aufgefallen. Aber mit diesem großen Hintergrundbild hier kann ich den kleinen Punkt nicht fassen und springe immer wieder zum Minus, Minus. Sie können sehen, dass es zum Außenrahmen springt. Was ich jetzt tun werde, ist dass ich auf dem Gradientenverlauf eine auswählen und sie einfach irgendwie sperren werde, was Command Option L, Control Alt L ist, aber das ist es nicht Es ist Command Shift L. Also Command Shift L, Control Shift L auf einem PC als Abkürzung benutzt du Lasten. Lass mich, ich lasse das Shortcut Sheet rein. Das heißt nur, dass es jetzt nicht versuchen wird, darauf zu klicken. Jetzt siehst du meine kleinen Punkte , von denen ich wollte, dass du da hingehst. Was ich will, dass du tust, nicht auf Abruf. Nach einer Verzögerung. Bleib ein bisschen hier. Wie lang? Ich wollte es eigentlich nur zum Umdrehen bringen. Ich möchte nicht, dass es lange auf dem Bildschirm wartet, ich wollte nur direkt hierher kommen. Aber wie kommt es dorthin? Nicht sofort. Ich wollte über Smart Animate dorthin gelangen. Es ist mein Animate. Es wird sich nur die Dinge ansehen , die sich in Animate zwischen ihnen geändert haben, okay, und, äh, nun, falls sich die Tics nicht geändert haben, aber das Hintergrundbild schon Wie lange soll es dauern? Lassen Sie uns es einfach als Standard belassen und einen kleinen Blick darauf werfen. Eine weitere Tastenkombination, die wir in diesem Kurs lernen werden , ist die Strg-Alt-Taste der Enter-Taste auf Ihrer Tastatur, um eine Vorschau einer weiteren, sehr praktischen Tastenkombination anzuzeigen. Zu viele Abkürzungen , ich, ich werde versuchen , sie einzuführen. Bieter. Kannst du den hier sehen? Um einen Blick darauf zu werfen, gehe ich noch einmal zurück. Das Laden hat nur eine Weile gedauert. Deshalb habe ich es nicht gesehen. Okay. Und es ist einfach nicht sehr nett. Wenn Sie zu einer anderen Seite gewechselt sind, Sie sicherstellen müssen, dass Sie auf Vorschau klicken, wählen Sie einfach den ersten Bildschirm aus. Thin Hit Vorschau. Und was ich tun muss, ist, dass ich diese Animation hier brauche , ohne Verzögerung, naja , von Smart Animate Ich werde locker rein und raus gehen, weil es gut aussieht. Und wie lang waren es 1.000 Millisekunden und eine Sekunde. Also ich wollte noch 5 s länger laufen, genau das, 50 s. Du kannst die Play-Taste drücken. Wenn Sie sich nicht sicher sind wo die Moderatoren sind, können Sie sich die Abkürzungen ansehen Okay, aber wir verwenden die Befehlsoption P, Strg Alt P. Dadurch wird das letzte Plugin geöffnet. Also dieselben zwei Schlüssel, aber du bist nicht in P. Dan, komm schon. In Ordnung, es ist eine Vorschau Es dauert eine Weile, bis das riesige Bild geladen ist. Also mein Fall, ich kann es nicht einfach loslassen, weil es quasi halbwegs dazwischen steckt . Ich drücke die Zurück-Taste. Sieht aus, als würde es animieren und sich bewegen und solche Sachen machen Und wir haben eigentlich nicht viel getan, um das Bild eines anderen einzurahmen. Auch sehr einfach zu implementieren. Auf der Entwicklungsseite ist es nur ein Bild, das sich bewegt, skaliert und rotiert, was einfach zu bewerkstelligen ist In Ordnung, das ist es. Ich füge noch ein bisschen mehr Schwung hinzu auf diesen klicke, drücke ich Command D, um eine weitere Version davon zu erhalten. Und mit diesem hier möchte ich zum Anfang zurückkehren. Zuallererst muss ich damit beginnen, einige dieser Erweiterungen zu sperren, um diesen Verlauf zu animieren, bevor ich ihn entsperre Ich werde versuchen, etwas Cooles zu erraten, aber oh, gutes Argument. Wie bekomme ich es, wenn ich aufgehört habe, herumzuspringen? Was ist los? Merken Sie sich die Abkürzung , um Dinge irgendwie in den Rahmen zu stecken Das stimmt. Sobald Sie mit dem Ziehen beginnen, halten Sie die Leertaste gedrückt Und dann bleibt es in diesem Rahmen. Oder was für ein toller Nutzen dieser Abkürzung, Dan. Ich tue so, als wäre das Teil meiner Notizen dort. Ja, das ist gut genug , dass ich es drehe. Ich kann mich auch nicht an einen Skalar erinnern. In Ordnung, und ich muss sicherstellen, dass Sie in den Prototypmodus wechseln Ich kann diesen Punkt nicht mehr ganz sehen. Warum? Oder das Ding im Hintergrund. Das passiert normalerweise nicht. Lass es mich in den Kommentaren wissen, wenn du willst, es passiert mir auch, oder es ist nur du, falls ich meinen Farbverlauf und diesen hier auswähle, vielleicht ist es die Abkürzung. Das stimmt. Command Shift L zum Verriegeln. Du wirst dich nie an den Maulwurf erinnern. Das ist okay. Ich werde mein Bestes tun, um sie zu verprügeln , lassen Sie uns sie alle einsperren. Das Sperrsymbol können Sie natürlich auch einfach anklicken. Und jetzt möchte ich sagen, dass du den Punkt nicht wirklich sehen kannst. Das sehe ich. Los geht's. Es ist nur ein bisschen heiß anzusehen. Da haben wir's. Es sollte sich an das Letzte erinnern, was du getan hast. Ich mache 10.000 s oder habe ich 10 s gemacht, jetzt habe ich 50% gemacht. Was nicht? Das kannst du nicht tun. Hi, was ist dieser Typ? Wir haben heute alle etwas gelernt. Nur damit du so hoch gehst, wie du willst, 10 s. In Ordnung, lass mich gehen und lass uns das machen Und ich möchte, dass es zum Anfang zurückkehrt. Also ich möchte, dass du einfach zu dem Zeitpunkt zurückkehrst, wenn es fertig ist , mit den gleichen Dingen. In Ordnung, hoffen wir, dass das gut aussieht. Klicken Sie auf dem ersten Bildschirm auf einem PC auf Option, kehren Sie zurück und drücken Sie die Alt-Taste. Manchmal muss ich das Ding ein bisschen wackeln lassen. Wir kehren zu meinem ersten Bildschirm zurück. Was macht irgendwas, es ändert seine Farbe, es bewegt sich langsam, allmählich Es bewegt sich nur ein Bild, das ziemlich cool ist und nicht ganz funktioniert. Lassen Sie uns herausfinden, warum Sie dorthin gelangen und aufhören. Also geht es dir so, hast du das gemacht? Kehren Sie zu diesem Bildschirm zurück und animieren Sie Smart Animate Sie per Fingertipp haha, nach einer Verzögerung, um dasselbe in diesem Bildschirm zu tun Hat irgendwas davon funktioniert, Dan You on Tap? Wenn es funktioniert hat, gute Arbeit, Dan. In Ordnung. Die andere Sache, die vielleicht anders ist als deine, du hast vielleicht alle deine Bildschirme gesehen , als du hier reingegangen bist. Und es könnte auf einem zufälligen Bildschirm gestartet worden sein , anstatt auf dem ersten hier. Und wenn du die Zurück-Taste drückst und sie dir alle schnappst, okay, also denk daran, dass du diesen ersten Bildschirm tatsächlich kleben und einen Flow starten kannst diesen ersten Bildschirm tatsächlich kleben und einen Flow starten Man kann sagen, dass es das manchmal automatisch macht, okay, manchmal nicht. Du kannst also Start Flow sagen. Wenn Sie also in diesem Frame auswählen, springt es nicht um die anderen Frames herum. Es wird also bei dieser beginnen, was es einfach macht, wenn Sie neu starten möchten, nämlich bei der Archaea Kannst du hier unten Hockey sehen, lass uns gehen. Achtel. Es ist okay, es muss mehr rotieren und skalieren. Ich wette, du benutzt es sieht besser aus. Suchen Sie sich also ein anderes Bild. Ich versuche es nochmal und repariere meins. Warte, sie sind eigentlich eine Sache, bevor ich das mache, ich wollte nur darauf hinweisen dass es die Option gibt, diese Option zu verwenden, alles zu vereinen, einfach das zu tun. Es wird nicht funktionieren, was wir im Moment machen wollen , wir werden es später machen. Es ist fantastisch für fortgeschrittene Prototypen, aber im Moment kehrt es nur zu dem Rahmen zurück, aus dem es stammt. Es wird also nicht zurück zum Loop gehen. Es wird nur auf diesen zurückgehen. Also wird es hier weitergehen und dann zurück zu diesem Thema. Und es ist nicht so nützlich, wenn wir Abschnitte und ein bisschen lernen, was fortgeschrittenes Prototyping ist, das ist super Benutze es aber im Moment nicht. Geh einfach zurück zu diesem hier. In Ordnung, mach mit dem Video weiter. In Ordnung, also lass mich zurück und irgendwie damit herumspielen und ich wette, du wirst ein bisschen Kieferlinie machen, es sieht einfach so aus, als würde es sich bewegen Also spiel ein bisschen damit herum. Es fühlt sich an, als würde es skalieren und so. Das ist irgendwie bitter, da anzukommen. Aber wie dem auch sei, alles was ich getan habe war ja, zurück zu gehen und zu skalieren und die Rotation ein wenig zu ändern. Es gibt viel Versuch und Irrtum. Ich werde noch eine letzte Sache zusammen mit uns machen. Lass es uns verwischen. Wir werden uns also alle Willkommensbildschirme schnappen. Du. Und ich mache Schicht E, um zurück zum Design zu gehen. Und lassen Sie uns allen einen Effekt hinzufügen, keinen Schlagschatten oder Ebenenunschärfe. diese Option geschnappt und sie hochgeschraubt, ich ziehe sie einfach Los geht's. Mal sehen, ob es dadurch besser wird. Befehl, Option, Eingabetaste, Strg, Alt, Eingabetaste für eine Vorschau. Lass mich gehen. Studienangebot. Ich bin mir nicht sicher, warum das passiert. Oh, so viel besser. Luft, wir gehen. Ich weiß es nicht. Ich kann es kaum erwarten zu sehen, was du als Nächstes tun wirst, als Nächstes ein Klassenprojekt und ich werde dich dazu bringen, eines zu machen oder zumindest dein zu präsentieren damit ich sehen kann, dass jemand besser ist als meins. In Ordnung, wir sehen uns im nächsten Video. 37. Kopiere und füge Interaktionen in Figma ein: Hallo zusammen. Lassen Sie uns lernen, wie Sie Interaktionen , die Sie für einen Frame erstellt haben, kopieren und in einen anderen Frame einfügen, also mehrere Frames. Die Frames zuerst, wechseln wir in den Prototypmodus, Shift E. Und ich habe schon bei diesem ersten Bild, das ich kopieren und einfügen möchte, eine Umleitung erhalten diesem ersten Bild, das ich kopieren und einfügen möchte , ich wähle es aus Und dann ist das Seltsame, dass hier im Prototypenmodus meine Interaktionen sind. Da ist der, den ich will. Du klickst darauf, nicht da, da und diese winzige kleine Lücke, okay, wählt irgendwie die ganze Ich habe das Gefühl, dass es in Figma sehr bald eine Lösung dafür geben wird in Figma sehr bald eine Lösung dafür , weil viele Leute, wie wir, einfach unsere Abkürzung zum Kopieren verwenden, eines oder alle Frames auswählen eines oder alle Frames zu denen es gehen soll, und einfach auf Einfügen klicken Los geht's. Die Interaktionen zwischen ihnen allen deuten für mich alle auf diese zweiten Frames zurück. Ich werde sie aktualisieren müssen. Aber da hast du's. So können Sie Interaktionen in vielen Frames gleichzeitig kopieren und einfügen . Es ist dieser geheime, geheime, kleine anklickbare Bereich. Dann muss ich meinen Fall durcharbeiten und sagen: Das geht nicht von selbst zurück, sondern geht auf den Bildschirm. Dieser geht auf den Bildschirm. Dieser geht auf diesen Bildschirm, aber die gesamte Animation läuft während der Fahrt mit. Also du magst Das scheint nicht so schnell zu sein. Es ist, wenn all das zusammen kommt, nimmst du eine kleine Abkürzung? 38. Wie man Gradientennetz mit Varianten in Figma animiert: Hallo alle zusammen. Wir werden diese Art von animiertem Farbverlauf im Hintergrund verwenden und hier auch unsere Technik zusammenfügen, bei der wir Variablen verwenden und diese animieren werden, anstatt nur eine ganze Reihe von Frames auf unserer Zeichenfläche zu erstellen animiertem Farbverlauf im Hintergrund verwenden und hier auch unsere Technik zusammenfügen, bei der wir Variablen verwenden und diese animieren werden , anstatt nur eine ganze Reihe von Frames auf unserer Weil am Ende Dinge wie diese Breite ist wie eine Zillion, Zillionen miteinander verbundener Rahmen und sie sind in Ordnung, aber sie können sehr chaotisch werden. Also werden wir sie in IC stecken. Auf unserer Leinwand haben wir also nur einen Frame als Komponente , der unsere gesamte Animation mithilfe von Variablen versteckt. In Ordnung, lass uns gehen und es machen. In Ordnung, für diejenigen unter Ihnen, die einfach dazu übergehen möchten Varianten anstelle von Frames zu verwenden Ich bin ein bisschen vorangekommen und zeige es dir schnell Und wenn du willst, werde ich, nachdem ich es dir gezeigt habe, nachdem ich es dir gezeigt habe, das Ding von Grund auf neu aufbauen und im Laufe der Zeit einige Tipps und Tricks hinzufügen. Aber für diejenigen, die es einfach wissen wollten, ist, dass ich im Grunde einen Rahmen erstellt habe von meinem Haupttelefon getrennt ist, nur weil ich ein bisschen Platz zum Arbeiten benötige. Ich möchte es also getrennt halten, anstatt die Frames zu duplizieren und sie im Prototypmodus zu verbinden Ich wähle meinen Frame aus. Ich gebe ihm ein bisschen, einen Namen. Ich werde es in einen Komponentenbefehl umwandeln, Option K, Strg-Alt-Taste auf dem PC. Und ich werde eine Variante davon erstellen. Und sie haben zwei davon. Okay, und genau das will ich tun. Ich werde zwischen diesen beiden wechseln und sie mit dem Prototyping verbinden, sie mit dem Prototyping verbinden, genau wie ich es mit Rahmen mache, aber sie werden Komponenten mit Varianten sein Das heißt, wir können sie verstecken und verstecken . Also lass es uns schnell machen. Ich werde hier einfach darauf eingehen und es ein bisschen ändern. Ich werde nicht viel tun. Ich werde in einer Sekunde mehr tun , wenn ich es vollständig durchgemacht habe. Sie verlieren den Geschwindigkeitsmodus. In Ordnung, etwas anderes an den beiden. Ich mache Shift E, um in den Prototypmodus zu wechseln. Ich wähle das aus und sage: Du, mein Freund, wirst mit Animate nach Verzögerung, Verzögerung eine Verbindung zu Animate nach Verzögerung, Verzögerung Ich werde nur eine Millisekunde verwenden, okay? Und ich sage, ich wollte es auf Smart Animate umstellen Ich werde locker rein und raus. Und es wird 5 s dauern, was 5.000 Millisekunden entspricht Wenn es fertig ist. Es wird wieder zu dem oberen Teil zurückkehren. Du machst einen Rückzieher. Da haben wir's. Es muss nach einer Verzögerung von einer Millisekunde wieder eingeschaltet werden , aber der Rest sollte in Ordnung Jetzt, wo wir es geschafft haben, kann ich zu meinem Assets-Panel gehen, Option zwei. Okay, ich sage, du gehst rein und richtest alles so an, dass die Animation in diese Komponente integriert ist , sodass ich jetzt eine Vorschau ansehen und mir den Filmverlauf ansehen kann. Meine Güte, in Ordnung, also wenn du das einfach machen wolltest, wollte sie einfach diese andere Art der Animation herausfinden, anstatt dieses der Animation herausfinden, anstatt riesige Dokument zu haben. So macht man das. Hey Team, bevor wir mit einem kleinen Update fortfahren, hat Figma eine neue Vorschauoption gestartet Während dieses Kurses. Es gab nur einen. Also verwenden wir einfach das Geschenk und das Geschenk und öffnen es in einem neuen Tab, um eine Vorschau unserer süßen neuen Animation zu sehen. Was wir jetzt jedoch tun können, ist, dass Sie hier tatsächlich diese andere Option verwenden können, die besagt, dass Vorschau vorhanden ist. Die Vorschau öffnet es in einer Art „Gefällt mir “ -Tab in der Anwendung, sodass Sie es sich ansehen können. Das Coole daran ist , dass du es dort haben kannst. Und ich habe mir mein Rahmenwerkzeug geschnappt und lassen Sie uns etwas hinzufügen Sie können Live-Updates sehen. Je nach Bildschirmgröße könnte man das also irgendwie in der Ecke verstecken Immer in der Vorschau, deine Animationen und all deine Änderungen werden angezeigt deine Animationen und all deine Änderungen Also das ist cool, es ist neu. Das einzige Problem dabei ist die Vorschau des Desktops. Mach es irgendwie möglich. Aber in dem Moment will es wirklich , dass sich das Ticket ändern könnte. Ich möchte wirklich eine Vorschau von Telefon-Apps oder mobilen Websites sehen. Okay, meine Desktop-Version ist da ein bisschen gequetscht, das könnte für dich funktionieren Du kannst es in einem anderen Tab öffnen und genau das mache ich immer noch Vielleicht gewöhne ich mich an diesen neuen Weg. Aber für den Moment und zumindest für den Rest des Kurses werde ich es in einem separaten Tab haben. Und oft gefällt es mir, weil es in ein anderes Dokument oder einen anderen Bildschirm geht, zumindest habe ich einen anderen Bildschirm , den ich an meinen Computer angeschlossen habe. Und ich habe es hier drüben, hier sehe ich mir immer eine Vorschau an. Dieser Typ, er verlässt den Bildschirm nicht, oder zumindest tut er das im Moment nicht, ich kann ihn nicht auf diesen anderen Bildschirm ziehen. Es steckt irgendwie in diesem Fenster fest. Okay, also es liegt an Ihnen, welche Sie verwenden möchten, okay, für beide gibt es eine Abkürzung. Eine Schicht Space. K ist das neue oder Option Command Shift Space , das ist dasselbe auf Mac oder PC, oder präsentieren Sie die ursprüngliche Methode, die Option Command Enter auf einem Mac ist und das ist, was es ist, was es macht Alt Control Enter auf einem PC. Da hast du's. In Ordnung, fahren Sie mit dem Kurs fort. Update beendet. Ich werde jetzt einen Rückzieher machen und Ihnen zeigen, wie man diese Art von Putschgradientenkram Und es gibt einige Tipps und Tricks und einige Dinge, die Sie überraschen könnten. Es wird jetzt da sein. In Ordnung, also ich habe gerade ein App-Board erstellt Ich habe es genannt, willkommen, alter. Was ich gerne mit der F2 mache, ist dass ich hier drüben einen Frame mache Okay, also tippe einfach die F-Taste. Ich mache es gerne getrennt von dieser Hauptversion , sodass es eine separate Einheit ist, die größer ist als das , was ich brauche, ein bisschen mehr Platz zum Gestalten weil es später abgeschnitten wird . Ich werde es benennen. Wir könnten Probleme beim Zeichnen der Blobs bekommen, wenn wir die P-Taste für das Bleistiftwerkzeug nehmen, sorry, das Stiftwerkzeug, und schauen Sie zu, wie dieser Phi-Draw-Festival-Vize hier beginnt. Was am Ende passiert, ist, dass ich eine Form bekomme die ich füllen muss. Es ist eigentlich nicht in meiner Animation. Siehst du Treffer darüber? Und ich muss es da reinziehen. Das ist eine Sache , die passieren könnte. Der andere wird rückgängig gemacht. Ich fange an zu zeichnen und erreiche die geringste Anzahl an Punkten, die du hast. Je schöner das Ding aussieht, also vier sind gut, drei sind in Ordnung Tyndall Anchor Points sind schlecht. Und um eine glatte Ecke zu bekommen, klicke und ziehe ich. Durch Klicken und Ziehen erhalte ich reibungslose Punkte. Aber der erste und letzte Dosenankerpunkt, der sie alle verbindet, ist letztendlich ein Punkt. Aus irgendeinem Grund. Sie können die Befehlstaste auf einem Mac Strg-Taste auf einem PC gedrückt halten und dann gedrückt halten und ziehen, um das Ganze zu glätten. Ich mache eine Füllung und einen Strich und keinen Strich. Und hier endet es. Du kannst es ziemlich Victory oder Gradient Mesh aussehen lassen , okay, indem du das von Solid auf Radio änderst und dann mit den Farben herumspielst. Es sieht also irgendwie aus, sieht jetzt nicht gut aus. Aber sobald du ein paar davon überlappst, sieht es richtig cool Also werde ich von meiner Grundfarbe zur einfach verblassten Version Ich benutze Radio für diesen Fall. Du kannst das herumschleppen. Okay. Das nächste , was Sie vielleicht überraschen wird, da Sie jetzt anfangen werden, einzigartige Formen zu zeichnen. Wenn ich jetzt anfange, es zu zeichnen , okay, weil es aussieht , als wäre die andere Form fertig, oder? Aber jetzt ist das, was am Ende meine zweite Form hatte tatsächlich in meinen ersten Vektor übernommen, was das Animieren einfach erschweren kann Woran du dich also erinnern oder vergessen musst, um es rückgängig zu machen, wie ich es getan habe, ist, wenn du deinen Zielpunkt erreichst, auf Fertig klickst oder die Eingabetaste drückst oder Escape drückst , begeht dieser Victor gewissermaßen Und dann zurück zum PIE-Tool für das Stiftwerkzeug und beginnen Sie mit dem Zeichnen Ihrer nächsten Form. Okay, dann kannst du hier drüben sehen , dass es ein zweiter Victor wird. Und wieder halte ich meinen Schrägstrich und Strg-Taste gedrückt und fülle ihn mit einem. Es muss nicht Rachel sein. Es kann linear sein. Klicke hier auf diese erste Farbe und ich sage , du hast diese violette Farbe, obwohl die Deckkraft reduziert ist, hat sie immer noch eine Also kann ich diese dunkle Farbe sehen. Aber ich will die Opazität verringern. Wann nicht. Und ich werde eine 3D-Form zeichnen. Du wiegst sie. Und dann gehst du, ich habe nicht zugeschlagen. Okay. Also wurde es schließlich in diesen Vektor zertrümmert Wie ich schon sagte, mach keine gute Arbeit, Dan. Und fertig, und dann mach es noch einmal. Du wiegst sie. Okay. Welche Formen zeichnen also irgendwas, funktioniert. Manchmal kommen sie großartig heraus und manchmal kommen sie schrecklich heraus, aber spielen Sie einfach mit dem Zeichnen von Formen herum. Ich habe auch eine Hintergrundfüllung drauf, eine etwas dunklere Farbe, um sie aufzufüllen. Du siehst, wir fangen an, diese Formen in Gang zu bringen. Es ist schwer zu wissen, wo man anfangen soll. Lass uns einfach damit anfangen und sehen, wie schlimm es ist. Die andere Sache, die ich tun möchte, ist ein bisschen Unschärfe hinzuzufügen. Also werde ich korrigieren, Schatten auf Ebenenunschärfe fallen lassen Klicke auf die Sonne. Und ich sage , klicken, halten und den Zhou bis zu etwas ziehen. Mach das zu. Ich werde es kopieren. Versuchen Sie, auf diese Kennzahl zu klicken, Gary, und klicken Sie dann auf Kopieren. Wählen Sie dann diese beiden anderen Formen aus und klicken Sie auf Einfügen. In Ordnung, schauen wir, was wir tun können. Stell sicher, dass er wieder da drin ist. Vielleicht halten Sie beim Ziehen von Undo die Umschalttaste gedrückt, während Sie die Leertaste ziehen Das bedeutet, dass es nicht aus dem Rahmen springt. Ich weiß nicht, nur das Making dann haben wir unseren ersten, ein bisschen Blues. Lass uns tun, was wir vorher gemacht haben. Okay, also gingen wir, du wirst ein Component Command Option K, Strg-Alt-Taste auf einem PC sein. Gehen wir zu den Varianten. Die Variante endet ganz unten, was nervig ist. Ratet mal, wo es hingehen soll. Was ich tun werde, ist , dass es hier oben steht, aber ich möchte nicht, dass es aus meinem Komponentensatz herausspringt. Ich möchte sagen, halte die Leertaste gedrückt. Also fange ich an zu ziehen, halte die Leertaste und gehe dann hierher. Hervorragend. Du kannst es sehen. Schnapp dir das Komponentenset und halte es gedrückt. Jede Tastenkombination ist Command Option-Shift, und das ist Mac, es ist Strg-Alt-Umschalttaste R. Im Grunde klicke ich dort einfach auf diese Schaltfläche. Und wenn ich versuche, Sie mit meinem Wissen über Abkürzungen zu beeindrucken, müssen Sie das auswendig wissen Nein. Aber das Ego, es passt die Größe der Komponenten an , um das einfach darin zu verpacken In Ordnung, also was ich machen will, ist nur das hier. Ich spiele einfach mit Größe und Maßstab und verschiebe es einfach. Und weil es ein bisschen durchsichtigen Anis und ein bisschen Unschärfe und Ich werde sehen, wie gut das ist. Denken Sie also an Skalierung und Rotation und ich hoffe, dass wir etwas bekommen, vielleicht bekommen wir etwas Magie. Sieht nicht nach Magie aus, Dan. In Ordnung, lassen Sie uns unsere Animation veröffentlichen. Also werde ich zu Shifty wechseln , die sich das ansehen. Sie wollen, dass ich da bin. Ich habe das kopiert und eingefügt, nur um Zeit zu sparen, um alle abgerundeten Ecken anzubringen Und ich dachte, ich hätte alles gelöscht, aber der Prototyp, der da drin war, wurde nicht gelöscht. Geh weg. Ich möchte, dass du zu dir gehst. Und ich möchte, dass Sie zu einer Verzögerung von null Millisekunden wechseln, was wir auf eine Millisekunde zurücksetzen Okay, ich möchte Smart Animate machen. Ich möchte, dass es leichter rein und raus geht. Du kannst damit herumspielen , wie du willst. Und wie lange ich möchte, dass es dauert. 5 s. Ich möchte langsam und launisch sein. 5 s sind 5.000 Millisekunden. Okay? Und wenn das fertig ist, wenn ich wieder hierher komme und Urban die Hälfte von dem macht, was du getan hast, okay, denk daran, dass die intelligente Animation 5 s rein und raus lässt, aber es erinnert sich aus irgendeinem Grund nicht daran. Nach einer Verzögerung von einer Millisekunde ist der Rest in Ordnung. Jetzt können wir es benutzen. Wir können sagen, dass das Asset-Panel gewechselt ist. Es ist Training draußen. Wer erinnert sich, was der Wechsel zum Asset-Panel bedeutet? Schocker. Habe ich das überhaupt erwähnt? Es ist Option zwei. Option eins, Option bis auf einem Mac wechselt zwischen den Ebenen Kannst du Ebenen und Assets sehen? Es ist Alt 1.2 auf einem PC, besonders die für dich da drin. Und Sie können sehen, dass die Animationen deshalb größer sind, als ich sie brauche weil ich damit überhäuft werde, alle möglichen Bildgrößen zu machen und sie passen Jetzt kann ich darauf klicken und ich werde hier wahrscheinlich einen Flow starten , nur damit er hier nicht zu diesem überspringt. Das haben sie schon, ich werde darauf klicken. Ich drücke auf Abspielen. Die andere Sache ist, wenn du fließen musst, kannst du sehen, dass ich hier den Play-Button habe , der Andy ist. Jetzt warte auf die Magie. Oder war es gut? Es sind keine Streifenwörter. Dann hast du die Idee. Und darauf wette ich. Wenn du es tust, wird deins ganz anders aussehen. Ich habe das schon einmal geübt. Ich habe das um 01:00 Uhr gemacht. Ich sah wirklich gut aus. Sieht wirklich durchschnittlich aus. Da hast du's. Manchmal sind es nur die Form, die Sie wählen, und die verschiedenen Farbverläufe, die Sie für die Animation festlegen Vielleicht muss es langsamer gehen. Vielleicht brauche ich ein bisschen mehr Transparenz. Das Einzige , was Sie tatsächlich bemerken werden , ist , dass es bei mir einen kleinen Sprung gibt. Meins hat einen kleinen Sprung. Mal sehen, ob wir es nach den 5 s finden können. Warte darauf. Jetzt. Informieren Sie sich jetzt, warten Sie darauf. Kannst du das sehen? Jump all, wir haben ihren Herausgeber gesucht. Kannst du da nochmal springen? Wiederhole es. Und ich arbeite beim Testen rückwärts, als ich dachte, das habe ich noch nie gesehen. Ich weiß nicht, ob es ein Ich-Problem ist oder ob es eine aktuelle Version des Figma-Problems ist oder ob es schon immer da war Ich schwöre, es war nicht immer da. Aber wenn Sie den Blauton dieser Animationen entfernen, verschwindet er im Grunde den Blauton dieser Animationen entfernen, . Also hat es jemand mit der Unschärfe Ich weiß nicht, was es ist, aber es ist nicht in deiner Version und es ist weg, bis dieser Kurs als Video verfügbar ist. Aber gehst du? Lass uns das aufräumen, weil wir darüber gesprochen haben , dass es sauberer ist und im Moment, der ersten Schicht, wird nicht gereinigt Wir werden uns hier einfach der Animation anschließen. Aber was wir tun können, ist, es zu löschen unser MainComponent-Set vollständig zu löschen Weil wir es hier haben. Wir können sagen, ich kehre zur Shift E-Vektordesign-Ansicht zurück . Ich gehe hier rein und sage Hauptkomponente, stelle die Hauptkomponente wieder her und sie kommt zurück, Schicht eins. Da hast du's. Oder Sie können es aufgeräumt halten, indem Sie das einfach tun. Oder Sie können es ausschneiden und auf eine eigene Seite stellen. Also gehen wir auf Neue Seite. Ich nenne das eine Animation. Füge es hier ein. Und ich werde all meine Animationen auf diese Seite stellen. Und du gehst zurück zu Seite eins, indem unsere süße Abkürzung verwendest: Seite auf, Seite ab. Ich weiß, dass einige Tastaturen kein Hoch und Runter haben , einen Patienten, andere. Wenn Sie also ein MacBook Pro haben , mit dem ich manchmal arbeite, wenn ich keine Tastatur angeschlossen habe, muss ich einige Funktionstasten gedrückt halten , damit das funktioniert Schauen Sie auf Ihren Laptop, schauen Sie, ob es eine Seite auf Seite ab gibt, ob das wirklich nützlich ist. Wenn du mehrere Tasten gedrückt halten musst, aber wenn du es tust, ist das eine tolle Möglichkeit zwischen deinen Seiten zu wechseln. Also zurück zu Seite eins und dieser hier, ich gehe auf einem PC zu Command Option Enter oder Control Alt Enter. Und sieh dir meine süße Animation an. Und ich bin mir nicht sicher, wo wir nochmal hinschauen, aber sieh dir an , wie winzig es ist. Ja, das ist ganz alleine. Und hier drüben ist meine schöne Animation. In Ordnung, das ist es. Ich denke, was wir jetzt tun sollten, ist all meine Vektoren zu benennen, meine Varianz, ich verspreche Pfadfindern, Ehre, das werde ich gerade tun, oder es ist spät genug und ich verliere Kannst du das hören, wenn du ins Mikrofon sprichst oder tagsüber? Und ja, wir lassen es. Da. Du gehst. Nennen Sie Ihre Varianz. Ich mache später meins. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 39. Feedback zu einem UX-Projekt geben – Das Kritik-Sandwich: Hallo alle zusammen. Hey, ich wollte den Computer verlassen und persönlich mit Ihnen darüber sprechen, Feedback zu UX-Designprojekten zu geben Warum wir also über Feedback zu Projekten sprechen , liegt daran, dass ich im nächsten Video nicht sicher bin, warum es hinter mir liegt, aber das nächste Video in dieser Reihe ist ein Klassenprojekt, bei dem wir es tatsächlich einreichen werden, und da ist, du wirst nach Feedback suchen. Und das Problem mit dem, wo ich mich jetzt beruflich kennengelernt habe, ist, dass ich glaube, wir überqueren über eine halbe Million Studenten eigentlich schon eine ganze Weile her Also, selbst wenn ich das in Vollzeit machen wollte, gebe ich nur Feedback und gebe nie wieder Kurse. Ich konnte immer noch nicht mit den Projekten aller Schritt halten . Und du willst Feedback. Ich möchte, dass du Feedback gibst. Der Deal ist also, dass du, wenn du ein Projekt einreichst, Feedback an andere Projekte von Leuten geben musst andere Projekte von Leuten ähnliche Dinge tun oder so. Okay, lassen Sie uns den Deal abschaffen. Warum machen wir das? Es gibt zwei Gründe. Du willst Feedback. Sie möchten kritisches Feedback. Du willst sehen, ob du es richtig machst. Es ist schön, diese Interaktion zu bekommen, okay, es ist wichtig, dass Sie als Designer wachsen. Und wahrscheinlich noch wichtiger ist, dass es Ihnen mehr hilft, als Sie wissen, wenn Sie anderen Menschen Feedback geben . Und wenn du in der Lage bist, dich zu artikulieren und zu artikulieren, was du anderen Leuten gegenüber magst, was du nicht magst, hilft dir wirklich zu verstehen, was du magst und was nicht Und es ermöglicht Ihnen, Ihre Ideen wirklich gut zu verkaufen , wenn Sie UX-Design-Projekte präsentieren. Es ist also eine Win-Win-Situation, du reichst eines ein, das wir als nächstes Projekt und du kommentierst zwei weitere, wir zahlen es weiter, okay, weil es gut für alles ist, was wir hier tun Bringen Sie Ihren Laptop mit. Es ist gut für dich, zu den Leuten zu gehen , die du kommentierst Es ist alles irgendwie woher. Das Problem ist, dass nicht jeder weiß, wie man Feedback gibt. Einige von Ihnen werden damit benotet. Also mach das. Ich gebe dir meine Tipps dazu. Ja, lass uns das zuerst machen, lass uns über die Dinge sprechen, die du nicht tust, die nicht funktionieren, diese gut gemachten Emoji mit dem Daumen hoch Das ist für niemanden nützlich. Also werden wir ein bisschen mehr Wert hinzufügen , das müssen keine Absätze sein. Aber ich gebe Ihnen gleich eine gute Struktur, wie Sie der Person , die Sie tun, etwas Sinnvolles antun können. Und damit Sie Ihre Bewertungsartikulation tatsächlich weiterentwickeln können . Kein Wort, aber lass mich gehen. Als Erstes weiß ich nicht einmal, was ich sagen soll , wenn du etwas siehst, das dir gefällt, weil ich mir nicht einmal sicher bin , was ich kritisieren Wenn das der Fall ist, sind Sie sich nicht sicher, anstatt es zu überspringen, stellen Sie eine Frage, das ist eine großartige Möglichkeit, den Dialog in Gang zu bringen, was großartig ist Aber es hilft auch der Person, die das Projekt veröffentlicht , ein bisschen besser zu wissen, dass die Leute es überprüfen damit sie etwas artikulierter darüber sind , wie sie es umsetzen, okay, es zu erklären, vielleicht ein darüber sind , wie sie es umsetzen, okay, es zu erklären, paar Screenshots, vielleicht ein paar A und B. Also stell eine Frage, wenn du dir nicht sicher bist , und stell eine konkrete Frage, Wozu dient das? Nicht nur ein Fragezeichen, was ist das? Seien Sie etwas spezifischer , um einen Dialog zu beginnen. Also, wenn Sie sich nicht sicher sind, stellen eine Frage zu dem Projekt, okay, nehmen wir an, wir wissen, was sie versuchen zu tun. Wir haben eine Meinung dazu. Wir sind uns nicht sicher, was da steht. Wir bringen das Critique Sandwich mit. Was ist das Critique Sandwich? So ist es, es ist eine Methode, die ich finde. Es funktioniert für mich. Also nimmst du es, benutzt die Teile, die du magst, wirfst die Teile weg, die du nicht magst. Wenn Sie sehr erfahren sind, haben Sie wahrscheinlich eine Methode, das zu tun, für das zu tun, aber es wird viele Leute geben, die eigentlich gerade den Essentials-Kurs gemacht in den Figma Advanced gewechselt sind, obwohl sie ziemlich neu in der Branche sind, weil sie diese Fähigkeiten verbessern wollen Also das bist wahrscheinlich du. Um eine gute Kritik zu äußern. Ich finde, die Sandwiches bestehen irgendwie aus vier Teilen, okay, es sind zwei Stückchen Brot und zwei fleischige Stücke in der Mitte, oder Vg-Stücke, okay, weil ich Vegetarier bin, aber sie gezüchtete Stücke sind In der Mitte befindet sich das eigentliche Fleisch. Es ist nicht so sehr Negativität, es ist eher der konstruktive Teil Ich finde das Führen mit den Dingen, die Sie daran mögen, hilft dabei und lässt die Person die Teile erhalten, von denen Sie denken, dass es besser gemacht werden könnte, oder Ihre Fragen zum Führen mit den Dingen, die Sie möchten. Und das Ende. Das Ende war einfach. Gut gemacht, mach weiter. Das ist also das Sandwich, die Teile in der Mitte. Dann machen wir eine Pause, sammeln meine Gedanken genau dort. Lassen Sie uns über den fleischigen Teil des Sandwichs sprechen , über die guten Teile Und es besteht aus zwei Teilen. Es gibt The Critique und unsere Lösung. Lassen Sie uns darüber sprechen, dass es zuerst eine Kritik und wahrscheinlich den wichtigsten Teil dieser ganzen Sache Es ist das, was ich als Geben empfinde. fiel mir wirklich schwer, Kritik zu als Dan es allen recht machen musste. Also fiel es mir wirklich schwer, Kritik zu äußern, bis ich herausgefunden habe, dass, wenn ich die Positionierung ändere , anstatt ich gegen dich, okay. Ich finde die Knöpfe nicht , ich finde die Knöpfe zu groß. Warum lassen Sie nicht die Farben dieser Knöpfe. Das ist meine Meinung im Vergleich zu deiner Meinung? Nicht so wie ich arbeite. Ich finde es schwierig. Und die andere Person, die es erhält, ist es eine Kleinigkeit für sie und ihre Entscheidungsfindung. Wenn wir es bei der Persona und dem Projekt auf 1.2 verschieben, okay, ich finde, es funktioniert für alle besser Okay, nehmen wir , wir sprechen über die Knöpfe, die Größe der Knöpfe. Wenn ich also eher etwas wie die Berücksichtigung der Persona sage , würde eine technisch versierte Person diese Knöpfe als zu groß Ich weiß es nicht. Fühlt es sich besser an als? Ich glaube nicht, dass die Knöpfe zu groß sind und die Persona wird diese Knöpfe als zu groß empfinden Oder traditionell hat diese Art von Persona oder diese Art von Aufgabe Schaltflächen in dieser Größe Ich habe Lust, es ein bisschen zu verschieben. Ich kann wirklich, und dann kann ich nach Recherchen suchen und Dinge haben, die das belegen, anstatt ich gegen dich. Das ist es also. Schau dir die Aufgabe an. Es könnte die Aufgabe sein, vielleicht die Persona, was auch immer sie versuchen zu tun Lassen Sie mich an ein weiteres gutes Aufgabenbeispiel denken. Wie wäre es mit diesem schlechten Weg? umfasste zu viele Schritte Dieser Stornierungsprozess umfasste zu viele Schritte, ich gegen Sie. Wenn ich hingegen die Persona und die Aufgabe verwende, sage ich, dass ich denke, dass das Publikum diese vielen Schritte im Stornierungsprozess verwirrend finden wird diese vielen Schritte im , okay Fühlt es sich an, es fühlt sich nett an und mir Daten, vielleicht nicht für Sie, aber die Person zu benutzen und dann die Aufgabe als problematisch zu empfinden, dann führt uns das zu dem, was wir als Nächstes tun können. Wenn ich sage, dass ich dich nicht mag, ist die Art und Weise, wie du entwirfst, ein kniffliger Weg. Jedenfalls. Ich habe es gemischt. Ordnung, also nachdem The Critique die ist, müssen Sie eine Lösung anbieten und nicht zu präskriptiv sein Machen Sie kein Logo größer oder verkleinern Sie die Schaltflächen oder machen Sie die Schaltflächen 20 Pixel oder 25 Pixel oder 40 Pixel. Es wird sehr spezifisch sein. Zeigen Sie mehr Richtung und sagen Sie, hey, haben Sie, können Sie moralische Knöpfe ausdrücken? Und hey, hast du dir dieses Designsystem angesehen? Sie verwenden diese Größen, sie haben ein ähnliches Publikum. Geh und sieh dir das an. Also den Leuten ein bisschen kreative Freiheit zu geben, okay? Und ja, seien Sie nicht zu präskriptiv, sondern bieten Sie etwas an Okay. Hast du versucht, ist noch ein guter? Can we explore ist eine Sprache, die es uns beiden ermöglicht, dich zu meinen, The Critique, und ich weiß sowieso nicht, was du designt, zusammen Sachen zu erkunden , anstatt Masked Butting Sie gehen Critique Solution, mitten im Sandwich In Ordnung, das ist es. Das ist The Critique Sandwich. Nun, eine letzte Sache ist, dass ich Ihnen die Erlaubnis geben wollte , die Arbeit von jedem kritisieren zu können Du bist vielleicht wie Own, willst nicht , sie sehen besser aus als ich. Okay. In diesem Bereich befindet sich die Welt von Bring Your Laptop. Es ist okay, weil die Person, die die Kritik erhält, auch wenn sie wirklich gut ist und du das erst seit drei Tagen machst. Sie wissen es. Und weißt du, und ich weiß , dass wir unsere Kritik üben Und dein erster ist, ich werde sehr gut sein. Darin darfst du nicht besonders gut sein. Und wenn du dann durch den Kurs kommst , wirst du immer besser darin werden. Sie werden ein besserer UX-Designer und können Ihre Ideen besser kommunizieren. Also geh und tu das. In Ordnung, das ist es Lass uns mit dem Klassenprojekt beginnen und wir sind Dan, um das Büro aufzuräumen. Er lässt die Dinge laufen, als ob ich zum Anfang gehe und ich noch aufräumen muss. Wenn Sie das verschwommene Ding im Hintergrund sehen, sehen Sie, es ist unsere 3D-Druckbox Ich mache 3D-Druck mit stinkenden Kunststoffen und es braucht sowieso einen, wie er ihn nennt, Wohncontainer Es ist also alles in Teilen. Alles fliegt herum, aber Kreativität ist überall. Es fehlt auch. Bis zum nächsten Video 40. Kursprojekt 04 - Hintergrundanimation: In Ordnung, Zeit für das Klassenprojekt. In diesem Video werden wir die Klassenprojekte behandeln , falls Sie sie nicht machen, fahren Sie mit dem Ende dieses Videos fort. Ich habe so, als ob ich während der Aufnahme dieses Videos eine Reihe von Updates über Figma erhalten habe Also ich zeige dir am Ende irgendwie, wie ich mich auf dem Laufenden halte, springe einfach zum Ende Aber wenn Sie die Klassenprojekte machen, schauen Sie mit. Es wird am Ende da sein und auf dich warten. Im Grunde möchte ich, dass du animierte Hintergrundgrafiken erstellst, okay, indem du die Techniken aus den letzten Videos verwendest. Schauen wir uns also die Must-Haves an. Verwenden Sie also Gradient Background, verwenden Sie Ihre eigenen Markenfarben. Experimentieren Sie mit der Unschärfe und den verschiedenen Farbverläufen, aber es liegt an Ihnen, ob Sie sie verwenden aber es liegt an Ihnen, ob Sie sie verwenden . Spiel einfach mit ihnen. Vielleicht haben Sie am Ende etwas mehr Victory Flat-Farben. Das liegt ganz bei dir. Sie sollten jedoch sicherstellen, dass Sie die Animation verwenden und sie sich in diesem Komponentensatz befindet und nicht nur in Frames, die miteinander verbunden sind. Damit. Ich meine, denk dran, wir mussten sozusagen Gradientennetz auf einer eigenen Seite trennen Wir hatten diese Gradientenkomponente, K und ich hatten Varianten darin, okay, und wir animierten zwischen diesen, anstatt sie zu machen. Auf dieser Seite hier. Wir haben die Komponente hier drinnen weggeworfen Das würde ich gerne sehen. Schöne aufgeräumte Seite. Bei einem Willkommenstext und zwei Buttons. Die Schaltflächen müssen so angeordnet sein , dass sie alle matschig sind und sich an die Textbearbeitung in ihnen anpassen können matschig sind und sich an die Textbearbeitung in ihnen anpassen Und was meinst du zu liefern? Ich möchte ein Video davon sehen. Ich weiß, hoffentlich können wir alle Videos machen. Denken Sie daran, der Mac macht es, fügen Sie hinzu, dass der PC über eine kleine Software verfügt, um Ihren Bildschirm aufzuzeichnen , wenn Sie es versucht haben und das wirklich nicht zum Laufen bringen können. Ein paar Screenshots der verschiedenen Animationen zeigen es irgendwie und vielleicht zeigen sie diese Art von allem, was in dieser Ansicht miteinander verbunden ist Okay, sei in der Lage zu beweisen , dass du es getan hast. Wir würden es gerne sehen. Ich werde mir die Animationen von allen ansehen, okay, also lade sie auf die letzte Projektseite der Aufgabe auf dieser Website hoch. Und dann, anders als bei den anderen, möchte ich teilen, was du in den sozialen Medien gemacht hast, möchte ich teilen, was du in den sozialen Medien gemacht hast, diese Dinge bis jetzt, hauptsächlich, um uns alle auf dem Laufenden zu halten und uns auf dem Kurs zu halten, einige der Techniken zu üben. Aber dieser hier ist ziemlich visuell, also würde ich ihn gerne in den sozialen Medien sehen. Hier sind meine verschiedenen Social-Media-Plattformen. Also wähle dein Gift und ich würde mich freuen wenn du es mit mir teilst, mich darin markierst und den Hashtag Figma Advanced verwendest, weil ich auf diese Weise suchen und sehen kann und den Hashtag Figma Advanced verwendest, weil ich auf diese Weise suchen und sehen kann, was die Leute für diesen speziellen Kurs tun für diesen speziellen Kurs Aber ich suche, ja, wenn ich nur nach Dingen suche, die für verschiedene Kurse sind, fange ich an, diese Hashtags zu verwenden, also benutze sie auch Und ich liebe es, wenn du mir mitteilst, wie es läuft. Probleme, auf die Sie gestoßen sind, Dinge, die Sie überwunden haben, Dinge, die Sie immer noch nicht tun können. Denn denk dran, und die Leute werden deine Arbeit kommentieren Stellen Sie also sicher, dass Sie eine kleine Erklärung hinzufügen. Dinge, die du erreichen wolltest, können Probleme haben, weil es einen Welpen geben wird , der dir hilft Denken Sie also daran, dass jeder Beitrag , den Sie kommentieren, die Arbeit anderer Leute kommentiert. Und dieser wird sein, Lass uns einen Blick darauf werfen. Es wird Dinge wie die Animation geben. Ja, es könnten einige Dinge sein , die du dazu kommentieren möchtest. Aber was das angeht, könnte der Typ, die Art der Schaltflächen dieser Abstand sein. Also, wenn Sie Ihr neu gefundenes Sandwich verwenden können, Ihr Critique Sandwich, aktuelle Nachrichten Hey, ich wollte das zum Ende hinzufügen , nur weil ich am nächsten Video gearbeitet habe und ich es einfach starten lasse, Figma zu öffnen, da du 42 neue Updates hast. Ich dachte, es ist gut, wir lieben es, dass das Produkt aktualisiert wird, was Figma großartig macht Aber es ist natürlich auch kreativ. Das macht es schwierig, weil sie es ständig aktualisieren. Einige der älteren Produkte in der Designbranche erhalten keine großen Updates. Also wie dem auch sei, das ist mein Problem. Was für dich interessant ist, ist, dass du nach diesem Kurs auf dem Laufenden bleiben willst, was es Neues in Figma gibt, okay Boards, du einfach großartig bei Figma sein willst Es gibt zwei Orte , an die ich gehe, wenn ich nach neuen Updates für Figma suche. Es ist dieser hier. Figma.com Slash veröffentlicht Bindestriche und dieser hier, was ist neu? Was neu ist, ist die pikante Seite von Like Look, sie hat gute Demos, aber sie deckt nicht alles ab, nur die knallharten großen Sachen In den Versionshinweisen. Es ist ein bisschen einfacher und eine nette kleine Liste und beinhaltet oft Dinge wie wen ich das nicht wusste. Ich weiß nicht, ob das endet. Ich denke, Oh, das ist traurig. Klumpen. Sie denken nicht, dass es wichtig ist, aber ich schon. Okay, und ich habe es in so etwas gesteckt, Kurs für Fortgeschrittene oder einen Grundlagenkurs. Das sind also die beiden Orte , an denen ich Updates erhalte. Und dann kannst du oft so tun, dass ich den Kurs ständig aktualisiere. Aber auch wenn es etwas Brandneues gibt und den Begriff finden, kopieren Sie es und fügen Sie es ein und versuchen Sie, weitere Informationen zu finden. Oft hat Figma die Informationen selbst. Also, was ist neu? Und Versionshinweise? Diese URLs können sich ändern, okay? Die Bedingungen sind im Allgemeinen dieselben. Irgendwo gibt es Versionshinweise und was es Neues gibt, dann gehst du. So gehe ich zu meinem Date und so kannst du, in Ordnung, Spaß an der Klassenarbeit Mach einen coolen Hintergrund und wir sehen uns im nächsten Video. 41. 41 Houdini-Text: Hallo alle zusammen. Wir werden das machen, wie cool ist das? Okay. Wir werden Houdini-Text Es wird aus dem Nichts auftauchen. Wir werden, wir wissen schon, dass das Maskieren, was wir wirklich machen, ein cooler Effekt ist , aber es ermöglicht uns auch, das Timing vorzunehmen Das sind zwei verschiedene Animationen. Sehen Sie sich auf unserer Seite den Hintergrundverlauf an, mit dem diese Animation zu unterschiedlichen Zeiten bewegt wird. Hier ist es wieder, einfach schön und sauber. Da sind meine Animationen, mein Hintergrund, ich habe nicht zig. Schauen Sie, verschiedene Frames sind alle miteinander verbunden weil ich Varianz verwende und weil ich separate Varianz verwende, bedeutet das, dass sie nicht alle gleichzeitig auftreten müssen, wohingegen vorher, denken wohingegen vorher, Okay, es macht Spaß. Aber die Animation läuft alle im gleichen Tempo ab, weil sie alle zum nächsten Frame Jetzt dagegen können sie, da es sich um separate Varianzen handelt, ihr eigenes Tempo, ihr eigenes Timing und ihre eigene Beschleunigung haben Timing und ihre eigene Beschleunigung Ich glaube, ich habe es zu viel erklärt. Ich habe. Lass es uns einfach machen. Ordnung. Lass uns reinspringen. Okay. Als Erstes benötigen wir zwei separate Textfelder. Also habe ich mich für einen Viv Lid Techno entschieden, überlege dir deinen eigenen einprägsamen Willkommensbildschirm Es könnte sein, dass das Country Welcome to Classic Rock ist. Stellen Sie nur sicher, dass es sich um zwei separate Textfelder , da wir sie separat animieren möchten Okay? Mach mit Schriften, was du willst, okay? Und Schriftstärken. Wir brauchen nur zwei separate Boxen. Als Nächstes benötigen wir Rechtecke, die wir als Masken verwenden Das ist also eines der wenigen Male ich das Rechteckwerkzeug, also das Arche, anstelle des Rahmenwerkzeugs verwenden werde das Arche, anstelle des , weil es nicht über all die speziellen Fähigkeiten verfügen muss, es muss nur ein Kästchen darüber sein Coole Abkürzung hier ist Shift. Okay? Shift O ist praktisch auf der Tastatur und um den Gliederungsmodus anzuzeigen. Okay. Also kannst du es tatsächlich sehen, weil wir es vertuscht haben Das ist schwer zu erkennen. Haben wir es richtig verstanden? Ja, es hat es vertuscht. Und was ich vielleicht mit meinem V-Werkzeug für unterwegs machen könnte, ist, dass es relativ nah am Boden ausgerichtet ist, um sicherzugehen, dass es alles abdeckt. Ich werde wieder das Rechteckwerkzeug sein und ein anderes zeichnen und es einfach so einstellen, dass es nach unten einrastet. Da haben wir's. Shift, um zurückzukommen. Die andere Sache, die passieren muss, ist, dass der Text über dem Rechteck liegen muss. Für die Masterarbeit werde ich es nach hinten verschieben und mein Tastenkürzel verwenden. Okay. Unten neben Ihrem Schlüssel befinden sich die offenen und geschlossenen eckigen Klammern. Wenn ich auf „Öffnen“ drücke, wird es ganz hinten im übergeordneten Frame angezeigt , der als Willkommens-Alt-Eins bezeichnet wird. Und leider ist es hinter meinem Gradientennetz verschwunden. Kannst du sehen, dass es hinter dem coolen Hintergrund verschwunden ist , um das Tool ein bisschen einfacher zu machen, schau mal hier vorbei. Schau dir das an. Wenn ich offene, geschlossene, offene Kleidung verwende, können Sie sehen, dass das Rechteck 18 ganz nach oben und ganz nach unten reicht. Was ich oft tun möchte, aber wenn du in kleinen Schritten hochkommen willst, okay, halte die Befehlstaste auf einer Steuertaste auf einem PC gedrückt . Und sieh dir das an. Es wird unter seinen Freunden auftauchen. Okay, kannst du das sehen? Du kannst es direkt hinter dem Text finden. Gleiche gilt, wenn Sie auf einem PC die Befehlstaste gedrückt halten und diese eckigen Klammern verwenden , damit sie dorthin gelangen, wo Sie sie benötigen. In Ordnung, lassen Sie uns jetzt die Masken machen. Also neige ich dazu, den Hintergrund zu sperren. Okay. Ich mache einen Doppelklick, um mir das Gradientennetz zu schnappen, das ich am Ende zu tief eingetaucht bin. Und ich kann es mit meiner süßen Abkürzung sperren , an die sich niemand erinnert. Komm schon, schick raus. Das heißt, ich kann rüberziehen und habe nur diese zwei Teile. Okay? Aber ich neige dazu, das Ding unverschlossen zu lassen. Okay? Und ich verstehe euch alle. Also habe ich sowohl das Rechteck als auch den Text und den Hintergrund genommen und ich halte einfach die Umschalttaste gedrückt und klicke Ich mache das während des gesamten Kurses, also werde ich es nicht weiter erklären, aber genau das mache ich. Ihr wechselt. Klickt auf den Hintergrund, um ihn abzuwählen, und ich habe alles darunter Lass uns eine Maske machen. Bum. Okay, mach dasselbe für diesen. Bum. Es gibt eine Abkürzung oder Befehlsoption M. In Ordnung, ich bin zurück Du wusstest nicht, dass ich gegangen bin, aber ich habe die Aufnahme gestoppt. Denn wenn Sie die Befehlsoption M drücken, wird alles minimiert Sei okay. Drück die Taste nicht. Das ist eigentlich Command Control M. Es ist eine Abkürzung. Ich benutze nie den Hover darüber. Es könnte etwas sein, das du oft benutzt, um dich daran zu erinnern. Das tue ich nicht. Und eine Sache mit mir ist, können Sie sehen, dass es am Ende meines Textes abgeschnitten ist Also nehme ich mein Rechteck und mache es einfach ein bisschen tiefer Es ist eigentlich egal, wie groß es ist, solange es dort den Boden bedeckt. Solange mein ganzer Text angezeigt wird. Weil es von unten nach oben springen wird. Da haben wir's, Schicht zwei. Also gut, ich habe meine Masken, das hat nicht wirklich viel gebracht, oder? Sie haben plus, plus, plus aufgetragen. Aber der Text in dieser Maskengruppe kann jetzt verschwinden. Das ist es, was wir wollen. Ich brauche drei Varianten. Ich werde zwischen ihnen animieren. Okay, hier befinden wir uns an derselben Stelle für das Element mit dem Hintergrundgradienten Wir haben es zu einem Komponentensatz mit einer Varianz gemacht und dann zwischen diesen Komponenten animiert, wobei alles ausgewählt Ich verwende die Befehlsoption K auf einem PC, um daraus eine Komponente zu machen Lassen Sie uns die Steuerung auf einem PC befehlen, um ihr einen Namen zu geben. Animation der Willkommensseite. Wir werden eine Variante und eine weitere Variante haben . Ich könnte es hier auf dieser Seite machen. Ich könnte einfach den gesamten Komponentensatz nehmen, ausschneiden, Seite nach oben schneiden und auf dieser Seite einfügen. Geben Sie ihm einen eigenen Spot-Shift zu. Was ich machen möchte, ist die erste, diese erste Variante, die als Standard bezeichnet wird. Lassen Sie uns diese umbenennen. Nennen wir das Bild eins, Shift Tab geht um eins nach oben, also können wir auch diesen umbenennen. Befehl, es wird von Frame zu Shift Tab gehen. Das ist eine zufällige Tastenkombination, die ich häufig zum Umbenennen verwendet habe. Okay, Command Control R auf einem PC. Nennen wir das Bild drei, nur damit es klarer wird. Weedly, ich brauche sie in Ordnung, weil das sinnvoller Ordnung, es ist Frame eins. Ich werde nichts sehen. Ich werde also doppelklicken, bis ich den Text erhalte. Und ich werde die Umschalttaste gedrückt halten und sie nach unten ziehen. Oder tippe mit den Pfeiltasten auf meiner Tastatur einfach nach unten, sodass ich es nicht sehen kann. Okay, der Techno in diesem hier wird derselbe sein Ich werde es gedrückt halten. Wenn es aus seiner kleinen Kiste springt, wie verhindern wir, dass es aus seiner kleinen Kiste herauskommt Okay, wir werden Drag Down sagen. Seht euch die Leertaste an. Spring nicht zur Rettung aus dem Weltraum. Ordnung, alle zusammen. Hey, ich wollte hier reinspringen. Ein paar Leute sind im Kurs auf ein Problem gestoßen , also werde ich es aktualisieren Das Hauptproblem war, naja, was die Leute hatten, war, dass sie das quasi heruntergezogen haben und es nicht verschwunden ist Okay, worüber du dich wirklich im Klaren sein musst und was mir im Video nicht klar war , ist die Masken-Gruppe zu sehen. Das ist die Maskengruppe. Da ist ein Rechteck, da ist ein bisschen Text, wenn man die ganze Gruppe nimmt. Okay, manchmal sieht es so aus, als ob du den Text hast und wenn ich ihn nach unten ziehe, funktioniert er nicht. Das liegt daran, dass ich tatsächlich den Text plus die Gruppe plus das Rechteck habe. Also musst du eintauchen. Und was ich in den Videos gemacht habe, war schnell gesagt doppelklicken, um in den Text zu gehen und ihn dann nach unten zu ziehen. Okay. Manchmal ist es einfacher, das zu tun , wenn Sie darauf klicken. Okay. Du kannst all diese Dinge sehen. Suchen Sie einfach das eigentliche Wort im Ebenenbedienfeld. Möglicherweise müssen Sie die Dinge herunterdrehen. Vielleicht musst du es finden und sagen, okay, da ist die Techno-Sache, und selbst dann ziehst du es vielleicht nicht Du könntest einfach deinen Abwärtspfeil auf deiner Tastatur benutzen , okay? Bei Techno, okay, du kannst Shift gedrückt halten und runter drücken und es wird verschwinden Man braucht es nur, wenn es gerade auf dem Bildschirm ist. Okay. Der Hauptgrund für Probleme scheint darin zu liegen , dass es nicht funktioniert, es herunterzuziehen Okay. Das liegt nur daran, dass Sie den Text nicht gezielt auswählen . Alles klar. Mach weiter. Okay. Nichts. Bei welchem möchte ich zuerst erscheinen, aber nicht du. Du wirst untergehen. Tu das nicht. Stellen Sie sicher, dass Sie den Text innerhalb des Rahmens ausgewählt haben . Halten Sie die Leertaste gedrückt, damit er nicht herausspringt. Nichts, was erscheint, verschwindet dann . Verstehst du die Idee? Jetzt müssen wir sie verbinden. Schicht, wir sagen, du gehst das, wir sagen mit Verzögerung von. Lassen wir es einfach so wie es ist. Habe ein zweites Bild für Smart Animate. Lassen Sie uns einfach rein und raus und zurück gehen. Lass uns das Gleiche für diesen machen. Du gehst dorthin, aber aus irgendeinem Grund erinnert es sich nicht. Es muss nach der Verzögerung weitergehen. Auch hier ist alles andere gut. In Ordnung, verwenden wir die Seite nach unten. Okay. Wir haben hier nichts. Gehen wir jetzt zu Option zwei über „Mein Vermögen“. Und ich möchte das in die Länge ziehen. Eines meiner Probleme ist, dass der erste Frame unsichtbar ist, was ihn hier zu keiner besonders guten Komponente macht. Ich kann im Moment nicht herausfinden , wie ich das Vorschaubild hier aktualisieren Sie können das Thumbnail für das gesamte Projekt erstellen, aber nicht für einzelne Komponenten Lass mich wissen, ob du das umgehen musst oder ob das ein Update ist , das passiert ist Lass es mich in den Kommentaren wissen. Okay, wir haben also unsere unsichtbare Kiste. Lass es uns testen. Funktioniert es? Ich weiß es nicht. Okay, klicken Sie darauf. Befehlsoption Enter. Steueroption Enter. Er ist ein bisschen schnell. Drücken Sie unsere Taste auf Ihrer Tastatur, um sie zurückzusetzen. Okay, ich brauche ein besseres Timing, aber das sollten wir uns für das nächste Video aufsparen. Ich zeige Ihnen einige der neuen Lockerungsoptionen in Figma. Es gibt ein paar coole, aber los geht's. Nehmen wir an, Sie maskieren Text und so gehen wir Bild für Bild von dem gefürchteten Bild Bis jetzt muss alles gleich sein. Wir haben etwas, bei dem die Hintergrundanimation sehr langsam läuft und unsere Textanimation superschnell abläuft. Sie müssen nicht alle dasselbe tun, weil wir professionelle Figma-Benutzer sind In Ordnung, ich werde es im nächsten Video sehen. 42. Nutze die Frühlingsanimationen in Figma: Hallo zusammen. In diesem Video werden wir uns diese neuen Presets oder neuen Presets ansehen, obwohl die Spring-Voreinstellungen sich im nächsten Video alle vier davon ansehen werden , die benutzerdefiniert wären Ich werde, was ich tun werde, ist , dass du etwas baust , um das alles zu demonstrieren, was den Rest dieses Videos einnimmt. Aber wenn du nur sehen willst, was sie tun, tun sie das. Das ist, sieh dir das Ding an, das wir gebaut haben. Gehen wir zurück zum Anfang. Wir behalten hier den Boden im Auge. Schau, der allgemeine Frühling. Es ist sanft, lustigerweise schnell. Es ist schnell. Bouncy heißt sehr gut Bouncy und langsam ist langsam. Wenn das alles ist, was du wissen wolltest, das ist, was sie tun, kannst du weitermachen. Aber wenn Sie dieses Overlay erstellen möchten, um Overlays zu üben und einige unserer Abkürzungen zu üben . Folgt mir. Lass uns diesen Apparat bauen. Um loszulegen. Ich habe ein paar Schritte übersprungen Ich habe eine neue Seite erstellt. Okay, Accord, es sind Frühjahrs-Animationstests, nicht Missy auf unserer schönen Seite , es wird funktionieren, halt einfach alles getrennt Ich habe einen iPhone 14-Rahmen bearbeitet, jede beliebige Größe erstellt, und das ist es, das wird zu meinen Assets wechseln. Also Option zu, wechseln Sie zu dieser Option 12-Ebenen-Assets Okay, ich werde das Navi finden, das wir vorhin gemacht haben. Du kannst mit allem anfangen, okay? Die eine Sache ist jedoch, dass wir unten absolute Pops platzieren werden, wie Sie gesehen haben, und das wird als Overlay bezeichnet Wir haben Overlay in Essentials gemacht, Bär, wir können es hier noch einmal machen Das Einzige, was Overlay bewirken kann, ist, dass dieses Bewusstsein eine einsame alte Instanz Also werde ich wieder zu Ebenen wechseln. Wer erinnert sich an Option eins, die lassen wir einfach. Okay, da ist meine Komponente. Overlay funktioniert nur, wenn es einen Frame gibt. Also klicke ich mit der rechten Maustaste darauf und sage Rahmenauswahl. Gib meinen Rahmen und Namen. Navi erscheint. Lassen Sie uns jetzt den Stein ins Rollen bringen. Also wo muss es sein? Es kann überall sein, wo du willst. Ich werde meins ganz oben platzieren. Es kann einfach nicht auf der Seite stehen, die muss von woanders reinkommen. Also das hier, ich möchte eine Animation hinzufügen. Also verschieben, es irgendwohin ziehen, das willst du irgendwie machen Ich denke, Sie können das tun und es anschließend ändern. Manchmal möchte man aber einfach diesen Frame ausgewählt haben und los geht's. Fügen wir tatsächlich manuell eine Interaktion hinzu, um zu sagen, wann darauf geklickt wird Nach einer Verzögerung von hallo 1 s möchte ich, dass es ein Overlay von Nav-Pop öffnet Dort wird es nicht erscheinen, wenn es kein Rahmen ist, es wird nicht dort erscheinen, wo es ist. Mein Nav-Popup Es wird ganz unten sein, wird kein Moment sein, kein Lächeln Animate. Es wird sich bewegen. Es wird von unten einziehen. Und das sind die alten, traditionelleren Dinge. Nun, diese hier, der Frühling, sie nennen sie Frühling, aber das klingt nach einem sanften Ton, als er mit dem Anfang begann. Chinchillas. Chinchillas. Da ist ein bisschen Federung drin, aber ein sanfter Frühling Es ist in Ordnung, es ist gegeben, um dich zu testen, mein Freund, lass uns Command Option Enter und Strg Alt auf einem PC eingeben, ich werde aufhören, das zu sagen Du schlägst mir ins Gesicht. Keine Vorschau mehr, hatte eine Vorschau. Da. Es wird unten geöffnet und auf Aktualisieren geklickt, und es wird zu dem ersten Frame zurückkehren , den wir haben Also lassen Sie uns das beheben. Nehmen wir an, Sie haben einen Flow, der hier beginnt. Okay, also beginnen wir mit dem Flow. Und das bedeutet, dass es nicht versuchen wird, zurück zum Bild zu springen , weil wir hier in einem Flow stecken bleiben. Wenn wir jetzt unsere drücken, schauen Sie, wie sanft die Navigation ist. 0 ist herrlich. Kann es hoch und dann wieder runter kommen , ein bisschen Frühling. Also springen wir zurück zum anderen Tab. Denken Sie daran, je nachdem, ob Sie im Browser sind oder ob Sie wie ich in der Desktop-Version sind, halten Sie die Befehlstaste auf einem Mac, die Strg-Taste auf dem PC und 123 gedrückt, je nachdem, wie viele Tabs Sie geöffnet haben. Ich werde meins holen. Wenn Sie diese Abkürzung finden, die nur schwer merken können, ist das seltsam. Ich befehle Figma gerne, Seiten zu wechseln. Ich weiß sowieso nicht, ob es schon passiert ist. Ich kontrolliere gerne Seiten. Kannst du zu dem springen? Und dann ist diese Option hier, hier drin ist sie optional oder alternativ auf einem PC oder was auch immer für Sie funktionieren wird. 12 steht für Ebenen in Assets, das ist Option oder Alt und Command oder Control ist 2.3. Springe zwischen den beiden. Nun, das war nicht hilfreich, Dan, Ordnung, was wir machen, wir werden diese Ladung duplizieren, damit wir sie alle überprüfen und üben können , verschiedene Animationen zu erstellen und Abkürzungen zu lernen Und benutze mein Textwerkzeug. Und ich tippe sanft ein. Richtig buchstabieren? Und ich werde zurück in den Designmodus wechseln. Schiff Shifty funktioniert nicht, wenn du in dem Typ bist , der Escape drückt, dann wird Shifty dafür sorgen, dass es zentriert und groß in der Weil ich es duplizieren werde und das heißt, dass ich all die verschiedenen sehen will , wenn ich rate. Also werde ich es kopieren und einfügen. Befehl D dupliziert es. Und wie viele willst du? Ich kann mich nicht erinnern. Für 54. Ja, vier. Schicht eins. Sieh sie dir alle an. Dieser wird schnell gehen. Dieser wird federnd sein. Und dieser, es wird langsam sein. Cool, weil wir es aus dem ersten kopiert und eingefügt haben Wenn ich jetzt zu Schicht E gehe, wirst du sehen, dass dort alle dieselben Verbindungen hergestellt wurden. Alles was wir tun müssen, ist nach einer gewissen Verzögerung zu dir zu gehen, nicht sanft, sondern schnell. Du nach einer Verzögerung. Sanfte Strafe. Du nach Verspätung. Langsam. Was ist Custom Spring im nächsten Video? Denn was wir jetzt tun wollen, ist, unseren Flow zu starten. Sanft. Risiko zurücksetzen, es kann Werkzeug sein. Stellen wir sicher, dass sie verbunden sind. Sonst passiert nichts. Okay, also lass uns zu diesem zurückkehren und sagen, dieser. Geht zu ihrem OnClick, geh zu, sie werden es auf Instant umstellen , damit ich dasselbe für all diese tun kann Du hast geklickt, geh dorthin. Sie, wenn Sie sind, klicken Sie, um dorthin zu gehen. In Ordnung, lassen Sie uns jetzt unseren Flow testen. Zum Reset taucht es schön auf, wenn ich hier unten nach unten schaue und meine Pfeiltaste benutze Schnell. Es ist schnell. Hüpfend. Sprunghaft, langsam Langsam. In Ordnung. Du hast es uns am Anfang gezeigt und dann hast du uns dazu gebracht diese Gewinnchancen zu erhöhen, um zu lernen, wie Overlays funktionieren Und wir müssen einige ihrer Abkürzungen verwenden. Viele Dinge. Ein netter cooler. Das sind also die Presets. Lassen Sie uns im nächsten Video einige benutzerdefinierte Dinge erstellen und lernen, wie das funktioniert. Wir sind bereit, uns eine Ewigkeit Zeit zu nehmen, um etwas zu bauen und alles zu testen. wird er. Es ist Telefon , du genießt es. Ja. Wie wäre es mit egal Orange, dem nächsten Video? 43. Animation im Frühling: Wie du eine individuelle Animation im Frühling in Figma erstellst: Hallo alle zusammen. In diesem Video werden wir uns diese benutzerdefinierten Spring-Einstellungen ansehen. Wir werden uns den Unterschied zwischen steifen und dämpfenden Masken Es gibt eine Beziehung zwischen ihnen allen plus die Zeit. Was zum Henker ist, das wird alles im Video behandeln. Aber wenn Sie die Kurzversion wollen, die Kurzversion ist, dass dieser Frühling so federnd ist, wie federnd etwas im Grunde genommen ist, wie es vor und nach vorne geht, bevor es aufhört Durch Hin und Her. Ich meine, das ist wie das Hin- und Herwackeln an einer steiferen Feder und das Ding wird Dämpfung hingegen ist im Grunde genommen, wie viel Blau oder Widerstand dieser Feder entgegensteht, wenn man ihr nichts gibt und sie einfach ewig so weitergeht. Gib ihm jede Menge. Im Grunde geht die Masse nirgendwohin. Wie schwer ist das? Es ist sehr schwer. Es fühlt sich zumindest jeder an. Mache noch mehr Mathematik. Dieses Ding ist superschwer und es kämpft gegen den Frühling. Es wird ewig dauern, bis es aufhört. Da haben wir's. Kein Chaos wie eine Feder auf einer superfedernden Feder ohne Dämpfung In Ordnung, das ist die Kurzversion. Bleib dran und wir tauchen ein und wir stellen dieses kleine Knopf-Ding auf, weil es ziemlich praktisch ist, zu wissen, wie man es macht. In Ordnung, machen wir es Okay, um loszulegen, verwende ich einfach die Seite, die wir für unsere Test-Spring-Animationen verwenden . Ich habe einen Rahmen gemacht. Ich habe etwas gezeichnet, das wie ein Knopf aussieht. Es ist nur ein Rahmen. werde im Moment keine Komponenten herstellen, weil ich mein Asset-Panel nicht verpassen möchte , weil dies nur eine Demo ist. Also, was ich tun möchte, ist den ersten einzurichten. Lassen Sie uns etwas aus meiner Asset-Panel-Option herausholen, um es auf einem PC anzuhalten. Ich werde das Herzsymbol verwenden. Wir können denselben Overlay-Trick verwenden, um ihn zu installieren. Okay, es muss also ein Frame sein Command Option G oder Control Alt G auf einem PC Command R, um es umzubenennen Nennen wir das einen Hotspot Was ich jetzt machen werde Shift E oder die Abkürzungen Dan, du überwältigst die Leute Du darfst einfach auf den Prototyp klicken. Also warum nicht, ich will, dass das da hin geht, ich möchte, dass es genauso gut auf Klick geht. Möglicherweise stellen Sie fest, dass Sie möglicherweise auf dem Laufenden sind. Auf Knopfdruck. Der Verstand sollte ebenfalls verfügbar sein. Und im Grunde versucht es zu erraten, ob Sie sich auf einem Mobilgerät oder einem Desktop befinden, und es ändert die Sprache, was alle verwirrt Wie dem auch sei, onclick sind on tap, es spielt keine Rolle. Und dann möchte ich, dass es geht, um es im Overlay zu öffnen, vielleicht muss dein Frame nicht auf der Seite sein Ich gehe zu Herzen. Ich lasse es einfach in die Mitte gehen. Ich werde es schließen, wenn ich irgendwo auf die Schaltfläche klicke, nur um die Animation zu stoppen und sie neu zu starten. Lass es uns von rechts einziehen, das ist gut für mich. Lassen Sie uns das Gente-Preset als guten Vergleich heranziehen. Was ich jetzt tun möchte, ist, dass ich noch einen von denen will. Ich halte meine Wahltaste auf einem Mac gedrückt, die Alt-Taste auf einem PC und ziehe sie mit der Umschalttaste nach unten, um eine weitere zu erhalten. Und was ich für diesen will, ist, dass es sanft ist. Gehen wir zur benutzerdefinierten Feder und nehmen wir die erste B. Spielen wir mit der Steifigkeit herum, im Grunde genommen ist es, wie viele Sprünge sie machen wird Also schau dir die Grenze hier für Geschlecht an, das geht einfach irgendwie. Und diese Linie hier verläuft von rechts nach links. Und es wird nur ein bisschen an der Stelle vorbeigehen, wo es hingehen muss, und ein bisschen zurückkommen, aber ein kleines bisschen, weil es sanft ist. Aber wenn ich die Steifigkeit nehme und Europe 500 sage, sagen wir, es wird es bis zum Ende reichen. Du kannst es irgendwie hier oben sehen Schau, sieh mal, sie entwickeln sich positiv. Was wir also tun werden, ist , die erste Demo mit einer Steifigkeit von der Standardeinstellung von 100 zu machen , oder? Ja, machen wir 500. Lassen Sie uns das auf diese Weise duplizieren und genau dasselbe tun. Und ändern Sie diese von Steifigkeit 100 auf K. Gehen wir zu einer verrückten Summe von 2000. Lassen Sie uns das jetzt vorführen. Ich verrate Ihnen nicht mehr das visuelle Bauchgefühl für die Vorschau. Okay. Wir werden sicherstellen, dass zum richtigen gehen. Es ist, benutze diesen. Okay? Und was ich will, ist der erste, ich werde fit sein, um auf dem ersten Film zu sehen. Das ist die Art von sanfter Voreinstellung, aber R1, wenn wir die Steifigkeit auf 500 hochdrehen . Schau, wie oft es hin und her springt. Wie kann ich stark Frühling sein? Gehen wir hoch, ich kann mich nicht erinnern, wie viel es war. Aber kannst du niedriger sehen, je höher es wird, desto mehr Bounces muss es machen Das Interessante an der Steifigkeit ist nun , dass Zeit eine große Rolle spielt Also werde ich Command to Control auf einem PC ausführen, um die Tabs zu ändern. Und ich sage, ich mache ein drittes. Ich werde mich darüber ärgern, dass ich sie nicht groß genug gemacht habe , um eine dritte zu haben Dieses hier, ich werde duplizieren und ich werde nichts ändern, außer, sehen Sie hier unten, wir schauen uns an was passiert, wenn wir die Uhrzeit ändern. Das wird bei all dem schief gehen, machen wir es einfach zuerst. Es ist also 10151. Erinnerst du dich daran? Wenn ich es auf 2 s oder 2000 Millisekunden ändere, denkst du, warum wird sich das ändern und so bleibt es einfach habe ich rückgängig gemacht. Also im Grunde sagen wir, ich nehme 12345, vielleicht springt ein kleiner sechster bei 1006 hin und her Also muss es in 0,8 s da reinpassen. Cool. Aber wenn ich die Zeit ändere, will es dieselben sechs Mal hin und her machen. Aber es hat die Tochter von viel mehr Zeit Also ist die Steifigkeit der Feder umso geringer Also macht es irgendwie die gleichen sechs von ihnen. Sie sind alle in ihrem Stuhl. 123456. Okay. Aber es muss länger dauern. Es heißt also, der Frühling ist so steif, wenn es so lange dauern muss, sechs davon zu machen Hilf ich? In Ordnung, lassen Sie uns eine Vorschau ansehen. Lass uns gehen. Wir vergleichen dieses, das ist, als ob sechs Rückfußfederungen ziemlich schnell ablaufen. Hier sind es immer noch sechs hin- und hergehende Federn, aber es muss sehr, lange dauern, weil wir der Feder gesagt haben, dass sie nicht sehr steif aussieht Wird es klar wie Schlamm, dann lassen Sie uns ein paar andere machen und sehen, was wir verbessern können, duplizieren Sie das Sanfte noch einmal. Und ich ändere die Farbe für den Sprung, schneide mich los. Und stattdessen wird es eine gute Farbe sein, aber eine Farbänderung. Wir schauen uns die Dämpfung an Was also dämpfend ist, wenn Sie wissen, Stoßdämpfer verlangsamen den Frühling, wie ich es so beschreibe, wie es meinen Kopf beschäftigt, ist so , als würde ich der Animation einen Haufen Klebstoff oder Melasse hinzufügen, um sie irgendwie zu verlangsamen und nicht mehr so frei zu Stoßdämpfer verlangsamen den Frühling, wie ich es so beschreibe, wie es meinen Kopf beschäftigt, ist so , als würde ich der Animation einen Haufen Klebstoff oder Melasse hinzufügen, um sie irgendwie zu verlangsamen und nicht mehr so frei zu bewegen. In Ordnung, also lass es uns machen. Lass uns 50 sein. Klicken Sie auf diesen. Du, alles ist wieder sanft. Okay, lassen Sie uns einen benutzerdefinierten Frühling daraus machen. Da sind also die Standardwerte, die um eins gedämpft werden. Das ist gedämpft. Dämpfung ist bei. Schau dir das an. Lass uns bei 50 dämpfen. Sie können sehen, dass es die Grafik dort wirklich verändert, aber schauen wir uns die Animation an. Also gehst du weg und klickst auf diesen. Sieht man keine Dämpfung, keinen Klebstoff, keine Melasse, keinen Stoßdämpferring der Federn Springs wird dem Wahnsinn überlassen. Es verändert also die Steifigkeit. Denken Sie nicht, dass Steifheit daran denkt wie oft sie hin und her hüpft weil sie so stark ist, dass sie nicht gedämpft Es geht einfach ewig. Und dieser hier, nochmal die Steifigkeit , der sind einfach keine Grenzen gesetzt Werfen wir also einen kurzen Blick auf diese beiden. Also dieser hier, weil wir die Dämpfung geändert haben, die gleiche Steifigkeit beibehalten, aber am Ende die Zeit aufgedreht viel hin und her zu fahren und sich das hier Du kannst dieselbe Steifigkeit sehen, aber das hat die Zeit bei uns verändert Es ist ein bisschen rückwärts, wenn es darum geht, die Zahlen zu betrachten, aber es macht Sinn, wenn man es tatsächlich tut Wenn du mehr Dämpfung haben möchtest, okay, es wird es langsamer werden, sodass es nicht viel Zeit braucht, um hin und her zu wechseln. Frühling, wie oft möchte ich, dass wir hin und her gehen, dämpfend, klebrige Melasse, Honigzeug, um Lassen Sie mich die Farbe dieses Exemplars duplizieren und ändern. Schauen wir uns eine Masse an. In Ordnung, ich habe mich für die Hyperscaler-Pullover der 90er entschieden Hat das jemand verstanden? Wenn Sie in den 80ern geboren wurden, wissen Sie es vielleicht sowieso. Also warum willst du das nicht sehen, ist, dass er sanft ist. Also ändern wir es von sanft und gehen zu einer benutzerdefinierten Frühlingsmesse, wie schwer etwas ist. Das sind also die Standardeinstellungen. Das hat die Masse zu Zinn hochgedreht, gleiche Steifigkeit, gleiche Dämpfung, aber die Zeit wurde Lass uns noch einen machen und die Messe machen. Wie schwer etwas ist, bis zu 500. Schau dir das an. Es wird dauern, komm schon, Stan, 80 s pro Minute und 20 s. Gute Arbeit, Dan. Sehen wir uns eine Vorschau an. Und dieser Typ, wenn du wieder reinkommst, schau, er ist superschwer. Nun, dieser ist extrem schwer. Bereit, extrem schwer. Aber er muss sein ganzes Hin und Her machen. Weil wir dort die Steifheit gesagt haben. Wie oft muss das hin und her gehen. Also. Es wird für eine Weile da sein Du willst einen Film sehen, du weißt es nicht. Okay, lass uns noch einen machen. Und lassen Sie uns genau das Gleiche tun. Also lass uns ein Chaos Tief haben, die Dämpfung niedrig haben und die Zeit oder die Steifigkeit auf 200 erhöhen Okay. Und lassen Sie uns eine lange Zeit daraus machen. Ich bin mir nicht sicher, wie lange das dauern kann. Ist das ausgeschöpft? Was ist bei 2 s? Ab Minute 20 steigt das Sediment bei 21 auf 10.000 Also 10 s. Also lass es uns versuchen und gehen. Oh, da ist ein Bart oder auf deiner Tastatur, nur um ihn zurückzusetzen. Los geht's. Er geht, ich kann nicht wirklich, was wir getan haben. Wir haben die Dämpfung nicht gesenkt und wir tun es im Chaos und wir drehen die Frühlingsrate hoch Okay. Und du kannst immer noch sehen, wie es da drin wackelt Es dauert ewig. Chips haben keine Chance. Du kannst es richtig fühlen. Jetzt kannst du diese Draging-Slider-Dinge hier verwenden. Schauen wir uns das an. Wir haben nur den Spot hier benutzt. Okay, diese Dinge und tippe sie ein. Wenn Sie diese zusammenziehen, können Sie diesen ziehen, aber Sie können ihn tatsächlich ziehen. Gehen wir also zurück zu Gentle. Gehen Sie dann zurück zu Custom Spring und scrollen Sie nach unten. Und was du tun kannst, sobald du hier bowlen bist. Ich verstehe es nicht wirklich. Du kannst es herumziehen und es sorgt für Steifigkeit und Dämpfung. Du könntest Animator sein und so sein, dieses lineare Graph-Ding , das wir ständig benutzen. Ich finde es ziemlich schwierig, es zu benutzen, aber du kannst es ziehen. Okay. Dämpfung ist also hoch und runter und die Steifigkeit ist links und rechts Sie können dies auch teilweise ziehen. Okay? Nein, beide wurden repariert , weil das hier irgendwie unter dieser Kurve bleibt Okay? Wenn du Zane ziehst , verschiebst du die Zeit. Es ändert diese also irgendwie, um die darin enthaltenen Parameter anzupassen Da hast du's. Ich finde nicht, dass du wirklich nützlich bist. Dieser wird aber gut sein. Bist du bereit? Vorschauzeit, Licht rein, komm zurück. Das alles ist gut. Vielleicht schleppe es einfach herum. Es wird eine Nummer geben, Dan. In Ordnung, ich hoffe das war hilfreich. Lernen Sie die Frühlingseinstellungen in ihnen kennen und entspannen Sie sich. Es ist großartig, nett und subtil. Aber über einige dieser Spring-Einstellungen kannst du Animationen wirklich kommunizieren und du kannst sie jetzt super anpassen. Danke, Figma ist gut. Ein bisschen Güte. In Ordnung, wir sehen uns im nächsten Video. Oh, noch eine letzte Sache, bevor wir gehen. Sie waren das Update, das ich vor einer Minute hatte. Okay. Oder heute früh, als ich meinen Reset habe, warum hat er rein und raus gezoomt Denken Sie daran, dass ich die Befehlstaste gedrückt halte, um mein Scrollrad auf einem Mac zu verwenden. Auf einem PC ist es Control zum Ein- und Auszoomen. Das ist die ganze Zeit, aber es hat rückwärts funktioniert. Ich bin so, Mann, ist mein Gehirn tatsächlich das Update wann und wann auf Einstellungen umgestellt , es invertiert Das Häkchen war also, ich habe es normalerweise aktiviert, um es umzukehren, aber standardmäßig ist es aus Wenn die Einstellung aktualisiert wird, haben sie sie bei mir aktiviert und los geht's. Das passiert dir am Ende ein bisschen zu deiner Information. Okay, jetzt zum nächsten Video 44. Warum ist die Interaktion beim Tippen auf Klicken in Figma nicht mehr ausgegraut?: Hallo zusammen, Ihr steckt fest. Ich weiß, dass du es bist, weil du hören wirst, dass dieses Video dir zeigen soll, warum dieses Ding ausgegraut ist Warum ist „Klicken“ oder „ Tippen“ ausgegraut? Warum ändert sich das? Manchmal gibt es Onclick, manchmal ist es On Tap. Der erste Grund, warum er ausgegraut ist, liegt daran, dass Sie eine Sache nicht haben können , es ist eine Framework-Komponente Sie können es für zwei Dinge verwenden. Wenn ich auf meins klicke, wird es tatsächlich entfernt. Wenn ich hinzufügen möchte, tippen Sie darauf und es heißt, dass dies nicht möglich ist. Das liegt daran, dass bereits etwas los ist. Es hat schon einen Klick. Geht auch nicht, denn in gewisser Weise löschen wir den, den ich habe. Du kannst entweder diese Nudel hier oder diesen Draht löschen, oder mit den ausgewählten Dingen Du kannst hier rüber und einen Prototyp gehen und du kannst sagen, Interaktionen klicken, das ist nur abzüglich. Es ist also schön und sauber. Jetzt können wir einen machen. Und jetzt heißt es Onclick. Jetzt ist die Frage, warum es manchmal auf Klick und manchmal auf Tippen ist , weil Figma, Figma versucht, schick zu sein Sie machen genau dasselbe. Wenn Sie jedoch auf einem Rahmen entwerfen , bei dem es sich eindeutig um einen mobilen Rahmen handelt, heißt es on tap, weil wir tippen und nicht klicken. Wir tippen mit dem Finger auf einen Computer, wir machen einen Mausklick Es ändert nichts an dem , was wir tun. Wenn du also jemandem auf Cithaeron folgst, ist das so, als ob du ihn per Fingertipp verwendest und du ihn nicht sehen kannst, benutze einfach Onclick Wheatley. Dieser Frame, an den ich mich gewöhnt habe, gut, er war für ein iPhone 14, aber irgendwann hat er das verloren Also wurde auf onClick umgestellt. Ich kann es ändern. Ich kann sagen, dass die Einstellungen des Prototyps tatsächlich angezeigt werden. Und ich werde sagen, welches Gerät Sie verwenden, iPhone 14 plus was auch immer Sie verwenden. Wenn ich jetzt dorthin zurückkehre, sollte auf dem Wasserhahn stehen: Gleich, gleich. Wenn du das gefürchtete, beim Tippen ausgegraut, bei Klick behoben gehst Tippen ausgegraut, bei Klick Hoffentlich, falls das nicht behoben wird. Lass mich in den Kommentaren wissen, ob du das behebst oder ob es ein anderes Problem gibt. Ich bin die ganze Zeit darauf gestoßen und so repariere ich es. In Ordnung, und so das nächste Video 45. Kursprojekt 05 - Prototyping für Textanimation mit Houdini - Level 1: Hallo zusammen, Projektzeit für den Unterricht. Ich möchte, dass du diese Animation machst und sie teilst. Okay, also diese Art von Houdini-Effekt, deinen Houdini-Effekt habe ich mir ausgedacht Also niemand sonst nennt es das Houdini der Vektoren, falls Gehen Sie im Büro herum und sagen Sie, dass Sie gerade den Houdini-Texteffekt gemacht haben Sie werden nicht wissen, wovon du sprichst. Das habe ich mir irgendwie ausgedacht. Erstellen Sie die Textanimation auf unserem Willkommensbildschirm. Okay, benutze die Techniken, die wir benutzt haben. Wir haben in den letzten Videos gelernt. Ich möchte, dass du mit der benutzerdefinierten Spring Animation experimentierst und etwas findest, das für dich funktioniert. Nehmen Sie ein Video auf und teilen Sie den Link für das Video im Aufgabenbereich. Ich liebe es, es auch in den sozialen Medien zu sehen. Dies ist optional, aber wenn Sie den Hashtag Figma Advanced verwenden , kann ich ihn finden Und wenn du kannst und du einen Link zurück zu dem Kurs haben willst , den du machst, nur damit andere Leute in den sozialen Medien , wow, das will ich auch machen. Ich möchte an Dans Kurs teilnehmen. Das ist ein großartiges Cross-Selling für mich, um mehr Schüler einzubeziehen, ich würde mich freuen musst du nicht. Wenn du teilst, wähle dein Gift aus und lade es auf alle hoch. Stell sicher, dass du mich taggst, wenn du es hochlädst. Und vergiss nicht, erinnere dich an das ernste Gespräch, das ich dir in dem ersten Video gegeben habe dir in dem ersten Video dem ich die Arbeit anderer Leute kommentierte. Wenn du deinen hochlädst, dreht sich die Welt, wenn du ihn weiterzahlst . In Ordnung, also viel Spaß beim Experimentieren mit Ihrer Feder. Du wirst dir das Video wahrscheinlich noch einmal ansehen müssen weil du es magst, dass es kaputt ist, weil die Maske irgendwie Warum animiert es nicht unsere, ich muss die Varianz machen Das alles ist Teil des Fonds, etwas Neues zu lernen, ist es , es tatsächlich zu tun, um all diese Löcher und Bugs zu finden , falls Sie irgendwelche Probleme haben oder vielleicht habe ich im Video etwas nicht richtig erklärt. Lass uns in den Kommentaren wissen, wie du das Problem behoben hast. In Ordnung, los, mach eine Animation. Wir sehen uns im nächsten Video. 46. Erstelle und entferne mehrere Nudeldrähte gleichzeitig in Figma: Hallo zusammen, Verkabelung. All diese Prototypen können ewig dauern. In diesem Video finden Sie einige Tipps und Tricks, wie Sie diese Nudeln oder Drähte oder Klemmen, wie auch immer Sie sie nennen möchten, in großen Mengen hinzufügen können. Außerdem zeige ich Ihnen, wie Sie sie alle auf einmal entfernen können, nur um ein Dokument aufzuräumen, sehr praktisch In Ordnung, also habe ich einfach einen unserer Frames dupliziert und ihn in home Search Account Wishlist umbenannt Und der erste Tipp ist, anstatt jedes einzelne durchzugehen und zu sagen, wenn die Navigation angeklickt wird, gehe zurück zu hier, okay, und los, jeder einzelne wird anstrengend Sie können das rückgängig machen , indem Sie sie einfach alle auswählen, okay Und schnapp dir irgendeinen von ihnen und geh zu dir, und du siehst, dass sie alle gleichzeitig gehen. Du kannst ein bisschen schicker werden. Das lasse ich stehen. Ebenfalls. Wenn Sie die Ys nicht sehen können, stellen Sie einfach sicher, dass Sie sich im Prototypenmodus befinden. Und die andere ist, sagen wir, wir wollten es hier unten machen, aber wir können nicht wirklich einfach alle anklicken, weil sie sich in unserer Instanz befinden, okay, aber ich möchte all diese Lupen neu verknüpfen all diese Lupen Was wir also tun können, ist , es auszuwählen. Ich werde meinen Kurzbefehl für schnelle Aktionen verwenden. Wer erinnert sich, was das ist? Command Forward Slash oder Control Forge weniger auf einem PC. Und ich tippe einfach select ein, weil ich mich nie erinnern kann, was die Abkürzung ist. Es gibt eigentlich keine Abkürzung. Ist da. Ich möchte die, auf der steht, wählen Sie alle mit derselben Instanz aus. Möglicherweise können Sie mit demselben Effekt oder derselben Füllung dieselben Eigenschaften verwenden. Mein Fall, weil es eine Instanz ist. Ich will die gleichen Instanzen. Kannst du sehen, dass es sie alle packt. Schicht eins, sogar die hier unten sind verschrottet. Und jetzt bin ich im Prototyping tätig. Ich habe nicht gesagt, dass sie alle zur Homepage zurückkehren. Schau dir das an. Eigentlich möchte ich, dass es zu dem geht, was ich rückgängig machen kann. Und ich sage, geh tatsächlich zur Suchseite. So stellen Sie einige Massenverbindungen her. Wenn ein anderes kleines Ding, während ich hier bin, diese zweite Schicht ist, kannst du sehen du Materie jetzt tatsächlich von jeder Seite ziehen kannst, musst du sie immer noch aus der rechten Seite ziehen, aber das kannst du, hilft nicht wirklich viel, aber das hast du vielleicht schon bemerkt. Jedenfalls. Sie können es an jeder Seite herausziehen. Lassen Sie uns über Massenentfernung sprechen. Dieser ist nicht schlecht, okay, Schicht eins ist, dass überall ein paar Kabel verlaufen. In der Essentials-Klasse. Wir haben das gemacht und es fehlt auch nicht einmal daran. Ich wette, Sie haben wahrscheinlich an Dokumenten gearbeitet, die noch viel mehr enthalten, um sie alle loszuwerden. Vielleicht lädst du die Datei eines anderen herunter oder willst einfach von vorne anfangen, passiert mir, wenn ich Dinge von der Community habe. Ich möchte sie benutzen, wollte aber nur alle Kabel loswerden . Alles was Sie tun müssen, ist nichts auszuwählen, einfach mit der rechten Maustaste in den Hintergrund. Und da ist dieses coole Ding. Es heißt Removal Interactions. Also habe ich als Nächstes gemacht. Sie können dies auch nur für einzelne Frames tun. Ich sage, Sie möchten nur, dass dieser Frame getrennt wird. All die Dinge ergeben sich daraus. Wählen Sie es aus, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle und sagen Sie einfach Entfernen und Anweisungen und ich mache es nur für diesen. Okay. Nun, der Rest der Zilien. Danke. Und das war's. Lass mich in den Kommentaren wissen, wie du sie nennst. Ich glaube, Figma hat sie mit Nudeln überfischt. Nun, das haben sie früher gemacht, ich nenne sie Drähte, weil es die UX in Adobe XD irgendwie gestartet hat und sie es Drähte nennen Ich habe gehört, dass die Leute sie Terminals nennen, Journey Bits. Das habe ich mir ausgedacht. Wie dem auch sei, lass uns mit Nudeln gehen, denn das ist die coolste Option Ich werde mich nicht länger ändern. Warum sind diese Typen Nudeln? Okay, lassen Sie uns im nächsten Video mit dem kleinen Prototyping 47. So aktualisierst du Nav-Links in deinem Figma-Prototyp: Im letzten Video habe ich dir gezeigt, wie man Dinge auf einmal auswählt und dann alle zur Homepage geht. Und das ist cool. Aber es gibt einen besseren Weg, denn das funktioniert nur, wenn man eigentlich alles auswählen kann und es nicht 100 davon gibt. Was wir tun werden, ist, dass wir es tatsächlich von der Hauptkomponente aus machen werden. Und obwohl ich in diesem Video etwas detaillierter darauf eingehe , ist die grundlegende, wenn du es mit der Hauptkomponente machst, all den Instanzen, sieh dir das an. Sie bekommen alle den gleichen Link, werden das auch bis zu diesem unteren Nerv machen. Okay, wenn wir einen von ihnen aktualisieren und sie alle aktualisieren, sieht es chaotisch aus, aber wir haben ungefähr 2 s gebraucht , um überall Nudeln zu machen Jemand hat einen Teller davon auf unsere Designs fallen lassen. Aber wie dem auch sei, lassen Sie mich es Ihnen etwas genauer zeigen. Okay, um zu beginnen, werde ich in der ersten Schicht sein , um alles zu sehen. Und ich werde Shift D verwenden, um in den Prototypenmodus zu wechseln. Und ich werde mit der rechten Maustaste auf eine beliebige Stelle klicken und alle Interaktionen entfernen. Du musst vielleicht etwas genauer sein , wenn du etwas manipuliert hast, das du nicht anfassen willst, aber ich entferne alles meins Der Trick ist also, im Moment, okay, zumindest für mich, kannst du hier drüben sehen, das ist eigentlich ein Frame. Es sollte eine Komponente sein, und das ist der Zaubertrick, oder? Wir werden mit dieser zentralen Hauptkomponente arbeiten. Und wenn wir diese verknüpfen, werden sie alle aktualisiert. Also werde ich zu diesem hier gehen. Das werden meine Hauptkomponenten sein, die Frame Three heißen. Wir werden es zu einer Komponente machen. Ich gehe hier rein und sage, das ist Nav Upper. Und ich werde es kopieren und ich muss all diese Leute ersetzen , weil das nur faule alte Frames sind, sie sind nicht damit verbunden. Also was ich tun werde, ist sie alle auszutricksen. Und ich erinnere mich an meinen Shortcut-Befehl Shift oder You Go , der so funktioniert hat. Ich überprüfe das so, dass ich ankreuze , um es rückgängig zu machen, weil sie, sie werden Frame drei aufrufen. Versuche dich an die Abkürzung zu erinnern und sie sind alle zu Navi, Upper gewechselt. Glückliche Tage. Habe ich noch einen? Ups, tolle Abkürzung. Command Shift R oder Control Shift auf einem BZ, tut mir leid, PC-Jungs und Mädels Okay, jetzt, was wir tun, anstatt sie überall rumzuziehen , wie bei dem coolen Trick, ich dir im letzten gezeigt habe Während wir das tun, gehen wir zu dieser Homepage, wenn sie auf ihre Navigation geklickt haben Und das Coole daran ist, dass man sieht dieser es geschafft hat, dieser hat es geschafft. Dieser hat es geschafft. Kündigt eine wirklich einfache Navigation an. Machen wir es mit denen unten hier unten. Für mich sind meine bereits Instanzen dieser MainComponent. Wo ist die Hauptkomponente? Ich weiß, wo es ist, aber wenn Sie es nicht wissen, klicken Sie mit der rechten Maustaste und gehen Sie zur Hauptkomponente. Da bin ich. Hallo. Und was wir tun können, ist , in dieses Video reinzugehen anstatt die ganze Auswahl zu machen , wie wir es im letzten Video gemacht haben, das ist quasi, das ist ein entscheidender Schnitt und nützlich. Aber wenn wir es mit der Navigation zu tun haben, können wir mit Komponenten etwas bewusster Ich möchte also, dass die Suche in Schicht eins wechselt, um das Feuer auszuschalten, ich kann nichts sehen. Ich möchte, dass es zu geht. Wir wollen nicht zu Ich will, dass es zu dir geht. Geh zu ihnen nach Hause. Meine Kontoseite. Um zu meiner Kontoseite zu gelangen, benötige ich meine Wunschzettel-Seite Ich habe noch nicht entschieden, wie ich sie nenne, um zu ihnen zu gehen. Natürlich können wir mit all den verschiedenen Übergängen herumspielen, die für den Moment gekauft haben, in dem Sie die Idee Schau, er macht es, aber schauen wir uns das an. Sie machen es alle dort. Wir gehen an den richtigen Ort. Während des Essentials-Kurses ziehen wir Dinge herum und du sagst, er muss ein bisschen Abstand nehmen Willkommen bei The Bid Away. Machen Sie es einfach mit der Hauptkomponente und sie werden alle aktualisiert. Das ist also die Hauptmethode, um all Ihre Nudeln zu aktualisieren. Ich bin mir nicht sicher, ob ich mich an das Wort Nudeln gewöhnen werde , aber wie dem auch sei, so macht man es. Kommen wir zum nächsten Video. 48. Wie du das richtige Telefon aufstellst und alte Handy-Prototypen in Figma findest: Hallo zusammen, ist das passiert und ihr fragt euch, warum passt es in meinen Prototyp? Es ist zu klein oder zu groß. Es gibt ein Video, ich zeige Ihnen, wie Sie das ändern können, sowohl im Prototypmodus, wo wir das Telefon so geändert haben , dass Sie Frame Citizen auch, wie Sie in die andere Richtung gehen und versuchen, Ihren Rahmen an das riesige Telefon anzupassen. In Ordnung, schauen wir uns den ersten an. Während ich im Prototypenmodus bin, kannst du das Gerät einfach so ändern, dass es dem entspricht, was du hast. Sie können hier Ihren Rahmen auswählen, den Designmodus wechseln und einfach Ihre Breite und Höhe berechnen. Also verwende ich den 39844. Also Prototypmodus, ich kann einfach unter meinen Prototyp-Ersparnissen nachschauen, habe einfach nichts ausgewählt Und ich kann hier reingehen und mir mein Gerät aussuchen. Ich kann zu keinem gehen. Okay. Und dann wird einfach alles los oder ich kann das durchmachen und herausfinden, welches ich benutzt habe. Ich habe dieses benutzt und mein Handy gewechselt. Schauen wir es uns an. Bitteschön, es passt. In diesem Kurs werden wir uns bald mit einem Ausschnitt befassen. Lassen Sie uns herausfinden, wie man es dazu bringt, dass es immer neue Größen gibt. Und aus diesem Grund bauen wir dieses responsive Design so , dass, wenn wir das Max verwenden und es rückgängig machen wollen, um zurück zu gehen, kann ich sagen, dass es rückgängig machen wollen, um zurück zu gehen, kann ich sagen, du D zurück zum Design verschiebst , das jetzt nicht nur ein allgemeiner Rahmen auf einem iPhone 14 Ich werde das 14 Pro-Konto verwenden. Denke daran, wer das Ego benutzt. Kannst du sehen, wie es angepasst, rückgängig gemacht, wiederholt wird, wenn deins sich nicht anpasst, wie dieser hier unten, den du vor deiner Anpassung vorgenommen hast, er sollte nicht links und unten stehen Rückgängig machen, rückgängig machen. Sagen wir, du musst nicht den Boden heben, du musst links und rechts sein. Das wird das Problem beheben. Ihr Frame Pro Max sieht also responsiv aus. Es war, die passen sich nicht an. Es wird unten nach links und rechts sein. Und um sicherzustellen, dass wir Autolayouts und all die anderen Dinge verwenden , die dieses Ding schön und Rakel machen dieses Ding schön und Rakel Du wirst immer der neuen Handygröße hinterherjagen , was immer SPASS macht Nun eine Sache, die ich noch einmal wiederholen und erneut aufnehmen möchte , weil ich zwischen Design hin und her gesprungen bin, mir diesen Rahmen angesehen und ihm die Rahmengröße gegeben Okay, das haben wir getan, um es auf diese maximale Größe zu bringen , was großartig ist. Es ist unabhängig von der Art und Weise, wie Sie es prototypisieren. Im Prototyp und ich habe Prototypensitzungen, okay, ich könnte etwas anderes haben. Diese können unabhängig voneinander agieren. Du kannst es nicht pro Frame ändern, okay, du hast also verschiedene Größen. Es wird nicht ganz durchspringen. Was Sie tun könnten, ist einfach zu Benutzerdefinierter Größe zu wechseln. Dann wird es den Kromer draußen loswerden oder meint er mit Chrome Das ist das Zeug draußen. Kannst du sehen, dass es einfach verschwunden ist. Okay, der Redakteur macht es wieder aus, an, aus. Aber du verstehst die Idee richtig. Du kannst es immer noch wie ein Telefon aussehen lassen. Und das heißt, wenn ich die verschiedenen Größen durchprobiert habe, wird es sich einfach dehnen Das Spiel passte in dieses Fenster. Es wird den Strom nicht nach außen leiten, was ziemlich cool ist. Das Chrom ist das Handystück an der Außenseite. Die andere Sache, die sie gemacht haben, war, dass ich im Prototypenmodus bin. Wenn ich hier reingehe und oben sage , dass es die neuesten sind, bin ich mir sicher, dass Sie das iPhone 30 mögen werden , wenn Sie sich das ansehen. Okay. Sie haben einige der alten hineingelegt und sind hier unten noch ältere. Wenn du nach unten scrollst. Wir machen also 14, aber es ist so, als ob ein paar fehlen, genau da sind wir zu dieser ältesten Größe gegangen, weil es eine gute generische alte Telefongröße gibt und sie häufig zum Testen verwendet wird. Okay, aber unten fertig, hier sind ein paar andere, die gerade unten angeschaut haben , vielleicht fehlt dir etwas. Das gute alte Pixel 21. letzte Sache ist, wenn Sie der Meinung sind, dass, wenn wir die Größe jetzt auf eine viel größere Größe ändern, gibt es ein automatisches Update? Okay, wenn ich gehe, gehst du von der Rahmengröße zwei aus. Es ist das größte, das wir haben, wir machen das einfach. Automatisch gedehnte Sachen gibt es nicht. Du musst es vorher einrichten, okay, ohne Einschränkungen, wie wir es uns vorhin angesehen haben, Autolayouts, all die guten Dinge, die du bei der ersten Arbeit an einigen deiner Komponenten gebraucht hast der ersten Arbeit an einigen Und es zahlt sich später aus, wenn es das neue Telefon gibt , auf dem du testen musst. Ordnung, so aktualisiert man die Telefone so, dass es passt Ändern Sie einfach die Präsentationsseite oder aktualisieren im Designmodus und aktualisieren Sie den Rahmen so, dass er dem entspricht, was Sie benötigen. Okay, das ist es, ich werde es im nächsten Video sehen 49. Wie man eine Suchleiste für eine feststehende Scrollposition in Figma erstellt: Hallo zusammen In diesem Video sehen Sie diese kleine Suchleiste hier. Stellen Sie sich vor, Sie könnten nach oben scrollen und sich das ansehen, irgendwie hängen und kommt nicht von der Seite Okay, wir schauen uns das sogenannte Sticky Positioning an, das auch die Navigation und die untere Navigation dazu bringt die Navigation und die untere Navigation , das Scrollen zu beenden, während wir hier sind, Ordnung, springen, in Ordnung, zuerst habe ich ein Trick-Layout, damit ich meinen Telefon-Prototyp sehen kann meinen Telefon-Prototyp sehen während ich meine Arbeit mache Das zeige ich dir am Ende. Also die Dinge, die Sie tun müssen, damit das funktioniert, es gibt ein paar davon. Zuallererst benötigen wir einige Inhalte, die über den gesamten Frame hinausgehen Ich benutze einfach Loren Ipsum und habe es einfach geklebt, bis es über den Rand ging Dann müssen wir in den Prototypenmodus wechseln. Und wir müssen sicherstellen , dass der übergeordnete Frame das Scrollverhalten für vertikal einstellen soll. Jetzt funktioniert es noch nicht, aber Sie können sehen, dass es scrollt, wohingegen es zuvor nicht Hervorragend. Jetzt müssen wir es klebrig machen. Also habe ich hier einfach ein paar zufällige Sachen eingezeichnet. Es sieht aus wie ein Suchfeld, nur ein Feld mit einigen Häkchen darin. Du kannst meinen Rahmen dort sehen. Okay? Und ich wähle es aus, gehe in den Prototypmodus und sage Scrollen mit Elternteil. Nein, nein, nein. Wir machen cooles Sticky Scrolling Halte am oberen Rand an. Das ist alles. Es ist irgendwie, irgendwie eine Arbeitsuhr, die heute fertig ist Ich finde es toll, dass diese Funktion nicht funktioniert, weil sie oben bleibt und sich hinter dieser Kerbe versteckt. Also werden wir etwas Polsterung hinzufügen. Der einfachste Weg, etwas Abstand hinzuzufügen, ist innerhalb von Autolayout in der Entwurfsansicht. Ich habe Ich möchte das Ganze nicht in ein Order-Layout umwandeln, denn wenn ich das täte, wird es funktionieren. Aber es wird sich um diese beiden Einheiten drehen. Okay, das will ich nicht. Was ich tun möchte, ist es in einen übergeordneten Frame zu legen. Sag du, mein Freund, rahme diese Auswahl ein. Okay. Ich schaue hier drüben nach. Mein Suchfeld-Frame befindet sich in diesem übergeordneten Frame namens Frame Saving, toll, Dan zu benennen Und wenn ich dem übergeordneten Frame, Bild 7, ein automatisches Layout hinzufüge , was erlaubt, macht es alles und versucht, alles zu mischen, aber da ist nur eine Sache drin, das Suchfeld Jetzt kann ich coole Dinge tun wie zum Beispiel rülpsen. Okay, ich will etwas Polster. Lassen Sie uns zuerst ein Gefühl dafür bekommen, wie viel wir benötigen und es dann testen und feststellen, dass es nicht funktioniert. Lass uns weitermachen, was passiert ist. Nun, was passiert ist, ist, dass wir die Stickiness auf das ursprüngliche Suchfeld angewendet haben , nicht auf diesen neuen übergeordneten Frame, den wir gerade erstellt Wählen Sie also einfach den übergeordneten Frame aus, Frame 7, und Sie möchten nicht mit dem übergeordneten Frame scrollen, wir möchten, dass Sie ganz oben bleiben. Gehen wir jetzt weg. In Ordnung, wir müssen also einige Layout-Dinge erledigen. Aber das Ego, wie man ein wenig heraussticht Suche nach oben. Ich liebe es. Jetzt noch ein paar andere Dinge, bevor wir gehen. Eins ist, ich setze dieses Layout auf, du sagst vielleicht, das ist einfach, aber wenn du willst, wie hat er das gemacht? Was ich getan habe, war, es für den Moment los zu werden. Was ich getan habe, war, dass Sie tatsächlich mehr als eine Version von Figma in einem Browser öffnen mehr als eine Version von Figma in einem Browser Es ist einfacher, aber Sie können es auch in der Desktop-Version tun . Also werde ich mir eine Vorschau ansehen. Okay, ich bin auf der falschen Seite. Wahrscheinlich. Schau, ich bin dieser hier. Ich mache es immer noch. Es ist cool. Scroll-Zeug ist, das sind separate Tabs. Sie können es tatsächlich ziehen, halten, einfach nach dem Zufallsprinzip herausziehen. Nun, ich habe zwei Versionen von Figma, die dich umhauen. Mach das. Okay, und was ich mache, ist, dass ich ein bisschen Desktop-Arrangement magisch mache , damit ich sehen kann, wie beide das irgendwie rüber ziehen damit ich sehen kann, wie beide das irgendwie rüber ziehen und das ist übertrieben. Das mache ich. Eigentlich sind es nur zwei dieser Tutorials, um ehrlich zu sein, was ich normalerweise mache, ist, es auf diesem anderen Bildschirm hier zu öffnen . Du kannst nicht sehen, dass es all meine Notizen enthält. Also habe ich das eingerichtet. Die andere Sache war, dass ich dachte, ich hätte hier erwähnt, dass wir keine Engel brauchen, aber hey, lass es uns hier rein werfen. Ist das drin, ich kopiere es, füge es ein. Es ist nicht gelungen, weil beobachten Sie, was passiert. Sie gehen weg und dieses Ding macht komische Sachen. Also im Grunde dasselbe. Okay? Ich sage, du prototypierst, scrollt mit dem Elternteil. Nein, anstatt zu kleben, werde ich sagen, fest an Ort und Stelle. Lass es uns jetzt versuchen. Wir werden uns daran gewöhnen, dass die Polsterung für dieses Ding so aussieht, als würde es gegen die obere Leiste gedrückt werden, und wir werden die Kerbe umgehen und die Kanten werden das in einem zukünftigen Video tun Der letzte ist dieser Navi hier unten und so, als ob Rolls Around dem Elternteil folgt Wir wollen nicht, dass du dem Elternteil folgst. Willst du sagen, du hast einen Prototyp, scrollt ein Elternteil. Ich will, dass du repariert wirst, an Ort und Stelle bleibst. Schau, wie cool wir sind. Ordnung, in den zukünftigen Videos wird es besser, aber ich weiß nicht, es ist jetzt ziemlich cool. Wir müssen das machen. Los geht's. Jedenfalls. Okay, da ist unser Feature. Lassen Sie uns einige Dinge zusammenfassen, an die Sie sich erinnern müssen nur zur Erinnerung, und Dinge, die Sie nicht tun können Zuallererst muss der übergeordnete Frame, den Sie in der Vorschau betrachten, vertikal überlaufen sein. Warten Sie im Moment nicht bis zur Horizontalen, sondern befinden sich beide auf der Vertikalen, was muss der übergeordnete Frame, den Sie in der Vorschau betrachten vertikal überlaufen sein Warten Sie im Moment nicht bis zur Horizontalen, sondern befinden sich beide auf der sich in Zukunft ändern könnte Eine andere Sache ist, dass Sie es nicht dazu bringen können, am Boden zu haften und sich zu stapeln. Okay. Du kannst nur dazu bringen, dass es oben bleibt, nicht rechts, unten links, nicht unten. Sie müssen Texte haben , die überlaufen. Du hast also tatsächlich etwas zum Scrollen. Sie können die vertikale Überlaufleiste aktivieren. Ihre Vorschau wird sich nicht bewegen. Wenn nicht genug Platz ist, könntest du eine wirklich nette Liste machen, was ich hätte machen sollen, okay, oder einfach eine riesige farbige Box oder in Ipsum, wie ich es getan habe Und wie habe ich mein Loren Ipsum bekommen? Ich bin tatsächlich zu Content Real gegangen. Ich mag echte Inhalte , weil du zum Text gehen und sagen kannst, ich will Lauren. Lauren, okay. Drücken Sie die Eingabetaste und kombinieren Sie gewissermaßen die Art und Weise , wie andere Leute Loren Ipsum gemacht Ich war gerade davor, ich kann mich nicht erinnern oder es nicht verstehen. Loan füllt es einfach aus. Ich habe ein paar Mal kopiert und eingefügt. Aber wenn Sie altmodisch sind und kein Plugin verwenden möchten. Diese Seite. Ich habe gezeigt, dass jeder, der diese Folie benutzt, nicht auf der Website ist. Möglicherweise verwenden Sie es auch. Die guten alten Lernenden haben so hässliche Seiten, aber jeder benutzt sie Ich möchte, dass so viele Absätze generiert werden. Am Ende hast du das und du kannst es kopieren und einfügen und dich von Eds intermittierendem Fasten entsprechend meinem Alter spammen lassen von Eds intermittierendem Fasten entsprechend meinem Alter spammen Wie dem auch sei, los geht's. Das ist Sticky Scrolling. In Ordnung, wir sehen uns im nächsten Video. 50. 50 vertikales Scrollen: Hallo zusammen. In diesem Video machen wir das, wo wir oben eine Überschrift haben und sie oben klebt. Wir haben das irgendwie schon gemacht, aber schau mal, was passiert. Schau, ein Veranstaltungsort ist auf dem Weg. Es kommt. Es kommt. Oh, sieh mal, und es stapelt sich oben drauf. Sie kleben alle irgendwie an der Spitze und fallen quasi übereinander zusammen Super praktisch, eine ziemlich knifflige Funktion. Ich habe ursprünglich ein Video davon gemacht, als es herauskam, und ich fand, dass es nicht gut lief. Schauen Sie sich die Kommentare an, die viele Leute zu meiner schrecklichen Erklärung abgegeben haben. Also habe ich diesen neu aufgenommen, sodass die Benutzeroberfläche etwas anders sein wird. Aber ich habe das Gefühl, dass ich, ich weiß nicht, mein Zen gefunden habe und es hoffentlich ein bisschen besser umsetzen kann und habe erkannt, dass es ein kniffliges Projekt ist, aber viel Glück. Es macht wirklich Spaß und wir werden es machen. Lass uns da rein gehen. Okay, zuerst habe ich eine leere Seite. Ich habe meine Navigation und meine untere Navigation hinzugefügt. Und was ich getan habe, war nur, damit sie nicht scrollen, während ich daran arbeite. Das haben wir schon einmal gemacht. Sie klicken sie an, gehen zu einem Prototyp und sagen Position. Ich möchte nicht, dass sie zusammen mit dem Elternteil scrollen. Ich möchte, dass sie repariert werden. Mach es sowohl nach oben als auch nach unten, damit sie nicht mitscrollen. Die andere Sache, die ich tun möchte, ist, dass ich in der Lage sein möchte, es gibt eine Menge Tests mit diesem speziellen Projekt, also werde ich beide auf dem Bildschirm haben, indem ich sie mit der Überschrift Play präsent habe. Vergewissern Sie sich, dass Sie den Namen und das eigentliche Objekt, das Sie präsentieren möchten, oben ausgewählt haben . Okay, es erscheint in einem eigenen Fenster. Okay, originell. Das ist der Prototyp. Ich ziehe es raus und ändere es einfach in der Größe. Und schalte die Flows aus und ändere die Größe, sodass ich beide gleichzeitig sehen kann Es sind jetzt eigentlich nur noch zwei separate Fenster. Okay? Du kannst es in einem Browser machen. Normalerweise mache ich das auf einem anderen Bildschirm , den ich hier habe, aber du kannst ihn nicht sehen. Ich werde es so machen. Also teste ich das funktionierende Dokument. Als Erstes müssen wir also alles in einen Wrapper-Rahmen stecken Okay, also gehe ich zum Frame-Tool und entscheide, wie groß mein Textfeld sein muss Ich werde es für den Moment einfach erraten , über diese Art von Größe, lass es uns auf meiner Seite benennen. Okay, und ich werde sagen, was machen wir? Wir werden diesen einen Rapper nennen. Okay, okay, gehen wir zur Entwurfsansicht. Also habe ich meine Verpackung in dieser Verpackung. Ich hätte gerne alle meine Inhalte. Okay, weil es in diesem Wrapper scrollt. Also lasst uns unsere Teile hinzufügen. Ich nehme mein Textwerkzeug und klicke einfach irgendwo in meinen Wrapper Fügen Sie einen Titel hinzu, Veranstaltungsdetails. Okay, es ist eine Überschrift. Jetzt bist du vielleicht geneigt zu gehen. In Ordnung. Ich drücke auf Return und füge dann alle, du weißt schon, die Details der Veranstaltung hinzu. Okay? Die Sache Scrollen ist, dass das separate und separate Boxen sein müssen separate und separate Boxen sein Die Sache, die Sie oben platzieren möchten , ist die Überschrift, und der gesamte Haupttext muss sich in separaten Textfeldern befinden der gesamte Haupttext muss sich in separaten Textfeldern Ich habe meine fertige Version hier drüben, weil Sie hier sehen, dass diese Version von dieser getrennt ist, sodass sie oben bleiben kann und sie weiterscrollt Lassen Sie uns eine Vorschau dieser Version ansehen, nur um es übersichtlich zu machen. Okay, da hast du's. Wenn ich oben scrolle, siehst du, die Überschriften hängen bleiben und alles andere in separaten Boxen ist Selbst bei der zweiten Überschrift werden sie in einem eigenen Feld dorthin Das ist in einer eigenen Box. Das ist auf unserer eigenen Kiste. Und das ist eine der wichtigsten Erkenntnisse dabei, dass sie alle in ihren eigenen separaten Boxen sein müssen In Ordnung, also lass uns zu unserem zurückkehren. Wir haben eine Überschrift, okay, ich werde das alles loswerden und einfach meine einsame alte Überschrift hier drin haben. Hmm hmm. Ich lege es in den oberen Rand meiner Verpackung, achte nur darauf, dass es noch in meiner Verpackung ist Okay, ich habe meine Überschrift. Okay, weißt du, wir belassen es bei den Veranstaltungsdetails. Ich brauche jetzt meine Kopie. Ich habe hier welche, die ich gerade rumliegen hatte. Ich hole mir ein Stück davon. Kopiere es Sie können Content Reel verwenden oder vielleicht haben Sie herumliegen oder Sie können einfach beliebige Details abrufen. Geben Sie also zwei ein, ich werde ein eigenes separates Textfeld zeichnen. Okay, nicht Teil des Schlags, es ist schwer, die Hülle zu erkennen Okay, wenn du willst, dass es bis zum Rand geht , aber lass es uns einfach rausziehen Lass uns auf Einfügen klicken. Okay, ich klicke auf „Aus“ und dann ziehe ich es einfach hin und her, sodass es tatsächlich meiner äußeren, übergeordneten Hülle einrastet Du kannst es dort sehen. Also Körperkopie. Es ist nicht wirklich wichtig. Ich will nur, dass es passt. Cool, wir haben also eine Hülle in diesem Rapper, wir haben einen Schlag, und in dieser Hülle haben wir Wir haben auch eine separate Box für den Nachdruck. Nun, was diesen Haupttext angeht, ist es im Moment wahrscheinlich einfacher. Es ist ein Feld mit fester Breite, je nachdem, wie Sie Ihres gezeichnet haben. Ich habe es irgendwie herausgezogen, damit es repariert ist , es spielt keine Rolle, aber es macht es weniger verwirrend Wenn es auf automatische Höhen eingestellt ist, dehnt es sich einfach aus und zieht sich zusammen, so wie wir es haben Also lass es uns testen. Lass uns rüber gehen, es passiert nichts, okay? Also das Erste, was ich tun muss, ist, genügend Inhalt hinzuzufügen, damit er gescrollt werden kann, weil es noch keine Scrollfähigkeit gibt Also lasst uns das alles schnappen und kopieren. Und ich gebe Return ein und tippe auf Einfügen. Kehren Sie in Einfügen zurück. Ich weiß, dass doppelt zurückgegeben wird, ich füge es nur ein. Einfügen, Einfügen Jetzt habe ich also Sachen, die scrollbar sind. Ich kann immer noch nicht scrollen. Okay, ich versuche es. Du kannst nicht sehen, dass mein Scrollrad damit beschäftigt ist, Dinge zu erledigen, also sicherzugehen, dass es in meiner Verpackung Ich habe dieses Ding, ich nenne es Body Copy, Copy One Die Art und Weise, es zum Scrollen zu bringen, ist manchmal, dass wir es bis zum übergeordneten Frame gemacht haben. Okay, und wir sind zum Prototyp gegangen. Und wir sind von Overflow, ohne Scrollen, zu Vertikal übergegangen ohne Scrollen, zu Machen wir es einfach für diesen Wrapper, weil wir nichts anderes brauchen, um hier rein zu scrollen Also ich sage Sie unter Prototyp-Overflow. Kein Scrollen Lassen Sie uns es jetzt bitte vertikal scrollen. Also lass uns das machen. Also haben wir die Grundlagen im Griff, richtig. Ein kleines scrollbares Kästchen in der Mitte. Jetzt, wie wir es im Suchfeld getan haben, muss ich diese Überschrift hier erstellen Okay, ich habe meinen Rapper reingeschaut, ich habe Eventdetails und ich sage Prototyp Ich möchte, dass es nicht mit Parent scrollt , was die Standardeinstellung ist, und es nicht repariert, wie wir es mit der oberen und unteren Navigationsleiste gemacht haben Ich möchte, dass es klebrig ist, da ich möchte, dass es am oberen Rand haftet . Okay, also lass uns das abklicken und dem ein Ziel geben. Bist du bereit, es klebt, es ist großartig. In Ordnung, Phase eins, fertig. Wir haben eine Überschrift , die ganz oben bleibt. Es gibt allerdings einige Probleme. Sie können sehen, dass sich darunter Text faltet. Das ist also eine der Eigenheiten, ich weiß nicht, die Ihnen bei vielen Online-Beispielen auffallen Sie haben nur eine farbige Schachtel. Und so vermeiden sie es einfach, anzuerkennen, dass es ein kleines Problem mit sich überschneidenden Dingen gibt ein kleines Problem mit sich überschneidenden Dingen Lassen Sie uns das anerkennen und tatsächlich daran arbeiten, es zu beheben. Was wir tun wollen, ist wie ein Trick. Im Grunde werden wir hinter den Veranstaltungsdetails ein Feld platzieren , das dieselbe Farbe wie der Hintergrund hat. Stellen Sie sicher, dass die Reihenfolge der Ebenen stimmt und der Text tatsächlich immer noch da ist, aber er wird hinter einem großen Feld angezeigt. Verstehst du, was ich meine? Wir stellen einfach ein großes farbiges Kästchen dahinter und wir rutschen hinterher. Also lass uns versuchen, das zu tun. Stellen wir zunächst sicher, dass wir die Treffer-Details ausgewählt haben . Wenn wir zum Design gehen, okay, werden Sie feststellen, dass wir dem keine Füllung hinzufügen können , da es sich nur um ein einfaches altes Textfeld handelt. Ich kann eine Füllung hinzufügen , wenn ich eine Füllung daraus machen möchte . Mach es zum Hintergrund. Es füllt nicht das Feld, es füllt tatsächlich den Text. Das werde ich rückgängig machen. Also was wir tun müssen, ist es in eine eigene kleine Schachtel zu packen. Okay, wir packen es in einen eigenen kleinen Rahmen. der Text ausgewählt ist, sagen wir, du, mein Freund, gehst du in einen Rahmen. Der einzige Grund, warum wir das tun, ist damit wir einen Rahmen hinzufügen können, damit wir eine große, verrückte Farbe daraus machen können. Ich werde außerdem darauf klicken und uns etwas Verrücktes aussuchen . Lass uns auf den Bildschirm schauen. Schauen wir uns das an. Es kann funktionieren oder auch nicht. Okay, schauen wir uns das an. Es funktioniert nicht. Ich weiß, dass es nicht funktioniert. Okay, denken Sie ein wenig nach, machen Sie eine Pause. Warum sollte das jetzt nicht funktionieren? Vielleicht arbeitest du bei, oh, du schaust vielleicht nur zu. Warum klebt das nicht mehr? Weißt du, warum es so ist, weil es jetzt in einem Rahmen ist? Lassen Sie uns das also anstelle von Frame 35 umbenennen. Nennen wir das Überschrift eins. Deshalb haben wir die Event-Details im Prototype Sticky hinzugefügt. Okay, aber dann haben wir es in diese andere Hülle gesteckt und die ist nicht klebrig Also eigentlich brauchen wir das nicht, um klebrig zu sein. Jetzt. Wir können es ausschalten, du kannst lassen, wie es ist, aber die Überschrift, okay, die Verpackung, das Elternteil, dass es in dieser kleinen grünen Kiste ist, er muss klebrig sein Lassen Sie uns das versuchen. Umfrage, kein Scroll-Elternteil. Wir sorgen dafür, dass er klebrig wird Wir sollten also wieder arbeiten und du sagst, Dan, es funktioniert immer noch nicht. Der nächste Teil, über den wir Bescheid wissen müssen, okay, ist, dass die Reihenfolge der Ebenen wichtig ist. Also die Momente, schauen Sie mal, wir haben unsere Hülle und was als Nächstes oben in der Reihe steht, ist der Fließtext Wir wollen nicht, dass es ganz oben steht, weil es quasi ein Scrollen über den Dingen Wir werden also sagen , lassen Sie uns das beenden. Sagen wir, wenn wir Sie oben treffen, ist es immer noch in der Verpackung, aber über dem Körpertext. Lass es uns jetzt versuchen. Schau es dir an. Schau dir das an. Es funktioniert, okay. Da hast du's. Jetzt müssen wir also den Rahmen etwas größer machen. Okay? Ich werde es einfach herausziehen, sodass es überall abdeckt, wo sich potenzieller Text befinden wird. Du kannst sagen, schau, verschwindet dahinter und du sagst, du kannst eine große grüne Kiste behalten. Okay, wenn es dir gefällt. Ich werde die Box tatsächlich wechseln. Ich werde zum Design gehen und sagen, eigentlich bist du jetzt die Hintergrundfarbe. Kannst du jetzt sehen, wie die Fälschung vor sich geht? So lässt du das Ding funktionieren. Okay, Sofaza, gut, wie geht's? Das ist sowieso eine viel bessere Erklärung als mein letztes Video, viel ruhiger In Ordnung, als Nächstes fügen wir mehrere Überschriften Und ich werde rückgängig machen, dass Tabak grün ist , nur damit es für euch visuell einfacher ist Aber im Idealfall möchte ich, dass es dieselbe Farbe hat wie das. Lassen Sie uns eine weitere Überschrift hinzufügen. Das Problem ist, dass dieser Wrapper hier standardmäßig Inhalte ausschneidet Er steckt da drin fest. Und ich möchte noch mehr hinzufügen und du kannst es nicht sehen. Du sagst, wie füge ich hier eine weitere Überschrift hinzu? Okay, ich möchte, dass es in der Verpackung aber ich möchte auch in der Verpackung sein Aber nach dem ersten Hauptteil , der hier unten losgeht, klicken wir auf den Wrapper-Elternteil Und wir sagen, lassen Sie uns den Inhalt vorerst nicht ausschneiden, okay, wir müssen ihn wieder einschalten Aber nur für den Moment, während wir arbeiten, lassen wir das draußen. Du wirst feststellen, dass es da hingehört, unten raushängt. Dann sagst du, ich dachte, wir hätten gesagt, dass wir keine Inhalte ausschneiden sollen, wir haben es für diesen Wrapper gemacht Aber das eigentliche Dokument selbst, okay, der äußere übergeordnete Frame hat genau das gleiche Problem Okay? Es schneidet es auch ab. Jetzt können wir alles sehen Wir müssen beide wieder einschalten . Verwirrend. Ich weiß. Okay. Aber während wir arbeiten, lassen Sie uns etwas vom Deckblatt und dem übergeordneten Rahmen abschneiden , okay? Und jetzt können wir irgendwie Sachen sehen. Wir wollen also mehr Bits hinzufügen. Also, was wir tun werden, ist es in diesem Fall einfacher ist, es hier im Ebenen-Panel zu tun diesem Fall einfacher ist, es hier im Ebenen-Panel , nur weil all das Clipping vor sich geht und es sich im Rapper befindet. Also werde ich beide nehmen, sie kopieren und einfügen, Überschrift zwei und Text zwei , und ich werde versuchen, sie nach unten zu ziehen Los geht's. Manchmal ist es einfacher, einfach die Umschalttaste zu benutzen und den Abwärtspfeil zu drücken. Wenn Sie sie im Ebenenfenster ausgewählt haben, können Sie sehen, dass sie bereits aus ihren Eventdetails herausgesprungen ihren Eventdetails Im Moment gibt es Tricks , um das zu tun. Wir machen es einfach im Stil eines Höhlenmenschen und verschieben es einfach nach unten Okay, sie sind also danach dran. Okay, sie sind also aufgereiht. Lass uns zwei davon machen, solange wir es haben. Eigentlich werde ich diesen etwas kleiner machen. Meine Kopie, lass uns das einfach kleiner machen. Okay, ich werde es hier nochmal machen, Überschrift zwei, Text zwei, Copy Paste. Ich habe noch eine Überschrift drei und eine Kopie drei. Lassen Sie uns die runterziehen. Das könnte der knifflige Teil , sie alle zu stapeln Manchmal ist es einfacher, sie einfach bereit zu haben, nicht während wir an Überschrift zwei arbeiten Ich werde mich ändern, ich werde sagen, das sind meine Angaben zum Veranstaltungsort oder einfach nur der Veranstaltungsort. Und dieser hier wird wo, wo, wann sein. Ordnung. Es könnte funktionieren, weil wir den, der funktioniert hat , kopiert und eingefügt haben. Mal sehen, wie es uns geht. Lassen Sie uns zunächst überprüfen, was wir haben. Was funktioniert? Es funktioniert nicht. Okay. Ich scrolle nach oben, aber ich kann keine anderen Dinge sehen. Warum kann ich es nicht sehen Du hast es schon entdeckt, oder? Das liegt daran, dass es nicht wirklich in meiner Verpackung ist. Siehst du, lass uns die runterdrehen. Überschrift drei, gibt es? Okay, und da ist Überschrift zwei. All das ist nicht in meiner Verpackung. Ihr kommt jetzt runter in die Verpackung. Lasst es uns versuchen. Okay. Scrollen wir also nach oben und da ist der Veranstaltungsort. Und du weißt, was ich getan habe. Ich habe den letzten Text nicht lang genug gemacht , weil ich nicht mehr scrollen kann. Richtig? Es besteht also keine Möglichkeit, dass sie sich überlappen Okay, der letzte Text ist hier unten. Ich gehe, ich kopiere es und gehe einfügen, einfügen, einfügen. Es gibt also noch viel mehr. Verstehst du, was ich meine? Wenn es zum Beispiel nicht genug aktuelle Inhalte gibt, kann ich jetzt nicht weiter nach oben scrollen Es gibt jede Menge Inhalte, um weiter zu scrollen. Also schau Einzelheiten zur Veranstaltung, los geht's. Der Veranstaltungsort deckt es ab und wann decken wir es ab? Das von Fluke Works. Okay. Vielleicht versuchst du es mit deinem und du würdest sagen, es funktioniert nicht. Okay. Das liegt an der Reihenfolge der Ebenen. Also wenn ich sie am Ende einfach in meine Verpackung unten hier ziehen würde Okay. Was wahrscheinlich eher die Standardoption sein könnte. Okay, also lass uns gehen. Die Veranstaltungsdetails sind oben, dann los geht's. Veranstaltungsort steht oben, perfekt, und wenn wir zuschauen, verschwindet er darunter. Okay, die Reihenfolge der Ebenen ist also wirklich wichtig. Also der Schlag, also wollen wir, dass der Treffer unten ist und der Haupttext unten ist. Wir wollen mit Punkt zwei und dann mit Rubrik drei abgedeckt werden. Aber Kopie drei, macht das Sinn? Lass es uns jetzt versuchen, wann, wo jetzt all das Zeug herausragt und du sagst, warum ragt das heraus? Das liegt daran, dass wir den Inhalt des Clips gerade geöffnet haben, während wir daran arbeiten, das Zeug zu sehen, weil es sonst natürlich schwierig ist, daran zu arbeiten. Wir können das hier wieder ausschalten. Jetzt. Jetzt haben wir etwas, das ein bisschen mehr so ist, wie wir es wollten, okay, wo es nicht von unten scrollt, und wir haben diese Dinge, die sich stapeln Da hast du's. Da scrollen wir weg. Also werde ich auf jeden von ihnen eingehen und sagen Bill wird gut sein , Überschrift zwei, ist diese Farbe. Dann ist es manchmal einfacher, einfach das Ebenenbedienfeld zu verwenden. Eins zu treffen ist fertig damit, eins zu treffen. Was wir getan haben, zwei zu treffen ist drei zu treffen. Drei zu treffen, wird die Hintergrundfarbe sein. Lass es uns jetzt versuchen. Jetzt ist es ein bisschen reibungsloser, wo es so funktioniert, wie Sie es sich vorgestellt haben. Da hast du's. Da ist ein Ding zum Scrollen, das sich alles stapelt. Es ist eine Art neues Feature. Es ist ein bisschen kompliziert. Es ist wirklich kompliziert. Okay, ich habe versucht, langsam vorzugehen und Schritt für Schritt vorzugehen. Okay, und zu guter Letzt muss die äußere Hülle eigentlich nicht den Inhalt ausschneiden Es liegt ganz bei dir. Du musst es nur ein- oder ausschalten. Es spielt keine Rolle , wann es in die Vorschau geht. Es ist einfach einfacher, wenn Sie im Hintergrund arbeiten. Die andere Sache, die Sie vielleicht tun, ist, dass es wirklich schwierig ist, mit schwarzem Text zu arbeiten, wenn Sie ein schwarzes Thema haben. Vielleicht möchten Sie also auf den Hintergrund klicken und zu Page wechseln. Und wählen Sie einfach etwas Leichteres, damit Sie Ihren Haupttext darauf sehen können. Und die Dinge, die überprüft werden müssen, sind sicherzugehen , dass ich einfach auf die geklickt habe. Sie können also unter Design sehen, dass es hauptsächlich unter Clip-Inhalten ist, die ein- oder ausgeschaltet sein könnten. Wirklich, es wird immer noch funktionieren. Und unter Prototyp muss ich nicht scrollen. Dieser Wrapper muss einen Überlauf an vertikalem Scrollen haben Okay, damit er funktioniert und er unter „ Clip-Inhalte entwerfen“ funktioniert, schalten Sie ihn wieder Schalten Sie den Clip-Inhalt , um ihn bei der Bearbeitung zu bearbeiten. Und schalten Sie es dann wieder ein, um eine schöne Vorschau zu erhalten. Okay, das Innere dieses Wrappers, die Reihenfolge der Ebenen ist wirklich wichtig Die oberen Teile sind unten, okay? Und die letzten Teile befinden sich oben im Ebenenstapel. Weil du darauf aufbauen wolltest, wenn du sie dir unter der Überschrift „ Okay, geh zum Design“ ansiehst . Sie können den Inhalt des Clips sehen. Macht in diesem Fall keinen Unterschied, aber ich habe meinen Text nur in dieser Überschrift weil ich ihm eine Hintergrundfarbe hinzufügen wollte , um den Text darunter zu verbergen. Okay, du musst es nicht haben. Und du musst unter dem Prototyp sicherstellen , dass die Überschrift gut lesbar ist, okay? Auch wenn Sie keinen Rahmen verwenden, stellen Sie sicher, dass die Überschrift klebrig ist. Sie können beide klebrig sein. Es spielt keine Rolle. Es ist hauptsächlich dieser hier, okay? Was auch immer in diesem Level ist, okay? Direkt, was auch immer in dieser Ebene ist , direkt unter der Decke. Das andere, was Ihnen Probleme bereiten könnte, ist, dass Ihr Haupttext eingestellt sein könnte Es wird wirklich verwirrend, wenn es auf so etwas wie den letzten Wert eingestellt ist , also auf eine feste Größe. Es ist viel einfacher, wenn die automatische Höhe aktiviert ist und du mit dem Standard-Scrabble mit übergeordnetem Objekt nichts in Sachen Prototyping tun musst Objekt nichts in Sachen Prototyping Standard-Scrabble mit übergeordnetem Du kannst es so lassen und einfach durchgehen und sichergehen , dass sie alle gleich sind Überschrift zwei ist klebrig und befindet sich über Überschrift eins, und dasselbe gilt für Überschrift drei. Ordnung, teilen Sie mir die Kommentare mit, wenn Sie auf andere Probleme stoßen , und wenn es funktioniert, schauen Sie in den Kommentaren ob Sie jemand anderem helfen können. Ich werde auch mal nachschauen und schauen, ob ich das vielleicht etwas besser erklären kann. Definitiv besser als meine erste Version. Immer noch eine knifflige Aufgabe , wenn Sie ziemlich viel zu kämpfen haben. Mein Rat wäre, noch einmal von vorne anzufangen, anstatt zu versuchen, ein vorhandenes Problem zu beheben, besteht darin anstatt zu versuchen, ein vorhandenes Problem zu beheben, besteht darin , das Video irgendwie durchzustapfen und es erneut durchzuarbeiten und einfach ein bisschen zielgerichteter zu sein , damit Sie ein bisschen Verständnis dafür haben bisschen Verständnis dafür Ich wette, die zweite Version wird gut sein und es kann praktisch sein, all Ihre Überschriften und den Haupttext für den Anfang bereit zu haben Ihre Überschriften und den Haupttext für , bevor Sie mit einigen anderen Dingen beginnen. Nur damit du nicht versuchst, es im Handumdrehen zu bauen und es irgendwie zu ziehen und an seltsame Orte zu gelangen. In Ordnung. Ich hoffe, das war hilfreich und das ist es. Ich werde dich im nächsten Video sehen. Viel Glück beim Scrollen. 51. Kursprojekt 06: Mehrere klebrige Überschriften: Oh, weißt du, wie viel Uhr es ist? Es ist keine schmerzhafte Hausaufgabe, Zeit zu erledigen. Es ist UNTERHALTSAME Projektzeit für den Unterricht. Es ist ganz anders. Das hier ist, du wirst versuchen, deine eigenen Multiple Sticky Headings zu erstellen deine eigenen Multiple Sticky Headings Hoffentlich spielst du im letzten Video mit. Wenn nicht, haben Sie jetzt die Gelegenheit, es zu üben. Dies ist eines der wichtigsten Videos, von denen ich denke, dass Sie, wenn Sie dieses Kursprojekt machen, viel lernen werden, weil Sie auf viele Probleme stoßen werden , aber diese Probleme werden Ihnen helfen , ein besserer Figma-Benutzer Mach im Grunde genau das Gleiche, was wir gerade im letzten Video gemacht haben. Also erstelle diese stapelbaren scrollenden Dinge von hier. Sie können sehen, wie sie übereinander gestapelt sind. Ich möchte jedoch, dass du echte Daten verwendest. Mit echten Daten meine ich nicht wie den Platzhalter Loren Ipsum, ich möchte, dass du entweder eine gefälschte Veranstaltung erstellst, auf einer Eventseite etwas findest, das du verwenden und ausleihen und als Platzhaltertext verwenden kannst ausleihen und als Platzhaltertext verwenden Ich möchte, dass du auch ein Bild hinzufügst. Bei mir hatte ich das Bild wahrscheinlich entweder direkt über der Event-Übersicht oder darunter. Ich lasse dich entscheiden, wo und lege es an einem echten Datum und an einem echten Ort ab. Stellen Sie sicher, dass genügend scrollbare Inhalte vorhanden sind. Das ist alles. Die einzige andere Sache ist gut, es hat geklappt. Also unter Prototyp, verbinde es mit dieser dieser Homepage-Karte. Also, welche Bilder und Sachen du hier verwendest , bring es hier zum Laufen. Wenn es also angeklickt wird, springt es zu dieser Seite dort Und wenn du mit einem Video fertig bist, okay, von deinem Scrollen, ist das die beste Option Denken Sie daran, dass sowohl auf dem Mac als auch auf dem PC Videoaufnahmen möglich sind. Der Mac hat eine integrierte Funktion namens QuickTime Google. Wie benutzt man das? Windows hat auch einen. Ich kann mich nicht erinnern, dass es aufgerufen wurde und lade einen Link zu deinem Video hoch. Sie können auch YouTube oder Vimeo oder Behance verwenden. In den Videos der Moderatoren wurde dieses MNA bereits besprochen. Wie dem auch sei, es ist eine Zusammenfassung. Teile das Video, lade es zu den Aufgaben hoch, den Link zu ihnen, Aufgaben und tagge mich in den sozialen Medien Benutze das Hashtag-Mitglied Figma Advanced ohne Punkt. Es ist kein einfacher Weg, mir die Arbeit der Leute speziell für diesen Kurs anzusehen . Wähle dein soziales Gift und markiere mich darin. Ich liebe es zu sehen , was du gut machst. Denken Sie also daran, wenn Sie nicht so viel in den sozialen Medien posten, sondern vor allem in den Aufgabenbereichen um die Arbeit anderer Leute zu kommentieren. Denk an die Regel, aber wenn du sie weitergibst , ist das alles. Projektzeit für den Unterricht. Genieß es. Es wird schwer, ich verspreche, dass ich mir das Video vor diesem ansehen muss. Ein paar Mal könnten Sie auf neue Probleme stoßen. Wenn du das tust, lass es mich in den Kommentaren wissen. Wenn du dort unten jemanden siehst , der Probleme hat oder Hilfe braucht, springe auch da runter und hilf ihm in den Kommentaren. Geh, Team. Okay, das ist es, ich werde es im nächsten Video sehen 52. Erstelle interaktive Komponenten in Figma: In Ordnung, warte. Sie musste sich das ansehen. Wenn ich den Mauszeiger über diese Schaltfläche bewege, ändert sich das Gepäck, es ist interaktiv Es ist eine Komponente, die funktioniert. Ich habe das schon früher im Kurs mit Animationen gemacht , aber wir haben es nicht wirklich interaktive Komponenten genannt , weil es Animation war. Aber jetzt bekommen wir diesen Schwebezustand. Die eine Sache wird sein, ist das offensichtlich? Ich weiß es nicht. Und wir haben ein, wirklich einfach zu erlernen dieses Prinzip ist wirklich einfach zu erlernen. Wir wollen es nur noch einmal zusammenfassen Das einzige, was allerdings nicht funktionieren wird, ist, den Mauszeiger auf einem Telefon zu bewegen, okay, so viel Sie haben möchten, ist Ihr Finger über Ihr Telefon und Sie können es wechseln. Es funktioniert nicht. Dies ist eher eine Hover-Schaltfläche für den Desktop, aber der Hover-Status ist eine großartige Möglichkeit die interaktiven Komponenten anzuzeigen Machen wir es also zu unserem ersten Stopp. Nur damit du es weißt, das ist genau die gleiche Technik, die wir zuvor für unsere Animation angewendet haben , ohne dass Tics auftauchten, okay, wir haben daraus eine Komponente gemacht Es gab Varianten. Es gab Interaktionen zwischen diesen Varianten. Das ist eine indirektive Komponente, aber wir werden sie quasi als Animationstrick verwenden Wenn Leute über interaktive Komponenten sprechen, haben sie es normalerweise mit diesen UI-Elementen wie dem nützlichen Button zu tun . Also lass uns gehen und es machen. Also habe ich zunächst einen Button erstellt. Die Schaltfläche ist nichts anderes als Häkchen und ein Rechteck. Ich habe meins und Autolayout erstellt. Die Größe der Schaltfläche ändert sich. Das ist völlig optional. Was optional ist, ist, dass das Ding eine Komponente sein muss. In meinem Fall ist es ein Frame, das ist ein Auto-Layout-Frame. Ich werde es in eine Komponente umwandeln. Sie können dort unten das Komponentensymbol sehen. Ich werde eine Variante davon machen. Und bei diesem hier wechsle ich mit Shift D in den Designmodus . Klicke auf den Hintergrund, suche den Hintergrund und wähle eine meiner dunkleren Farben. Okay, die Schleife, die wir jetzt machen müssen, ist die Animation hinzuzufügen zeigt erneut Shift E, um zum Prototypmodus zurückzukehren und zu sagen, das geht bis hierher. Okay, aber beim Tippen gehe ich zur schwebenden Wand Okay. Und wenn es schwebt, wechseln Sie zu seiner Variante zu Ich habe ein paar schlechte Benennungen, aber es funktioniert Gehen wir und sagen sofortiger Tod. Lassen Sie uns einfach alles standardmäßig belassen und es testen, vielleicht in einer Schicht. Ich entscheide, an welcher Seite ich arbeiten möchte. Ich werfe es auf meine Wunschliste. Auf jeder Seite, die Sie möchten, gehen Sie zu Mein Vermögen, Option oder Alt zu K. Und ich werde gehen, Wo bist du Button? Richtig. Da hast du's. Ich werde es hier auf diese Seite werfen, die ich hier in der Vorschau sehe. Und wenn ich so darüber scrolle, schwebt es hoffentlich so darüber scrolle, schwebt es Es ist nicht sehr hübsch, aber das ist es. Indirektive Komponenten. muss also passieren, dass es sich um eine Komponente handeln muss und Sie mehr als eine Variante benötigen. Und Sie müssen zwischen den beiden interaktiven Komponenten in einer schicken Mine ein wenig animieren den beiden interaktiven Komponenten in einer schicken Mine ein wenig diesem Video gibt es nichts anderes, das so produktiv ist. Im nächsten Video werden wir etwas Komplizierteres machen. Aber im Moment werde ich meins verschönern. Wenn du rumhängen willst. Bleib hier. Wenn Sie das nicht tun, wechseln Sie nicht zu, was ich möchte ist, dass Sie mit der Maus über die erste Liste fahren und diese Dinge benennen Also gehe ich mit Shift E zurück in den Designmodus und du wirst als Standard bezeichnet, das ist in Ordnung. Und dieser hier, nicht Variante Tooth, also wird er Hover heißen Ich werde mir diese Person auch mit einem Schlagschatten aussuchen. In der Tat ist mein Lieblings-Schlagschatten Null, etwa zwei. Ich mache mit bei so etwas. Ich mag es, wenn es da irgendwie direkt nach unten zeigt. Den kann ich sehen. Jetzt mit der Maus darüber Kannst du sehen, dass ein kleiner Schlagschatten erscheint und auch ein bisschen hängen bleibt, wie er sich mit Instance ändert. Also Shift D, okay, um zum Prototyp zurückzukehren, anstatt zur Instanz zu gehen, gehe ich zu Dissolve oder Smart Animate, wenn wir zur Auflösung gehen Es gibt also einen schönen Übergang zwischen den beiden. In Ordnung, willst du noch etwas tun? Nein. Es ist ein Mauszeiger, Dan. Nun, es hat dich gewonnen. In Ordnung, das wird für den Moment sein. Lassen Sie uns im nächsten Video auf etwas Komplizierteres eingehen. 53. Wie man ein Häkchen in Figma ein- und ausschaltet: Hallo alle zusammen. In diesem Video zeige ich Ihnen einen weiteren Anwendungsfall dafür. Interaktive Komponenten, wie die Hover-Schaltfläche im letzten Video Nur noch eine, um Ihnen ein gutes Verständnis des Potenzials für viele verschiedene UI-Mikrointeraktionen Schau dir das hier an. Klicken Sie auf, klicken Sie aus, klicken Sie auf, klicken Sie aus. Nett. In Ordnung, lass uns anfangen In Ordnung, um loszulegen, habe ich nur ein Textfeld erstellt Ich habe ein Rechteck mit abgerundeten Ecken gezeichnet und ein Häkchen darauf gesetzt Sie können ein Häkchen ziehen. Wir können eines von einem Plugin unter Plugins finden , weil du wie ich vielleicht etwa 10 Minuten damit verbracht hast ein Häkchen zu setzen, das immer noch nicht gut aussah. Und ich zeige dir ein weiteres cooles Plugin namens Icons Eight, das ich für Icons verwende . Ich habe eine kostenpflichtige Lizenz für diesen. Es gibt eine kostenlose Option zwar durchsuchbar ist, aber du kannst sie durchgehen und auswählen, sagen wir, du machst Arbeit, wie wir sie für iOS gemacht haben, sie wird tatsächlich alle Icons für dieses Designsystem haben für dieses Designsystem Das Gleiche gilt für Dinge wie Material für Android. Windows da, es gibt alle möglichen guten Sachen, okay, und du kannst die richtige Größe wählen und SVG ist, woher ich mein Häkchen habe Oder du kannst deins zeichnen. Okay, damit das Ding funktioniert, wähle ich alle Bits aus, indem ich bei gedrückter Umschalttaste auf alle Bits klicke, und ich konvertiere es in eine Komponente, hole indem ich bei gedrückter Umschalttaste auf alle Bits klicke, und ich konvertiere es in eine Komponente, vielleicht eine Variante und tausche diese beiden dann Ich werde hier rauf gehen und es nicht löschen, aber nur einen Blick darauf werfen Und das war's. Nun, eigentlich die Hälfte. Ich werde in meinen Prototypmodus und Shift D wechseln . Und ich sage dir Variante. Ein bisschen doppelklicken geht weiter. Okay, also du gehst auf Tap dorthin, änderst es in diese schlecht benannte Variante , zu I'm gonna get her to go Instance. Und das war's. Ich muss ein Beispiel dafür veröffentlichen. Okay, lassen Sie uns eine Instanz davon nehmen. Gehen Sie zu einer leeren Seitenzahl vor Bildern, um durch offene Frames zu gehen. Ich gehe zu meiner Asset-Panel-Option oder Alt zu, und ich sage Ihnen gleich hier. Dann klicke ich hier drüben auf Clack. Und es wird irgendwie funktionieren. Die Zecke erschien , verschwand aber nicht. Also lasst uns diese Verschiebung korrigieren, um ein paar zurückzugehen . Der Säuglingsnovember. Und hier wechseln Sie zu und ich sage , das geht dorthin, wenn Sie darauf klicken, und das geht dorthin, wenn Sie darauf klicken oder tippen Denken Sie daran, dass dort Tuple Mobile steht, klicken Sie auf einen Desktop, sehen Sie sich die gleiche Vorschau an, dasselbe, und es sollte gut funktionieren Es ist startklar. Klicken Sie auf, klicken Sie aus, klicken Sie auf Golf. Als wäre es nett und einfach. Das ist eine Komponente, die Varianten hat , aber jetzt eine Interaktion enthält. In Ordnung, beim nächsten Video auf das knifflige Ding klicken. 54. 54 Schiebe-Button: Hallo zusammen. Lassen Sie uns unser Wissen über interaktive Komponenten ein wenig weiterentwickeln und diesen Prototyp so gestalten , dass die Linie, ich fasziniert bin, hin und her springt , folgt, wohin wir Lassen Sie uns einsteigen und es zum Laufen bringen. In Ordnung, um anzufangen, benötigen wir drei separate Seiten. Ich habe meinen heute am Wochenende angerufen und das neueste. Okay. Es wird mit dieser Navigation oben hier übereinstimmen. Und ich habe gerade die Karte, die wir zuvor gemacht haben, dupliziert und alles, was ich getan habe, war die Bilder zu ändern Es sieht also so aus, als würden wir im Moment die Seiten für Sie wechseln Moment die Seiten für Sie Vielleicht fügen Sie einfach Text auf die Seite ein damit Sie wissen, dass Sie von verschiedenen Seiten springen. Was ich auch getan habe, war drei Textteile zu erstellen. Das ist alles was sie sind. Und ein Rahmen hier könnte ein Rechteck sein, ist nur eine Zeile, die Befehl R, Steuerung R heißt . Auf einem PC nenne ich es Linie. Das wird das Ding sein, das herumspringt. Okay. Als Erstes holen wir uns das alles und konvertieren wir es in eine Komponente. Lassen Sie uns die Navigation so einrichten, sie zwischen ihnen springt und das testen. Zuerst werde ich die Komponente ausschalten, die Hauptkomponente ausschalten, weil ich nicht wechseln kann, um zum Prototyp zu wechseln. Ich schaffe es heute nicht, zu mir selbst zu gehen , weil es in sich selbst ist. Also müssen wir uns diese Komponente schnappen , die Hauptkomponente. Du kannst da oben bleiben. Geben wir dem Ganzen einen neuen Namen, der sich um Herrscher dreht Es ist Befehl und Kontrolle. Unser Auf einem PC heißt es, diesen umzubenennen und Navi Hyphen Sub zu wechseln, wie bei meiner kleinen Unternavigation In Ordnung, lassen Sie uns hier eine Instanz einrichten. Ziehen mit Wahltaste oder Olt. Und was ich tun werde, ist, sie alle zu kopieren und einzufügen. Also klicken Sie auf Halten, Umschalten , Klicken und dann einfach einfügen. Da haben wir's. Das sind also alle Seiten. Testen wir es, um zu sehen, ob es funktioniert. Okay, ich habe meinen Prototyp hier schon geöffnet. Nichts funktioniert. Warum funktioniert es nicht? Lass uns wieder hierher gehen. Oh, wir haben die Navigation nicht wirklich hinzugefügt. Als ich heute angeklickt habe, bin ich im Prototypmodus. Du gehst dorthin, wenn das Wochenende angeklickt ist. Du gehst dorthin, wenn auf Neuestes geklickt wird. Manchmal, wenn Sie die Seite nicht sehen können , weil es so viele gibt, können Sie sie einfach, können Sie sie einfach, anstatt sie bei einer Interaktion zu ziehen , wenn sie angetippt wird, zu meiner Seite mit dem Namen „Neu und neu“ oder „Neu“ navigiert , wo sie am neuesten ist Gleiche. Lass es uns jetzt versuchen, heute, am Wochenende. Ordnung. Damit die Teile funktionieren, testen Sie es nach und nach. Und das Coole an dieser Methode ist, dass wir es mit der Hauptkomponente gemacht haben , sodass die Interaktionen innerhalb dieser Komponente erfolgen , sodass alle Instanzen mitfahren , anstatt zu versuchen, sie alle herauszuziehen. Aber wir wissen, dass das eine gute Praxis ist. Aber wir müssen verhindern, dass es springt. Wir brauchen diese Linie, um sich zu bewegen. Das bringt jetzt ein gutes Argument zur Sprache. Wir können Instanzen ändern, wir können Dinge wie heute machen. Ich kann den Text ändern. Okay. Also das wird gestern sagen. Okay. Also können wir den Text ändern. Wir können die Textfarbe ändern. Toller Farbwechsel, Dan, es ist besser. Es gibt einige Dinge, die wir an Instanzen ändern können , manche Dinge nicht. Eines davon ist die Ordnung der Schichten und die physische Bewegung. Schau dir das an. Wenn ich auf diese Instanz gehe, möchte ich, dass sie hier ist. Aber in diesem Fall, wo ich alles gemacht habe, habe ich etwas getan. In diesem Fall möchte ich auf Grau doppelklicken. Wir haben es. Und schieb es einfach rüber. Wir können es nicht bewegen. Okay. Alles ist ausgegraut, weil die Hauptkomponente der Boss der Bewegung ist. Okay? Und Reihenfolge der Ebenen. Wir können aktuelle Dinge wie Text ändern und wir können Farben ändern, aber manche Dinge können wir nicht. Wie machen wir das also? Für diesen speziellen Fall, was wir an unserer Hauptkomponente tun müssen, benötigen wir ein Vielfaches davon Es bewegt sich nicht wirklich, also werde ich es einfach herausziehen, also habe ich ein Vielfaches Okay? Ich werde sie aufstellen und wir schalten sie einfach ein und aus. Für jeden von diesen. Ich werde diesen zurücksetzen. Setze alle Änderungen zurück, um zu dem zurückzukehren, also bewegt es sich irgendwie. Am Ende passiert solange die Namen identisch sind, also haben wir eine Linie, eine Linie. Das ist wichtig, wenn Sie einen Rahmen kopieren und er Rahmen 123 oder ein Rechteck 123 hat. Benennen Sie sie so um, dass sie alle gleich sind. Sonst funktioniert Smart Animate nicht, oder? Ich wollte nur hier reinspringen. Ein paar Leute haben Fragen und Probleme, hauptsächlich im Zusammenhang mit dem Verblassen Wenn deins verblasst, anstatt so zu rutschen, und meins anders aussieht weil ich im Kurs schon weiter fortgeschritten bin, bin ich einfach ein bisschen zurück , wenn es um die Beantwortung von Und ich zeige dir, dass jemand in den Kommentaren ein Video hinterlassen hat, was wirklich praktisch ist Lass mich, kannst du sehen was hier passiert? Ich lasse es spielen. Lass uns spielen. Schau, wann sie darauf klicken. Es verblasst eher als rutscht es. Okay. Und ich kann in ihrem Video sehen , dass es daran liegt, dass Komponente drei der Name ihrer Komponente ist. Sie haben es 12, 13 und 14 genannt. Sie haben es Rechteck genannt. Ich habe meine Leitung angerufen. Es sollte alle den gleichen Namen haben, damit dieser spezielle Trick funktioniert. Okay? Das wäre das Problem mit diesem. Wenn sie alle den gleichen Namen hätten. Ich wette, du würdest arbeiten. Ja, das ist das Einzige, was man überprüfen muss. Sie können in meinem hier sehen, dass ich meine Hauptkomponente habe, und darin befinden sich die drei Textfelder, aber getrennt sind diese Zeile, Zeile, Zeile. Stellen Sie sicher, dass sie alle gleich sind und stellen Sie sicher, dass Smart Animate das ist, was sie verbindet. Seite zu Seite, du fragst dich vielleicht, wie hat er die große gemacht? Linie, die wir gemacht haben, siehst du es ist nur die kleine Linie. Es liegt an dir, wie du es willst, aber hoffentlich hilft das. Die nächste Frage , die auftauchte, war, ob Sie intelligente Animationen zwischen diesen zwei oder drei separaten Frames verwendet diesen zwei oder drei separaten Frames haben, damit wir diese coole Animation bekommen können Was ist, wenn Sie nicht möchten, dass alles auf der Seite eine intelligente Animation ist? Wir könnten es schaffen. Ich glaube, ich möchte darauf hinweisen, dass, wenn ich arbeite, oft kein zu 100% vollständiger Prototyp ist oft kein zu 100% vollständiger Prototyp , der in jeder Hinsicht funktioniert. Sie können sehr kompliziert werden und ich kann Tage damit verbringen, Fehler zu beheben und dieses perfekte Portfolio zu bekommen, tut mir leid, den Prototyp. In der Tat könnte ich leicht einen separaten Rahmen haben, um zu sagen, dass das Menü so funktioniert, und all diese unteren Teile ausschließen. Dann sagen wir, so sehen die Seiten aus, so sieht ein Seitenübergang aus , sodass ich sie in einzelne Teile aufteilen kann. Wirklich einfach zu machen und nicht sehr kompliziert und bringt trotzdem meinen Standpunkt zum Ausdruck. Es wird Zeiten geben , in denen du es auch einfach perfekt machen willst. Was ich in diesem Fall tun würde, wenn du Smart Animate haben willst und etwas anderes hier unten passiert , ich denke, Fade ist in Ordnung Okay, was würdest du tun, wenn du sie nicht bewegst in der ersten Folge getan , wie ich es Okay, pausiert. Was ich tun würde, ist intelligent zwischen ihnen und dir zu animieren Wir würden auf diese Seite kommen, aber diese Seite wäre leer Ich würde sagen, klicken Sie auf diese Schaltfläche. Gehen Sie zu dieser leeren Seite und haben Sie nichts davon hier. Diese leere Seite Haben Sie einen Prototyp einer Interaktion, die besagt, dass Sie nach einer gewissen Zeitverzögerung eine Weile warten sollten. Gehen Sie dann zu meiner Seite mit all den Bits darauf und machen Sie einen anderen Übergang. Am Ende würden Sie einige zusätzliche Seiten erstellen. Absolut machbar? Ja. In Ordnung. Also ich hoffe, sie haben einige der Fragen beantwortet , die Sie vielleicht an dieser Stelle haben, aber mehr folgen in einem Video. Also sagen wir dir, ich kann dich nicht bewegen, aber ich kann dich ausschalten. Und ich will dich nicht mal ausschalten, ich will dich nur verstecken. Okay. Da haben wir's. Pop, mach den Augapfel aus. Benutze deinen eigenen Sandeffekt Okay, für diesen, wenn wir am Wochenende sind, wollen wir diesen an und beiden aus. Also werde ich das schnell durchgehen. Also gut, das Tastenkürzel ist Command-Shift auf einem Mac, es ist Strg+Shift H auf einem PC, nur um sie automatisch auszublenden, oder man macht das nette kleine Geräusch, den Augapfel, der funktioniert , einschließen Solange der Name derselbe ist, sollten wir arbeiten. Lass uns gehen. Eine Sache, die wir auch tun werden, ist, dass wir tatsächlich in den Prototypmodus wechseln werden. Und hier oben gibt es einen Fluss. Ich brauche da oben keinen Fluss. Ich weiß nicht, wie der da hingekommen ist. Deiner ist vielleicht hier unten, hat vielleicht gar keinen. Ich würde sagen, dass es tatsächlich fließt. Es wird Hele sein, es wird diesen Fluss in Gang setzen. Es springt auf die richtige Seite. Es funktioniert immer noch nicht. Ich weiß, warum es das tut. Was wir jetzt machen wollen, ist Smart Animate. Welche Teile animieren wir intelligent? Wir könnten es zwischendurch machen. Wir könnten es durchgehen und sagen, sofort, ändern auf Smart Animate. Aber wir müssten es für jeden Fall tun, wir könnten es mit diesem Hauptteil hier machen, unserer Hauptkomponente Und sag dir, es macht das Richtige. Gehen wir auf die richtige Seite. Aber es geht sofort. Ihre Version ist möglicherweise standardmäßig auf Smart Animate eingestellt Okay, erinnere dich an das Letzte, was du getan hast. Lass uns gehen. Intelligent animieren. Lass uns jetzt gehen Bist du bereit? Ah, der Ruhm. Schau es dir an. Es ändert seine Form, um unter die verschiedenen zu passen. Es ist eine nette kleine Mikrointeraktion , damit der Benutzer weiß, wo er sich tatsächlich befindet. Ordnung, wir gehen mit unseren interaktiven Komponenten etwas tiefer und fügen ein bisschen Animation hinzu. Wir haben eine Linie darunter gemacht, Sie könnten natürlich eine Linie über der Oberseite machen. Oh, gute Klassenherausforderung. Ich werde es im nächsten Video sehen. Bevor wir gehen, möchte ich es dir zeigen, nun, lass uns einfach etwas besser entspannen , weil das irgendwie cool ist Aber es sieht viel besser aus, wenn die Lockerung eine von diesen oder eine benutzerdefinierte ist eine benutzerdefinierte schnell ist und du mit deiner experimentieren kannst Lass mich das schnell durchgehen, in Ordnung. Viel besser. So ein kleines Hin- und Herspringen Oh, das ist nett. Ich liebe es. Okay, da haben wir's. Aber keine Sorge, ich habe die kleine Herausforderung nicht vergessen , für die ich mich entschieden habe. Und du denkst, Dans Herausforderung muss darin bestehen , das in eine Reihe zu bringen, sieh mal, warum ist es so nah an dieser sieh mal, warum ist es so nah Seite? Es macht dich verrückt. Ich habe nicht gemerkt, dass es mich jetzt auch verrückt macht, also werde ich das Navi rüberschaufeln, aber ich mache das zwischen den Videos, ich werde es im nächsten sehen 55. Kursprojekt 07: Challenge mit Schiebeknöpfen: Hallo alle zusammen. Es ist eine Time-Slash-Herausforderung für Klassenprojekte Die erste, K Challenge One, besteht im Grunde darin , das nachzubilden, was wir bereits getan haben Diese Zeile, die sich fortbewegt, okay, erstellt drei Seiten, erstellt drei Navigationslinks. Es muss nicht heute sein, wir können es neu machen, es liegt an Ihnen. Ich möchte testen, ob die Struktur funktioniert und sich darunter eine Linie bewegt, um das zuerst zu tun. Und dann das Besondere, das Herausfordernde ist, dass ich möchte, dass du zu dieser Linie übergehst , ist weg und jetzt gibt es einen Hintergrund , der sich weiterentwickelt. Und kannst du sehen, wie der Text darunter weiß wird? Das ist alles. Ich möchte, dass du zuerst in die erste Zeile gehst und einen Video-Screencast dieser Version machst und dann zu dieser übergehst und einige Änderungen Warum? Weil es eine Herausforderung ist, wenn, ich denke, in Ihrer Reichweite sind dB tatsächlich Und es wäre interessant zu sehen, wie Sie das angehen. Und dann gleich das nächste Video du in der Liste hier sehen wirst, es gibt eine abgeschlossene Version dieser Herausforderung, in der ich sie machen werde, diese spezielle. Nur damit Sie die Art und Weise, wie Sie es angegangen sind, mit der Art und Weise vergleichen können , wie ich es angegangen bin Vielleicht stellst du fest, dass du es gerne hättest, dir geht es viel besser. Vielleicht gefällt dir die Art und Weise, wie ich es mache, besser, aber vergiss das Video noch nicht. Mach es selbst. Seaweed, geh und sieh nach, was du stecken bleibst. Schau, wie lange du gebraucht hast, wie kompliziert deins war, und vergleiche es dann mit dem, wie kompliziert meins war. Und wenn du ein Video davon machst, wenn du jetzt Screencasts gemacht hast, versuche vielleicht, es mit deinem Handy aufzunehmen Also hol sofort dein Handy raus. Okay. Ich habe mein Handy in der Hand und nehme einfach auf, wie Sie es durchgehen und zeige ein bisschen, sogar Speicherplatz verschmutzt, sauber ist egal. Nur um die Überprüfung dieser Dinge für alle interessanter zu machen. Schau mal, jeder hat seinen Schreibtisch. Also, was ist los? Also Video von deiner Animation. Es ist nicht unbedingt erforderlich. Du kannst einfach einen normalen Screen-Cast machen Ordnung, ich habe alles in den Klassenübungen aufgelistet , aber ich weiß es nicht Es fühlt sich lang und schwer und ich finde, die Demo war besser. Benotet drei Seiten und erstellt ein Navi mit den drei verschiedenen Links. Bring die zum Laufen. Also haben sie jede Seite übersprungen und dann die Zeile unter all den verschiedenen Navigationsoptionen verschoben und sie zum Springen gebracht. Eine Sache, die ich hier bearbeitet habe, ist die Versionsgeschichte. Also wann immer ich arbeite, oft, wenn du an diesem Punkt angelangt bist, an dem wir sagen, lass uns zu diesem Punkt zurückkehren. Du möchtest, wo ist er? Und wenn Sie diesen abgeschlossen haben und mit der nächsten Option fortfahren möchten , möchten Sie vielleicht einfach gehen, ich möchte das rechtzeitig speichern damit ich bei Bedarf darauf zurückkommen kann. Wir behandeln das in den Grundlagen, aber lassen Sie uns das hier noch einmal behandeln. Ich habe nichts ausgewählt. Geh hier hoch und sag Versionsverlauf. Und du kannst sagen, okay, ich werde gehen und das zu etwas ganz anderem machen Also möchte ich einfach Plus drücken und Sub-Navi sagen. Nehmen wir an, wir sind bei den Schaltflächen, Folie eins, und wir machen etwas anderes mit einem Farbverlauf. Es bedeutet nur, dass Sie später zu dieser Version zurückkehren können , sobald Sie weitermachen, sobald Sie es getan haben. Und es ist eine Sache, die dich irgendwie da drin stecken lässt weiter, mach weiter, mach weiter und ändere alles, vermische es, mach dieses Ding, das ich nicht weiß, eine andere Farbe und alles mit Harnstoff Okay, dann kannst du sagen , im Hintergrund abklicken, zu meinem Versionsverlauf zurückkehren und sagen: Lass mich zu ihnen zurückkehren und es dir ansehen. Du kannst es dir einfach ansehen und das war's und wenn du es gemacht hast, springt es wieder dorthin, wo du warst. Oder man kann sagen, das stellt tatsächlich die Version wieder her. Ich gehe zurück zu dieser Seite und gehe ganz darauf zurück, aber dann drücke ich auf Fertig. Was für ein Reset zu ihnen? Speichern Sie einen Versionsverlauf, sobald Sie die Zeile Herausforderung abgeschlossen haben , und führen Sie dann die Schaltfläche Herausforderung aus, bei der die Zeile in eine Schaltfläche geändert wird. Sehen Sie, wie Sie dort hingehen und den Hintergrund dazu bringen, sich entlang der Linie zu bewegen, und die Art der Herausforderung, aber wie bringt man die Farbe dazu, sich zu ändern? Okay, kannst du sehen, dass es von weiß geht, Tim schwarz zu weiß, ein Frauenknopf ist darunter und das ist eine deiner Herausforderungen. Bonuspunkte, wenn Sie auch die Tastenfarbe ändern. Und dreifache Bonuspunkte für Steigungen. Liebte mich von Gradient. Teile das Video von beiden Herausforderungen. Sie verlinkt und lädt es in den Bereich Aufgaben hoch, auch in den sozialen Medien geteilt wird. Tagge uns mit Figma Advanced. Wählen Sie Ihre Plattform oder alle aus und stellen Sie sicher , dass Sie mitmachen und Feedback an andere Leute erhalten. Farbe leisten. In Ordnung, das ist die Herausforderung Ich werde es im nächsten selbst durchgehen, aber machen Sie es zuerst selbst. Siehst du, wir stecken fest. Schau, wie du es angehst. Es gibt keinen richtigen Weg. Wenn es funktioniert, funktioniert es, aber dann kannst du dir meinen im nächsten Video ansehen. In Ordnung, viel Glück. 56. Kursprojekt 07 - Abgeschlossen: Okay, das ist das Abschlussvideo. Ich habe dir eine Aufgabe geschickt und das letzte Video, hier wollen wir irgendwie enden, lass mich dir zeigen, wie ich gegangen bin Nicht der richtige Weg, nicht der beste Weg, nicht der schnellste Weg Nur ein Weg, den ich gegangen bin und du kannst ihn mit deinem vergleichen. Oder wenn du dich verirrt hast, kannst du hoffentlich gehen, Ah, deshalb liege ich, ich irre mich. Trotzdem weiter gelernt. Lass uns darauf eingehen. In Ordnung, die Fertigstellungsteile, vervollständige ich sie? Ich weiß es nicht. Ich habe das nicht geübt. Viele ihrer Inhalte in diesem Kurs und stelle sicher, dass ich das vorher mache. Wir kümmern uns um die Bugs, kümmern uns um die richtige Reihenfolge. Ich lasse einige der Teile weg, in denen ich mich verliere weil ich weiß, dass man sich am Ende zu zweit verirrt. Es ist also schön zu sehen, wie man sich aus den Dingen herausarbeitet . Aber bei diesem, ich gehe einfach, ich sagte, die Herausforderung. Ich glaube, ich weiß, was ich tue. Machen wir es eigentlich einfach zehn. Ich werde also wahrscheinlich einfach wiederverwenden, was ich habe und die Wahltaste gedrückt halten es nach links und rechts zu ziehen. Okay, die Alt-Taste auf einem PC funktioniert auf beiden Seiten. Und wir müssen mit der Reihenfolge der Ebenen spielen. Also werde ich meine eckigen Klammern verwenden. Wir machen das mit den ganzen Zeilen. Denken Sie daran, eines der Dinge, die wir mit Instanzen nicht tun können, ist, wir die Ebenenreihenfolge nicht ändern können. All dies muss also hier unten unter dem gesamten Text stehen. Nun, was ich eigentlich tun könnte, ist rückgängig zu machen, rückgängig zu machen, rückgängig zu machen, rückgängig zu machen, rückgängig zu machen. In Ordnung. Wir machen das alles auf einmal. Also zuerst werde ich sie alle nach unten verschieben, dann werden wir sie alle ausgewählt. Hast du deine einzeln gemacht? Es könnte etwas gewesen sein, das du getan hast. Also werde ich das machen. Ich halte meine Optionstaste gedrückt. Ich kann nicht, ich kann die Breiten nicht ganz machen. Ich könnte sehen, ob ich zu Mix Width und Plus wechseln kann oder ob es von der Mitte aus geht? Wir werden sehen, kannst du wieder die gleichen Breiten machen. Sie sind nicht vom Zentrum weggegangen, aber hey, das ist okay, Cool. Das große Ding ist jetzt der Farbwechsel, oder? Also ich denke, das sollte immer noch funktionieren. Lass es uns testen. Befehlsoption andere Arten, dies zu tun, oder? Sie haben vielleicht einen sehr guten Weg gefunden. Es könnte sogar schneller sein. Das ist okay. Okay, das ist gut. Dann passt es nicht sehr gut. Das repariere ich später. Die Mechanik funktioniert. Die eine Sache ist der Farbwechsel. Du könntest es hier ändern, sagen wir, mit einer Variante. Du kannst daraus eine eigene Komponente machen, ein K, du kannst sagen, du bist eine Komponente und du hast zwei Varianten. Wir konnten es nicht tun. Wir können es hier nicht machen, weil es in einem Haupt-Sub ist. Aber eigentlich könntest du das Wurmloch runtergehen und es würde funktionieren, diese zu einer separaten Komponente machen, hier hinzufügen, zwei Varianten haben, sie wieder rein oder hier unten platzieren, wir können einfach sagen, erinnere dich an die Dinge, die wir ändern können Wir können die Bewegung von heute nicht ändern, aber ich kann sagen, dass sie die Farbe Minus Plus hat . Du wirst weiß sein. Kopiere die Füllung. Und ich sage dir dort, ich werde das füllen lassen. Es hat tatsächlich zwei Füllungen ergeben. Sie fügen in Füllungen ein. Und lassen Sie uns einen kleinen Blick nach oben werfen. Ah, in Ordnung, lass mich in den Kommentaren wissen, wie du deins gemacht hast. würde mich interessieren zu sehen was du anders gemacht hast, das länger gedauert hat, aber trotzdem am selben Ort angekommen ist, weil es praktisch für andere Leute ist, , Oh ja, entweder sind sie auch so, oder du denkst vielleicht, es gibt einen besseren Weg. Und 100% stimmen zu, dass es so ist. Es gibt viele verschiedene Möglichkeiten, das zu tun und ich wette, es gibt einen besseren Weg. Ich werde jetzt mit diesem Abstand herumspielen , weil er nicht gut genug ist. Was habe ich gemacht plus weitere 16? Und mitschlurfen, das ist besser als die Höhe. Eins nach. Ich möchte die Idee nicht offenlegen. In Ordnung, gute Arbeit an der Herausforderung, alle zusammen. Wenn du es nicht herausfinden konntest, gab es in diesem Video hoffentlich einen Aha-Moment für dich, aber das war's. Wir sehen uns im nächsten Video. Tschüss jetzt 57. Nutze Sections in Figma zum Organisieren deiner Inhalte: In Ordnung, Hände hoch. Wer hat diese Option hier namens Section noch nie benutzt. Ordnung, wenn Sie Ihre Hände hoch haben, werden wir uns in diesem Video ansehen, wie Sie Abschnitte verwenden, um Ihre Inhalte zu organisieren so wie hier, wo wir können Abschnitt aus dem mobilen Desktop-Tablet wird zurückgehen und alle möglichen Komponentenbereiche für einen Abschnitt ändern alle möglichen Komponentenbereiche für einen Warum wir hier in unserem Prototyping-Abschnitt des Kurses Abschnitte zur Organisation erstellen Denn im nächsten Video werden wir tatsächlich Abschnitte verwenden, um ziemlich nette Prototypen Aber ich wette, Sie kennen den Hauptzweck von Abschnitten nicht , also lassen Sie uns das hier tun. Das ist irgendwie großartig, ein bisschen genial, aber wir müssen sie lernen, damit wir sie im nächsten Video verwenden können sie im nächsten Video verwenden Ordnung, springen wir rein. In Ordnung, ich habe eine Bar von der Figma-Community zu archivieren vertuscht. Danke. Habe die NSA bis Oktober riesig Baratta, nur damit ich etwas gefunden habe, das verschiedene Bildschirme für Handy und Desktop und iPad hatte verschiedene Bildschirme für Handy und Desktop und iPad Das ist also ein wirklich gutes Beispiel für die Organisation mithilfe von Abschnitten. Abschnitte verstecken sich unter der Stelle, an der wir einen Rahmen haben, okay, es gibt einen Abschnitt namens Abschnitt, auf den Sie klicken können. Und wir können einfach eine Kiste um die Dinge zeichnen , die wir organisieren wollen. Da hast du's. Schau dir alle Ebenen an. Alles befindet sich in Abschnitt eins. Das ist Command R, um es umzubenennen. Und das ist der coolste. Nun, könnten wir das nicht einfach mit einem Rahmen machen? Drücken Sie die F-Taste für den Frame und ziehen Sie ihn über diesen Slot. Und dasselbe, ich werde es nennen und ich werde es Desktop nennen. Wisse, dass es keinen großen Unterschied zwischen den beiden gibt, außer dass es nur visuelle Unterschiede gibt wenn es um die Organisation geht. Im nächsten Video, wenn wir anfangen, coole Prototypen zu entwickeln, ist es magisch Aber können Sie hier vorerst die Unterschiede erkennen? Es unterscheidet sich ein bisschen mehr von all den anderen Frames, Kay? Er hat eine kleine Kiste drum herum. Wir können Frames Go mögen. Sie können eine Hintergrundfarbe auswählen , um sie vom Hintergrund zu trennen. Das Gleiche können wir mit dem Rahmen machen. Eines der süßen Dinge, die Sie damit machen können ist, auf den Rand zu doppelklicken und es wickelt es irgendwie um, sodass etwas Kannst du sagen, dass Blätter etwa 100 Pixel Polsterung auf beiden Seiten haben. Und es ist nur ein visueller Unterschied, wie eine Hierarchie, wenn du versuchst, Dinge voneinander zu trennen, wenn du versuchst, Entwicklern oder anderen Leuten zu zeigen oder deine Ideen irgendwie in Schach zu halten , andere Dinge, die du damit machen kannst , indem du auf diesen Abschnitt klickst. Und wenn du auf Teilen gehst, werde ich einen Link zum Ansehen teilen. Und kannst du sehen, dass dort Link zum aktuellen Abschnitt steht. Sie können das einschalten, wenn Sie es ausgewählt haben. Kopieren wir den Link und ich öffne ihn. Wenn ich es an eine andere Person schicke, öffnet sie es und sie werden zu diesem speziellen Abschnitt weitergeleitet . Das machen Frames jetzt auch. Jetzt sind wir zurück. Es gibt Anonym. Ich habe es in einem privaten Browser geöffnet und Anonymous hat sich mir angeschlossen. Okay, lassen Sie uns die organisatorischen Teile dafür abschließen. Die Tastenkombination ist also Shift, da Sie sie herausziehen können. Sie können Dinge in Abschnitte umwandeln. Also dieser Rahmen hier, vielleicht hast du schon etwas, er ist schon abgeschnitten Sie können mit der rechten Maustaste darauf klicken und „In Abschnitt konvertieren“ sagen. Sie können sich ein paar Sachen schnappen und mit der rechten Maustaste klicken und schnell neuen Abschnitt sagen, Befehl-A Und das wird ein Tablet sein, weil wir ihn hören, weil wir weitergekommen sind . Das mache ich rückgängig. Sie können zurück konvertieren. Okay. Nehmen wir an, dieser war zunächst ein Frame. Sie können es hier oben in einen Abschnitt konvertieren , indem Sie zwischen ihnen hin- und herschalten Jetzt wieder, es ist einfach, Dinge hinzuzufügen. Sie könnten entscheiden, dass dieser spezielle Bildschirm hier sein muss. Und es hat nur Abschnitte übersprungen, wie es Frames tun. Du kannst einen Abschnitt löschen, indem du mit der rechten Maustaste klickst und die Gruppierung aufheben sagst. Seltsamerweise rechten Maustaste klickst und die Gruppierung aufheben sagst. Seltsamerweise bist du nicht unbefugt. Sie können keine Abschnitte innerhalb von Frames platzieren. Interessanterweise konvertieren wir das wieder in einen Frame. Und ich möchte sagen, in Ordnung, hier drinnen, ich will einen so großen Rahmen, ich werde Shift S für Abschnitte sagen Ich möchte, dass dies mein spezieller Abschnitt ist. Und es funktioniert irgendwie außer dass es das nicht tut. Es sieht aus, als wäre es drin, aber können Sie sehen, dass es aus dem Franco-Desktop gesprungen ist und einfach drüber gegangen Es will immer der Elternteil sein. Okay, das ist ein Segen. Es wird sozusagen für die übergeordnete Organisation verwendet, nicht für Abschnitte innerhalb von Frames. Okay. Die andere Sache, die Sie beachten sollten, jedoch, dass Sie Abschnitte innerhalb von Abschnitten haben können. Klare Sache. Ich habe hier einen Abschnitt. Geben wir ihm eine Hintergrundfarbe. Aber noch ein Abschnitt und hier noch ein Abschnitt. Und dann können Sie, sehen Sie, ich kann seine Hierarchie in Gang bringen , bis die Sektion die oberste Ebene sein muss Das war's für uns. Ich befehle Ihnen, zur Tabulatortaste zu gehen, um zu steuern, wenn viel los ist. Weil ich zu meinem zweiten Tab kommen will. Und ich werde zu diesem Abschnitt gehen. Das ist perfekt, um ein Abschnitt zu sein. Es bekommt das süße Symbol, es bekommt einen etwas anderen Titel. Ich kann auf die Außenseite doppelklicken, damit alles gut passt. Und arbeite ich mich herum und habe einen Willkommensbildschirm und mein eigener Anmeldevorgang ist ein separater Abschnitt Du hast die Idee. In Ordnung, wir sind also gut mit Abschnitten für die Organisation Gehen wir zum nächsten Video. Wir werden Abschnitte für das Prototyping erstellen, was ein Supermaulwurfsfonds ist 58. Nutze Sektionen für das Prototyping in Figma: Hallo zusammen. Hey, wir werden uns ansehen , wie wir Abschnitte in Figma verwenden , um ausgefallene Prototypen Ich finde es sowieso schick, um Ihnen eine kurze Demonstration dessen zu geben, was wir tun, müssen Sie Ihr Konzentrationsgesicht bereit haben. Was normalerweise passiert, wenn wir etwas verkabeln, okay, ist, dass wir sozusagen durch einen Fluss gehen und alles sehr linear ist Was wir aber tun können, ist das normalerweise zu tun. Sie kaufen ein Ticket, gehen zur Kasse, gehen zur nächsten Seite, gelangen zu den Teilnehmerinformationen, gelangen zur NASW-Seite und gehen zur Zahlung Und wenn du wieder hier bist und wieder damit anfangen willst, musst du von vorne anfangen, dich irgendwie linear durcharbeiten Gekauft, schau dir das an, weil wir Abschnitte verwendet haben. Ich kann sagen, kaufe ein Ticket, behalte eines im Auge, um die Zahlen dort hinzuzufügen , um es einfacher zu machen. Also kommen wir zu einem, wir kommen zu einem Tumor wie, weißt du was? Ich möchte zurückgehen und einige Details überprüfen, bevor ich bezahle. Das kannst du also tun. Und in der Vergangenheit, ohne vorherige Fähigkeiten, ging man zurück zu Nummer eins, wenn ich auf Ticket kaufen klicke. Aber was auch immer passiert, direkt zurück zu Nummer zwei, auf keinen Fall. Das ist die geheime Macht der Sektion in Figma. Lassen Sie mich Ihnen zeigen, wie Sie es in Gang bringen, um loszulegen. Ich habe die Detailseite von How Vince genommen, die wir zuvor erstellt haben. Ich habe zufällig oben einen Knopf drauf gesetzt. Dann dachte ich noch einmal, ich werde bei Tickets, Informationen und Zahlungen einen Warenkorb-Checkout durchführen bei Tickets, Informationen und Zahlungen einen Warenkorb-Checkout . Und Sie können sehen, dass ich mit ein bisschen Elan angefangen habe und mir dann langweilig wurde Du brauchst drei Seiten, damit das funktioniert, oder du brauchst drei Seiten, nenne sie Cat 123. Vielleicht tragen Sie einfach diese Titel auf und Sie können die anderen Details später eingeben. Lass uns einfach dafür sorgen, dass es funktioniert. Lassen Sie uns das jetzt so machen , wie wir es normalerweise ohne unseren geheimen Trick tun würden , Shift D-Prototypmodus, diesen Button, wenn er klickt, starte ich den Checkout-Flow. Sobald ich zum nächsten Schritt komme , geht es dorthin und dann geht es dorthin. Das ist also ziemlich normal. Ja, die Sache, die ich machen werde, sind diese Titel hier. Ich sage, nein, du wirst hierher gehen. Also, wenn jemand versucht, meiner Karte zu entkommen, okay, er wird zu dieser ersten Event-Details zurückkehren . Lass es uns testen. Also werde ich gehen, ich werde einen Flow-Startpunkt hinzufügen, nur um sicherzugehen, dass es Punkte auf der richtigen Seite sind. Das ist normal. Ich glaube, ich muss dir zeigen, was kaputt ist, um dir zu zeigen, wie, warum dieses coole Section Ding repariert ist. Wenn ich also hierher gehe und zur Kasse gehe und zur Hälfte zur Teilnehmerinformation Ich denke, eigentlich muss ich wirklich die Eventdetails überprüfen. Also klicke ich hier zurück und dann denke ich, Oh nein, das ist perfekt. Und so klicke ich auf Zurück, um Tickets zu kaufen. Es springt direkt zurück zum Anfang. Es weiß nicht, woher ich komme. Damit es sich daran erinnert, verwenden wir Abschnitte, also lasse ich alles so, wie es ist, außer dass ich einen Abschnitt erstelle Shift S oder aus dieser Dropdownliste hier oben. Okay, und ich sage, ich bin Amanda, um es umzubenennen. Und der heißt dieser. Ablauf der Kaufabwicklung. Drücken Sie Escape, um aus der Benennung herauszukommen. Doppelklicken Sie auf die Kante, die sich schön umschließt Und alles, was wir tun werden, ist zu sagen, dass du dich hinsetzt und in das erste Bild gehst. Ich sage, du gehst tatsächlich in die Sektion. Dort passiert die Magie. Nun, es gibt zwei Dinge. Lösche den zweiten. Wenn also auf diesen Button geklickt wird, geht es dorthin Und ich denke, das müssen wir tun. Sehen wir uns eine Vorschau an. Schauen wir uns unseren Wagen an. Das Gleiche wie zuvor. Gehen wir, ich kaufe ein Ticket und es funktioniert nicht. Du wartest da. Hast du es gesehen? Ich habe es bei Drag nicht gesehen. Ich bin mir nicht sicher warum und Drag war da, bitte. Danke. Versuch es noch einmal. Wenn ich auf dieses klicke, ist es immer noch kaputt, weil ich Smart Animate verwende Kaizala ist nicht intelligent animiert. Warum? Weil diese Knöpfe den gleichen Namen haben. Ich sollte sie ändern. Nimm Bild neun, und das ist auch Bild neun, aber es heißt, vergiss, dass all das passiert ist. Weiß er, wovon er spricht? Okay. Gehen wir also zurück zum Beginn von Outflow Ich werde Alpha Reset drücken. Und ich sage per Ticket, großartig, mach die Hälfte meiner Tickets fertig, geh zum nächsten Teil Und ich denke, ich wünschte, ich wüsste nochmal, was es war. Also kann ich zu den Anfangsdaten zurückkehren. Perfekt. Ich kann also wieder ein Ticket kaufen, aber diesen Schritt kann ich überspringen. Schau dir das in Sprüngen an, bis wir es angehoben haben. Oh, so gut. Ist es gut? Ich weiß es nicht. Ich finde es genial. In Ordnung. Was können wir noch tun? Wir haben uns das vorhin angesehen, erinnern Sie sich, war da ein Flow, der sagte zurück, da war dieser und ich sagte , wir sollten es für später belassen Jetzt ist das Feuerzeug. Das bedeutet, dass wir eine Schaltfläche hinzufügen. Also öffne ich mein letztes Plugin, hübsches Kurz-Icon, drücke Command Option P, Control OP, öffne das letzte Plugin, meins wurde nicht geöffnet. Ich bin mir nicht sicher warum. In Ordnung. Sind das die richtigen Abkürzungen? Schließen wir es. Ist es sowieso. Also verwende ich Symbol acht und suche nach einer Zurück-Schaltfläche. Und ich werde diesen benutzen. Vielleicht gibt es einen kostenlosen Account, damit kannst du kostenlose Sachen machen. Ich habe ein kostenpflichtiges Konto. Der Link hier auf dem Bildschirm. Wenn Sie sich für die Icon Night anmelden möchten, habe ich einen Affiliate-Deal mit ihnen und Sie erhalten auch einen Rabatt, wenn Sie sich dafür anmelden möchten . Aber ich habe meinen Zurück-Knopf. Ich werde sagen, eigentlich mache ich das nicht richtig und es hat gereicht. Ich werde die erste Schicht wechseln. Ich gehe hier hin, wechsle zu und ich sage Pasten, das wird in meine Komponenten einfließen. Wo ist es hingegangen? Es war auf der Unterseite. Hallo, mach eine Komponente daraus. Befehlsoption K, Strg-Alt-Taste auf einem PC. Und ich sage, wenn Sie angeklickt werden, gehen Sie zurück, um es einfach herauszuziehen und es erscheint, okay, oder Sie können es hier machen, tippen Sie auf, gehen Sie zurück Und das liegt daran, dass wir die Abschnitte verwenden , um dorthin zurückzukehren, wo wir zuletzt waren. Das macht Sinn. Das zeigt es wirklich. Also vergiss, dass wir jetzt in einer Baumwolle sind und denke einfach, wir sind ein Haufen verschiedener Seiten. Ich gehe zu meinem Vermögen und hole meinen Pfeil raus. Und ich füge das hier rein, kopiere es und füge es ein, weil die Komponenten wieder da sind. Das Coole daran ist, sagen wir, wir machen das jetzt. Wir werden die Übersichtsseite starten. Ich gehe hier hin und gehe zur nächsten Seite. Geh zurück, geht zurück zur letzten Seite, auf der ich war. Aber wenn ich noch einmal zurückschlagen würde, sieh dir das an, es ist die ganze Seite übersprungen, weil es irgendwie den Fluss kennt, Winton Nun, in dieser speziellen Übung würdest du sagen, ich wollte wahrscheinlich einfach nur wieder in den Einkaufswagen steigen und mitfahren lassen und das ist okay. Aber ich möchte keine ganz neuen Seiten erstellen. Drücken Sie einfach die Zurück-Schaltfläche, Sie haben die Idee, aber es funktioniert eher wie die Zurück-Schaltfläche in einem Browser, manchmal möchten Sie, dass das passiert. Ordnung, das ist die Verwendung von Abschnitten, Verwendung dieser Abschnitte für das Prototyping, das schicke Prototyping, Mandys Nudeln nach einer Weile voll Sehr cool. In Ordnung, das ist es Wir sehen uns im nächsten Video. 59. So fügst du die Statusleiste für iOS-Akkus zu Figma hinzu: Hallo zusammen. In diesem Video schauen wir uns an, wie Sie diese Statussymbole oben hinzufügen , Akku-WLAN-Netzwerk oder auch die Uhrzeit oben. Wir werden uns ansehen, wie man mit dieser Notch umgeht , die auf einigen Handys vorhanden ist. Und obwohl dieses Video 10 Minuten lang ist, lautet die schnelle Antwort, du gehst einfach los und stiehlst es der Figma-Community In diesem Fall habe ich ein süßes von Wayne Dahlberg gestohlen und es eingeklebt Warum ist dieses Video 10 Minuten lang? Ich zeige dir, wie du immer noch gut dastehen kannst, indem du stiehlst, ich meine, dir aneignet, denn das ist das Tolle an der alten Figma-Community, oder? Lass uns reinspringen. Also lass es uns machen. Lass uns gehen und Statusleiste einer anderen Person aneignen. Und der Trick ist, dass Community der beste Ort ist , um so etwas zu finden. Gehen Sie also zur Figma-Community und suchen Sie bei der Suche nach neuesten iOS- oder Android-Version, dem Gehäusematerial oder dem Gerät, nach dem Sie suchen Versuchen Sie, das auszuwählen, weil Sie wie das neue aussehen wollten , das jeder benutzt. Erfüllt das andere Wort, das Sie wollen. Okay? Und für mich möchte ich mich nicht für Jim in Figma entscheiden, sondern nur für Figma Und dann machst du das durch, und ich neige dazu schauen und dieser hier könnte toll sein, okay, aber er hat keine Likes und 18 Downloads. Ich suche nach etwas , das viel mehr bietet. Dieser hier hat jede Menge, hat 525 Likes und hat viele Downloads, und ich habe ihn schon überprüft. Also ich weiß, dass es gut ist. Mach es auf. Du wirst es in Figma öffnen. Und im Grunde bedeutet das, dass du eine Kopie davon nimmst und dann werden wir Teile davon stehlen. Das ist also unser Cover. Wir verwenden Page Down, um uns an die Abkürzung zu gewöhnen, zu dieser anderen Seite zu gelangen, die er erstellt hat und auf der er jemanden gewogen hat. Geh wieder her. Du gehst. Immer. Dahlberg, du wurdest gewarnt. Wählen Sie Zweifel aus. Vielen Dank, dass du das gemacht hast, denn es ist großartig. Und im Grunde suchen wir nach seinem Vermögen oder Option oder Alt, um einen Blick darauf zu werfen. Es gibt nur zwei von ihnen. Es gibt viele Dinge, die darin eingebettet sind. Gut. Aber wir wollen gehen, ich will diese Statusleiste. Ziehen wir eine Kopie heraus. Eigentlich möchte ich mir die Hauptkomponente schnappen Also wenn ich hier irgendwie immer wieder hin und her springen muss , um vielleicht Änderungen vorzunehmen, nicht dass ich vorhabe, auf diese Registerkarte zu kommen oder die ich kontrolliere, um zurück zu dieser Registerkarte zu springen Und was ich tun muss, ist es einfach einzufügen. Okay, füge es hier in meine Hauptkomponenten ein, es sollte inzwischen auf einer eigenen Seite sein, aber langsam wird es etwas unhandlich Im Moment ist es genau da. Also ich hätte es bei meinem Vermögen tun sollen, ich werde Statistiken eingeben, die mein Vermögen irgendwie abkühlen, da sie sind Ich möchte es jetzt zu diesem Top hier hinzufügen. Ich könnte für jeden Einzelnen bearbeiten, aber wir wissen, dass das eine schlechte Idee ist. Wir wollen es zur Hauptkomponente hinzufügen, die wir finden können, indem wir mit der rechten Maustaste klicken und sagen, Gehe zu MainComponent, hier ist es da Jetzt fügen wir es hinzu, dass ein Go in und vielleicht rückwärts gedacht ist. Das ist ein Trick, den ich nicht kenne. Es ist nicht schon wieder so. Ich weiß, dass ich manchmal Dinge wie horizontales Umdrehen mache und das die ganze Zeit mache. Befehl P, Lass uns horizontal gehen. Also, was ich getan habe, ich bin mir nicht sicher. Okay, also wir müssen hier rein, schauen wir uns meine Ebenenoption oder Alt-Option und sind in meinen Hauptkomponenten gelandet. Also wird es auf allem erscheinen. Abgesehen davon, dass wir das Logo runterdrücken müssen. Das ist alles was wir tun. Okay, schauen wir uns unseren Prototyp an, der da drüben ein bisschen zertrümmert werden muss Und das Ego, es hat die Statusleiste. Nun, ich weiß, wir müssen ein bisschen Layout machen, aber das ist es wirklich, wenn du willst, wie machst du das? Du gehst es stehlen, leihst es dir, eignest es dir an, bessere Worte Aber durch das Wiegen haben wir das geschafft , um Zeit zu sparen, was cool ist Sie können mit dem nächsten Video fortfahren. Jetzt möchte ich eintauchen und mir diese Komponente ansehen, nur weil sie ziemlich interessant ist. Was gemacht wurde und wir werden uns die Notch ansehen. Also, was ich jetzt tun muss ist, dass ich das durchmachen und sicherstellen muss , dass ich an meiner Hauptkomponente arbeite mir genug Platz gebe. Okay, ich schalte mein Raster um sicherzugehen, dass es irgendwie ja ist, ich bleibe irgendwie bei meinem Rastermuster Ich nehme mein Logo und ziehe es nach unten und es wird aus meinem Raster entfernt. Es ist schwer, unsere Sendung zu sehen, etwas hier drüben, das in der Vorschau Ich benutze meine linke und rechte Seite. Das sieht Beta aus. Ich möchte nur eine finden, bei der ich es so auslege dass sich nicht alles überlappt und das aussieht, als ob es ein guter Abstand zur Notch sein wird Jetzt kannst du dir hier eine Vorschau der Notch ansehen. Es kommt von Figma. Wenn wir unseren Prototyp machen. Die Notch kommt von dem Telefon, das wir ausgewählt haben . Sie sind alle unterschiedlich. 13. Als ob eine Acht keine Notch hat. Okay, diese Notch kommt also von dort und du kannst verwenden, um eine Vorschau zu sehen Oder du kannst es in dieser speziellen Statusleiste einschalten, denn wenn er großartig ist, gewinnt er. Kehren wir zum Entwurfsmodus zurück und erstellen eine Variable für, für den Dunkelmodus. Er ist auch reingegangen und in diesem Status hier kannst du sehen, dass es eine Kerbe gibt, wenn ich darauf klicke. Okay. Da ist eine Einkerbung sichtbar. Es sind nicht die richtigen Größen. Sie sind sich nicht sicher , ob ich etwas brauche. Wayne B möchte vielleicht nur sehen, dass es hört, dass Sie um herum entwerfen können oder zumindest wissen wie weit das Logo von dieser Notch hier Ich will es nicht an haben. Ich freue mich , es einfach hier zu sehen. Lassen Sie uns auch darauf eingehen. Ich habe Zeit. Okay. In diesem Fall hat er eine Variable von Let's Go Green. Ein kleines Ticket umgeht das. Ich gehe zurück zu Clear. Auch hier gibt es Anzeigen dafür, ob das Mikrofon an ist, ist die Kamera an. Werfen wir einen Blick in die Statusleiste K, diesen kleinen Topf hier. Und hier ist es. Vielleicht kannst du das rein und raus ziehen. Okay, es gibt also ein digitales Netzwerk. Schauen wir uns also das Netzwerk an. Eins, 3 Riegel, oder ich liebe diesen, alle zusammen. Ländliches Irland. Das Wi-Fi-Signal können Sie natürlich auch hoch- und runterdrehen. Es ist eine ziemlich gut gebaute Komponente, ich glaube nicht, dass es die Art von Dingen ist, in die Sie sich möglicherweise die Mühe geben würden , wenn Sie Dinge machen Okay. Schauen wir uns die Batterie an. Okay. Für mich lebe ich davon. Ich lade immer mein Handy auf. Meine Frau hingegen lädt Ihr Telefon gerne nur auf, wenn es leer ist. So macht sie das. Und wenn es dann wieder losgeht, wechselt sie vom Status Normal zum Laden mit einem paranoiden Ladegerät, aber du jedes Mal, wenn ich ein bisschen aufgeladen werde, wissen wir in den Kommentaren und du bist paranoide Ladungen wie ich oder du paranoide Ladungen wie ich oder du lässt es laufen, bis es stirbt, und lädst es dann trotzdem persönlich auf, das benutzt das Community-Projekt eines anderen Das macht man für viele Teile der Systembenutzeroberfläche. Als nächstes machen wir in einem Video noch einen. Aber für die Statusleiste suche jemand anderen , der es geschafft hat. Oder wenn du verrückt bist, kannst du es selbst bauen. Aber meiner Meinung nach trägt es auch zur Demonstration bei, trägt es auch zur Demonstration bei, vielleicht für ein endgültiges Portfolio aussehende Stücke, aber für tatsächliche Testen hilft es nicht. Ich finde es nicht. Lassen Sie mich den Unterschied wissen, die Statusleiste dort oben ist und ob sie nicht da ist. Leute dazu bringen, einige Benutzertests durchzuführen. Überlassen Sie es also Ihnen, ob Sie das Spiel „Gefällt mir“ spielen und hier oben Platz lassen möchten das Spiel „Gefällt mir“ spielen und hier oben Platz lassen und all unsere Designs für diese Statusleiste und dann Notch. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 60. Wie man die Benutzeroberfläche für die Snackbar mit iOS oder Android zu Figma hinzufügt: Toast. Schauen Sie sich das an, diesen kleinen Popup-Toast hier oder Popup-Dialogfeld der Snackbar Wir werden das machen. Also fügen wir das Herz hinzu und das wird angezeigt. Wir machen das nicht, weil diese spezielle UI-Funktion für das UX-Design wirklich wichtig ist. Es ist eher so, dass ich Ihnen zum Beispiel zeigen werde, wie Sie ein bestimmtes UI-Element finden , das Sie vielleicht verwenden möchten. Okay, es gibt etwas, das von Google oder Apple oder WordPress oder Laura Val oder Bootstrap oder Tailwind gebaut wird WordPress oder Laura Val oder Bootstrap oder Tailwind Etwas, etwas, das schon da draußen gemacht wurde. Sie möchten herausfinden, wie es in Ihr Design integriert wurde. Schauen Sie sich die Richtlinien dafür an. Zufällig hat mir dieser gefallen, weil er Toast oder Popup heißt Toast ist gut. Also lass uns gehen und es finden. Lass es uns tatsächlich in Gang bringen. Es ist ein bisschen so, als würde man dir beibringen, fertig zu werden. Sie können all die anderen Dinge finden , die Sie möglicherweise verwenden und die bereits in einem Betriebssystem vorhanden sind , und sie einfach in Ihr Figma-Design implementieren . Ich werde es nachschlagen. Tschüss. Hallo. Hallo, tschüss. In Ordnung, lassen Sie uns das zusammen machen. Okay, lassen Sie uns zunächst versuchen, eine Figma-Datei zu finden von jemand anderem gezeichnet wurde Wir müssen es also nicht selbst zeichnen. Und eine grundlegende Dokumentation darüber, wie es in allem, was ich getan habe, implementiert werden sollte , war für diesen, ich habe gerade Snack Bar für Android gegoogelt Und ich habe die Materialseite genau hier gelandet. Wenn ich nach unten scrolle, los geht's. Es gibt sogar eine Figma-Datei, bereit dafür. Glückliche Tage. Jetzt bin ich hier im Browser. Und während dieses Kurses habe ich die Desktop-Version verwendet, aber Sie können sie einfach im Browser öffnen. Das Schöne an Figma, derselbe, derselbe Browser-Desktop. Und was cool ist, ist, dass du tatsächlich von der Browserversion kopieren und in die Desktop-Version einfügen kannst von der Browserversion kopieren und in die Desktop-Version einfügen , sodass du nicht versuchen musst, es erneut in der Community zu finden, oder? Jetzt versuche ich die Teile zu finden, die ich will. Ich weiß, es ist wahrscheinlich in der Hand, Seite ab, Seite ab. Als ob hier allerhand Zeug drin wäre. Ein netter Weg, das zu tun , ist hier oben in die Suche. Okay, ich kann Snack Bar eingeben und sehe nichts auf dieser Seite. Lass uns alte Seiten gehen. Schau, was ich finden kann, Sachen aus der Snackbar. Ich suche nach einer Komponente, hoffentlich ist es ein automatisches Layout und Sie können auf den Namen doppelklicken und Sie werden dorthin weitergeleitet, wo es nicht funktioniert hat. Ich gehe auf die Suche. Vielleicht doppelklicken Sie einfach auf ein Symbol. Da hast du's. also Da ist also dieses automatische Layout und ich kann sehen, was ich will, aber ich suche auch danach Es filtert es, indem ich mir einfach die Komponenten zeige. Du gehst Snack Bar, Dark, immer alle möglichen coolen Sachen. Also werde ich mir das schnappen. Da ist es da. Ich kopiere es einfach. Springe zu meiner Desktop-Version von Figma. Okay, finde ein passendes Plätzchen dafür und füge es hier ein. Von Heavy Spot. Ich meine, ich werde es in meine Hauptbestandteile einbauen. Wir sind wirklich bereit, das auf eine andere Seite zu stellen , aber ich werde widerstehen. Okay, wir brauchen also ein paar Dinge, jetzt werden wir ein Beispiel dafür erstellen. Wechseln wir also zu Vermögenswerten. Und tatsächlich habe ich meine von der Raster- auf die Listenansicht umgestellt , nur um die Dinge zu vereinfachen, weil meine Snack Bar sie dort hinstellt. Jetzt brauche ich die Hitze an der Spitze. Also werde ich in meinen Vermögensstapel gehen und heiß tippen , ihn etwas kleiner machen. Es ist ziemlich groß, wir brauchen 24, vielleicht ein wir brauchen 24, Vielfaches von acht Muss nicht, aber ich gehe hinein, doppelklicke darauf, um hineinzugehen. Und ich werde dieses besondere Beispiel anführen. Ich mache es bei meinen Hauptkomponenten so, dass es auf allen erscheint. Schieb auch eins da drüben hin. Als Nächstes wechseln wir zu, verbinden wir es. Jetzt wird es ein Overlay sein, weil ich nicht zu einer anderen Seite gehen wollte , sondern nur auftauchen wollte Die Sache mit Overlays ist , dass sie außerhalb des Rahmens eigentlich für sich alleine sein müssen Es wird außerhalb des Bildschirms gestartet und geladen. Also, was ich tun werde, ist, dir zu sagen, wann es am heißesten geklickt hat, werde ich mit E schalten, um zum Prototyp zu gelangen Ich sage, geh zu diesem Ding, aber ich möchte nicht dorthin navigieren, ich möchte sagen, Overlay zur Snack Bar öffnen, was cool ist. Zu zentriert. Nein, ich möchte dem Bildschirm nicht sagen, ich kann das manuell machen. Das Problem mit dem Handbuch ist, sagen wir, ich möchte, dass es perfekt da ist, wenn es geöffnet wird. Hervorragend. Das Problem ist eine Beziehung zwischen an der auf die Schaltfläche geklickt wird, und dieser Anzahl Pixel niedriger. Ende passiert also mein Prototyp, und wenn ich auf diesen klicke, ist es perfekt, wenn ich auf diesen klicke. Eigentlich müssen wir sagen, wenn wir schließen, wenn wir nach draußen klicken, dann verschwindet es. Also los geht's, geht weg, ziemlich klick, dieser erscheint tatsächlich, aber er ist auf den Bildschirmen wie weit unten hier unten. Das wird in diesem Fall also nicht funktionieren. Was wir tun werden ist, dass wir sagen, dass Sie einfach am Boden bleiben. Da unten ist einer. Das Problem ist, dass es von unten keine Polsterung gibt , wenn Sie einen anderen Weg finden, als den, den ich Ihnen jetzt zeigen werde , lassen Sie es als den, den ich Ihnen jetzt zeigen werde , lassen Sie mich wissen. Aber es funktioniert, oder? Das bedeutet, dass dieser dort erscheinen wird, der auf einer Seite, ich brauche nur etwas Polsterung am unteren Rand hinzufügen Im Moment muss ich also etwas künstliches Padding Wenn ich nach meiner Ebenenbedienfeloption oder Alt-Option suche, okay, Ebenen, kann ich sehen, dass dieses Ding Snack Bar ist, die alleine rumhängt Und was mache ich, ist ein Autolayout einzustellen, obwohl da nur eines drin ist, nur damit ich 00 sagen kann, ich tippe oben auf Null und hier unten auf Null. Ich weiß nicht. Sieht aus, als ob ich 64 eingegeben habe Mal sehen, gehen wir? Und lass es uns öffnen. Jetzt. Es ist ausgeflippt. Warum flippt es aus? Nun, lass mich nachdenken. Jeder pausiert das Video. In Ordnung, ich hab's Und wir haben auf die Snack Bar verlinkt. Wir möchten, dass es mit diesem Elternteil verknüpft ist. Jetzt benenne ich das Elternteil um. Denken Sie daran: Command or Control R auf einem PC. Es ist cool. Dieser, Snack Bar, Padding Wrapper oder Rapa Rapa. Es könnte der Name meines Repräsentanten sein, Snack Bar und Papa-Witz Abgesehen davon müssen wir dieses Ding neu verbinden, weil es versucht, da reinzukommen und es ist verloren gegangen und es kann es nicht Also Shift D, sagen wir dir, ich gehe nicht mehr in die Snack Bar. Gehen wir zu unserem Wrapper. Wo ist es? Snack von Rapa Das gibt es. Jetzt geben wir alles andere. Also beim Schließen rausklicken, ganz unten sein. Da haben wir's. 64 sind nicht genug. Funktioniert es? Okay, du brauchst also mehr. Das alles. Was machen wir? 64, 54 plus 16. Klicken Sie auf Aktualisieren. Wir sind auf einer zufälligen Seite gelandet. Links- und Rechtspfeile. Da gehen wir zurück zu dem, den ich getestet habe. Fast da. Noch acht, wir machen es. Du überprüfst es noch einmal, als ob ich will, dass es darüber liegt. Schauen Sie sich die Dokumentation an. Wo sind wir hier? Bei Guidelines? Und du kannst irgendwie ein Gefühl dafür bekommen , wo die Dinge sein sollen Ich kann mir vorstellen, dass es über ihren Vor- und Nachteilen liegt. Dieses Zeug ist wirklich nützlich, nur um zu verstehen , wie man es benutzt. Achten Sie auf abgerundete Ecken an der, am Rand der Form. Wenn wir die Android-Richtlinien befolgen. Und die App-Entwickler für Android oder Swift oder was auch immer sie verwenden, ich werde sowieso einfach die Standardeinstellungen verwenden Wir wollen das alles nicht anpassen. In Ordnung, wie dem auch sei, du musst es lesen. Wie weit sollte es oben sein? Schau in der Dokumentation nach. Ich brauche wahrscheinlich noch acht. Los geht's. Und lassen Sie uns das auf den anderen Seiten überprüfen. Also schließ es, öffne es. Bevor wir zu den anderen Seiten gehen, müssen wir dieses Ding hier bearbeiten, weil im Moment, und lassen Sie uns das dort einfügen. Ich habe das wie du, Vint wurde auf die Wunschliste gesetzt. Wir werden einfach die Häkchen aktualisieren und sehen , wie gut eine Variable aufgeführt ist. Also habe ich die Instanz ausgewählt und du kannst die ganze Woche sehen, gutes Zeug. Schau es dir an. Ich habe eine Aktion. Möchte ich eine Aktion? Will ich den Abschluss? Okay, ich werde handeln, weil ich die Möglichkeit haben möchte , zu sagen, rückgängig zu machen. So ein schön gemachtes Bauteil. Wir wissen jetzt auch, wie man süße Komponenten herstellt. Und Sie können sehen, wie nützlich das für Tausende von Designern und Entwicklern ist , die das durchmachen müssen , ohne Dinge kaputt zu machen. Okay? Es gibt eine längere Aktion. Okay? Zwei Zeilen, einzelne Zeilen sind so gut. Deshalb werde ich verwenden, dass Ihre Veranstaltung hinzugefügt wurde. Eine letzte Sache ist, dass ich es wahrscheinlich möchte , wenn es Shifty angeklickt hat Okay. Ich möchte, dass es sich schließt, wenn es draußen ist, ich brauche es nicht Background Overlay, es macht den Hintergrund nur dunkel Ich werde es wahrscheinlich von unten einziehen lassen. Ich muss die Unterlagen überprüfen, aber es ist ein lebendiges Leben am Rande. Ein wirklich cooles Pop-up und sagt, Nun schau. Ich denke, die Android-Version macht eine seltsame Animation , die ich hier und Figma nicht nachahmen kann, aber sie wird wiederholt Das Letzte ist, dass ich gegangen bin, als das geklickt wurde, ich möchte, dass es geschlossen Also, was ich tun werde, ist zu sagen , Instance, ich füge eine Interaktion hinzu. Wie normalerweise schleppt man diese Schienen überall hin. Wir wollen nichts tun. Das Problem ist, dass es tatsächlich erscheint. Sie können Overlay schließen Da hast du's. Ich wollte nur hier oben editieren. Wählen Sie es also aus und bearbeiten Sie es hier oben. Das Gleiche, tippen Sie auf. Es wird vom Fass abgeholt. Ich hätte es gerne zu nah. Überlagern Sie die Anleitung und stellen Sie fest, dass Sie sie einfach ziehen können, um das Overlay zu schließen Nett. In Ordnung, also jetzt werde ich das schöne Ding weg Du schließt hier. Ich glaube nicht, dass das diesen sanften Papa braucht. Es ist irgendwie komisch. Er hat sich wahrscheinlich nur rein und raus gestritten. Da hast du's. Das führt uns durch ungefähr 1 Million verschiedene Dinge, die wir hinzufügen könnten, um allen Prototypen ein wenig realistischer zu machen. Wird von Ihnen erwartet, dass Sie dies für jeden Prototyp tun? Auf keinen Fall, wenn es dem Benutzer beim Testen hilft, ist es vielleicht dein Ziel hier User Flow auf der Wunschliste zu arbeiten Dann ja, wir würden das machen. Wir würden das kleine bisschen Toast oder die Snackbar hinzufügen , die auftaucht, und Sie können das rückgängig machen Möglicherweise müssen wir eine Benachrichtigung hinzufügen, die hier erscheint. Wir müssen uns nicht mit dieser speziellen Sache befassen und die Warum-Elemente aus der mobilen App hinzufügen , okay, Android oder Apple für diesen bestimmten Flow. Sie können es einfach bearbeiten, weil es cool aussieht wenn Sie versuchen, es einem Kunden zu präsentieren oder zu verkaufen. Das ist eine weitere Sache , die man am Ende macht, wenn man ein Design anbietet und es verkaufen möchte Manchmal fügt man viele dieser Dinge wie all das oben in der Statusleiste hinzu. Sonst noch etwas? süßes bisschen Popup-Toast gibt uns das Gefühl, dass wir den zusätzlichen Schritt gegangen sind , was auch ein bisschen über Figma-Fähigkeiten beweist ein bisschen über Figma-Fähigkeiten Okay, das war's für dieses Video, wir haben etwas Toast gemacht. Ich meine, du könntest kaputtgehen. Wir sehen uns im nächsten Video. 61. Kursprojekt 08 - Betriebssystem-UI: Ich bin's. Ich dachte, ich entkomme dem Computer, weil wir ein Klassenprojekt haben , weil es nicht viel zu besprechen gibt. Also dachte ich, ich mache es persönlich. Du meinst? Was macht es? Ich möchte, dass du ein bisschen UI bekommst, wie wir es im letzten Video gemacht haben, das Popup-Toasting in der Snackbar. Okay? Etwas anderes als das und setze es um. Okay. Und ich möchte Ihnen nichts Spezielles geben, weil ich möchte, dass Sie ein bisschen erforschen, einen finden, schauen, ob Sie Dr. selbst implementiert haben, um es in ein bisschen erforschen, einen finden, schauen, ob Sie Dr. selbst implementiert haben Gang zu bringen, etwas anderes aussuchen, es ist einfacher, solche Dinge Okay. Also ich möchte, dass du mindestens eins auswählst, okay? Und es könnte sein, es gibt viele Dinge, die Sie von iOS oder Android aus implementieren könnten von iOS oder Android aus implementieren , wenn Sie es für ein anderes Framework tun möchten, ich bin auch damit einverstanden. Es könnten solche Dinge sein. Date Picker oder Apple haben ihr dynamisches Irland-Ding , das ganz oben erscheint Schauen Sie sich Ihr Handy an und leiten Sie es an, um zu sehen, ob Sie eines kopieren können. Suchen Sie nach der Dokumentation. Wenn Sie also die Figma-Datei finden können, schauen Sie, ob Sie sie in Figma zum Laufen bringen können Und das ist es, was ich möchte, dass du im Rahmen des Klassenprojekts tust. Ein Minimum auf der Liste wird sein, dass Sie im Klassenprojekt noch alles haben was Sie tun müssen. Es ist wie eine Zeile. Stellen Sie sicher, dass es sich um ein interaktives Element handelt, damit Sie es implementieren können, und zeigen mir mit einem kleinen Video, wie es verwendet wird. Ja, und dann lade den Link hoch. den Aufgabenbereich teilen und in den sozialen Medien teilen, stellen Sie sicher, dass Sie den Hashtag Figma Advanced verwenden vielen verschiedenen Stellen kannst du es dort teilen, mich taggen und sicherstellen, dass du auch an der Arbeit anderer teilst, um ihnen ein bisschen Feedback zu geben. In Ordnung, machen Sie weiter, implementieren Sie selbst ein UI-Element. Viel Glück 62. Sei vorsichtig, was du in Figma erstellst: Hallo zusammen. Dieses Video ist eine Warnung. Seien Sie vorsichtig, was Sie erstellen und können Sie es so ein- und auszoomen? Sei vorsichtig, was du erschaffst. Wovon spricht er? Ich spreche von Prototypen und Animationen. Also Animationen, Dinge, die sie einfach durchspielen, okay, du machst eigentlich nichts mit ihnen. Und dann Prototypen, mit denen wir die letzten paar Videos gemacht haben, sind wie Interaktivität Die Warnung ist nur dass man manchmal Dinge entwerfen kann, die unmöglich oder zumindest sehr zeitaufwändig sind , was bedeutet, dass sie sehr teuer sind. Manchmal liegt es vielleicht außerhalb der Fähigkeiten Ihres Ingenieurs oder Entwicklers oder Ihnen selbst, wenn Sie es schaffen. Also pass auf, dass du nichts erschaffst, es an den Kunden verkaufst und dann nicht B. Und dann ist es entweder e6 und etwas, das sie lieben, oder es ist etwas, das kostet Manchmal können einige dieser Interaktionen, bei denen spezielle Fähigkeiten erforderlich sind, dazu führen, dass sich der Preis des Jobs oder die Zeit verdoppelt Also sei dir dessen bewusst. Ein guter Weg. Als ob es Zeiten gibt, in denen du all das Zeug brauchst. Wenn du zum Beispiel vor einem Kunden pitchst, brauchst du manchmal die gesamte Instruktion, also lass es sich anfühlen und verkaufe das Konzept wirklich Und es könnte für Ihr Portfoliostück sein, gehen Sie dafür überall hin. Es könnte nur sein, um den Chef zu beeindrucken. Es gibt Zeiten, in denen du das Level aufsteigen musst. Aber manchmal fangen wir tatsächlich alle an, etwas zu tun und fügen immer wieder Dinge hinzu Und es ist, ich habe die Zeit, die ich für die Entwicklung eines echten Netzspiels gebraucht habe, verdoppelt , wenn es um Benutzertests geht , weil wir das wirklich wollen. Wir bauen nicht schnell etwas, es an die Stakeholder weiter, holen unsere Nutzer in die Hände und holen Feedback ein. Und Figma ist Rapid Prototyping. Ich bin mir nicht sicher, warum sie das getan haben. Es ist Rapid Prototyping. Und an einigen Dingen, die wir hier gebaut haben, ist nichts Schnelles . Seien Sie einfach vorsichtig und schauen Sie sich den Begriff Lean UX an, okay. Es ist einfach so, dass man manchmal ein bisschen verloren geht und die Details und manchmal alles was es braucht, wirklich superschnelles, superschnelles Wireframing und Skizzenhaftes, um dorthin zu gelangen, wo man hin muss und iterieren zu können. Das ist es also. Und manchmal braucht man nicht das ganze Level, manchmal braucht man nur eine schnelle Sache und dann kann man manchmal Dinge bauen, die für den Entwickler oder Ingenieur wirklich schwierig zu bauen sein können . Es kann möglicherweise nicht gebaut werden. Eine andere Sache ist die Animation, die wir in einem früheren Kapitel behandelt haben. Wir werden in Figma ein bisschen mehr Animationen machen. Ist es nicht, dafür ist es nicht gebaut. Okay, du kannst ein paar einfache Animationen machen. Wir werden es tun, weil es fremd ist und es uns hilft , die Tools zu erkunden und wirklich gut zu werden. Aber wenn ich mir Animationen für etwas ansehe, wird etwas auf der Homepage oder auf dem Willkommens-Bild oder dem Heldenbild abgespielt . Ich möchte, dass einige Animationen laufen. Ich mache es in einem anderen Programm. After Effects hat ein Plugin namens Body Moving, auf das wir bei Lottie Animation näher eingehen Und du hebst es einfach auf und wirfst es in Figma. Okay, es ist nicht wirklich ein Animationstool. Es gibt Plugins , die Ihnen bei Animationen und Timeline-Animationen helfen . Wisse einfach, dass du es an anderen Orten machen kannst und schmeiß es einfach weg, wenn es um Prototyping geht, dass es Figma als besondere Spezialität gibt Okay, es ist wirklich gut darin interaktive Prototypen zu erstellen und das ziemlich schnell zu machen. Es gibt jedoch auch Grenzen. Und wenn du etwas ganz Besonderes willst, ich weiß, fotorealistisch, bin ich mir nicht sicher, wann ich sie verwenden soll. Aber etwas, das wie ein echtes Ende aussieht und sich auch so anfühlt, musst du vielleicht zum nächsten Schritt übergehen, was so etwas wie ProtoPie ziemlich üblich ist Darauf werden wir später eingehen. Aber ja, du entwirfst nichts , was nicht gebaut werden kann. Das ist eine Warnung, dass ich hier raus wollte. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 63. Was sind die erweiterten Ebenen-Verknüpfungen in Figma: Hallo zusammen, willkommen zum fortgeschrittenen Layer-Video. Überspringen Sie es nicht, auch wenn es langweilig klingt, es ist sehr nützlich, wenn Sie Figma täglich verwenden Ich persönlich warte in diesem Kurs auf dieses Video , weil ich es nicht weiß, wir haben es schon lange gemacht. Es gab viele Doppelklicks, Doppelklicks, Doppelklicks, um in dieses Zeug zu gelangen. Es gibt Abkürzungen und sie sind großartig. Lassen Sie uns auf sie eingehen. Die erste ist, sagen wir, ich wollte den Text ändern und es ist unangemessen, wir können auf den übergeordneten Frame klicken , darauf doppelklicken, um hineinzukommen, doppelklicken, um wieder da reinzukommen , ich bin in der Schaltfläche und ich gehe einfach diesen Ebenenstapel hinunter, indem ich doppelklicke Du kannst irgendwann dort ankommen. Und wir haben es endlich getan, ich habe immer noch darauf geklickt, weil ich im Prototypenmodus bin und dieser kleine Punkt im Weg war. Aber irgendwann kann ich dorthin gelangen und den Text in etwas anderes ändern . Aber es gibt viel bessere Abkürzungen. Wenn Sie also einfach das Elternteil auswählen, zu dem Sie irgendwie gehen möchten, und dann einfach die Eingabetaste drücken Die Eingabe endet damit, dass man in Sachen hineintaucht. Super gut, aus so einem Layer-Stack wieder herauszukommen, ist dein Backslash Okay, also was ist deine Tastatur? Es ist der, der nach hinten geneigt ist. Und du kannst diese Lissa irgendwie rauf und runter gehen, rein, hinein, kannst du sehen, wie sie hier in den Ebenen runtergeht und dann kommt Backslash, Backslash, Backslash zu ihrem Elternteil heraus Wenn ich zu diesem Text hier gelangen oder zumindest alles darin auswählen möchte. Ich kann einfach einmal darauf klicken, die Eingabetaste drücken und schon bin ich in der Snackbar. Jetzt lösche ich es oder ändere es. Das ist eine gute Art, in Dinge hinein- und herauszusaugen . Lass uns noch einen machen. Machen wir unseren Button hier drüben und schalten zu, wobei er als Inter ausgewählt ist. Und schau, ich kann den Text tatsächlich ändern, ohne anzuklicken und ihn überhaupt markieren zu müssen. Ich bin nur ein paar Mal reingegangen. Du gehst, um da rauszukommen. Der Backslash weist dich davor zurück. Wenn du zu oft darauf gestoßen bist, verwende ich nicht so oft. Ich sagte Flucht. Flucht bedeutet , dass es hier raus ist. Entkomme wieder und wähle irgendwie wieder nichts aus. Also in der Regel einfach auf das gewünschte Ding klicken. Drücken Sie die Eingabetaste, ein paar Mal die Eingabetaste, bis der Text ausgewählt ist, und dann können wir zurück zu, Ich kann mich nicht bewegen, aber es gab einen Akkord, dann Mesh-Escape ein paar Mal Als Nächstes wollte ich dir zeigen, dass du einfach ganz reinspringen kannst. Also anstatt zu dir zu gehen und das zu benutzen, weil das ziemlich kompliziert ist, okay, toll, um mit der Taste reinzudrücken , gehst du einfach die Ebenen runter Sie können tatsächlich einfach dorthin springen, indem Sie auf einem Mac die Befehlstaste und auf einem PC die Strg-Taste gedrückt halten . Ich habe nicht viel ausgewählt. Das ist einfach anklicken. Wir sind dabei. Es hat eine ziemlich komplizierte Karte durchgemacht. Siehst du, es ist ziemlich tief, tief, tief. Okay. Ich bin drin und ich kann daran arbeiten und es kaputt machen. Klicken Sie einfach mit der Befehlstaste auf die Dinge, um direkt zu ihnen zu gelangen. Hintergrund, klicken Sie darauf. Halten Sie die Befehlstaste gedrückt und klicken Sie darauf. Sie müssen sich nicht mit den Doppelklicks befassen wir im Kurs bisher gemacht haben Happy Days, oder der nächste wählt Geschwister aus. Also klicke ich auf Shift to, um die Ansicht zu vergrößern, und ich drücke die Eingabetaste, um hineinzukommen , und es hat alles ausgewählt, was hier drin ist. Vielleicht will ich das nicht. Was passiert, ist, wenn ich Tabulatoren auf meiner Tastatur hätte, okay. Kannst du sehen, dass es Tabs entlang der sogenannten Geschwister gibt ? Okay. Das Elternteil ist also die Außenhülle, die Dinge, die sich darin befinden, sind die Kinder davon Aber diese Kinder haben Geschwister, weil die Geschwister ungefähr eine Ebene tief sind. Das ist der Elternteil und es hat keine Geschwister. Nein. Weil es auf dem gleichen Level nichts anderes gibt. Aber auf dieser Ebene ist das der Elternteil. Diese Kinder hier haben eine große alte Familie und du kannst einfach einen PC um die Ecke haben. Ich kann mit der Tabulatortaste zum nächsten wechseln , das kann praktisch sein. Ich benutze es nicht sehr oft. Möglicherweise haben Sie es mit viel mehr Listen zu tun. Mein Problem ist, dass es ein bisschen auseinanderfällt, also gehen wir da rein und der Tab oder der ist perfekt gelaufen. Das ist also eine gute Möglichkeit, es zu verwenden und einfach durch die verschiedenen Varianten zu blättern, um sie auszuwählen. Und wo ist das? Einen anderen finden, der kaputt sein könnte? Schicht eins, Hurrikan. Dieser ist ein Umstieg , ich glaube, das liegt daran, dass ich bereits geübt habe Wenn ich hier bin, gehe ich mit einem Fingertipp runter zum nächsten. Was passiert? Tue ich nicht, ich gehe hoch und ich tippe wieder, und ich bin unten und ich gehe überall hin. Im Grunde betrachtet es Ihre visuelle Ordnung nicht , wenn Sie aufwärts gerichtet sind. Es sieht sich die Reihenfolge der Ebenen hier an. Siehst du, lass es uns rüberbewegen, damit wir soweit hineinzoomen können. Dieser ist also der untere, obwohl es hier ganz oben ist. Und da unten ist eine Event-Karte , die ist da. Es wird manchmal etwas schwierig, wenn die Reihenfolge der Ebenen nicht stimmt Ich kann sie neu anordnen und das wird dann funktionieren Und das möchte ich wahrscheinlich tun, wenn ich das irgendwie fertig damit meine Bibliothek es vielleicht mehr mit anderen Leuten teilen Wenn du willst, kannst du super nerdig werden und Shift Tab wechseln . Es läuft in die falsche Richtung. Kannst du das jetzt sehen? Der Tab geht also rückwärts. Halten Sie die Umschalttaste gedrückt, um in die andere Richtung zu wechseln. Ist das dann nützlich? Manche Leute lieben die Tastenkombinationen. Ich habe Tastaturkürzel. Manche Leute würden sie einfach anklicken wollen . Das ist auch in Ordnung. Nochmals, wenn Sie sich in diesen Dingern befinden holt Sie der Tab aus dem Schleudersitz. Das Letzte an Geschwistern und es passt irgendwie zum ersten Punkt, und ich möchte einfach alles löschen Manchmal sagst du, ich will nicht den ganzen Frame löschen. Okay. Ich möchte alles darin auswählen und am Ende triffst du diese Unkrautauswahl. Was Sie tun können: Klicken Sie auf den übergeordneten Frame, drücken Sie die Eingabetaste und es wählt einfach alle darin enthaltenen Geschwister aus und klicken Sie auf Löschen . Auf diese Weise können Sie die Dinge ganz einfach löschen, entkommen, um herauszukommen Das nächste ist, dass wir das schon einmal gemacht haben, aber ich möchte es als nette kleine Zusammenfassung von allem in dieses Video aufnehmen als nette kleine Zusammenfassung von allem in dieses Video Wir wollen die Reihenfolge dieser Elemente ändern. Du kannst deine eckigen Klammern verwenden, okay? Ordnung, neben der P-Taste auf deiner Tastatur, okay, um die Dinge hoch und runter zu bewegen. Es gibt also zwei Möglichkeiten, dies zu tun. Einfach nichts gedrückt halten und die eckigen Klammern entweder öffnen oder schließen. Kannst du mein Ebenen-Panel sehen, es geht einfach ganz nach oben, ganz nach unten. Wenn Sie es einfach um ein oder zwei K nach oben bewegen möchten ein oder zwei K können seine Geschwister die Command-Taste gedrückt halten und es tun Du kannst, du siehst, es geht eins nach dem anderen nach oben. Jetzt kann ich also sagen, dass Sie auf dem oberen Tab zum nächsten Tab sind. Wählen wir diesen oder den unteren Teil hier aus. Also muss ich es um eins nach oben verschieben. Also werde ich Command or Control auf dem PC gedrückt halten. Und einfach, ja, du willst da sein, oder? Perfekt. Nein, du wirst eins weniger haben. Also jetzt Shift Tab. Ich habe diesen ganz oben. Der nächste da. Hast du die Idee, was ich da mache? Ich verschiebe sie nur so, dass dieselbe visuelle Reihenfolge haben wie in den Panels dort. Aber ich weiß, dass einige Tastaturen da draußen diese eckigen Klammern nicht haben Okay, was Sie also tun können, ist einen Schrägstrich zu befehlen oder zu kontrollieren und einfach Stichwortkürzel einzugeben Und dann schauen Sie sich einen Bereich an und sehen Sie, was für Ihre Tastatur eingestellt ist. Sie bemühen sich sehr, die Tastaturen aller irgendwie aufeinander Hoffentlich ist da etwas für dich drin. Warum einige von denen blauen? Einige von ihnen sind blau, weil ich sie schon einmal benutzt habe. Einige davon verwende ich nicht, oder zumindest habe ich in diesem Kurs noch nicht verwendet, weil ich meine Version zurückgesetzt habe, wenn ich diese Kurse starte. Du gehst, eine weitere gute Ebenen-Shortcut ist das Klicken mit der rechten Maustaste Nehmen wir an, das ist die Arbeit von jemand anderem. Es ist ziemlich kompliziert. Es gibt viele Level und Frames und Autolayouts. Ich möchte den Aktionstext bekommen, okay? Oder zumindest um zu sehen, was sich darunter befindet, kann ich mit der rechten Maustaste klicken und ich kann Slick Layer sagen Und kannst du sehen, dass es mir sowohl das Elternteil zeigt , in diesem Fall das Elternteil der Großeltern, das Ding, auf das ich mit der rechten Maustaste geklickt habe Und dann in ihrer Snack Bar-Aktion, dann gibt es ein automatisches Layout und dann sind da noch die Texte, die ich will. Sie können das noch besser machen, indem einfach die Befehlstaste auf einem Mac und die Strg-Taste auf einem PC gedrückt halten und einfach mit der rechten Maustaste klicken Und dann geht es direkt zu derselben Sache, nur irgendwie direkt zu dieser Ebenenliste Und du kannst sagen, eigentlich möchte ich, dass dieser Teil kopiert und dann eingefügt wird , um andere Dinge damit zu machen. Das ist das Mastering the Layers in Figma. Ich füge die Abkürzungen zum Shortcut Sheet hinzu. Denken Sie daran, dass das in den Übungsdateien steht, und ich werde versuchen, sie in den Rest dieses Kurses aufzunehmen. Oder du kannst sie ignorieren und der Typ oder das Mädchen sein , das einfach immer wieder auf Affinität stößt Irgendwann wirst du Dinge anklicken. Das ist auch völlig in Ordnung. Ordnung, das ist es, ich werde es im nächsten Video sehen 64. So findest du Zen-Verknüpfungen für Ebenen in Figma: Hallo zusammen hier drüben und mein Ebenen-Panel sieht aus, es ist chaotisch. Mein Designer-OCD ist ein bisschen so, als würde ein rotes blinkendes Licht laufen. In diesem Video zeige ich dir, wie du Layer Zen mit ein paar kleinen Abkürzungen findest , oder? Lass uns reinspringen. Jetzt, Ms. Day. Ordnung, für den ersten und besten wurde nichts ausgewählt, nämlich die Escape-Taste Zerschmettere das ein paar Mal und halte dann einfach die Wahltaste oder die Alt-Makro-PC-Taste gedrückt und drücke L. Schau dir das an Alles kollabiert einfach. Nun, das Dokument von jemand anderem , dass alles überall ist. Plötzlich arbeitest du daran , Missy zu vermissen, hast nichts ausgewählt und drückst Option oder Alt L. Okay, ein weiterer praktischer ist, sagen wir der Abschnitt hier, wenn ich darauf eingehe, und ich möchte irgendwie in diesen gehen und du willst sie irgendwie alle herunterschalten Wir enthüllen das nicht, du bist nicht zusammengebrochen. Ich möchte sehen, was hier vor sich geht. Was wir tun können, ist, dass die Toiletten voll sind, wir können zuerst die Ebene auswählen. Sie müssen den ersten auswählen und dann den Befehl auf einer Mac-Steuerung auf einem PC gedrückt halten und einfach auf den Chevron klicken Es erscheint ein kleines Pfeilsymbol. Und dann klickt es einfach, packt alles aus, setzt sich der Okay, das wird also sogar praktisch. Wir machen das tatsächlich auf dieser Seite. Es ist zu komplex, also schauen wir uns etwas anderes an. Nehmen wir an, diese Animationsseite. Hier ist nicht viel los. Okay, um sie alle zu entlarven, ich habe nichts ausgewählt. Ich kann einfach auf einen klicken, aber ich kann eigentlich einfach nichts auswählen lassen. Mitglieder entkommen oder auf den Hintergrund klicken, einen Befehl a oder Strg a ausführen, um alles auszuwählen. Und dann mach genau den gleichen Trick. Also halte ich die Command-Taste auf meinem Mac gedrückt, steuere auf deinem PC und alles wird geöffnet. Beides, in diesem Fall gibt es nur zwei Dinge, aber Sie können an diesem sehen, insbesondere die Arbeit mit Gemeindearbeit, mit jemand anderem, der es getan hat. Und du willst einfach irgendwie aufheben. Du bist wie das, was hier drin ist. Wählen Sie einfach entweder eine Ebene oder wählen Sie alle aus und wählen Sie alles aus. Und dann einfach mit der Befehlstaste darauf klicken und es irgendwie bearbeiten. Und es lässt es auch kollabieren . Also, wenn du einmal in der Option L bist, tust du das vielleicht einfach. Okay, es liegt an dir. Hier. Alles auswählen, gedrückt halten, Befehlen oder Strg gedrückt halten. Alles wird geöffnet. Nett. Klicken Sie erneut darauf und halten Sie dieselbe Taste gedrückt, alles wird geschlossen. Andere Dinge, ordne einfach deine Schichten. Wenn Sie hier oben einen kleinen Bildschirm haben keine Seiten verwenden, können Sie einfach auf diesen Pfeil hier klicken und die Seiten verschwinden. Wenn Sie nur an einer Seite arbeiten, benötigen Sie keine Seiten. Vielleicht hast du viele Seiten. Er ist einer von ihnen, um dich zu verlassen, während du arbeitest Du kannst Seite auf und Seite ab benutzen, um zu ihnen zu gelangen. Wir können auch, dass Sie diesen unteren Teil ziehen können. Wenn Sie viele Seiten haben und es viel Platz weggenommen hat. Mach es einfach kleiner. Sie können hier immer noch hineinblättern. Okay, es ist eine nette Art, es aufzuräumen. Und das Letzte, was wir zuvor gemacht haben ist, dass Sie die Größe tatsächlich ändern können Manchmal arbeitest du mit Dingen, um sie dir anzusehen, wähle alle Befehle aus und klicke darauf. Okay, ich habe keine wirklich langen Namen. Dieser hier könnte auf Seite nach oben gehen, Alle auswählen und auf diesen klicken. Okay, es ist tatsächlich ziemlich weit unten auf dieser Liste. Es ist eigentlich nicht so weit, aber du kannst das an derselben Stelle hinein- und herausziehen oder alle Landnamen sehen , je nachdem, wie tief es geht. Die letzte Schicht Zen wird tatsächlich den Präferenzen gewidmet sein. Was standardmäßig passiert, ist, wenn ich mein Rechteckwerkzeug oder Werkzeug verwende, das Gleiche gilt für Rahmen, alles Was Figma tun wird, wenn ich es herausziehe, kann das Rechteck 24 sehen Wenn ich es bei gedrückter Wahltaste oder Alt-Taste ziehe, wird ein Duplikat angezeigt. Ich kriege 25. Wenn ich Command D oder Control D drücke, erhalte ich weitere 126. Also benennt es sie, weil es das letzte Suffix, das letzte Präfix, das letzte Suffix, die Nummer des darin sieht das letzte Suffix, das letzte Präfix, und los geht, ich füge noch eins hinzu, was praktisch sein kann Manchmal ist es aber nicht praktisch. Er ist einer von allen , der 24 heißt, was auch immer der Vorname war, kannst du in deinen Einstellungen. Okay, also Figma-Einstellungen, und hier gibt es eine, die besagt, Doppelte Ebenen umbenennen Jetzt kannst du meine 20er sehen. Selbst wenn ich ihn dupliziere, bekomme ich weitere 27. 27, 27 liegt an dir, was ich mag. Normalerweise belasse ich es einfach beim Werksstandard und ärgere mich dann, wenn es sich daran erinnert, wann ich es nicht möchte Also werde ich mir den Rücken kehren. Was sind ihre Vorlieben, wo es nicht schwarz oder weiß ist oder, weißt du, es muss halb an, halb aus sein. Da hast du's. Jetzt weißt du, dass du es kannst. In Ordnung, das ist es. Aus dem ganzen Video. Wenn Sie sich an nichts anderes erinnern, haben Sie nichts ausgewählt, das ist die Escape-Taste und drücken Sie die Wahltaste oder Alt L, und es räumt all diese Dinge Sie haben nichts getan. Es öffnet es, alles ist offen und ich habe nichts ausgewählt und wähle Option L Alt L auf einem PC, es ist mein Favorit. Ordnung, alle Ebenen In Ordnung, alle Ebenen sind fertig. Wir sehen uns im nächsten Video. 65. Wie du alle Ebenen in Figma ausblenden und entsperren kannst: Hallo alle zusammen. In diesem Video schauen wir uns an, Dinge in Figma verstecken Ich weiß einfach nicht, wie das geht. Oh, aber es gibt ein paar ausgefallene Tricks. Nicht viele, aber ein paar. Lass mich sie dir zeigen. Ordnung, beginnen Sie mit der Methode des Höhlenmenschen, Sie können den Augapfel an- und ausschalten, um den Augapfel an- und ausschalten Das Tastenkürzel ist Command Shift H auf einem Mac, es ist Control Shift H auf einem PC, es wird in deinem Shortcut-Sheet stehen. In dieser Hinsicht können Sie schicker werden und nehmen wir an, Sie müssen die Dinge in diesen drei Frames hier einfach verstecken Und ich werde meine schnellen Aktionen verwenden weil es keine Abkürzung für und sie ist versteckt. Vertiefen Sie den Menübefehl Schrägstrich oder kontrollieren Sie den Schrägstrich, um zu meinen Schnellaktionen zu gelangen , und geben Sie dann Ausblenden in eine zweite ein , hier unten heißt es Andere Ebenen ausblenden Schau dir das an. Sauber und aufgeräumt, brauche sie alle zurück. Drücken Sie einfach Command a oder Strg a, um alle Ebenen auszuwählen und verwenden Sie dann einfach erneut unsere Tastenkombination, die Ihnen vertraut ist. Es ist ungefähr 30 s her. Erinnerst du dich, dass du es Command Shift H oder Control Shift H machst, also kannst du das irgendwie ein- und ausschalten Und wenn Sie denken, kann ich einfach alles auswählen und bei gedrückter Umschalttaste auf diese klicken, um sie zu entfernen, dann meine Tastenkombination zum Ausblenden verwenden Du bekommst es am gleichen Ort. In Ordnung, das versteckt sich. Es geht zurück 66. Nutze gesperrte Ebenen in Figma: denke, ich hoffe, dass dies kein Video über das Sperren und Entsperren von Ebenen Kurse für Fortgeschrittene fühlen sich nicht besonders an. Irgendwie gehe ich zu Advanced Locking Layers dich, es ist ein kurzes Video. Es gibt gute Dinge zu wissen. In Ordnung , zuerst schauen wir uns das Layout an, die Art von Höhlenmenschen, es ist ein kleines Schloss hier drüben. Es gibt eine Tastenkombination, Befehl, Option L, Kontrolloption L. Sie wird in Ihrer Kurzbefehlsliste stehen. Sie haben wahrscheinlich inzwischen Shortcut Overload hinzugefügt, aber das ist dasselbe wie Ausblenden. Du hältst dieselben zwei Tasten gedrückt. Einer ist H, einer ist L. Also Versteck und Schloss, irgendwie zusammengebunden Aber auch hier keine sehr fortgeschrittenen Kurse. Wir können das machen, wo es besser wird , wenn es manchmal gesperrte Artikel gibt. Also dieser hier ist gesperrt. Okay, ich kann mich an den Trick von vorhin erinnern. Wer erinnert sich, wie ich mit der Liste der Dinge begonnen habe , die sich unter meinem Cursor befinden , weil ich darauf klicken kann. Aber wenn ich auf einem Mac meine Befehlstaste gedrückt halte, hast du es, Steuerung von Canopy C. Und wenn ich mit der rechten Maustaste klicke, ich diese nette nette Ebenenreihenfolge, sodass ich auch Dinge auswählen kann, die gesperrt sind Und dann kann ich diese Abkürzung verwenden, um sie zu entsperren , was hilfreich ist. Es kann sowieso sein. Andere Dinge, die wir tun können, sind manchmal, dass Sie einfach alles entsperren möchten , was das Dokument eines anderen ist. Warum manche Dinge gesperrt sind, du bist dir nicht sicher, ob es eine Option gibt. Okay. Die Abkürzung ist unverständlich Also, was wir tun werden, ist, unsere schnellen Aktionen durchzuführen. Also Befehl oder Kontrolle, Schrägstrich. Und lass uns entsperren gehen. Es gibt eine Entsperrung aller Objekte. Da ist die Abkürzung, Option Shift Command L an unserem Hals und es wird Alt Shift Control L auf einem PC geben. Daran erinnere ich mich nicht. Du wirst es nicht genug benutzen, aber die schnellen Aktionen geben uns Zugriff darauf oder tauchen einfach in jedes einzelne Ding auf dieser ganzen Seite ein, auf allen Seiten, nur auf dieser Seite, damit es entsperrt wird oder was sind die Dinge , auf die du stoßen könntest , lass uns einen Blick darauf werfen Ich werde mir etwas Kompliziertes ansehen , dieses Ding hier. Ich werde es mit meiner Tastenkombination Command Shift L, Control Shift L auf einem PC sperren . Und du landest hier drin. Du bist wie hier unten wie diese kleinen Punkte, diese Punkte von wir wissen es jetzt, ich glaube, als er sah, wie ich es verschlossen habe. Aber wenn diese Punkte praktisch sind, zum Beispiel, dass du nicht gesperrt bist, WACC, was kann ich dir dann bewegen Du sagst, warum kann ich dir meine Karte immer noch nicht bewegen. Okay. Ich sehe, dass du dich freischalten kannst. Das liegt daran, dass der Elternteil eingesperrt ist. Okay. Da hast du's. In Ordnung. Das ist alles, was ich für Locked Layers habe, du bist entlassen. Wir sehen uns im nächsten Video. 67. So findest du die Ebenensuche zum Ersetzen und Mehrfachauswahl in Figma: Hallo alle zusammen. In diesem Video machen wir Suchen und Ersetzen, was interessant und einfach ist. Wir werden es noch ein bisschen weiter treiben , wenn wir es mit wirklich komplexen Figma-Dateien zu tun haben wirklich komplexen Figma-Dateien Also lasst uns reinspringen. Okay, also sind alle meine Ebenen-Panels hier. Nicht viele Leute wissen, dass Sie im Ebenen-Panel suchen können. Und sagen wir, ich möchte Welcome finden. Ich habe auf ein paar Seiten, ich habe beide Textfelder mit den Worten „Willkommen Und ich habe einige Frames, die als Willkommensbildschirm bezeichnet werden. Okay, eine nette Art, wie Sie es verwenden können, ist, dass ich meine Befehlstaste auf meinem Mac und die Strg-Taste auf einem PC gedrückt halten und einfach alle drei auswählen kann meine Befehlstaste auf meinem Mac . Sie sagen, es ist irgendwie krautgelb und ich bin ausgeflippt, als ich das erste Mal sah, hey, ich habe dich nicht gelb gemacht Es bedeutet nur, dass es hervorgehoben wird und ich einfach ein paar wirklich einfache Größenänderungen vornehmen kann ein paar wirklich einfache Größenänderungen vornehmen Sie können es hier einfach für diese einfache Tatsache verwenden, viele Dinge gleichzeitig auswählen, ohne alles mit der Umschalttaste anklicken zu müssen Sie können es auf die nächste Ebene bringen, nämlich diese kleinen Einstellungen hier. Sie können Suchen und Ersetzen sagen. Also sage ich „Finden“, „Willkommen und ändere es mit Start. Alle ersetzen. Okay. Das ist eine gute Art, das durchzustehen. Es könnten einige Schaltflächen sein , die Sie benannt haben und das ursprüngliche Design hatte einen Login. Aber jetzt, um alles konsistent zu halten, wird es eine Anmeldung oder solche Dinge sein , bei denen Sie einfach alles im Dokument suchen und ändern wollen , bei denen Sie einfach alles im Dokument suchen , das rückgängig machen Du kannst noch ein bisschen weiter gehen und sagen, finde einfach die richtigen , weil ich Kleinbuchstaben verwenden würde, du kannst sagen, passt die Groß- und Kleinschreibung Das könnte hilfreich sein. Schalten wir es aus. Eine Sache, die wir ersetzt haben, was ich wirklich tun wollte, ist das Häkchen bei Ersetzen zu entfernen Ich habe das Gefühl, ich könnte es ausschalten. Okay. Ich weiß nicht, ob du es so finden wirst. Du klickst einfach auf Suchen und los geht's, denn wenn ersetzt ein ist hier unten nicht viel. Aber wenn ich zu Suchen zurückkehre und zu meinen Einstellungen zurückkehre, schaue ich mir diese zusätzlichen Dinge an. Es geht um die zusätzlichen Dinge. Ich werde diese Filteroption hier mit Match Case ausschalten . Und lassen Sie uns hier ganz oben stehen. Suchen Sie nach Early Bird. Ich tippe einfach früh viel zu viel Zeug ein. Okay, es wurde oft benutzt, es gibt jede Menge Komponenten, Frames, Instanzen dieser Frames, diese Instanzen haben Variablen. Es wird chaotisch. Du kannst hier rein gehen und sagen, zeig mir eigentlich alles, was vielleicht ein Hauptbestandteil ist. Okay, da hast du's. Da sind meine eine Hauptkomponente und die verschiedenen Variablen. Sie können sehen, dass es sich sogar zu ihnen bewegt. Alles, was du sagen könntest, zeig mir meine Beispiele dafür, viele Beispiele. Aber es ist eine gute Methode, um alle Bilder zu filtern , die einen bestimmten Namen haben. Erstens, finde den Text, du hast die Idee. Ein letzter kleiner Trick ist zu erinnern, dass wir alles umbenennen können, sagen wir, Sie haben das alles ausgewählt Du kannst sie eigentlich einfach alle rausschneiden. Okay, ich habe alles , was ich jetzt löschen könnte. Klicken Sie auf Löschen. will ich nicht tun. Oh wow. Das hat den Figma kaputt gemacht. In Ordnung. Warte, der Zwiebelriegel, reparier ihn. Alles. Meine Tabs funktionieren nicht. Ich freue mich. Es ist okay. Hast du nochmal eine Idee, ich bin zurück und es ist abgestürzt und sind alle Early-Bird-Instances gegangen? Das haben sie getan. Und wie komme ich zurück? Das ist ein guter Lernprozess für uns. Ich tue so, als wäre es für den Kurs gemacht worden. Ich werde auf nichts Ausgewähltes eingehen. Geh hier hoch. Könnten Sie den Versionsverlauf anzeigen? Und hier gehe ich zurück. Ich habe es nicht mit Absicht gespeichert, aber es gibt einige automatische Speicherungen von früher. Also werde ich darauf klicken. Schau es dir hier an. Hey, sie sind alle zurück. Sie, mein Freund, werden also zu dieser Version zurückkehren. Und wenn du das mal so machst wie ich, versuchst du damit zu arbeiten und du kannst nichts tun, ich kann nichts auswählen, du musst oben auf Fertig klicken. Es ist ein seltsamer Ort dafür. In Ordnung, wir sind da, wo wir gesucht haben, machen Frühaufsteher Wir wollen nur die Beispiele dafür. Ich werde alles auswählen. Ich wähle den ersten aus, halte die Umschalttaste gedrückt und schnappe sie mir alle. Jetzt drücke ich Command R, um sie umzubenennen. Eigentlich ist das eine Massenumbenennung. Lass uns das in einem separaten Video machen , nur damit es nett ist, und es für dich im Kursinhalt zusammenfassen Bulk Rename ist sehr hilfreich, oder Das ist alles für Suchen, Ersetzen, Auswählen mehrerer Dinge in Ihrem Ebenenfenster, vielleicht um Anpassungen vorzunehmen, vielleicht den Text zu ändern. Ich bin nicht sehr spektakulär, aber eine sehr wichtige Methode Ihren täglichen Figma-Workflow zu beschleunigen In Ordnung, weiter zum nächsten Video 68. Wie man Ebenen mit fortgeschrittenen Tricks in Figma in Massen umbenennt: Hallo alle zusammen. In diesem Video werden wir uns diese erstaunliche Option zur Massenumbenennung in Figma ansehen diese erstaunliche Option zur Massenumbenennung in Figma Wir machen ein paar einfache Sachen. Wir werden ein paar coole Sachen machen , bei denen wir viele unserer Komponenten und Instanzen aufräumen unserer Komponenten und Instanzen Und dann werden wir richtig ausgefallen und ich zeige dir , dass ich eigentlich keinen Ausdruck schreiben kann, aber ich kann dir zeigen, wie du einen kopierst und einfügst, um ein paar LUSTIGE Sachen im Bulk zu machen, Umbenennen, aber sei nicht zu aufgeregt Ich weiß nicht wirklich, was ich mit der Codierung von Ausdrücken mache , aber es ist gut, das dort zu wissen. Und es gibt Ihnen ein gutes Beispiel dafür , wie es funktioniert und wo Sie weitere Informationen finden. In Ordnung, der Großteil der Umbenennung des Fonds beginnt. In Ordnung, lassen Sie uns damit beginnen, diese supercoolen Pleistozän-Symbole umzubenennen . Ich weiß, dass du fragen wirst. Und das Forum-Icon acht, K 3D plus Selena Okay, super cool. Fangen wir mit einer einfachen Umbenennung Also wähle ich diese drei aus und öffne die Massenumbenennung Jetzt ist die Massenumbenennung nur noch die gleiche Tastenkombination Command R oder Control R auf einem PC Da wir jedoch mehrere Dinge ausgewählt haben, wird dieses Fenster für die Massenumbenennung geöffnet. Müssen wir irgendwas zusammenbringen? In diesem Fall nicht. Ich benenne einfach das Symbol um und verwende einen Unterstrich Und ich sage, ich will eine Abwärtsnummerierung. Okay, ich könnte das löschen und ich könnte es wie aufsteigende oder absteigende Zahlen machen es wie aufsteigende oder absteigende Zahlen Das sieht nach mir aus, 123. Du kannst dir das irgendwie vorstellen, das ist interessant, das ist Code für, das ist Code für, gib eine Zahl in absteigender Reihenfolge ein. Ich weiß nicht, wie das funktioniert. Es ist kalt. Es ist ein regulärer Ausdruck und ich kann mich durch googeln, damit Dinge passieren. Also werden wir in diesem Video ein bisschen machen, aber behalte sie einfach im Auge. diese Weise kann der Computer Dinge in unserem Text finden, durchsuchen und ihn dort organisieren, sogenannte reguläre Ausdrücke. Wie dem auch sei, nehmen wir an, wir können sie wie ein Höhlenmensch modifizieren Als ob es 01 ist, kann ich ein weiteres N setzen, um drei für viele Ints einzugeben. Du kannst ein bisschen herausfinden, was es macht. Da. Ich habe, ich will 3001, perfekt, umbenannt, Massenumbenennung wird gebissen Wenn, lassen Sie uns diese in meinen ursprünglichen Symbolen hier finden, das sind die Hauptkomponenten, also werde ich sie umbenennen und sie alle auswählen, meine gleiche Tastenkombination Command oder Control R verwenden und wir sind Bulk Rename ist sehr praktisch, wenn Sie Komponenten mit dieser Methode gruppieren möchten mit dieser Methode Denn im Moment werfen wir einen Blick auf unser Asset-Panel. Wir haben all unsere Sachen, als würden wir hier rumhängen. Nochmals, wenn du 1.000 Icons hast, werden sie am Ende einfach hier rumhängen. Und ich bin ziemlich schwierig zu benutzen. Einige Dokumente werden 100, 200 Symbole haben. Wir können also sagen, dass ihr alle das Ebenenmenü zurückschalten werdet , damit ihr es sehen könnt. Benutze meinen Befehl. Und ich sage, eigentlich werden sie es sein, wir werden sie umbenennen. Wir werden sie in einen Ordner mit dem Namen wenn ein Ordner, aber ein Gruppenfarbensymbol legen und dann ihren aktuellen Namen verwenden. Das Dollarzeichen Ampersand ist also der reguläre Ausdruck für den aktuellen Namen Also werden die Symbole mit einem Schrägstrich und dann mit ihrem regulären Namen versehen Das sind Vorschauen wirklich praktisch. Wenn du den Essentials-Kurs gemacht hast, weißt du das, wenn ich das mache und du kannst es irgendwie hier in meinem Asset-Panel sehen Jetzt werde ich nur mit meiner Ikone haben. Da haben wir's, Seite eins und meine Hauptkomponenten, ich habe ein Symbol, aber sie sind alle zusammen gruppiert Kannst du das auf einem netten kleinen Stück sehen. Es macht es später einfacher, wenn Sie gehen. Verwenden Sie eine Instanz davon. Und hier drüben, können Sie sehen, dass ich eine Lupe habe, aber in derselben kleinen Symbolgruppe kann ich das Herz auswählen oder ich kann die normale Farbe wählen Es ist eine einfache Möglichkeit, zwischen diesen Instanzen zu wechseln, okay, indem Sie einfach diesen Schrägstrich verwenden Okay, als Nächstes werde ich diese Art von Icon-Gruppe verwenden diese Art von Icon-Gruppe Nochmals, du würdest diese nicht haben, also hol sie dir einfach von einem beliebigen Plugin, zum Beispiel ist eine Acht gut. Und da sind jede Menge kostenlose Sachen drin. Und was ich hier habe, ist, dass ich einen Volumenmodus und einen Gliederungsmodus desselben Symbols habe. Manchmal ist die solide Version erforderlich, weil ich hier die Umrisse verwende, weil mir ihr Aussehen gefallen hat, aber es hier die Umrisse verwende, weil mir ihr Aussehen gefallen hat, werden einfach Zeiten sein, in denen sie vor einem gemischten Hintergrund zu klein sind . Wir werden tatsächlich die solide Option wählen müssen , zwei Optionen. Lassen Sie uns also die Massenumbenennung vornehmen. Sie hatten alles ausgewählt, was Sie mit Command oder Control verwenden . Seltsam benenne sie um. Und ich sage, es ist N für den Icon-Ordner. Das tust du, indem du den Schrägstrich hinzufügst. Manche Leute mögen es, Leerzeichen auf beiden Seiten des Schrägstrichs zu haben. Es spielt keine Rolle. Es sieht wohl schöner aus, ist aber egal Ich werde sagen, dass Icons nicht in den Ordner gehen, verwenden Sie den aktuellen Namen. Aber ich möchte auch noch eine Ebene tiefer gehen und sagen, ich möchte eigentlich eine solide Version finden, eine Kopie. Dann werden diese die Gliederungsversionen sein. Lassen Sie uns Umbenennen anklicken. Lassen Sie uns eine Instanz herausziehen, von der ich jetzt weiß , dass ich sie nicht machen kann, weil sie tatsächlich hier drüben sind . Es sind nur Rahmen. Es spielt also keine Rolle, wann Sie diese vorher in Komponenten tunen, nach all der Benennung von versehentlich Lift Mine danach Aber wir werden mehrere Komponenten erstellen. Glückliche Tage. Ziehen Sie es nun auf die Instanz. Und hier habe ich jetzt eine etwas bessere Struktur. So sieht Misenus aufgeräumter Look alles unter Ikone aus. Nehmen wir an, ich möchte den Löschvorgang finden. Und können Sie hier sehen, dass ich eine Gliederung oder eine solide Vision zur Hand habe ? Eine andere Sache, die wir tun könnten ist, uns das Assets-Panel anzusehen. Es wird langsam chaotisch hier drin, wie das Panel für alle Assets, eine lokale Komponente, oder es ist chaotisch, es ist nicht so schlimm Sie können jedoch sehen, dass diese alle abgespalten werden. Also da auf Seite eins und meine Hauptkomponenten, was praktisch ist, der Anfang innerhalb des Symbols. Also bookmarken, obwohl wir jetzt anfangen, eigentlich möchte ich etwas tun Die will ich mir alle schnappen. Ich schneide sie von dieser Seite ab. Ich mache eine neue Seite. Es sind meine Seiten dort, wir App Plus, ich werde meine Komponentenseite haben. Also, wann solltest du das tun? Ich mache es wegen der Art von Bühne. Du kannst es von Anfang an machen. Stellen Sie einfach sicher, dass Sie hier auf die Seite mit all Ihren Hauptkomponenten gehen . Es kann einfach zu aufgeräumt sein du arbeiten könntest, oder wenn du möchtest, dass ich, ich stoße einfach darauf, muss repariert Ich werde die nächste Zeit damit verbringen es zum Laufen zu bringen. Ordnung, ich beginne damit, einen Abschnitt oder einen Rahmen zu erstellen und ihn einfach umzubenennen und ihn als Symbole zu bezeichnen Also habe ich eine Möglichkeit , meine Icons zu platzieren. Und wenn ich meine Symbole von denen der Seite einfüge, überprüfen meine Hauptkomponenten einfach , ob die richtigen Symbole angezeigt wurden Das sind keine Instanzen. Und los geht's. Es wird nur ein bisschen aufgeräumt sein. Wenn du jetzt mit einer Instanz arbeitest , um zu sagen, dass du, mein Freund, eigentlich alle meine Komponenten sind. Da du eine Ikone bist, welche Art von Ikone? Ich brauche das Löschen und ich brauche das Solide, los geht's. Eine Sache, die jedoch passieren kann, ist entweder das Aufräumen des Dokuments einer anderen Person Okay, du hast wie das iOS-Designsystem oder Material oder etwas anderes geöffnet und du musst nur die Menge an Struktur loswerden , die sie nicht benötigen. Nehmen wir an, Sie werden nicht die soliden Dateien verwenden , die aus Ihrer Datei entfernt wurden. Was jetzt passieren wird, ist, dass du diese Trennung hast. Kannst du am Ende die Gliederung sehen? Wir brauchen es einfach nicht, also können wir es aufräumen, weil wir im Moment noch diesen zusätzlichen Schritt haben, den wir nicht benötigen Okay, also wir gehen, ich werde mich mit Icons befassen. Wir sagen, ja, gib mir das Löschen und dann wählen wir die Gliederungsvision aus. Es gibt nur einen zusätzlichen Schritt. Es heißt, schnapp dir diese, benutze Command-A und sage, ich möchte sie finden, behalte die Vorschau von hier im Auge Ich möchte die gesamte Gliederung loswerden, nicht nur die Gliederung . Habe den Slash-Outline gekauft. Okay. Um alles aufzuräumen, dann kann ich das machen. Okay, das hat nur irgendwie einen Teil dieser Namenskonvention entfernt einen Teil dieser Namenskonvention Jetzt habe ich eine Instanz, auf der steht, dass Sie alle meine Komponenten sind. Du bist ein Symbol und ich habe es gerade aufgelistet, du musst nicht in das Lesezeichen gehen und einen Schritt nach unten darauf klicken oder das nächste, was ich dir zeigen wollte, hat etwas mit regulären Ausdrücken oder Regex zu tun , die ich Und ich werde meine Hand hochlegen und sagen, ich weiß nicht viel darüber, wie man es programmiert, aber ich weiß, dass es existiert und dass es praktisch sein kann. Aber für mich benötige ich Hilfe von einem Entwickler, der mir hilft, einige dieser Suchanfragen zu beantworten. Also ich habe dieses Beispiel hier. Wir haben das Wortsymbol mit dem Unterstrich 001. Das haben wir vorhin gemacht. Also werde ich sie alle umbenennen. Und was ich tun möchte, ist die Wörter durch die Zahlen zu ersetzen. Hier gibt es keine Option. Es heißt, wähle alle Namen aus, okay, und tausche sie dann gegen die Zahlendiagramme aus. Wenn wir wissen, dass wir in diesen Bereichen etwas programmieren können, sollten wir das tun können, okay, und hier wende ich mich an einen Entwickler und sage: Hey, kannst du mir helfen? Das? Okay, ich werde Ihnen ein Beispiel und es ist im Grunde genommen, ich habe es gerade von der Figma-Website übernommen Ich hinterlasse den Link zu diesem Artikel. Es ist nur der Suchartikel hier. Und es fängt einfach mit einem einfachen an und enthält dann Referenzmaterial , das mir immer noch weit über dem Kopf liegt. Aber schauen Sie mal, Sie können einige der Suchmuster sehen , die Sie eingeben können. Aber auch hier, lassen Sie uns einfach ein Beispiel nehmen, damit Sie es und Ihre Gesäßtasche wegwerfen können es und Ihre Gesäßtasche wegwerfen , um zu wissen, dass Sie, wenn Sie etwas kniffliges zu tun haben, wahrscheinlich Hilfe bekommen können, weil das eine Menge Zeit sparen könnte Ich kopiere das und das Match-Feld. Und ich habe irgendwie verstanden, dass er sich all die Groß- und Kleinbuchstaben schnappt , zwischen denen auch ein Unterstrich steht Und sie haben auch, ich glaube, das ist für alle Zahlen für den Schrägstrich D, K. Und finde all das, all die Buchstaben, die einen Bindestrich dazwischen haben, und dann all die Zahlen, schnapp sie dir alle Und dann das Dollarzeichen eins, was das erste ist, was ich herausgezogen habe, aber eigentlich zuerst das Dollarzeichen Zwei gesetzt habe. Es wird also die Zahlen angeben, was auch immer. Das zweite Ding, das du dir hier geschnappt hast, erste, das erste bisschen, das zweite Und lassen Sie uns einfach einen Unterstrich dazwischen setzen , damit wir es vom Symbol 00120001 abschalten können vom Symbol 00120001 abschalten Gutes Beispiel, Dan, ich denke nur, ich möchte, dass du dir bewusst bist, dass die Suche, insbesondere die Massensuche, viel mehr kann als das, was dort verfügbar ist. Ich habe erwähnt, dass das Dialogfeld selbst im Laufe der Zeit aktualisiert wird, um Ihnen mehr Optionen zu bieten. Aber wie dem auch sei, vergiss, wie schlecht ich darin bin, solche Sachen zu programmieren. Und konzentrieren wir uns darauf wie cool diese kleinen Verarbeitungssymbole sind oder sie werden. Das Massenumbenennen in Figma macht einige erstaunliche Dinge. In Ordnung, das ist es. Ich werde es im nächsten Video sehen. 69. Ersetze Instanzen und Varianten durch Shortcuts in Figma: Hallo alle zusammen. Wir werden uns damit befassen und Ihnen zeigen, wie Sie Dinge schnell und einfach austauschen können, entweder mit Instanzen wie dieser hier, schauen Sie, schalten Sie es nett aus. Ich zeige Ihnen, wie man es macht, wenn es tief in einer Komponente steckt, was schwieriger ist. Es gibt auch Switchout-Instanzen, gibt auch Switchout-Instanzen wenn sie sich in Variablen befinden Also dieses verrückte kleine Zielding, das manchmal auftaucht, während ich dir zeige, wie du alle Instanzen trennen und zurücksetzen alle Instanzen trennen und zurücksetzen kannst. In Ordnung, und es springt Als Erstes gibt es einige Symbole, die Sie in das Dokument einfügen können. Es gibt jetzt also einen Ordner mit Gerichtssymbolen , um alle vier zu importieren, sie dem Dokument hinzuzufügen und sie zu Komponenten zu machen. Wir wissen, wie das geht. Ich mache es am Ende dieses Videos, nur für den Fall, dass du dich verirrst. Aber alles was wir brauchen sind Komponenten. Wir werden dieses Ding mit dem Symbol benutzen. Also lasst uns den Putschtausch machen. Ich bin jetzt auf Seite eins. Ich mache einen Rahmen nur damit ich sehen kann, was wir tun. Ich fing an, es auf Schwarz aufzunehmen und du konntest nicht wirklich sehen, was es macht. Also brauchen wir ein paar Dinge. Lass uns schnappen. Ich werde anfangen, diesen, okay, diesen Resources-Tab zu benutzen , es ist Shift I, sowohl für Mac als auch für PC. Shift I öffnet es. Wenn Sie weiter tippen, beginnt die Suche. Ich mag es wirklich, weil ich es in der Schicht geöffnet habe. Es erinnert sich an Komponenten von der letzten Sache, die ich gemacht habe. Und jetzt kann ich heiß tippen. Ich finde, dass es wirklich einfach ist als das Assets-Panel hier zu verwenden. Also werde ich das rausziehen und ich werde zwei Versionen hochziehen . Zwei Versionen. Warum? Weil ich einen machen wollte, um einen unberührt zu lassen Und dieser hier mit den Instanzen, die irgendwie kaputt sind. Weil ich dir den Unterschied zeige. Lass uns etwas anderes finden, das verwendet wird. Der vertraute Bleistift. Der Stift an sich. Es macht eigentlich nichts und zieht es einfach in die Länge. Und es ist sehr klein. Was ich aber tun kann, wenn ich die Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt halte , können Sie sehen, dass diese kleine Linie um sie herum erscheint? Diese kleinen Zeilen sind, in Ordnung, ich werde dich auswechseln Und was es getan hat, ist, dass ich die Icons wirklich klein gemacht habe , weil das zeigt , dass, wenn ich nichts an dieser ursprünglichen Hot-Instance ändere , das Ding, mit dem ich es tausche, ihre Größe verwendet Aber wenn ich es so zerstört habe, halte dieselbe Taste gedrückt, Alt auf einem PC, Option auf einem Mac. Kannst du sehen, ob ich es verzerrt habe? Es geht, oh, ich werde versuchen , es praktisch zusammenzubringen. Ja, natürlich gibt es die Möglichkeit, hier reinzugehen und das zu benutzen und sich bei der Suche durch die Komponenten zurechtzufinden. Ich finde diese Option, einfach Alt auf einem PC gedrückt zu halten, Option auf einem Mac, und sie zu überschreiben, ist super einfach Und manchmal funktioniert es nicht und ich zeige Ihnen den Trick, um das zu umgehen. Nehmen wir an, wir wollen das hier austauschen. Wir haben diese Typen. Wenn ich genau den gleichen Trick anwende und Stiftsymbol sage, halte ich die Wahltaste gedrückt, wie Dan sagte, oder Alt auf einem PC. Es erscheint nichts. Es hat es einfach hineingeworfen und dann das Autolayout und es hat es einfach da reingeworfen nichts geändert Was Sie tun können, ist , dieselbe Tastenoption auf einem Mac und Alt auf einem PC gedrückt dieselbe Tastenoption auf einem Mac und Alt auf einem zu halten und auch die Befehlstaste gedrückt zu halten. Das ist also Optionsbefehl, Mac Alt Control auf einem PC. Und du siehst, dass die Linie jetzt erscheint. Ich tauche gerne nach innen und tiefer in etwas ein. Und weil ich die Größe nicht geändert hatte, ersetze sie durch die neue Größe Wenn ich auf diesen und diesen eingehen will, mache ich daraus 31. 31. Wenn Sie nun diese beiden Tasten gedrückt halten, Option und Befehl auf einem Mac, erhält Alt Control auf einem PC die neue Größe. Nehmen wir an, du tauschst Komponenten aus wo zumindest die Abkürzung dafür ist, oder eine andere Abkürzung zum Ausschalten von Dingen ist, wenn du mit Varianten arbeitest. Finden Sie also etwas in Ihrem Dokument. Komponentensatz, Sie suchen nach der Varianz. Ich werde diesen Text hier verwenden. Ich halte die Befehlstaste gedrückt und klicke auf Control, klicke auf einen PC, um in meine Varianten einzutauchen Und bei einigen Dingen wird es ein Ziel geben. Etwas schwul und ein kleiner Tooltip verrät, was wir tun. Kannst du sehen, dass da steht: Hey, möchtest du, dass ich alle passenden Ebenen auswähle? Okay, du bist super geworden. Sie können das durchgehen und sagen, dass ich die Schriftgröße oder die Farbe ändern möchte die Schriftgröße oder die Farbe ändern oder sagen, dass Sie es austauschen möchten. Sagen wir. Aber hier habe ich auf die Außenseite geklickt Es erkennt an, dass es mehr als einen gibt. Da ist es da. Und ich kann sagen, dass wir es tatsächlich vom Preis auf, ich weiß nicht, was wir da noch drin haben, umstellen . Das obere Navi ist nicht angemessen, aber es ist eine großartige Möglichkeit, wenn Sie schon viele Varianten innerhalb einer Komponente haben, und es erklärt, warum es manchmal ein Ziel gibt und manchmal nicht. Warum ist das Retarget nicht hier? Diese werden sehr ähnlich aussehen. Die beiden verschiedenen Es sucht nach Dingen, die ziemlich ähnlich aussehen. Kommt zu einem Punkt, an dem ich nicht sicher bin , ob Sie dieses Beispiel haben oder nicht. Aber du kannst auf meinem sehen, lass uns das machen. Wenn ich den Befehl befolge, klicken Sie darauf. Da steht: Hey, es gibt noch mehr. Du schläfst für mich, wie ich. Warum hast du das nicht ausgesucht? Okay. Eines der Dinge, nach denen gesucht wird , ist offensichtlich der Text und die richtige Schriftart und Größe. Es sucht nach diesen Dingen, aber es sucht auch nach der Struktur der Ebenen. Okay, schauen wir uns das an. Dieser hier wurde nicht ausgewählt. Der Befehl hat darauf geklickt Es liegt daran, dass diese hier sind, es ist sein Kumpel. Darin befindet sich eine Instanz, direkt darin befindet sich das Kind der Texte. Während dieser hier dieser ist , ist die Instanz darin ein weiterer Wrapper oder Frame Und okay, normalerweise ist darin der Text erlaubt. Es weiß also nicht, wie man tief in Schichten springt , oder zumindest tut es das im Moment nicht aber anstatt Instanzen zu ersetzen und Variablen zu ändern, möchte man einfach alles auseinandernehmen Es gibt also ein cooles neuestes Feature, bei dem wir Shift I verwenden, um unsere Komponenten zu öffnen. Geben wir COD von dem Ding ein, das wir vorhin gemacht haben. Und ich werde das mit einbeziehen, das ist ziemlich komplex. Denken Sie daran, hier und in meinem Ebenen-Panel Okay, schauen wir uns an, wie wir es erneut öffnen In Ordnung, halten Sie die Befehlstaste auf einem Mac und die Strg-Taste auf dem PC gedrückt, und es sollte geöffnet Aber Sie können sehen, dass ich darin eine Instanz habe. Als Beispiel gibt es ein Beispiel den unteren Teil, der eine Preisinstanz hat und einfach alles ist an den Preis gebunden. Manchmal lässt du es einfach in Ruhe. Ich möchte nicht, dass alles Instanzen sind. Ich möchte einfach alles so glätten, dass es Rahmen sind und mit nichts anderem verbunden sind Um dies mit der ausgewählten Karte zu tun, sedimentieren Sie Ihnen eine schnelle Aktion Also Befehl oder Kontrolle, Schrägstrich. Und wenn Sie detach, detach instance eingeben, möchten Sie alle verschachtelten Instanzen trennen, weil der Moment, in möchten Sie alle verschachtelten Instanzen trennen , weil der dem die Instanz trennen irgendwie funktioniert, aber all diese bleiben immer noch da aber all Kannst du sehen? Wenn ich das rückgängig mache, Hoffnung auf schnelle Aktionen, verwende Detach All Instances Sie werden feststellen, dass beim Betrachten dieses Befehlsklicks alles zerbrochen ist. Es kann sein, dass du die Arbeit von jemand anderem benutzt , oder du willst einfach einen Neuanfang machen und alles irgendwie in Stücke reißen Es gibt keinen wirklich guten Ort, um es zu finden. Nutze also schnelle Aktionen und denk daran, dass du hoffentlich alle Instanzen trennen kannst In Ordnung, schließen wir ein kleines Labor. Wer die Tastenkombination bewegt , hält die Wahltaste gedrückt und drückt L oder Holter Jetzt fallen einfach alle Ebenen wieder zusammen. Vielen Dank. letzte Abkürzung ist, wenn du mit Instanzen arbeitest und sie nicht löschen, du willst sie zerschmettern, Kämpfe wollen sie alle zurücksetzen Sie können mit der rechten Maustaste auf jedes Element klicken und alle Änderungen zurücksetzen. Natürlich können Sie auch Ihre schnellen Aktionen verwenden. Du kannst es tun, du kannst tatsächlich viele von ihnen ausschneiden. Okay. Und haben sie alle auf einmal gesagt, zurück zu der Art und Weise, wie ihr bestimmt gewesen seid, umgesiedelt zu werden Du hast winzige Stifte. Also so setzt ihr all eure Instanzen zurück, okay, und dann wird es so sein für die Abkürzungen Also werden wir lernen. Was ich jetzt tun werde, ist, wie ich am Anfang versprochen habe, dass ich Ihnen die Teile zeige, die ich übersprungen habe , um dorthin zu gelangen, wo wir angefangen haben Wenn Sie damit zufrieden sind, mehrere Symbole zu erstellen und umzubenennen, ist das völlig in Ordnung Wenn du es dir genauer ansehen möchtest, werde ich das jetzt hier tun. Ich habe alles auf die Zeit vor dem Start des Videos zurückgesetzt . Und ich werde sagen, es bringt ein paar Bilder und einige Ikonen. Ich ziehe fast immer fast immer Symbole aus einem Finder-Fenster rein, um sie einfach reinzuziehen. Okay, ich zoome mit der Maus hinein, halte die Befehlstaste gedrückt und benutze mein Scrollrad Und ich werde mehrere Komponenten herstellen. Großartig. Jetzt benenne ich sie auf einem PC in Command oder Control R um Und ich werde sie in die gleiche Unterkategorie einordnen , die ich zuvor hatte Schrägstrich des Symbols. Warum? Weil ich möchte, dass sie mit diesen anderen Symbolen gruppiert werden Also werden sie da rein gehen. Sie werden ihren aktuellen Namen haben. Und ich werde auf Umbenennen klicken. Und wieder eine Art Arbeit. Es ist in unser Vermögens-Panel gesprungen. Also Alt zu unter meinen Komponenten, jetzt habe ich zwei. Warum habe ich nicht zwei davon weil die , die ich gerade gemacht habe, nicht in die Sektion gegangen sind, die ich gemacht habe, ich habe sie mir angesehen. Aus irgendeinem Grund, als ich meine Bilder aus meinem Finder hineingezogen habe, sind sie dort nicht in diesen Bereich gelangt Es wird also tatsächlich irgendwie getrennt sein. Um einen Blick auf mein Ebenen-Panel zu werfen, Option eins. Das sind die Typen , die hergebracht wurden. Sie sind aus irgendeinem Grund nicht hier gelandet. Das werden wir also tun, um dorthin zu gelangen. Wenn ich jetzt in meinem Asset-Panel nach Komponenten schaue, gibt es nur eine Gruppe von ihnen. Ordnung, und so habe ich mit diesem Kurs angefangen habe sie in die Spielnamen gezogen und sichergehen, dass wir an den richtigen Ort gehen, in Ordnung, das ist es Wir sehen uns im nächsten Video. 70. Verwendung von Instance Swap-Komponenteneigenschaften mit bevorzugten in Figma: Hallo alle zusammen. In diesem Video werden wir uns sogenannte Komponenteneigenschaften ansehen. Es ist ein wirklich enttäuschender Name für etwas, das spektakulär gut ist, wenn wir uns komplexen Komponenten befassen, und es ist eine wirklich gute Möglichkeit, eine Alternative für Varianten zu finden Nur ein kurzer Überblick. Dieser hier ist, was wir traditionell in Figma gemacht haben und was wir in diesem Kurs gemacht haben, wir machen einfach einen Button und wir haben drei Instanzen davon Dieser hier macht genau dasselbe, aber dann fehlen all diese zusätzlichen Bits. Aber genau das bewirken die Komponenteneigenschaften. In diesem Fall gibt es einige verschiedene Komponenteneigenschaften. Wir werden uns den Instance Swap ansehen und kurz demonstrieren, was er tut. Ich habe zwei Knöpfe, die alte Methode, die ich durchmache und die schlecht benannte Varianz auswähle Nun, der neue Weg, der gelbe Knopf, okay, und der gelbe Knopf hier drüben hat ein nettes kleines Ding-Icon, was ich tun kann, du willst entweder machen, willst du das Plus, du willst den Stift, ich schätze, ich habe daraus ausgesucht. Es ist einfacher für die Person, die den Button benutzt, jemanden in meinem Team, die Zukunft zu treffen. Aber die wahre Stärke liegt hier , wo ich nicht all diese Komponenten erstellen musste. Es ist nur einer. Ich schalte diese Instanz mithilfe einer der Komponenteneigenschaften aus. Und wenn du sagst, Hey, es scheint nicht viel Arbeit zu sein. Es ist, wenn sich Varianten auf so etwas einstimmen. Schau dir die Felder hier nicht an, tu es nicht. Schauen Sie sich all die verschiedenen Varianten an, die Sie in einem Bereich mit den Materialien von Google benötigen , so viele Optionen, dass wir auf etwas reduzieren könnten , das viel mehr so aussieht und funktioniert. Ordnung, lassen Sie uns einsteigen und ich zeige Ihnen, wie Sie einen zusammenstellen Okay, um loszulegen, habe ich meine Komponentenseite aufgerufen, ich habe einen Abschnitt mit Schaltflächen erstellt und etwas gezeichnet, das wie ein Button aussieht Im Moment ist es nur ein automatisches Layout mit einer Hintergrundfarbe in einigen Häkchen. Jetzt zeigen wir Ihnen den schlechten Weg, weil ich das Gefühl habe, dass das der einzige Weg ist , den neuen, ausgefallenen Weg wirklich zu schätzen und zu verstehen, so wie ich meinen Kopf sowieso gebraucht habe. Nehmen wir also ein Grenzgebiet, es wird in eine Komponente umgewandelt, okay? Ich werde Varianten dieser Komponente haben , drei davon. Okay? Ich werde einige Instanzen hinzufügen. Deshalb heißt dieses Ding Instance Swap und funktioniert nur, wenn Sie so etwas tun. Also Schicht I, okay, ich werde herausfinden, was wir ankreuzen, es ist erledigt. Da ist es. Okay. Also werde ich das mit reinziehen. Okay, da haben wir es. Passt nicht ganz, passt die Größe an. Also werde ich eine Instanz des Häkchens und ich werde eine Instanz des Let's Go-Symbols haben und dort einfach eine Instanz des Stifts haben. Und Shift Ich wähle das Plus-Symbol. Du brauchst diese Instanzen hier drin, damit das Ding funktioniert. Das ist also der falsche Weg, es zu tun, oder? Also oder nicht auf die falsche Weise. Es ist einfach so, wie wir es von jetzt an machen. Wir haben dieses Ding namens Button großartig gemacht. Und für mich musste ich quasi drei Versionen davon machen. Kein großes Drama, es wird erst dann zu einem großen Drama, wenn man etwas tun muss , das mehr als drei Mal dauert. Ich habe diesen gefunden, schüttel ihn raus. Das ist eine Hauptkomponente und diese regeln die Instanzen, meine Güte, es ist wahrscheinlich die komplexeste, die ich finden konnte Dies sind Dropdown-Eingabefelder für Google-Materialien. Das fühlt sich also wirklich einfach an, aber natürlich kann man viel komplexer werden. Auf der anderen Seite geht die Person, die das benutzt , zu der Komponentenbibliothek , die Sie mit ihr geteilt haben, öffnet diese und sagt, in Ordnung, Dan ist Button A. Es gibt verschiedene Eigenschaften, die er nicht benannt hat, okay, aber es gibt Variante 12.3. Es gibt verschiedene Eigenschaften, die er nicht benannt hat, okay, aber es gibt Variante 12.3 Das ist also kein großes Drama, aber schau dir an, wie es besser wird. Also werde ich ein Duplikat machen. Ich werde es anhängen. Kannst du Farbe füllen und du ausmalen? Los geht's. Das hat jetzt also nichts damit zu tun , sie sind alle getrennt. Was jetzt zu tun ist, ist, dass wir es wie zuvor zu einer Komponente machen . Benennen wir es um und nennen es Button Be. Und was wir tun werden, ist, anstatt Varianten zu erstellen, was wir sagen werden, ist, weil es hier ein Beispiel gibt , das ist unsere Technologie. Wir können sagen, ich möchte, dass du hier drüben hinzufügst, okay, Duns kommen vom Namen meines Icons, aber ich möchte es Instance Swap hinzufügen. Es ist dieses Ding hier. Es weiß, dass es eine Instanz ist. Sie klicken also nicht auf die äußere Schaltfläche. Du klickst auf die Instanz in meiner Komponente und sagst, eigentlich möchte ich, dass du bitte einen Instance Swap durchführst. In der Instanz wird der Name ein Symbol sein. Also Leute, die das benutzen werden, ich denke voraus, dass die Person, die das jetzt benutzt sagt, es wird eine Option mit der Aufschrift Symbol geben, und sie werden einige bevorzugte hinzufügen können. Hier wird es richtig gut. Man kann sagen, es hat funktioniert, aber ich möchte auch, dass sie auswählen, multiplizieren können , was ich zum Schließen umbenennen muss, hinzufügen Fügen wir den Stift hinzu, aber ich möchte weder das Lesezeichen noch das Löschen Es gibt einfach keinen Grund, es für diesen oder irgendwelche Knöpfe zu haben . Es wird für etwas ganz anderes verwendet. Klicken wir auf Eigenschaft erstellen. Und das Schöne ist, dass das Ding, das ich gemacht habe, irgendwie nett und sauber aussieht Bringen wir meine Schicht I rein und tippen wir die Taste erneut ein, dann streichen wir das aus. Ich bin der Benutzer, der es jetzt benutzt und sage, In Ordnung, Ronnie to Button, um diesen süßen Button zu animieren . Bitte schön. In Ordnung, welche Optionen habe ich hier? Du bekommst dieses neue Zeug. Das war vorher nicht da. Aber jetzt habe ich diesen Instance Swap, das ist erledigt. Und von diesen können sie nur die drei auswählen. Wenn Sie schon einmal mit einem Dokument gearbeitet auf dem etwa 100 Icons stehen, diese riesige Liste der Lippen hier, während ich hier einfach die bevorzugten auswählen kann , bedeutet das, dass der Kreative sagen kann, ich nur diese drei verwenden kann. Sie können gehen und sie austauschen. Also wollte ich wirklich vermitteln, wie großartig das ist. Ich denke, wir müssen noch ein paar Videos drehen, wenn wir etwas Komplexeres machen, ich denke, das ist der einzige Weg, aber lassen Sie uns kurz zusammenfassen Für mich als Schöpfer sieht meins also ziemlich aufgeräumt aus und vielleicht bekommst du jetzt Sachen, würdest du wissen, wo die Varianz ist, wie würde die Funktionsweise dieser versteckten anderen Leute funktionieren Also habe ich hier meine Hauptkomponenten ausgewählt. Ich habe diese Komponenteneigenschaft, die so etwas wie diesen kleinen Diamanten hier hat . Das ist ein Instance Swap. Sie können mehr als eine Komponenteneigenschaft haben. Wir werden sie alle in einer Minute behandeln. Aber du kannst hier sagen, dass tatsächlich die Person braucht, die nichts anderes gebraucht hat. Sie müssen in den Standard übergehen, das muss ein Plus sein und auch für die bevorzugten. Und die Leute benutzen das Löschen und du sagst, du kannst Löschen nicht verwenden, hör auf, Delete zu benutzen. Was sie wirklich brauchen, ist, dass sie optional ein Lesezeichen für diese Schaltfläche hinzufügen können . Für mich. Ich musste nicht gehen und eine weitere Variante machen die rund um Autolayout, die Maus, ist nett und aufgeräumt und für den Benutzer, wenn er diesen Button hier benutzt, ist das die, die Sie müssen nur reingehen und sagen: Hey, was darf ich benutzen? Alle bevorzugten Optionen? Und wenn sie sagen, Hey, ich brauche wirklich diesen Mülleimer , ist mir egal, was Tanz ist. Die Standardeinstellung wird bevorzugt, aber tatsächlich können sie auf alle Komponenten innerhalb einer Bibliothek zugreifen, um Sie oder lokale Komponenten zu schützen. Jetzt kann ich meine Icons suchen und darin graben und mir jedes einzelne schnappen, das ich will. Ich kann es überschreiben, aber es macht die Dinge einfach aufgeräumt, was Sie für mich als Credo verwenden können und was nicht Und der Benutzer bekommt einfach ein nettes kleines Dropdown, in dem er aus Dingen auswählen Okay, das sind Komponenteneigenschaften für eine Instanz, Swap, super cool In Ordnung, schauen wir uns den nächsten im nächsten Video an. 71. Nutze die Texteigenschaft der Komponente in Figma: Hallo zusammen. In diesem Video schauen wir uns die Komponenteneigenschaft Text an. Es ermöglicht den Leuten, hier in den Eigenschafteninspektor zu gehen und tatsächlich zu gehen. Ich werde das ändern, um mich anzumelden, ohne in die Schaltfläche klicken zu müssen . Ist das nützlich? Ich glaube nicht, aber der Kurs für Fortgeschrittene schon, und ich wette, diese Komponenteneigenschaft hat der Kurs für Fortgeschrittene schon, und ich wette, diese etwas Wichtiges etwas Wichtiges an sich , das ich wirklich nicht verstehe Entweder das oder Figma hat größere Pläne für die Zukunft Lernen wir es also, wissen wir, dass es da ist, und dann gehen wir zu den anderen Komponenteneigenschaften über. Gute Möglichkeit, zum Anfang eines Videos zu gelangen. Dan, wer dieses Video jetzt sehen will, macht es trotzdem mit mir. In Ordnung, um loszulegen, habe ich einen Knopf. Es ist eine Komponente im Umgang mit der Hauptkomponente davon und es muss Text und das Innere sein. Das, worauf Sie achten sollten, befindet sich unter den Eigenschaften, meinen Komponenteneigenschaften. Das ist die Sache, die wir im letzten Video gemacht haben. Ich werde Instance Swap verwenden , den wir Icon genannt haben. Hier drin. Fügen wir eine weitere Eigenschaft hinzu, indem wir den Text auswählen. Wenn du runter zu seinem Inhalt gehst, musst du hier ein bisschen reinscrollen , Inhalte finden, und hier kannst du Component Property hinzufügen, okay, den Text Component Property Und im Grunde sind alle Standardeinstellungen hier gut, Ticks ist der Name der Komponenteneigenschaft und der Wert, der irgendwie geändert werden muss, Sie geben hier etwas anderes Ich belasse es bei Button, Create Property. Und was am Ende passiert, ist, dass daraus eine kleine Pille wird, aber was am Ende passiert für die Person, die sie benutzt passiert, ich bin Button. Ich habe meine anderen Knöpfe losgeworden. Okay. Ich kehre gerade zum L1 zurück Wenn sie das rausziehen, haben sie unter unserer Schaltfläche Komponente, sie haben Komponenteneigenschaften, okay, und das haben wir schon einmal gemacht. Wir können es auf Plus umstellen, aber sie können den Text hier ändern. Jetzt. Sing auf. Hallo, melde dich an. Da hast du's. Nun, warum ist es nützlich? Sag den Anfang. Ich bin mir nicht sicher, wofür es genau ist. Ich kann mir vorstellen, dass wir in der Lage sein werden, zu einem bestimmten Zeitpunkt außerhalb von Figma oder mit etwas anderem Zeug einem bestimmten Zeitpunkt außerhalb von Figma reinzubringen, ich weiß es nicht wirklich Aber du kannst es schaffen. Ich kann mir vorstellen, wie nützlich es für die Person ist, die nicht reingehen und darauf doppelklicken und es ändern Okay, sie können das alles einfach mit dem Elternteil hier machen. Dann muss ich mich eingraben oder die Befehlstaste oder die Ctrl-Taste gedrückt halten , um hineinzukommen. Ist das eine Ersparnis? Ja, vielleicht ist es das nicht, aber ich wette, dass mir etwas fehlt, dass dieses kleine Häkchenfeld eine tolle Breite haben wird . Sie wissen vielleicht schon, dass es mich in den Kommentaren wissen lässt, aber es ist eine weitere der Komponenteneigenschaften, eine nette, einfache, die ich anscheinend nicht nützlich finde. Das Ego im nächsten Video. 72. Verwendung der booleschen Komponenteneigenschaft in Figma: Hallo alle zusammen. In diesem Video schauen wir uns den booleschen Komponenteneigenschaftscode an den booleschen Komponenteneigenschaftscode Es ist ein verrücktes altes Wort. Was macht es? Wir haben es schon einmal gelernt, als wir Variablen mit ein- und ausgeschalteten Dingen erstellt haben . Das ist der boolesche Weg, wahr, falsch, ja-nein Wir haben das so gemacht, dass wir diesen kleinen Kippschalter ein- und ausschalten können diesen kleinen Kippschalter ein- und ausschalten Aber in diesen Videos werden wir schicker. Wir erstellen eine Hauptkomponente, und anstatt ein paar verschiedene Optionen zu haben, bauen wir sie mit der Komponenteneigenschaft could Boolean hinein Komponenteneigenschaft could und landen an derselben Stelle, sodass ich die Dinge ein- und ausschalten kann Aber es spart hier so viel Zeit bei diesen Variablen, vor allem, wenn wir uns mit mehrdimensionalen Variablen befassen. Aber lassen Sie uns zunächst ein nettes, einfaches Wort erstellen, um uns mit diesem seltsamen Wort Boolean vertraut zu machen und es in den Komponenteneigenschaften umzusetzen Okay, um loszulegen, ich habe zwei separate Hauptkomponenten, Buttons See und Button D. Lass es uns falsch machen, nicht falsch , nur weniger fortgeschrittene Art, nur weniger fortgeschrittene Art, Essentials Course, nichts falsch daran Aber wenn man sich mit komplexeren Designsystemen beschäftigt, landet man hier unten. Und wir wollen nicht hier unten landen. Was wir tun werden, ist, eine Variante zu machen. Denken Sie daran, das ist der falsche Weg. Ich gehe wie mein Symbol hinein und drücke auf Ausblenden, drücke auf Ausblenden, was Command Shift H oder Control Shift H auf einem PC ist Okay, und was ich tun möchte, ist, diese zu benennen. Ich schnappe mir die Komponente, das Set, die Eigenschaft, möchte ihr einen Eigenschaftsnamen geben , um zu sagen, hat sie ein Symbol? Und lassen Sie uns darauf eingehen und ja sagen. Und wenn ich ja und nein verwende, Okay, das ist ein boolescher Wert. Es bedeutet ein/aus, wahr, falsch, ja, nein. Und das Coole daran ist , dass ich sagen kann dieser Knopf hier diesen kleinen Kippschalter hat Fantastisch. Also lass uns das schicker machen Wir müssen also keine Variante erstellen, da Boolean eine der Optionen ist Wir machen das nicht hier in Immobilien, sondern wir suchen uns das Ding aus, das wir ein- und ausschalten wollen, okay, aufgepasst , mein Symbol. Und was du machen willst, ist ziemlich knifflig. Es hat eine Weile gedauert , bis ich sowohl mit als auch unter der Schicht trainiert habe. Okay, also nicht ganz oben hier unter Eigenschaften, wir wollen auf dieser Ebene weitermachen. Ich möchte diese Option hier haben, okay, erstelle eine boolesche Eigenschaft Und es weiß irgendwie, wahr-falsch, irgendwie schon getan. Ich muss nichts anderes tun. Du gehst. Da ist mein Hauptbestandteil, Aufräumen, als dieser Okay, aber wenn ich es benutze, Shift, ziehe ich den Knopf hier raus und ich kann hier rauf gehen, schau, ein kleiner Kippschalter macht dasselbe Netter. Boolean kann also alles sein, was ein Ja-Nein-Ein-Aus, Wahr-Falsch ist ein Ja-Nein-Ein-Aus, Wahr-Falsch Okay, wo ist der Instance Swap? Denken Sie daran, dass wir früh eine Instanz verwenden mussten , hier können Sie sehen, dass meine Komponenten hier eine Instanz meines Symbols waren, wohingegen wir das auch mit dem eigentlichen Text machen können. Also diesen Text hier unten können wir eigentlich sagen, ich will die Ebene finden, wohingegen meine Ebene da sie da ist. Okay, hier gibt es diese boolesche Option. Wir werden eine neue Eigenschaft erstellen, die nur Text true, false besagt. Diese Instanz hier drüben hat zwei davon. Wir können nur das Symbol oder nur den Text haben, wir können nichts haben und es flippt aus Beide, tut mir leid, wenn du nicht beide ausgeschaltet hast, es weiß nicht, was zu tun ist, aber dann wählst du Boolean Fantastisch. In Ordnung, fangen wir im nächsten Video an, sie alle zu kombinieren 73. 73 Eingabefeld: Leute, in diesem Video werden wir uns unsere Komponenteneigenschaften etwas genauer Reiht ein paar davon zusammen. Wir werden unser Textetikett erstellen. Wir werden es mit einem Eingabefeld machen in dem es leicht zu vielen verschiedenen Varianten kommen kann zu vielen verschiedenen Varianten , um all die verschiedenen Optionen zu ermöglichen. Aber wir werden unsere süßen neuen Tricks verwenden um dies tun zu können, wobei dies die Hauptkomponente ist , die all diese verschiedenen Optionen bietet. Schauen wir uns das wenig benötigte Feld an und schalten es und aus. Wir ändern das Etikett nicht. Benötigst du den Hilfstext unten? Ja, nein, ändere die Wörter darin. Aber was ist, wenn wir die rote Linie um ihn herum brauchen? Wir können gehen, benutzen wir einfach den Pfeil. Ein Blick darauf ist super aufgeräumt und ein wirklich gutes Beispiel dafür, warum die Eigenschaften von Komponenten großartig sind Ordnung, lassen Sie uns einsteigen. In Ordnung, zuerst werde ich das Eingabefeld zeichnen. Ich werde es im Speed-Modus machen. Du machst einen ähnlichen. In Ordnung, also los geht's. Das Einzige, als ich das gebaut habe war, dass ich die beiden getrennt gehalten habe. Okay. Das Sternchen ist eine Abkürzung für Pflichtfeld oder Pflichtfeld Ich habe das getrennt aufbewahrt, damit ich es ein- und ausschalten kann. Damit habe ich kein automatisches Layout daraus gemacht. Ich habe den Text oben auf den Rahmen gelegt, nicht innerhalb des Rahmens, weil ich später, wie ich am Anfang gezeigt habe, die Gliederung ändern möchte . Farbe und Farbänderung gehören derzeit nicht zu den Komponenteneigenschaften, aber wir können sie sofort austauschen. Also können wir das auswechseln. Also können wir eine Instanz davon ausschalten. Cage ist der Hintergrund, aber ich möchte den Text, den Textnamen nicht ändern. Wechsle die Hintergrundfarbe. In Ordnung, jetzt geht es darum, es zum Laufen zu bringen. Also werden wir sagen, machen wir die einfachen. Lassen Sie uns zunächst alles auswählen und es einer Komponente machen. Okay? Und geben wir ihm einen Namen. Es wird Eingabefeld heißen. Cool. Also lass uns die einfachen machen, wie das Booling Also klicken wir darauf und gehen hinein Okay. Und wir werden sagen, hier drüben, suche nach einer Schicht. Haltet nach der kleinen Ikone Ausschau. Okay, klicken Sie darauf. Und das ist alles was wir tun müssen. Lassen Sie uns ein Beispiel für diese Arbeitsschicht bekommen. Und lassen Sie uns Eingaben eingeben. Und da haben wir's, Hauptbestandteil. Das ist meine Instanz. Okay? Und wir werden sagen, du hast diesen coolen kleinen Kippschalter Ist es erforderlich, oder nicht? Lassen Sie uns dasselbe für die Helper-Technologie tun. Es wird nicht für alle benötigt. Wir wollten es als Option haben. Okay, ich bin auf meine Hauptkomponente eingegangen. Ich werde meine Ebene finden, da ist sie da. Und ich werde sagen, dass es bereits eine namens Show , denn genau das ist es. Ich werde eine neue Immobilie kreieren, die perfekt steht. Danke. Jetzt, hier unten, habe ich zwei Kippschalter Zeig den. Zeig den. Glückliche Tage. Muss ich sonst noch etwas ein- und ausschalten? Wahrscheinlich nicht für den Moment. Lassen Sie uns den Eingabetext eingeben. Und ich muss jetzt vielleicht zugeben, dass mit drei Textbits hier die Eigenschaft der Textkomponente vielleicht besser ist, Textkomponente vielleicht als ich dachte Mein Instinkt, mir alle drei zu schnappen und zu sehen, ob ich ein Inhaltsmitglied ausfindig machen kann ein Inhaltsmitglied ausfindig machen Der Inhalt ist für den Text. Ordnung. Dieser kleine Abschnitt hier, der besagt, dass Inhalt nicht mehr existiert, kleine Änderung an der Benutzeroberfläche. Figma hat es jetzt verschoben, okay, und es in den Text Lass es mich dir zeigen. Du kannst hier sehen, da ist mein Text. Und sie haben es einfach so verschoben, dass es Teil dieser ganzen Kachel ist. Es gibt keinen Inhalt mehr. Die Zeiten, die zum Inhalt werden. Suchen Sie einfach nach dem exakten Look für dieses kleine Feld hier mit dem Bullen hier drin, unsere Texteigenschaft erstellen wird. Es wird kein Inhalt mehr in den Text eingemischt. In Ordnung, mach weiter. Diese Dinge sind überall, was ein bisschen verwirrend ist. Aber halte Ausschau nach diesen Symbolen. Unter Inhalt steht Mix. Wenn ich darauf klicke und einfach auf Okay klicke, werden sie alle zum selben Ergebnis. Sie sind alle miteinander verbunden. Wenn ich sie jetzt hier runterhole und anfange zu tippen, okay, wo ist das Etikett statt Etikett, gebe ich Beispieltext ein, okay? Oder zumindest ein Beispiel, kannst du sehen, dass sie sich alle geändert haben? Das ist nicht das, was ich will. Okay, also ich werde es rückgängig machen, ich werde es einzeln machen. Klicken Sie auf Label, suchen Sie unten im Inhalt dem süßen Symbol statt nur nach dem Wort Text. Dieser wird ein Etikett sein. Der Wert kann beschriftet werden. Das ist in Ordnung. Beispieltext hier. Das Gleiche, nicht das. Wir werden eine neue Immobilie erstellen. Mustertext ist wahrscheinlich kein guter Name dafür. Nennen wir dieses eine Feld Text. Dieser letzte hier wird auf dem neuen Grundstück eins sein. Das wird Hilfstext genannt. In Ordnung, also warum gebe ich zu, dass das wirklich nützlich ist? Schau dir das an. Wenn jemand eine neue Version davon herauszieht, kann er sie durchgehen und sagen, oh schau, das Etikett für diese Version lautet „Name sagen Sie können die Tabulatortaste drücken, okay, drücken Sie einfach die Tabulatortaste auf Ihrer Tastatur Und dann kannst du da rein tun, weißt du, was auch immer du willst. Und dann wird der Hilfstext Vorname und Nachname sein . Ordnung, ich nehme es zurück. Das ist irgendwie nützlich, wenn du das alles anklickst. Eine Sache, die wir jetzt tun müssen, es wäre schön, wenn diese zusammen wären . Im Moment heißt es Helfertext anzeigen. Okay? Aber dann ist die Eingabe des Hilfstextes da unten. Ordne das neu an Okay? Nachdem wir es erstellt haben, müssen wir zu der Hauptkomponente zurückkehren , in der wir die gesamte Hauptarbeit nur in dieser machen . Diese kleinen Linien sind repariert, kannst du sie dort sehen? Was wir also tun werden, ist wahrscheinlich das Wichtigste. Eigentlich werden wir es oben beschriften, weil es hier ganz oben auf dem Stapel steht, das ist der Labeltext. Dann werden wir es bekommen. Sollen wir das Sternchen zeigen oder nicht? Dann muss sich der Hilfstext wahrscheinlich unten unter dem Hilfstext , wahrscheinlich umgekehrt, oder? Zeigen Sie ihn zuerst an und können Sie ihn dann eingeben, wenn er angezeigt wird. Wir schauen uns das jetzt an. Macht das mehr Sinn? Das Etikett ändern, sagen wir E-Mail? Möchte ich nachweisen, dass es verpflichtend ist oder nicht? Dann ist da noch das Textfeld. Okay. Smith, möchtest du den Hilfstext zeigen? Ja. Okay. Was wollen wir dann darin haben? In Ordnung, das ergibt größtenteils Sinn. Ich muss den Namen ändern, weil dieser hier zeigt, dass Asterix wahrscheinlich nicht so toll ist Du machst dasselbe, wenn du zum Original zurückkehrst Und Sie können diese auch bearbeiten. Okay, du kannst sie hier einfach doppelklicken. Wir könnten sie einfach - oder ausschalten, das macht Sinn, wenn es heißt, Hilfstext anzeigen, aber wir machen das hier einfach erforderlich , an, aus, nett. Nun, ein Sofortwechsel war nicht wirklich sinnvoll , okay? Vielleicht war hier irgendwo ein Symbol drin, es ist ein Pfeil oder so. würdest du tun. Ich werde es als kleinen Hack verwenden, weil ich eine Fehleroption haben möchte, im Grunde die rote Linie, die anzeigt, dass dies ein Feld ist, das Sie entweder übersehen oder falsch verstanden haben . Oder nicht genug Zeichen, zu viele Charaktere, solche Dinge im Moment. Okay, wenn ich darauf klicke, gibt es keine. Wenn ich zu meinen Eigenschaften gehe, gibt es nur Varianten-Booling, Instant Swap und Text Vielleicht schaust du dir das an und sagst, hey, es gibt noch 40 weitere Dan, ich gehe davon aus, dass das ziemlich neu ist. Ich sehe in meinem Kopf all die verschiedenen Möglichkeiten, wie du das machen könntest. Okay, es wäre toll, Farbstile, Schriftstile, alles von den Stilen, die ich mir vorstellen werde, austauschen zu können Farbstile, Schriftstile, alles von den Stilen, . Lass mich in den Kommentaren wissen, ob es hier Neues gibt und ob es nur eine Kleinigkeit ist, lasse ich es dich herausfinden Aber wenn es, du weißt schon, wenn sie viele hinzugefügt haben, komme ich zurück und nehme es erneut auf. In Ordnung. Also, wie willst du die rote Linie draußen ziehen? Hmm. Denken Sie selbst darüber nach Machen Sie eine Pause und überlegen Sie, wie Sie das machen würden? Ordnung. Wie werde ich das machen? Werde ich es mit diesem Rahmen hier machen. Okay? Ich nenne es Field. Und ich werde es im Handumdrehen machen, also werde ich das Feld hier einfach in die Länge ziehen. Okay, es ist jetzt also außerhalb meiner Hauptkomponente. Hat damit nichts zu tun. Ich werde zwei davon machen. Wir werden einen Commander haben, dieser wird Feldzeit sein. Dieser wird die Standardeinstellung sein. Das ist der, den wir haben. Lass uns jetzt diesen machen. Ich werde nur den Strich ändern, ihn groß rot machen. Ich will mir diesen schnappen. Was ich tun möchte, ist, sie beide zu Komponenten zu machen . Mehrere Komponenten. Separate. Okay? Zu diesem werde ich hier wieder wechseln. Das kannst du hier sehen, es ist nur ein Rahmen. Im Moment werde ich kopieren gehen. Wir werden das süße Tastenkürzel Shift R oder Control-Shift benutzen , um es umzuschalten. Nun, es ist nicht nur ein Frame, es ist ein Beispiel dafür. Aber weil es eine Instanz gibt, kann ich jetzt zu dieser Hauptkomponente gehen und sagen, einen sofortigen Tausch hinzufügen. Wie mache ich das? Unter Eigenschaften hier werde ich auf das kleine Plus klicken und sagen , dass ich sofort tauschen möchte. Ich möchte da rein gehen und zuerst die Instanz auswählen , okay? Dann gehen wir hier rein und sagen, das ist das Standardfeld, ich möchte hier Instant Swap und ich möchte sagen , aus welchen Sie nur aus Feldstandard und Feldfehler wählen können . Das ist es. Hoffentlich kannst du das jetzt auf Fehler umstellen. Oh Mann, sieh dir an, wie gut das ist. Wir haben genau dieses Ding hier. Wir mussten ein paar zusätzliche Hauptkomponenten haben , die wir jetzt löschen konnten, weil sich dort eine Instanz versteckt. Halte durch. Nein, das kannst du nicht. Ich bin aus der Zukunft zurückgekommen. Sie können diese Hauptkomponenten nicht löschen , hauptsächlich weil ich diese wiederherstellen kann. Okay. Kommt zurück, da ist er. Wo ist mein Fehler eins? Ich kann es nicht finden, um es zu bekommen, es sei denn, es wurde irgendwo benutzt. Okay, und es wurde nirgends benutzt, also ist es quasi für immer weg. Also mache ich einiges rückgängig und gehe zurück. Du wartest dort. In Ordnung, wir sind zurück Also lass uns sie nicht löschen. Das ist sowieso keine gute Praxis. Wir werden sie nur verstecken, damit wir sie nicht sehen können. Bitteschön, du wirst da drüben sein. Aber immer noch ziemlich aufgeräumt, oder? Ich habe eine Hauptkomponente, die viel Arbeit macht, also sind unsere Instanzen wirklich einfach zu erstellen und anzupassen, aber noch besser, es ist für die Leute, die unsere tolle Komponente verwenden werden, hat dieses schöne süße kleine Panel hier ein- es ist für die Leute, die unsere tolle Komponente verwenden werden , hat dieses schöne süße kleine Panel hier auszuschalten. In Ordnung, das ist es. Wir haben ein paar Eigenschaften von Komponenten miteinander verknüpft. Wir haben uns Instant Swaps angesehen. Wir haben das für den hinteren Teil des Feldes gemacht, mit der roten Linie außen Wir haben auch Text und das Goldbarren gemacht , um die Dinge ein- und auszuschalten Ordnung, das ist es. Wir sehen uns im nächsten Video. 74. Kombiniere Varianten mit Komponenteneigenschaften in Figma: Hallo alle zusammen. Hey, in diesem Abschnitt haben wir bisher viel gelernt, gelernt und sogar viel über Komponenteneigenschaften gelernt Wir haben uns Boolean und Text angesehen und sie sind alle großartig und sie ersparen uns so viel Arbeit, wenn es darum geht, unsere Komponenten zu erstellen Es gibt jedoch Einschränkungen. Sie werden also am Ende beide Komponenteneigenschaften zusammen mit der Varianz kombinieren beide Komponenteneigenschaften zusammen , von der wir wissen und lieben , dass Komponenteneigenschaften nur einige Dinge sind, die Komponenteneigenschaften nicht können, zumindest noch nicht Dinge wie Farbänderungen, vor allem, wenn du Interaktionen wie das Bewegen der Maus auf eine Schaltfläche hinzufügen möchtest Interaktionen wie das Bewegen der Maus auf eine , wie wir es hier machen werden Größenänderungen können vorgenommen werden. Das Aussuchen neuer Farben kann gehackt werden, um das zu erledigen, aber es ist wahrscheinlich einfach, eine Variante zu verwenden Das, was wir jetzt tun werden, ist ein Beispiel aus der Praxis, wie Komponenteneigenschaften mit traditionelleren Varianten kombiniert werden, um dieses Ding zu erstellen Okay, es ist viel los. Es kann so viel tun. Gekauft wurde immer noch eine recht geringe Menge im Komponentenset. Ordnung, lassen Sie uns eintauchen. Okay, zunächst habe ich etwas, das wie ein Knopf aussieht. Ich nenne es Button Main. Es ist ein automatisches Layout und hier ist eine Instanz eines Symbols enthalten. Es wird in eine Komponente umgewandelt und wir erstellen eine Variante dafür. Irgendwie vermischt sich das jetzt mit all dem, okay, damit ich für eines von ihnen eine neue Varianteneigenschaft erstellen kann Okay, die zweite Variante wird kalt sein. Hallo, benennen Sie die Immobilie in Bundesstaat um. Okay, wir haben also eine Standardeinstellung, Standardstatus und einen Schwebezustand Bei diesem hier werde ich den Befehl ausführen und auf den Hintergrund klicken. Okay, damit ich zur Füllung kommen kann, mach sie einfach etwas dunkler. Da haben wir's. Also eines der Dinge, die Component Properties nicht tun können, ist Richtungswechsel, okay, also wenn ich mit der Maus darüber fahre, möchte ich, dass es seine Farbe ändert Das können wir mit Component Properties nicht tun. Also werden wir es mit Varianten machen. Also schiebe E, nehmen wir an, du gehst zu ihrem onClick Know, während du mit der Maus fährst, wechselst in den Schwebezustand Und lass es uns machen. Auflösen. In Ordnung, Vorschau Und wir haben meine kleine Vorschau hier oben. Eines der Probleme im Moment mit Staaten , die ziemlich neu sind und sie erlauben es nicht, Flows zu haben , um hier eine Vorschau zu sehen, Sie benötigen immer noch einen Rahmen Also werde ich alles , was meine Art von Komponenten betrifft, dort aufbewahren . Und ich drücke trotzdem die F-Taste und wähle ein Telefon aus. Und ich werde hier ein Beispiel dafür geben. Also Shift Ich werde die Hauptbereiche Button und Button eingeben . Jetzt sollte ich in der Lage sein, dort einen Flow zu starten. Schau es dir an, leg es hier zusammen mit all meinen anderen Sachen hin. Geh. Da ist mein Knopf. Wenn ich den Mauszeiger darüber bewege, los geht's. Diese Interaktion muss mit einer Variante erfolgen. Was muss mit einer Variante in Größe noch gemacht werden ? Etwas, das wir nicht tun können. Also, was wir tun, ist, dass wir draußen bleiben zwei weitere Varianzen machen Okay, eigentlich dupliziere ich die, die ich habe. Also werde ich dich und dich ausziehen. Und ich werde beide duplizieren, diese beiden hier und das Design, ich werde einfach das ändern, ich werde gehen, ich weiß nicht, plus acht Pixel und vielleicht Plus für diese werden meine großen Knöpfe sein. Lassen Sie uns das also zunächst abschließen. Die Tastenkombination ist verrückt wie Command Option Shift R. Soweit ich mich an die erinnere, ist sie Strg Alt Shift R. Okay. Aber es ist wahrscheinlich einfach, auf die Schaltfläche oben zu klicken. Ja, dieser hier. Das ist irgendwie so, dass die Komponenten so eingestellt werden, dass sie sie mit den Komponenten umgeben an denen die ausgewählten Deckel diese Eigenschaft meiner Variante erzeugen, okay? Dieser wird Größe heißen. Und die Standardeinstellung, in Ordnung. Ich schnappe mir diese beiden und sage, dass du so groß bist wie die beiden hier. Standardgröße. Perfekt. Also hier drüben habe ich jetzt eine ah, Button-Instanz, die zwei Varianten hat. Wann ist der Staat? M1 ist die Größe. Okay? Ich habe diese Staaten zu diesen beiden nicht aktualisiert. Und U2 sind ein Zustand von dir, eine Notiz, du bist Standard und du bist ein Zustand von ganz Java Wir gehen. Hier drüben haben wir Sie und wir haben den Status Hover and Default Ich werde den Staat nicht ändern. Ich möchte die Standardeinstellung auf die große ändern. In Ordnung, alles funktioniert perfekt. Lass mich einfach eine Sekundärfarbe erstellen, ich mache es im Speed-Modus, damit wir zu dem guten Punkt kommen, komisch zu sein. Anschließend fügen wir die Eigenschaften einer Komponente hinzu. Okay, also da, ja, eine andere Sache, die wir als Varianz machen müssen , ist eine große Farbänderung wie In Ordnung, also schauen wir uns unseren Button an. Wir haben Größe, guter Standard, Farben, Sekundär- oder Standardfarbe, Tolle, reguläre, alte Variante. Okay, wenn es also Größenänderungen und Farbänderungen gibt und wenn Sie Interaktionen hinzufügen möchten, werden weiterhin Varianten verwendet. Schlecht. Was am Ende passiert, ist, , schnell hinzufügen dass ich die Version, der alle Pluspunkte fehlen Du wartest da. Hier kommen die Eigenschaften der Komponenten ins Spiel. Ich habe eine Variante hinzugefügt , die kein Symbol hat. Es hat sich verdoppelt. Was ich hier oben hatte, mir irgendwie die Knöpfe rausgeholt Es funktioniert absolut hier. Ich kann die Option wählen, die keinen Knopf hat, oder die Schaltfläche groß. Das wird ziemlich kompliziert, also werde ich es rückgängig machen und es mithilfe der Komponenteneigenschaften richtig machen. Okay, also was ich hier tun möchte, ist, dass Sie doppelklicken. Ich schnappe mir mein Symbol, nicht den Vektor auf der Innenseite. Ich schnappe mir den Wrapper, den ich für meine Instanz verwende. Ich werde sagen, dass Sie tatsächlich versucht haben, das richtige Symbol auf den richtigen Ebenen zu finden. In diesem Fall ist es eine Unterschicht. Ich möchte das Symbol anzeigen. Ich wollte nur das Symbol zeigen. Los geht's. Und ich werde es jetzt auf alle anwenden. Hier war der Trick vorhin. Wenn ich also doppelklicke, um mir das zu holen, kannst du sehen, dass ich sie alle auswählen und „Bewerben“ sagen kann , weil ich es schon geschafft habe. Ich kann es einfach einschalten. Ordnung, jetzt musste ich das ganze Set nicht duplizieren Ich kann hier rübergehen und sagen, dass das Symbol tatsächlich ein- und ausgeschaltet ist. Kannst du die Macht davon sehen? Nun, Button ist ein gutes Beispiel für mich, um die Interaktionen mit dem Mauszeiger zu zeigen, und die verschiedenen Größen, in denen Komponenteneigenschaften vorkommen eher mit Dingen wie Karten zu tun , die wir gemacht haben Wenn wir viele Versionen davon haben müssten, könnte das schwierig sein, besonders wenn man Dinge nur ein- und ausschaltet. Und wie wir schon früher gesehen haben, als wir hier alle Felder bearbeiten, nun ja, es gibt viele Dinge, die ein- und ausgeschaltet werden müssen. Symbole, die ein- und ausgeschaltet werden sollen. Fantastisch. Okay, nur um es zu vervollständigen, bevor wir gehen, ist wahrscheinlich, dass ich dich schnappen will, schnapp dir all diese, indem ich auf die kleine Ziel-Suchebene klicke Und ich sage, ich füge eine neue hinzu , auf der Text anzeigen steht. Es wird wahr sein. Und das bedeutet ich jetzt auf dieser Schaltfläche sagen kann, dass ich den Text ein- und ausschalten kann. Das Gleiche gilt für das Symbol. Eigentlich haben wir das Icon schon ausgeschaltet. Was ich aber wahrscheinlich mit dem Symbol machen möchte, ist eine Möglichkeit, zwischen verschiedenen Symbolen zu wechseln. Es unterscheidet sich also von der ersten Ebene, auf der wir das Symbol angezeigt haben. Wir werden es hier finden. Da ist meine Instanz, ich habe eine Instanz. Ich möchte das kleine Symbol dort finden. Und ich werde den Instance Swap machen. Und es wird dieser sein , der mein Standardwert sein wird. Ich werde einige bevorzugte hinzufügen. Okay, ich werde dies und das sagen und vielleicht das. Hervorragend. Auch hier musste ich es nicht duplizieren, besonders wenn ich Icons erhalte. Sie mussten nicht zehn weitere Sätze davon erstellen, um ein wenig unterschiedliche Symbole zu haben und sie dann alle auszuschalten. Noch ein Set. Mann, es wird groß. Jetzt kann ich dir Instance sagen, diese hier. So aufgeräumt. Lass uns das letzte bisschen Aufräumen machen. Zwei weitere Bits sind der Text. Ich möchte wahrscheinlich den Inhalt unterteilen. Denken Sie daran, ich möchte, dass es hier editierbar ist, was mir immer mehr ans Herz wächst Okay, primärer Text-Button, großartig. Das bedeutet, dass Leute, die die Instanz meiner anderen Teammitglieder verwenden die die Instanz meiner anderen Teammitglieder den Text hier durchgehen und ändern können , um sich anzumelden Und zu guter Letzt, aber ein Aufräumen bringt das wahrscheinlich in eine Art Ordnung Wir tun dies, indem wir die Hauptkomponente K oder den Komponentensatz verwenden. Und die können wir herumschleppen. Wir können also sagen, dass der Text wahrscheinlich am wichtigsten sein wird und wir können ihn nach oben ziehen. An diesen Varianten kann es nicht vorbeigehen. Aber oben auf dieser Liste wird das Symbol ein- und ausgeschaltet. Lassen Sie uns den angezeigten Text wahrscheinlich hinter diesen setzen , da Wahrscheinlichkeit geringer ist , dass das Symbol anzeigen verwendet wird. Ja. Und dann wähle die Instanz aus, die dir richtig erscheint. Was den Staat angeht, brauche ich das an der Spitze wahrscheinlich nicht. Ich brauche diesen Staat dort, weil ich die Interaktion brauche. Aber es ist nicht etwas , das sich ändern wird. Ich denke nicht, dass Größe und Farbe wahrscheinlich Farbe, Größe, Zustand haben, wie ich denke, das sollte aussehen, um mein Projekt verwenden zu können. Welche Farbe wollen sie, welche Größen muss sie haben. Der Text, der darin enthalten sein wird. Vielleicht sollte show it takes oben stehen. Brauche ich das Symbol oder nicht, um das Symbol zu beeinflussen, okay, das ist eine Kombinationsvarianz gemischt mit Komponenteneigenschaften Und was haben wir gerettet? Wir haben das, was immer noch ziemlich viel ist, aber vor allem mit diesen Icons. Und ich brauchte für sie, idealerweise für mehr Sätze dieser Duplikate, Duplikate, Duplikate, um all die verschiedenen Symbole und die verschiedenen Größen und verschiedenen Hover-Status anzuzeigen . Batman. In Ordnung, das ist ein bisschen durcheinander, ein bisschen mehr ein Projekt aus der realen Welt In Ordnung, wir sehen uns im nächsten Video. 75. Anwenden von Bauteileigenschaften auf bestehende Designsysteme: Hallo zusammen. Hey, wir haben hier ein bestehendes Design-Button-System. Es wurde zu einer Zeit vor Figma gebaut. Hey Komponenteneigenschaften. Und sie werden oft zusammen mit deinen eigenen existierenden Arbeiten oder Dokumenten aus der Community sein. Wir wollen das durchgehen und sagen, ich möchte es zusammenfassen und Komponenteneigenschaften verwenden. Und es ermöglicht uns irgendwie, so etwas zu machen , wo wir statt dieser vielen Knöpfe diesen Mini brauchen, der sowohl für uns praktisch ist, um für die Leute, die unsere Knöpfe benutzen, als auch für das Team zu organisieren Leute, die unsere Knöpfe benutzen, als auch für das Team Aber das Video ist wirklich so, ich möchte Ihnen die Art von Abkürzungen zeigen um diese Aktualisierungen schnell in großen Mengen vornehmen zu können Bisher haben wir sie jedoch gebaut, während wir an einzelnen Teilen gearbeitet haben. Also Massenänderungen, Massenaktualisierungen und ein gutes Beispiel für die Aktualisierung früherer Dateien in ein neueres, schickeres Format Ordnung, lass uns abwerfen, okay , wir werden daran arbeiten es von der Community zu bekommen Wenn Sie in der Figma-Community nach der Schaltfläche Material Design suchen , Edward wahrscheinlich hierher ziehen und Sie werden hierher gelangen. Danke Merv, Gorilla und öffne es in Figma. Wenn du es nicht finden kannst, hinterlasse ich unten in den Klassenprojekten einen Link . Dort gibt es einen Link dazu. Direkt. Öffnen Sie eine Version für sich selbst und wir werden sehen, wie wir einige der Abkürzungen reduzieren können einige der Abkürzungen um dies einfacher und weniger schmerzhaft zu machen In Ordnung, also lass uns zur Seite mit den Button-Varianten gehen. Und wir werden versuchen an dieser ganzen Sache zu arbeiten, sodass wir eine Weile dabei sein werden Die Neukonfiguration eines bestehenden Designsystems nimmt etwas Zeit Neukonfiguration eines bestehenden Designsystems Was wir tun werden, ist diesen Teil in Angriff zu nehmen und ich zeige Ihnen einige der Abkürzungen Wenn Sie es selbst in Angriff nehmen müssen, ist daran nichts auszusetzen. Es ist einfach ziemlich groß. Ich wähle dieses, weil es linke und rechte Symbole hat, was ein gutes Beispiel sein wird. Und was ich tun werde, ist, weil dies ein bestehendes Designsystem ist ein bestehendes Designsystem , das andere Leute vielleicht verwenden. Vielleicht lasse ich das einfach stehen und mache dann eine andere Version. Also halte ich die Optionstaste Alt auf einem PC gedrückt. Um das zu vergessen, es könnte sich in einer gemeinsam genutzten Bibliothek befinden. Ich will mich nicht damit anlegen. Was ich tun werde, ist das Grundstück hoffentlich zu kürzen. Eigentlich werden sie hier drüben platziert, sodass wir alle erstaunt sein können , wie viel wir gespart haben. Also sollten wir diese nicht brauchen, oder? Ich brauche nur eine Version. Und was ich wahrscheinlich tun muss, ist beide Pfeile hinzuzufügen , sodass ich leicht keine haben kann, Rechtspfeil und Linkspfeil, indem ich unseren booleschen Schalter verwende Im Moment sind das alles Instanzen, ich werde sie mit der Befehls-Option B oder Strg-Alt B auseinandernehmen . Jetzt, wo sie einfach automatisch in eine Komponente aufgeteilt werden, öffnen Sie sie nicht Das macht jeder. Befehl. Shift K bringt ein Bild, wo ich Befehlsoption K haben möchte Und das ist auch nicht das, was ich will. Ich wollte euch allen sagen, ich wollte euch zu einem Baukasten machen. Wir könnten mehrere Komponenten erstellen und sie dann als Variable kombinieren sie dann als Variable , wodurch die Komponenten für Sie eingerichtet werden. Ich mache das einfach rückgängig und mache direkt Komponenten mit einer Reihe von Variablen darin. In Ordnung, ich sehe es mir an. Also, was ich machen will, ist ein bisschen kopieren und einfügen Lass mich dir einen Strich zeigen. Das liegt daran, dass ich diesen Rechts- und Linkspfeil brauche, um nach innen zu zeigen, dieser hier Okay, also ich drücke die Eingabetaste, um das Elternteil einzutauchen, und drücke auf Einfügen. Und dann kann ich mit meinem Linkspfeil irgendwie zwischen den Geschwistern hin- und herschalten Jetzt möchte ich, für sie alle, was ich wahrscheinlich tun werde, ist gehen. Wenn du auf Aus klickst, klicke ich einmal und drücke die Eingabetaste, und das wählt alle Geschwister Ich werde es kopieren. Das Gleiche gilt für diesen. Geben Sie auf meiner Tastatur ein, wählen Sie alle gelöschten Geschwister aus, klicken Sie erneut darauf und drücken Sie Einfügen. Und das werde ich für all diese tun. Ich mache es im Speed-Modus. Du wiegst sie. Ordnung, ich habe das Gefühl, dass es einen schnelleren Weg gab , das zu tun Lass es mich in den Kommentaren wissen, wenn du willst, Hey, wenn du es einfach so machst, schauen alle anderen da unten nach, um zu sagen, ob es eine bessere Art gibt , das in Serie zu produzieren Okay, wir haben alles da reingeworfen. Jetzt wollen wir all unsere verschiedenen Komponenteneigenschaften hinzufügen . Und was wir jetzt tun werden, ist, sie nicht einzeln zu machen. Wir sind reingegangen und haben das gefunden und die Ebene gefunden und gesagt, okay, auf der Ebene werde ich einen booleschen Wert haben, wo ich an und aus sage Was wir tun können, ist, uns das Komponentenset zu schnappen, okay, und es einfach damit machen Wir werden alles auf einmal hinzufügen und dann durchgehen und bearbeiten. Was brauchen wir also? Wir brauchen ein paar Dinge. Einige Immobilien hier. Wenn Sie nun das Ganze ausgewählt haben, haben Sie die Gerechtigkeit, eine Eigenschaften-Optionsebene hat sie nicht speziell. Was wir also tun können, ist zu sagen, lass uns Boolean verwenden. Okay, dieser wird Icon Lift heißen. Ich nehme noch einen. Das wird eine Ikone sein, oder? Weil ich das für sie ein- und ausschalten möchte . Ich möchte wahrscheinlich etwas mit einem Text machen, der besagt, dass Text Button-Text sein wird. Das wende ich an. Drücken Sie nicht die Eingabetaste, sondern erstellen Sie eine Immobilie. Andere Dinge, die ich will, ich brauche schon eine Immobilie hier. Lass uns das bearbeiten und sagen, das wird mein Staat sein. Und ich will noch eine, die eine Variante sein wird. Denken Sie daran, bevor wir die Größe und Farbe des Landes berechnet haben. Also werden wir den benutzen. Wir werden eine Variante machen , die der Größe entspricht. In Ordnung, also lass uns gehen und es anwenden. Jetzt. Ich habe das, lass uns hier auf dieses klicken. Nutze unser süßes Ziel und sage, ich würde gerne den Instanzentausch anwenden. Ich habe keine weitere Instanz. Das könnten wir hinzufügen. Aber im Moment in diesem Dokument hier, weil eigentlich 12 und ich das nicht austauschen müssen . Ich muss nur ein- und ausschalten. Also nicht dieser. Ich suche die Ebene und sage, ich möchte, dass der boolesche Wert von ICANN links ein- und ausgeschaltet wird ich möchte, dass der boolesche Wert von ICANN links ein- und ausgeschaltet Kannst du sehen, dass du es irgendwie zu den Komponenten hinzugefügt hast, und jetzt können wir es durchgehen und einfach und schnell sagen, eigentlich will ich den, der stimmt Anstatt es unterwegs zu erstellen, schreiben Sie erneut eine SMS und klicken Sie darauf. Ich möchte, dass die Zecken einen Unterinhalt haben. Und weil wir es bereits geschafft haben, wird kein neues erstellt, wenn wir darauf klicken. Da steht, oh schau, es gibt schon einen. Du kannst ein neues machen. Aber da ist dieser. In Bezug auf die Größe Es sind diese hier. Eigentlich wird State Wise Standard sein. Das will ich. Dieser hier wird einen neuen Schwebewert haben Dieser hier wird einen neuen Wert von on click haben. Wenn du klickst, wird es irgendwie dunkel und es wird ein deaktiviertes oder inaktives angezeigt Fügen wir also einen weiteren Bundesstaat hinzu, und dieser wird aktiv sein. In Ordnung, als Nächstes wollen wir Größe. Also werden wir sagen, dass ihr alle die Standardgröße die Standardgröße Du wirst groß sein, groß für alle, sogar hören alles wird eine Größe sein, wenn du die Idee verstehst. Jetzt werde ich das etwas beschleunigen. In Ordnung, Shift I, ich habe meinen Knopf, ich ziehe ihn raus Und hoffentlich habe ich jetzt die verschiedenen Bundesstaaten, okay, ich habe generell die verschiedenen Größen , um hier mit der Reihenfolge der Ebenen herumzuspielen. Aber ich habe ein Icon links, ein Icon, oder? Und ich kann den Button-Text ändern. Wir sind von diesem Teil hier, okay, zu diesem hier übergegangen , der wirklich nett und aufgeräumt ist Und es ist eine nette Möglichkeit, bestehende Designsysteme aufzuräumen bestehende Designsysteme aufzuräumen , die Sie entweder von jemand anderem in der Community, von jemand anderem und Ihrem Team erhalten jemand anderem und Ihrem Team Und eines der wichtigsten Dinge, die wir tun können, ist, dass wir viele Dinge in großen Mengen erledigen können , indem wir sie einfach auf den Komponentensatz anwenden. Dann verwenden wir viele unserer schönen Abkürzungen, mit denen wir dieses kleine Ziel verwenden können, um sie alle auszuwählen und sie alle in großen Mengen anzuwenden Idealerweise fügen Sie Komponenteneigenschaften hinzu, während Sie sie erstellen. Aber es wird viel veraltetes Zeug geben. Sie wurden gerade gebaut, bevor dies ein Feature in Figma war. Los geht's, Sie aktualisieren ein bestehendes Designsystem und fügen Ihre Komponenteneigenschaften hinzu. In Ordnung, das ist es. Ich werde es im nächsten Video sehen. 76. Was ist Simplify Instances in Figma: In Ordnung, es besteht also aus zwei Teilen. Schauen wir uns die aktuellen Komponenteneigenschaften an. Sie wählen also eine beliebige Hauptkomponente aus. Es muss keine Variablen haben. Ich werde diesen hier nur verwenden, weil standardmäßig, wenn ich mir die Instanz dieser Schaltfläche ansehe, sehen Sie, dass der ganze Aufwand in die Komponenteneigenschaften gesteckt wird . Aber schauen Sie sich all diese anderen Dinge an, dass möglicherweise jemand, der meine Komponente verwendet, okay, der Rest des Teams, der Kunde, den ich entworfen habe, dieser ausländische Figma, okay, er hat Zugriff auf all diese Dinge will ich nicht. Was ich also tun kann, ist, zur Hauptkomponente zurückzukehren, zum Komponentennamen in Ihrem Eigenschafteninspektor zu gehen , einer heißt Button Main. Da ist es da. Und ich klicke auf die kleinen Einstellungen. Und da ist dieses Ding, Simplify All Instances. Und was es jetzt tut, ist, und ich sehe mir das an, kannst du sehen, dass all das Zeug unten die ganze Füllfarbe verloren hat, der Strich, der sich auf all das Zeug auswirkt , ist einfach aufgeräumt Bis dahin können sie es immer noch machen. Aber wir versuchen, es einfach zu bedienen und ich werde es ein- und ausschalten. Ich weiß nicht, wie ich es zurücksetzen soll. Das mache ich einfach. Okay. Und es ist wieder schön und sauber. Wir versuchen, die Leute darauf zu konzentrieren benutzen, wenn sie es benutzen. Nur Dinge, von denen ich gesagt habe, darfst du anpassen. Ich möchte nicht, dass Sie die Effekte bis zum Strich anpassen , ich möchte nur, dass Sie an diesen Dingen arbeiten, die ich in meinen Komponenteneigenschaften und Variablen beschrieben habe , das war's. Und fassen Sie bitte alles andere an. Und natürlich können sie das, wenn sie müssen. Das ist also der Properties Inspector. Schauen wir uns die andere Sache an, die es tut. Ich springe Seite runter zur nächsten Seite. Ich verwende hier diese Karte , die wir zuvor gemacht haben. Und dies ist das Beispiel dieser Karte , ohne dass ihr etwas hinzugefügt wurde. Siehst du, ich sehe den Text und den Preis da drüben in dieser Preisinstanz. Es gibt den Preis, es gibt die Early-Bird-Instanz. Da sind alle möglichen Sachen drin. Also passiert dasselbe. Schau dir das an. Wenn ich Hauptkomponente sage, suche ich den Namen hier , suche nach den Einstellungen oder der Konfiguration und sage Alle Instanzen vereinfachen. Das heißt, wenn ich das auswähle, kannst du sagen, dass es aufgeräumt aussieht, um es zusammenrollen zu Das heißt nur, dass es verhindert, dass die Leute überfordert werden. Wenn sie unser Junior-Designer und selbst wenn sie ein Senior UX Designer sind, und es könnte sein, dass es nur einen Hinweis darauf gibt, was geändert werden muss, wann nicht, okay, und was am Ende hier passiert, ist, dass du immer noch alle Ebenen sehen kannst, oder? Und manchmal sieht man einige Schichten, andere aber nicht. Warum ist das so? Es ist, du entscheidest als Ersteller der Hauptkomponente, du kannst entscheiden, welche Layers angezeigt werden, indem du ihnen Komponenteneigenschaften zuweist. Das haben wir zu Beginn des Kurses gemacht bevor wir uns mit den Eigenschaften von Komponenten vertraut gemacht haben. Aber nehmen wir an, wir wählen das aus, okay, schnappen wir uns alle und fügen wir unseren Text hinzu. Okay? Erstellen Sie eine Immobilie. Dieser wird Text to heißen. Warum ist es so, warum ist schon Text drin? Weil ich dieses Video neu aufgenommen habe und ich es aufnehmen musste und ich habe trotzdem vergessen , es zu löschen Also habe ich hier diese Texteigenschaft hinzugefügt , meine Komponenteneigenschaft, der Unterschied ist jetzt, wenn ich sage Du, mein Freund, vereinfache alle Instanzen. Okay, dieses Ding zeigt jetzt diese Ebene. Dann sollte ich an allen Ebenen arbeiten und sie ändern, aber nicht alle anderen Ebenen davor waren alle versteckt weil es für mich keinen Grund gab, da es keine gab, da es keine Komponenteneigenschaft gab. Ja. Und so macht es zwei Dinge. Dieses Ding hier, wirklich aufgeräumt, hat nicht die ganze Füllung und den ganzen Strich und all die Effekte wie zuvor Außerdem räumt es die Ebenen auf und zeigt Ihnen nur die Dinge , die als Komponenteneigenschaft festgelegt wurden . Beide hier. Da ist es, ich kann es hier ändern, oder ich kann es in Schichten ändern. Du gehst, wenn du sie nicht benutzen würdest. Ich würde sie nicht für mich selbst verwenden. Wahrscheinlich wird sogar mein zukünftiges Ich da reingehen und mich damit befassen wollen da reingehen und mich damit befassen und das hält niemanden wirklich auf. Aber wenn ich sichergehen wollte es für eine größere Gruppe einsatzbereit ist, sollte ich es auf jeden Fall einschalten. Okay, das ist Simplify Instances in Figma für das nächste Video 77. Was macht verschachtelte Expose Instances in Figma: Hallo alle zusammen. In diesem Video schauen wir uns etwas an , als Enthüllung verschachtelter Instanzen bezeichnet wird Was macht es? Ich erkläre es am Anfang hier ganz schnell. Dann machen wir schnell etwas. Okay, nimm dir etwa eine Minute Zeit, um es mit vorhandenen Sachen zu machen. Und dann werden in diesem Video für die Leute, die ein bisschen mehr Verständnis brauchen , etwas von Grund auf neu machen , was eine Weile dauern wird Aber was ist die einfache Antwort? Die einfache Antwort lautet: Ich habe zwei Komponenten. Dieser hier, ich habe eine Instanz davon hier hineingelegt, Da ist er da, dieser Text. Also stopfe ich das da rein und die Expose Nested Instances ausgeschaltet sind, okay, wenn ich eine Instanz davon mache, da ist er Instanz der Hauptkomponente. Wenn ich das übergeordnete Element ausgewählt habe, können Sie sehen, dass ich einige Dinge mit dem übergeordneten Element tun kann, aber ich kann nichts mit diesem Feld tun. Ticks, die drin sind, ich kann es nicht sehen, es sei denn, ich gehe, du gehst zu Eigenschaften und ich sage Nested Instances, zeige mir alles, was darin ist Ich habe nur eine Sache, für die du dich entscheidest. Wenn ich jetzt mit der Instanz arbeite, muss ich mich nicht mit diesem Text befassen. Ich sehe Feldzecken, da sind sie. Da. Ich kann gehen und es auf Tippen umstellen. Es leitet alles an das oberste Elternteil weiter, sodass Sie es ganz einfach kontrollieren können. Gehst du, sind wirklich langes Intro, aber so funktioniert es Wir machen noch einen. Habe ich gewonnen, wir bauen es von Grund auf für diejenigen, die es brauchen. In Ordnung, lass uns anfangen Okay, das funktioniert so, dass Sie es nur verwenden können , wenn es eine Nested Instance gibt Und diese verschachtelte Instanz benötigt eine Variante oder eine der Komponenteneigenschaften, booleschen Text, alle von denen, die wir Wir haben also schon einen, den wir zum Laufen bringen können, und dann machen wir zusammen einen , nur um wirklich zu Hause zu fahren. Aber ich habe diese Karte, die wir früher gemacht haben, in diesem Cadmium, aber wir haben sie darin verschachtelt Dieses Ding heißt Preis. Du kannst es dort sehen. Und das ist die Hauptkomponente. Das wird da drin stecken. Okay, also als verschachtelte Instanz darin, sind Komponenten, die hier nicht einmal Komponenten sein müssen , auch nur eine normale alte Komponente Und wenn diese Struktur etwas Nested funktioniert, können Sie auf das übergeordnete Element klicken Und du kannst hier unter Eigenschaften rübergehen, du kannst auf dieses Plus klicken und du wirst das sehen. Wenn darin nichts verschachtelt ist, wirst du es nicht sehen können Okay? Und du schaltest es einfach ein und du kannst entscheiden, wann das Äußere meiner Instanz, wie das übergeordnete, der Wrapper ausgewählt wird Warum zeigen Sie der Person nicht auch die Kontrolle über den Preis, okay? Denn was in der Vergangenheit passiert ist, um dorthin zu gelangen, klicken Sie darauf. Schauen wir uns zum Beispiel an, und es ist rüber gezogen. Sie können also hier sehen, es gibt Preis, bei dem ich den Preis abändern kann , und er kann mit einem Text über Aconex spielen . Es ist dieser Preis. Ich kann da rein und doppelklicken, reingehen, da ist es. Sie können doppelklicken oder die Befehlstaste drücken, um hineinzukommen, um die Instanz zu holen und sie für die Expose-Methode zu ändern. Es ist einfach netter. Lass uns gehen, lass uns auf dich klicken. Klicken Sie auf die kleinen Eigenschaften und unter all diesen verschwindet es auf magische Weise. Und lassen Sie uns das für den Preis zeigen. Okay, wenn jetzt jemand an meiner Instance arbeitet, muss er nicht gehen und er kann den Preis nach außen hin sehen . Kannst du alle Änderungen sehen, denn ich kann es auf horizontal und aus und horizontal ändern . Klick dann kannst du die Nested Instances sehen und unser Fall ist einfach variabel, okay? Aber Sie können alle Dinge sehen, die wir mit den Komponenteneigenschaften tun können. Es ist einfach praktisch, als sich einarbeiten zu müssen, vor allem in einigen wirklich chaotischen Dingen. Also lass uns noch einmal einen machen , weil wir zu etwas anderem übergegangen sind. Vielleicht brauchst du eine Auffrischung oder brauchst einfach ein bisschen Hilfe, lass uns einfach zusammen eine machen Wenn Ihnen das alles nett und absolut verständlich erscheint, können Sie zum nächsten Video springen. Aber für den Rest von uns springen wir mit Page up zu meiner Komponentenseite. Ich fange damit an. Nein, diesen haben wir vorhin gemacht. Sie können Ihre eigenen entwerfen. Ich werde ein Duplikat davon machen und es dann in Teile zerlegen. Denken Sie zu Beginn des Kurses daran , wie man etwas in Stücke glättet Was ich tun werde, ist, es gibt keine tolle Abkürzung dafür. Also werde ich den Befehl Vorwärts - oder Schrägstrich kontrollieren Und ich suche nach Detach, Detach Instance. Wir wissen, dass es eine Abkürzung gibt, aber ich möchte zu der gehen, die besagt, dass D, alle verschachtelten Instanzen anhängen, weil es eigentlich eine alle verschachtelten Instanzen anhängen ziemliche Hierarchie ist, die auf der ASE vor sich geht Da ist das, da ist auch das drin, was wir gemacht haben. Also möchte ich alles wieder glätten, um alle verschachtelten Instanzen zu trennen, verschachtelten Instanzen zu trennen, und alles Geben wir ihm einen Namen, denn ich habe zwei Eingabefelder. Das wird mein Eingabefeld v2 sein, das es in eine Komponente umwandeln wird. Fügen wir einige Eigenschaften hinzu. Sachen für hochrangige Eltern, und dann machen wir die tiefere Instanz Okay, lassen Sie uns ein paar Eigenschaften hinzufügen , sozusagen als Massenbearbeitung Also keine Varianten. Ich füge ein paar Booleans Dieser wird ein Etikett sein, egal ob es an oder aus ist. Ich möchte noch einen Boolean machen um zu sagen, ob die Hilfe von Text, Hilfetext aktiviert ist, oder ob es einfach helper heißt Lass uns die Zecken ändern. Dieser hier wird beschriftet und er wird das eigene Wertlabel haben Aber ich tendiere dazu, Text mit Bindestrich zu schreiben. Okay, das wird in mein kleines Zeckenfeld gelegt ? Noch eins. Wie wir darauf eingehen, ist dieses Gefühl einfacher, sind immer noch ziemlich verwirrend. Es ist gut, dass wir ein paar verschiedene machen können. Das wird also Text für den Helfer sein. Und das wird Helper-Text heißen. Ich exportiere Text nach vorne, sodass wenn ich mir diese Dinge ansehe , sagen wir, ich gehe hier in meinen Text, es so beschriften, denn wenn ich auf das übergeordnete Element klicke, können Sie sehen, dass beschriftete Texthelfer verwendet werden, wenn es umgekehrt ist und es schwierig ist, herauszufinden, wer gut abschneidet, lassen Sie uns sie auf Dinge anwenden Alles andere, was wir tun wollen, Mobbing und Texas, genug für den Modus Das Label benötigt also Inhalte, die mit Text bearbeitet werden. Etikett. Das Gleiche gilt mit Hilfe von Text. Dies wird dasselbe verwenden, aber es wird Takes Helper verwenden Damit ist es ausgewählt. Gehen wir zu unserer Ebene und schalten wir den booleschen Wert ein und aus, indem wir den Schalter und die Bezeichnung unter der Ebene verwenden . Gehen wir zu derselben Sache Lassen Sie uns also eine Instanz erstellen. Also Shift, ich tippe einfach v2 ein. In Ordnung, Schicht ist es. Und jetzt kann ich das Etikett an und aus sehen. Verschieben wir es hierher. Also bisher nur ein Zoom. Du an, aus, an, aus. Und ich kann nur den Labeltext. Und ich kann die Texthilfe anpassen. Das ist also ein Teil davon. Wie komme ich zum exponierten Teil? Dies könnte ein gutes Beispiel sein , wo ich möchte , dass dies geändert wird. Okay, also ich schneide das aus und füge es einfach hier drüben ein. Ich werde das als eigene Komponente machen, als Cold Sample Ticks, was eigentlich ziemlich gut ist. Ich werde es eigentlich nur in einen coolen It-Feldtext, Feld, Text umbenennen Feld, Text Es ist eine Variante davon zu machen. Und dieser hier, er wird so etwas wie ich möchte, dass wir es so umstellen können, dass es aussieht, als würde jemand tippen. Tippen. Das werde ich benutzen. Das würden wir charakterisieren. Ich bin mir nicht sicher, wie es heißt. The Big, der dich auf meiner Tastatur aufstellt, es ist der, es ist sowieso irgendwie mit dem Backslash verbunden , In was hat es dir gefallen Und ich werde die Schriftfarbe bei diesen beiden anpassen. Nennen wir sie besser. Ich habe also eine Eigenschaft von Text. Und die beiden verschiedenen Werte werden vielleicht nicht Standard sein , sondern Platzhalter Und dieser wird tippen. Ich benutze Tab, um sie alle irgendwie zu erreichen. Los geht's. Es hat diese beiden. Lass es uns reinlegen. Also werde ich Feldtext verwenden oder ist das Feld Text Veritas da Und lassen Sie es uns in meine Hauptkomponente einbauen. Es erscheint hier unten. Also dieses Ding hier hat seine eigenen Sachen im Gange. Hat zwei Varianten-Feld-Häkchen ist Text mit zwei verschiedenen Variablen. Diese haben jedoch für die Eltern ihre eigenen Sachen im Gange, die mit der Aufschrift „Hilf ihr“ beschriftet sind Es hat diese booleschen Werte und diese Textanpassungen. Und was ich jetzt tun kann, ist , dass das hier verschachtelt ist, ich kann sagen, dass ich tatsächlich eine Eigenschaft Nested Instances habe und Sie vielleicht nicht wollen, also sagen Sie vielleicht, ändern Sie das nicht oder ja, können diese in diesem Fall ändern Los geht's. In meinem Beispiel kann ich sehen, indem ich einfach auf das übergeordnete Objekt klicke, die Außenseite. Ich kann alles sehen, was ich brauche, um das Etikett umzudrehen , es tatsächlich wieder hierher zu verschieben. Ich muss so weit zoomen, das Etikett ein und aus, Helfer ein und aus Aber ich sehe hier auch, schau, da ist die Umstellung auf Tippen. Okay, nun Platzhalter Wir können das immer tun, indem wir einfach doppelklicken und da reingehen und es trotzdem sehen können Ich kann es also immer noch Platzhalter beibringen. Aber jetzt ist es einfach viel benutzerfreundlicher für mich und für jedes Team, für das ich es entwerfe. Ordnung, das ist das Offenlegen von Instanzen in Figma und dass meine Freunde für eine Weile Komponenten von Variablen sein werden , während wir Und du wirst es wahrscheinlich satt haben. Ich habe es ein bisschen satt. Es wird eine Stufe mit Komponenten und Variablen geben. Später im Kurs werden wir das tun, aber mehr. Aber vorerst, hart, tief durchatmen, Bettdecke eines Spaziergangs, bereit für das Klassenprojekt, Komponenten, Variablen, Komponenteneigenschaften, Instanzen Es sind alle super, super hilfreich und irgendwie einer der Hauptgründe, warum wir für den Kurs für Fortgeschrittene hier sind, aber tief durchatmen, es geht darum, für ein bisschen etwas anderes zu tun In Ordnung, wir sehen uns im nächsten Video. In Ordnung, eine letzte schnelle Sache. Ich habe das Video beendet und ich dachte, Mann, das ist zu wissen, dass ich dich nicht kannte. Warum ist das da? Wie würdest du diesen Stern dazu bringen, weiterzumachen, wenn die Leute anfangen, FirstName zu tippen, ist wirklich lang Leute anfangen, FirstName zu tippen, ist wirklich Warum ein Asterix-Move? Oh, ich möchte, dass du hier eine Pause einlegst und schaust, ob du es zum Laufen bekommst. In Ordnung. Hast du es angehalten? Okay, du gehst zurück zum Hauptthema. Okay. Sie wählen beide aus, was schwierig sein kann, und Sie werden herausgezoomt Also Dinge wie die beiden und ich werde mich einfach ändern. Okay. Und es ist irgendwie so, dass es in ein automatisches Layout umgewandelt wird. Okay, ich habe keinen Abstand zwischen meinem, den du vielleicht hast, und deinem. Okay, aber jetzt all die Instanzen, Hallo, Schau, du bist weitergegangen. Vielleicht Tage, da hast du's. Die Kommas wurden im nächsten Video wiederhergestellt. 78. Kursprojekt 09: Ein Button, um sie alle zu beherrschen: Hallo zusammen. Es ist Zeit für Klassenprojekte. Wir werden alle Komponenteneigenschaften integrieren, die wir in den vorherigen Videos gelernt haben. Und ich werde dich dazu bringen, einen Knopf zu machen um sie alle zu beherrschen, okay? Es wird dein Hauptbutton für deine App sein. Und ich lasse dich zwingen ein paar Dinge damit zu machen. Es ist ein wirklich gutes Beispiel für die Art von Schaltfläche, die Sie erstellen werden. Also im Grunde werde ich all das durchlesen, aber lassen Sie mich Ihnen zeigen dies eine kleinere Version davon ist. Er wollte kein bisschen komplexer sein. Aber im Grunde genommen gibt es solche Sachen , bei denen es einen Hauptknopf gibt, es gibt zwei verschiedene Farben, zwei verschiedene Größen. Es gibt ein Symbol auf der rechten Seite und hier drüben habe ich die Möglichkeit, sie anzupassen und sie alle auszuschalten , wenn ich mit meiner Instanz davon arbeite, einer Symbolinstanz mit viel Kontrolle. Also was musst du eigentlich tun? Also der Button-Text, ich möchte, dass Sie das Gebäude an- und ausschalten können und die Tics editierbar machen Ich werde nicht jeden einzelnen davon durchgehen, sondern ich gebe Ihnen zum Beispiel nur eine, wie in diesem Fall und Ihre Hauptkomponente oder in meinem Beispiel möchte ich den Text für den Booleschen Wert ein- und ausschalten können und den Text im Eigenschafteninspektor ändern Okay, mit dem Symbol dasselbe, ein- und ausschalten. Aber dieser hat einen Instanzentausch, an den wir uns erinnern müssen, bevor wir das durchgehen und daraus eine andere Instanz auswählen können , die verschiedenen Symbole aus dieser bevorzugten Liste. Und ich möchte, dass Sie sicherstellen, dass Sie auch die bevorzugte Liste verwenden , damit das funktioniert. Was sonst? Ich möchte, dass du Varianten hast. Er wird eine Standardgröße haben, eine kleine und eine große. Oft nur mit einer Polsterung gemacht. Möglicherweise müssen Sie auch die Schriftgröße anpassen. Und es wird drei Farben geben. Dieses Ding wird große Männer kriegen, Primarstufe, Sekundarstufe. Und wenn wir Gliederung verwenden, wäre das etwa so , wenn es eine Gliederungsversion davon gibt. Es wird Standard sein, eine kleine und eine große Version davon ebenfalls. Ich möchte, dass Sie sicherstellen, dass die Simplify Instances aktiviert sind. Wenn die Leute es also benutzen , um den Immobilieninspektor aufzuräumen, musst du vielleicht zu dem Video zurückkehren , um das herauszufinden Und der letzte ist so , als ob das alleine schon ein bisschen Arbeit sein wird. Wenn du ein Fan von Bestrafung bist. Und du willst wirklich einfach deine Fähigkeiten verbessern und etwas wirklich Abgeschlossenes machen , indem du die optionalen Zustände einfügst, okay, das ist Standard Habe unterdrückt, deaktiviert. Okay, das sind die, die Sie skizzieren hat seinen eigenen, Sie und Behinderte. Das ist optional, weil mir klar ist dass das alleine ein ziemlich großes Projekt wird. Und wenn Sie es tun, sorgen Sie dafür, dass die Interaktionen funktionieren, sodass Sie, wenn Sie eine Instanz davon haben, sie hier unten in der Vorschau ansehen können. Dass es funktioniert, Hover funktioniert. Wenn Sie darauf klicken, geht es zum Bundesstaat. Sie schauen, ob Sie das zu erledigen haben. Ich möchte einen Screenshot sehen. Das ist wahrscheinlich der einfachste Weg, einen Blick darauf zu Ich würde Ihre Hauptkomponente besorgen und sie schön anordnen, damit sie nicht wie ein Chaos aussieht . Und seien Sie in der Entwurfsansicht. Und mach einen Screenshot von all dem, damit ich alle Eigenschaften sowie die ganze Varianz hier sehen kann alle Eigenschaften sowie die ganze Varianz hier sehen , okay? Das wäre perfekt. Optional ist es toll, wenn du kannst. Ich weiß, dass es nicht jeder macht, aber es ist toll, ein Video zu sehen, in dem Sie sich diese Instanz hier ansehen. Keine Vorschau, aber einfach hier durchzugehen und es sieht gut aus. Ich schaffe es und es funktioniert alles. Da wäre der Qie Gei all diese Dinge mit einem kurzen Video machen Wenn Sie das tun, stellen Sie sicher, dass Sie es hochladen. Denken Sie daran, Vimeo, YouTube und Behance sind ein weiterer guter Ort. Und dann teile einfach den Link, auf dem du deinen Mega-Button zum Laufen bringst. Teile es auch in den sozialen Medien und verwende den Hashtag Figma Advanced, damit ich es überprüfen kann , falls du auf Probleme stößt, poste Und weil wir zwei Leute machen , die Arbeit anderer Leute kommentieren, wenn es nicht ich oder einer der TAs bin, hilft dir einer deiner Kommilitonen bei allen Problemen, die du vielleicht hattest Und wenn Sie es gefunden haben , während Sie es irgendwann herausgefunden haben, stellen Sie sicher, dass Sie jemand anderem helfen , der Probleme haben könnte. In Ordnung, ein Knopf, um sie alle zu beherrschen. Genieß die Frustration. Für einige wird es schwierig sein, wenn es für andere ist, aber geh rein und werde chaotisch, wenn du es schaffen kannst. Und ich sehe dich im nächsten Video. Oh, scheuen Sie sich nicht , sich auch eines der vorherigen Videos anzusehen. Okay. Sie sagte, Oh Mann, wie hat er das gemacht? Springt dorthin zurück. Alle Videos. Du kannst sie dir noch einmal ansehen. In Ordnung, das ist es Kommen wir zum nächsten Video. 79. Was sind einige Tipps und Tricks für die Schriftart in Figma: Hallo alle zusammen. In diesem Video werden wir all die schnellen Tastenkombinationen behandeln, Tipps und Tricks für den Umgang mit Schriftarten, Schriftstärke , Zeilenabstand, Buchstabenabstand, Dinge fett machen und einige hochwertige Abkürzungen durchstreichen , die nicht nur in Figma funktionieren, sondern auch in anderen Textverarbeitungen und Dingen, die ich täglich verwende Und ich denke, ich werde sie einfach in diesem einen Video hier zusammenfassen. Hoffentlich gibt es ein oder zwei, die Sie noch nie benutzt haben. Okay, lassen Sie uns gleich loslegen, es gibt viele Abkürzungen und ich werde sie alle in das Shortcut-Sheet gibt viele Abkürzungen und ich werde sie alle in eintragen, das Sie aus den Übungsdateien abrufen können Und um anzufangen, bin ich einfach zum Textfeld auf einer leeren Seite gekommen Textfeld auf einer leeren Seite Wählen wir den gesamten Text aus. Und meine erste und beliebteste ist, wenn Sie auf einem Mac die Befehlstaste und die Wahltaste gedrückt halten , Strg-Alt auf einem PC , es gibt zwei Tasten, halten Sie sie gedrückt und dann suchen Sie nach den Tasten größer als und kleiner als. Der Redakteur wird sie hier auf den Bildschirm spülen, okay, da sind die ganz normal neben der englischen Tastatur von M Kiana, oft mit einem Kommentar in dem Punkt verbunden, okay, und wenn du so nach links und rechts gehst , was macht das? Kannst du hier drüben sehen, dass es sich durch die verschiedenen Gewichte verschiebt. Ich liebe es, weil es sonst dieses Fondsspiel gibt, bei dem es um Clicky Click, Click the Not Quit Click geht dieses Fondsspiel gibt, bei dem es um Clicky Click, . Fantastisch. sind. Halten Sie einfach die Wahltaste auf einem Mac gedrückt, die Alt-Taste auf einem PC und verwenden Sie größer als und kleiner als, um Alt auf einem PC und verwende die Taste Größer als und kleiner als, dieselbe Taste größer als und kleiner als In Ordnung, das ist Command Option auf einem Mac, Strg Alt auf einem PC und verwende die Taste Größer als und kleiner als, dieselbe Taste größer als und kleiner als, wenn alle Häkchen ausgewählt Halten Sie einfach die Wahltaste auf einem Mac gedrückt, die den Buchstabenabstand zu erweitern und mit ihm herumzuspielen Meins wurde gemischt, weil ich vorher damit herumgespielt habe, aber sie sind alle rein und raus ausgewählt. Gute Sache mit dem da drüben. Und viele dieser Texturschnitte funktionieren in allen Typografieprogrammen, Word, Illustrator, InDesign und allen möglichen Dingen Sie können einzelne machen. Lass deinen Cursor hier einfach blinken. Halten Sie die Wahltaste auf einem Mac Alt-Taste auf einem PC gedrückt und verwenden Sie die Taste größer als und kleiner als. Und dann kannst du mit bestimmten Buchstabenabständen arbeiten, nicht mit der ganzen Sache. Vielleicht Würfel. In Ordnung, geben wir einen zurückkehrenden Typ etwas ein. Denn was wir tun können, ist, das alles durchzuziehen und die Zeilenhöhe automatisch anzupassen, indem auf einem PC Wahltaste oder Alt Shift Und dieselben, größer als und kleiner als, sie tun eine Menge für uns. Eine schöne Schriftgröße kann ebenfalls vorgenommen werden. Das ist Command Shift und dasselbe ist größer als und kleiner als. Sie können sehen, wie meine Schriftgröße steigt und fällt. So gut. Manchmal möchte man Zecken skalieren und sucht nur nach einer Größe, aber man weiß nicht, was es ist, und es , diese Abkürzung zu durchqueren kann mühsam sein, diese Abkürzung zu durchqueren, da man sie manchmal einfach vergrößern möchte Als ob es es nicht skaliert. Wenn Sie die K-Tastenkombination drücken, um diese Option hier nach oben zu skalieren , anstatt sie maßstabsgetreu zu bewegen , können Sie sie ziehen. Ich mache das oft, wenn ich versuche herauszufinden, wie Ketzer und irgendwie wie großer Displaytext Ich weiß nicht, wie groß es sein muss. Ich mache ein bisschen davon. Dann gehe ich vielleicht hier rein und springe zurück zu V für mein Auswahltool und frage mich, was ist in der Nähe? Es steckt irgendwie zwischen den Größen fest? Werden es 32, 24, beide und Onkel arbeiten, werde ich am Ende 28 achteinhalb machen Aber ich benutze das K-Tool, um mich dem näher zu bringen, wo ich sein möchte Andere nützliche Abkürzungen sind nur die grundlegenden Typografie-Tastenkombinationen , die ich ständig verwende Befehl I ist kursiv geschrieben. Mit Befehl B wird aus einem normalen Text zwischen normal und fett umgeschaltet Strikethrough ist ein weiteres, das ich ziemlich oft benutze. Es ist Command Shift X oder Control Shift X. Auf einem PC bin ich nackt für Linien, Listen und Aufzählungspunkte. Und die andere ist wieder Command Shift, aber geben Sie acht auf Ihrer Tastatur ein, okay, das ist Strg-Umschalttaste acht, wieder dieselben Tastenkombinationen, aber sieben geht irgendwie zwischen Aufzählungspunkten in Zahlen Acht sind also Kugeln, sieben sind Zahlen. Es gibt noch andere. Ich benutze sie nicht sehr oft, also gehe ich davon aus, dass sie niemand benutzt, was wahrscheinlich falsch ist, aber du findest sie unter, oben, unter hier, unter dem F, unter Texten Sie können diese hier sehen. Also Link erstellen. Ich benutze auch ziemlich viel. Aber was einige davon angeht, weiß ich es nicht. Einige davon richten den Text nach links aus. Ich erinnere mich nie. Ich sollte mir den Text in der Mitte ausrichten merken. Ich füge diese beiden hinzu, in meinem Fall die Tastenkombinationen, Optionsbefehle R und L machen links und rechts irgendwie Sinn T for sündigen Sie in Ihrer Arbeitsweise, könnten einige dieser anderen nützlich sein. Aber das Coole an all diesen ist, dass es in Word funktioniert, es funktioniert in Google Docs, funktioniert in Illustrator und InDesign oder Photoshop oder den gleichen Tastenkombinationen, Ein letzter kleiner Tipp und Trick ist neu für Figma, ich habe ihn irgendwie schon einmal gesehen, aber lassen Sie uns zusammenfügen Es gibt jetzt ein Suchen und Ersetzen für den Typ. Sie waren bis vor kurzem nie wach. Wenn Sie also ein Benutzer der alten Schule sind und dies neu ist, können Sie Suchen und Ersetzen für Text ausführen. Du wirst das Wort Figma finden und es durch Dan ersetzen. Ersetzen Alles er tut, außer wenn er kleine Abstände, Optionen oder Alt größer als, kleiner als macht, was es etwas besser macht Ordnung, das sind einige der Abkürzungen, die ich ständig verwende , die ein wenig überwältigend sein können Drucken Sie also das Shortcut Sheet aus und nehmen Sie jeden Tag ein oder zwei in Angriff. Schau, welche hängen bleiben. In Ordnung, das ist es Ich werde es im nächsten Video sehen 80. So siehst du Live-Font-Vorschauen in Figma: Hallo alle zusammen. Willkommen in der aufregenden Welt von Truncation Okay, was ist Kürzung? Das heißt, wenn ich ein Textfeld in einem automatischen Layout habe ein Textfeld in einem automatischen Layout mein älteres Allow zu klein wird, es einfach ausgeschaltet. Ordnung, wir können den Überlauf einstellen, aber das ist nicht wirklich das, was ich will Was ich machen will, ist Folgendes: Schau dir das an. Es wird kleiner, kleiner, kleiner. Schau dir diese drei gepunkteten Linien an. Okay, der Text ist also gekürzt. Es ist wirklich praktisch. Wir können eine maximale Anzahl von Zeilen festlegen. Wir können das Autolayout die Größe bestimmen lassen und es fügt automatisch den kleinen Punkt-Punkt-Punkt hinzu, was bedeutet, dass in diesem Textfeld mehr Texte angezeigt diesem Textfeld Verkürzt ist das Wort. Lassen Sie mich Ihnen zeigen, wie es geht, gleich um loszulegen, ich habe ein Textfeld, das war's Daran ist sonst nichts Besonderes. Und was ich tun kann, ist , wenn es ausgewählt ist, zu meinen erweiterten Texteinstellungen zu wechseln und abgeschnittenen Text zu aktivieren Da ist ein kleines Punkt-Punkt-Ding. Okay? Und manchmal passiert nichts, weil du es tatsächlich kleiner machen musst, dann wird es gekürzt. Es gibt eine weitere Option für das Abschneiden, das ist der Punkt-Punkt-Punkt Eher rot sein. Sie können etwas schicker werden, wenn Sie das Textfeld anstelle dieser festen Höhe oder festen Größe festlegen anstelle dieser festen Höhe oder festen Größe Gehen Sie zu diesem anderen hier, das ist seine automatische Okay, das Coole an der Auftragshöhe ist, dass die Kürzung ausgeschaltet ist. Es dehnt sich aus und zieht je nachdem, wie groß die Zecken sind, in denen es sich befindet. Okay, es ist also ein guter Ort , um für alles anzuhalten. Aber was passieren kann, ist, wenn es sich um die automatische Höhe handelt, können wir hier zu diesen Einstellungen wechseln und jetzt haben wir diese Kürzung aktiviert. Vielen Dank, und Sie haben die maximale Zeilenanzahl, okay, aber Sie müssen die Auftragshöhe aktiviert haben. Und ich kann eigentlich sagen, ich will nur drei Zeilen. Ich möchte es nicht in die Länge ziehen, wenn es immer maximal drei Zeilen sind. Da hast du's. Lassen Sie uns mit einem automatischen Layout etwas Schickeres machen. Also habe ich mein Textfeld ausgewählt, nichts Besonderes daran. Ich werde a verschieben, um es zu einem automatischen Layout zu machen. Lass uns einen kurzen Film machen. Wenn ich nun den Text darin , okay, perfekt gekürzt mache , kann die nächste Zeile so viele enthalten, wie nötig Okay. Ich möchte, dass die Größe der Box dafür angepasst wird Sie sehen, dass es nicht ganz funktioniert. Ich möchte, dass es gekürzt wird. Was ich also tun muss, ist, dass Abkürzungen aktiviert sind. Aber ich muss dieses Textfeld hier angeben. Ich möchte, dass du nicht fixiert bist und den Inhalt umarmst. Ich möchte, dass du sagst, fülle den Behälter, Galiläa den Außenbehälter Okay, also mein umgekehrter Schrägstrich, um auf die Eltern zu klicken. Und jetzt sollte es mehr coole Autolayout-Dinge machen coole Autolayout-Dinge Du gehst. Das ist Abschneiden von Text, lustiges Wort Und die Sache, an die Sie denken sollten, ist, dass wir eine feste Größe haben, wenn Sie nicht die maximale Zeilenanzahl haben. Wir müssen auf automatischer Höhe sein und es dann einschalten. Und diese L-Max-Linien, okay, abgeschnitten, wir sehen uns im nächsten Video 81. Wie man Schriftarten zurücksetzt und Standardschriftarten in Figma festlegt: Hallo zusammen. In diesem Video werden wir zwei Dinge tun. Wir werden die Schrift für diese Figma-Benutzer auf die Werkseinstellungen zurücksetzen Figma-Benutzer auf die Werkseinstellungen Und außerdem zeige ich Ihnen enttäuschenderweise, dass Sie nicht festlegen können , dass die Standardeinstellung kein persistenter Standard für die Schriften ist , aber ich zeige Ihnen eine Art Problemumgehung aber ich zeige Ihnen eine Art Problemumgehung . In Ordnung, springen wir rein In Ordnung, der erste ist das Zurücksetzen Ihrer Schriften. Manchmal tust du etwas, von dem du denkst, warum tut es das immer noch? Wie wirst du normal? Es gibt keine Reset-Schrift oder Sie können es aber tun, schließen Sie einfach Figma, auf Wiedersehen, öffnen Sie es erneut Und jetzt, wenn ich anfange zu tippen, fängt es an, in der Standardeinstellung zu tippen. Du gehst, schließ es einfach und öffne es wieder. Seltsame Tatsache über Figma. Wenn ich anfange, über der Farbe zu tippen, wird es weiß. Wenn ich hier rübergehe und anfange zu tippen, kannst du sehen, dass es schwarz wird. Das ist einfach cleveres Figma-Zeug. Ordnung, der nächste ist, wie ändere ich die Standardeinstellung für immer Sagen wir, wir verwenden es erst, wenn wir Roboto verwenden. Und ich möchte, dass es 16 Punkte sind. Ich kann irgendwie nicht funktionieren. Die kurze Antwort. Ich kann bis zu den Häkchen gehen und sagen, ich kann zur Bearbeitung gehen und ich kann auf Als Standardeigenschaften festlegen gehen. Okay, also wenn ich anfange, das nächste Ding zu tippen, schau, es ist immer noch da, das Problem ist, dass ich es schließe und wieder öffne. Dein Gewicht ist da, fang wieder an zu tippen. Kehren Sie zu inter zurück, was die aktuelle Standardeinstellung für Figma ist. Da hast du's. Das funktioniert nicht. Es ist also ätzend, aber es ist gut zu wissen derzeit keine Möglichkeit gibt, die Standardeinstellung zu speichern Lass mich in den Kommentaren wissen, wenn sich das ändert, du kannst natürlich einen Stil wählen, okay, also ich habe eine Schrift. Ich klicke auf mein kleines Style-Panel. Ich tippe auf Plus. Und das wird, sagen wir mal, das sind meine drei. Ich kann Konsistenz erreichen, indem ich sie alle auswähle. Gehen Sie hier rein und sagen Sie, dass Sie alle älter als drei Jahre sind. Wenn ich anfange zu tippen, wird es sich daran erinnern, ich bin mir nicht sicher, warum das Tippen jedes Mal standardmäßig ist. Okay, entkomme, um da rauszukommen. Es erinnert sich daran, aber was passiert, wenn ich es öffne und schließe? Ist dein Gewicht da? Nein, es ist Rücken an Rücken, um seltsamerweise die Schriftgröße beizubehalten, aber das ist nicht so hilfreich Aber zum Glück haben wir Styles. Das Ego, zu einer Standardschrift zurückzukehren, bedeutet also , sie einfach zu öffnen und zu schließen. Und Sie können keine dauerhaften Standardeinstellungen festlegen. Es erinnert sich nur an das letzte, was Sie getan haben, auch wenn Sie ihm sagen, dass es die Standardeigenschaften festlegen soll , wenn Sie es öffnen und schließen . Im Moment ist es wieder am Anfang. Aber da hast du's. Wir verwenden Stile, okay, das ist alles. Wir sehen uns im nächsten Video. 82. Nutze die Prozentzahl der Linienhöhe im 8-Punkt-Raster in Figma: Hallo zusammen. In diesem Video schauen wir uns an, warum es den Leuten so wichtig ist, dort zu sitzen. Zeilenhöhe oder der Abstand zwischen den Zeilen zwei Prozentsätze sind, anstatt wie in Figma standardmäßig die Reihenfolge Die kurze Erklärung ist, dass ich mein Stromnetz einschalten werde. Wenn ich ein Acht-Punkte-Raster verwende, was viele von uns aus Gründen der Konsistenz tun. Wir könnten das hässliche alte Auto, es sagt, ich bin irgendwie auf halbem Weg durch die weiße Linie und dann einfach unten Jetzt bin ich in der pinken Linie. Ich bin Willy Nilly. Ich bin überall. Es ist schwierig, Dinge mit diesem Textfeld in Einklang zu bringen, und es ist wirklich schwierig, auf vielen Seiten konsistent zu sein. Wobei mein Prozentsatz hier so aussieht, als ob er die weiße Linie aufhellt und gleichzeitig die weiße Linie ausrichtet. Sie stellen sich auch mit meiner weißen Linie im Acht-Punkte-Raster auf. Und es macht es einfacher , es an anderen Textfeldern und Bildern auszurichten . Oh, es ist sehr aufregend. Aber irgendwie nützlich. Lassen Sie mich Ihnen zeigen , wie Sie es in Gang bringen. Okay, lassen Sie uns zuerst bearbeiten und dann darüber sprechen, warum es nützlich ist Also habe ich ein paar Texte bekommen und Loren Ipsum hier drüben übergeben , wo ich meinen Lebensunterhalt oder Line Height habe Wir können eintippen, anstatt Auto zu sagen. In dem Moment wählt Auto die für die Schrift passende Zeilenhöhe und sie ist hier standardmäßig auf 16 Wenn ich das auf 24 hochrechne, okay. Und ich klicke auf eine Bestellung, kannst du sehen, dass sie 29 verwendet. Ich möchte nicht, dass es Zahlen außerhalb meines von mir verwendeten Acht-Punkte-Rasters auswählt . Ich werde also Prozentsätze verwenden . Ich mache das rückgängig. Also 16 Punkt statt Auto, ich tippe ein, sagen wir 100 Prozent, weil es leicht zu verstehen ist sagen wir 100 Prozent, weil es leicht zu verstehen ist, ist es wahrscheinlich zu eng für das, was ich brauche, aber es ist gut, dieses Prinzip zu verstehen. Ich nehme wahrscheinlich 150, okay? Da es sich um einen Prozentsatz handelt, steht er im Verhältnis dazu. Was ist also die Linienhöhe oder das Leben für 16 Punkte ist 16 Punkt. Was wäre, wenn es 200 Prozent wären? Es wäre dieses Mal zwei, was die Pflicht ist, im Gehirn zu werden, wenn es 150 Prozent für den Herausgeber wären. Ich hoffe, meine lange Pause unterbrechen. Also. Warum ist das nützlich? Schalten wir unser Acht-Punkte-Raster ein. Wenn du dem Kurs folgst, hättest du, ich klicke hier auf meinen scheinbaren Rahmen, werden einfach zu einem leeren Rahmen gemacht. Sie sollten einen Rasterstil haben oder einsatzbereit sein. Wenn du das nicht tust, lass uns einfach schnell ein neues machen. Also nehme ich ein neues Grid. Ich werde es von einem Raster, zwei Spalten und der Menge, die in Lasten eingegeben wurde, ändern . Und wir werden ganz oben beginnen und von acht mal acht Raster von acht mal acht mal acht Punkten erstellen. Ich möchte dieses Textfeld hier oben anordnen Und kannst du jetzt sehen , dass alles in einem gleichmäßigen Abstand sitzt? Nun, wenn ich zurück zu gehe, lass uns zwei davon machen. Also lass uns das kleiner machen. Und lass uns das hier machen. Also, wenn ich den mache, der gerade auf Auto gesetzt ist , was die Standardeinstellung ist. Okay, kannst du sehen, dass es hier ein bisschen über der rosa Linie liegt hier ein bisschen über der rosa Linie Dieser ist ein bisschen niedriger und dann irgendwie auf halber Strecke, er ist auf halber Höhe, ganz unten Nun, es ist einfach inkonsistent, wenn es darum geht, die Dinge anzuordnen. Das kannst du auf jeden Fall machen. Daran ist nichts falsch. Wenn Sie jedoch eine wirklich komplexe Website entwerfen und ein einheitliches Layout wünschen, was viele von uns als Designer tun, ist die Verwendung eines Abstands von acht Punkten ideal. Und wenn wir dann die Prozentsätze für die Lebenden verwenden , dann stimmen die Dinge mit anderen Textfeldern überein Und wenn ich Dinge zeichne und das Raster verwende, verwende ich mein Werkzeug als Rahmen. Kannst du dir vorstellen, wie die Dinge einen konsistenten Betrag von oben und einen gleichbleibenden Betrag von unten anordnen werden? Praktisch, um Bilder an Dingen auszurichten und Schaltflächen auszurichten, macht es einfach einfacher Also für mich ist in diesem Fall, eine Schicht G, genug Gewicht da? Gibt es nicht. Okay, also ich werde wahrscheinlich eine 150 verwenden. Das bedeutet, dass es sich nicht um ein Fünftel der Linienhöhe handelt, sondern um 150 Prozent. Das ist wirklich üblich. Es ist ziemlich offen. Du wirst entscheiden, ob das für dich richtig ist. 150 Prozent gekauft Zu 150 Prozent gekauft bedeutet, dass, wenn ich mir mein Raster ansehe, die Dinge immer noch in einem ähnlichen Abstand enden. Kannst du sehen, dass dieser nur ein bisschen unter dem Rosa ist und es ist irgendwie alternativ, weil wir 150 verwenden, also das ist nur ein bisschen unter dem Weiß hier, direkt unter dem Rosa, unter dem Weiß unter dem Rosa, unter dem Weiß unter dem Rosa Es ist konsistent, das heißt, ich kann die Dinge immer noch dort anordnen, wo es richtig cool wird. Das ist eine der neuen Funktionen in Figma, die wir im nächsten Video richtig machen werden Bar. Nur um dir einen Hinweis zu geben, ist der Moment, weil du denkst, was macht das alles, warum passt es damit zusammen? Weil du das tun musst und du denkst , ich kann das machen. Aber was wäre, wenn es hier, unter dem Text, die drei kleinen Punkte, eine Option gäbe, da wäre diese magische neue Sache. Es steht für die Höhe der Obergrenze bis zum Ausgangswert. Schau dir das an. Alles passt oben zusammen, also der obere Teil der Kappe, okay, deshalb heißt dieser hier was heißt Kaltkappenhöhe bis Grundlinie Okay, es ist also irgendwie so, dass die Dinge bis zur Kappenhöhe ausgerichtet sind, also ihr Großbuchstabe, der obere Teil und die Grundlinie ist diese Linie unten unten, macht es nur ein bisschen einfacher diese Außenseite des Rahmens auszurichten. Aber im nächsten Video schauen wir uns mehr an , weil es gut für Fließtext ist, aber es ist fantastisch für Schaltflächen. Lass uns jetzt zu diesem springen. 83. Nutze den Trimmvorgang zum Abgleich der Höhe zum Grundwert in Figma: Hallo alle zusammen. Hast du einen Knopf wie diesen, wo du gesagt hast, dass die Polsterung oben acht sein und unten enden muss oben acht sein und unten enden Was ist diese riesige Lücke? Und kann ich es ausschalten? Die kurze Antwort lautet ja. Gehe zu deinen drei kleinen Punkten und ändere es auf dieses Ding namens Kappenhöhe zur Grundlinie Schau dir das an, lass uns ein bisschen näher darauf eingehen. Okay, was ist das Problem an diesem Textfeld hier, hat oben eine Basis und unten ein Leerzeichen Was bedeutet das? Es ist ein Problem, das in jedem einzelnen Typdesignprogramm auftritt. Es ist ein Problem, aber es gibt Workarounds, die es umgehen können. Okay. In CSS heißt es Leading Trim. Blei wie die Metallblende. ein anderes Wort für Linienhöhe Figma bezieht sich auf das schöne Wort, wohingegen es die Höhe von der Grundlinie abdeckt Und du kannst es als Standard belassen oder du kannst es eher wie ein Objekt behandeln , das wirklich griffbereit ist. Es wird schlimmer, als ob ich diesen Autolayout-Button gemacht habe. Und wir verwenden into, das Standard-Figma. Und es ist einigermaßen konsistent, weil er oben ein bisschen Platz hat und unten den gleichen Abstand hat. Aber wenn ich versuche, es zu benutzen halte meine Wahltaste oder Alt-Taste gedrückt. Kannst du sehen, dass ich versuche, oben und unten acht zu verwenden , es sind nicht wirklich acht, da es acht plus weitere drei Pixel dort und weitere vier Pixel unten sind. Und je nach Schriftart wird es noch schlimmer. Also verwende ich später für meine Schrift. Kannst du sehen, wie dieser noch weiter nach unten sinkt? Was bedeutet diese riesige Lücke an der Spitze? Und sieh mal, unten sind 13. Also, obwohl immer noch acht steht, okay, es ist ein wirklich falsch zentrierter Knopf. Und wie zuvor und wie man es bekämpft, und lassen Sie uns die Eingabetaste drücken, um in das gesamte Autolayout zu gelangen Es hat die Option Als und wir können zwischen der Höhe der Kappe bis zur Grundlinie oder der Trimmung am Anfang wählen . Nett. Jetzt fühlt es sich eher wie 88 an. Es wird immer seltsame Schriften geben. Es liegt an der Typografie, zu sehen, wo die Kappenhöhe ist. Okay. Kannst du sehen, dass die Kappenhöhe hier an der blauen Linie ist , was der obere Teil des Großbuchstabens ist, das ist die Kappenhöhe. Aber für diesen speziellen Buchstaben, für B, liegt er ein bisschen darüber. Schauen Sie sich also einige andere an. Das große T steht darüber, sie sind alle darüber, okay, aus irgendeinem Grund entschied der Designer später, dass B oben herausspringen würde. Sie sind nicht dasselbe für Inter, es ist ein bisschen darunter. Da wird es also immer etwas Eigenartiges geben. Aber ich denke, dass die Obergrenze zwischen Höhe und Grundlinie wirklich viele unserer Layoutprobleme löst, besonders wenn wir anfangen, Dinge wie Symbole hinzuzufügen Fügen wir also einen Icon-Shift hinzu. Ich sagte, ich ticke an. Es wird in mein Autolayout übernommen. Lass uns das Ding ausschalten. Also werde ich meine Kappenhöhe auf die Grundlinie zurückdrehen und wieder auf den Standard setzen Und ich sage Autolayout, du bist zentriert. Was Ihnen auffallen wird, ist, dass da nichts zentriert ist. Es sieht so aus, als ob die Zecke weit über dem B liegt. Und wenn ich weiß, dass es in der Nähe der Basislinie ist, SCHLECHT, Und wenn ich weiß, dass es in der Nähe der Basislinie ist, SCHLECHT, wenn ich darauf eingehe und sage Sie die süße neue Kappen-Höhe zur Grundlinie sind, dass Sie die süße neue Kappen-Höhe zur Grundlinie sind, schauen Sie sich die gesinterten, schweren Minenfelder an, die ein kleines bisschen abseits Kannst du meinen Ausgangswert sehen? Ich habe ein Wort ausgewählt, das keine Abkömmlinge hat. Nichts geht unter die Grenze. Aber wenn ich eintippe, waren das insgesamt Eier. Was hast du getan, als du auf meine Tastatur heruntergeschaut hast? Kannst du jetzt sehen? In Ordnung, machen Sie eine Pause, hin und zurück Spielgesicht auf deinem professionellen Dan. Kannst du jetzt sehen, dass es diese Absteiger gibt. Okay, jetzt ist es ein bisschen besser aufgereiht. Du gehst, wenn du Schaltflächen machst und Text schreibst, nur um die Kappenhöhe bis zur Grundlinie zu setzen, nimm es einfach an Sie können es standardmäßig noch nicht einschalten. Du kannst es in deine Textilien stecken, wenn du es machst, okay, also wenn du einen Stil entwirfst, kann er Teil davon sein, was perfekt ist. Eine Sache, die du vielleicht tun musst, ist wenn du das zur Entwicklung schickst und sie es bauen, am Ende sieht es so aus , okay, mit den Dingen irgendwie nicht ganz aufgereiht, sprich einfach mit ihnen darüber, dass es eine relativ neue CSS-Klasse ist , die Leading Trim heißt, nicht Leading, Leading the Lead Middle Und wenn Sie immer noch Probleme haben, liegt es möglicherweise an der Schrift. Schau es dir ein wenig an. Es könnte verrückte Sachen machen, die nicht kontrollierbar codiert Sie können das Problem beheben, indem Sie mit der rechten Maustaste klicken und Konturstrich sagen Aber jetzt ist es keine Schrift, es ist nur eine Form und es ist sehr schwierig, es auf der Oberseite oder auf der Website zu implementieren. Manchmal müssen wir einfach mit einem kleinen bisschen Glück leben , dass du in Figma Leading, Trim oder Cap auf die Grundlinie gehst in Figma Leading, Trim oder Cap auf die Grundlinie 84. Festlegen der hängenden Satzzeichen für Ziehanführungszeichen und Call-Outs in Figma: Hallo alle zusammen. In diesem Video machen wir das, wo die Interpunktion außerhalb des Haupttextfeldes hängt Lassen Sie uns Pull-Quotes oder Call-Outs machen. Einfach zu machen. Sie wählen das Textfeld aus, das am Anfang nur für die Interpunktion funktioniert, und gehen dann zu Ihrem Text in Ihrem Design-Eigenschafteninspektor über Ihrem Design-Eigenschafteninspektor Gehen wir zu den drei Normalerweise sage ich zu den Grundlagen, lass uns zu den Details gehen. Und da ist sie, da ist die hängende Interpunktion. Bumm. Eine nette Sache, die ich Ihnen zeigen werde, während wir hören, ist, dass Sie dasselbe mit Stichpunkten tun können. Ich werde alle drei auswählen. Und anstatt diesen Betrag anzugeben, können wir unter Details an dieselbe Stelle gehen Und direkt darunter kannst du Hängelisten sehen? Bumm, sie stechen auch da draußen hervor. Warum machen wir das? Es gibt Leute da draußen , die das tun wollen. Ich habe keine Ahnung, was du willst , ist, dass die älter werden. Ich weiß, dass Leute auf dem Bildschirm geschrien haben und gesagt haben, hey, das muss ich für die Arbeit machen, oder ich liebe die Art und Weise, wie es aussieht, und das ist okay, weil du weißt, wo du es jetzt machen musst Ordnung, hängende Interpunktion in Figma, In Ordnung, hängende Interpunktion in Figma, das war's. Wir sehen uns im nächsten Video. 85. Was sind die erweiterten Typotionen in Figma: Hallo zusammen. In diesem Video schauen wir uns dieses Menü an, geben Einstellungen ein, all diese erweiterten Einstellungen, die mit einigen Schriftarten einhergehen. Wir werden nicht alles behandeln, weil einige von ihnen selbsterklärend sind und andere schon. Es geht eher um Typografie und das Verständnis von Typografie-Begriffen, aber ich möchte die guten behandeln, die Sie benötigen und die nützlich sind, wenn Sie mit Schrift in Figma arbeiten , um UX-Designs zu erstellen Ein kurzer Überblick und Sie können sich selbst mit denen befassen , die Sie interessanter finden. Okay, die erste ist dass sie nicht alle gleich geschaffen sind Also ich habe drei, ich kann diese vier Textzeilen hier zählen. Was ich dir zeigen möchte, steht unter den Einstellungen hier, dazu ist diese erste Schrift hier. Dies ist derzeit die Standardeinstellung für Figma. Und ich sage im Moment, weil sie es in der Vergangenheit geändert haben. Was wir also herausfinden werden, ist, dass es unter den Details viel zu tun gibt. Wir werden die meisten davon behandeln. Aber wenn ich die schlechteste aller meiner Optionen auswähle, ist dies eine kostenlose Schrift, die ich online gefunden habe. Ich bin mir nicht sicher, warum ich die ganze Zeit auf dieser Kaktus-Schrift herumhacken sollte, aber sie heißt CaGa Sandwich. Und unter Details kannst du sehen, dass ich auf und ab scrolle. Es gibt kein Hoch- und Runterscrollen. Da einige dieser Optionen für Ihre Schrift verfügbar sein werden und einige nicht. Und seine zwei Gründe. Erstens, wenn sie wie ein Kaktus geformt ist, es wahrscheinlich keine sehr vollständige Schrift sein Und die andere ist, dass Sie möglicherweise die kostenlose Version und vielleicht nicht die Pro-Version verwenden . Manchmal wird eine Schrift bereitgestellt , die viel mehr Tiefe hat. Und oft müssen Sie für diese Optionen bezahlen. Aber ich habe jemanden gefunden, den wir alle finden sollten K. Das sind alles Google Fonts. Und Google-Schriftarten sind die Standardeinstellungen, die in Figma integriert sind Lassen Sie uns also eintauchen und uns einige dieser erweiterten Einstellungen ansehen. Okay, innerhalb der Auswahl schauen wir uns die grundlegenden Dinge an, die wir nicht behandeln werden. Wir haben irgendwie alles behandelt. Die Details deckten einen Teil davon ab. Diejenigen, mit denen ich nicht beginnen möchte, sind die, von denen Sie vielleicht noch nie gehört haben. Wir beginnen mit dem Interessantesten, zu dem auch das Stilistische passt Das ist echt langweilig. Kannst du den Unterschied da oben sehen? Siehst du das A und das Ende? Das könnte für das, was Sie tun, sehr wichtig sein. Ich weiß, wenn meine Kinder in der Schule sind, suchen Lehrer immer nach einer Schrift, die das enthält. Am Ende benutzen sie Comic Sans. Aber für uns als Designer ist es vielleicht interessanter, dass ich eine Skriptschrift ausgewählt habe. Dieser heißt Meow Script. Sehr professionell. Aber das Coole daran ist unter den Details, es ist eine ziemlich robuste Schrift. Hier ist viel los. Schauen wir uns dazu diese stilistischen Sets . Wir könnten es hier einfach aufschlüsseln. Wo wir es rausbringen werden. Ich weiß es nicht. Vielleicht holen Sie sich Command or Control D, D, D, um sich diesen anzusehen und wir vergleichen einfach ein paar davon. Als diese Schrift entworfen wurde, der Typograf oder ein Team von Typografen, bin ich mir nicht sicher, wer diese gemacht hat Sie haben sich einige andere Sets ausgedacht, stilistische Sets. Schauen wir uns also die stilistischen Alternativen an. Kannst du sehen, dass sich zwischen dem und so viel ändert. Sie könnten also an einen Punkt kommen, an dem Sie möchten, ich mag diese Schrift, aber das Hilfsmittel liest sich nicht gut. Es gab eine Alternative, ich stilistische Alternative mit dieser Schrift Also macht man das zuerst und schaut sich die verschiedenen Sets an , denn das sind alle Alternativen und das ist wie eine Gruppe von ihnen , die zusammenpassen. Hier gibt es viele verschiedene Optionen, sodass Sie diese auf den Unterschied anwenden können. Schauen wir uns diesen hier an, den dritten, oder schauen wir uns einen anderen an, wie Sie vielleicht sagen, ja, das ist es, was ich brauche. Ich mag den Ablauf, aber die ganzen quadratischen Teile des Wikis funktionieren nicht für dich Okay, ich werde nicht zu viel darauf eingehen , außer speziell auf Skriptschriften. Oft findet man richtig coole Stilsets und baut ein paar richtig coole kleine Formen Und vor allem, wenn du versuchst, vielleicht einen Heldentext oder ein paar Logos oder etwas Interessanteres zu schreiben. Und nur zum Vergleich , dass ich das gefunden habe, weil es ziemlich weit fortgeschritten war. Okay, dieser hier ist INT. Also schauen wir mal hier rein. Schauen wir uns die Stilsets an. Es gibt nur einen. Was macht es? Es muss stilistisch so aussehen, als ob es nur Xi ist Und ich kann einfach feststellen, dass es keine hat, nicht einmal die Zs. Der nächste, der interessant ist, sind Kooning Peers. Also verwenden wir diese Schrift. Es hatte keine Stilvorgaben, SCHLECHTE Typografie. Ich habe viel Zeit durchgemacht und geschwitzt. Schauen wir uns die Details an. Lass uns nach Stil suchen, Kooning. Da hast du's. Horizontaler Abstand, Reinigung der Peers. Es ist standardmäßig aktiviert, was es gut aussehen lässt. Du kannst es ausschalten. Was passiert hier am Ende? Es ist interessant zu sehen, dass T und Y normalerweise so weit voneinander entfernt sind, das sind sie einfach irgendwie als Charaktere voneinander entfernt Die Typografie besagt, dass, wenn ein T, ein großes T neben einem Kleinbuchstaben steht, warum? großes T neben einem Kleinbuchstaben steht, warum Ich möchte, dass du dich schön eng anlegst. Das ist gut, deshalb benutzt du vielleicht irgendwelche, ich weiß nicht, irgendwelche Plugins in Figma oder vielleicht ein Tool Ich weiß, dass ich hier einen habe, den ich für meinen Vinylschneider verwende , der nicht für alle Kooning-Kollegen geeignet Das sieht also die ganze Zeit eklig aus. Okay, das Gleiche gilt für diesen hier. Es gibt scherzhafte Kollegen. Okay, es ist nur sehr geringfügig. Schauen wir uns das hier an. An, aus, an, aus ist nichts los. Ich denke, es könnte wahrscheinlich stellenweise ein bisschen gebrauchen. Hey, was sollte ich wissen? Das sind Kooning Peers Okay, das nächste, das in diesen sogenannten Ligaturen steht, werde ich auf das Cushion-Skript klicken Und nachdem es hier unten auf die Details ausgewählt wurde , können Sie es sich ansehen. Es gibt eine sogenannte Buchstabenform und es gibt Ligaturen für diejenigen, die nicht wissen, was Ligaturen Im Grunde genommen passiert das , dass wir es ein- und ausschalten. Kannst du sehen, dass dieser, das F und das Auge, wenn es zusammen ist, die Schrift und Figma passen, hey, die Typografie, ich sagte, wenn diese beiden Buchstaben zusammen sind, möchte ich, dass du sie gegen diese schicker aussehende Option austauschst . Okay. Es ist dasselbe, wenn es keinen gibt. Wenn Sie sehen können, dass es sich automatisch ändert , weil die Typografie, von der ich gesagt habe, dass ich sie nicht will, und wenn eine Eule aussieht, möchte ich nicht, dass sie das tun, wenn sie zusammenkommen Halten Sie die Option gedrückt und verwenden Sie die Taste „Weniger als“, um meinen kleinen Abstand einzuhalten. Kannst du sehen, dass es ein bisschen wird. Was macht das jetzt? Okay, also gingen sie hin und sagten, okay, lasst uns, wenn sie zusammenkommen, Ligaturmagie machen Oh, cool. Das hängt von der Schrift ab. Manche Schriften haben keine. Wie ich weiß, selbst dieser hier, ich trete ein, hat keine Ligaturen oder nicht einmal das F und ich glaube, dass der eine schon hat, und diesen kicke ich definitiv nicht, weil Perfektion schwer zu übertreffen ist weil Perfektion schwer zu übertreffen Falls ich. Etwas anderes , das sehr nützlich ist, ist, wenn Sie mit Zahlen arbeiten Schauen wir uns zwei Dinge an. Also wieder in eine wirklich komplexe, tolle Schrift, die zu verwenden ist, weil sie viel Tiefe mit den ausgewählten Zahlen hat , auf die ich hier eingehen werde. Und dieser von allen ist der einzige hat , was hat er? Es gibt Charaktervarianten. Und was wir hier sehen können, ist, dass es eine Alternative gibt. Schauen wir uns das genauer an. Okay, schauen wir uns den anderen an. Denn entweder einer, oh, schau dir die eine Veränderung an, spitz zulaufender QB oder eher für brauchst du ein offenes für Klamotten Okay, manchmal sind es nicht nur Zahlen. Sehen Sie sich das mit dem aktuellen Text hier an. Für das L gibt es einen kleinen Schwanz. Okay, ich kann das ein- und ausschalten Okay, das wird also nicht alles abdecken, was Sie in dieser Schrift tun können. Es geht eher darum, Ihnen zu zeigen, dass einige Schriften viel Kontrolle haben und einige von ihnen nicht versuchen, eine gute Fließschrift auszuwählen kann Ihnen später einige Kopfschmerzen ersparen wenn Sie mit verschiedenen Sprachen zu tun haben, vielleicht mit wissenschaftlichen Notationen, oder Ihr Kunde mag das wirklich nicht Sechs, los geht's. 26. Ja, die Sache, die für Zahlen nützlich ist, ist, dass wir zu einer der anderen übergehen. Diese hier, die Schrift , die ich später verwende. Okay, schauen wir mal rein. Es hat nicht die Zeichensätze, die es unter Zahlen hat, diese Zahlenstile. Und schauen wir uns das an. Gehen wir zurück und dann zu den Zahlenstilen. Kannst du den Unterschied zwischen dem erkennen? Dieser? Okay, viele verschiedene Zahlenstile. Kannst du die Unterschiede dort sehen? Hauptsächlich mit dem einen. Dann kommen wir zu dieser Option, bei der es ein einziges Leerzeichen ist, also können wir verschiedene Zahlen verwenden, solange die gleiche Anzahl von Zeichen aneinandergereiht also können wir verschiedene Zahlen verwenden, solange die wird. Kannst du verschiedene Zahlen sehen und dort werden sie sich Kannst du verschiedene Zahlen sehen und Und das ist bei verschiedenen Schriftarten nicht immer der Fall. Sagen wir das hier. Ich werde vier Zeichen loswerden, aber gib eins ein, weil es nicht mit einem Zeilenabstand ist, die gleiche Anzahl von Ziffern, aber es ist wirklich schwierig, sie zu vergleichen Wo ist mein Leto? Ich kann das einschalten. Es ist also Monospace, vielleicht nicht so aufgeräumt, also kann ich es runterbringen, sodass alles gut hineinpasst , indem ich diesen ersten Stil verwende, aber ich kann diesen Modellstil verwenden und alles passt gut zusammen Da sind noch andere drin. Hast du schon einmal eine Schrift, die dir gefällt? Warum baumelt es herunter? Okay, dieser hier, er hat wahrscheinlich mehr davon. Kann gehen. Einige von ihnen sind gestiegen, andere sind gesunken. Ich bin kein Fan dieses Stils. Vielleicht möchten Sie es einschalten, oder Sie haben vielleicht eine Schrift, die Sie vielleicht ausschalten möchten. Wisse, dass du hier rein kannst , sie werden alle anders sein. Bei einigen ist der Mono-Abstand standardmäßig aktiviert und es gibt keine Möglichkeit, ihn auszuschalten. Deshalb verlieben sich Designer oft, oder zumindest aus Sicherheitsgründen, in oder zumindest aus Sicherheitsgründen, eine Schrift, deren Aussehen ihnen gefiel. Und sie wissen, dass es sehr nützlich sein kann und sie wissen, dass es ihnen später keine Kopfschmerzen bereiten wird . Okay, das ist der grobe Überblick über die Dinge, die ich mir nicht täglich ansehe, aber die Dinge, von denen ich weiß, dass sie bei der Arbeit sehr nützlich sind Da ist noch viel mehr drin. sich also um, schauen Sie sich um, was Ihre Schrift ist, Scott, vielleicht müssen Sie einige Schriftrecherchen anstellen und trotzdem entscheiden, wir werden mit der Kaktusschrift weitermachen, wo V ist, da tritt sein Sandwich fürs Leben Ich bin mir nicht sicher, warum ich an diesem Telefon herumhantiere. Hauptsächlich, weil ich mit Comic Sans und Brush Script, der IGA, lockerer Comic Sans und Brush Script, der IGA, In Ordnung, das ist es. Wir sehen uns im nächsten Video. 86. 86 Variabler Typ: Variable Schriften sind unglaublich. Das werden wir in diesem Video machen. Ich werde den Leuten erklären, die nicht wissen, was sie tun. Und dann erklären wir die Gründe, warum sie im UI-Design immer beliebter werden, sowohl wegen ihrer Flexibilität als auch aufgrund von Dingen wie Dateigrößen und wie sie in CSS implementiert werden könnten. Und dann gehe ich ausführlich auf unabhängige Schriftenhersteller ein und warum Sie sie verwenden sollten Also ja, das ist gegen Ende. Also gut, das ist es. Lassen Sie uns variable Schriften eingehen, weil sie unglaublich sind. Ordnung, einige von Ihnen wissen also, dass variable Schriften sie vielleicht verwenden. Ich möchte sie nur irgendwie herausstellen. Und sie darauf hinweisen, warum sie so nützlich sind und immer beliebter werden beliebter um App-Design und Webdesign geht. In Ordnung, zunächst, was ist eine variable Schrift? Diese Schriftart, die ich verwendet habe, wähle ich Lato. Es ist keine variable Schrift. Woher weiß ich, ob ich hier auf die kleinen Schrifteinstellungen klicke , es gibt keine zusätzliche Registerkarte mit der Aufschrift „Variable“. Ich habe wirklich viele verschiedene Gewichte, okay? Und verschiedene Kursivschriften, unterschiedliche Neigungen drauf. Es gibt eine wirklich gute Schrift, sie wird mir gut tun. Aber wenn ich die Chance bekomme, freue ich mich sehr. Wenn ich eine Schrift auswähle , die mir gefällt und die auch variabel ist , wie sieht sie aus? Das ist also die Standardeinstellung, okay? Und dieser ist variabel. Okay? Das heißt, ich habe das Beste aus beiden Wörtern, ich habe die Möglichkeit, direkt zu fett überzugehen. Okay, für diesen ersten Satz hier. Aber sagen wir für den Titel, ich möchte vielleicht Bold. Okay? Aber kannst du wirklich sehen, dass es all diese kleinen Anpassungen dazwischen gibt? Kannst du sehen, wenn ich das ziehe, kannst du den Titel sehen? Schau, wie viel Kontrolle ich habe. Okay, es gibt einfach so viele Schriften. Wir sagen, fett ist nicht fett genug, und Schwarz ist am Ende einfach zu viel von, du weißt schon, zu schwer. Also willst du wieder zurück, als ob da ein bisschen in der Mitte wäre. Und warum ist das nützlich? Es gibt mir viel Kontrolle, okay, für den OCD-Designer in mir, aber auch, wenn es um die Implementierung geht Auf der Codeseite entweder für die App oder die Website, variabel Die Schriften sind natürlich größer. Lass mich dir eine Schrift zeigen, die mir heute gefehlt hat. Okay, diese Schrift hier, Job Clarendon. Und was am Ende passiert ist, dass es zwei Versionen dieser Schrift Es gibt diese Version, die deine normale ist, oder ist es diese hier, Lato, okay, zwischen all diesen hin- und herspringen, okay? Es gibt einfach ein paar verschiedene Optionen. Das sind all diese. Du installierst sie alle. Und wenn du sie alle benutzt, okay, die Person, die deine App oder deine Website erstellt, muss all diese Schriften k aufrufen, damit es funktioniert, okay? Das ist zwar größer, aber du kannst es hier irgendwie sehen. Sie sehen die Kilobyte. Sie ist viel größer als diese variable Schrift, aber sie hat all das schon eingebaut und all die Bits dazwischen Und es ist wirklich üblich, wenn Sie, sagen wir, eine Fließschrift erstellen, dass Sie sowieso mindestens vier davon haben. Am Ende erfinden Sie also die Größe davon. Weißt du, variable Schriften sind sicherlich größer, aber wenn du sowieso vier verschiedene Strichstärken benötigst, erreichst du am Ende diese Größe und übertriffst sie sogar oft. Variable Schriften halten also die Dateigröße niedrig und bieten Ihnen eine Menge zusätzlicher Kontrolle für solche Randfälle. Wir brauchen es eigentlich nur, damit vielleicht die Barrierefreiheit für diese spezielle Karte falsch ist, wir müssen sie nur ein bisschen mehr erhöhen, damit sie vor dem Hintergrund besser sichtbar ist Ist sie erforderlich? Nein, es ist nett, es zu haben, aber ich suche immer danach. Und die andere Sache, auf die ich hinweisen möchte , während wir hier sind , ist , dass wir bisher Google Fonts verwendet haben. Okay, das ist es, was in Figma eingebrannt ist. Aber es gibt auch viele andere auf der ganzen Welt. Okay, von unabhängigen Typografen. Und ich möchte nur darauf hinweisen, dass David, Jonathan Ross, nur weil ich über eine seiner tollen Schriften gestolpert bin Jonathan Ross, nur weil ich über eine seiner tollen Schriften gestolpert Und dieser hier, es gibt eine kostenlose Testversion. Und ja, du musst dafür bezahlen wenn es in Produktion gehen muss. Okay. Oder benutze es für Kunden. Aber ich glaube, als Ux-Designer werden wir, ich weiß nicht, Sands eröffnen. Roboto ist der Ort, an dem in den Schriften keine Liebe mehr steckt. Du kannst also tolle Schriften finden und es gibt auch tolle variable Schriften wie diese hier , die heruntergeladen werden Es ist großartig und variabel. Und sieh dir nur viel an, was wir über diese Kabine haben. Okay, dieser ist von Google, also wird er in deiner Drop-down-Liste stehen Ich werde zu meinem neuen wechseln. Ich kann dir die Schrift nicht geben, weil es so ist, du kannst eine kostenlose Testversion dieser Schrift bekommen . Schau, wie cool sie ist. Okay. Sie können hier auf seine Website gehen, Jar.com. Okay, es gibt noch eine kostenlose Testversion Ansonsten experimentiere mit einer Google-Schrift. Und im Moment kannst du auch nicht wirklich herausfinden, was variabel ist. Ich hoffe, dass das Font Preview-Plug-In es als Option bietet. Halte das Telefon, sie haben es aktualisiert. Jetzt können Sie herausfinden, welche variablen Schriften Sie möglicherweise bereits haben. Okay, wenn der Text ausgewählt ist, klicken Sie auf die Schriftart und es werden standardmäßig alle Schriftarten verwendet. Du kannst darauf klicken und sagen, zeig mir tatsächlich die variablen Schriften und es zeigt dir alles, was du in Bezug auf Variable A hast . So viel praktischer. Lass uns eine auswählen Okay? Also habe ich es ausgesucht, jetzt gehe ich zurück zu den Eigenschaften, okay, die kleinen Punkte. Und du kannst nachschauen, es ist variabel und jetzt kann ich mit ihnen herumspielen. Das ist nur das Gewicht, aber sieh mal, wie cool es ist. Mann, ich liebe variable Schriften. Alles klar. Eine letzte Sache, bevor wir weitermachen , ist, dass du es wahrscheinlich gerade gesehen hast. Es gibt auch beliebte Schriftarten. In Google Fonts können Sie nach verschiedenen Elementen trennen. Schau mal, vielleicht sind da jetzt neue Sachen drin , aber das ist super praktisch. Ich gehe zurück zu allen Schriften, okay? Sie sind also alle da. Nochmals, ich wünsche es mir und sie haben geliefert. Danke, Fg. Ordnung, mach weiter. Und du kannst auch zu Google Fonts zurückkehren und das tun, was ich getan habe, und einfach sagen, zeig mir etwas, das nur aus variablen Schriften besteht , und du kannst irgendwie sehen ob es zwei Achsen oder eine Achse hat. Was sind zwei Achsen? Lass mich das rückgängig machen. Cabin ist also ein gutes Beispiel dafür. Gehen wir unter Variable rein. Kannst du das Gewicht und die Breite sehen? Okay, ich liebe es, wenn die Breite, besonders bei Apps, die Bildschirmfläche sehr klein ist. Du musst ein paar Sachen reinquetschen. Also, wir haben Techno auf einem Bike für den Namen dieser Art von Veranstaltung Aber wenn es etwas Längeres gibt, stecke ich irgendwie fest, in zwei Zeilen aufzuteilen und ein Wort darauf zählen Schau dir das an, ich kann mir das schnappen. Ich bin mir nicht sicher, ob ich genug Platz habe, aber siehst du? Ich kann etwas gebrauchen, das immer noch nicht genug Platz hat, aber es gibt mir die Möglichkeit , hier mehr Text auf die Oberseite zu packen. Und sie sind alle unterschiedlich, manche Breiten sind sehr, sehr niedrig Und ich liebe die Möglichkeit, das gleiche Schriftdesign und den gleichen Stil beizubehalten , aber die Breite verringern oder vergrößern zu können die Breite verringern oder vergrößern zu können Und dieser hier hat auch Gewichte. Dieser geht runter auf 400 K und nur auf 700. Okay, aber sieh dir das an. Ich gehe zurück zu meinem ersten Job, ich zeige es dir einfach. Ich nehme es mit dem Fahrrad, aber verurteile es. In Ordnung. Lassen Sie mich kurz ein paar Beispiele anführen , die sehen, wie unterschiedlich es ist , zum Beispiel, wie viel Kommunikation man mit einer variablen Schrift bekommt. Ich kann zum Beispiel dieselbe Schrift verwenden, die Dateigrößen klein halten, aber mit meinen Überschriften einige sehr unterschiedliche Dinge machen Variabel. Schriften sind ziemlich neu Wenn Sie also mit einem Entwickler zusammenarbeiten, müssen Sie vielleicht einfach sagen, hey, ich verwende eine variable Schrift, also werden Sie alle möglichen verrückten Größen sehen. Normalerweise würden sie 700 oder 300 erwarten , aber du hast ihnen 7603 gegeben weil es perfekt für das ist, was du machen willst Sie könnten es einfach auf 700 herunterfahren, weil sie sagen, wie komme ich Es ist nicht schwer, es ist nur eine CSS-Klasse. Leicht zu verstehen, aber vielleicht müssen Sie sie daran erinnern oder sie zumindest in die richtige Richtung weisen. Ordnung, das ist es. Deine andere Recherche ist YouTube, Techno auf einem Fahrrad oder Drum & Bass auf einem Fahrrad Ich liebe den Kerl. Er radelt herum, spielt Musik. Ein Haufen Leute folgen ihm. Es macht viel Spaß. Wie auch immer, variable Schriften. Variable Schriften sind großartig. Wenn Sie nichts von ihnen wussten, sind Sie willkommen. Wenn Sie von ihnen gewusst haben , erhalten Sie dadurch hoffentlich ein paar Informationen, damit Sie sie für das Projekt verkaufen können. Vielleicht sollten Sie für eine Schrift aus einer unabhängigen Schriftquelle bezahlen . Okay, wo wir gerade von unabhängigen Typografen sprechen, ich gebe Ihnen die, von denen ich weiß, dass sie sie Und du kannst es mir in den Kommentaren sagen, denen du es tust, damit wir ein bisschen in Schwung kommen können . Also David, Jonathan Ross, jemand hat erst vor Kurzem Olivelinks dazu am Ende der Übungsdatei entdeckt vor Kurzem Olivelinks dazu am Ende der Übungsdatei Clem, ein anderer Kiwi, eine wunderschöne Website und wunderschöne Schriften und ein großer Also geh und sieh dir Chris' Websites an. Rufen Sie auch Clem.com in CJ an. Jemand, den ich kenne und der wirklich coole Schriften macht. Ich liebe es auch, seine Arbeit und seinen Blaze-Typ zu verwenden. Es ist eher eine Sammlung von Unabhängigkeit. Ja, echt cooles Zeug. Da draußen gibt es jede Menge. Erkunden Sie also vielleicht etwas außerhalb von Google Fonts für Ihr nächstes Projekt. Ja. In Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. Los, Variable Schriften. Wow 87. Kurve von Text mit Schrift auf einem Pfad in Figma: Hallo gibt an, was wir tun werden. Sie haben richtig erraten, wie man Text krümmt, Figma, manche Leute nennen es Schrift auf einem Pfad, um den Text um einen Kreis zu wickeln Ich zeige Ihnen, dass Figma das nicht nativ macht, aber wir können ein Plugin verwenden, schauen uns die Einschränkungen dieser Plugins an und zeigen Ihnen dann, wie man es aber wir können ein Plugin verwenden, schauen uns die Einschränkungen dieser Plugins an in Illustrator macht und es einbauen. In Ordnung, lass uns eine SMS schreiben, oder? Zunächst benötigen Sie etwas Text. Zweitens brauchst du eine Kurve. Ich werde das P für das Stiftwerkzeug verwenden. Ich klicke nach oben und ziehe und klicke und ziehe und ziehe, um ein kurviges Ding zu bekommen Und ich werde ein paar Mal Escape drücken , um den Zeichenmodus zu verlassen , und ich werde sie kombinieren. Jetzt tippt Figma selbst nicht auf einer Kurve. Sie müssen also ein Plugin verwenden. Ich werde verwenden, um den Pfad zu verwenden , scheint im Moment der gebräuchlichste zu sein. Also, wenn ich ein paar Bugs benutze, wird es da sein, wenn du dir das ansiehst? Wer kennt Chick? Schau, ob es läuft. Suchen Sie vielleicht einem Pfad- oder Kurventext von Figma und sehen Sie , welcher angezeigt wird. Aber dieser hier hier funktioniert im Moment ziemlich gut. Es ist wie bei diesen beiden Dingen. Und ich sage Link, und dann machst du geschwungenen Text in Figma Lass uns das kreisförmige machen und dann tauchen wir ein bisschen weiter ein und schauen, wo es kaputt geht. Okay, ich schnapp mir den. Und dieses spezielle Plugin funktioniert nicht, um es komplett zu nutzen. Also werden wir es verwenden, da es eines namens Arc gibt, haben nach einem jährlichen Plugin gesucht. Auch das ist nicht hier. Wenn du also eine findest, die es gibt, kannst du dir die Vorschau hier unten ansehen, aber du kannst sie dir hier oben ansehen. Und du kannst sehen, wie, wie viel du um Woo-hoo herumfahren willst Okay? Da haben wir's, zu 100%. Es ist also ein perfekter Kreis. Und dann gehst du nach dem, du gehst irgendwie komisch überlappt Also all diese Plugins, dieses und dieses, ich möchte nur darauf hinweisen, dass es Bugs gibt, großartig, dass es da ist und ich werde viele Fragen von Leuten gestellt , wie das geht und du kannst es in Figma mit diesen Plugins zum Laufen bringen Laufen Plugins werden also besser werden. Irgendwann würde Figma es tun. Aber schauen wir mal, lass uns einen hier haben. Ich weiß es nicht. Die Vorschau sah so aus , als würde sie unten gut abschneiden, aber jetzt überlappt sie sich Kannst du das nachher anpassen? Das kannst du nicht. Aber wir könnten es noch einmal machen , weil es dadurch Duplikat davon macht , wenn es gemacht wird. Also etwas Skurriles, dieser hier hat mehr Skurrilität. Das Coole an dieser Kurve ist jedoch, dass ich, wenn sie ausgewählt ist, mein vorheriges Plugin öffnen kann, das Path heißt. Wie hieß der Pfad? Lass es uns ausführen. Okay, ich kann es weiter anpassen. Schau dir das an. Aber am Ende macht es ein paar lustige Sachen, die du magst. Was ist das? Die große Führungspersönlichkeit dort. Kannst du die Beleuchtung im laufenden Betrieb anpassen? Das kannst du nicht. Du kannst ein paar verrückte Sachen machen mit so etwas wie Tatsächlich, bevor wir hier weggehen, gibt es einen Pixelversatz. Du kannst es also vorantreiben und du kommst wieder auf Null. Du kannst es rechts anordnen. Sie können im Zentrum lernen. Und der Offset, den Sie hier wählen können, geht von Null, was darunter ist, bis, ich benutze meinen Aufwärtspfeil auf 0,1, 0,2, 0,3, 0,5, ist auf halbem Weg Und du kannst bis zu eins hochgehen. Wenn Ihre Kurve in diese Richtung verläuft, können Sie mit einer horizontalen Ausrichtung herumspielen. Aber nehmen wir an, das macht komische Sachen. Geh zurück zu meinem Offset als einer. Wie repariere ich das? Sie können einen Workaround durchführen. Okay, ich werde über diese Problemumgehung frustriert sein und bin dann einfach zu Illustrator gegangen und habe dir gezeigt, wie es geht, weil das alles daraus zieht und sie homosexuell verlinkt sind Also werde ich hier rein gehen und meine süße Abkürzung benutzen. Denken Sie daran, dass der Cursor zwischen irgendetwas blinkt und los geht's. Eigentlich werde ich all diese auswählen , vielleicht nur diese. Und ich halte die Wahltaste auf meinem Mac gedrückt , die Alt-Taste auf einem PC. Und ich werde die Symbole größer als und kleiner als verwenden , um es zu öffnen, und du denkst, das ist nicht genug. Wie? Weil es nicht dynamisch aktualisiert wird. Aber ich kann das Plugin jetzt mit der Befehlsoption P öffnen. Habe das ausgewählt und kannst du sehen, dass es es irgendwie ablehnt, wenn du es ansiehst. Ich habe das F und das Ich arbeiten irgendwie. Und du kannst jetzt deine Zeit damit verbringen , zurückzugehen und zu sagen, Vega, du brauchst mehr und du brauchst weniger. Du brauchst weniger. Und Spanien fällt. Und dabei und wie das rückläufig wird. Und am Ende würde ich frustriert sein und einfach zu Adobe Illustrator wechseln , von dem ich weiß, dass das nicht jeder tut frustriert sein und einfach zu Adobe Illustrator wechseln , von dem ich weiß, dass das nicht jeder Ich lösche meinen Text da drin , weil du das kopieren wirst. Illustrate ist einfach ein ausgereifteres Produkt, um solche Dinge zu tun , indem man zu Figma zurückkehrt Also noch einmal, ich verwende mein Stiftwerkzeug, klicke und ziehe nach oben, um dieselbe Art von Kurve zu erhalten, schiebe X, um die Füllung der Kontur zu ändern. Benutze das T für das Type Tool und sieh dir das an. Wenn ich nur mit der Maus darüber fahre, der nette Text auf einem Pfad Los geht's. Füge das ein. In Ordnung, wir haben Illustrator mit Figma und Aber eine Sache, die Sie vielleicht finden, ist wenn ich das kopiere, weil es in einem so seltsamen Ding ist, dass Figma es nicht erkennt, wenn ich es einfüge, es kommt einfach alles pixelig rein . Okay, es war einfach nicht gut. Ich möchte ein Duplikat erstellen . Ich möchte es skizzieren. Ich verwende hier alle Tastenkombinationen, K Command Shift 0 oder Control Shift 0, um es zu skizzieren Jetzt kann ich es kopieren. Es ist jetzt in Figma nicht editierbar, aber zumindest als Victor, nett und skalierbar und gut Und allein die Art und Weise, wie es mit Schrift umgeht, ist viel, viel besser , als das versuchen zu müssen , um das zu erreichen. Sie gehen mit einem Kreis zu derselben Sache zurück. Ich würde wahrscheinlich einfach zu Illustrator wechseln. Schnappen Sie sich mein Ellipsenwerkzeug, halten Sie die Umschalttaste gedrückt, ziehen Sie einen Kreis heraus, nehmen Sie mein Stiftwerkzeug und klicken Sie Nicht darauf, weil es reingehen wird. Ich möchte diesen Typ auf einem Pfad zur Zentralisierung finden . Er ist standardmäßig auf ihn eingestellt Manchmal hält es mich nicht von ihnen ab, dann gehst du. Es ist ziemlich gut. gab es unter Objektpfad, Typ, Typ für einen Pfad viel mehr Optionen . Und Sie können in die Optionen für die Eingabe eines Pfads wechseln. Und hier kannst du noch viel mehr tun. Stellen Sie sicher, dass die Vorschau auf Okay steht, und skizzieren Sie es erneut und bringen Sie es in Figma Plugins sind gut, um Figma zu bekommen und haben die Grenzen dessen, was es kann, irgendwie überschritten und sie werden besser werden Und Figma wird einige dieser Sachen selbst vorstellen. Manchmal ist es einfach einfacher , rauszugehen, um es zu illustrieren, aber ich weiß, dass nicht jeder Illustrator hat Das Programm wird die Fähigkeiten und den Illustrator beinhalten. Aber ich finde, als UX-Designer habe ich darüber gesprochen, ein bisschen zu veranschaulichen, vor allem die Illustration, die einen Anfang und einen Pfad zeichnet. Es könnte also der nächste Kurs nach diesem sein, ich habe einen Kurs für Illustrator Es gibt Essentials und dann Advanced. Wenn du dorthin gehen willst, wirst du es am selben Ort finden. Du hast das. Suchen Sie einfach nach Illustrator Essentials oder Illustrator Advanced Cross-Selling In Ordnung, das ist es. Wir sehen uns im nächsten Video. 88. Nutze Adobe-Schriftarten und lokale Schriftarten in Figma: Hallo alle zusammen. In diesem Video werden wir Adobe-Schriftarten in Figma installieren Sie sind standardmäßig nicht da drin, und es sind irgendwie zwei Wege Wir beginnen mit der Desktop-Version von Figma, okay, die heruntergeladen und auf Ihrem Computer installiert wird Und dann machen wir die Webversion. Sie sind etwas anders. Adobe Fonts ist jetzt ein kostenpflichtiger Teil der Adobe-Lizenz. Wenn Sie dieses kostenpflichtige Abonnement nicht haben und dieses Video überspringen, können Sie keine Adobe-Schriftarten verwenden oder zumindest können Sie nur die kostenlosen verwenden. Und oft sind die kostenlosen sowieso schon in Figma installiert, weil Figma Google-Schriften als Basis verwendet, das sind kostenlose Schriften für den kommerziellen Gebrauch, aber wir haben ein Abonnement Adobe-Schriften und die Bibliothek ist viel größer Ein paar wirklich coole Schriften sind hier drin. Ich will sie nicht benutzen. Zuallererst müssen wir eine Adobe-Schrift finden. Du kannst damit beginnen, ich habe hier die Creative Cloud-App auf meinem Mac geöffnet, öffne sie auf dem PC, ich muss das irgendwie öffnen Und ich sehe, dass ich meine Schriften verwalten kann. Zuallererst ist es nicht so nützlich, eine Schrift in Creative Cloud zu finden ? Sie können sich einfach mit Ihrem Adobe-Benutzernamen auf fonts.adobe.com anmelden und Ihr Passwort vergessen. Ich habe nur versucht, das zurückzusetzen. Steigen Sie endlich ein und suchen Sie sich dann eine Schrift aus. Ich werde durchsuchbare Schriften verwenden und es wird etwas Zufälliges auswählen Wir werden uns die variablen Schriftarten ganz oben ansehen , weil sie wichtig sind, und das ignorieren. Und ich werde auswählen, und ich werde einen auswählen, warte dort. 10 h später. Wählen Sie eine beliebige Schriftart aus. Okay, ich habe mich für diesen entschieden, rockgrotesk Sie müssen also die Schrift aktivieren. Brauche ich das alles? Ich werde sie alle einschalten. Weil ich das von der Website aus machen kann, oder? Es sendet ein Signal an Ihre Creative Cloud-App. Und hoffentlich in einer Sekunde, hey, schau, da ist es. Und es wird anfangen, es zu aktivieren. Großartig. Es ist jetzt also so wie mein gesamter lokaler Computer auf meinem Laptop verfügbar. Oh, hier sind die anderen. Aber du wirst sehen, wenn du nach Figma schaust, wenn ich das nehme und tatsächlich Rock sage, gibt es keine Rockschrift Rocker-Aufgabe. Was Sie also tun müssen, Deutschland öffnet und schließt Figma Also auf Wiedersehen Figma, ich komme zurück. Figma. Und hoffentlich sind jetzt unter in Ordnung. Ok, wir sind grotesk. Da ist es da. Wie cool ist das? Ist eine variable Schrift. Ist es nicht. Aber Sie haben gesehen, dass es viele Optionen gab. Schön, wenn es immer noch nicht funktioniert oder du Schriften hörst, an denen wir arbeiten und jetzt nicht. Was Creative Cloud macht, ist, dass Sie zig Schriftarten installieren können zig Schriftarten installieren Was es regelmäßig macht, heißt es, niemand benutzt diese Schrift schon lange. Kannst du frühere aktive sehen? Okay, dieses Layout könnte sich ändern. Möglicherweise müssen Sie nach zuvor aktiven oder inaktiven Schriftarten suchen. Also ich habe das schon einmal benutzt, aber sie wurden alle ausgeschaltet. Warum? Denn wenn ich etwas wie Photoshop oder Illustrator lade, wenn es die Load Rulers Fonts als Teil seines Starts hat Und wenn Sie eine Bazillion haben, dauert es ewig, was es tut, ist, es geht, es geht, es geht, es geht heimlich, ohne zu fragen, Sie haben es sehr lange nicht benutzt Es wird diese abnehmen und den Anschein erwecken, dass es schneller geladen wird. Es wird schneller geladen. B könnte feststellen, dass einige von ihnen ausgeschaltet werden. Du wärst also vielleicht hergekommen und gesagt , mach das wieder an. Okay, und es wechselt zum aktiven Schriftmenü. Und dann musst du Figma schließen, wieder geöffnet Lassen Sie mich in den Kommentaren wissen, wenn Sie weitere Probleme mit der Desktop-Version haben. Das große Problem ist sicherzustellen, dass Creative Cloud, die App von Adobe, geöffnet ist und Jiminy mit allem anderen installiert wird Und stellen Sie einfach sicher, dass Sie Figma neu starten, schließen und wieder öffnen Ordnung, für die Leute, die die Browserversion verwenden, werde ich zu Figma springen Okay, also die Browserversion, ziemlich genau die gleiche wie die Desktop-Version, läuft auf demselben Backend-Zeug Was Sie tun müssen, um sicherzustellen, dass dies funktioniert, sind zwei Dinge. Sie müssen zu Ihrem Konto gehen. Gehen Sie zu den Einstellungen und stellen Sie hier unter Schriftarten sicher, dass lokale Schriftarten aktiviert sind. Wenn das erledigt ist, brauchst du etwas anderes. Okay, wenn Sie zu den Figma-Slash-Downloads gehen, was sind die Optionen hier , sind die Font-Installationsprogramme Wählen Sie also Ihren giftigen Mac oder PC. Denken Sie daran, dass dies nicht erforderlich ist, wenn Sie die reine Desktop-App verwenden Regel installiere ich sie auch einfach In der Regel installiere ich sie auch einfach, weil ich oft an Projekten anderer Leute arbeite und am Ende im Browser arbeite, ohne es zu wissen, weil es funktioniert. Installieren Sie das auf ähnliche Weise und dann müssen Sie Ihren Browser aktualisieren. Hier in Figma öffnest du also dein Dokument und drückst auf Aktualisieren Wenn das nicht funktioniert, schließen Sie es und öffnen Sie ein Backup. Jetzt verwende ich Chrome hier, und das schlägt Figma vor Es läuft in verschiedenen Browsern. Wenn du keine weiteren Skurrilitäten, Trichrome, Save-Effekte hast , oder? Weil ich denke , das unterstützt Figma mehr als alles andere , was Ihr Problem verursachen könnte Und von hier aus ist es genau wie bei der Desktop-Version. Sie melden sich bei Ihrem Adobe-Konto an, wählen einige Schriftarten aus, aktivieren sie und stellen sicher, dass Creative Cloud auf Ihrem Computer geöffnet ist. Hoffentlich finde ich sie in den aktiven Schriften und lade dann den Browser neu Sie sollten eine Möglichkeit sein, in Ordnung, alle zusammen, so können Sie unsere Adobe-Schriftarten in alle Figma-Dateien In Ordnung, das ist es. Wir sehen uns im nächsten Video. 89. Beibehalten von Text-Overrides oder nicht in der Figma-Variante: Hallo zusammen, Willkommen zum langweiligsten Video mit gemeinen Namen im gesamten Kurs. Wie man Textüberschreibungen beibehält oder nicht. Bei den Figma-Varianten liegt der Ohrwurm darin, dass ich diese Videos durchsuchbar machen möchte und es manchmal schwierig sein wird, sie zu finden, wie sie heißen, und manchmal werden sie zu und manchmal werden sie stinkenden Titeln wie Aber lohnt es sich, es anzusehen? Das ist es auf jeden Fall. Ich zeige Ihnen standardmäßig die beiden Optionen. Was in Figma passiert, ist, wenn ich diesen Text ändere, dies ist eine Instanz mit einer Variablen Es gibt zwei davon, einen, um ein kleines Tidal zu beginnen, aber sie haben tatsächlich unterschiedliche Anzahl von Charakteren, die sie verwenden können Standardmäßig passiert das, wenn ich diese Art von Premium-Angebot ändere diese Art von Premium-Angebot das mehr Zeichen erlaubt, und ich gehe und es auf diese andere Variable umstelle, die Texte bleiben bestehen, kommen mit und das ist die Standardeinstellung Normalerweise willst du das, aber nicht in diesem. Ich möchte, dass der Benutzer meiner Komponente hier weiß, dass es eine bestimmte Anzahl von Zeichen gibt. Ich möchte nicht, dass es sich automatisch ausschaltet, und genau das wird dieser tun. Okay, ich kann den Text hier in der Premium-Version ändern. Aber wenn ich es auf die andere Variante umstelle, kannst du die Zecken sehen? Variante kommt also und überschreibt das, was ich ursprünglich dort geschrieben habe Das ist es, was du die meiste Zeit willst, mach einfach weiter. Es gibt jedoch Zeiten , in denen Sie den Text benötigen , um zwischen den Varianzen zu wechseln Lass mich dir zeigen, wie das geht. Ordnung, die Standardaktion für Instances ist wahrscheinlich die richtige Und mit richtig, meine ich das, werde ich eine Instanz herausziehen. Und wenn ich den Text hier ändere, um mich anzumelden, und dann gehe ich zu einer dieser anderen Variablen. Obwohl diese Variable sagt, dass es sich um die primäre Schaltfläche handelt, ist meine Änderung an den Tics die Persistenz Also werde ich hier rübergehen und Staat zu Holla sagen. Es hat die Hintergrundfarbe und vielleicht auch die Größe verwendet. Aber der Text ist anhaltender Zerfall, den der Text überschreibt, den ich gemacht habe, macht weiter Aber es gibt Zeiten , in denen Sie das nicht tun. Also werde ich zu meiner anderen Seite springen. Okay, was ich hier habe, ist ich zwei Eventlisten habe und wir können zwischen einem Premium-Event und einem regulären Event wählen , Get Less Characters verwenden und ich wähle nicht einfach eine Schriftart für sie aus. Und ich habe erwähnt, dass es nach oben gedrängt wird. Und um es auf den Punkt zu bringen, ich werde es richtig machen, aber zur Sache, wenn ich diese eine namens Nachricht und diese hier, die Nachricht heißt, habe hier, die Nachricht heißt, , verwandle sie in Varianten. Figma geht davon aus, dass es austauschbare gibt. Sie werden nur Nachricht genannt. Wenn Sie sie anders benennen, überschreiben sie sich gegenseitig Lass es uns nur für den Fall tun, dass das nicht klar war. Ich werde das hier rausschneiden. Ich werde es in einen Rahmen stecken. Befehlsoption G, Steueroption G. Das Gleiche gilt für diesen. Es ist wie bei beiden. Und lassen Sie uns daraus eine Komponente machen. Bis jetzt haben wir eine Komponente erstellt und eine Variable hinzugefügt. Wir haben es anders verwendet, um es zu vermischen. Schauen wir uns also an, wie es standardmäßig falsch funktioniert Ich halte meine Wahltaste gedrückt und ziehe es auf eine Instanz. Die Person, die das benutzt, kann das durchgehen und sagen, okay, ich füge mein schickes Inserat Richtig buchstabieren? Und sie können gehen und wählen , lassen Sie uns eine andere Variable wählen. Kannst du sehen, dass es sich ändert, aber das Listing-Event ist immer noch Leah. Und wenn sie es wirklich lang machen, wie sie es in der Premium-Version tun können, werden ihnen die Charaktere ausgehen. Es wird mein Layout ruinieren. Also, wie bekomme ich es so, dass es zu dem Text wechselt, der in diesem anderen aufgeführt ist. Zur Erinnerung und um allen eine Zeichenzahl zu geben , die auch funktioniert müssen wir das hier nur sagen. Befehlsklick, Strg, Klick. Okay, da steht Nachricht. Befehlen oder kontrollieren wir R. Benennen wir es um. Los geht's, Nachricht, das ist unsere Premium-Nachricht. Dieser hier wird regelmäßig sein. Geh. Lassen Sie uns das jetzt zurücksetzen. Du hast gesagt, dass sich alles ändert. Lassen Sie uns es auf unsere Premium-Version umstellen. Jetzt macht das jemand durch, okay, sie ändern es und sie sagen, Oh toll, ich werde das wieder für etwas anderes verwenden. Und ich sage, ich werde eine kleinere Version verwenden. Schau, die Häkchen werden wieder auf diese Eventlisten umgestellt und es liegt im Grunde daran , dass die Layer-Namen unterschiedlich sind. Das ist alles. Nun, das könnte gegen dich arbeiten, jemand, der du bist, warum wechselt es ständig? Sie können zurückgehen und diese einfach im Komponentensatz umbenennen , okay, suchen Sie die Variable und stellen Sie sicher , dass sie genau den gleichen Namen haben Ordnung, das ist das Ende des am besten benannten Videos in diesem Kurs Wie man Textüberschreibungen in Figma-Variablen beibehält oder nicht. Nützlich. Ich habe versucht, diese Titel durchsuchbar zu machen Sie können also in die Suche gehen und herausfinden, wo sie sich befinden Mann, das ist ein wirklich unsexy Titel, aber nützlich. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 90. Nutze Chat GPT, um Platzhalter und Personas in Figma zu erstellen: Hallo zusammen. In diesem Video schauen wir uns künstliche Intelligenz an , insbesondere Chat GPT zur Erstellung von Platzhalterinhalten und anderen UX-Aufgaben in Und wenn du die Augen verdrehst und nicht U2 AI, ja, ich bin dieser Typ. Bleiben wir hier. Ich zeige Ihnen, dass es ziemlich nützlich ist, besonders wenn Sie ein Liebhaber von Loren Ipsum sind Eigentlich erstellen wir schnell eine Eventliste, einige fiktive. Wir fragen Chat GPT, welche Funktionen in einer bestimmten App enthalten wären Dann habe ich dich gebeten, eine Persona zu erstellen, Alex. Die Ergebnisse sind ziemlich beeindruckend. Wenn nichts anderes, gibt es gute Startpunkte oder ich benutze es die ganze Zeit für Dinge wie diese bei denen ich zu jedem Inhalt etwas stylen muss und es nicht nur darum geht, dass Loren Ipsum auf der Website sein wird, die sich seit 1 Million Jahren nicht geändert hat Chat GPT ist dafür also hervorragend. Ich habe so etwas wie vordefinierte Dinge aufgeschrieben, aber ich tippe es einfach ein. Es ist erstaunlich, wie gut es ist. Also habe ich nach einer fiktiven Veranstaltung gefragt, Zuhören für ein Techno-Event in Limerick wird über den Es ist spektakulär, darauf zu warten, dass es fertig ist. Wie gut ist das? Schau? Bereit zum Rudern. Und dann kannst du Dinge machen wie, ich weiß nicht Sagen wir, ich brauche es für 200. Machen wir 300 Zeichen oder weniger, Zeichen oder weniger. Lass es irgendwie seine Magie entfalten. Du durchläufst hundert Zeichen oder weniger. Nun, das ist kostenlos, irgendwie magisch, vielleicht nicht, wenn du es tust Chat GPT ist vielleicht nicht das, was ich in dem Moment, in dem ich wirklich zufrieden damit bin, sagen wir, ich möchte drei Varianten davon für meine Angebote Und ich werde das schnell erledigen. Schau dir die Variante 12.3 an, alles einzigartig. Achten Sie darauf, dies nicht auf einer Live-Website und in Ihrem gesamten Text in Ihren Zecken für eine Website zu verwenden . Ich weiß, dass Google Fehler überprüft und Personen bestraft , die von KI erstellte Inhalte verwenden Ich bin mir nicht sicher, wie sich der ganze Staub legen wird, aber mein Rat ist, ihn nicht auf einer Live-Site zu verwenden , ist auch für andere Dinge gut. Nehmen wir an, ich mache ein anderes, wann immer ich mit einem Briefing beginne, entwerfe ich diese App. Das habe ich für diesen speziellen Kurs gemacht. Ich dachte, ich hätte so etwas eingetippt. Und ich möchte mich in einem neuen Chat eigentlich nicht regenerieren. Und in diesem wird er mir zehn Hauptmerkmale für eine Veranstaltungsliste geben . Und ich könnte das machen und es dauert nur eine halbe Stunde und jetzt, aber es ist ziemlich spektakulär wie nahe es dem kommt, was ich am Ende erreichen würde. Und es ist ein guter Ausgangspunkt, auch wenn nichts anderes, Öko-Ten-Funktionen, die wir als Ausgangspunkt verwenden können. Sie können irgendwie weiter versuchen, die Reaktionen zu regenerieren, um sie näher an das zu bringen, was Sie wollen Lassen Sie uns noch einen machen, den ich ziemlich häufig verwende, die Anwendungsfälle endlos sind. Du möchtest eine UX-Persona für mein Techno-Event erstellen. Lehnen Sie sich zurück und entspannen Sie sich. Alex ist 25 Jahre alt. Er ist natürlich in Berlin, Zonen. Und es gibt uns Hintergrundinformationen. Für mich. Ich finde diesen Teil des Prozesses. Ich weiß, was ich will, und es fällt mir schwer, es in Worte zu fassen. Für mich ist es also ein wirklich guter Ausgangspunkt. Werde ich das wörtlich verwenden? Wahrscheinlich nicht, aber Mann, es ist ein guter Kursstartpunkt oder eine Vorlage. Mann. Oh, ich bin hübsch, ich gewöhne mich gerade daran. Aber Mann, das ist neu und aufregend. Wenn Sie sich noch nicht mit KI beschäftigt haben, ist GBT for UX gut und fühlt sich an wie etwas, das ich in meiner Arbeit verwenden kann , anstatt vielleicht flauschiges KI-Zeug in der Zukunft, bodenständig, nicht vor Ort Das wollte ich. Denken Sie daran, dass ich Chat GPT verwende Das ist vielleicht nicht der Fall Chat GPT ist vielleicht abtrünnig geworden und ich weiß nicht, hat inzwischen ein Land übernommen und ist möglicherweise nicht verfügbar Aber ich wette, es gibt eine andere Alternative dafür. Kostenlos, vielleicht kostenpflichtig, vielleicht sowieso, es ist eine großartige Möglichkeit, Platzhaltertext anstelle von Loren Ipsum zu bekommen , das ich in der Vergangenheit häufig verwendet habe Und das sind nur Texte. Lassen Sie mich nicht einigen Bildgeneratoren beginnen. 91. So erstellst du einen Bildstil in Figma: In Ordnung, es ist Zeit, zu Bildern überzugehen. Ich beginne mit einem netten kleinen Trick, mit dem wir ein Bild drehen können , das wir vielleicht immer wieder verwenden. Es könnte unser Heldenbild sein, Sie werden es zur Veranschaulichung verwenden, das wir überall verwenden , anstatt es jedes Mal importieren und in Dinge einbauen zu müssen Mal importieren und in Dinge einbauen wir tun können, ist, es in einen Stil zu nehmen und es auf viele Dinge gleichzeitig anzuwenden , und es dehnt sich und passt. Es ist großartig. Dann werden wir richtig gruselig und zeigen dir einen. Also, wenn Dans schmuddeliges Gesicht ist, okay, der Bildstil Schauen wir es uns an und ignorieren Sie einfach die gruselige Dan-Phase. Okay, um loszulegen, ich möchte, dass du ein Bild machst und ich möchte, dass du einen Rahmen nimmst, einen Kreis zeichnest und etwas Text eingibst. Das Bild habe ich gerade von Unsplash bekommen, okay, aus der App, als ich eine Zusammenfassung und eine runter bekommen habe, da ist es genau da Okay, und ich werde es auswählen. Und was Sie hier im Eigenschafteninspektor feststellen werden im Eigenschafteninspektor , ist, dass ein Bild eigentlich nur eine Füllung ist. Und wir wissen von früher, dass wir Stile füllen können , wie wir es ohne Grundfarben getan haben . Das Gleiche, das Gleiche. Also gehe ich da rein und drücke auf Plus. Und das wird der Name meines Stils sein, es wird ein abstraktes Bild sein und am Ende haben alle einen anderen. Okay, und das war's. Dann gehst du einfach und wendest es an. Also ich sage, du hast einen Füllstand von nicht Primary 50. Das werde ich los. Sie haben also eine Füllung aus einem meiner Stile und ein abstraktes Bild eines. Los geht's, sieh dir das an. Die eine Sache, mit der Sie möglicherweise auf Probleme stoßen, ist manchmal unwahrscheinlich, wenn es ausgewählt ist , wenn Sie es zuerst zugeschnitten haben Okay, Save hat es beschnitten. Der Stil für dieses Ding, das sich jetzt unter Füllung befindet, ist auf Crop eingestellt. Und es könnte Ihnen nur Probleme bereiten , weil wir wollen, dass es sitzt und sich füllt, sodass es sich selbst in der Größe anpasst, um die verschiedenen Formen auszufüllen Wenn Sie den Stil erstellen, stellen Sie also sicher, dass er auf „Füllen“ eingestellt ist. Und dann kannst du rübergehen und ein paar Dinge auswählen und sagen, okay, und will nicht mein vollständiger Stil des Escherichia-Bildes Aber meine Güte, ich habe hier meine Event-Karte, ich werde mehr Immobilien zeigen Da ist mein Füllbild, ich kann eigentlich gehen, nehmen wir einfach das. Nett. Wenn Sie jetzt denken: Eigentlich wissen Sie, was ich wirklich will, ich brauche, dass wir dem Tanz mehr Gesicht geben. Okay, also dasselbe. Ich werde den Link trennen und kreieren und du stylst. Es wird diesen Bildhintergrund haben, indem es eine weitere Füllung für Schwule haben wird . Und ich klicke darauf und sage, lass uns das Bild nicht füllen. Ich wähle das verrückte Bild. Okay. Wählen Sie Dance Head aus und wiederholen Sie zwei davon aus dem Ordner Images in Ihren Übungsdateien. Okay? Was ich machen werde, ist eine Krawatte anzulegen, es viel kleiner zu machen. Alles. Und was ich wahrscheinlich tun muss, ist mit der Opazität herumzuspielen Wenn Sie eine zweite Ebene hinzufügen , beträgt die Standardeinstellung 20 Prozent Es wird es zu 100% bringen. Wenn deine Ebenenreihenfolge falsch ist, siehst du daneben die kleinen Linien, von denen du sagen kannst , dass du das eigentlich davor haben willst , ziehst du sie einfach nach oben. Ordnung, jetzt kann ich dieses Fitnessstudio in einen Stil verwandeln, okay, und das wird der Query Dan-Stil sein Und jetzt kann ich sagen, dass ich eigentlich möchte, dass du es erstellst, installierst. Schau, wie cool das ist. Meine schlechteste Maske aller Zeiten. Schau nicht zu genau hin. Bearbeiten. In Ordnung. Das ist eine Art, wie man ein Bild in einen Stil verwandelt , der besonders nützlich ist, wenn man ein Heldenbild hat, Art Illustration einer Grafik, die man oft verwendet und viele Male in einen Stil verwandelt, ihn mit dem Team teilt. Jeder kann es benutzen. Sparen Sie Zeit beim Herumsuchen und versuchen Sie, überall Bilder einzufügen In Ordnung, das ist es. Weiter zum nächsten Video. 92. Was ist der Unterschied zwischen Bildern in Frames und Füllungen und maskierten in Figma: Hallo zusammen. In diesem Video werden wir uns diese drei verschiedenen Optionen Bilder in eine Box zu legen. Wie aufregend es ist, ist aber sehr wichtig, weil es viele Leute begeistert. Vor allem, wenn wir im Kurs weitermachen, weil man einen Rahmen haben kann , der nichts enthält, sondern nur ein Bild als Füllung. Dieser hier ist ein Rahmen , in dem sich ein Bild versteckt. Diese hier ist eine Moscheegruppe, in der sie viel komplexer ist. Es gibt ein Maskierungsobjekt und ein Bild und die Gruppe für schnelle Masken Sie werden auf alle Anwendungsfälle stoßen, und sie funktionieren alle etwas anders Und nach diesem Video wirst du wissen, wie sie funktionieren, damit du nicht zu oft erwischt wirst. Okay, lassen Sie uns loslegen, richtig, um loszulegen, ich habe drei Frames gemacht, das war's. Okay. Frame 1.718.19 ohne triftigen Grund in einige Zecken darunter Schauen wir uns die verschiedenen Möglichkeiten an, Bilder einzufügen. Die erste und gebräuchlichste, nützlichste und flexibelste ist also , einfach einen Rahmen zu haben und ihm eine Füllung in dieser Farbe zu geben. Aber alles eine solide Note eines Bildes. Wählen Sie das Bild aus. Ich werde es von unserer Übungsdatei zu Bildern holen unserer Übungsdatei , das heißt Produkt eins. Okay, das Coole daran ist standardmäßig so eingestellt ist, dass es gefüllt ist. Es bedeutet also, dass es sich dehnt und sich positiv auf die Reaktionsfähigkeit auswirkt Wir können das durchgehen und sagen wir es tatsächlich schneiden wollen, okay? Ich kann die Kanten anfassen und den Rahmen ändern. Ich klicke auf das Bild K und spiele damit herum und ordne es hier neu an. Es ist also ziemlich flexibel. Und rückgängig machen. Die andere Möglichkeit besteht darin, ein Bild in den Rahmen zu legen. Kannst du hier die letzte Struktur sehen? Es gibt keinen kleinen Chevron. Sie, ich kann nicht, hier ist nichts drin. Es ist ziemlich aufgeräumt. Es ist nur die Füllung, die auf den Rahmen aufgetragen wurde. Bringen wir ein Bild ein. Lassen Sie uns die Befehlsschalttaste K, Strg-Umschalttaste und einen PC verwenden, oder klicken Sie auf In Komponente konvertieren, was der Befehlsoption K sehr ähnlich ist . Das mache ich die ganze Zeit. Hoppla. Ich werde das Produkt mitbringen und eine Sekunde warten und es dann einfach hier einfügen. Dieser Unterschied ist zuallererst riesig. Zweitens, kannst du hier an meinem Rahmen die gleiche alte Füllfarbe sehen und sie loswerden. eigentlich nichts, aber das Bild ist drin. Du gehst, es ist ein separates Objekt. Deshalb skaliert und verkleinert es nicht. Und wenn ich die Größe ändern möchte, sodass sie in diesen Rahmen passt, kann ich darauf doppelklicken, da mir klar ist, dass es viel zu groß Zoomen Sie raus, da ist es. Okay. Halten Sie Shift gedrückt. Es ist also einfach eine schlechtere Art, es zu tun. Okay. Aber am Ende machst du das die ganze Zeit so. Und manchmal ist es einfacher, als das zu versuchen und zu versuchen, den Zuschnitt vorzunehmen und zu versuchen, es hier einzufügen, Sie sehen, dass auf das Bild eine Füllung aufgetragen wurde. Ich kann das kopieren, loswerden und löschen. mir meinen Rahmen geschnappt, der da die Bildebene tatsächlich los Gehe zu meinem Rahmen, füge ihn einfach dort ein. Jetzt ist es viel stärker vernetzt, unruhig, aber genau da bleiben viele Leute stecken, besonders im Laufe dieses Kurses Wahrscheinlich ist es besser, eine Füllung zu sein. Wenn du das ganze separate Ding darin machen willst, solltest du vielleicht eine Moschee bauen. Lassen Sie uns das als letzte Option tun. Also werde ich Produkt drei einbringen. Kann viel zu groß sein, also halte ich die Umschalttaste gedrückt und ziehe es heraus, klebe es auf meinen Rahmen, klicke auf die Maskenschaltfläche und dann gehst du, du landest an einer ähnlichen Stelle. Es ist eine ganz andere Struktur hier. Wir haben diese Maskengruppe. Jetzt ist darin mein Bild. Und dann ist das die Sache, die es maskiert. Ich kann also unabhängig daran arbeiten, an dem Rahmen, um dich auf meiner Maske zu sagen, und ich kann an meinem Bild arbeiten, Größe ändern und es neu positionieren Wir landen also an einem sehr ähnlichen Ort. Wir können das gesamte Zuschneiden vornehmen, egal ob es sich um eine Füllung handelt, ob es sich um ein Bild innerhalb eines Rahmens handelt, ob es sich um eine Füllung eines Rahmens handelt, ob es sich um ein Bild innerhalb eines Rahmens handelt oder ob es sich um eine Maske handelt , die aus zwei Zutaten besteht Die Maske, das Ding, das die Maske macht, und das Bild selbst. Aber wenn wir es von hier aus betrachten, werden sie dasselbe tun, aber verschiedene Methoden, um dorthin zu gelangen , füllen diese Bilder meistens aus. Aber wie dem auch sei, ich wollte nur auf die Unterschiede hinweisen , bevor wir zu weit gehen, weil es viele Leute erwischt In Ordnung, das ist es. Bild füllen, füllen, füllen. Wir sehen uns im nächsten Video. 93. Zuschneide von Bildern mit Shortcuts in Figma: Hallo alle zusammen. Nett, einfach. Wir werden uns ansehen, wie man Bilder mit ein paar tollen Abkürzungen zuschneidet Bilder mit ein paar tollen Abkürzungen zuschneidet Es springt gleich zu Beginn, ich habe drei Bilder reingeworfen. Sie können sie von überall her bekommen. Okay, ich habe sie gerade hier auf meinen Desktop geladen. Sie stammen aus den Übungsdateien. Das sind die gruseligen Hühner, die letzte Woche gemacht wurden, dann ein paar Videos für dich, aber Mann, die scheinen diese Woche gruseliger zu sein Schauen wir uns also das Zuschneiden an, damit wir darauf klicken können Hier gibt es eine Option zum Zuschneiden Und wir klicken darauf und können mit dem Zuschneiden beginnen. Okay, es gibt aber einen besseren Weg. Wenn ich auf Rückgängig klicke, mache ich es erneut rückgängig. Okay, was ich tun möchte, ist, wenn Sie ein Bild ausgewählt haben , es ist jetzt nur ein einfaches altes Bild. Wenn ich nach der Kante greife, wird die Größe einfach irgendwie angepasst. Aber wenn ich auf einem Mac die Befehlstaste und auf einem PC die Strg-Taste gedrückt halte , können Sie sehen, wie Sie ganz einfach diese Kanten anfassen können , um die Größe zu ändern und sie zuzuschneiden Das ist der beste Weg. Das ist mein liebster Weg. Halten Sie auf einem Mac die Befehlstaste und auf einem PC die Strg-Taste gedrückt. Die andere praktische Abkürzung ist, es auf diese Weise zu tun. Du kannst nicht wirklich sehen, wie groß es ist. Was Sie also tun können, ist Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt zu halten und darauf zu doppelklicken. Du kommst hier in diesen Modus, der dir gefällt. Sie können also sowohl den Rahmen sehen, der ihn irgendwie zuschneidet , als auch das eigentliche Bild selbst Und Sie können das Bild aufnehmen, seine Größe ändern und die Umschalttaste gedrückt halten, damit es die Skalierung nicht Also hier unten, doppelklicken, es funktioniert nicht. Wenn Sie die Wahltaste gedrückt halten oder bei gedrückter Alt-Taste doppelklicken, können Sie diesen Zuschnitt erhalten. Sie können mit diesen separat arbeiten. Hängt davon ab, wie Sie arbeiten möchten. Oder der, den ich am häufigsten benutzt habe, hält einfach den Befehl gedrückt. Und du kannst Dinge aufzählen. Da haben wir's. Let's Control auf einem PC, Sie haben eine praktische Lösung: Wenn ich das Rahmenwerkzeug nehme und das als Füllung hineinfüge, wenn ich das hineinlege, wird es zu einem Bild innerhalb des Rahmens. Nur zur Erinnerung: Wir können Eigenschaften, die diese Füllung enthalten , kopieren und einfügen. Also werde ich die Befehlsoption C gedrückt halten, um Eigenschaften zu kopieren, das ist Strg Alt C. Dann funktioniert Befehlsoption B irgendwie, verschiebt sie an einer anderen Stelle, weil ich diesen Zuschnitt hier gemacht habe Es dehnt es irgendwie aus, um das zu beheben. Du kannst reingehen und sagen, nicht ernten, lass uns füllen. Los geht's. Also Doppelklick mit Befehl oder Wahldoppelklick auf einem Mac oder Doppelklick mit Strg und Alt. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 94. Maskiere Bilder mit Text in Figma: Hallo alle zusammen. In diesem Video schauen wir uns an wir Bilder in Text einfügen. Der einfache Weg ist, auf Füllen zu klicken , zu Vollbild zu wechseln, Bild auszuwählen, Bild auszuwählen und fertig. Was wir aber tun werden, ist in diesem Video, ich zeige Ihnen verschiedene Möglichkeiten und ich zeige Ihnen den Unterschied zwischen Maskierung und Füllung. Dabei werden mehrere Bilder hineingelegt, sogar ein Vektor wird zusammengedrückt Und ich werde mir ein paar Dinge ansehen , die Sie vielleicht überraschen könnten. Ordnung, springen wir rein. habe ich ein paar Bilder mitgebracht, alles Mögliche mitgebracht. Ich habe einige in die Übungsdateien mit dem Namen water oh, 12.3 gelegt , nur um sie als Beispiele zu verwenden, aber Sie können jedes alte Bild verwenden Okay? Und um das Bild in das Textfestival zu bekommen, das benötigt wird, muss es dick genug sein , damit man das zu dünne Bild darin sehen kann . Hermine ist die Abkürzung, um das Gewicht größer zu machen oder was praktisch ist, es ist die Befehlsoption und je größer als und kleiner als, okay, das ist Control-Alt größer als und kleiner als, und Also ich habe etwas Nettes und Klummes. Ich werde auch den K2 verwenden, um meinen Typ zu skalieren. Erinnerst du dich an den Trick? Besorgen Sie sich einfach etwas , das zu meinem Bild passt. Und meiner Meinung nach ist es am besten dies auszuwählen, und es muss nicht einmal in der Nähe sein. Wir werden die Kopiereigenschaften verwenden wie wir es im letzten Video gelernt haben. Denken Sie daran, dass dies Befehls-Option und C oder Strg-Alt-C und dann Strg-Alt V oder Befehlsoption V auf einem Mac sind, die es in diese Füllung einfügen. Das kopiert die Eigenschaften, in diesem Fall die Füllung. Und wir fügen es hier ein. Und ich lege es in einen Rahmen , damit wir es tatsächlich sehen können. Das Schöne daran ist, dass es veränderbar ist. Okay? Wir können Sachen löschen und wir können sie laut machen. Kannst du sehen, wie sich das Bild verändert , um es im Hintergrund auszufüllen? Deshalb ist es wirklich nett. Und der Schichtaufbau ist wirklich nett. Gates tippt einfach mit einer Füllung darin. Einfach. Sie können es nachträglich anpassen, sobald Sie sitzen Standardmäßig ist es gefüllt. Es wird also versuchen, jeden Teil des Typs abzudecken. Manchmal möchte man in einem Teil des Bildes sitzen. Ich hole das raus und ich hätte am Anfang ein Duplikat machen Du hast ein weißes Feld, das kann grau sein, das ist okay. Lass uns dann ein paar Kaffees machen. Wir haben diesen. Nehmen wir an, Sie möchten einen bestimmten Teil dieses Bildes haben, vielleicht den oberen Teil , nicht den unteren. Eigentlich benutzt es dieses Bild hier. Wir wollen es hier also nicht genau in der Mitte haben. Wir wollen, sagen wir, nach unten. Also, was wir tun werden, ist es mit unserem Shortcut zu kopieren und es dann hier einzufügen. Okay, was wir tun können, ist die Abkürzung von der letzten zu entfernen. Wir können durchhalten. Wie bekommen wir all das zusätzliche Erntegut draußen hin Jetzt halten Sie Kiwis gedrückt, dann doppelklicken wir auf die Taste is all you got Option auf dem Mac, Alt auf einem PC Also doppelklicken Sie einfach darauf. Jetzt können wir den Rahmen sehen und wir können sagen, dass ich ihn verschieben und vielleicht seine Größe ändern möchte , okay, die Umschalttaste gedrückt halten Also wollen wir den oberen Teil davon. Wir werden nicht versuchen, die Seifenblasen durchzubekommen. In diesem Modus können wir die Größe auch ändern. Okay, vielleicht ist es das, was du willst. Los geht's Escape, um rauszukommen. Die eine Sache, wenn du es von Füll Zwei änderst, denn in dem Moment, in dem das Bild standardmäßig gefüllt ist, haben wir es geändert, indem wir diese das Bild standardmäßig gefüllt ist, haben wir es geändert, Tastenkombination gedrückt haben , um zu entkommen. Dieser hat jetzt eine Ernte. Kannst du hier die Breite und Höhe sehen? Die eine Sache, wenn ich die Größe ändere , mache ich es wirklich klein. Und als Beispiel, und schau dir das an, wenn ich Alt oder Wahltaste darauf doppelklicke. Kannst du sehen, was es gemacht hat, dann ist es irgendwie fertig. Das würden wir beschneiden. Ich weiß nicht, warum es das tut, aber es tut es. Das ist eine Sache, die es zu beachten gilt. Vielleicht musst du das durchgehen und sagen, nicht hilfreich. Ich werde es kopieren und wieder einfügen. Ordnung, also ich habe es rückgängig gemacht, bis ich zurück die andere Art können Sie Bilder zuschneiden Wir haben uns das vor ein paar Videos angesehen, Füllen versus Zuschneiden Okay, ich werde mir das hier für dieses Bild schnappen. K-Tools machen es schön und groß. Mach es eigentlich einfach mit diesem hier. Kannst du einfach beide auswählen und eine Maske erkennen lassen, rückgängig machen, dass dies die Rückseite sein muss, das sind die offenen und geschlossenen eckigen Klammern nahe der Spitze. Schick es nach hinten, wähle beide aus, geh zur Moschee. Daran ist nichts auszusetzen, außer das Ebenenpanel etwas komplizierter ist. Ich zeige Ihnen diese beiden Möglichkeiten, weil Sie die Arbeit anderer Leute bekommen, die Sie auf diese Weise gemacht haben. Und einige von ihnen werden es mit Es ist nur dieser Text so gemacht haben . Okay? Es ist nur ein Bild darin. Der Grund, warum du das so machst ist, dass es keinen wirklich guten Grund gibt, den ich mir vorstellen kann. Es ist praktisch, wenn Sie mehr als eine Sache maskieren möchten. Weil ich sagen kann, dass du dieses hier haben willst, dass Bilder drin sind, weil es eine nette, einfache Gruppierung ist, um zu sagen , dass ich dich da haben will und tatsächlich bist du ganz oben Okay, jetzt habe ich eine Moscheegruppe. Das ist mein Maskierungstext und alles, was darunter liegt, wir können viele Dinge hineinlegen Wahrscheinlich praktischer, wenn Sie ein Opfer haben. Okay, lass uns gehen. Ich vektorisiere hier rein. Und noch einmal, solange du schön bist, kannst du viel hineinstecken. Aber du kannst tatsächlich hier drüben, nur damit du tatsächlich mehr als eine Füllung haben kannst. Schwul. Und ich kann sagen, dass dieser tatsächlich ein Bild hat. Füllen Sie das Formular aus, um ein Bild auszuwählen, und wählen Sie dann ein Produkt aus, ein kleines Auto. Ich werde es nicht füllen. Ich schneide es ab. Weil ich sagen will, dass ich etwas Getter sage und das ist eine kleine Rübe Ich verschiebe es tatsächlich. Standardmäßig erhält die zusätzliche Füllung 20% der Füllfarbe. Sie können also tatsächlich dasselbe tun, wo ich nur einen einfachen alten Text habe. Es hat zwei Füllungen. So wie das hier. eigentlich keine Rolle, aber wir gewöhnen uns an beide. In Ordnung, das ist Maskierung mit Text. Das Essen zum Mitnehmen ist, mach es einfach so. Wir kopieren es und fügen es in vier Teile ein. Du kannst den längeren Weg gehen. Ich weiß es nicht. Ist es länger? Füllen Sie das Bild aus, wählen Sie Bild kleben Sie es hinein. Schnappen wir uns diesen. Wenn ich es jetzt schließe, gibt es absolut keinen Unterschied zu was wir gemacht haben, als wir es kopiert und eingefügt haben, alles mit einem Bild gefüllt, wir kommen zum gleichen Topf, das Beste ist, dass es die Größe ändert, weil es zum Füllen gesendet wurde, es wird seine Größe ändern und mein Bild bleibt im Hintergrund In Ordnung, lass uns loslegen. Eigentlich. Lass uns fertig und wir sehen uns im nächsten Video. Tschüss 95. Projekt 10 – Textmaske: Projektzeit für den Unterricht. Einfach. Wir werden Bilder in den Text einfügen. Ich möchte, dass du deinen App-Namen verwendest, okay? Und ich möchte, dass Sie sich in zwei separate Textblöcke aufteilen. Und ich möchte, dass Sie mit beiden Arten experimentieren , Bilder mit Text zu maskieren Wir haben uns ein früheres Video angesehen. Dieser hier ist nur die Ebene Limerick mit einer Füllung hier drüben oder dem Bild darin Okay, netter, einfacher, einfacher Weg. Ich möchte, dass du das auch so machst , wo wir diese Maskierung verwenden Es ist also eine Muttergruppe nach meinem Bild. Das ist der Typ dort. Ich möchte, dass du weißt, wie man beides macht, weil du beides von anderen Leuten bekommst , von der Community. Es gibt keinen richtigen oder falschen Weg, aber es ist gut zu wissen, wie man mit beiden umgeht. Also zwei separate Bilder in zwei separaten Textabschnitten. OPE muss es in einen Instagram-Frame legen. Also bis jetzt, ein Tastendruck, haben wir eine Menge Telefonzeug benutzt. Ich möchte, dass du in die sozialen Medien gehst und eines davon auswählst. Ich verwende den Instagram-Beitrag von mir. Du kannst verwenden, was du willst, denn wir werden im Laufe des nächsten Abschnitts eine Art Anzeige schalten. Zum einen, weil es uns ermöglicht, viele der Bildmaterialien in dieser Kategorie in diesem Abschnitt zu üben der Bildmaterialien in dieser Kategorie in diesem , aber es gibt Ihnen auch einen Hinweis darauf was viele Designer tun Sie verwenden Figma tatsächlich erfüllte Grafikdesignzwecke. Es ist nicht so, als ob ich irgendwie traditionelleres, druckbasiertes Grafikdesign dafür erstellt werden kann. Es ist nicht wirklich toll, aber je nachdem, wo du so sehr für mich arbeitest, ist meine Designarbeit jetzt eher digital orientiert, vor allem in sozialen Medien. Sie können Figma also voll und ganz verwenden , da es hervorragende Dateiqualität liefert, mit der Sie arbeiten Fangen Sie also mit einem Beitrag an. Und ich werde dich dazu bringen, dass du einen Screenshot der beiden Textmasken hochlädst . Also einfach einen Screenshot von beiden und lade ihn in den Aufgabenbereich hoch. Aber mach dir im Moment keine Gedanken darüber, es in den sozialen Medien zu teilen . Weil eine Weile. Was wir tun werden, ist , dass ich mir einen Lowe's schnappen und sie alle auffliegen lasse. Nun, meine Basisarbeit, okay, wir werden eine Anzeige erstellen und wir werden versuchen, jeden einzelnen Abschnitt dieses Bilddatenteils des Kurses dazu zu zwingen jeden einzelnen Abschnitt dieses Bilddatenteils des Kurses dazu zu Deshalb haben wir am Ende diese Abscheulichkeit des Designs. Weil wir alle Elemente zusammenfügen müssen. Und das setzen wir ans Ende. Ich hoffe, deins ist besser als meins, aber wir werden allerlei cooles Bildmaterial lernen , mit Dingen, die rumhängen und benutzen Transparenz besteht aus Masken und allem möglichen. Eine Luma-Maske ist und alles Mögliche. Also werden wir sie alle zusammendrücken. Und was wir tun werden, ist, dass wir am Ende unser letztes Projekt teilen, du gehst, die grünen Dan sind so schlecht, sonst am Ende unser letztes Projekt teilen, du gehst, die grünen Dan sind so muss ich das vielleicht austauschen. Aber im Moment mach einfach diese beiden Textteile, lade sie hoch und wir sehen uns im nächsten Video. 96. Maskiere mit transparenten PNGS mit Alphakanälen in Figma: Hallo alle zusammen. Lassen Sie mich Ihnen zeigen, wie Sie transparente Bilder für Hintergrundbilder und Füllungen von Moscheen verwenden. Dieses Bild ist transparent Doppelbam maskiert ein anderes Bild Ich zeige dir, wie es geht. Und wenn du dann dabei bleiben willst, zeige ich dir, wie ich diese transparenten Hintergrundbilder in Photoshop gemacht habe diese transparenten Hintergrundbilder in und das ganz nett und einfach, um am Ende einen wirklich schönen Effekt zu erzielen. In Ordnung, lassen Sie uns loslegen, gleich als Erstes haben wir Ihre Übungsdateien bekommen Unter dem Bild sind zwei Alpha-Einsen, okay? Es gibt ein JPEG und ein PNG. JPEGs haben keine Transparenz oder Alpha. Alpha ist ein anderes Wort für Transparenz, aber das PNG in diesem Fall tut es oft, wir suchen nach PNGs, damit das funktioniert Okay, also ich werde es einfach reinbringen und ich werde es verkleinern. Er ist Mike K2. Bringen Sie es auf eine angemessene Größe. Was machst du da? Ja, das habe ich schon aufgenommen. Es lief nicht sehr gut. Viel auf meine Weise. Also fangen wir neu Also, wir haben das, wir brauchen ein Bild, um es zu maskieren. Okay, also ich werde ein weiteres Bild mit der Befehlszeilenumschalttaste K einfügen. Und lassen Sie uns reinziehen, ich bringe eine Alpha-Vier. Cool. Es ist eine coole abstrakte Sache. Ich mache es auf die richtige Größe, um das zu decken. Und wir müssen uns daran erinnern , dass wer an der Spitze steht , dass dies das wird, das scheint normal zu sein. Es ist also falsch. Das muss hinten sein. Wählen Sie beide aus und alles, was wir tun müssen, ist auf Maske erstellen zu klicken. Und los geht's. Es sieht sich unser PNG an , das Transparenz oder Alpha-Indizes hat . Ich mache deine Maske. Wer erinnert sich an die Abkürzung, weil sie nicht sehr gut gerahmt ist . Die Farbspuren kommen nicht sehr gut durch. Wer erinnert sich an die Abkürzung, um sowohl dies als auch das Äußere zu zeigen ? Das stimmt. Halten Sie die Wahltaste auf einem Mac Alt-Taste auf einem PC gedrückt und doppelklicken Sie darauf. Und jetzt kann ich diesen Hintergrund verschieben um ihn dorthin zu bringen, wo ich dich haben will. Los geht's, überspringe ein paar Mal, um rauszukommen. So macht man eine Alpha-Maske. Sie können es auch mit Formen machen. Wheatley, ich kann es mit diesem Rahmen machen. Aber wenn dieser Rahmen ein Rechteck ist, okay, das könnte sich ändern und ich weiß nicht, warum das passiert Lassen Sie mich also die Eigenschaften kopieren, die das Eigenschaftenrechteck mit dem Rechteckwerkzeug, dem Rahmenwerkzeug einfügen Eigenschaftenrechteck mit dem Rechteckwerkzeug, dem Rahmenwerkzeug Ich werde mein PNG erneut einbringen . Sie bringen es auf eine angemessene Größe, indem Sie die Shift-Taste gedrückt halten. Ich mache dort einen und ich mache einen anderen hier unten. Also das Rechteck, solange das nicht die eckige BEC-Klammer auf der Rückseite ist, kann ich Maske verwenden Woohoo funktioniert. Spiel dort mit meinem Gradienten herum. Liebenswert. Aber dieser hier. dem Moment , in dem ich noch einmal überprüfen muss , ob dieses Bild nicht innerhalb des Rahmens ist, was zufällig nicht da ist, wie bei meinem Frame 21, wo ist mein Bild? Und diese sind im Ebenen-Panel weit voneinander entfernt. Wähle beide aus und drücke auf meine geschlossenen eckigen Klammern, sie kommen alle nach oben. Dieses Bild muss sich nun unter dem Rahmen befinden, aber nicht innerhalb des Rahmens. Du gehst. Jetzt mach dasselbe und bumm, ich habe nicht gearbeitet. Ich weiß nicht, warum ich das nicht zum Laufen bekommen habe. Lass es mich in den Kommentaren wissen, wenn du das tust. Aber hey, wir können es einfach zu einem Rechteck machen. Mach das rückgängig. Da hast du's. Sie können alles verwenden, einen Alphakanal hat. Es gibt noch eine, eine einheimische Praxis dieser Bergkette. Eigentlich möchte ich dir nur zeigen, wie ich mache, weil ich die für uns gemacht habe. Du könntest einfach zu etwas wie Google gehen und Cityscape PNG sagen und etwas finden, das du brauchst, um in den Lizenzen zu überprüfen ob du das richtig verwenden willst oder ob es nur für den persönlichen Gebrauch ist und du übst, etwas herunterzuladen Wenn du also Dinge nur aus Interesse machen willst, zeige ich dir, wie ich das in Photoshop mache. Ich habe diesen hier. Ich möchte den Hintergrund maskieren. Okay. Will ich das Wasser? Es gibt zwei Möglichkeiten, oder? Sie können ein Thema wählen , das häufig die Interessen weckt Und dann kannst du hier in deinem Ebenen-Panel auf Maskenebene klicken. Speichern Sie das auf Ihre Weise als PNG ab. Möglicherweise müssen Sie etwas aufräumen. Okay, Sie können also das Schnellauswahl-Tool verwenden. Halten Sie die Wahltaste gedrückt und entfernen Sie einige dieser Bits hier. Okay, du ziehst sie einfach irgendwie runter. Es ist ziemlich gut. Da sind Löcher, die du brauchst. Sie lassen die Alt- oder Wahltaste los und färben einfach die ausgelassenen Teile ein. Hängt davon ab, wie detailliert Sie sein müssen. Whoop. Ordnung, ich füge meine Ebenenmaske hinzu und wie speichere ich sie Ich werde die Option hier verwenden. Also verwende ich File, Export, Export Da es genial ist , weil ich damit ein paar Dinge tun kann. Gestatten Sie mir zu sagen, denn denken Sie daran, JPEGS, die ich dort erwähnt habe, keine Transparenz haben, also werde ich sie einfach mit Weiß füllen, was nicht gut ist Wir wollen PNG. Es ist also transparent. Du kannst es dort sehen. Und unangemessene Größe. Also werde ich es reinlegen. Es ist 1.500 Pixel breit. Es ist also nicht so groß. Und dann werde ich es exportieren. Also das mache ich. Die andere Option könnte diese hier sein. Okay? Hier gibt es eine Option, um Select Sky zu sagen. Und ich kann „Inverse auswählen“ sagen und dann auf die Option „Ebenenmaske“ klicken und dasselbe tun, es als PNG speichern Ein letzter kleiner Tipp. Wenn du nach einer richtig coolen Silhouette suchst, die Kanten manchmal nicht sehr stark. Was Sie finden werden, wenn ich das mache, können Sie sehen, dass es hier an den Rändern etwas verschwommen ist, was Sie vielleicht wollen, vielleicht nicht Sie können versuchen, kein Photoshop-Tutorial zu sein. Wenn Sie mehr über Photoshop lernen möchten, habe ich einen Kurs für Grundlagen und Fortgeschrittene, aber was diese Ebene ausgewählt hat, können Sie zu Ihren Anpassungen gehen. Schauen wir uns die Level an, das ist das zweite hier. Und du kannst einfach etwas verpassen weil du eigentlich nicht willst, dir sind der Himmel und die Berge egal, oder? Sie suchen nach einem schönen hohen Kontrast zwischen den beiden. Sie können herumspielen und versuchen, eine wirklich klare Definition zwischen den beiden zu finden. Es wird einen Teil der Mehrdeutigkeit beseitigen, wenn Sie beide auswählen, wir sind sehr destruktiv Ok, und lass uns die Ebenen zusammenführen. Ich habe gerade mit der rechten Maustaste geklickt Wenn ich jetzt zu Select Sky gehe, ist mir nur ein bisschen klarer was ich tun kann. Das Gleiche, Lass uns invertieren, okay, und meine Ebenenmaske Und wir haben bei vielem davon einfach einen schönen, aufgeräumten IT-Vorteil , weil er einfach CRISPR ist Sie können mehr Zeit verbringen und es besser machen. Jetzt machen wir eine Datei, Exportieren, Exportieren als und stellen nur sicher, dass es ein PNG-Format ist, geben der Datei eine passendere Größe und machen das, was wir zu Beginn dieses Kurses gemacht haben. Bring es rein und benutze es als Maske. In Ordnung, das ist Maskierung mit transparenten PNGs, auch bekannt als Alpha-Masken, auch bekannt als Alpha-Kanäle Das ist alles. Wir sehen uns im nächsten Video. 97. Projekt 11 für den Kurs: Alpha-Maske: Hallo zusammen, ich bin ein super tolles Projekt um keine Hausaufgaben zu machen. Dieser erstellt deine eigene Alpha-Maske. Erstellen Sie also eine Alpha-Maske, um ein Bild zu maskieren, wie wir es im letzten Video getan haben. Jetzt kannst du das Bild , das du benutzt, selbst erstellen, okay? Machen Sie die Transparenz also selbst mit etwas wie Photoshop oder einem anderen Tool, das Sie verwenden können. Wenn Sie im Moment nicht wissen , wie man solche Dinge benutzt , können Sie eine und ein vorhandenes PNG im Internet finden. PNGs, eine dieser Dateien, in die Transparenz so oft eingebaut ist , wenn Sie sie zu einer Suche zu etwas wie Google-Bildern hinzufügen , PNGs, was ich verwendet habe, werden Sie oft viele Bilder finden, die wir mit werden Sie oft viele Bilder finden transparentem Hintergrund haben Überprüfen Sie die Lizenzen zu diesem Zeitpunkt, obwohl wir es für Bildungszwecke verwenden und es kommerziell verwenden. Du versuchst nicht, es zu verkaufen. Oft können Sie einfach alles verwenden, außer die Lizenz noch einmal zu überprüfen Wenn du fertig bist. Machen Sie einen Screenshot davon. Okay. Das ist der, den wir gemacht haben. Ich möchte, dass du etwas Neues und Anderes machst. Denken Sie jedoch daran, dass Sie sich vielleicht alle die anderen Dinge ansehen möchten sich vielleicht alle die anderen Dinge ansehen wir machen werden. Es kommt bald. Du fügst es zu deiner Instagram-Anzeige hinzu und wählst etwas aus, das für dein Musikgenre relevant ist. Sonst muss U2 versuchen, eine Stadt mit Farbe oder Vernunft auf deinen edX zu pressen . Da hast du's. Ich werde im nächsten Video sehen, viel Spaß mit dem Projekt 98. So erstellst du eine Luma-Maske in Figma: Hallo alle zusammen. In diesem Video schauen wir uns an, wie man eine sogenannte Luminanzmaske oder Luma-Maske erstellt eine sogenannte Luminanzmaske oder Luma-Maske Im Grunde verwendet es die hellen und dunklen Teile eines Bildes, um Dinge zu maskieren. Und du kannst einige coole Duotone-Effekte machen. In Ordnung, lass mich dir zeigen, wie es geht. In Ordnung, als Erstes bringen Sie ein Bild, okay? Ich bringe Luma One mit. ist nichts Besonderes, nur ein JPEG, das ich auf Unsplash gefunden habe sieht cool aus, wenn es einen wirklich hohen Kontrast zwischen Vordergrund und Hintergrund Geben wir an, warum ich diesen ausgewählt habe , und die sehen sehr palmenartig aus. Okay, als Nächstes müssen wir sicherstellen, dass sich müssen wir sicherstellen, dass die Maske auf der Unterseite des Objekts befindet , das Sie maskieren möchten. Und vergewissere dich, dass es dahinter ist. Wählen Sie beide aus. Du maskierst die Schaltfläche und nichts passiert bis ich hier im Eigenschafteninspektor sehe, dass es standardmäßig auf Alpha eingestellt ist Es gibt kein Alpha und dieses. Aber sieh dir diese Luminanz an. Es benutzt die dunklen Teile meines Bildes, um ein Loch in dieses zu bohren. Ich klicke aus, klicke auf. Also ich habe die ganze Sache. Siehst du, schau, es ist tatsächlich ein Loch. In diesem Fall verwendet die Leuchte dunkle Teile, um ein Loch hinein zu bohren. Und dann hat man diesen schönen Duotone-Look . Wenn deins etwas komisch aussieht und ich vielleicht eines mit hohem Kontrast wähle, weil es in diesem Tutorial gut aussieht. Wenn du ein Bild verwenden musst und versuchen willst , etwas anderes damit zu machen, musst du vielleicht in das Bild gehen , das ist mein Luma-Bild Eigentlich nein, es ist dieser hier. Okay. Und ich kann ins Bild gehen und du kannst mit Dingen wie der Belichtung herumspielen . Kannst du sehen? Und vielleicht willst du ein bisschen mehr Details drin haben und einfach mit Kontrast und Sättigung herumspielen mit Kontrast und Sättigung herumspielen Nur alle, um zu sehen, was die Nadel bewegt es darum geht, das zu erreichen, was Sie wollen. Es sind hauptsächlich Licht und Dunkelheit, Glanzlichter und Schatten. Solche Dinge werden die Funktionsweise dieser Luma-Maske verändern Manchmal möchte man zwar das Gegenteil, im Moment gibt es ein Ganzes mit dem Baum, sagen wir, du willst das Ganze im Hintergrund haben, du weißt, welcher Baum lila sein soll. Lass mich die andere Akte reinbringen. Okay, ich habe auch Luma gekauft und ein paar farbige Boxen gemacht, um und ein paar farbige Boxen gemacht dir den Unterschied zu zeigen Und genau da, in Ordnung, die Magie der Bearbeitung. Ich möchte das zuerst umkehren. Im Moment gibt es also keine Funktion . Sie fügen ständig solche Funktionen hinzu. Es gibt keine invertierten Farben. Aber ich habe ein Plugin namens Invert Color gefunden Ich drücke Run Invert. Ich muss mindestens einen auswählen. Dann werde ich es ausführen. Ich denke, dieser funktioniert so, dass zunächst er zunächst so etwas wie „Einstellungen konfigurieren“ sagt, auf Speichern klickt, es dann erneut ausführt und die Farben invertiert Also habe ich sie im Grunde einfach ausgetauscht. Es hat hauptsächlich mit Licht und Dunkel zu tun. Okay. Siehst du, jetzt war die Katze schwarz, aber jetzt ist sie weiß. Okay, also ich werde dasselbe tun, es hinter mir lassen, eine Maske daraus machen. Stellen Sie sicher, dass dies zur Beleuchtungsstärke gehört. Und das liegt an dem Unterschied zwischen diesen beiden. Du gehst dasselbe, dasselbe, außer dass einer invertiert ist und der andere Es hängt nicht davon ab, was du tun willst Es ist ziemlich cool. Okay, so macht man eine Luma-Maske 99. Kursprojekt 12 - Luma-Maske: Du hast Projektzeit zum Unterricht. Diesmal für eine Alpha-Maske, eine Luma-Maske, Dan, Oh, Großbuchstaben, schreiende Tastatur Okay, mach das, was wir im letzten Video gemacht haben, aber mit einer Aluminiummaske überziehe sie mit einem farbigen Rahmen, wie wir es hier gemacht haben Wählen Sie etwas Passendes für Ihre App aus, je nachdem, welches Musikgenre Sie haben. Okay, du kannst dein eigenes Bild verwenden oder du kannst ein Bild aus der Stockbibliothek suchen, etwas wie Unsplash oder Adobe Stock oder Envato Elements, was auch immer du Zugriff hast, und dann einen Screenshot machen und ihn in die Aufgaben hochladen werde es wieder im Aufgabenbereich behalten, aber wir werden es später zusammenstellen. Was ich getan habe und ihr alle entscheidet, was ihr tun wollt, ist, dass ich es in den Hintergrund gestellt habe, sie überlagern das Hintergrundbild Da ist mein. Warum habe ich eine Palme? Das ist eine sehr gute Frage. Weil ich das ausgesucht habe. In Ordnung. Du wählst etwas Passenderes aus. Ordnung, mach das Projekt, lade es hoch und wir sehen uns im nächsten Video 100. Wie man eine Spillover-Maske außerhalb des Rahmens in Figma erstellt: Hallo alle zusammen. In diesem Video werden wir uns sogenannte Spillover-Masken ansehen Es ist ein Wort, das ich mir ausgedacht habe, aber es sind diese Bilder , die irgendwie über die Ränder der Rechtecke Und es sieht wirklich cool aus. Es ist wirklich einfach. Es ist nur eine optische Täuschung in Figma, eher ein Schichtstapel, aber es ist cool Also lass uns reinspringen und ich zeige dir, wie das gemacht wurde, okay, um loszulegen, in Bilder zu bringen Und ich habe diese beiden Spiller einmal bekommen. Da ist einer mit Maske, einer ohne Moschee. Damit das funktioniert, musst du etwas aus dem Hintergrund maskiert haben , aber du brauchst beide, um diese coole Levy-Sache zu bekommen coole Levy-Sache Nun, kein Photoshop-Kurs, aber ich werde dir am Ende zeigen, dass ich dir das maskiert habe Es gibt viele andere Tools zum Maskieren. Und was wir tun werden, ist, dass wir die brauchen. Ich mache Duplikate von ihnen, okay? Und ich werde dafür sorgen, dass das übertrieben ist , weil sie die gleiche Größe haben, weil sie die gleiche Größe sollten sie sich gut überlappen, das ist etwas verwirrend, aber Sie haben die Idee Was wir also brauchen, ist im Grunde dieser hier, der eine Maske hat. Ich schalte den Augapfel aus, damit ich ihn nicht sehen kann. Dieses hier, ich werde einfach nach oben gehen , sodass es unter diesem ist, nur zur Verwirrung, weil ich diese anderen Kopien oben habe, eines oben mit ausgeschaltetem Augapfel Okay, es ist also versteckt. Dann nehme ich in dieser Version das Ellipse-Werkzeug, das ist die 0-Taste bei gedrückter Option auf meinem Mac, Alt auf einem PC und Shift , Alt auf einem PC und Shift sodass es in der Mitte beginnt, wenn ich mit dem Ziehen beginne Und es ist ein perfekter Kreis. Bring es, wie du willst, mit dem V-Tool, dem Auswahlwerkzeug, richte es aus und alles, was wir tun müssen, ist das hinten zu platzieren, okay, es muss also hinter diesem Bild sein . Ich werde bei gedrückter Umschalttaste darauf klicken. Also habe ich beide ausgewählt, meine Maske gemacht und dann den Augapfel wieder auf den Typen da oben gerichtet So, du gehst nach draußen, seine Sachen sehen trickreich aus, aber es ist nur eine optische Täuschung. Ein weiterer interessanter Trick dabei ist, dass ich dasselbe mache. Mache ein Duplikat, oh, meine Tastatur, um einen Kreis zu bekommen Option Shift oder Alt Shift auf einem PC. Und wir machen es mit einer Farbe wie du am Anfang. Sie können jede Farbe wählen solange es daran liegt, dass ich grün werde. Ich suche mir eigentlich einfach etwas anderes aus, aber ich möchte etwas, das einen Kontrast zu dieser braunen , warmen Ockerfarbe Und natürlich ist es grün eingefärbt und richte es auf, indem du Shift-Taste gedrückt hältst, damit mein Kreis nicht zerquetscht Du musst wirklich nichts tun, schick es einfach nach hinten. Und das ganz oben hier, ich werde das Coole an etwas hinzufügen , das transparent ist. Wenn du den Effekt von Schlagschatten hinzufügst, okay , hier werde ich Null setzen, das hängt von deiner Form ab. Das sieht gut aus für mich. Schlag auf Y4, also ist es bei 25 Prozent nach unten gerutscht. Sieht ziemlich cool aus. Also schau es dir an. Kein Schatten, Schatten, Schatten, cool. Es ist wirklich das, was passiert, ist die Maske, sie wurde woanders gemacht. Und wir machen einfach ein paar nette Schichten hier in Figma. Nun, das ist super einfach. Machen wir einen, der etwas komplizierter ist. Bringen wir also die anderen beiden Bilder mit ein. Denken Sie an die Befehlsschalttaste K und die Strg-Umschalttaste auf einem PC, mit der die O2s verschüttet werden Okay, und ich werde alle platzieren und diese werden für mich übereinander gelegt , was großartig ist. Ich habe eine mit einer Maske oben und dann eine Moschee unten. Was wir tun wollen, ist, die erste Masse auszuschalten. Schalten wir einfach den Augapfel aus. Wer bewegt, was ist die Abkürzung. Command Shift H oder Control Shift H auf einem PC. Also habe ich das versteckt. Nun, dieser hier, also wenn ich verstehe, dass er existiert, lassen Sie uns einfach daran arbeiten. Also werde ich meins mit einem Rechteck maskieren. Wir verwenden einen Frame, weil er ein weiteres Problem aufwerfen könnte , dessen Lösung hilfreich sein könnte. Okay, also ich werde einen Rahmen verwenden. Dieselben Tricks funktionieren wenn ich die Wahltaste und die Umschalttaste gedrückt halte und in der Mitte beginne, wird ein Quadrat von der Mitte aus gezeichnet, okay. Und dann mach es so, dass du es hinzufügen willst, um herauszuspringen. Ja, machen wir das war nicht mein ursprünglicher Plan. Okay. Und alles, was wir tun müssen, ist, beide zu glätten und eine Maske zu machen, die die Rückseite sein muss Benutze meine eckigen Klammern und mache dann eine Maske. In Ordnung, also verstecken Sie das, um zu versuchen, nicht zu verwirrend zu sein. Okay. Und wir haben einen Spillover auf den, der wieder läuft Eigentlich ist es so, dass das auch so weitergegangen ist. Als nächstes zog ich meine Maske auf. Okay. Und dann habe ich diesen einfachen alten Spiller zu maskieren, der einfach hier rumhängt Wir müssen es zurechtschneiden , weil ich möchte, dass der Boden getrimmt wird. Und was wir tun könnten, um Zeit zu sparen ist, dass ich das einfach von unten nach oben ziehen möchte . Wirklich erledigt. Ich, wer weiß noch, was ich auf meiner Tastatur gedrückt halte , nur um es irgendwie zu trimmen. Das stimmt. Befehl auf einem Mac, Steuerung auf einem PC. Und dann gehen wir, sehen, wie es irgendwie aus den Rändern heraussticht. Nett und subtil. Ein großer an der Spitze. Wir können es schöner zuschneiden. Ich halte dieselbe Taste gedrückt. Befehl auf dem Mac, Steuerung auf dem PC. Ich weiß es nicht. Ich mag diesen Spillover-Effekt Wie kommst du jetzt an die Maske? Und im nächsten fangen wir mit dem Stiftwerkzeug an und maskieren es in Figma Aber im Moment gibt es dort einige Plugins K. Okay. Ish, nicht wirklich. Und ich sage nicht, dass man Photoshop lernen muss, aber die meisten Leute, die viel UX-Design machen, kennen sich aber auch ein bisschen mit Photoshop und Illustrator aus Muss ich nicht. Diejenigen von Ihnen, die das tun. Ich zeige dir, was ich getan habe , um die Datei zu starten. In Ordnung, dieser war also wirklich einfach. Alles was ich tun musste, war das Ding, das ich gemacht hatte, tatsächlich zu löschen. Öffnen Sie das Bild in Photoshop. Wenn du mitmachen willst, kannst du die Optionen „Ich will die Spill O1 und O2 als keine Maske Ich ziehe das in Photoshop, öffne es und wir beginnen mit diesem, weil dieser super einfach war. Ich habe gerade Select Subject ausgewählt, was magisch und großartig ist. habe hier sogar ziemlich gute Arbeit geleistet , rund um die Brille. Es kommt darauf an. Beispiel könnten wir viel Zeit damit verbringen, Masken zu machen, aber für das, was wir brauchen, müssen wir das wahrscheinlich kürzen. Vielleicht lässt es mich mein Zauberstab-Werkzeug schnappen. Okay, und wir benutzen den Zauberstab nicht mehr. Wir verwenden das Schnellauswahl-Tool, das besser ist. Und ich werde die Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt halten, nur um einen Teil davon loszuwerden , und die Taste loslassen, um etwas hinzuzufügen. Kannst du am Ende hoffentlich etwas finden , das ein bisschen ausgewogen ist? Und noch einmal, entscheiden Sie, auf wie viele Details Sie eingehen möchten. Das fühlt sich für mich genug an. Dann sage ich es einfach Musk und dann sage ich Command Option Shift S. Okay, um das hier zu machen, es ist unter Datei, es ist unter Export und es ist dieser hier Der Export ist großartig. Wenn Sie Save for Web immer noch gedopt verwenden. Okay, dieser hier ist viel besser. Okay? Png, etwas Transparenz. Ich habe eine geringe Breite angegeben, eine Höhe von 1.500, also ist es nicht so groß und so maskiere ich dieses. Okay, die ganze Sache hier war ein bisschen kniffliger. Also ging ich zu Select Subject , trat zurück und kam näher. Und es ist derselbe Schlüssel. Wir können herumspielen. Es gibt zwei Dinge, die wir tun müssen. Zurück zum Schnellauswahl-Tool. Und du schaust einfach, lass uns jetzt nichts in der Hand halten , weil da noch Teile fehlen. Also ich habe einfach standardmäßig den Plus-Adding-Modus aktiviert. Ich ziehe einfach herum, bis es anfängt, die Teile zu bekommen, die ich will. Okay? Ich bin hier sehr faul, okay, aber das Ding ist ein ziemlich guter Job. All das ist immer noch ein gutes Bild zum Maskieren. Es gibt einen vernünftigen Kontrast. Nochmals, ich mache nichts. Wir schleppen nur irgendwie herum. Nun, wenn ich entfernen möchte, weil das im Moment ausgewählt ist, oder? Also, wenn ich das Fett mache, will ich diesen Teil weglassen. Halten Sie also wie zuvor die Wahltaste auf einem Mac Alt-Taste auf einem PC gedrückt und ziehen Sie die Farbe einfach so, dass sie wirklich an den Rändern einrastet Und es lernt, während du gehst. Ich will dieses Stück nicht. Also gehe ich zu Alt Drag. Und ich habe gesagt, oh ja, das alles raster, weil es ein sehr ähnlicher Ton ist. Es beseitigt auch diese Grube. Also werde ich das wieder hinzufügen, indem ich nichts gedrückt halte. Also, wie lange werde ich damit verbringen, das großartig zu machen? Alles hängt von dir ab. Sie können nur einmal klicken. Option „Wann ablegen“. Wenn du das anklickst , hast du am Ende dieses Gleichgewicht von, ja, es ist wirklich gut. Ich liebe es. Das ist also meine Maske. Und dann als PNG speichern und nach Figma bringen. Eigentlich nein, es liegt nicht daran, dass ich mir das ansehen musste. Also, wenn ich diese Moschee mache, ist sie an den Rändern ein bisschen gestolpert , oder? Als ob das Alter okay wäre. Aber es ist ein bisschen, nein, nicht zerkaut. Was wir tun können, ist, sobald Sie Ihre Ebenenmaske hinzugefügt haben, die Maske auswählen und zu dieser Maske wechseln, in der steht, denn auf der Ebenenmaske gehen Sie zu dieser Maske , auf der „Maske auswählen“ steht. Das ist der magische Teil von Photoshop. Okay, ich bleibe nah dran und beobachte das, wenn ich den Radiustuff herauskurbel, okay, das glättet meine Kanten Also habe ich es um ein paar Pixel erhöht. Wenn du auf P tippst, wird das Original angezeigt, okay, schalte es hin und her. Nochmals. Es ist irgendwie in all die Wellen hier eingetaucht und sieht einfach ein bisschen Es gibt noch viel mehr , um eine Maske auszuwählen. Ich könnte mir das Glätten ansehen. Ich drehe es hoch, um die Kanten zu weit zu glätten Aber ein bisschen Glättung. Oder nur ein paar. Ich denke, das ist in Ordnung für das, was ich brauche. Macht irgendein Geisterbild an der Außenseite, kannst du den Rand verschieben und ein bisschen, lass uns ganz nach innen wechseln Kannst du es sehen? Ganz nach oben? Das Ganze entfernt gewissermaßen ein bisschen von diesem Ghosting. Okay, in ein bisschen. Und repariert einfach irgendwie die Maske oder so, ich weiß nicht. Danke. Sieht das ein bisschen besser. Jetzt klicke ich auf die Ebene. Ich werde als PNG exportieren. Und so habe ich die Bilder für dieses Video für dich bekommen. Cross-Selling, Do Dance, Photoshop Essentials oder Kurs für Fortgeschrittene, je nach Level, Eric und alle machen die Essentials Erstens, da ist so viel drin, was Sie vielleicht verpasst haben, selbst wenn Sie einigermaßen Erfahrung mit Photoshop Wenn Sie meinen Kurs High-Five schon gemacht haben, sagen Sie, bam, in Ordnung, so macht man Spillover-Masken in Figma. Es gibt einfach zu weniger 101. Nutze das Stift-Tool zum Erstellen von Bildmasken in Figma: Hallo alle zusammen. Hey, in diesem Video werden wir diese Maske hier mit dem Stiftwerkzeug erstellen . Wir werden es verwenden, um eine Opfermaske zu erstellen. Es ist nicht wirklich eine Pintool-Übung wie die Verwendung des Stiftwerkzeugs. Es würde den Rahmen dieses Kurses etwas sprengen, aber für diejenigen unter Ihnen , die es schon wissen , sind nicht versteinert Ich werde Ihnen zeigen, wie ich diese Masken mache, die Vor- und Nachteile der Vor- und Nachteile der Vor- und Nachteile. In Ordnung, das ist also Springen Okay, bevor wir in diesem Video zu weit gehen, der erste Teil darin zu zeichnen mit den Stiftwerkzeugen diesen Umriss um unsere Kaffeetasse , damit wir später eine Masse daraus machen können Dieser Teil könnte für alle besonders langweilig sein. Je nachdem, wie gut Sie sich mit dem Stiftwerkzeug auskennen , kümmern Sie sich ausreichend um das Stiftwerkzeug. Aber in diesem Video gibt es einige gute Dinge darüber, wie man Masken innerhalb von Masken macht. Es wird jetzt also ein Timecode auf dem Bildschirm erscheinen. Vielen Dank an die Bearbeitung sind Jason und Taylor, Vielen Dank an die Bearbeitung sind Jason und Taylor die ganze Bearbeitungsmagie möglich gemacht haben und Zahlen erscheinen, Berichte ausführen Du kannst einfach in die Notaufnahme springen, zu den interessanten Stellen. Wenn du ein bisschen mehr über das Stiftwerkzeug erfahren und mir dabei zusehen möchtest , wie ich es mache, meine Technik, was ist das ganze Video? Ansonsten bin ich zu dem Teil im Video gesprungen. Ordnung, also ich habe ein Bild, das ihn aus den Übungsdateien meidet Es heißt Pin-Tool. Es befindet sich im Ordner Images. Bring das rein. Es ist wirklich groß. Es ist irgendwie egal, wie groß das Thema ist. Denken Sie daran, dass dies für Personen ist, die bereits über Kenntnisse im Umgang mit Stiftwerkzeugen verfügen. Es liegt irgendwie außerhalb des Geltungsbereichs von Figma. Wir behandeln es später etwas langlebiger. Also, wenn du Pinto magst, Mann, das ist zu schwer, es ist okay Du kannst sie dir einfach ansehen , weil da einige interessante Dinge vor sich gehen. Aber es wären viele von Ihnen da draußen mit dem Stiftwerkzeug. Wissen wird entweder ein Meister darin sein, was einige und alle anderen sein werden, die das Stiftwerkzeug erschreckt haben und es benutzen, wenn sie müssen, ich werde meinen Prozess durchgehen, aber auch einige Tipps und Tricks, um sich in Masken und so maskieren zu lassen Also, was werden wir tun , um das einfacher zu machen? Ich werde meine schnellen Aktionen öffnen. Es ist also Command Forward Slash und einfach das Wort Snap eingeben und das aus, das aus, rein, aus, okay Es bedeutet nur, dass das Stiftwerkzeug versuchen wird , an einer Reihe von Dingen festzuhalten , und es macht es schwierig, diese natürlicheren Formen zu zeichnen Also schalte ich meins aus und versuche daran zu denken, sie später wieder einzuschalten, aber du wirst es vergessen. Das ist okay. Die andere Sache ist, dass ich nicht den gesamten Rahmen oder das Chrom von Figma benötige Rahmen oder das Chrom von Figma Erinnerst du dich an die Tastenkombination von vorhin, Command or Control Backslash statt Schrägstrich, kannst du das einfach bereinigen? Du kannst es immer noch bearbeiten. Und wenn Sie Ihre Tastenkombinationen wie P für das Stiftwerkzeug kennen, können Sie dafür einfach einen Großteil Ihrer Bildschirmfläche verwenden dafür einfach einen Großteil Ihrer Bildschirmfläche Also, was wir tun werden, ist, dass ich nicht versuchen werde , das Stiftwerkzeug zu erklären, sondern ich werde entweder herumgehen, weil ich irgendwie ich selbst Klicken Sie also einmal für die Ecke unten hier unten. Was ich gerne mache, ist, dass ich einmal klicken und dann versuchen könnte , dort eine Kurve zu machen. Also viele Leute versuchen, nichts wirklich falsch damit zu machen , aber ich finde, dass alles besser läuft, wenn du hier runterkommst, gedrückt hältst und ziehst, obwohl es Bindi ist Okay, ich reihe es gerne gerade aus. Und das heißt, wenn ich die Taste gedrückt halte und für eine Kurve hierher ziehe, läuft alles einfach besser, wenn es weniger Ankerpunkte gibt Ich benutze oft meine Leertaste und ich verwende meine Tastenkombination für die Maus Ich halte Command oder Control auf einem PC gedrückt und benutze mein Scrollrad. Ich finde, das ist eine nette Art, mich fortzubewegen. Sie können jedoch Plus und Minus verwenden , um ein- und auszuzoomen, wenn Sie möchten. Hier drüben, einer gleich weit von dieser Seite entfernt, werde ich ihn herausziehen, genauso wie auf der anderen Seite Kannst du dir diese Art von Spiel ansehen, magst du, was ist mit der großen Lücke in der Mitte Es kommt oft vor, dass wir zurückkommen und Dinge reparieren müssen. Weil wir später zurückkommen und das so regeln. Aber in dem Moment, in dem ich es einfach verlasse , halte gedrückt und ziehe eines davon hierher. Und einmal hier klicken. Wenn Sie den falschen Ort erwischen, ist er genau dort, dieser hier ist interessant. Wie gehst du vor? Es ist eine Kurve hier in einer Ecke. Was machst du? Ich klicke, halte und ziehe, um das etwas kurvige Teil zu bekommen, dann halte ich meine Wahltaste auf einem Mac Alt-Taste auf einem PC gedrückt und ziehe es hierher. Wie man es zieht. Das Stiftwerkzeug bietet so viel Erfahrung. Es ist schwer, das genau zu wissen. Es geht nicht bis zur Linken, es ist 1 Million Mal und werde besser darin. Hände hoch, wer hat Hände hoch? Wer hatte Probleme mit dem Stiftwerkzeug? Wer hat Probleme? Wer ist ein Meister? Weil sie getanzt, einen Kurs illustriert, Cross-Selling betrieben haben. In Ordnung, also ich gehe hier hoch, drücke gedrückt und ziehe nach oben. Auch wenn ich will, dass es klar ist. Ich will diese Kurve da haben, die oben irgendwie hervorsteht. Dann will ich wahrscheinlich einen richtig großen, breiten 13:00 Uhr, damit es sich nach oben krümmt, aber wirklich flach ist Und ich möchte diesen hier nachahmen. Also ich gehe, du hast nicht ganz gearbeitet. Es ist in Ordnung. Klicken Sie einmal für diese Ecke , da es eine innere Ecke gibt. Halten Sie die Maustaste gedrückt und ziehen Sie den Mauszeiger hierher. Und wenn du weit genug weg bist, wie in all deinen Reihen, sieh gut aus. Und klicken Sie einmal, wonach ich suche und wenn nichts anderes ist, wenn Sie am Ende angelangt sind, können Sie sehen, wie sich das kleine Symbol ändert? Es ist alles miteinander verbunden. Jetzt bin ich zum Auswahlwerkzeug gewechselt, das ist die V-Taste, und ich arbeite daran, das Problem zu beheben. Manchmal sind sie einfach nicht in der richtigen Position und manchmal sind die Griffe , die aus ihnen herausragen, die falschen. Also nochmal hier, wie wichtig ist mir das? Ich sollte mich viel mehr darum kümmern. Dass das nicht ganz übereinstimmt. Aber ich tue es nicht, weil es nur eine wirklich kleine Maske ist, die in meinem Design ziemlich klein verwendet werden wird . was ich dafür mit Photoshop mache , würde ich auf jeden Fall tun. Ich würde rausspringen. Woher bist du gekommen? Wenn Sie einen Punkt haben, den Sie nicht wollen. Was Sie tun können, ist mit dem Auswahlwerkzeug darauf zu klicken und auf Löschen zu klicken, aber ich habe die ganze Zeile entfernt. Sie können also das Stiftwerkzeug verwenden auf einem PC die Wahltaste oder die Alt-Taste gedrückt halten. Siehst du, das Minus verlässt die Linie irgendwie dort, entfernt aber den Ankerpunkt, den wir nicht wollten Zurück zum Auswahlwerkzeug. Okay. Habe ich irgendwelche Griffe, mit denen ich arbeiten kann? Tue ich nicht. Hey, dein BAC abzüglich deines Auswahltools. Das kommt immer wieder zurück. In Ordnung. Geh weg. Entkomme. Er ist zurück. Warum kommst du dann immer wieder zurück? Verschollen? Du siehst zu, wie ich es loswerde. Und das ist zurück. Ist das ein Griff? Es ist nicht hängen. Ich muss Figma öffnen und schließen. Halten Sie hier, Stiftwerkzeug, Alt oder Wahltaste gedrückt. Du hast Escape gedrückt , um rauszukommen. Drücken Sie ein paar Mal Escape, kommen Sie heraus, doppelklicken Sie darauf und es ist zurück. Ich, oder ist es Figma? Und dann schließ Figma und öffne es wieder. Du wartest da. In Ordnung, wir sind zurück. Mal sehen, was wir haben. Doppelklicken Sie darauf, um es zu öffnen. habe einen Punkt, an dem ich nicht möchte, dass das Stiftwerkzeug, gedrückt halten, Alt oder Wahltaste, weg ist. Es ist zurück. In Ordnung. Ich mache es, Pinto auf diese Weise los Und dann ziehe das raus und dann das raus, um sie miteinander zu verbinden. Warum war das schlimm? Ich habe keine Ahnung. Das passiert normalerweise nicht. Okay, wir werden das vorerst ignorieren, wenn es dir passiert und du gehst, manchmal passiert das, es sieht gut aus hier unten oder es sieht gut Lassen Sie uns das ausbalancieren. Und der Trick bei guten, schönen Kurven wie dieser ist, dass es auf dieser Seite genauso sein sollte. Ähnlich. Sie können sehen, dass sie nicht perfekt sind, aber die gleiche Art von Links, die in dieselbe Richtung treffen , gibt mir eine schöne, konsistente Kurve. Unsere Rechte, jetzt sind wir am Sprung, oder für diejenigen, die hier geblieben und sich das Ganze angesehen haben, hören wir. Natürlich hören wir diejenigen, die mitgesprungen sind und die Zeitlinie hin und her schrubben, um schließlich gegründet zu werden Du wirst es hören, willkommen. Wir haben dich vermisst. Okay, wir haben also ein Opfer. Es kann von jemand anderem gezeichnet werden. Der Trick dabei ist ein paar Tricks tatsächlich darin bestehen, dass der Strich um die Außenseite Ihres wahrscheinlich schwarz ist, ist nicht wichtig. Es ist die Füllung, wenn ich versuche und es tatsächlich getan hat oder wie man entkommen kann. Okay, da ist mein Vektor, er hat einen Strich, wenn ich ihn nach hinten setze, wie wir es zuvor getan haben, wähle beide aus, mache eine Maske. Es baut eine Moschee. Es macht nur ein wirklich dünnes, winziges Ding. Die Kaffeetasse ist irgendwo da drin. Okay, aber nicht so nützlich. Also mache ich meine Striche auf der Vorderseite rückgängig, oder schiebe meine Kaffeetasse nach hinten. Wählen Sie den Strich aus. Ich werde den Schlaganfall auf einmal loswerden. Und es ist die Füllung, egal welche Farbe sie hat, sie gibt der Maske, dass sie Maschine ist. Also werde ich es nach hinten schicken. Ich verwende meine eckigen Klammern. Verwenden Sie die erste der eckigen Klammern , um es nach hinten zu schicken. Wählen Sie beide aus, Maske erstellen. Als wir uns ansehen, haben wir eine Maske gemacht und lassen Sie uns sie in eine kreisförmige 0-Taste auf Ihrer Tastatur kleben . Halten Sie die Wahltaste auf einem Mac und die Alt-Umschalttaste auf einem PC gedrückt, um den perfekten Kreis aus der Mitte zu ziehen . Hol es dir. Also schaut es oben raus, schick es nach hinten. Gib ihm eine Farbe. Lassen Sie mich meine lokale Grundfarbe verwenden. Bring es da irgendwie schön hin. Und ich werde aus keinem anderen Grund einen Schlagschatten hinzufügen , außer dass er cool aussieht. Also füge ich es der Kaffeetasse hinzu. Okay, und was ich tun werde, ist dass ich so einen großen, erhabenen will Also werde ich tatsächlich 50 werden. Nun, das ist nicht wert genug. Hundert. Und wenn du es wie 200 verwischen lässt, bekommst du so etwas wie ich es mag Kannst du sehen, was ich mit der Unschärfe dort meine? Es ist weggeblasen, an, aus. Wie auch immer, das ist eine Möglichkeit, das Stiftwerkzeug zu verwenden , um Masken in Figma Daran ist nichts falsch. Es funktioniert wirklich gut mit schönen, knackigen Kanten. Es hat einfach viel länger gedauert. So viele Leute verwenden immer noch die Stifttechnik anstelle einiger dieser Photoshop-Tricks, völlig in Ordnung, dauert nur länger. Die Sache, mit der Sie auf Probleme stoßen werden ist, dass sie eine meiner Müllschubladen haben oder ist es eine Müllschublade dort Es sind ihre Müllschubladen, in denen ich dieses Zeug du nicht siehst, dass es mein Leben ist, mein Geschmackszeug Kannst du Masked sehen? Das wäre einfach und es wird bis etwa hier einfach sein. Und wer weiß, wie einfach das wäre, dann braucht man wirklich so etwas wie Photoshop. Alles ist unscharf, fügt sich irgendwie in den Hintergrund ein , Das macht es mit dem Stiftwerkzeug schwierig. Aber Produkte, solche Sachen sind hier super einfach. Schrecklich mit dem Stiftwerkzeug. Großartig und Photoshop. In Ordnung, das ist es So verwenden Sie das Stiftwerkzeug und Figma, um unsere Vektormaske Das Wichtigste, an das Sie denken sollten, ist, dass sich die Füllung in Ihrer Moschee befinden muss , damit sie ordnungsgemäß funktioniert. Sonst arbeite ich nicht. In Ordnung, das ist es Wir sehen uns im nächsten Video. In Ordnung, du dachtest, es wäre vorbei. Ich bin zurück. Ich komme aus der Zukunft. Okay. Ich habe eine andere Arbeit für ein anderes Projekt gemacht und vergessen, meinen Snap wieder anzumachen. Wenn Sie also gerade mit dem Stiftwerkzeug in Lektion dieser Übung fertig sind, denken Sie daran, dass Ihre schnellen Aktionen außer Kontrolle geraten, Schrägstrich und los schnappen und dann los, darauf können Sie wetten, Gang Öffne es wieder, schnapp, du ziehst es wieder an und mach alle drei. In Ordnung, du gehst. Jetzt kannst du weitermachen 102. Nutze die Mischmodi für Farbebenen in Figma: Hallo alle zusammen. Hey, in diesem Video werden wir uns sogenannte Ebenenblendmodi ansehen Ebenenblendmodi Sie können bei Dingen wie schwarz-weißen Logos hilfreich sein , nicht transparent, aber wenn wir den Look der Mischmodi vermissen, können wir ihn transparent machen Wir können das weiße Zeug durchschauen. Es ist ein netter kleiner Hack. Wozu ich sie aber gerne verwende, ist das, kannst du Hintergrundbilder sehen? Wir entfernen die gesamte Farbe daraus. Dann können wir mit den Farbmischmodi spielen, okay, paar coole Sachen nur mit einer Volltonfarbe zu machen aber mit überlappenden Farben bekommen wir einige Wir machen das auch mit Schrift. Dies ist ein bearbeitbarer Typ. Kannst du sehen? Und es wirkt sich einfach auf interessante Weise auf den Hintergrund Farbebenenmodi, Mischmodi, gemischte Mischmodi. Es gibt viele Namen dafür, aber es ist die Art und Weise, wie Ebenen interagieren. Und wir können das zu unserem Vorteil nutzen, um coole, kreative Dinge zu tun. Und es springt, oder? Lassen Sie uns damit beginnen, das Logo, eins, zwei, drei , dieselben Versionen des Bring Your Own Laptop-Logos einzubringen Und zur Not können Sie einen Ebenenmodus verwenden, denn in können Sie einen Ebenenmodus verwenden, denn dem Moment, in dem ich diesen weißen Hintergrund habe, ist es ein JPEG, es wird keine Transparenz gekauft. Ich kann es irgendwie vortäuschen, indem ich dich hierher führe, mein Ebenen-Panel, anstatt durchzugehen, bis es sich bewegt Der Redakteur muss nicht so schnell rübergehen . Lass uns zoomen Okay, und wir können normal werden. Es ist nicht schlimm, zu sprechen, um das zu vervielfachen. Wir haben dieses Ding, das transparent zu sein scheint und funktioniert. Offensichtlich ist es besser, die Vektorversion als ein JPEG zu suchen , bei dem der Ebenenüberblendmodus auf Multiplizieren eingestellt Aber hey, es funktioniert. Eine Whiteout-Version gibt es hier. Sie müssen mit den verschiedenen Einstellungen herumspielen zu sehen, was für Ihr Logo funktioniert. Machen Sie diese drei Gruppen leichter. Kannst du dir vorstellen, dass all diese irgendwie dasselbe tun? All diese machen irgendwie dasselbe. Also die kleinen Linien da, okay. Sie sind also nicht alle genau gleich, aber sie haben sie irgendwie zusammengefasst. Du hast quasi eine Whiteout-Version. Funktioniert sehr gut mit geraden weißen und geraden schwarzen Logos. Es kommt auf das Logo an, auf die Farbe kommt es auch an. Also nochmal, es dorthin bewegen, zoomen und es wird nachgeschaut Also multipliziere, Kesey, multipliziere zwischen Multiply und Normal. Es verändert das Grün tatsächlich ein wenig. Und damit hätte ich als Designer, der das Logo gemacht hat, ein Problem , okay. Es hängt also von der Farbe Ihres Logos ab. Kannst du sehen, dass du vielleicht eine findest nah genug für ein Modell ist, okay, es gibt viele verschiedene Optionen hier unten Aber das ist interessant. Schade, wir können damit richtig kreativ werden, ist, lassen Sie uns ein Bild reinbringen. Lassen Sie uns also ein Bild namens Layer Blend einfügen. Ich werde es einfach rausziehen. Es ist eine Größe, viel zu klein. Ordnung, also ich habe dieses Bild, aber ich möchte vielleicht einfach die Füllung kopieren Denn wenn ich die ganzen Eigenschaften kopiere, merke dir unsere Tastenkombination Command Option C. Und ich klicke auf diesen Frame hier und wähle Command Option V. Es funktioniert, und wähle Command Und ich klicke auf diesen Frame hier und wähle Command Option V. Es funktioniert, weil es im Hintergrund läuft. Aber was Ihnen vielleicht nicht aufgefallen ist , sehen Sie sich dieses Quadrat an. Aber bevor sie gegangen sind, haben sie ihre Screener bekommen. Das ist, was Sie tun können , ist einfach die Agenda hier zu nehmen, sie so zu kopieren und dann einzufügen In Ordnung, es ist also hinten in meinem Rahmen. Ich möchte ein paar Dinge tun. Ich möchte dieses Bild hier machen, wahrscheinlich die gesamte Sättigung herausnehmen und mit dem Kontrast herumspielen, wahrscheinlich mit der Belichtung Okay, ich wollte im Hintergrund etwas düster und launisch sein und launisch Sie können also einige hübsche Dinge wie all die typischen Fotobearbeitungsarbeiten in Figma Aber jetzt möchte ich etwas drüber legen. Also schnappe ich mir einfach mein Rahmenwerkzeug. Ich verwende ein Rechteckwerkzeug. Warum ich mich entschieden habe, das Rahmentool hier nicht zu verwenden, liegt daran, dass ich weiß, dass ich möchte, dass dies nur ein Hintergrund ist. Und wenn ich einen Frame mache und anfange, Dinge hinein zu ziehen , als wären sie darin eingebettet Ich könnte einen Rahmen machen und ihn verriegeln. Ich werde einfach R für das Rechteckwerkzeug verwenden. Rechteck, das der Größe meines Hintergrunds entspricht. Okay, los geht's. Perfekt. Füllen Sie es mit einer Farbe. Ich suche mir die Farbe Ready Fiduciary aus. Wir gehen. Und Sie müssen dies nur von Pass-Through ändern, normal macht nichts, und dann können Sie das finden, was für Sie funktioniert Das Schöne daran ist, dass du das Hintergrundbild austauschen könntest , als könntest du einfach Bilder wie dieses und Photoshop machen , okay, einen Stapel davon machen. Aber was Sie in CSS tun können, Ihr Entwickler kann es technisch machen, kann oder Sie könnten tun, ist, dass Sie zwei Dinge haben können. Das Hintergrundbild, aus dem Sie die gesamte Farbe herausholen können, vielleicht die Bodensättigung , das kann per Codefall gemacht werden , um jedes Bild zu machen Und das Gleiche gilt für das, was hier übertrieben ist. Sie können mit diesen Ebenenmischmodi herumspielen. In CSS. Sie werden Mixed Blend Mode genannt. Schauen Sie nach, das ist eine CSS-Klasse. Okay, du kannst ein paar ziemlich coole Sachen machen. Ich wähle einen aus. Los geht's. Jetzt haben wir den ganzen Hintergrund gemacht, aber du könntest etwas Interessantes machen mit, oh, ich weiß, eigentlich langweiliger Weg könnte einfach so etwas sein. Sehen wir uns das an den Ecken an, halten Sie die Umschalttaste gedrückt und ziehen Sie es nach oben Du könntest so etwas machen. Ich weiß nicht, was ich mache. Das muss nicht die vollständige Deckung sein. Ich muss mit meinen Ebenen herumspielen. Du musst das, was ich tun werde, übertreffen. Ich springe, um ein bisschen zu zeichnen. Du wartest da Okay, ich sollte dich wahrscheinlich mit auf die Fahrt nehmen. Ich habe zwei Rechtecke gemacht und doppelt geklickt, um hineinzugehen Lassen Sie uns eines davon ausschalten oder doppelklicken Sie auf das obere Und ich ziehe tatsächlich, ich nehme mein Stiftwerkzeug und halte meine Wahltaste auf einem Mac gedrückt, halte meine Wahltaste auf einem Mac gedrückt um diesen Punkt zu entfernen. Und das ist an sich schon cool. Ich klicke auf Fertig. Ich könnte mir das andere Rechteck schnappen , das ich versteckt habe, und sagen Sie dasselbe, doppelklicken Sie darauf Schnapp dir das, schleppe es irgendwie hierher. Oh, das wäre vielleicht cool. Das mache ich. Wird es cool aussehen? Alles was wir sehen werden, ich werde eine andere Farbe wählen, weil wir wollen, dass sie sich überlappen Okay, genau das habe ich beschlossen, ist, dass ich versuchen werde, etwas zu finden , das sich mit einem Staatsstreich überschneidet Und wir haben vielleicht dort gespielt, wo ich bin, die Ebenenmodi hier. Okay, das sieht zwar cool aus, aber das sieht cool aus, diese Überlappung ist nicht großartig und es hat mit dem Ebenenmodus zu tun Wir können hier alle möglichen Dinge tun, um etwas zu finden, das ziemlich cool ist. Ist das ziemlich cool? Oh, ich weiß nicht. Das alles ist ganz in Ordnung. Dann rasst du ewig, kritzelst und zeichnest Sachen, die irgendwie interessant aussehen Okay, das hat mir am besten gefallen. Oh, da haben wir's. Es hat sich gelohnt. In der Mitte abgeschnitten Beschäftigen wir uns auch mit etwas Text. Wir können dasselbe tun, okay, also habe ich es einfach dupliziert. Ich fing an zu tippen und dann wollte ich die Größe ändern und ich dachte, ich weiß, ich werde tun, dass wir einige unserer Abkürzungen verwenden Um zu tippen, können Sie die Tastenkombination für Größe verwenden, die für kleine Dinge gut ist, nämlich Command Shift, Control Shift auf einem PC und das mehr als und weniger als oft. Und ich möchte wirklich große Veränderungen vornehmen. Ich verwende einfach das K-Tool für die Skalierung und ziehe es einfach nach oben. Willst du wahrscheinlich eine noch größere. Okay, die anderen Abkürzungen, ich wähle alles aus. Nun, Sie werden sich diese wahrscheinlich nicht auswendig merken, aber denken Sie daran, dass Sie das Tastenkürzel ausdrucken müssen , hängt von Ihrem Typ ab, Nerdität wie Schriftstärke aus irgendeinem Grund. Es gibt eine gute Abkürzung für mich, wird nicht für viele Leute sein, aber es ist Befehlsoption oder Strg-Alt auf einem PC und verwenden Sie diese einfach größer als oder kleiner als Finde etwas , das nett und groß ist. Wählen Sie Shift oder Alt Shift auf einem PC, um mit der Zeilenhöhe herumzuspielen Wir haben es vernetzt , weil es ein so großer Typ war. Wer verringert den Buchstabenabstand. Okay, das stimmt. Halten Sie die Wahltaste oder die Alt-Taste gedrückt und dasselbe größer als, kleiner als. In Ordnung, und warum wollen wir hören und Escape auf meiner Tastatur drücken Denn wenn ich versuche , die V-Taste zu verwenden, funktioniert die Tastenkombination nicht, wenn Sie im Textwerkzeug sind. Ich mache das rückgängig, drücke die Escape-Taste. Und ich drehe es um und mache riesigen, bunten Text. K für das Skalentool. Und lass uns eine Farbe wählen. Schlammgelb. Da haben wir's. Das wird sich ändern, wenn wir uns unsere Ebenenmodi ansehen. Also, wenn ich wollte, quasi als Hintergrundsache, nicht als wirklich lesbarer Text Ich möchte nur, dass es eine coole Hintergrundsache ist. Ich werde etwas finden, das funktioniert. Du wartest, wirst dich hier eine Weile rauf und runter winden Ich werde mit dem Overlay beginnen. Ich hatte die ganze Zeit meinen Kopf zur Seite gedreht. Und ich könnte mit der Opazität dieser Ebene herumspielen. Hier. Ich gehe runter. Dies ist nur eine Abkürzung, bei der Sie 550 drücken , um auf Ihrer Tastatur nur die Nummer zwei zu drücken. In Ordnung. Das ist es, wonach ich suche. In Ordnung, das sind Mischmodi. Man kann viel mit ihnen machen. Sie können programmgesteuert implementiert werden. Die ENS, du müsstest eine Zillion davon machen. Es könnte sein, dass, was auch immer die Standardeinstellung ist, hochgeladene Bilder entfernt , Transparenz, Ed Type , Mix, Blend, CSS-Modus verwendet werden. Und Sie können Seiten haben, die wirklich einzigartig aussehen , sodass Sie sie nicht alle erstellen mussten. In Ordnung, das ist es, Mischmodi, Farbmodi . Wir sehen uns im nächsten Video. 103. Kursprojekt 13: Social Ad: Hallo alle zusammen. In diesem Klassenprojekt werden wir Werbung für soziale Medien schalten. Deshalb werden wir viele der Techniken zusammenführen , die wir in diesem Abschnitt über Bilder und hauptsächlich das Zuschneiden von Bildern gelernt haben in diesem Abschnitt über Bilder und hauptsächlich das Zuschneiden von Bildern gelernt Ich habe es also auf eine eigene Seite gestellt. Okay. Ich habe den Rahmen benutzt. Unter den sozialen Medien. Sie können jedes davon verwenden. Es macht mir nichts aus, welches Seitenverhältnis Sie verwenden oder welche Plattform. Möchte, dass du etwas machst, das für eine Persona bestimmt ist, das ist nicht so sehr eine gestalterische Herausforderung Mach dir keine Sorgen, wenn du sagst, Oh, ich will nichts machen, bring einfach alles rein Es ist eine Anzeige, um für Ihre App zu werben. Einige von Ihnen nehmen sich jedoch Zeit, machen etwas Nettes. Das Problem und das Knifflige ist, mir egal ist, was hier läuft, wo es hingehört und was Sie sagen, Sprache Sie verwenden, welche Bilder Sie verwenden. Es ist wirklich eher eine technische Herausforderung, okay? Es wird kreativ sein, es wird ziemlich schwierig sein, all das irgendwo in die Anzeige zu integrieren all das irgendwo in die Anzeige Okay, ich will also die Textmarken und die Mischmodi Alpha-Maske, Luma-Maske, Spillover-Maske und Ebenenüberblendung Da eignet sich am besten jeder, der vielleicht knifflig als Spillover-Maske ist, nicht jeder hatte eine Maske richtig gut oder benutzt das Stiftwerkzeug Sie werden nicht einreichen , wenn Sie es nicht können. Nur zur Erinnerung, während Sie arbeiten, sowie ein paar Abkürzungen, die wir zuvor gelernt haben Wenn Sie einen Mac verwenden, halten die Befehlstaste gedrückt, während Sie die Kanten ziehen Und wir haben es auf einem PC zugeschnitten, es ist Control. Und springe in den Zuschneidemodus. Vielleicht können Sie die Wahltaste auf einem Mac gedrückt halten, auf einem PC die Alt-Taste drücken und darauf doppelklicken. Da hast du's. Und es springt irgendwie in diesen coolen Croping-Modus. Nur zur Erinnerung, du musst sie nicht benutzen, aber los geht's. Ergebnisse, ein Bildschirmfoto, oder Sie können Ihr Add-K exportieren und in die Aufgaben hochladen Wenn Sie jetzt exportieren, können Sie einfach einen Screenshot machen, wie wir es zuvor gemacht haben, oder Sie können hier in Ihrem Eigenschafteninspektor auf Ihrem Frame auswählen hier in Ihrem Eigenschafteninspektor auf Ihrem Falls Sie den Export noch nicht in der Essentials-Klasse gemacht haben, haben wir das in diesem Kurs noch nicht gemacht. Sie können einfach den Rahmen auswählen und sagen, als JPEG exportieren , was Sie möchten. mir nichts aus. Aber für diesen. Ich würde gerne sehen, was du tatsächlich machst. Teile es in den sozialen Medien und verwende den Hashtag Figma Advanced Ich würde gerne sehen, was Sie machen und vergessen Sie nicht, besonders im Abschnitt mit den Aufgaben Wenn Sie die von jemand anderem gesehen haben, wäre es großartig, wenn Sie einige Kommentare zu nicht nur einer, sondern zu der Arbeit von zwei Personen hinterlassen könnten einige Kommentare zu nicht nur einer, und Sie eine Social-Media-App erstellen und versuchen, all das darin unterzubringen. Mach einen besseren Job als Dan. Heiliger Strohsack. Ordnung, wir sehen uns im nächsten Video. Viel Spaß mit den Hausaufgaben. Eigentlich keine Hausaufgaben, habe das Klassenprojekt Spaß gemacht, Lernkram 104. So fügst du Videos in Figma hinzu: In Ordnung, alle zusammen. Willkommen in diesem Videobereich und dem Kurs. Ich kann nicht aufhören zu lächeln , weil ich diesen Kerl liebe. Zufälliges Video von einem Mops macht mich allerdings glücklich. Ich zeige Ihnen, wie Sie das Video in das Projekt integrieren können. Einige der Gründe, warum es bei Ihnen möglicherweise nicht funktioniert. Einige der Anforderungen, Vor- und Nachteile. Und natürlich fügen wir ein paar riesige Texte ein, was großartig ist, weil dort Mopsleben steht In Ordnung, springt. Okay, um damit zu beginnen, habe ich ein Videobild gemacht. Um ein Video einzubringen. Du bringst es wie ein Bild hinein und kannst deine Tastenkombination Shift K oder Strg K verwenden K oder Strg K Und in deinen Übungsdateien gibt es eine Videooption, wenn sie ausgegraut sind, das ist schlecht Eines von zwei Dingen passiert. Sie haben einen kostenlosen Tarif oder Sie haben einen kostenpflichtigen Plan wie eine Organisation für Unternehmensbildung, es gibt ein paar verschiedene, aber selbst wenn Sie diese nutzen, können Sie nicht an Entwürfen teilnehmen Okay. Also geh zurück zu meiner Dateiseite. Ich arbeite an Entwürfen. Da ist meine Figma-Datei Ich bin Teil eines Teams, meines Bring Your Laptop-Teams. Es ist ein bezahltes Team und ich kann es mit reinziehen. Ich habe einen vollständigen Ordner namens Figma Advanced Course Wenn es da reingeht, kann ich es öffnen. Und wahrscheinlich bleibt es immer noch hängen, wenn Anzeigen eingehen. Manchmal muss man Figma neu starten , damit es weiß, wo es sich befindet Manchmal tut es das, manchmal nicht. Jetzt können wir ihnen ein Video bringen. Aber diejenigen unter Ihnen, die nur einen kostenlosen Account haben, können sich diesen Teil einfach ansehen. Hier gibt es nacheinander ein paar Videos. Und diesen Abschnitt über Videos, mach sie, weil wir nicht nur etwas über Video lernen und du sagst, ich verwende kein Video. Wir bauen einige komplexe Komponenten. Wir fügen einige Komponenteneigenschaften hinzu. Automatisches Layout. Ja, ich schaue durch auch wenn du es nicht genau kannst. Wie ich schon sagte, du kannst es wie ein Bild reinbringen. Okay, ich werde das hier reinbringen. Ich sollte das reinbringen , weil ich ein Techno-Ding mache Also ich werde diesen Puck machen, weil Bugs großartig sind. Sie bringen mich zum Lächeln. Ich sehe einen ohne triftigen Grund. Umarmungen. Oh großartig. Ordnung, und du platzierst es so, als ob ein Bild, auf das du klicken kannst, die volle Größe haben möchte, was du groß machst, okay? Oder du kannst es einfach anklicken und herausziehen und genau das mache ich. Ich ziehe es heraus, warte, bis es geladen ist, klicke und ziehe es heraus. Halten Sie Shift gedrückt. Es hat also die richtigen Proportionen. Okay, ich schneide es nicht ab. Und sie sagen, lassen Sie uns einfach eine Vorschau davon machen, wie es ist, indem wir Factoring verwenden. Also werde ich in den Vorschaumodus wechseln . Wer erinnert sich daran, zwischen Design und Vorschau zu wechseln ? Es ist eine Weile her. Schicht a, du hast es. Okay, mit diesem hier beginne ich einen Flowpoint , sodass er einfach auf die richtige Seite springt Ordnung, da ist mein Mops, er spielt einen Käfer Cool. In Ordnung, eine Sache mache ich vom Ende aus einen Rückzieher. Ich habe das Video beendet. Ich dachte, Oh, das sollte ich hier erwähnen. Also haben wir es mit unserem Shortcut in ein Bild eingefügt, okay, und es einfach platziert Sie können tatsächlich einfach einen Rahmen zeichnen und ihn anwenden, wie wir ein Bild machen, okay, damit wir ihm eine solide, gute Videowiedergabe geben können. Klicken Sie auf Video auswählen. Wenn es sagt, Hey, kannst du nicht wirklich erklären warum. Es ist entweder in Entwürfen enthalten oder Sie haben kein kostenpflichtiges Konto. Und vielleicht ändert sich das und du kannst dein süßes Image einbringen. Oh süßes Video, tut mir leid. Du landest am selben Ort. Okay, wir haben beide einen Behälter mit unserer Füllung. Dieser hier ist ein Behälter mit einer Füllung. Im Ebenen-Panel sehen sie etwas anders aus. Kannst du den sehen? Er ist mein Frame namens Frame 24, böser Dan. Dieser hier ist nur, er hat ein nettes kleines Icon für Videos, aber du kannst sie dazu bringen, genau dasselbe zu tun. In Ordnung, mach mit dem Video weiter. Und ja, wir machen ein paar Textvideos darin. Aber das kommt später. Ignoriere das. Es gibt ein paar Dinge , wenn Sie es mit der Wiedergabe des Videos zu tun haben . Und vielleicht gibt es Design View und dann gibt es einen Prototyp für Sie. Prototypenansicht hat einiges mit dem Video zu tun, das Sie auf dem Design sehen können. Okay, also hier drüben, lass uns das hierher verschieben. Autoplay ist also aktiviert. Jetzt zur Vorschau: Command, Option-Return, Strg, Alt, Return auf Ihrer Tastatur. Ich habe es noch einmal erwähnt, nur eine kleine Erinnerung. Sie können sehen, dass es nicht abgespielt wird, was nicht LUSTIG ist. Was wir im Rahmen des Prototyps tun können, ist die Interaktion zu bearbeiten. Das ist der Moment, in dem es angezapft wird. Ich möchte, dass du das Pausenvideo und all das abspielst. Es gibt einen Video-Umschalter. Perfekt. Lassen Sie uns nun eine Vorschau geben. Komm schon drei, damit ich zu meinem dritten Tab komme drei auf einem PC steuere. Nur eine weitere Erinnerung. Kannst du diese Pose sehen? Ich klicke nur einmal. Tippe, um zu spielen Fantastisch. In Ordnung, Happy Pug Bevor wir weitermachen und im nächsten Video Steuerelemente hinzufügen, nur um zu wissen, dass das Video einfach eine Füllung K ist wie alles andere. Wenn ich zur Entwurfsansicht zurückkehre, werden Sie sehen, dass es sich um eine Füllung wie unser Bild handelt. Wir können also Dinge mit diesen Feldern machen, genau wie mit einem Bild. Wir können uns an die Tastenkombination erinnern, die gedrückt halten mussten, um mit dem Zuschneiden zu beginnen Okay, es ist Command auf dem Mac, Control auf dem PC, damit wir das Video ausschneiden können. Es könnte es für den Entwickler später schwieriger machen, die App in dieser seltsamen Form zu produzieren , die Sie erstellt haben Normalerweise bleibt das Video auf einem Zwilling einer bestimmten Größe hängen , es sind 16 oben und neun unten an der Seite Es wird das Seitenverhältnis genannt. Wie dem auch sei, wenn Sie nicht viel über Videos wissen , können Sie es zuschneiden. Es kann jedoch Probleme wie bei einem Bild verursachen. Ich kann hier unten einen Rahmen zeichnen und ich kann Ihnen sagen, ich kann entweder Eigenschaften kopieren oder ich nehme nur die Füllung, kopiere sie und füge sie ein. Ich bewege mich. Kannst du es in einen Text schreiben? Wie kannst du da überhaupt warten? Okay, Tupac wäre nicht glücklich Bonds, weil wir es bereits kopiert haben, könnte die Füllung sein Ich sollte das auswählen und einfügen können. Und dann gehst du, lass uns sicherstellen, dass das Video und der Prototyp automatisch abgespielt Gehen wir und schauen uns das an. Mach Dan glücklich. Oh, der Hund, immer aussieht, als wäre er gegen das Fenster gestoßen. In Ordnung. Also ja, Videos können wie Bilder verwendet werden. Vieles davon, ich werde nicht alles behandeln, was Sie tun können, aber wenn Sie ein Bild verwenden können, können wir es mit einem Video machen. Dinge, die Sie über diesen Kennan-Kontext wissen sollten. Die erste ist also, dass Sie in bezahlten Tarif-Profis sein müssen , der erste. Und es gibt viele dieser Algorithmen, die überprüfen, sie könnten das im Moment ändern. Es wird nur bezahlt, wenn Sie eine kostenlose Figma-Lizenz haben , sie könnten es dort schaffen Es ist irgendwie komisch, dass das ein Teil der Bezahlung ist. Die andere Sache ist, dass es nicht in Drafts sein darf, da es nicht unter Drops sein darf Es muss in einem Bezahlteam sein. Das ist mein. Sie sind nicht kostenlos, Free Bed Control auch. Die andere Sache ist , dass es die meisten allgemeinen Dateiformate unterstützt . Also Mp4, wahrscheinlich das gebräuchlichste MOV. Es gibt noch einen, benutzt ihn auch im Internet. So bekommt man normalerweise solche Dinge, die nicht zu groß sein dürfen. Ich denke, 100 Megabyte sind die Grenze für ein Imagevideo , das reinkommt, wenn Sie Dinge verkleinern und zerschneiden müssen , wahrscheinlich so etwas wie Adobe Media Encoder Das verwende ich sowieso, das ist Teil der Adobe-Suite. Es ist wirklich gut darin, Dinge einfach zu kürzen und die Dateigröße kleiner zu machen als die andere Sache im Moment dieser Aufnahme, Videos dann auf der mobilen App abzuspielen, was ein Problem ist. Also bevor du gehst und ewig damit verbringst , dieses Ding zum Laufen zu bringen, in dem Wissen, dass du Benutzertests vor Ort in der App durchführen wirst , nur dass es nicht funktionieren wird. Sie können es also einfach wie ein Video aussehen lassen, aber in der App funktioniert es im Moment nicht. Also überprüfe das noch einmal. Die andere ist, wo kriege ich meine süßen Mops-Bilder her? Und ich hole sie mir für diese Demoversion. Und ich mache Videos mit Premiere Pro After Effects. Wenn ich nur ein paar Platzhalterkram brauche, bin ich zu etwas wie Pixeln übergegangen Sie eignen sich auch gut für Fotos, aber es gibt eine Videooption und ich habe eine wirklich große Bibliothek. Das wird sich ändern. Du kannst sehen, da ist meine Mopssuche Und ich habe diesen Typen hier gefunden, überprüfen Sie ihre Lizenzen, aber die meisten von ihnen, oder Sie können sie ohne Vergeltung kommerziell nutzen oder Sie können sie ohne Vergeltung kommerziell nutzen, aber überprüfen Sie es selbst Wenn ich kostenpflichtige Videos benötige, verwende ich entweder Adobe Stock oder Envato Elements Das verwende ich für meine Sachen. Wenn Sie eines davon möchten, können Sie diese Affiliate-Links hier verwenden. Sie geben mir einen kleinen Anteil , wenn du dich anmeldest, kostet dich das nichts mehr. Es ist eine sehr Win-Win-Situation Ansonsten pixelt diese Seite nur für einige Platzhaltervideos In Ordnung, lassen Sie uns mit dem nächsten Video fortfahren. 105. So erstellst du ein Autoplay-Video im Hintergrund in Figma: Hallo zusammen. Hey, wir machen ein Hintergrundvideo in Figma Wenn du denkst, Hey, Eric und ich haben schon die Nase dazu, tust du es. Ich habe hier dieses kleine kurze Video für die Leute gemacht, die aus dem Zusammenhang gerissen sind, und ich mag, was war das? Wie machen wir das? Sie können also zu diesem Video springen, wissen, wie man ein Hintergrundvideo macht, sind nur ein paar winzig kleine Dinge, die anders sein könnten, lebenswertes Video damit. Es ist so einfach wie es ist, es zu tun. In Ordnung, du kannst es mit jedem alten Frame machen. Ich werde das hier mit keinem alten Rahmen und dem Hintergrund meines Telefonrahmens machen hier mit keinem alten Rahmen und dem Hintergrund meines Telefonrahmens Also, da es ausgewählt ist, habe ich eine Füllung. Ich werde es einfach ändern, indem ich es ändere, indem ich dort auf das Weiße doppelklicke Machen wir es eigentlich so, weil es ein Problem verursacht. Wenn ich hier auf eine zweite Füllung klicke, ist das in Ordnung, außer dass die oberste 20 Prozent beträgt. Ich möchte also nicht, dass mein Video 20% beträgt, ich möchte, dass es 100 ist. Also gehe ich zu ihrem soliden Video und wähle Video, wenn du hier nicht weiterkommst. Denk daran, dass du deinen Entwurfsordner verlassen musst und in einen kostenpflichtigen Teamplan Und ich werde meinen als meinen auswählen, da haben wir es. Abstraktes Hintergrundvideo. Warte eine Sekunde. Videos stressen die Dinge und standardmäßig sollte es funktionieren. Okay, aber wir können das überprüfen, indem wir die Umschalttaste E drücken. Okay, ich habe meinen Frame ausgewählt, er ist auf Autoplay eingestellt Ich werde dafür sorgen, dass eine Schleife entsteht, was wichtig ist. Beachten Sie, dass es in einer Schleife läuft. Das tut es. Ich will irgendeinen Ton. Tue ich nicht. Dies ist ein Hintergrundbild , da es ein Hintergrundvideo gibt. Sehen wir uns eine Vorschau an. Da haben wir's. Oh, da ist es. Ich werde eine kleine Hintergrundgrafik machen. Ich werde mit dem Typ herumspielen müssen, um ihn weiß zu machen, aber Sie haben die Idee, in Ordnung, wenn Sie nach Hintergrundbildern suchen, ist abstrakter Hintergrund praktisch, Tim to know und Looper Bull Wenn Sie das Wort Looper Bull eingeben, bedeutet das, dass der Anfang am Ende desselben Wenn es also in einer Schleife läuft, gibt es keinen großen Sprung wie dieser hier, der keinen hat. Es ist also nett und loopfähig. Okay, das sind Hintergrundvideos in Figma 106. Wie du ein Video abspielen kannst, wenn du in Figma schwebst: Hallo alle zusammen. In diesem Video erstellen wir ein Video, das nur abgespielt wird, wenn Sie mit der Maus darauf zeigen Okay, ein sehr wichtiger Hinweis ist, dass ich auf einem Handy schwebe, was unmöglich ist, okay? Sie können dies nur auf einer Desktop-Version tun. Okay, wir, jemand hat eine Maus, mit der er den Mauszeiger über K bewegen kann, aber ich lege meine auf ein iPhone, weil ich sie Mauszeiger über K bewegen kann, aber ich lege meine auf ein iPhone, weil in den Frames herumliegen hatte, die wir gebaut haben Also lass uns reinspringen und ich zeige dir, wie man mit der Maus schwebt und spielt. Ordnung, also werde ich ein Video in ein Bring Him-Video importieren , um hier auf meinem Board ungefähr die richtige Größe zu bekommen hier auf meinem Board ungefähr die richtige Größe Ich werde die Umschalttaste gedrückt halten, während es herauskommt, um sicherzugehen , dass es das richtige Seitenverhältnis hat, die Daumen mit der erhöhten Breite haben sich herumgeschlichen Okay, und ich werde Shift gedrückt halten und es so einstellen, dass es zu meinem Ding da unten passt. Großartig. Nun, die Sache ist, dass ich das nicht kann. Ich kann nicht sagen, dass du unter Prototyp eine Interaktion hast, die sagt, wann ich es bin, das ist es, was ich dachte, ich würde tun. Wie beim Schweben Ich möchte das Video abspielen. Auf Knopfdruck. Am. Das könnte sich ändern. Okay, also sieh dir das weil der Weg, den ich dir zeigen werde, viel einfacher ist. Aber in dem Moment, in dem Sie keine Videos abspielen können , während Sie den Mauszeiger in diese Inrichtung bewegen, könnte dies eine Problemumgehung sein Lass mich in den Kommentaren wissen, ob du es besser herausgefunden hast als ich hier, und ich werde zurückkommen und dieses Video für den Moment noch einmal aufnehmen . Ich werde diese Interaktion loswerden. Ich sage Video, komm runter. Ich muss aus dir eine Komponente machen. Okay, ich benenne es um. Nennen wir dieses eine Video Hover Play. Spielen, oder das ist Command oder Control R. Ich brauche zwei Varianten, es heißt Rosa, mach weiter und sie klicken auf den Komponentensatz, um zurück zum Design zu gehen. Wir haben eine Immobilie, die wahrscheinlich eine heißt. Nennen wir das eine Wiedergabe. Okay? Und wir haben zwei Varianzen, schauen Sie mal, wir haben Standard, das ist die oberste, und diese wird Pause sein Ich wollte standardmäßig pausieren, ich drücke die Tabulatortaste und der zweite Wert ist Play to Lead, damit das Play to Lead, damit Das ist eine interessante Sache nur in Videos generell, schaut zu, ob ich auf diese obere Variante gerutscht bin, um zu pausieren, ich muss sie nach oben verschieben, weil Frau mit meinem Kopf Okay. Gibt es den gleichen Befehl wie Overhear? Pause oben. Okay. Wenn ich zum Prototyp gehe, was Shift D ist, habe ich das Autoplay von früher nicht Du sagst, Hey, der Zant ist weg, Tweed. Da es sich um eine Variante handelt , sind die Videos dort tatsächlich verpackt. Und das ist mein Autoplay. Aber wenn ich nur auf die äußere Hülle klicke, was meine Variante ist, kann man nicht viel davon sehen. Achte also darauf , dass du tief im Inneren nach dem Video suchst tief im Inneren nach dem Video Die erste ist Autoplay aus. Doppelklicken Sie im zweiten Modus, um hineinzukommen , oder halten Sie die Befehlstaste oder die Strg-Taste gedrückt, klicken Sie auf das Tauchsymbol und stellen Sie sicher, dass Autoplay auf on loop eingestellt ist Ich werde es mir wahrscheinlich holen. Der Ton aus hängt davon ab, was Sie tun möchten. Ich glaube nicht, dass auf diesem Video Ton zu hören ist, aber du kannst es ein- und ausschalten. Jetzt brauchen wir also die Interaktionen. Ich klicke auf den oberen. Okay, ich sage, wenn du zu diesem gehst , werde ich nicht darauf hören. Ich möchte gehen, während ich den Mauszeiger bewege, aber jetzt kann ich zur Spielpause gehen und es lässt mich beim Ziehen nicht dich da haben, während ich schon eine habe Ich habe schon einen. Also da ist dieser hier. Lassen Sie uns das loswerden. Ich habe Zeit, während ich schwebte Jetzt möchte ich den Käse nicht überarbeiten. Mein Gehirn will manchmal nicht, dass es auf Hover läuft. Was wir tun wollen, ist beim Hover zu sagen, ich will nicht, dass es Pause spielt Also lass uns das loswerden. Fang noch einmal an, Dan. Okay, du wirst es tun. Ich lasse das hier drin. Wenn Sie also mit der Maus fahren, möchte ich nicht, dass Pause abgespielt wird. Ich möchte, dass es einfach zu dieser Variante wechselt. Also wechseln wir zur Playversion, zur Wiedergabe, zur Play-Version, die die unterste ist. Ändern Sie es also, während Sie den Mauszeiger bewegen. Dann wird dieser Aufsatz automatisch abgespielt und es sollte losgehen. Ziehen wir ein Duplikat heraus, halten Sie die Wahltaste oder die Alt-Taste gedrückt. Ziehe irgendeinen von denen raus. Es erfasst tatsächlich den gesamten Instanzsatz, okay, nicht nur diesen einen Teil davon Und abgesehen davon, dass es nicht in einer Reihe steht, sich anstellt. Lassen Sie uns jetzt schon eine Vorschau geben. Habe meine Vorschau geöffnet. Tue ich nicht. Tanzende Hühner. Lass uns diesen Flow hier starten und schauen, wann du gehst. Schau dir das an. Er hat es verstanden. Es ist ziemlich inszeniert. Gut beleuchteter DJ-Sitz. Jedenfalls. Aber los geht's. In Ordnung, das ist es. Denken Sie nur daran , dass Sie auf einem Mobiltelefon nicht schweben Wir machen das nur , weil wir das in Bezug auf Frames herumliegen haben . Okay, das war's für den Moment. Wir sehen uns im nächsten Video. 107. Kursprojekt 14: Hover-Spiel: Wen ich es fühlen kann. Ich denke, du möchtest Amen, ich hoffe, es macht uns zu einem Klassenprojekt. Es ist ein Klassenprojekt. Ich möchte nur, dass du dieselbe Art von Grafikkarte machst, die abgespielt wird, wenn du den Mauszeiger darüber bewegst Erstellen Sie eine Grafikkarte, die abgespielt wird, wenn Sie den Mauszeiger darüber bewegen. Los geht's, so, aber finde Musik, die zu deinem Genre passt, oder benutze deinen eigenen süßen kleinen Hund. Entweder einer. Ich wollte das Ding nur zum Laufen bringen und ich möchte, dass du ein Video machst, wie du damit interagierst Teilen Sie also den Videolink Ihrer Hover-Interaktion, laden Sie ihn in den Aufgabenbereich hoch und laden Sie ihn auch in die sozialen Medien hoch, laden Sie ihn auch in die sozialen Medien wenn Sie möchten. Ich würde es gerne sehen. Stellen Sie sicher, dass Sie den Hashtag Figma Advanced verwenden. Und wenn jemand fragt, sag es ihnen, geh und sieh nach, Dan könnte sich seinen tollen Kurs ansehen. Und das alles ist nur eine Erinnerung daran, die Schwebewege anderer Leute zu kommentieren. Dieser hier ist eher ein gutes Werk, High-Five, es sei denn, es ist etwas Kritisches dran Dies ist ein weiterer Beweis dafür, dass Sie diese Art von Projekt durchführen können. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 108. So erstellst du einen Play-Pause-Button für Videos in Figma: Hallo alle zusammen. Hey, in diesem Tutorial lassen wir dieses Video abspielen , wenn wir die Play-Taste drücken, Pause. Wenn wir die Pause-Taste drücken, wird der Ton für die Stummschalttaste ein- und ausgeschaltet. Und wir lassen es 5 s überspringen. Es sind eigentlich nur 2 s weil es davon abhängt, dass ich das Video auswähle, das nur 4 s lang ist . Gut. Damals, aber hey, es funktioniert. Lass uns tauchen , um loszulegen. Ich habe einige Icons aus unseren Übungsdateien mitgebracht. Ich habe sie in ihr Gericht gestellt. Das Symbol heißt Videosymbol. Es gibt sechs von ihnen. Ich habe sie gekauft und sie in die passende Größe gebracht. Ich verwende 3d2-Pixel und habe sie weiß gemacht. Und es ist die Seite mit all meinen Komponenten. Auf dieser anderen Seite habe ich ein Bild. Ich habe ein Video, das einen Mops zeigt, der auf einem Motorrad ist. Natürlich ist es nur ein Video, das nach Belieben importiert und eine Box darunter platziert wird. Wir werden im nächsten Video etwas ausführlicher darauf eingehen, aber im Moment geht es gerade erst los. Also im ersten Schritt benötige ich Shift I und gehe zu meinen Komponenten. Ich tippe das Spiel ein. Also ich habe hier einen Play-Button. Ich lege es hin, lege es hin, wo ich es haben will, und ich werde Shifty in den Prototypenmodus wechseln Ich sage, wenn darauf geklickt oder getippt wird, in meinem Fall automatisch dorthin gesprungen , okay Aber wenn es nicht ist, okay, geh runter, um abzuspielen, pausieren, pausieren, finde das Video. Und der Verstand wird zunächst ein Umschalter sein, ein Umschalter. Okay, und jetzt wird er eine Vorschau davon sehen. Ich klicke auf den Videotitel. Lassen Sie uns eine Vorschau ansehen. In Ordnung, Video mit Audio. Da hast du's. Abspielen, pausieren, abspielen, pausieren. Ein paar Dinge, die wir tun müssen , ist, dass es automatisch abgespielt wird. Also habe ich es ausgewählt. Ich schalte Autoplay aus. Also da ist jetzt meine Vorschau, Abspielen war Abspielpause. Die andere Sache, die ich vielleicht tun möchte, ist, dass ich standardmäßig stummschalten werde. Sie haben es hier vielleicht nicht über das Mikrofon gehört, aber auf diesem ist Audio zu hören. Wenn du dasselbe Video möchtest, findest es in deinen Trainingsdateien unter Videos, es heißt o5 die Linie ein bisschen gekürzt , damit mehr in mein Fenster passt In Ordnung, also was wir tun wollen, es ist nicht einfach. Wir machen den nächsten . Es ist nicht einfach, einfach zwischen einem Abspielsymbol und einem Pause-Symbol hin- und herzuschalten einem Abspielsymbol und einem Pause-Symbol hin- und kannst du, aber du kannst das Angular nicht machen, um das Video abzuspielen, oder zumindest kann ich das nicht. Ich werde dir zeigen, was wir tun werden und wenn du einen besseren Weg findest, lass es mich in den Kommentaren wissen. Also, was ich tun möchte, ist, dass ich auf diesen klicke. Ich gehe zu Command or Control D Also, dass zwei von ihnen, okay, und ich werde dieses Symbol hier austauschen. Okay, das Symbol im Moment ist also das Symbol von Play. Lass uns gehen. Gute Ikone. Ich mache eine Pause und lassen Sie uns es im Prototypenmodus auswählen . Klicken Sie darauf. Auf Knopfdruck. Das wird Pause abspielen, aber was wollen wir tun? Ich wollte nur diesen pausieren. Ich würde gerne umschalten. Nee, ich wollte nur spielen. Da haben wir's. Lassen Sie uns eine Vorschau geben. Siehst du, es funktioniert. Es spielt also nicht, was gut ist. Holen wir es uns. Abspielen. Pausiere es. Hey, spiel. Da haben wir's. Lass uns eine Stummschalttaste einschalten. Du kannst dir das vorstellen, ich zeige dir die anderen, aber es wird dasselbe sein. Gleiche. Scheint angemessen. Sieht das aus wie Thailand? Sowieso? Selb, gleich aber anders. Was wir machen, ist Schicht D zu schalten. Wir werden diesen ganz einfach durch die Stummschaltung ersetzen. Wir gehen zum Prototyp von Shifty und sagen, wenn das heißt tippen, nicht abspielen, Pause, Stummschalten, Stummschalten aufheben Und wir werden das umschalten lassen. In Ordnung, gehen wir Du kannst es nicht wirklich hören. Kannst du hören? In Ordnung. Sie haben es vielleicht im Hintergrund gehört. Der Redakteur hat den Sound möglicherweise etwas erhöht, damit Sie das Motorrad hören können Lass uns noch einen machen. Lass uns das Duplikat machen. Schieb das rüber. Lass uns das Symbol hochschalten. Der, ich bin mir nicht sicher, was der Go Forward 10 s ist. Also habe ich mir ein paar Apps angesehen und was ist der Unterschied? 10 s. Ich habe mir YouTube und Audible und ein paar andere angesehen . Ich konnte keinen bestimmten finden, also habe ich das hier irgendwie gemacht, was Loop Point hier drin hat, aber ich habe herausgefunden, okay , der ist schon 32, ich werde ihn weiß machen Lass uns das beschleunigen. Eine Sache, die ich umgedreht habe, lassen Sie uns das rückgängig machen, nur weil Sie es nicht genau wissen, wenn Sie es einfach ziehen, dreht es sich irgendwann um Das habe ich also getan. Ich werde einfach enden und ich habe Schicht und Option gedrückt , um es von der Mitte aus zu starten. Und dann habe ich einfach dafür gesorgt, dass es Tag zwei Pixel sind. Ich sehe mir nur den Rahmen hier drüben an. Da haben wir's. Es ist also 14 s her, wie wir es gemacht haben. Okay, was denken wir, das wie ein richtiges Symbol aussieht und es in ein Symbol umgewandelt wurde, benenne es um Okay, also ich habe jetzt ein Symbol, das meine Komponentenbibliothek mitbringen sollte, ich lasse es dabei, um die Linie auch zu verdicken Aber du verstehst die Idee, oder? Ich brauche Beispiele dafür. Da haben wir's. Ja, nicht dick genug, aber wie dem auch sei, was wir für diesen einen Shift D machen wollen, ist , sagen wir, diesen hier. Wenn es angezapft wird, will ich, dass es funktioniert. Also sprang ich nur um vier und zurück. Joseph, eine bestimmte Zeit ist dieselbe. Du kannst dir eine Uhrzeit aussuchen und du machst ein Video, zu dem du springen kannst. Ich mache nur einen Sprung nach vorne. 5 s, 10 s. Oh, ich glaube, ich wollte fünf sein. Ich bin mir nicht sicher. Ich bin mir nicht sicher, ob es in 10 s Videos gibt. Du hast die Idee. Okay, geben wir das in den Vorschauen an Schau es dir an, setze es zurück. Ich möchte es nicht zurücksetzen , weil ich in diesem Fall keinen Flow habe. Also muss ich D umschalten. Also muss ich diesmal auf klicken. Lassen Sie uns hier mit einem Flowpoint beginnen. Also zumindest ist es standardmäßig darauf eingestellt. Das Spiel wurde übersprungen. Ja. Spiele Skip Ten oder Five. In meinem Fall läuft meins irgendwie zurück. Wie lang hat dieses Video dann schau dir das an, bevor wir loslegen. Wie überprüfe ich das? Gehen Sie in den Designmodus, klicken Sie auf unsere Füllung und es ist genau so. Du kannst es schrubben. Schau, ich muss springen. Noch einmal, du hast die Idee. Machen wir 1 s. In Ordnung, ich habe meins zum Springen 2 s. Warte, wo wurdest du gesagt? Oh ja, das Genie Dan. Okey-Ekey. Warum haben wir zwei davon? Ich kann mich nicht erinnern. Jedenfalls. Wir haben zwei Stummschalttasten, wir haben einen Play One Pol, da kann man auch die Idee haben, es als Stopp-Aktion zu stoppen, wird bei dieser Art von Playbacks nicht sehr oft verwendet Lassen Sie mich einfach weitermachen, okay, und auch nur zur Erinnerung. Wenn dein Video aus irgendeinem Grund nicht abgespielt wird, liegt das daran, dass deine Designdatei entweder in Entwürfen enthalten ist oder weil du entweder in Entwürfen du nicht in einem kostenpflichtigen Teamplan bist. Diese beiden Dinge müssen im Moment passieren, um Videos verwenden zu können, die sich in Zukunft ändern könnten Da hast du's. Nervt das alle, die zu dünn Ja, ich sollte es reparieren gehen. Das mache ich jetzt nicht. In Ordnung. Wir sehen uns im nächsten Video. Okay? Okay, ich werde es ändern. Hauptkomponente: GoToMeeting-Komponentenbefehl. Klicken Sie darauf. Also sind wir direkt reingesprungen. Ich werde bei gedrückter Umschalttaste auf beide klicken, um 2-3 zu machen. Lass uns für drei, sieht gut aus. Mein passt eigentlich nicht viel besser. Wer will, der Kreis ist nicht die Rechte Es ist ein LUSTIGES Spiel , bei dem versucht wird, Symbole zusammenzubringen. Das ist vorerst gut genug. Gehen wir zum nächsten Video über. Aber wir müssen nicht zentriert sein. Das ist es, auf jeden Fall . Lass uns weitermachen 109. So baust du eine Grafikkarte in Figma: Hallo alle zusammen. In diesem Video werde ich diesen Button hier umschalten Ich sehe Play, Pause, Play Pause. Es ist also ein bisschen wie das letzte Video, in dem wir separate Schaltflächen hatten, aber dieses hier wollen wir, dass es abgespielt wird und wir wollen, dass es das Symbol ändert Um das zu tun, müssen wir das etwas anders angehen . Aber auch in diesem Video werde ich den gesamten Prozess der Erstellung dieser wiederverwendbaren Karte durchgehen . Okay, es wird also so sein, es wird länger dauern, weil ich nicht einfach zur Funktionalität übergehen möchte, sondern sie tatsächlich bauen will, um ein bisschen zu üben. Seien Sie auch gewarnt, dass in diesem Video, das ich angefangen habe, es zu verwenden, einige blinkende Lichter zu Okay. Es ist eine Nachtclubszene Seien Sie also vorsichtig, wenn Sie empfindlich auf diese blinkenden Lichter Ich möchte nur sicherstellen, dass ich sie nicht in anderen Videos des Kurses verwende . Das tut mir leid. Ordnung, lassen Sie uns mit dem gesamten Grafikkarten-Designprozess beginnen Jemand mag die Komponentenseite. Ich werde die Symbole einfügen, die ich im letzten Video ein wenig beschönigt habe letzten Video ein wenig Ich werde alles, was ich habe , in diesem Niemandsland unterbringen, also habe ich ein bisschen Fläche dafür, all die verschiedenen Größen. Ich möchte sie also nicht alle auswählen. Und wenn du sie auswählst, musst du sicherstellen , dass, wenn du eine kleine faule Auswahl triffst, du siehst, dass die Sieger geholt wurden, aber nicht der Rahmen, der darin enthalten ist nicht der Rahmen, der Ziehen Sie also entweder ein Feld nach dem Zufallsprinzip oder klicken Sie auf das erste, halten Sie die Umschalttaste gedrückt und schnappen Sie sich alle. Okay. Und jetzt habe ich Canyon Lincoln gemischt, sodass, wenn ich sie alle von verschiedenen Größen auf 32 ändere, sie alle die richtige Größe haben. Die ausgewählten Auswahlfarben werden zwar weiß sein. Ich möchte sie alle in einer Reihe sehen. Also möchte ich mir die Eltern von Stop schnappen. Okay. Und ich möchte es einfach hierher ziehen. Und ich neige dazu, sie mir jetzt einfach alle zu schnappen und Zentren horizontal zu verteilen Sie werden also irgendwie Space Out mögen. Das kannst du manchmal machen, manchmal kannst du es mit diesem Aufräumen machen Aber in dem Moment, als das ein Gitter war, ein Gitter da entlang, danke. Machen wir sie alle zu mehreren Komponenten. Und jetzt sind wir bereit , zu einem Video überzugehen. Schicht eins. Und ich werde meine auf meine Icon-Seite setzen, weil sie dort hingehören. Und dann gehen wir Seite nach unten. Ich habe eine leere Seite für unser Video erstellt. In Ordnung, und los geht's. Ich habe eine SMS. Ich habe da ein Video, wäre es nicht ein Video. Oh, sechs Kilo aus den Übungsdateien. Und ich habe einen Rahmen bis zum Boden. Und nur zur guten Angewohnheit werde ich meine Tics in meinen Rahmen stecken. Ich werde meinen Rahmen in ein automatisches Layout umwandeln. Lass mich mein Autolayout auf die richtige Größe bringen. Arbeite an der Polsterung. Und ich werde die Schicht einleiten. Ich werde eine Komponente namens Play hinzufügen. Ich ziehe es rein, es zerquetscht mich irgendwie. Lassen Sie uns das Ganze in eine Komponente verwandeln. Und wir sollten wahrscheinlich von hier aus an unseren Hauptkomponenten arbeiten , CO. Denn was wir jetzt tun werden ist, dass wir diesen Knopf nicht wirklich benutzen werden. Ich lasse es so aussehen, als ob der Knopf benutzt wird. Aber was wir wirklich tun werden, ist zwei Varianten zu haben , die zwischen dieser Top-Variante hin- und herschalten werden zwischen dieser Top-Variante hin- und herschalten . Es hat ihnen Namen gegeben. Also klicken Sie auf die Komponente, sagte es. Okay, lass uns hier rübergehen und auf die kleinen Einstellungen klicken. Und nennen wir das einen Spielmodus. Spielmodus. Tabulator nach unten. Dieser wird pausiert Dieser, einer wird spielen. Da hast du's. Pausieren und spielen. Also dachte ich mir, dass mein Name verwechselt wurde. Lass uns weitermachen. Also, was wir machen wollen ist das unterste hier unten. Ich werde so lange klicken, bis ich meine Instanz dieses Symbols gefunden habe, und ich werde keine ausgefallenen Komponenteneigenschaften erstellen. Und wir sagen, wechseln Sie hier einfach zwischen diesen beiden Denn wie die Pause, also was ich machen will , ist, dass sie, wenn darauf geklickt wird, also werde ich in den Shifty-Modus wechseln, in den Prototypmodus wechseln, da runtergehen und sagen, beim Tippen, den Spielmodus wechseln Es wird abgespielt, aber es heißt Pause-Taste. Wenn du verstehst, was ich meine . Okay, löst euch auf, das machen wir für den Moment böse. Mal sehen, ob es funktioniert. Eigentlich drücken Sie den Befehl Layouts, klicken Sie, halten Sie gedrückt, klicken Sie, um in das Video einzutauchen. ersten aus ist es zu einem Autoplay , anderen sollte es eingeschaltet bleiben Das ist Option oder Alt, ziehe eine Instanz meiner Hauptkomponente heraus und lege alles ab. Da ist eine Schlange, Kabine, in der wir gehen. Hey, wir machen es. Wechselt nicht zurück. Also wollen wir von dort aus weitermachen. Wenn du fertig bist, geh da hoch und es sollte alles einrasten. Lass uns das versuchen. Jetzt. Gehen wir zum Prototypenmodus. Lass uns einen neuen Flowpoint starten, damit wir dort an dem kleinen Play-Button können. In Ordnung, Standardlinie in der Mitte, ignoriere das Spiel. Und wechselt dann zurück zu Pause, Play, Pause. Wenn ich es so mache, hört es irgendwie auf, wo es ist. Ein paar Dinge , um das aufzuräumen. Eine ist die Lücke, die wir dort nicht sehen können, aber wir können sie dort sehen. Das passiert manchmal, wenn es vor allem Videos gibt , weil die Proportionen am Ende etwa eine halbe Größe haben , etwa ein halbes Pixel. Der Moment, in dem es einem gut geht. Das hier, ich werde es ein bisschen aufpeppen. mache es hier eigentlich nicht, werde es in diesem machen . Verschieben wir es nach oben. Ein Pixel. Das Gleiche gilt für den Boden. Wenn das nicht verschwindet, wonach ich normalerweise Ausschau halte ist ein halbes Pixel hier drüben. Sie können versehentlich 0,5 Pixel haben. Also, was gibt dir normalerweise eine Linie? Ich weiß nicht, warum es dort die weiße Linie gezogen hat. Wenn ich das am Telefon nehme, wäre das in Ordnung. Weiße Linie nur irgendwie bei dieser bestimmten Zoomstufe, los geht's. Okay, andere Dinge, die ich tun möchte, sind, dass ich das ein bisschen benutzerfreundlicher machen möchte Also werde ich Figma hinzufügen. Wir werden es Command-A nennen. Nennen wir das hier. Es heißt Kabeljau. Cod-Video, weil wir, glaube ich, auch ein Cart-Event haben. Hervorragend. Was ich tun wollte, ist , einige Eigenschaften darin hinzuzufügen. Es ist in den Komponenteneigenschaften. Also warum willst du das nicht tun , wenn das hier drin ist. Also ein paar Klicks, um den Text abzurufen und Inhalte zu finden. Fügen Sie eine Komponenteneigenschaft hinzu. Dieser wird Videotext sein. Und das Coole daran ist für mein Beispiel jetzt, die Person, die es benutzt, kann die beiden Varianten sehen , die Play und Pause haben. Und hier können sie den Text ändern. Das einzige, was ich tun muss, wenn ich das im Nachhinein mache , geben wir eine Vorschau, ist, wenn ich spiele Kannst du sehen, dass es auf das andere umschaltet? Also muss ich allerdings verlinken. Du verknüpfst sie nicht wirklich neu Du musst nur sichergehen , dass es dasselbe abgekühlt hat. Hier unten. Klicken Sie mit der Befehlstaste, um direkt zum Text zu springen. Ich werde einen weiteren Inhalt hinzufügen. Die Komponenteneigenschaft für Inhalte. Und ich habe hier schon den Videotext. Das sollte sich jetzt ändern. Hervorragend. Was wir sonst tun sollten, ist aufzuräumen, weil der Text zu hoch ist und er nicht in der Mitte liegt. Das war toll, als es nur eine einzige Zeile war Also, was ich tun werde, ist , zu diesen beiden zu gehen. Also eins, halten Sie die Umschalttaste gedrückt klicken Sie auf beide. Und ich sage, seid eigentlich links, aber zentriert. Es wird sich hier nicht viel ändern, aber es sollte diesen Kerl dazu bringen, zentriert zu sein, je nachdem, was du tun willst. Ich bin mir nicht sicher, ob das wirklich besser ist. Okay, als Nächstes möchte ich das austauschen können, damit ich mehr als einen haben kann Okay, ich habe es dupliziert. Dieser hier. Ich gehe rein. Du wirst sicherstellen, dass du das Video ausgewählt hast . Manchmal hast du Joseph vielleicht mit einem Frame konstruiert, mit einem Frame, in dem sich ein Video befindet. Das willst du nicht austauschen. Du willst tief, tief hineingehen, um zu versuchen, das Video zu finden. Und das ist einfach. Denken Sie daran, Command auf einem Mac, Control auf dem PC geht direkt in das Ding. Und in der Entwurfsansicht kann ich in das Video gehen. Ich kann mir einen neuen aussuchen, den Mops zurückbringen, ihn krank auf unsere Vorschau umstellen Und los geht's. Spiel Pause, Mops, Spiel, Pause. Der Nachtclub Oder es gibt zwei von ihnen. Das war mir nicht bewusst. Schau, es gibt zwei Versionen davon, weil diesem Ding gesagt wurde, geh und spiel den Namen des Videos ab, noch einen bestimmten Frame und ein Video, aber geh und spiel den Namen des Videos ab. Deshalb wird das zweimal gespielt. Und du gehst, wir alle in etwas, das sich darauf auswirkt. Benutze es nicht zweimal und du sagst, in Ordnung, das wird es sein So bringt man die Play-Pause-Taste in Figma zum Umschalten Wenn Sie sich einen besseren Weg vorstellen können, das in Gang zu bringen, lassen Sie es mich in den Kommentaren wissen. Ich freue mich auf den Tag, an dem wir dieser One-Taste Tipp-Operationen hinzufügen können dieser One-Taste Tipp-Operationen damit sie sowohl abgespielt als auch zu einer anderen Komponente wie der Ich Play-Taste gewechselt anderen Komponente wie der Ich Play-Taste werden kann, sobald das funktioniert. In Ordnung, ich werde es im nächsten Video sehen 110. Kursprojekt 15 - Videokarte: Hallo zusammen. Es ist keine Hausaufgabenzeit. Es war Zeit für ein Klassenprojekt. Es ist ganz anders. Ich möchte, dass du eine Grafikkarte machst wie wir es in den letzten Videos gemacht haben. Das Video nun, es sieht so aus. Okay. Die Anforderungen oder Bedürfnisse müssen einen Videotitel haben. Es muss wollen, dass du das machst, das die Play-Pause-Taste zum Umschalten hat Play-Pause-Taste zum Umschalten Also wenn es los ist, wird das Spiel ins Minus, sorry, das Stück wird zur Pause. Ich will arbeiten. Habe dort auch eine Stummschalttaste. Ich möchte, dass du für den letzten Teil tust, dass du tatsächlich eine Komponente hast, ich wollte eine Komponente sein , die wiederverwendet werden kann Deshalb möchte ich, dass du es als zwei separate Videos zeigst. Welche Videos? Und hoffentlich stimmen sie mit Ihrem Projekt überein, denn das bauen wir. Aber wenn du Mops in deinem Leben brauchst, geh auch dorthin. Okay, es ist dieselbe Komponente, aber nur zu Instanzen mit unterschiedlichen Videos und was ich nicht möchte, ist, bevor Sie gehen und einfach kopieren, was wir bereits gemacht haben, und sich andere Videoplayer ansehen Du kannst nicht viel tun, aber es gibt noch mehr. Ich möchte, dass du interessanter bist als nur genau das, was ich getan habe, war sehr inspiriert. Was ich getan habe, ist, dass ich Orte eingerichtet habe , an die ich gehen würde, um sie mir anzusehen. Jetzt suchen Sie nach dem Wort Videoplayer-Benutzeroberfläche oder Grafikkarte oder Video-UX. Und genau das habe ich getan. Also habe ich mir Dribbling angesehen, einige gute Ergebnisse bei verschiedenen Dingen in den Play-Buttons erzielt und es ist alles sehr nett Ich hatte mir auch Behance angesehen. Ich habe die Benutzeroberfläche für die Videowiedergabe eingegeben. Noch ein paar Websites, die Sie vielleicht nicht benutzt haben, screen lane.com, es ist ziemlich cool Ich habe gerade das Video eingegeben und ein wenig durchgesehen und ein paar gute Sachen gefunden Und Page Collective war eine weitere gute. ich nur auf Dinge gestoßen In letzter Zeit bin ich nur auf Dinge gestoßen, die ich verwende, um Ideen für die Benutzeroberfläche zu bekommen Ich habe hier in deinen Klassenprojekten Links zu ihnen eingefügt. Die Ergebnisse sind also wie gewohnt. Machen Sie einen Screenshot oder ein Bildschirmvideo, Screencast, Bildschirmaufnahme, das ist wahrscheinlich das richtige Wort Und lade es auf Vimeo, YouTube oder Behance hoch und teile dann den Link mit dem Code interagierst, indem du einfach auf die Play-Schaltfläche, Pause-Schaltfläche, You-Schaltfläche Pause-Schaltfläche Okay, und lade diesen Link auch in den Aufgabenbereich hoch. Dies ist einer von denen, bei denen ich ihn gerne in den sozialen Medien sehen , hochladen, markieren und auch den Hashtag Figma Advanced verwenden Wenn dich jemand fragt, wo du bist, steht es mir im Weg. Und denk dran, das ist ein netter Ort, wo du die Arbeit von jemandem kommentieren kannst, ein bisschen Feedback, okay, das war's von jemandem kommentieren kannst, ein bisschen Feedback, okay, das war's Viel Spaß beim Klassenprojekt. Und ich sehe dich bald im nächsten Video nachdem du dein Projekt abgeschlossen hast. In Ordnung? 111. Was sind einige fortgeschrittene Farbtricks in figma: Hallo alle zusammen. In diesem Video schauen wir uns Farbtipps und Tricks in Figma an, viele Abkürzungen und ein bisschen Informationswissen über Farben wie dynamische Farben Und am Ende wenden wir uns dem Farbrecht zu. Lustige Farbmemes aus dem Internet. Ich finde es sowieso lustig, dass jemand beschlossen hat , alle Farben zu benennen. Ordnung, springen wir rein. Der erste. Einfach ist es, mit der Ecky an die Pipette zu kommen und Farben zu stehlen Also ich für Augapfel, du verstehst es. Okay, aber die einzige Warnung bei dieser ist die hier drüben. Wenn ich darauf klicke, ist das ein Stil, meine Primärfarbe. Wenn ich es mit der Pipette stehlen will, werde ich es tun. Okay, und ich klicke darauf. Es bringt tatsächlich die Hexadezimalzahl Null durch, den eigentlichen Stil, was ein physischer Bug ist Darüber beschweren sich viele Leute. Hoffentlich wird es aktualisiert, wenn du es tust. Aber im Moment nimmt es nicht den Stil an, sondern nur die Hexadezimalzahl. Also musst du vorsichtig sein. Sie können es verwenden und es in einem großen, umfassenden Update der Farbstile aktualisieren, was wir in ein oder zwei Videos tun werden, nur um sicherzustellen, dass sie diese Stile verwenden, die Sie verwenden. Das ist das Pipettenwerkzeug, das ich für Augapfel verwende. Oder der nächste Tipp ist mit so etwas. Wenn ich die Anzahl meiner Tasten drücke, wird die Opazität überschritten Das weißt du wahrscheinlich schon. also heraus, dass nur die Zahlen auf Ihrer Tastatur, 33094900, eine 100-prozentige Opazität Und um eine Opazität von 0% zu erreichen, drücken Sie einfach zweimal Null, machen Sie zwei Fälle einmal auf 00, 100%, doppelte Null, 0% Die Idee war verwirrend, erinnerte daran, dass man hier tatsächlich Farbe reinschubsen kann Okay, also ich habe es geöffnet. Ich kann meine Auf- und Abwärtspfeile benutzen. Kannst du sehen, dass es nach unten geht, kreuze die Farben und halte die Umschalttaste gedrückt, um es zu beschleunigen. Okay. Da hast du's, rauf und runter. Fonds heraus, das besonders nützlich, aber das Scrollrad an der Maus, also du, mein Scrollrad hier, du benutzt vielleicht ein Touchpad oder etwas anderes, aber ich kann mein Scrollrad auf und ab Und wir können den Farbton ändern, indem wir die Wahltaste gedrückt halten, während wir dasselbe tun. Es ändert die Opazität. Ich benutze es überhaupt nicht. Aber da hast du's. Tipps und Tricks zum Thema Farbe, vielleicht brauchst du sie. Was sind die Dinge , die ich oft benutze, Hicks ist nicht sehr gut Ich benutze es zum Kopieren und Einfügen aus Programmen, aber ich finde HSB, RGB Ich verstehe das nicht wirklich. Ich weiß, dass es rot, grün, blau ist, aber ich kann die Farbe nicht wirklich eingeben. Ich will CSA-Farben, okay, wenn du ein Entwickler bist, kannst du aus dem Code kopieren und einfügen, okay, wenn du RGB und a für Alpha verwendest, so transparent ist es Möglicherweise kopieren und fügen Sie ein. Sie können also zu CSS wechseln und es einfach dort ablegen. Das Gleiche gilt, ich verwende HSL nicht. Ich verwende HSB, Hue, Saturation, Luminance, Hue , Sättigung, Helligkeit Im Grunde das Gleiche. Mir hat das gefallen, weil ich mit dem Farbton spielen kann, vielleicht nicht mit dem Farbtonregler, okay, aber nehmen wir an, ich komme zu einer Farbe, die mir gefällt, aber ich weiß, dass das die Sättigung ist Ich kann Shift gedrückt halten und gedrückt halten, und es senkt es einfach irgendwie Ich finde es nützlich, um Farben auszuwählen, wenn ich versuche, vielleicht eine Farbe auszuwählen, die die, die ich habe, ergänzt. Und die Helligkeit, du wirst sie dort sehen. Es bewegt sich irgendwie direkt rüber. Und dieser hier, wenn ich rauf und runter gehe. Okay, die finde ich praktisch. Scrollen Sie also mit dem Rad nach links und rechts bis ich mein Mausrad reibe Und dieser hier, um rauf und runter zu gehen, die Sättigung rauf und runter und dann die Tabulatortaste drüber zu halten, Shift hoch und runter gedrückt halten, um Licht und Dunkelheit zu bekommen Das Interessante an Farben ist , dass Sie jetzt programmgesteuert codieren und so eine sogenannte dynamische Farbe erhalten können sogenannte dynamische Farbe erhalten Lass mich dir das ganz schnell zeigen. Also werde ich einen Link zu diesem und den Übungsdateien hinterlassen, aber es ist nur eine gute Dokumentation was dynamische Farbe ist. Die Kurzversion ist, dass Sie, wenn Sie Inhalte beispielsweise in eine App oder Website laden , kodieren und sagen können: Hey, sieh dir das Bild an, finde mir eine Farbe daraus Wie eine allgemeine Farbe. Die meisten verwenden Farbe und legen diese als Farbdesign fest. Nehmen wir an, das ist unser Albumcover , das in unsere Musik-App geladen wird. Und anstatt das zu sein, könnten dies Ihre Standardfarben sein. Es geht tatsächlich und überprüft das Bild und dann anhand dessen die Farbe neu an Sie werden sehen, dass es geladen wird, wenn, sagen wir, diese untere Leiste hier Farben daraus zieht. Du kannst es nicht in Figma machen, du kannst es nicht auf magische Weise tun Sie könnten einfach den Farbwähler verwenden, um es nachzuahmen, erforderliche Zusammenarbeit mit Ihrem Entwickler nutzen, um sicherzustellen, dass es passiert Es ist etwas, das Sie identifiziert haben und Sie möchten, dass es dynamisch benötigen einige Unterlagen und sprechen mit dem Entwickler, es ist nicht schwer, es zu implementieren. Es mag bedeuten, dass dein Farbschema nicht perfekt ist, aber es kann sehr sympathisch sein und den Eindruck erwecken, dass viele Dinge vor sich gehen und viele Designentscheidungen getroffen werden, obwohl es in Wirklichkeit nur irgendwie Farben aus dem Bild zieht Und der letzte ist das Benennen von Farben mit Wörtern. Das ist nicht unbedingt erforderlich. Das macht mehr Spaß, wenn du denkst, dass Design, Farbe, Nerds, Geschichte Spaß machen Ich finde es saukomisch. Sie können zum Beispiel das Wort Rot eingeben, wenn Sie lesen möchten. Ist das praktisch? Es ist irgendwie interessant, das festzustellen Der Farm POD ist so, dass irgendwann jemand beschlossen hat, allen Farben einen Namen zu geben. Es gibt Millionen von Farben. Sie sind nicht alle benannt, aber das ist Teil der UI-Design-Folklore Okay, also wie dieser hier, hat jemand entschieden, dass das blanchierte Mandel ist Hier gibt es eine wirklich seltsame Art von Farbbenennung. Ich schätze, ich teile es mit euch, weil es eines der Mittel ist , die man als Designfonds bezeichnen kann und die man kennen sollte. Finde es nicht lustig. Das ist in Ordnung, überspringen Sie das. Aber wenn man es tötet, ist es interessant zu sehen, was man Grau mit einem A oder Grau innerhalb von Selbe buchstabieren kann . Aber dieser hier, lass uns dunkelgrau eingeben. Dunkelgrau ist heller als normales Grau. Männer, es ist komisch. Brauchte Rosa. Da hast du's. Es ist pink. Brauche mehr Rosa. Was ist mit wie pink? Es hat nicht funktioniert? Keine Leerzeichen knallpink. Da haben wir's. Tiefrosa. Es gibt Fuchsie Ich kann es nicht buchstabieren, wenn du dir das Top ansiehst, das in einem meiner Favoriten ist Aqua. Aquafarben. Und es ist ganz anders. Cyan, genau die gleiche Farbe. Und wahrscheinlich am bekanntesten ist, dass alle Farben nicht Pfirsich sind. Pfirsiche nützlich ist dieser hier. Pfirsichblättriger Blätterteig Puff. Was sind die besten Namensfarben aller Zeiten? Wenn Sie also das nächste Mal auf einer Designkonferenz sind und jemand anfängt, sich auf Peach Puff oder das X 11-Farbbenennungssystem zu beziehen , und Dunkelgrau ist oft normales Du bist in den Witz verwickelt, okay, das ist es Tipps und Tricks zum Thema Farbe 112. So änderst du Farben in Figma: Hallo alle zusammen. In diesem Video werden wir uns die wechselnden Farben in Figma ansehen Das ist ziemlich einfach. Es wird schwieriger werden, wenn wir diesen Kurs durchlaufen haben. Und einige verwenden einen Farbstil und bei anderen verwende ich die Hicks-Nummer, die Farbe sieht genauso Deshalb werden wir eine Änderung vornehmen, um sicherzustellen, dass all dies konsistent ist. Wir schauen uns einige der Köche mit Farbstilen an, wenn wir auf die Opazität und das Ende schauen, ich werde das durchgehen und ich werde tatsächlich meine Primärfarbe von dem Rot, das ich verwendet habe, zu Grün ändern von dem Rot, das ich verwendet habe , weil Rate eine schreckliche Farbe für eine Grundfarbe ist , werdet ihr alle zu Beginn des Kurses schreien 0 und ich habe eine Weile gebraucht, um zu erkennen, dass ich werde das durchgehen und ich werde tatsächlich meine Primärfarbe von dem Rot, das ich verwendet habe, zu Grün ändern, weil Rate eine schreckliche Farbe für eine Grundfarbe ist, das werdet ihr alle zu Beginn des Kurses schreien 0 und ich habe eine Weile gebraucht, um zu erkennen, dass sieht aus wie ein Fehlerzeichen. Sie werden feststellen, dass keiner meiner Knöpfe diese Farbe hat, also keine sehr gute Grundfarbe. Also werde ich das auf meine Akzentfarbe umstellen und dieses Grün als meine Primärfarbe einführen. Geh du, lass uns reinspringen. Der schnelle Weg ist, nichts ausgewählt zu haben und dann auf einem Mac die Befehlstaste a zu drücken, auf einem PC alles K auszuwählen und dann zu den Auswahlfarben zu gehen und zu sagen, zeig sie mir alle und ändere dann die gewünschte Farbe hier Okay, du könntest das durchgehen und darauf klicken und sagen eigentlich will ich, dass es jetzt die 900 ist, okay, und es wird durchgehen und aktualisiert. Also, wenn es eine andere Farbe hat, musst du es vielleicht zuerst herausfinden. Möglicherweise müssen Sie hier also tatsächlich auf diese Farbe klicken. Okay? Da ist es, 70, 65, e4. Und mach dasselbe. Wähle sie alle aus, gehe runter zu den Abschnittsfarben und du bekommst die ersten da, sie sind da. Okay, und ich kann diesen mit meinem Scrollrad ändern , um den Farbton schnell zu ändern. Okay, also da ist es, da. Sie werden feststellen, dass sich einige von ihnen nicht geändert haben. Es ist okay. Ich zeige dir das in einer Spüle, aber das ist der schnellste und einfachste Weg Wählen Sie alles aus, finden Sie es, ändern Sie es. Ich werde fliehen und rückgängig machen. Das alles wird viel zunichte machen. Es gibt viel Verderben, weil jede Schriftrolle als unser Ungültiges gewertet wurde. Du hast. Es wird aber welche geben, einige davon haben meine Hauptfarben hier und meine Hauptstile, Kabel, Sie können sehen, es gibt eine Reihe anderer Stile, es ist ein Haufen anderer Farben, in denen Sie vielleicht herumstöbern und herausfinden müssen , was es Und das ist der einfachste Weg, die Farbe zu ändern. gibt es derzeit kein Find Change Figma gibt es derzeit kein Find Change, es gibt Plugins Ich hatte bisher keinen Erfolg mit ihnen, am Ende ist es genauso mühsam oder zumindest noch mühsamer, als einfach alles auswählen und ändern zu Problem dabei, es auf meine Art zu machen, ist, dass Sie es pro Seite tun müssen. Wenn du also 100 Seiten hast, musst du es 100 Mal machen und das macht keinen Spaß. Ich habe kein Plugin gefunden, das besser ist, wenn Sie eines haben , mit dem Sie Erfolg hatten Lassen Sie es mich in den Kommentaren wissen. Schau selbst dort unten nach, ob jemand anderes ein cooles Plugin hat , das funktionieren könnte. In Ordnung? Eines der anderen Dinge, die bei der Suche nach Farben in diesem Programm irgendwie abgewogen werden, ist, dass, als ich sagte, alle auswählen, diese Farbe finden, während diese hier ist, dass sich nicht alle geändert haben diese Farbe finden, während diese hier ist, dass sich nicht alle Kannst du sehen, dass es tatsächlich Leckereien sind. Ich mache das wieder rückgängig. Es behandelt diese Farbe hier, weil sie eine Opazität als separate Farbe hat , was bedeutet, dass zweimal getaucht wird, was bedeutet, der Button gemalt wird Wählen Sie alles aus, was Sie sehen werden , hier unten ist eine Farbe mit derselben Zahl, 70, 65, e4 Da ist es da. Okay. Also musst du beide ändern. Leider gibt es da und ich kann es ändern. Okay. Es wird als separate Farbe betrachtet. Nun, das ist ein gutes Argument, wenn du deine Styles machst. Im Moment macht das keinen Prozentsatz meines Hauptstils aus. Warum ist es das nicht? Nur damit du es weißt, wenn ich hier eine Farbe mache, okay, ich gehe zu meinen Farbstilen und sage, lass es uns für 500 machen. Ich kann mit der Undurchsichtigkeit nicht spielen, im Moment ist es nur ein Bug Wenn es hier ist, wäre es toll. Es ist die Zukunft. Und Sie haben Prozentsätze für Stile Aber im Moment kann ich Kapazität, diese Opazität, nicht auf die Füllebene eines Stils anwenden diese Opazität, nicht auf die Füllebene eines Stils Ich muss es kaputt machen und dann mit der Opazität spielen , was in Ordnung ist Okay? Weil ich das könnte, oder? Ich könnte sagen, dass du es bist. Und dann könnte ich mit der Deckkraft der Ebene herumspielen. Lassen Sie uns das auf 50 Prozent reduzieren. Das Problem dabei ist allerdings dieser hier. Hier, wo ist es? Dies hat einen Prozentsatz. Kannst du sehen, dass es auf 80% eingestellt ist. Es ist so, dass wir die Dinge dahinter sehen, es irgendwie beweisen können die Dinge dahinter sehen, es irgendwie beweisen Lass uns hier rübergehen und sagen, das ist es, was ich eigentlich schon benutze. Also das ist meine, diese hier, die Version, die wir verwenden. Dieser hier wird eine Füllung des Stils verwenden. Okay, die Costal 500. Und ich werde mit ihnen die Deckkraft der Ebene auf 50 Prozent herunterspielen , Sie sehen, es macht das Ganze, nicht nur die Farbe Das ist also etwas zu beachten. Und ist es ein Bug, jemand ein Bug? Es ist nur etwas , das in Figma noch nicht implementiert wurde in Figma noch nicht implementiert Eine weitere Sache bei diesen Farbstilen ist , dass Sie nicht mehr als einen haben können. Welcher dieser Farbstil. Kann ich noch einen haben? Nein. Wirf einfach die Farbe weg. Aber du hast irgendwie zwei Farbstile darauf mit unterschiedlichen Opazitäten aufgetragen Du gehst, wenn du möchtest, dass das Teil deines Stils ist, kannst du einen anderen Stil kreieren. Also lass uns hier auf diesen klicken. Lass es uns finden und sagen, du und kein aktuell ein Stil SCHLECHT wir könnten Auf der Style-Schaltfläche drücken Sie Plus. Und wir könnten das 1500 nennen und es in 1.8 setzen. Also 0,8. 0,8 ist also wirklich üblich und die Art, Prozentsätze zu schreiben, und wenn Sie es mit Internet zu tun haben, könnten Sie 80 Prozent schreiben Das ist völlig in Ordnung, obwohl Ihr Frontend-Webentwickler wahrscheinlich angeben wird 1,0 für 100% und 0,0 für 0% steht Das sind 50 Prozent. Das ist ein Abstieg. Es liegt an dir. Du wirst beide sehen, einen Stil kreieren. Klicken Sie im Hintergrund an die richtige Stelle. Du musst da rein. Du musst da hingehen. Sie können sehen, Sie können wahrscheinlich sofort sehen, was das Problem hier sein wird , ist, wie viele erstelle ich? Mache ich 0,1, 0,2, 345-67-8910. Ich werde das einfach reinlegen , weil ich das gerade benutze. Und nur die zu setzen, die ich muss, weil es sonst ein bisschen verrückt aussieht , wird weniger hilfreich. Das nächste, was ich tun werde, ist, dass ich während des gesamten Kurses faul war. Und ich habe den Stil manchmal angewendet, und manchmal bin ich so vorgegangen. Ich winde, du hast eine volle Farbe von Lokal und diesem. Nun, das Problem dabei ist, dass es die Hexadezimalzahl verwendet Die Hexadezimalzahl ist also in Ordnung, aber ich möchte, dass jetzt alles mit diesem Stil verbunden ist. Also wenn ich es bei allen Updates ändere. Wenn ich also den gleichen Trick anwenden kann , ist herauszufinden, was die Hexadezimalzahlen sind, ähm, alles mögen. Gehen Sie nach unten, um die Auswahlfarben anzuzeigen. Lass uns die Farbe finden, die ich will. Das gibt es. Und anstatt es zu ersetzen, sage ich einfach du und jetzt dieser Stil von 500, und er verschwindet irgendwie von meiner Liste, sie sollten alle diesen Stil nach der gleichen Sache auftragen lassen , mit dem Lila hier unten Also suche ich nach E4. Ich werde sie alle auswählen. Ich gehe runter. Ich werde das Lila finden, das E4 hat, da ist es Und ich tausche es mit meinen 500 aus. Und jetzt füge ich meine letzte Farbe oder meine neue Farbe hinzu , weil das Rot einfach nicht funktioniert. Es sieht aus wie eine Fehlermeldung, rot, Blick. Ich werde das gegen Grün als meine Primärfarbe austauschen und diese Rate wird meine Akzentfarbe. Lass uns diesen umbenennen, beenden. Und der Bildschirm hier ist der, den ich benutzen werde. Du wirst ein Stil sein, der genannt wird. Eigentlich werde ich es nicht auf diese Weise machen. Wir verwenden dieses Plugin wie zuvor, nur um die Dinge zu beschleunigen, es wird dich packen. Lass uns das Plugin öffnen. Okay. Das sind Widgets, okay, kleiner Farbgenerator, und doppelklicken Sie darauf, um ihn zu öffnen. Erinnern Sie sich daran von früher im Kurs. Knall in meiner Farbe. Ich klicke auf Stile speichern. Okay, Farbname, das wird meine Primärfarbe sein. Sie sehen, dass es viel einfacher ist, sie als Ganzes in Gruppen zusammenzufassen, als jeden einzelnen von ihnen zu benennen Weil es wirklich einfach ist, Farbgruppen zu benennen und das nicht für jede einzelne Farbe tun zu müssen. Sie möchten all diese behalten , um die Gegensätze nicht zu mögen, und löschen Ich muss nur ein paar Farben aufräumen. Los geht's. Du, vielen Dank und lösche das jetzt. In Ordnung, das ist es Das Ändern der Farbe ist relativ einfach. Sake Cole, ändere es. Wir haben es auch durchgemacht und es einfach versteckt. Jemand anderes stylt jetzt auch. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 113. Farbthemen für Hell und Dunkel in Figma erstellen: Hallo alle zusammen. In diesem Video zeige ich Ihnen, wie Sie Farbdesigns sowohl für den Hell- als auch für den Dunkelmodus erstellen können. Es kann ein wenig entmutigend sein, zu wissen, wie man das, was wir sind, verwendet Also zeige ich Ihnen das Tool, das ich verwende, um mir näher zu kommen, mir den Einstieg zu erleichtern und mir das Nachdenken über einige der verschiedenen Anwendungsfälle zu geben, die ich vielleicht noch nicht hatte Einstieg zu erleichtern und mir das Nachdenken über einige der verschiedenen Anwendungsfälle zu geben , die ich vielleicht noch nicht In Ordnung, das ist der Link hier. Ich belasse es in deinen Übungsdateien. Beachten Sie nun, dass sich dies ändern könnte, möglicherweise aktualisiert wird. Wir verwenden M3-Material. Ich weiß, dass ich auf Material angewiesen bin. Ein Großteil meiner Arbeit im UX-Design, hauptsächlich weil es einfach sehr gut dokumentiert Und sie haben diese großartigen Tools hier. Auch wenn ich es nicht unbedingt für die Android-Entwicklung verwende , nur wirklich gute UX-Design-Tools. Also müssen wir es aufladen. Es wird geladen, um dynamisch auf Benutzerdefiniert umzustellen. Und dann habe ich meine Primär-, Sekundär- und Tertiärfarben ausgetauscht Sekundär- und Tertiärfarben Du klickst sie einfach an und kopierst sie und fügst sie aus Figma Und das Coole daran ist, dass es mir ein paar Dinge gibt, die mir sagen, was meine Farben sind, plus viele Variationen. Kannst du sehen, dass dieses Grün nicht Teil meines ursprünglichen Designs war. Keine dieser Farben hier. Es sucht also nach harmonischen Farben, die mir helfen könnten, meine Farben zu erweitern. Ich habe also mehr Variationen über all die verschiedenen Anwendungsfälle. Okay, also meine dunkle Farbe auf dem Grundfarbenhintergrund und die ausgewechselten, gefiel mir besonders der Bildschirm. Also ignoriere ich, dass einer, dort gekauft habe, vielleicht einfach nicht mehr auf andere Farben und Kombinationsmöglichkeiten hinweist. Außerdem gibt es mir eine helle Version und eine Version mit dunklem Bildschirm. Und wieder nimmt es meine Grundfarbe an. Lassen Sie uns den Farbton ändern. Es ist eigentlich nur ein bisschen dunkler. Ihr findet hier noch ein paar interessante Kombinationen und meine Grundfarbe mit Farben außerhalb meines ursprünglichen Farbsatzes. Aber ich nütze Variationen, je nachdem wie neu, ähm, das könnte ein guter Screenshot sein. Nimm das dunkle Schema und das helle Schema und vielleicht ist es gut für dich, es zu ertragen, aber ich baue es für ein zukünftiges Designsystem aus. Wenn dir die Farben gefallen, kannst du den Mauszeiger über sie bewegen und sagen, gib mir den Copy-Button für das Gesetz und du kannst das in Figma einfügen Jedenfalls. Das ist ein kleines praktisches Tool, das ich mag. Ich dachte, ich teile es hier in diesem Farbbereich mit Ihnen. Die Art und Weise, es zu machen, ist nicht schwer und schnell . Es ist einfach eine nette Möglichkeit, vielleicht die Art und Weise, wie Sie Ihre Farben verwenden, zu erweitern Ihnen einige andere Optionen zu geben. Plus schlägt einige helle und dunkle Schememodi vor. Okay, jetzt ist es soweit, ich werde es im nächsten Video sehen 114. Gruppiere Farbstile mit Schrägstrichen oder Ordnern in Figma: Hallo alle zusammen. Hey, wir werden uns ansehen, wie man Farbstile in Figma gruppiert indem man sowohl die Schrägstrichmethode einen Ordner erstellt und ihn hineinzieht Lass mich dir beide zeigen. In Ordnung, schauen wir uns zunächst die Slash-Methode an hauptsächlich weil sie sehr verbreitet ist Aber ich habe früher benutzt und unterrichtet. Und du wirst viele Tutorials von Leuten sehen die es als Abkürzung verwenden. Dann kehren wir zu der Gruppierung zurück , die wir vorgenommen haben Beides praktisch, okay, also habe ich meine Grundfarbe hier. Ich werde einen Füllstil daraus machen auf meinen Style-Button klicke und Plus drücke. Ich nenne das Primarschule. Und das ist mein 500, oder? Die mittlere Helligkeit des Ganzen wird jetzt kompliziert, wenn ich sage, ich möchte eine andere Version und ich möchte eine leicht dunkle Version. Also gehe ich runter, unterbreche den Link, klicke darauf, gehe zu Helligkeit, Sättigung und Helligkeit, halte die Umschalttaste gedrückt und gehe ein paar Mal runter Das werden meine sein, während wir fünfhundert, das werden meine 700 sein Also werde ich einen neuen Stil kreieren, Stil. Du bist die erste 700. Und wenn ich ins Niemandsland klicke, wirst du sehen, dass sie in Ordnung sind, aber du kannst sehen, wie sie ziemlich schnell blühen können. Was die Leute tun, ist, das umzubenennen und tatsächlich zu sagen, lasst uns es umbenennen Und es ist cool, dieser eine Schrägstrich. Solange du also den Schrägstrich hineinlegst oder einen Witz über Guns and Roses machen willst , fällt Leadgitarrist Slash kein gutes ein Und die meisten von Ihnen würden sowieso jung sein, um zu wissen , was das ist. Also, wenn wir dort einen Schrägstrich einfügen, okay, wenn ich jetzt die Eingabetaste drücke, schau, was passiert Es hat sich geändert, dass es nicht mehr nur den Boden hinunterschwebte. Es hat einen Ordner erstellt, in dem sich 500 befinden, unter dem gleichen Ding für diesen. Doppelklicken Sie darauf. Okay. A ist eine Rocklegende in der Mitte. Und sie sind alle in einer netten Gruppe. Da hast du's. Deshalb setzen die Leute Schrägstriche und Ich neige jetzt dazu, einfach zu gehen, du bist neu und du bist mein 500. Und wenn ich auf Aus klicke, kann ich mit der rechten Maustaste klicken und einen neuen Ordner mit dem Namen Sekundär angeben. Du landest am selben Ort. Wenn Sie im Internet viele Leute sehen, die Tutorials oder in der Klasse verwenden oder Kollegen die Schrägstrichmethode verwenden, ist das völlig in Ordnung Ich neige dazu, einfach Ordner hier und im Farbstile-Panel zu erstellen . Es ist nichts Gutes, sie mit einem Schrägstrich zu gruppieren oder Ordner zu erstellen, da Sie sie ändern können Man kann tatsächlich sagen, dass diese MÄNNER hier sind. Wenn Sie diese Namenskonvention nicht verwenden , okay, die Benennung von ersten fünfhundert ist eine Es macht es schwierig, sich zu bewegen und Sie müssen alle Ihre Stile umbenennen, wenn Sie das tun, gehen Sie und ändern Sie das später , in Ordnung, das ist es, so oder so, Suite-Gruppen von Farbstilen in Figma, Sie können alle alten Stile verwenden, wir verwenden es hier für Farben, Werke von Schriften Aber das ist, es ist so oder so gut. Aber jetzt kennst du beide. In Ordnung, wir sehen uns im nächsten Video. 115. Wie du Beschreibungen deiner Stile in Figma für andere nutzbar machst: Hallo alle zusammen. Was machen wir? Wir fügen unseren Stilen Beschreibungen hinzu. Wir können sie hier nur hinzufügen , um weitere Informationen für Stile hinzuzufügen, die wir verwenden. Wenn wir hinzufügen, dass das Teilen dieser Styles mit anderen Leuten nicht klar macht hinzufügen, dass das Teilen dieser Styles mit anderen Leuten nicht klar macht, wofür sie verwendet werden und wofür sie nicht verwendet werden. Lassen Sie mich Ihnen zeigen , wie Sie anfangen können. Haben Sie nichts ausgewählt, klicken Sie und niemand landet oder drücken Sie ein paar Mal Escape Okay, du suchst nach deinem Stil, dem du eine Beschreibung zu J hinzufügen möchtest In meinem Fall möchte ich ihn zu diesem hier hinzufügen, dem 100 Klick auf das Einstellungen-Icon. Und hier unten hast du eine Option für Beschreibungen. Ignoriere das, das kam von dem Widget, das ich erstellt habe. Okay, das lassen wir für den Moment stehen. Wir werden darüber und über AZEK sprechen, also könnte die Schrift, die ich hinzufügen könnte, für die Verwendung mit Popup-Modals verwendet werden für die Verwendung mit Popup-Modals Und wo tauchen sie auf? Für mich selbst werde ich sie wahrscheinlich nicht dokumentieren, aber wenn ich diese Bibliothek mit anderen Leuten teile, okay, das ist praktisch, denn wenn ich den Mauszeiger darüber bewege diese Bibliothek mit anderen Leuten teile, okay, das ist praktisch, , gibt es den Leuten ein kleines Irgendwann, eigentlich nicht da. Es ist, wenn es tatsächlich benutzt wird. Nehmen wir an, ich entwerfe mein Modal, okay, ich werde die Farbe verwenden und den Mauszeiger darüber bewegen und beobachten, wie es für Popup-Modals verwendet wird, Sie gehen, jetzt funktioniert es genauso mit Typ K. Sie können eine Beschreibung für hier, H12 und drei hinzufügen, das sind ziemlich klare Überschriften 12.3 und Absatz, aber Sie haben vielleicht noch andere seltsame Namen, die Sie etwas die Sie Und eine andere Sache ist , schauen Sie es sich an. Also habe ich das mit dieser Grundfarbe gefüllt. Kannst du sehen, dass es dort diesen Kontrast hat. Okay, wo kam das her? Schauen wir uns hier meine Styles an. Das war standardmäßig hier drin. Wann ist das hergekommen? Erinnerst du dich an das Widget aus der ersten Schicht, diesen Farbstufengenerator, es automatisch erstellt hat. Es ging und sagte, ich bin Michael und werde die Stilfarben übernehmen, aber ich werde auch die Kontrastfarbe hineinlegen. Es ist irgendwie schon gemacht , in diesem Beispiel sehen wir dunkel, heller, heller, heller Es ist ein guter Kontrast zu diesem Hintergrund. Das könnte dir also gefallen. Es ist schön zu wissen , woher es kam. Festival. Es ist standardmäßig nicht da. Aber du wirst vielleicht herausfinden, dass ich das durchgehen und das auskritzeln muss, in dieses eine gehen und sagen, ich will das nicht, du willst das nicht, ich will das nicht Manche Widgets geben ihre eigenen Beschreibungen ein und das könnte verwirrend sein, weil du sagst, ich will nicht all diese Variationen von Kontrastfarben, du könntest viel spezifischer sein Du gehst. Auf diese Weise können Sie Stilbeschreibungen zu Farben und Schriftarten hinzufügen. Dies ist vor allem praktisch, wenn Sie dies mit einem Team teilen. Ich würde es nicht für mich selbst tun. Und wie ich weiß, wird der zukünftige Dan völlig vergessen , welche Farbe diese Farbe hatte. Vier. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 116. Bearbeiten der Stile oder Komponentenbibliothek einer anderen Person in Figma: Hallo zusammen, Hey, ich habe ein neues Dokument angefangen. Jemand anderes hat die Bibliothek mit mir geteilt, Option drei, Alt drei auf einem PC, um Bibliotheken zu öffnen. Süße Abkürzung. Also habe ich es aktiviert, ich habe angefangen, es zu benutzen, aber jetzt möchte ich einige dieser Stile bearbeiten. Wie mache ich das? Lass mich dir zeigen wie. Oh, und tatsächlich werden wir eine kleine Zusammenfassung für die Leute machen, von denen viele von Ihnen die ganze Zeit Bibliotheken benutzen werden , das wäre großartig Und das wird direkt darauf eingehen, weil wir es im Grundlagenkurs behandelt haben. Es wird einige Leute geben, die gerade an den Grundlagenkurs anknüpfen und noch nicht viel Übung hatten. Am Ende werde ich einige der Vor - und Nachteile beim Erstellen einer Bibliothek zusammenfassen - und Nachteile beim Erstellen einer Aber lassen Sie uns Ihnen zunächst zeigen, wie Sie die Bibliothek einer anderen Person bearbeiten können. In Ordnung, erster Stopp. Sie müssen eine Bibliothek haben, die mit Ihnen geteilt wird. Wir haben dies im Kurs Essentials behandelt. Ich werde das am Ende dieses Videos behandeln, falls das eine ferne Erinnerung ist. Okay, aber nehmen wir an, Sie haben eine Bibliothek , die mit Ihnen geteilt wird. Sie haben zitiert, es zu benutzen. Ich habe diese unbenannte Datei erstellt Okay. Ich habe angefangen, einige Elemente der Bring Your Own Laptop-Marke aus der gemeinsam genutzten Bibliothek zu verwenden, aber jetzt möchte ich sie bearbeiten. Es gibt also zwei Möglichkeiten, dies zu tun Farbe und Schrift gehören zusammen. Sie hätten eine ähnliche Methode. Also sagen wir diese Farbe hier. Ich kann es mir vom Aussehen her als Farbstil vorstellen. Okay, wenn ich darauf klicke, kann ich zu meinem Farbstil runtergehen und ich kann fast die kleinen Optionen dort sehen. Es ist hinter dem christlichen MAC versteckt. Aber ich werde darauf klicken. Und können Sie sehen, dass es für jedes dieser Dinge heißt, ich kann es hier tatsächlich ändern. Ich muss zur Stildefinition gehen. Also springt es zurück zu dieser Originaldatei, okay, der ursprünglichen Bibliothek , in der ich erstellt wurde, und ich kann sie dort bearbeiten. Schauen wir uns Komponenten etwas anders an. Okay, also Komponenten, es gibt verschiedene Möglichkeiten, wie ich das machen kann. Ich kann mithören, Sie können sehen, hier ist mein Beispiel für diesen Button Ich habe es für meine Bibliothek im Bring Your Laptop-Stil herausgezogen , und ich kann hier auf diese Option klicken besagt, Gehe zur Hauptkomponente und Bibliothek, oder ich kann mit der rechten Maustaste darauf klicken und Gehe zur Hauptkomponente sagen Also das Gleiche, eigentlich habe ich die Styles mit diesem hier nicht hinzugefügt. Nehmen wir an, ich mache diesen Absatz, wenn er angewendet wird. Okay. Ich will es nicht kaputt machen. Ich möchte darauf klicken. Gehen Sie in das Gleiche wie Farbe, klicken Sie auf das kleine Einstellungssymbol und gehen Sie hier rein, gehen Sie zur Stildefinition. Es spielt keine Rolle, auf welche dieser Schaltflächen Sie für farbige Schriftarten klicken, Sie landen bei der ursprünglichen Erstellungsdatei. Wenn ich hier jetzt Änderungen vornehme, wird es auf die Originaldatei zurückübertragen und alles andere, womit verbunden ist Seien Sie vorsichtig, wenn Sie nicht auf diese Datei zugreifen können, bedeutet dies, dass die Datei nicht mit Ihnen geteilt wurde , sodass Sie sie bearbeiten können. Sie wurden in die Kategorie „Eine Ansicht“ aufgenommen. Sie müssen also zum Dateiurheber zurückkehren. In diesem Fall für mich ist es Victoria, die sich alles geliehen hat, was sie tut, wenn du ausatmest, deinen Laptop mitbringt, diese Datei gutgeschrieben hat und sie sie widerwillig mit mir geteilt, um sie zu bearbeiten, weil ich so dachte, ich brauche sie für Sie sagte, mach nichts kaputt. Also werde ich nichts kaputt machen. So bearbeiten Sie Stile, die mit Ihnen geteilt wurden. Wenn du ausgesperrt bist, suchst du nach der Person, die sie tun kann, nur damit du weißt, wie es aussieht, dass ich hier darauf eingehen werde. Lassen Sie uns zunächst diese Bibliothek veröffentlichen. Wir haben das im Essentials-Kurs gemacht, aber wenn Sie noch nicht zu ihnen gekommen sind, ist Option drei eine coole Abkürzung. Ich öffne Ihre Bibliothek, oder Sie können das Assets-Bedienfeld aufrufen und darauf klicken. Ich möchte, dass dieser veröffentlicht wird. Das ist also die Datei, an der ich gerade arbeite. Okay. Veröffentlichen Sie zuerst alles. Okay. Und dann muss die Datei mit jemandem geteilt werden. Wenn ich Daniel Scott eintippe und ich sie ansehen kann, bedeutet das, dass es eine andere Person gibt, die die Styles verwenden kann , wie ich es für die Originaldatei getan habe, aber sie kann sie nicht bearbeiten. Du kannst hier reingehen und sagen, dass sie es tatsächlich essen können, du gehst, das ist es, was die Person tun muss. Wenn Sie Bibliotheken anzeigen, aber nicht ändern können. Ein letzter kleiner Leckerbissen für diejenigen , die mit Bibliotheken noch nicht vertraut sind von den Essentials daran erinnert, dass es sich bei der Datei um die Datei handeln muss, die Sie teilen möchten Kann in Entwürfen enthalten sein, aber Sie können keine Komponenten gemeinsam nutzen Sie können anhand von Entwürfen eigene Schrift- und Farbstile verwenden. Sobald du es in eine deiner Teambibliotheken verschoben hast, muss es sich in einer kostenpflichtigen Teambibliothek befinden, nicht in dieser kostenlosen. Wenn ich das in dieses kostenlose verschiebe, okay, ich klicke auf Verschieben, schaue es mir an und gehe hier rein. Und was Ihnen auffallen wird, ist, wenn ich zu meiner Bibliothek gehe , Option drei oder alle drei und einen PC, dort gibt es Veröffentlichen, Unveröffentlichtes und erneut Veröffentlichen Tun wir so, als wäre es das erste Mal. Sie können hier sehen, dass 47 Komponenten nicht veröffentlicht werden. Nur die Farben und die Schriftarten, die in diesem Befehl enthalten sein müssen , um zur Home-Base zu springen Und das muss in bezahlter Primzahl sein. Da haben wir's. So bearbeitest du die Styles anderer, die Schatten haben, bei dir. Und nur eine kurze Zusammenfassung über Bibliotheken im Allgemeinen. In Ordnung, wir sehen uns im nächsten Video. 117. Wie du Farbschriftartenstile und -komponenten aus der Teambibliothek in Figma ausblenden kannst: Hallo alle zusammen. In diesem Video zeige ich Ihnen, wie Sie Komponenten, Schriftstile und Farbstile aus Ihrer Bibliothek ausblenden, Farbstile aus Ihrer Bibliothek damit andere Personen darauf zugreifen können, wenn Sie sie veröffentlichen . Du kannst immer noch an ihnen arbeiten. Es kann sein, dass es in Arbeit ist oder dass es einfach etwas ist, das Sie verwenden und mit dem Sie das Team nicht verwechseln möchten Ich zeige Ihnen auch ein paar kleine Dinge , die Sie vielleicht überraschen könnten, wenn die Leute die Komponenten oder Styles bereits verwenden. Aber lassen Sie uns für den Moment hineinspringen und einige Stile und Komponenten ausblenden. Ordnung, also ich habe diese Bibliothek aus dieser Datei hier veröffentlicht und sie in diesem Dokument ohne Titel hier verwendet in diesem Dokument ohne Titel Ich kann alle Teile sehen. Aber in a, b, c, d, die wir gemacht haben, wollen wir all diese verstecken , damit andere Leute sie nicht benutzen können. Es gibt zwei Möglichkeiten, es in Ihrem Assets-Menü zu finden. Denken Sie also daran, Option eins ist Ebenen, Option bis als Assets. Okay, ich gehe zu meinen Buttons und der einfache Weg ist, mit der rechten Maustaste darauf zu klicken und beim Veröffentlichen Ausblenden zu sagen. Was passiert, ist, dass es hier rauskommt und in diesen Ordner geht , in dem versteckte Sachen stehen. Okay, da ist es da drin. Aber ich muss es erneut veröffentlichen. Ansonsten kann diese Person meinen Button immer noch sehen. Also werde ich diesen Kerl Doug nennen. Doug kann Daniels Akte sehen. Ich werde das veröffentlichen müssen. Es gibt keine schnelle, einfache Möglichkeit, zu veröffentlichen, oder zumindest keine Abkürzung. Option drei, veröffentlichte eine Änderung. Es ist dieses Ding hier, das modifiziert wurde, aber nein, jetzt Command or Control Three, okay, es ist weg, ich kann es nicht sehen. Bei den Stilen ist es jetzt etwas anders. Befehl zur Steuerung, um zu diesem Tab zurückzukehren, hör auf, Abkürzungen zu tun, Stile Es kommt auf die Benennung an. Also habe ich hier nichts ausgewählt. Wenn ich nicht will, dass Doug sehen kann, gibt es den 900er Style. Ich werde darauf klicken. Und was ich tun muss, ist, vorne einen Unterstrich oder Punkt hinzuzufügen, an dem Sie Leute sehen werden, oder Punkt. Es kommt darauf an. Ich glaube nicht, dass es einen Unterschied macht. Ich sehe viele Leute, die beide Augen unterstreichen. Sie können einen Punkt auf der Vorderseite verwenden. Das glaube ich nicht. Lass mich in den Kommentaren wissen, ob du einen Unterschied herausgefunden hast . Ich weiß nur, dass ich ihn immer noch sehen kann. Aber wenn ich auf Veröffentlichen und Bot-Option drei drücke, Alt-Taste auf einem PC, oder Sie könnten Ihre Schnelltaste verwenden, um Änderungen in der Bibliothek zu veröffentlichen. Das könnte der kürzeste Weg sein. Sie können sehen, dass es entfernt wurde. Und jetzt schauen wir nach Doug. Doug, wenn er etwas benotet , kann Krebs die Füllfarben durchgehen, aber er kann die 900 nicht sehen. Es ist weg. Vier Komponenten. Gehen Sie zurück zu den Komponenten. Wir haben mit der rechten Maustaste geklickt. Sie können tatsächlich den gleichen Benennungstrick anwenden. Nehmen wir an, ich möchte die Schaltfläche hier ausblenden, wir setzen Button B. Ich könnte also mit der rechten Maustaste darauf klicken, wenn ich sie ausgeblendet habe. Oder wenn ich diese Art von Unterstreichungskonsistenz beibehalten will, kann ich es vielleicht in Command oder Control R umbenennen . Und ich wollte einen Unterstrich oder einen Punkt davor setzen . Und ich wollte einen Unterstrich oder einen Punkt davor Und was passiert, ist, wenn ich veröffentliche, nicht bis du schnelle Aktionen in, in, in veröffentlicht hast, weil ich das alles gemacht habe , bevor es veröffentlicht wurde. Schauen wir uns Doug an. Er ist weg. Es ist nicht wirklich bitter, wenn ich zu Assets gehe. Können Sie sehen, dass sie alle im versteckten Bereich gelandet sind, außer dass sich der Name geändert hat. Ich habe mich noch nicht wirklich entschieden , welcher Weg mir besser gefällt. Manchmal kann klar sein, dass es nicht Teil der Bibliothek sein soll, wenn unterstrichen wird Eine Sache, die Sie vielleicht überraschen könnte , ist, dass, wenn Doug diese Seite bereits benutzt, das in Ordnung ist, ich brauche den pinken Button Und was bedeutet das? Die zufällige Box verwendet den rosafarbenen Knopf. Und dann wieder hier, ich sage wirklich schnell, bevor Doug geht und den pinken Button benutzt, werde ich ihn aus der Veröffentlichung entfernen Veröffentlichen Sie diesen Dateibefehl Schrägstrich, Strg , Schrägstrich. Da ist es da. Okay, schnell. Ich bin froh, dass es niemand benutzt hat. Hier drüben. Doug hat es immer noch Er kann es nicht herausziehen, aber es entfernt es nicht. Okay. Also sobald jemand es schon hat, es ist irgendwie in diesen Dokumenten, ich als Create Account nehme Änderungen an Dougs Button Es sei denn, ich habe den Button erneut in der Bibliothek veröffentlicht. Und dann wird es wieder eine Verbindung herstellen und die Änderungen vorantreiben. Eine letzte Kleinigkeit ist, wenn Sie bei Bibliotheken so intensiv wie veröffentlichen, unveröffentlicht, verlinken, verlinken, verlinken, verlinken, entlinken, all diese Dinge tun Manche von Ihnen haben so etwas wie einen Mann, ich habe gearbeitet. Ich habe viele gefunden, einfach nicht in meiner normalen Designpraxis, aber wenn ich diesen Kurs Figma mache, flippt es aus und ich muss ihn einfach schließen und wieder öffnen Im Grunde war ich die Mafia und ich habe das gemacht und veröffentlicht Und sie blieben in Dougs Akte und ich dachte, dieser große Mann, ich habe vielleicht etwas falsch gemacht oder das Internet kaputt Es stellte sich heraus, dass ich, glaube ich, ein bisschen intensiv durch die Bibliotheken gegangen bin und Figma einfach schließen musste, um ein kleines Nickerchen zu machen Okay, nur für eine Sekunde. Wir schlafen und dann gehen wir wieder hoch und alles hat wieder funktioniert. In Ordnung, das ist es. So verstecken Sie Komponenten. Farben und Schriften sind identisch. Setzen Sie einfach einen Unterstrich vor sie, stellen Sie sicher, dass Sie die Bibliothek veröffentlichen und alle anderen Personen keinen Zugriff auf sie haben es sei denn, sie haben Instanzen herausgezogen, dann haben sie eine eigene Instanz, die in dieser Dateibibliothek verwendet wird Da ist Bundy, okay, das ist es. Wir sehen uns im nächsten Video. 118. Vergleiche Änderungen an Komponenten mit Overlay in Figma: Hallo alle zusammen. In diesem Video schauen wir uns an, was passiert wenn jemand unsere Bibliothek aktualisiert, die wir verwenden. Wie überprüfen wir die Updates, bevor wir uns dazu verpflichten? Wir kommen zu diesem Punkt, an dem wir einen direkten Vergleich durchführen können. Sehr klar, was sich geändert hat. Oder wir können dieses coole kleine Overlay machen , bei dem wir sagen können, lass uns den Unterschied sehen. Sehr klar. Jetzt werden wir aktualisieren, okay, lassen Sie mich Ihnen zeigen, wie Sie da reinkommen und es verwenden können, richtig, also habe ich zu den Dateien Das ist die Datei, die meine Bibliothek erstellt, und das ist eine Datei, die meine Bibliothek verwenden wird. Also werde ich mir ein paar Komponenten aus dieser Bibliothek holen . Toll, ich benutze es, aber sie kommen in einigen Updates hinzu. Also zurück zur Originaldatei. Lassen Sie uns ein paar kleine Updates vornehmen. Also 8-16 zusätzliche Pixel auf der Polsterung. Dieser hier wird sich ziemlich ändern. Ordnung, ändert sich viel, um sich die Abkürzung zum Ändern des Gewichts zu merken die Abkürzung zum Ändern des Gewichts Nur zur Erinnerung Befehlsoption und verwende die Werte größer als und kleiner als, das ist Strg-Alt größer als und kleiner als K. Also habe ich einige Änderungen vorgenommen. Ich werde es veröffentlichen. Denken Sie daran, Option oder Alt drei auf einem PC. Lassen Sie uns diese Änderungen veröffentlichen und sehen wir, was hier passiert. Okay, wie gewohnt bekommen wir unsere Updates zur Verfügung. Wir können zur Überprüfung gehen und sie stattdessen alle aktualisieren. Und das Interessante daran ist, dass Sie, anstatt hier auf diesen kleinen Pfeil zu klicken, hier auf diesen kleinen Pfeil zu klicken, in der Vergleichsansicht landen. Also nicht das, dass ich dir zeigen werde , wie du zu den einzelnen kommst , anstatt jedes einzelne zu machen, weil du sagst, Mann, ich muss sie Schritt für Schritt durcharbeiten, um zu sehen was die Updates sind und wie sehr sie mich beeinflussen. Was Sie tun können, ist, an der blauen Taste zu arbeiten. Und Sie sehen, ich kann diese einzeln aktualisieren. Dafür ist ein Update verfügbar. Großartig. Ich werde darauf klicken. Anstatt die Instanz zu aktualisieren, werde ich das Update überprüfen und das ist praktisch. Du kannst das aktuelle Update sehen, okay, und ich kann sagen, Ja, das will ich. Schauen wir uns die nächste Komponente an. Okay? Das Problem dabei ist, dass es genauso aussieht, wie du es magst, hat sich etwas geändert? Wir können also von Side-by-Side zu Overlay wechseln . Sie können das Overlay ein- und ausschalten, - und ausschalten und nichts hat sich geändert Ich ändere alles, ich schwöre es. Oh, du kannst es drüben sehen, sie sehen nach den Polstern, aber hier ist es nicht drin. Oh Mann. Oh, lass uns einfach updaten und sehen, was passiert. Ich habe das schon oft gemacht und es funktioniert jedes Mal, und ich habe dieses Video sogar als Demo Dies ist ungefähr das dritte Mal, dass ich es aufgenommen habe, um zu versuchen, einen guten Flow in Gang zu bringen, aber aus irgendeinem Grund funktioniert es heute nicht. Lass uns updaten. Lass uns einen Blick darauf werfen. Schluckauf größer. Das war komisch. Normalerweise zeigt er dir nur die Polsterung und die ganze Ausrede dafür war, dir zu zeigen , dass die Overlays praktisch sind, um sie zu sehen wenn es nur wirklich kleine Änderungen wie Aber aus irgendeinem Grund hat es dort nicht funktioniert. Ich werde das im Kurs belassen , weil das manchmal passiert Ich schließe Figma, öffne ein Backup und springe direkt zurück zu dem Bildschirm, um zu sehen, ob es wieder funktioniert Warte, habe ich gemacht, in Ordnung, also bin ich zurückgegangen und habe es von 16 auf acht geändert Lass es uns noch einmal veröffentlichen. Hat diese eine Änderung veröffentlicht. Und schauen wir uns das hier an. Es gibt ein Update, wo es es überprüfen kann, es geht in die andere Richtung, kann Hanging Update einstellen, klicken Sie auf den Pfeil. Okay, und lass uns Overlay machen. Und jetzt funktioniert es. Es hat mir eine etwas klarere Vorstellung von den Änderungen gegeben , das könnte nur das Pixel sein und du würdest sagen, In dieser Ansicht gibt es keine Möglichkeit, Pixeländerungen vorzunehmen. Du kannst es jetzt irgendwie sehen, da es offensichtlich ist, aber manchmal ist es schwer zu erkennen, es sei denn, du gehst mit diesem Overlay hin und her. Damit bin ich zufrieden. Ich werde es aktualisieren und schließen. Und dann gehst du, so macht man eine Vorschau der Änderungen, die an einer Bibliothek vorgenommen wurden , die von den USA gemeinsam genutzt Und was passiert, wenn es passiert, funktioniert nicht. Schließ es, öffne es wieder. Gut wie Gold. Solche Bugs schienen mit Figma ziemlich oft behoben zu werden , wie die, dass ich das jetzt Figma melden werde und ich wette, in einem Update in ein oder zwei Monaten wird dieser und ich wette, in einem Update in ein oder zwei Monaten Fehler behoben sein Irgendein Ingenieur wird es durchgehen und reparieren, oder du machst es vielleicht selbst. Sie könnten darauf stoßen, aber jetzt, wissen Sie, schalten Sie es aus und wieder ein. Die Wahrheit, um alle Technologien zu reparieren. In Ordnung, das ist es Wir sehen uns im nächsten Video. 119. Umgestaltung von Stilen in eine andere Designdatei in Figma: Hallo alle zusammen. In diesem Video schauen wir uns Relinking-Stile an , oder manche Leute nennen es Refactoring Wir werden alle unsere Stile aus unserem Arbeitsdokument herausnehmen, sie aufheben, sie in ein völlig neues Dokument verschieben, das schön und aufgeräumt ist, alles von alleine Und wir werden diese Datei verwenden, um zukünftige Apps und Websites zu erstellen , nicht aus dem Arbeitsdokument der verrückten Person, das ist ein schlechter Ort, um all Ihre Hauptstile zu haben, besonders wenn Sie zum nächsten Projekt übergehen . Lassen Sie mich Ihnen zeigen, wie Sie sie herausnehmen, in ein anderes Dokument einfügen dabei immer noch Verbindungen aufrechterhalten die Sie möglicherweise bereits haben, um Dateien zu entwerfen , die Sie bereits haben. wie dieser hier erstellt. Sie müssen wissen, mit einem neuen Zuhause für diese Stile ist automatisch. In Ordnung, lassen Sie mich Ihnen zeigen, wie das geht. Das ist also die Originaldatei, in der ich viele meiner Styles erstellt habe . Ich habe diese Stile in einem separaten Dokument verwendet. Ich habe einige der Textstile verwendet, einige der Farbstile und Komponenten, die wir im nächsten Video verwenden werden. Aber was ich jetzt tun möchte, ist, dass ich tatsächlich alle meine Stile aus diesem Dokument herausholen und sie in eine Haupt- und Stil- und Komponentendatei packen alle meine Stile aus diesem Dokument herausholen und sie möchte. Ich habe gerade ein neues Dokument erstellt und ihm diesen Namen gegeben. Es ist nichts Besonderes daran , außer dass es nicht in Entwürfen enthalten sein kann, also muss es in einer Teambibliothek, in Styles oder in der kostenlosen Version enthalten sein . Wenn Sie mit Komponenten arbeiten möchten, müssen Sie vielleicht in einem professionellen oder höheren Unternehmen arbeiten, im Grunde genommen jeder Art von Gehaltsplan. Das ist also die Art von Struktur, die Sie benötigen. Die Hauptsache ist, dass das kopiert wird und fällt, sonst geht es irgendwie kaputt Also werde ich zu diesem hier gehen. Das passt zu all meinen Stilen. Ich will sie rausholen, also habe ich nichts ausgewählt. Ich nehme meine Grundfarbe, all diese in dieser Gruppe. Und du musst Cut Command X auf einem Mac verwenden, Control X auf einem PC, du musst sie ausschneiden, nicht kopieren, sie in deine Hauptstile verschieben und sie einfach einfügen. Hoffentlich erscheint das hier unten, und lass uns zur Veröffentlichung gehen. Also müssen wir sie veröffentlichen , weil sie sagen wollen, dass sie in diese Datei verschoben wurden. Ich werde das veröffentlichen, damit alle anderen Dateien wie diese hier betroffen sind und aktualisiert werden sollten. Es ist, sieh es dir an. Jetzt hier oben, schauen wir uns das an. Sehen wir uns an, dass die Primärfarbe aus der Event-App verschoben wurde. Es gibt keine visuellen Änderungen, es wurde nur verschoben. Der Beweis dafür ist, dass ich jetzt, wenn ich darauf klicke, zu meinem Stil gehe und auf die Einstellungen dafür klicke. Ich kann zu der Stildefinition gehen , die früher auf diesen ersten Tab zeigte. Hoffentlich zeigt es jetzt auf diesen zweiten Tab. Da hast du's. Aufgeräumt, aufgeräumt. Schau uns an. Lassen Sie uns auf all diese Farben eingehen. Wir können bei gedrückter Umschalttaste sowohl auf den Text als auch auf die Farben klicken. Du musst das Raster getrennt von den Farben aus dem Text erstellen. Aber lass uns das wollen. Ich will all diese Farben, außer dieser Ausstellung. Gruseliger Dan, ich wollte meine Befehlstaste und eine Mac-Steuertaste auf einem PC gedrückt meine Befehlstaste und eine Mac-Steuertaste auf einem PC Also ich will die nicht. Ich merke es mir, schneide sie aus, schiebe sie hierher, füge sie ein. Es wird veröffentlichen heißen. Ja, bitte wechseln Sie zu dieser Datei. Denke daran, dass du auf jeder App, die du benutzt hast, die Farben an, dass sich die Dinge verändert haben, aber auch auf der ursprünglichen, von der du sie genommen hast, falls ich alles aus dieser App genommen habe und diese aktualisiert ist, sagt: diese aktualisiert ist, sagt: Hey, sie sind alle weg. Ich werde es überprüfen. Diese Farben werden von dieser Datei bis in die andere verschoben . Okay, wir können das hier noch einmal überprüfen, oops, das Da ist er. Er ist da. Das ist er. Sitze und geh zum Stil. Sie sind alle hinübergezogen. Also jede Datei, die verwendet wird, die Farben, auch die ursprüngliche, müssen aktualisiert werden. Ordnung, lassen Sie uns zum Abschluss In Ordnung, lassen Sie uns zum Abschluss auch alle Rasterstile abrufen. Aber es ist ausgeschnitten, nicht Kopieren, Einfügen, Veröffentlichen, Veröffentlichen. Alle Dateien, die es verwendet haben. Wenn sie geöffnet werden, werde ich mir diese Option einfallen lassen, um zu sagen, dass sie aktualisiert werden muss, entweder die Originaldatei oder diese hier. Was haben wir noch? Lass uns dir das Textil zuschneiden und es hier rein legen. Veröffentlichen Sie, Sie haben die Idee. Okay, so verschiebst du deine Styles von einem Dokument in ein anderes, um sie irgendwie aufzuräumen und sie aus deinem Arbeitsdokument zu holen und allen zu zeigen, was super effizienter UX-Designer du mit deinem Masterdokument bist In Ordnung, das ist es. Wir sehen uns im nächsten Video. 120. Wie du Relink-Refactoring-Komponenten in eine andere Designdatei in Figma verschiebst: Hallo Missy Designer, es ist Zeit, unsere Komponenten aufzuräumen Wir haben ein Arbeitsdokument, für das wir viele Hauptkomponenten generiert haben . Wir haben sogar angefangen, sie in anderen Dokumenten zu verwenden . Es ist also ein großes Durcheinander. Jedes Mal, wenn jemand eines dieser Dokumente aktualisieren möchte, muss er zu diesem Arbeitsdokument zurückkehren , das mit anderen Dokumenten verknüpft ist. Wir wollen einfach alle unsere Komponenten holen und sie in eine zentrale Datei verschieben und all diese Komponenten umgestalten oder neu mit jedem Dokument verknüpfen diese Komponenten umgestalten oder neu mit jedem , das sie möglicherweise verwendet Wir können also dieses Arbeitsdokument zur Rakete herausnehmen und haben eine einzige Informationsquelle In Ordnung, holen wir uns eine Komponente Xin. In Ordnung, also ich habe eine Komponente, es ist eine Hauptkomponente Ich kann erkennen, ob das Symbol hier, in diesem Arbeitsdokument seinen Anfang genommen hat, ich habe es veröffentlicht, ich habe es in diesem Design für mobile Apps verwendet , aber ich muss es in eine ordentliche Datei verschieben Okay, ich nenne das Hauptstile und Komponenten. Ich habe also ein zentralisierteres Designsystem, das andere Leute verwenden können, ohne auf dieses erste Arbeitsdokument zurückzuverlinken. Das Einfachste ist also, Sie wählen es aus, stellen sicher, dass Sie die Hauptkomponente haben, nicht die Instanz, und schneiden es aus. Sie können Copy it, it cut oder Command X, Control X auf einem PC nicht verwenden it cut oder Command X, . Ich werde es hierher verschieben und es wird funktionieren. Also wird es funktionieren. Es wird sagen, Hey, du hast das verschoben. Möchtest du es veröffentlichen? Wenn das nicht erscheint, bedeutet das, dass es sich bei diesem Dokument um eine Designdatei handelt , die Sie als Ihre Hauptstile verwenden, nicht in einer Teambibliothek. Es kann also nicht in Entwürfen stehen , dass das funktioniert. Die andere Sache, die es behindern könnte, ist, dass Komponenten oder nur von einem kostenpflichtigen Konto aus veröffentlicht werden können. Wenn Sie also ein kostenloses Konto haben, obwohl es sich in einer Teambibliothek befindet, funktioniert es möglicherweise immer noch nicht. ändern das, sie machen ihr Preismodell durch und ändern und das kann auf verschiedenen Ebenen geschehen. Es ist also keine feste Regel, es könnte der Grund sein, warum Sie dies hier unten nicht veröffentlicht sehen . Ich werde es veröffentlichen. Ich werde diese Datei verschieben. Es ist eine Warnung. Okay, lesen Sie, lassen Sie uns veröffentlichen. Und wir gehen zur Arbeit. Schauen wir uns jetzt meine mobile App an. Hier. Ich werde alle Änderungen überprüfen und für mich ist das nur ein Schachzug. Es wurde also aus der Event-App verschoben. Lass es uns aktualisieren. Glückliche Tage. Hat sich etwas geändert? Schauen wir uns das an. Also werde ich es auswählen. Ich gehe hierher, um meine Hauptkomponente zu bearbeiten. Und es springt zu dieser Datei, was perfekt ist. Es funktioniert also meistens. Eine Sache, die mich auffallen wird , ist, dass in diesem speziellen Ding tatsächlich verschachtelte Komponenten oder zumindest verschachtelte Instanzen dieser Komponenten eingebettet oder zumindest verschachtelte Instanzen dieser Also Hauptbestandteil, großartig, das ist das, aber wenn ich hineinschaue , ist da das, schau dir das an. Da ist das heiße, okay, da ist die Preisgestaltung, das ist der unterste Punkt. Alle möglichen Dinge müssen zurückkommen. Jetzt sieh dir das an. Wenn ich mit der rechten Maustaste darauf klicke und sage, geh zu MainComponent, geht es irgendwie zurück zu dieser ersten Datei Also musst du dir nur sicher sein, dass du alles greifst, wenn du Dinge ausschneidest und sie rüberschiebst In meinem Fall benötige ich den Preis und die niedrigere Karte, ich benötige die verwendeten Icons. Lassen Sie mich Ihnen zeigen , wie Sie das alles herausfinden können. Die andere Sache, die man unabhängig davon beachten sollte, ist, dass, wie wir es mit den Stilen gemacht haben, wenn Sie etwas ausschneiden und es hier nach oben verschieben, diese Datei sagt, dass es überprüft werden muss , weil sie eine Instanz davon verwendet hat. Aber in der Originaldatei steht: Hey, ich habe etwas geändert, ich muss überprüft werden und das wird von diesem Dokument in dieses andere verschoben diesem Dokument in . Ich muss es nur aktualisieren. Und jetzt sind wir alle glücklich. Du gehst. Es ist allerdings schwierig, das richtig zu machen. Anstatt nur die Hauptkomponente zu kopieren , müssen wir alle Instanzen einbeziehen, die in die Hauptkomponente eingebettet sind. Vorhin gab es eine Option, bei der wir Eigenschaften ausgewählt haben und wir können alle verschachtelten Instanzen sehen, okay, sie nur bei denen verfügbar machen , die Optionen wie groß, klein haben Es hat keine Instanzen. Offensichtlich dieses Icon hier, obwohl es definitiv eines meiner Icons ist. Der Weg, das zu tun, besteht also darin, das alles auszupacken und einfach zu sehen, was vor sich geht. Eigentlich ist es am einfachsten, zu diesem Original zurückzukehren, zum Bedienfeld „Elemente“ zu gehen, lokale Air-Komponenten zu öffnen und dann jede einzelne Seite durchzugehen und sie einfach alle auszuschneiden und einzufügen. Dann kommt alles rüber. Wenn wir etwas chirurgischer vorgehen wollen, okay, was wir tun können, ist, all diese zu öffnen, um zu sehen, wo Instanzen suchen könnten. Wer erinnert sich an die Abkürzung , um all diese zu öffnen? Erinnerst du dich? Das stimmt. Sie halten die Wahltaste auf einem Mac gedrückt, Alt-Taste auf einem PC, und sie sollten alle auf 12 stehen. Und du kannst sehen, es gibt eine Instanz ist eine andere, es ist eine andere, es gibt noch eine. Okay, also ich kann sie aufheben und ausschneiden und einfügen. Sie können Zeit sparen, wenn Sie unorganisiert sind und wir wie ich überfordert sind. Sie können mit der rechten Maustaste auf sie klicken und „Gehe zur Hauptkomponente“ sagen Da ist es. Es wird schneiden. Gehe zu Einfügen. Es hat sie nicht übereinander gelegt. Und stellen Sie sicher, dass dies veröffentlicht wird. Und dieser wird ebenfalls überprüft und veröffentlicht. Und dann geh durch und sag, eigentlich brauche ich dich und er würde alles andere tun , was ich brauche. Ich denke, das ist es. Aber als ETL die Icons auch sie wie alles andere geschnitten hat, glaube ich, hat es das getan. Füge sie hier drüben ein. Ich werde aufhören, diese Seite mit einigen Abschnitten aufzubauen , wie wir es zuvor getan haben . Aber du verstehst die Idee. Also lass es uns machen. Lids veröffentlichen es. Lassen Sie uns das am Ende in einer letzten Sache beenden. Lassen Sie uns diesen überprüfen und all diese Moves aktualisieren. Das Letzte ist, dass Sie vielleicht nicht möchten diese Datei als Teamdatei veröffentlicht wird, es sich nur um eine Arbeitsdatei für Sie handelt. Sobald Sie alles ausgeschnitten und eingefügt haben, können Sie die Veröffentlichung rückgängig machen Denken Sie daran, Option drei, alle drei und ein PC. Ich bin mir nicht sicher, was ich damit gemacht habe, aber ich habe etwas getan. Okay. Ich werde noch einmal darauf eingehen und jetzt kann ich sagen, dass Sie unveröffentlicht bleiben werden Ich lasse meins offen, aber genau das solltest du vielleicht tun. In Ordnung, so räumen Sie Ihre Arbeitsdokumente auf alles in einer zentralen Entwurfsdatei In Ordnung, das ist es. Wir sehen uns im nächsten Video. 121. Teile oder die gesamte Komponenten- und Stilbibliothek in Figma austauschen: Hallo alle zusammen. In diesem Video tauschen wir eine Bibliothek komplett , mit der eine Designdatei verknüpft ist tolle Möglichkeit, neue Designs auszuprobieren denn dieses ist abscheulich Anstatt es besser zu machen, sollten wir die Bibliothek austauschen. Und los geht's, New Library tauschte. Wenn du also mehr Brush, Script oder Comic Sans in deinem Leben brauchst , schau weiter. Oder wenn du einfach nur herausfinden willst, wie man Bibliotheken tauscht, musst du bis jetzt weiterschauen. Lassen Sie mich die Szene einrichten und eine Geschichte erzählen. Ich habe hier diese Datei namens Event App. Okay, es verwendet eine Reihe von Komponenten und Farben und Schriftstilen, nicht in diesem Dokument. Wir haben es in dieses Dokument mit den wichtigsten Stilen und Komponenten verschoben. Toll, aber jetzt möchte ich verschiedene Styles ausprobieren. Also ich möchte die Bibliothek austauschen, okay, ich werde es nicht mit dieser App machen. Das ist zu komplex, gehen die Dinge vor sich? Ich möchte nur eine Version zwei meiner Styles erstellen und sehen, wie sie auf allen Komponenten aussehen, bevor wir sie in alle Dokumente übernehmen, mit denen sie verbunden sind. Es ist ein wirklich guter Anwendungsfall für den Austausch von Bibliotheken. Also hier sind meine ursprünglichen Hauptstile und Komponenten. Ich habe eine zweite Version erstellt, nur mit ein paar der Elemente, die oben in der Nähe des unteren Navi Ich habe die Schaltfläche in einigen Textfibel-Bürstenskripten aktualisiert Textfibel-Bürstenskripten Also, was ich tun werde, ist, anstatt einfach zu dieser Datei zu gehen, Option drei, alle drei und einen PC und los geht's, und ich kann hier weitermachen , weil es mit den wichtigsten Stilen verbunden ist. Ich könnte hier reingehen und sagen, dass die Swap-Bibliothek alles aktualisieren kann, was ich tun werde, damit die Dinge nicht verrückt werden. Ich habe hier diese Datei namens Design Change Test erstellt, nur als einfaches Dokument, es sind immer noch verbundene Domain-Stile. Ich habe einige der Komponenten Farben und Typen hinzugefügt, mit denen ich experimentieren möchte. Und ich werde diesen ändern, nur um ihn von dieser Arbeitsdunkelheit fernzuhalten . Also lassen Sie uns das schließen. Wir benutzen es nicht mehr. Dieses Original ist mit diesem Dokument verbunden. Lass es uns auf diese neue Version umstellen in der ich Farben und Schriftarten geändert habe. Nur als kleiner Testlauf. Du verstehst mich. In Ordnung, lassen Sie uns einen Brunnen drauflegen. Damit das funktioniert, müssen beide Styles veröffentlicht werden. Sie müssen sich beide in einer Teambibliothek befinden. Wenn Sie Komponenten verwenden möchten, müssen Sie einen Tarif haben, zumindest für den Komponententeil zumindest für den Komponententeil Überraschender Sprung von EDA in farbige Boxen mit meinen Primär- und Sekundärfarben. Nur um mit dem Beispiel zu helfen, möchte ich diese Dateibibliothek zwischen Option drei und Alt drei auf einem PC austauschen . Also warum willst du nicht zu, ist, dass ich diesen kleinen Pfeil hier finden will und unten ist eine Option, wo es heißt Bibliothek austauschen. Und es wird von meinen Hauptstilen, die ich zuerst erstellt habe, zu diesem neuen Stil, der Main Styles v2 heißt, übergehen Hauptstilen, die ich zuerst erstellt habe, . Es ist dem gewidmet, weil ich es schon einmal ausgewählt habe, als ich dieses Video aufgenommen habe und verloren gegangen bin und es neu gestartet und trotzdem neu aufgenommen habe, also musst du dir deins davon aussuchen Der große Trick hier besteht nun darin, sicherzustellen, dass die Styles sowohl im ersten zweiten den gleichen Namen haben. Kannst du sehen, dass H3 von meinem Tick-Stil hier H3 heißt, als ob Farben die gleiche Ordnerstruktur hätten Okay, dann schau mal. Farbbindestrich primär fünfhundert, wie bei diesem hier Farbbindestrich, entschuldigen Sie mich, ich bin faul geworden und habe zwei Farben gemocht, aber solange die Namen übereinstimmen, funktioniert es Du wirst in diesem V2 feststellen, dass ich meine Akzentfarbe nicht habe, Leute , weil ich faul bin. Und ich werde so tun. Es ist, weil sieh dir das an. Alles, was nicht unübertroffen ist behält immer noch den alten Stil Das könnte nur eine Vorwarnung für Sie sein, um diese Farbe und den neuen Stil tatsächlich zu kreieren Ich ignoriere es hier unten. Das Up und das F werden als Up bezeichnet und haben die beiden verschiedenen Stile. Eine Sache hier ist, dass dieser primäre Button fehlt. Lass uns das jetzt tatsächlich machen. Und dann werde ich das durchgehen und sehen, warum dieser kaputt ist und er wird die Bibliotheken 321 austauschen und wechseln. Es geht durch, es wird aktualisiert das obere Navi, der untere Nerv, die Farben. Die Schrift hat den Button nicht gemacht. Also lass uns gehen und sie verbinden. Es ist also eine gute Möglichkeit, einfach an dieser Art von vielleicht einer aktualisierten Version Ihrer Dateien zu arbeiten , ohne sie live an das Team zu schicken, weil das ein großer Schritt ist, okay, wenn Sie ein paar Tests gemacht haben, sollten Sie das vielleicht durchgehen und die Leute dazu bringen, die Stürze beim Wicking okay, wenn Sie ein paar Tests gemacht haben, sollten Sie das vielleicht durchgehen und die Leute dazu bringen auf den neuen Stil umzustellen Es könnten nur subtile Änderungen sein, nichts großes N-Brush-Skript wie dieses. Es ist gut. Finde heraus, warum das keine Verbindung hergestellt hat. Hier heißt es also Button Space Main. Das ist also diese Hauptkomponente. Lassen Sie uns das noch einmal überprüfen. Gehe zur Hauptkomponente. Es heißt Button Main. Wie habe ich es hier in den wichtigsten Stilen genannt? Ich habe es Button Hyphen Main genannt. Also muss ich es durchgehen und sagen, du gehst, ich muss das noch einmal veröffentlichen. Alles muss veröffentlicht werden. Option drei, alles klar. Also, wenn ich es das letzte Mal sage, verspreche ich, das Panel der Bibliothek zu öffnen . Veröffentlichen wir es. Jetzt können wir hier rübergehen und sagen, Bibliothek aktualisieren. Lass uns hierher gehen. Tauschen wir hier die Bibliothek gegen diese Bibliothek aus. Das einzige, was gefunden wurde, ist dieses hier. Also können wir tauschen gehen. Los geht's. Comic Sans, meine Güte, jüdisch. Das ist ein großer alter Bibliothekstausch. Wenn du nur eine Einzelperson machen und tauschen willst. Oh, Abkürzung, die ich vielleicht nicht geteilt habe. Command Shift T. Strg Shift T auf einem PC öffnet die letzte Registerkarte zum Schließen. Okay, es ist eine Abkürzung. Ich verwende ein wenig Zeit sowohl für den Browser als auch für Figma Okay, du kannst also hier reingehen und sagen, dass ich diese ganze Bibliothekstausch-Sache nicht machen will. Ich wollte nur ein bisschen durchmachen und abschalten. Okay, ich werde darauf eingehen, okay, es ist ein Beispiel für Up. Und jetzt kann ich hierher gehen, einige Komponenten wurden verschoben, seit ich das das letzte Mal gemacht habe. Was waren sie? Ignoriere das. Okay, ich gehe zu dir, lass uns nicht die ganze Bibliothek austauschen. Das ist Switch this Instance. Also können wir hier rüber und hier hoch gehen, wo Nav steht, klicken Sie mit der oberen Maustaste darauf. Ich werde die Instanz tauschen. Es ist mit dieser anderen Datei hier verbunden, meinem Hauptstil, ich wollte eigentlich die Bibliothek für meine Version zwei verbinden. Also werde ich es einfach dort aktivieren, nichts tun. Ich tausche es aus. Ich gehe einfach rein und schalte es ein, damit ich sagen kann, dass du gegen den Instanzentausch dort ausgetauscht werden kannst Instanzentausch dort ausgetauscht und lass ihn gegen dieses Top-Ding eintauschen Also lassen Sie uns das rüberbringen. Die Farbänderung, die ich auf diesem oberen Nab habe, wurde beibehalten, es gab eine Überschreibung Also kann ich mit der rechten Maustaste darauf klicken und umgerechnete Änderungen sagen. Okay, du kannst Bits einzeln machen oder du kannst die gesamte Bibliothek austauschen. Lassen Sie uns sicherstellen, dass Sie genau dieselben Namen verwenden Ihre aktuelle Bibliothek mit Ihrer neuen Bibliothek , die Sie verwenden, das heißt, Bibliotheken in Figma austauschen 122. Was sind einige Tipps und Tricks für Fortgeschrittene in figma: Hallo alle zusammen. Hey, in diesem Video geht es um meine Art von Tipps und Tricks und Techniken zum Zeichnen für Fortgeschrittene , um dir zu helfen, Dinge zu bauen , Dinge zu zeichnen. Das sind alles ziemlich kleine Sachen. Sie hatten ein eigenes Video nicht wirklich verdient. Also werden sie alle in dieses Video verwickelt, jede Menge guter Sachen. Lass uns reinspringen. Mein erstes und liebstes Beispiel ist, wenn ich eine Menge Sachen reinbringe, okay, also ich importiere alles von Symbolen, um es reinzubringen, gehe auf Alle ersetzen und am Ende liegen sie einfach alle übereinander. Benutze zum Beispiel die Aufräumoption. Was mache ich, wenn es nur eine Möglichkeit gäbe , all diese zu entpacken Sie können Ihre Schnellaktionen verwenden und das Wortpaket eingeben. Und du kannst vertikal oder horizontal gehen und es ist einfach ein bisschen wie unglatte Weisheit Cool, hm? Da ist es immer die Vertikale und die Horizontale, je nachdem, welchen Weg du gehen musst. Natürlich kennst du dich mit intelligenter Auswahl und Aufräumen aus, wir können sie einfach ziehen, um sie und die Lücken dazwischen zu ersetzen , okay Um die Größe anzupassen. Okay, der nächste nützliche Tipp für den Fonds ist, dass, wenn du Logos einbringst und sie alle unsere Größen haben, ich gerade ein Plugin namens Victor Logos verwendet habe. Und lass uns reingehen. Und Sie werden feststellen, dass Sie in allen Größen durchkommen. Also werde ich sie alle auswählen. Der Weg. Ich habe sie irgendwie in die richtige Reihenfolge gebracht indem ich sicherstelle, dass das kleine Schlosssymbol an ist Gemischt ist 100, also das sind jetzt nur 100 Pixel, Breite, sie haben alle eine angemessene Größe. Nun, hier sind ein paar Abkürzungen nützlich, die Align-Abkürzungen. Sie sind also relativ leicht zu merken. Halten Sie die Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt. Und wenn Sie auf Ihre Tastatur schauen, sind dies englische Tastaturen Und kannst du ASD, if, und W dort auf der linken Seite sehen und W dort auf der linken Seite Wenn Sie ein alter Gamer sind, wissen Sie, dass diese Tasten oft benutzt wurden , um sich nach oben, unten, links und rechts zu bewegen Das funktioniert also für die Ausrichtung. Halten Sie also meine Optionstaste auf meinem Mac und die Alt-Taste auf einem PC gedrückt. Und wenn ich W hätte, richtet es alles nach oben aus. Kannst du ihn dort sehen? Wenn ich Option S wähle, die ausgefallen ist, wird alles ganz unten angezeigt. Wenn ich rückgängig mache, mache ich rückgängig und wenn ich Option a wähle, macht alles auf der rechten Seite diese Option D rückgängig . Ist das nützlich? Hauptsächlich links und oben, a und W. Die anderen beiden praktischen Tasten haben dieselbe Taste und sind V und H. Also vertikal, horizontal. Sie können sie also vertikal entlang der Mitte ausrichten, die Andy ist. Und horizontal gibt es auf diese Weise wahrscheinlich eine Abkürzung für Distribute-Center, aber das ist mir zu kompliziert. Meins ist Command Option V, nicht schlecht. Warum kann ich mich nie an den erinnern? Ich weiß es nicht. Ich werde jetzt das Shortcut-Sheet bearbeiten, denn eine seltsame kleine Abkürzung ist, sagen wir, Sie verbringen einige Zeit damit, Ihre Logos in eine bestimmte Reihenfolge zu bringen . Vielleicht passen sie nicht perfekt zusammen und du machst irgendwie, interessant, wenn die weiße Seite, die Logos technisch nicht ganz ausgewogen sind , genau in der Mitte Sie machen also irgendeine Bewegung und Sie möchten diese an etwas entweder oben oder rechts ausrichten . Wenn ich diese auswähle, befinde ich mich in diesem Rahmen. Wenn ich es richtig darauf ausrichten will , wird es nicht funktionieren. Aber ich kann mir das ansehen. Wenn ich meine Shift-Taste gedrückt halte und den Mauszeiger darüber bewege, können Sie Shift ein, Shift Off sehen Im Grunde genommen wird es einer temporären Gruppe zugeordnet, denn dann müsste ich es gruppieren, richtig. Richten Sie es so aus, dass es an der Seite liegt, und heben Sie dann die Gruppierung auf. Und das funktioniert. Aber du kannst vorübergehend etwas gruppieren. Sie halten die Umschalttaste gedrückt und es macht im Grunde diese Gruppierungen, Sie können sich ausrichten. Es bringt nichts mit meinen Sachen durcheinander. Also ohne es an geht einfach weil Smush. Okay, aber wenn ich die Umschalttaste gedrückt halte und darauf klicke, wird es in dieser temporären Gruppe ausgerichtet . Jetzt lass los. Nicht mehr in einer Gruppe, funktioniert offensichtlich für jeden dieser Bots, eine temporäre Gruppe um ihn herum und fängt dann an, ihn auszurichten Es geht darum, das vertikal auszurichten. Und horizontal. Du gehst, oh, ohne eine Gruppe bilden zu müssen. Als Nächstes verwende ich die Zeichentricks, die ich verwende . Ich verwende das 0-Werkzeug, um einen Kreis zu zeichnen, halte die Umschalttaste gedrückt und ziehe ihn heraus. Ich benutze das ziemlich oft, Shift X. Im Grunde macht es die Füllung um/aus, was auch immer das Feld war, ist jetzt der Strich Lassen Sie uns das etwas offensichtlicher machen denn vielleicht fügen wir einen Strich hinzu. Wenn du Icons entwirfst und es entweder in das falsche setzt. Ich möchte es immer umdrehen , um zu sehen, wie es aussieht. Jetzt habe ich ein paar weitere interessante Farben. In Farbe. Manchmal erscheint ein grünes es ausgewählt ist. Shift X wechselt einfach zwischen den beiden Wenn Sie etwas haben, von dem Sie die Füllung entfernen möchten , können Sie den Strich entfernen, indem Sie die Umschalttaste verwenden Also mit Wahltaste oder Alt Schrägstrich, dieser, Shift, Shift, Shift Vorwärts, Strich weg oder Füllung weg, oder Command X schaltet sie um. Geh weiter. Worüber wir sprechen. Schlaganfälle sind eine Kleinigkeit, die nicht jeder kennt. Muss einrahmen. Ich füge noch einen Strich hinzu. Ich schalte um, gehe eins nach oben, um acht zu springen. Und kennst du diese kleine Option hier, Striche pro Seite, du kannst entscheiden, ob ich nur etwas oben haben hier, Striche pro Seite, will oder du kannst hier rein gehen, oder du kannst in die Luft gehen, zu Benutzerdefiniert gehen und sagen, ich will einfach, ich werde vielleicht die oberen und die unteren 90 so oft. Sie machen Striche pro Seite eines Rahmens oder eines Rechtecks. Seltsame Abkürzung ist, sagen wir , diese Logos hier, sie haben die gleiche Breite, aber dieses hier nimmt für mich eher visuelle Fläche ein Wenn Sie einfach die Befehlstaste auf Ihrer Tastatur gedrückt halten , auf einem PC die Strg-Taste gedrückt halten und die Aufwärts- und Abwärtspfeile verwenden . Es wird es skalieren. Es ist nicht so, dass du zwei Lifte hochfahren musst. Also geht es, es skaliert es ein bisschen und lässt viel übrig, wenn du auch Shift gedrückt hältst. Halten Sie also auf einem Mac die Befehlstaste gedrückt, auf einem PC die Umschalttaste gedrückt, bis , bis Sie die Dinge skalieren können. Kellner. Okay, ein weiterer Tipp ist der Gliederungsmodus. Nehmen wir an, wir machen es weiß, gebunden, um es zu sehen. Also zeige Konturen. Shift TO zeigt Ihnen eigentlich nur eine Röntgenversion Ihrer Dokumente. Sie können tatsächlich alle Details sehen, die sich Menschen leisten, kompliziert sind. Aber all das kann man anfangen zu sehen obwohl es weiß auf weiß ist. Das kann sehr praktisch sein, wenn Sie versuchen, Dinge auszurichten , wenn Sie Illustrator der alten Schule sind. Command Y ist die Abkürzung von Illustrator, Command Y ist die Abkürzung die auch funktioniert Shift 0 funktioniert meiner Meinung nach für ein bisschen mehr Tastaturen auf der ganzen Welt, und es ist Mac und PC, wohingegen Command Y oder Control Y auf einem PC Manchmal gibt es zwei Abkürzungen, um dasselbe für ein bisschen mehr Details zu tun dasselbe für ein bisschen mehr Details Gehen wir zu diesem hier und verstecken wir ihn. Halten Sie also die Umschalttaste H gedrückt, um sie auszublenden oder drücken Sie die Umschalttaste H , um den Augapfel auszuschalten Was Sie tun können, ist, dass ich es nicht auswählen oder sehen kann wenn ich zur Umschalttaste im Gliederungsmodus gehe. Oh, okay. Ich kann es auch nicht sehen. Was Sie tun können, ist, dass Sie das tatsächlich einschalten können. Du kannst zu Figma gehen. Sie können zu Ansicht gehen. Da ist eine, die Outlines heißt. Obwohl es skizziert, gibt es tatsächlich versteckte Ebenen. Das Ego. Ich kann diesen also tatsächlich sehen, obwohl er versteckt ist. Und ich kann es tatsächlich im Gliederungsmodus auswählen. Manchmal ist das nützlich, manchmal nicht. Aber jetzt weißt du, dass es ein- und ausgeschaltet werden kann, richtig. Schalten Sie um, um es wieder einzuschalten. Eine letzte Sache, die wir von früher kennen , ist die Leertaste Wann immer du möchtest, währenddessen, lass uns Schicht X und du wolltest es nahe an einen Rahmen bringen und es springt aus ihren Mahlzeiten. Was ist die Abkürzung. Nur eine kleine Erinnerung. Das stimmt. Wenn Sie die Leertaste gedrückt halten, möchten Sie etwas in die Nähe bringen oder es so an den Rand Okay, halten Sie die Leertaste gedrückt, während Sie es ziehen. Okay, also zieh es, ziehe es, ziehe es, halte die Leertaste gedrückt. Das heißt, es wird eine Flucht aus dem Rahmen bekommen, in dem es sich befindet. Es ist toll für solche wie, ich weiß nicht . Groß, so ungeschickt Sie benötigen das Alter der Seite. Da hast du's. Das sind meine Tipps und Tricks zum Zeichnen in Figma, kleine Zusammenfassung Wie gut ist Pack? So gut, alles klar, das ist es. Wir sehen uns im nächsten Video. 123. Zeichnen in Figma mit dem Stift-Tool- Beherrschung der Ankerpunkte: Hallo zusammen. In diesem Video zeige ich Ihnen einige fortgeschrittene Pintool-Techniken. Wir werden nicht zu viele Grundlagen behandeln. Ich zeige dir, wenn du es schwierig findest , Dinge in Figma zu zeichnen, ich zeige dir zwei Möglichkeiten, die Art, die irgendwie sinnvoller ist, aber nicht Advanced ist Und dann zeige ich Ihnen die fortgeschrittene Methode, die ich verwende, wenn ich in Figma zeichne Wenn Sie bereits ein Meister der Stiftwerkzeuge sind, können Sie das überspringen Wenn dir das Stiftwerkzeug Angst einflößt. Schau dir dieses Video an und hoffentlich macht es es für dich etwas nützlicher und du zeichnest in Figma Lass uns gehen. In Ordnung, also werde ich ein Bild reinbringen. Es befindet sich in Ihrem Bilderordner mit dem Namen Pinto Practice PNG. Bring es rein. Ich werde einfach einmal klicken, um es zu platzieren. Okay, ich schließe es ab. Command Shift L. Strg Shift L auf einem PC, nur damit ich es nicht bewegen kann. Und jetzt werden wir zeichnen. Also P wie das Stiftwerkzeug, ich zeige Ihnen zwei Techniken. Die etwas verständlichere Art und dann die graue, hackige Art , wie ich es gerne mache, das sieht tendenziell besser aus Fangen wir hier unten mit dem verständlicheren Weg an. Du klickst einmal für die Ecke, okay? Und du klickst auf deine schöne gerade Linie, klickst und ziehst. Finden Sie also die Mitte der Kurve. Vielleicht müssen wir das Snapping ausschalten. Klicken Sie also auf Aktionen, Schalten wir Snap aus oder deaktivieren Sie diese. Ordnung, zurück zum Stiftwerkzeug. Hier unten. Klicken Sie einmal für die Ecke, wo sie sich am Scheitelpunkt der Kurve Klicken Sie gedrückt und ziehen Sie bis zu einer Ecke, wackeln Sie damit und sehen Sie, was es tut Und wir werden es irgendwie so machen, wie wir es zu Beginn des Kurses gemacht haben Keine Sorge, du kannst es später reparieren. Aber ich finde, das ist der einfachste Weg, Menschen etwas beizubringen. Klicken Sie einmal für die Ecke, klicken und ziehen Sie für die Kurve. Das ist ein Quant, es ist einmal klicken. Ist das eine Ecke oder eine Kurve? Das ist eine Ecke. Klicken Sie einmal. Jetzt klicken Sie einmal in die Ecke. Klicken Sie einmal in der Ecke, suchen Sie den Scheitelpunkt der Kurve, klicken Sie und ziehen Sie sie heraus Hab keine Angst, es zu bewegen. Bring es da hin. Perfekt. Klicken Sie. Sobald ich den Gipfel erreicht habe, kann ich das nicht alles auf einmal machen Ich kann versuchen, den Scheitelpunkt zu erreichen, aber Sie sehen, dass es einfach nicht genug ist Wir versuchen, zu viel mit einem Ankerpunkt zu machen. Ich werde es wahrscheinlich brauchen, ich werde dort einen brauchen. Und einer hier ist klicken, halten und ziehen. Eins hier drüben, gedrückt halten und ziehen. Ich habe es beim ersten Mal nicht richtig gemacht. Das ist völlig okay. Bring es irgendwo in die Nähe und wir können es reparieren. Das ist eine Ecke, es ist okay. Klicken Sie auf die Kurve und ziehen Sie sie. Klicken Sie einmal für die Ecke, einmal für die Ecke, klicken Sie und ziehen Sie für die Kurve. Klicken Sie einmal für die Ecke, klicken Sie und ziehen Sie. Du hast den Dreh raus. Das ist im Allgemeinen der einfachste Weg, um loszulegen. Sie können diese anschließend verschieben , indem Sie Ihr Verschiebewerkzeug verwenden, bei dem es sich um die V-Taste handelt. Sie können auf diese klicken und sagen, dass Sie tatsächlich dorthin gehen und sie in diese Richtung bewegen. Du gehst dorthin und musst diesen Weg gehen. Und du gehst so und bringst es dann irgendwie in eine akzeptable Form Dann kommt es darauf an, mit dem Stiftwerkzeug zu üben, zu üben, zu üben, zu üben. Sobald du eine bessere Übung gemacht hast und gut darin wirst , es auf diese Weise oder auf die fortgeschritteneren Arten zu machen . Und dann klicken Sie auf Fertig. Ich werde das hier löschen, mein P-Tool wieder. Und ich werde verschiedene Abkürzungen verwenden. Dieser ist also ziemlich abkürzungsintensiv. Also fangen wir irgendwo an, wo es einfach ist, wie an einer Ecke. Klicken Sie einmal für Ecke, klicken Sie einmal für Ecke. Hier wird es anders anstatt einmal zu klicken und dann zu versuchen, die Kurve hier drüben zu machen, was funktioniert. Es sieht viel schöner aus, wenn man nicht so viele Ankerpunkte Und was wir tun können, ist, dass wir hier tatsächlich eine Kurve machen können. Du sagst, Hey, wir wollen uns nicht gerade krümmen. Was wir tun können, ist mit einer Kurve zu beginnen, sie irgendwie gerade zu machen, okay, so Halten Sie die Wahltaste auf einem Mac gedrückt, OK, Canopy Santa macht irgendwie kaputt Die Griffe kommen aus diesem Ankerpunkt heraus. Das nennt man Spiegelung. Wenn sie, Mirror, sich erholen, wenn sie zusammenpassen, werde ich die Spiegelung unterbrechen Spiegelung. Hey, das heißt, dass ich dann versuchen kann, die nächste Kurve vorherzusagen. Hier kommt es auf die Praxis an. Ich weiß irgendwie, dass das meine Kurve in die richtige Richtung bringen wird Und bevor ich weitermache, können Sie sich das einfach schnappen und zurück zu seinem Zuhause ziehen. Und du kannst sehen, dass es wieder geradeaus kommt. Da kommt also kein Griff raus und ich will nur von dieser Seite hier drüben, ich mache dasselbe. Klicken, halten, ziehen. Meine Kurve ist total oft gute Arbeit und ich möchte nicht loslassen, denn wenn ich das mache, versucht es, das zu krümmen, aber okay. Also klicke ich auf Halten und Ziehen und unterbreche es dann erneut, indem ich dieselbe Tastenoption auf einem Mac gedrückt halte, auf einem PC die Alt-Taste. Und dann versuche zu erraten, wo das hingehen muss. Ich werde dort einen Ankerpunkt platzieren. Wenn Sie also nicht ganz einen anderen direkt über die gleiche Art von Winkeln fahren , ist das nicht ganz richtig? Und dann arbeite ich mich herum. Wenn du Joel eine Kurve hast, kannst du sie danach durchbrechen. Halten Sie die Wahltaste gedrückt. Geh zurück hierher und wir machen es einfach. Okay, dann habe ich eine Ecke. Oder wenn Sie eine Kurve machen, möchten Sie, dass es eine Kurve ist. Sie können auf einem Mac die Befehlstaste und auf einem PC die Strg-Taste gedrückt halten und neue Griffe herausziehen. Option, sie zu zerbrechen. Der Befehl zum Herausziehen neuer Befehle wird auf einem PC gesteuert. Also hier, ich weiß nicht, ist das überhaupt hilfreich für dich? Zieh meine Kurven da raus. Klicken und ziehen Sie hier nach oben. Wenn David die Verbindung trennt, kannst du einfach einmal darauf klicken und es wird wieder eine Verbindung hergestellt Nun, dieser hier sagst du, Oh, es ist eine Ecke auf einer Kurve. Nochmals. Ich werde so vorgehen, es irgendwie nahe bringen, es kaputt machen und dann weitermachen. Aber bevor ich weitermache, werde ich ihn zurück zu seinem Haus schleppen. Dieser hier braucht einen geraden Hintern, also werde ich das wahrscheinlich in die Länge ziehen. Klicken Sie, halten Sie und ziehen Sie es heraus. Dry, komm zurück. Schau dir das an, mach es kaputt. Komm zurück, werde den Kerl los. Kann es in die Länge ziehen, habe meinen Punkt verloren. Lass uns den einmal anklicken, rausziehen, kaputt machen, ihn tatsächlich zurückziehen, bevor ich hierher gehe. Es ist süß, Dan zum Mitnehmen zu zeichnen und aufzuräumen . Ich werde meine V-Taste benutzen und diese Dinge einfach durchgehen und diese Dinge dorthin verschieben, wo ich hin musste Auch hier achte ich immer darauf, dass die Ankerpunkte sehr symmetrisch aussehen Am Ende hat es eine schönere Kurve. Wenn diese Dinge ausgewogen sind. Diese beiden hier, ich stehe mir quasi direkt gegenüber, aber nicht ganz gleich lang Also diese beiden hier, es steht ein Ankerpunkt unten. Schauen wir uns diesen an , der ungefähr genauso aussieht. Dieser muss ein bisschen herauskommen, ein bisschen Geben und Nehmen, bisschen Geben und Nehmen, eine kleine Neupositionierung der Ankerpunkte, um sie perfekt zu machen Ja, das ist ein Kreis. Ich sollte einfach einen Kreis zeichnen. Aber wir üben das Stiftwerkzeug. Okay, so mache ich meine Siegeszeichnungen in Figma. Es gibt einen kleinen kurzen Überblick für die Leute, die nicht viel in Figma oder zumindest Dev gezeichnet haben, vielleicht haben sie sich ein bisschen durch das Ganze gekramt Hoffentlich waren da ein paar Tipps und Tricks drin, die dir bei der Erstellung deiner Icons und Logos in Figma helfen , okay, und das war's Wir sehen uns im nächsten Video. 124. Zeichnen mit Bend & Mirror Winkel in Figma: Hallo alle zusammen. In diesem Video schauen wir uns an, wie man mit dem Stiftwerkzeug etwas zeichnet mit dem Stiftwerkzeug etwas Aber nicht wirklich, wenn das Stiftwerkzeug in deinem ist, ich mag es nicht, wenn du diese Videos für dich in den Warenkorb legst. Wir zeigen dir, wie du den sogenannten Bientot benutzt, was im Grunde nur bedeutet, dass du Linien einfach ziehen und Ankerpunkte griffbereit haben kannst . Außerdem werden wir diese verrückten Dinge durcharbeiten. Was bedeutet Spiegelung, Spiegelwinkel? Sie sind wirklich praktisch, wenn du all die Abkürzungen vermeiden willst , die wir im letzten Video gemacht haben Also lass uns anfangen, ohne das Stiftwerkzeug zu zeichnen, sozusagen. Okay, also schnappen wir uns das Stiftwerkzeug, das du magst. Hey, du hast uns versprochen, das Stiftwerkzeug nicht zu lernen , weil es schmerzhaft ist. Wir beginnen mit dem Stiftwerkzeug, nur um es irgendwie auszumalen Also klicken wir einfach und all die wichtigen Übergänge, okay, gehen einfach durch und wo soll ich es hier haben? Ich weiß es nicht. Wie zuvor, lassen Sie uns ein paar Dollar in den Kopf setzen und einfach alle Übergänge und den Scheitelpunkt drücken, und dann verwenden wir das Stiftwerkzeug Das Stiftwerkzeug ist dieses hier, die Abkürzung dafür, wie das Halten der Befehlstaste auf einem Mac, die Strg-Taste auf einem PC. Und was du tun kannst, ist einfach in die Mitte zu klicken und einfach los, du schuldest Ligand, das bringt uns dazu, Biegekram zu machen Okay, Sie werden vielleicht feststellen, dass dies nur eine einfache Möglichkeit ist Ihre Symbole in eine bestimmte Reihenfolge zu bringen. Du würdest sagen, was ist mit diesen Typen? Okay. Wenn Sie also Dinge haben , die nicht gespiegelt werden, denen ich nicht sagen kann, können Sie zurück zu diesem Auswahlwerkzeug wechseln, das aus V-Taste und Tastatur besteht Klicken Sie auf diesen Typen und sagen Sie, Sie können entweder nur Spiegelwinkel oder Spiegelwinkel und Länge angeben. Und nichts passiert wirklich außer wenn du gehst und das änderst, kannst du sehen, dass sich die Länge auf der anderen Seite ändert und der Winkel derselbe ist. Am Ende hast du einfach, ja, es ist eine Art, diese Dinge zu glätten Die andere ist, wenn ich mein Auswahlwerkzeug auswähle, klicke ich darauf. Wenn ich Spiegelwinkel wähle, klicke erneut darauf. Es wird den Winkel widerspiegeln , aber nicht die Länge. Kannst du sehen? Du wirst beides brauchen. Okay, in diesem Fall möchte ich wahrscheinlich den Spiegelwinkel und die Länge des Spiegels. Okay. Ich weiß nicht, warum die Auswahl aufheben, aber hey, das tut es, also die Länge und den Winkel Nun, das heißt, es kann eine schönere Art des Zeichnens geben. Ob das Stiftwerkzeug und all die Abkürzungen oder einfach nur ein bisschen verrückt. Das Gleiche gilt, wenn du eine Kurve hast und du eine Kurve haben musst, ohne Spiegelung und dann losfahren und brechen Es. Sagte, nun, die Abkürzungen Also zuallererst das Stiftwerkzeug, einfach praktisch. Halten Sie die Befehlstaste gedrückt und Sie gehen einfach nach Großbritannien, Großbritannien. Füge deine eigenen Soundeffekte hinzu. Sie können dem, was Sie wollen, sehr nahe kommen. Und wenn du etwas ändern musst, wirst du Spiegelwinkel und -länge sein. Dieser hier, er kämpft mit ihnen. Wir gehen jetzt noch einen letzten. Wenn ich mit meinem Auswahlwerkzeug darauf klicke und du diesen Kerl aber zurück zu seiner Heimatbasis bewegen kannst und es verschwindet. Okay, so benutzt man das ohne das Stiftwerkzeug zu verwenden In Ordnung, das ist es. Wir sehen uns im nächsten Video. 125. Kannst du Ankerpunkte oder Booleans in Figma animieren: Hallo zusammen. Hey, ich werde oft gefragt. Kannst du Ankerpunkte in Figma animieren? Wir können Smart Animate also verwenden, um coole Mophie-Dinge zu machen, vielleicht auch Booleans verwenden Und die kurze Antwort lautet nein. Ich habe diese beiden Formen hier. Sie verändern sich nicht so, wie du hoffen würdest, dass Figma derzeit nicht zulässt dieses Ding mit diesem booleschen Wert hier derzeit nicht zulässt. Ich wollte mich irgendwie bewegen, weil ich das mit diesem Ding machen will , sich bewegt Es ist ein cooles Tutorial , das ich von Smelt Studios gesehen habe und ich habe versucht, es nachzubilden. Es bringt einige wirklich gute Punkte darüber auf, was wir mit dem Zeichnen in Figma machen können und was nicht Die Antwort lautet also nein. Lassen Sie mich kurz zeigen, wie ich diese gemacht habe, damit Sie sich darüber im Klaren sind, was Sie nicht tun können. Tolle Geschichte, Rodin. Aber im nächsten Video werden wir das tatsächlich zu einem kleinen Trick machen . Und der Trick ist, ich werde dir zeigen, was das ist, da ist der Trick. Einfach. Es ist eigentlich nur dieser Block, der dahin rutscht. Es sieht cool aus, besonders wenn dieser Typ aufspringt und die Farbe wechselt Aber wenn du versuchst, die Ankerpunkte zu verschieben, verblasst es einfach, was nicht schlecht ist Es ist immer noch ziemlich cool, aber nicht genau das, was wir wollen. Lassen Sie uns also demonstrieren, wie es kaputt ist. In Ordnung, nur zur schnellen Demonstration von Joel und dem, was ich eine Krone nennen werde Okay, es ist nur eine Vektorzeichnung. Ich werde es in unsere Komponenten umwandeln. Ich mache eine Variante. Und anstatt einfach die Größe zu ändern, was wir tun können, wissen wir, dass ich diese Ankerpunkte tatsächlich verpassen möchte , okay, und etwas Interessantes tun möchte. Und leider, Lass uns fertig machen. Schieben wir E, um zum Prototyp zu gehen. Du verbindest es per Fingertipp mit dir und wechselst mit Smart Animate zu dieser anderen Variante Das Gleiche geht in die andere Richtung zurück. Ziehen wir eine Instanz heraus. Lassen Sie uns eine Vorschau dieser Instanz anzeigen. Befehlsoption, Eingabetaste, Steueroption, Eingabetaste auf einem PC. Klick, klick. Okay, es funktioniert einfach nicht. Leider sind wir Booleaner genauso wie ein Fade dasselbe. Wenn Sie denken, Oh, ich frage mich, ob ich einfach einen booleschen Wert wie dieses Navigationsbeispiel animieren könnte einen booleschen Wert wie dieses Navigationsbeispiel animieren , das besagt, wenn ich ein Rechteck zeichne , okay, ich verwende mein O'Toole für das Ellipse-Werkzeug, ziehe das heraus und sagt: Ihr zwei Leute werdet boolesch sein, subtrahieren Ich werde dasselbe tun. Machen wir eine Komponente daraus, haben eine Variante davon und ich werde auf Shift umschalten. Oh, okay, für den Outline-Stummschaltmodus finde ich das einfacher, wenn wir mit booleschen Werten arbeiten weil wir sie nicht sehen können, aber sie ziehen diesen in diese Richtung Okay, und versuchen Sie, zwischen den beiden zu animieren, dass beide Formen, aber im Moment, also ich habe mir Shift 0 angesehen, lassen Prototypmodus wechseln und los, Sie gehen zu ihrem on Tap und wechseln zu Smart Animate Du kannst nach hinten gehen und dir ein Exemplar davon schnappen. Lassen Sie uns eine Vorschau geben. Lass mich Boop holen Boop, nur als Fade. Ich war mir nicht sicher, ob ich dir nur den Anfang gezeigt habe, um zu sagen, nein, das kannst du nicht tun. Ob ich Ihnen Beispiele dafür zeige , dass es sowieso nicht möglich ist, das ist im Moment die Wahrheit, aber es gibt Workarounds, die wir im nächsten Video machen werden, damit dieses coole Navigationsding vorankommt , dass es sowieso nicht möglich ist, das ist im Moment die Wahrheit, aber es gibt Workarounds, die wir im nächsten Video machen werden, damit dieses coole Navigationsding vorankommt. In Ordnung, lass uns das jetzt machen 126. Animation eines mobilen Navigationsmenüs in Figma mit einem Dip: Hallo zusammen, wir werden dieses coole Navigations-Ding machen , bei dem es sich irgendwie bewegt und herumrollt. Es ist sehr cool. Es war ein Online-Tutorial, das mir einer meiner Schüler zur Verfügung stellte, obwohl er einige Probleme hatte. Ich habe es nachgebaut. Ich bin auch auf ein paar Dinge gestoßen Ich denke also, es ist eine wirklich gute Lernübung die wir alle zusammen machen können. Es kombiniert, wie man Pfade animiert, oder zumindest die Tricks, damit es so aussieht, als würden wir die kleine Vertiefung dort unten animieren Und einige der Probleme, auf die Sie stoßen könnten , wenn Sie versuchen, es selbst zu tun. Außerdem sieht es wirklich cool aus. Bouncy und Debbie, sieh dir das an In Ordnung, lass uns anfangen. Also habe ich dieses Tutorial gesehen und sehr cooles Tutorial von smelt Studios Ich möchte es aufschlüsseln, weil Schüler zu mir gekommen sind und versucht haben , es nachzubauen Sie stoßen auf ein paar Probleme. Also, was ich tun werde, ist, eine wirklich einfache Version davon zu machen und es im Laufe der Zeit interessanter zu machen. Machen wir es also zunächst mit einem wirklich einfachen Boolean Also werden wir das Auto für das Rechteckwerkzeug verwenden . Warum kein Rahmen? Weil wir keinen booleschen Wert mit einem Rahmen machen können und wir können nicht wie das Pin-Tool, Ankerpunkt-Zeug mit unserem Rahmen machen, können wir nur mit einem Rechteck machen Ich werde ein Rechteck zeichnen. Wenn du möchtest, dass ich meine Anstellung wiederhole, hol sie dir. Was ich tun möchte, ist, dass ich mir das Ellipse-Werkzeug schnappe. Ich halte die Umschalttaste gedrückt und ziehe eine Ellipse heraus Ich kombiniere diese beiden, okay, mit einem booleschen Wert, ich verwende die Subtraktion und wir wissen, dass wir sie als Animation nicht entlang von K bewegen können sie als Animation nicht entlang von K bewegen Aber was wir tun können, ist, innerhalb von Subtraktoren die beiden Teile zu sagen , oder Rechteck und Ellipse. Die Ellipse werde ich eigentlich einfach viel länger machen, als ich brauche Ich ziehe hier die Seite des Rechtecks heraus, halte meine Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt , und es wird von beiden Seiten gezogen Also ich habe Abneigung, habe hier ein bisschen mehr Fläche, damit ich es verschieben kann Siehst du, es muss genug sein , damit ich bis hierher komme. Also muss meins etwas größer sein. Nicht die ganze Sache. Ich will nur das Rechteck Ich halte die Befehlstaste gedrückt und klicke auf das rechteckige Steuerelement auf einem PC, um direkt in sie einzutauchen. Halten Sie die Wahltaste, die Alt-Taste auf einem PC gedrückt und ziehen Sie einfach eine richtig große Die wirklich große Sache hier, bevor wir weitermachen, ist, dass wir es einfach herausgezogen haben, damit wir sehen können , dass das Ganze in einem Frame sein muss, innerhalb von Frames, in die wir ihn verschieben können Okay. Es muss das Kind eines Frames sein. Um das zu tun, verwende ich die Abkürzung , um etwas einzurahmen, okay, es einzuwickeln, es zu einem Rahmen zusammenzufassen Also habe ich alles ausgewählt, Befehlsoption G oder Strg-Alt G, um alles in einen Frame zu legen. Nennen wir es Commander, nennen wir es Nav Alt. Eins. Wir werden es zu einer Komponente machen. Lassen Sie uns eine Variante haben, ich muss sie für den Moment einfach zurück in meinen Rahmen ziehen, die geht nicht rein, Sie gehen in mein Handy. Und das unterste hier, nicht das Deckblatt. Der Abzug auf der Innenseite muss bis hierher reichen. Nun, nicht draußen. Halten Sie die Leertaste gedrückt, wenn Sie sie innerhalb des Rahmens halten müssen , damit Sie die Variante selbst nicht verschieben möchten, das Ganze. Weil wir Varianten sowieso verschieben können, das gefällt uns, einfach eher als organisatorische Sache. Wir wollen, dass sich die Dinge darin bewegen. Schauen wir also, ob wir sie jetzt zum Laufen bringen können. Also werde ich in den Prototypenmodus wechseln, E drücken, auf diese erste Variante klicken und sagen wenn Sie angeklickt werden, gehen Sie hierher. Also auf Tap, habe ich eine Variante, um Smart Animate zu verwenden. Und ich werde Quick verwenden , weil es cool aussieht. Das Gleiche hier. Klicken Sie auf die untere Zeile und ziehen Sie sie nach oben. Es sollte die gleichen Standardeinstellungen haben. Lassen Sie uns eine Instanz davon herausziehen, indem Sie auf die erste Instanz innerhalb des Sets klicken und die Wahltaste oder Alt gedrückt halten. Ich schleppe meins her. Das muss nicht mehr da sein. Lassen Sie uns also eine Vorschau geben. Also Befehlsoption Enter , Strg Alt, Enter, es wird eine Vorschau angezeigt, lassen Sie uns klicken. Schau dir das an. Los geht's. Das ist die grundlegende Mechanik. Der Trick ist, dass wir das eigentlich nur alleine verschieben und dass das innerhalb eines übergeordneten Frames sein muss. Und dass du nicht nur die Variante verschiebst, du verschiebst dieses Zeug innerhalb der Variante. Das ist der wichtige Teil. Okay, jetzt, wo wir wissen, dass das eine etwas schönere Version ist, gehe ich davon aus, dass wir eine Weile Also gehst du weg. Und ich fange mit einem schönen Bad an. Anstatt tatsächlich damit zu beginnen, dass sich die Symbole verschieben. Ich, lass uns das Symbol eingeben und ich werde vorerst nur mit diesen dreien arbeiten. Du kannst dir jedes Icon holen, das du magst. Wir kriegen dich. Und ich hole den Hut. Ich werde einfach drei davon benutzen. Stecken Sie sie alle in die süße Abkürzung zum Durchsuchen. Wenn Sie die Schnellauswahl verwenden, wie ordnen wir sie alle zusammen? Klicken wir mit der rechten Maustaste auf die Aktion. Das heißt PAC, PAC horizontal. Da haben wir's. Ich werde sie unten anordnen. Also halte ich die Wahltaste auf einem Mac gedrückt, Alt-Taste auf einem PC und drücke S für den unteren Rand. Oder lassen Sie uns H V machen . Sie sind also alle vertikal ausgerichtet. Sie sollten eine kluge Auswahl sein. Ich bin immer noch im Prototypenmodus, also gehe ich zu Shift und ziehe sie raus. Wie weit so weit werde ich mir das Rectangle-Tool schnappen, um meinen Teil davon zu bauen Okay? Los geht's, ich schicke es mit meinen eckigen Klammern nach hinten. Kann ich die erste Art verwenden, wird sie bis zum Ende meines Telefons gedrückt Das sieht irgendwie in Ordnung aus. Ich werde das mal durchgehen , damit ich meine tollen Fähigkeiten als Stiftwerkzeug einsetzen kann . Also, ich drücke meine V-Taste, doppelklicke, um hineinzugehen, gehe zu meinem Pinto, das ist P. Ich bin drin weil ich im Objektzeichnungsmodus bin, du doppelklickst darauf, um hineinzukommen Okay, und ich nehme wahrscheinlich drei, oder? 12.3 Gehe zurück zu meiner V-Taste für mein Auswahltool. Wenn du da bist, kannst du sie aufstellen. Sieht das nach einem guten V aus? Ich glaube schon. So etwas in der Art. Einige der Abkürzungen, die wir gelernt haben, bevor ich sie für diesen hier verwenden werde , sind keine Spiegelung Ich nehme den Winkel und die Länge des Spiegels. Für diesen hier unten nehme ich mein Pin-Tool die Befehlstaste gedrückt. Das ist das Biege-Tool, Cain kann tatsächlich auf das Symbol selbst klicken. Im Moment ist es etwas wackelig, also kann ich sagen, dass Spiegelwinkel und -länge tatsächlich Kehren Sie zu meinem Auswahltool zurück. Und ich kann sagen, los geht's, es wird die gleiche Länge und Breite haben. Okay? Und ich möchte so etwas sein. Vielleicht runde ich die auch ab. Ich benutze das Stiftwerkzeug und klicke einfach darauf und ziehe es einfach ein wenig heraus. Das Gleiche gilt für diesen. Ja. Das wird funktionieren. Okay. Erledigt. Also ich habe den Bend, ich habe all meine Formen. Ich will nur sichergehen, dass das wirklich breit ist. Also werde ich die Ansicht verkleinern. Ich gehe, wenn ich es ziehe, verschmiert es mein Ding Ich gehe also zurück in den Objektbearbeitungsmodus. Klicken Sie auf diesen ersten Ankerpunkt, halten Sie die Umschalttaste gedrückt und greifen Sie zum zweiten. Machen Sie einfach ein richtig großes Gleiche mit diesen, um die Umschalttaste gedrückt zu halten , klicken Sie auf beide, machen Sie es richtig groß, größer als Sie es wahrscheinlich benötigen , weil es egal ist. Es kann abgeschnitten werden. Dieser Treffer flüchtete ein paar Mal, um herauszukommen. In Ordnung, und was machen wir jetzt? Jetzt ist der wichtige Punkt, an dem wir sicherstellen müssen, dass es sich in einem Frame befindet. Wählen Sie alle Befehlsoption G, Strg Alt G oder klicken Sie mit der rechten Maustaste darauf und sagen Sie „In eine Rahmenauswahl konvertieren“. Dass es, glaube ich, es ist in Komponente umgewandelt, kann als Variante Command D oder Control D gehen , um ein anderes zu erstellen. Und ich werde es hier in meinem ganzen Bild machen , weil ich sie alle innerhalb der Schnittgrenzen sehen wollte sie alle innerhalb der Schnittgrenzen sehen . Ich schiebe es ab, wenn ich krank bin. Also gehen wir hierher. Lassen Sie uns einfach überprüfen, ob es funktioniert. Also dieser erste, perfekt, dieser hier. Ich möchte die Variante nicht anpassen. Ich will nur das Rechteck hier rein und geht einfach nach oben. Und lassen Sie uns einfach diesen Teil machen , Adrian-Soundeffekt. Okay, und ich gehe in den Prototypenmodus. Geh du, ich gehe irgendwie hierher, wechsle wahrscheinlich zu den Varianten Miami Schnell. Mal sehen, ob das funktioniert. Schauen wir uns ein Beispiel davon an. Sehen wir uns eine Vorschau an. Es flippt aus. Schließe es, schau es dir noch einmal an. Wir gehen, es ist Klick. Da haben wir's. Funktioniert irgendwie. In Ordnung, füllen wir es einfach aus. Also, was gehen wir? Ich habe die ganze Sache gemacht. Klickt hier runter. Okay. Werde die Nudel los, klicke darauf, lösche Was ich gerne machen würde, ist das Unterste zu machen. Also dieses hier, das Rechteck darin, geht nach unten. Das sind also die drei kleinen Sprünge. Und was wir tun werden, ist , es zu manipulieren. Also wenn das, wenn das, das und das, ich halte Schicht. Also hier wird geklickt, geht nirgendwohin. Oder wenn an der richtigen Stelle darauf geklickt wird , geht es hierher. Gleiche gilt für dich. Das Herz. Wenn der heißeste Klick ist, gehe zum heißesten. Heiß, zu dem würde er gehen. Was haben wir noch? Du gehst den richtigen. Dieser. Wenn also ein Ticket mit diesem zur ersten Ticketing-Option zurückkehrt mit diesem zur ersten Ticketing-Option , überprüfen Sie es einfach noch einmal Verwenden sie immer noch Smart Animate und Quick? In Ordnung, also schauen wir uns die Vorschau an. Lass es uns testen. Du, du, du, alles klar, sie arbeiten alle zusammen. Lassen Sie uns diese Typen nur dazu bringen, ein bisschen anders zu groß zu werden. Also dieser hier, ich gehe rauf. Ich halte meine Umschalttaste gedrückt und gehe mit meinem Aufwärtspfeil wahrscheinlich 123 nach oben. Ich will Konsistenz zwischen diesen Jungs. Eins-zwei-drei. Eins, zwei, drei, dass ich sein muss was ich tun könnte, genauso gut wie das und weißt du, was habe ich Klicken Sie also darauf, halten Sie die Umschalttaste gedrückt, doppelklicken Sie darauf, doppelklicken Sie darauf. Und ich sage, dass ihr alle nicht diese Farbe haben werdet . Ich werde es auf die anderen fünfhundert umstellen , den da Was ich auch tun könnte, ist sie zu vergrößern. Nun, Sie könnten versucht sein, hier oben anzukommen , nur um zu gehen, in Ordnung Ich werde, du könntest einfach plus acht oder nicht in dem nach der Breite, du könntest einfach plus acht gehen, okay, und das beide dehnen. Das ist plus acht. Das funktioniert irgendwie. Wir sehen, dass es irgendwie von oben links gegangen uns ist das Waagenwerkzeug etwas praktisch, eine Höhle für das Waagenwerkzeug. Und Sie können sehen, ich möchte von der Mitte aus skalieren , um etwa 0,25. Da haben wir's. Das hat nicht funktioniert. Wir denken spontan, lassen Sie uns das alles getrennt machen. Okay, Sie werden also eine Breite von der Höhe angeben , weil ich denke, dass die Höhen alle gleich sind. Gehen wir plus acht. Und es geht von der Mitte aus. Das Gleiche gilt für diesen hier. K2 plus acht. Da hast du's. K2 plus acht In Ordnung, schauen wir mal, ob das funktioniert. Gehen wir hier rüber. Oder es ist fast da. Das steht nicht ganz im Mittelpunkt. Ärgert mich. Schau es dir an. Du musst nur ein bisschen so sein. Und ich habe sie irgendwie alle gleich groß gemacht, aber dieser muss etwas höher sein weil sie nicht alle gleich hoch sind , oder? Es wird also ein bisschen Hin und Her geben, um herauszufinden , was am besten aussieht, wenn sie zu diesen wechseln. Du gehst, wir können die Pause nicht animieren und wir können im Moment keine booleschen Werte animieren Aber du kannst irgendwie dafür sorgen, dass es sich so anfühlt. Aber eigentlich verschiebe ich das nur durch ein nettes bisschen Smart Animate. Ich denke, die schnelle Lockerung macht das alles wirklich cool Da hast du's. Okay, das wird ziemlich schwierig sein, sich zu treffen, aber ein guter Zeitpunkt für einige der Abkürzungen, die wir Und ist es seltsam, dass diese in meiner Vorschau nicht skaliert wurden? Kannst du sehen, dass es eine normale kleine Größe ist, wir kennen die Waagen hier. Okay, aber sie haben hier einfach keine Vorschau gesehen. Bieten wir eine Erfrischung an. Refresh hilft ihnen überhaupt nicht. Ich weiß nicht warum. Es ist eines dieser geöffneten Figma, schließ es wieder, Dinge, die ich glaube rahmen Gehen wir da wieder rein. Lass es uns in mein iPhone holen. Schauen wir uns das jetzt an. Nun, das ist die richtige Größe. Los geht's. In Ordnung, das ist es Nun, ich werde dich im nächsten Video sehen wem ich weiß, dass es ein Problem geben wird , an das ich denke , weil ich seinen Snus gekaut habe, weil zitiere, ich mache etwas Ich denke, wenn Sie das in einer anderen Reihenfolge tun, was, wie ich weiß, einige von Ihnen tun werden Siehst du, ich habe drei Varianten. Sie haben alle die gleiche Größe, obwohl sie oben herausragen. Was Sie tun können, wenn Sie es anders machen ist , dass sie unterschiedliche Größen haben können. Sie könnten diese zuerst erstellen, sie stellen einen Komponentensatz zusammen. Ich kann mir Leute vorstellen, die das tun. Also, wenn du das findest, lass uns das speichern, werde es mit diesem machen. Der Rahmen, okay? Die gesamte Außenseite hat hier die gleiche Höhe wie diese, sodass sie beim Übergang alle in einer Reihe stehen. Wenn sie es nicht sind, wenn ich auf diesen klicke und auf einem PC meine Befehlstaste und die Strg-Taste gedrückt habe, kann ich den Frame tatsächlich getrennt von allem anderen anpassen . Ich kann einfach einpacken. Es ist ein Rahmen, obwohl er als Variante bezeichnet wird. Okay, ich kann sagen, lass uns das größer machen. Das könnte passieren. Das Ding , das am Ende ein bisschen größer ist als dieses, weil das hier irgendwie ein Clip ist Schauen wir uns an, was jetzt damit passiert. Und dann kannst du sehen, wie es sich bewegt, wenn du in diese Falle tappst, okay, du musst ein paar Dinge tun. Sie müssen nur sicherstellen, dass dies an etwas befestigt ist , das bei allen die gleiche Größe hat. Wenn ich auf einem Mac meine Befehlstaste gedrückt halte, auf einem PC die Strg-Taste um die Varianz herum Also habe ich die Variante ausgewählt, ich kann sie auf die richtige Größe bringen und das sollte für dich funktionieren. Lass uns das jetzt versuchen. Nun, ich weiß es, weil ich es so kaputt gemacht habe, aber das ist ein Problem, auf das Sie stoßen könnten und das wird es hoffentlich für Sie lösen. Klicken Sie auf die Variante und stellen Sie sicher, dass sie dieselbe Höhe hat. Ich kann es mir hier irgendwie ansehen. Du kannst es einfach eingeben. Wenn es 50 sein müssen, kann ich es eingeben. Es wird nicht funktionieren. Wenn du es nicht mit der Faust in einen Rahmen gesteckt hast, wenn es immer noch nicht funktioniert. Okay, es muss innerhalb des ersten Frames sein , den wir früh gemacht haben. Ich packe das Ganze in einen schönen kleinen Behälter sich alles bewegen kann, getrennt von den eigentlichen Elementen, und du gehst, in Ordnung, das ist jetzt das Ende, dieses Mal definitiv das Ende, Tschüss getrennt von den eigentlichen Elementen, und du gehst, in Ordnung, das ist jetzt das Ende, dieses Mal definitiv das Ende, 127. Kursprojekt 16: Animation mit Alt Nav: Hallo zusammen, Projektzeit für den Unterricht. Ich möchte, dass du das nachstellst. Falls du es noch nicht aus dem vorherigen Video getan hast, was ich wirklich suche, ist dieser Ankerpunkt, der sich irgendwie bewegt Ich weiß, dass es irgendwie gefälscht ist. Wenn Sie etwas mit den Symbolen machen, ändert sich möglicherweise die Farbe. Es muss nicht so etwas wie tropfendes Herabhängen sein oder es kann sein, es macht mir nichts Ich möchte nur sehen, dass Sie die Mechanik zum Laufen bringen können . Ich wollte so sein, dass es die Form gibt, wer ist mein Original? Benutze die Ankerpunkte, um das auch ein bisschen zu üben. Sie könnten versucht sein, zu betrügen. Schummeln ist in Ordnung. Ich kann das überprüfen, aber du könntest vielleicht einfach sagen, sagen wir das hier. Ich könnte hier einen Kreis haben, der zum Hintergrund passt, und den Kreis einfach alleine bewegen . Das würdest du nicht wissen. Sie würden, sobald Inhalte veröffentlicht werden, versuchen, dahinter zu stehen. Also los, ich möchte nur, dass du ein Video nachstellst , in dem du damit interagierst, den Link zum Aufgabenbereich hochlädst, in den sozialen Medien teilst, ich würde gerne sehen, was du machst Benutze deine eigenen, verwende deine eigenen Farben, du kannst meine Icons verwenden oder irgendwelche Icons , die du verwenden möchtest, um vielleicht einfach ein bisschen zu dir zu machen und vergiss nicht, die Arbeit, das Feedback, die Ermutigung und die Teamarbeit anderer Leute zu kommentieren Arbeit, das Feedback, die Ermutigung und die Teamarbeit anderer Leute In Ordnung, das ist es. Wir sehen uns im nächsten Video. 128. Wie du Dinge in einem Figma-Autolayout überlappst und stapelst: Hallo alle zusammen. In diesem Video zeige ich Ihnen, wie Sie Dinge so überlagern, dass sie übereinander gestapelt werden. Wenn Sie möchten, legen Sie sie einfach in verschiedene Ebenenreihenfolgen. Das ist teilweise richtig, aber nicht, wenn Sie sie zu einem automatischen Layout machen wollen , in dem wir sie bearbeiten und neu organisieren können Da hast du's. Sie können auch mit der Stapelreihenfolge spielen. Schick. Okay, um loszulegen, ich bin wieder auf meiner ersten Seite mit dem ganzen Müll. Ich habe gemacht. Bildwechsel, um ein Feld zu animieren , in das die Kommentare eingefügt werden. Ich werde einige Icons, die ich dort überlagern möchte, in deinen Übungsdateien einfügen Befehlsschalttaste, K, Strg-Umschalttaste. Für Abkürzungen ist es ein bisschen spät. Dan, besonders diese, bringen Ikonen mit. Ich platziere sie alle oder an der falschen Stelle. Ich werde meine Quick Actions verwenden. Ich packe waagerecht. Und der einfache Weg ist, bei ihnen allen eine intelligente Auswahl zu treffen. Jetzt lass uns das Negative machen. Da hast du es, aber du kannst das Stacking nicht ändern. Und obwohl das der einfache Weg ist, ist das vielleicht alles, was Sie brauchen. Lass mich dir den richtigen Weg zeigen. Wahrscheinlich sind wir hier. All diese Typen müssen aus mehreren Komponenten bestehen. Diese müssen zu meinem Hauptkomponentendokument oder zu meiner Komponentenseite weitergeleitet werden. Ich gehe jetzt nicht. Urteile nicht über mich. Okay. In diesen Fällen können die Komponenten zwar immer noch negativ ausgerichtet werden, aber der Trick passiert wirklich, aber der Trick passiert wirklich wenn wir sie in ein Autolayout umwandeln, vielleicht ein K verschieben und es gute Emoji-Antworten für unbenannte Okay, ich kann jetzt mit Autolayouts immer noch das Negative verwenden Okay, aber das Schöne daran ist, dass wir einige erweiterte automatische Layoutoptionen haben einige erweiterte automatische Layoutoptionen haben und wir jetzt mit dem Canvas-Stacking beginnen können Jetzt haben sie alle einen Z-Index, je nachdem, wie Sie es nennen möchten Ich werde als Erster an der Spitze landen, an der Spitze verloren. Okay, es hängt davon ab, was du richtig, richtig machen willst . Wie groß müssen diese sein? Ich gehe zurück zu den Hauptkomponenten und sage K für Maßstab und Höhe dort. Ich werde diese alle 16 von Mrs. mit meinem Autolayout machen , weil es immer noch das Negative verwendet, das negative Sitzen, was keinen Sinn macht, wenn es wirklich groß ist Diese auf meiner Seite. Das Letzte, was ich tun möchte, ist ein paar Schlagschatten hinzuzufügen. Ich kann es wahrscheinlich damit machen. Eigentlich werde ich es aufräumen, es schön aussehen lassen. Aber das ist es wirklich. Der negative Abstand funktioniert nur bei normalen alten Objekten. Es funktioniert, wenn Sie sie zu Komponenten machen. Es funktioniert, wenn Sie ihnen automatische Layouts erstellen. Aber sobald die Autolayouts abgeschlossen sind, können Sie unter den Erweiterten Optionen mit diesem Stacking herumspielen unter Was ich jetzt tun will, ist sie hübsch zu machen. Ich wähle sie alle aus. Geh runter zu, oh, es lohnt sich, hier rumzuhängen, wenn du von seinen Effekten abspringen willst . Ich füge einen Schlagschatten hinzu. Und was Sie sehen werden, ist, dass es sich ansehen wird. Sie hier drüben. Kannst du sehen, lass uns sie hierher bringen. Kannst du sehen, was passiert ist? Nicht gut. Schatten fallen lassen. Ich will mir all diese Typen schnappen. Geh zu meinem Fix. Bist du Effekte, geh in die Einstellungen. Es gibt jetzt eine Option und hier ist diese Show hinter Transparent ist wer? Das gefällt mir nicht. Ich mag diesen Schlagschatten nicht, aber er funktioniert. Ich möchte vielleicht auf diesen Weg gehen, auf Null, auf diesen Weg. Ich gehe diese gerne durch, wenn ich sie ändere . Vielleicht nur einer auf diese Weise. Vielleicht geh. Und wenn sie negativ angewendet werden, haben sie einen kleinen Schlagschatten zwischen ihnen. Ich liebe dieses Gesicht. In Ordnung? In Ordnung, das ist es So können Sie Dinge in Figma einfach überlappen und stapeln 129. Was sind die Abkürzungen für Umarme und Ausfüllen in Figma: Hallo alle zusammen. In diesem Video schauen wir uns an, wie man mithilfe von Tastenkombinationen von der festen Größenänderung von Umarmungen umschalten mithilfe von Tastenkombinationen von der festen Größenänderung von Umarmungen umschalten Die kurze Antwort lautet: Doppelklicken Sie auf den Rand, um ihn zu umarmen und doppelklicken Sie mit Wahltaste oder Alt, um zu Füllen zu gelangen Warum ist dieses Video so lang? Es gibt ein paar Dinge, die du wissen musst, aber nicht viel mehr. Lass uns das wieder aufbauen und ich zeige dir die Tipps und Tricks. Ordnung, also diese Abkürzungen, wir das Textwerkzeug und zeichnen ein Textfeld wie ein Okay, es wird also eine Box mit fester Größe sein. Ich gebe Text ein, du tippst ein paar Sachen ein oder fügst etwas Loren Ipsum Und ich werde das Rahmenwerkzeug verwenden. Ich werde Escape drücken , um alles los zu werden. Wenn ich hier eine Linie ziehe und einen Rahmen verwende, um das mit einer Füllung zu machen . Wie hoch wird es sein, eine Höhe von acht Pixeln. Lassen Sie uns das Ganze in ein automatisches Layout umwandeln. Und das muss so funktionieren, dass sichergestellt wird , dass Ihr Kommentarfeld, alles, was wir bisher gezeichnet haben, darin enthalten ist. Du gibst dem einen Namen. Kann meine Rolle sein. Also alles hier wird sich ändern. Es wird ein automatisches Layout sein. Ich wollte oben links sein Lassen Sie mich Ihnen zeigen, wie reaktionsschnell das bisher ist. Nicht sehr reaktionsschnell. Um es responsiv zu machen, müssen wir mit der Größenänderung herumspielen , das heißt Umarmen und Umarmen und feste Höhe Anstatt mit diesen Dropdowns herumzuspielen, können Sie Abkürzungen verwenden. So gut. Die erste, Umarmung, sagen wir, wir ändern die Größe dieser Box anhand meiner Designs und ich merke, dass sie nicht mehr repariert Ich kann nicht gehen und es in Umarmung ändern oder ich kann die süße Abkürzung benutzen Alles, was es tun musste, ist auf die Außenseite dieses Feldes zu doppelklicken und schon siehst du Rückgängig, Repariert, Wiederherstellen, Umarmen Gleiche gilt für die Breite. Wenn Sie möchten, dass die Horizontale eng anliegt, doppelklicken Sie einfach auf die Kanten. Sie rastet ein, um die Größe zu Die Arbeit sieht etwas anders aus. Hey, irgendwie die gleichen Dinge, die ich umarmen wollte , denn im Moment weiß dieses Ding, vor sich geht eine feste Höhe, wenn es draußen ist, mein Elternteil, nicht, was Es sieht nur dieses Textfeld, okay. Es sieht all diese anderen Dinge nicht. das zu Umarmen-Inhalten wechselt , bei Text etwas anders ist, ist die Bedienung dieselbe, was bei Text etwas anders ist, ist die Bedienung dieselbe, also drücke ich Escape, um den Take-Modus zu verlassen , doppelklicken Sie einfach auf den unteren Rand Anstatt sich zu umarmen, was es irgendwie tut. Es schaltet es tatsächlich von dieser Box mit fester Höhe auf automatische Höhe um. Das Gleiche, aber jetzt zum Doppelklicken, kopieren, einfügen, einfügen. Jetzt ist es responsiv. Okay, also doppelklicke auf die Ränder, um es so zu ändern, dass es die Seite hier für Zecken umarmt . Wenn ich umarmen wollte, wenn ich darauf doppelklicke, macht es nicht ganz das, was ich will, weil es das tut, Es umarmt den Inhalt und der Inhalt hat keine Pause, also geht es einfach für immer weiter So wie wir gerade diese Option gewählt haben. Wenn Sie also ein Feld verwenden, wenn es sich um einen Rahmen oder ein Auftragslayout handelt, doppelklicken Sie darauf, um den Inhalt für Text zu umarmen Es bietet ähnliche, aber unterschiedliche Optionen. Konvertiert es von dort nach dort. Auf automatische Höhe oder Breite festgelegt. Doppelklicken Sie einfach auf den Rand. Die, die ich am Ende häufiger verwende, ist die nächste Abkürzung. Das Gleiche. Sie doppelklicken auf den Rand, halten aber die Wahltaste gedrückt. Was macht das? Es geht zum Füllen des Behälters. Schauen wir uns das an. Das ist jetzt sehr reaktionsschnell. Aber wenn ich hier auf den Text klicke, halte meine Wahltaste auf einem Mac Alt-Taste auf einem PC gedrückt und doppelklicke auf den Rand. Schau, im Moment heißt es repariert, schau dir das an. Bam, fülle, füllt den Behälter. Nun, es ist alles Mögliche für eine gute Größenänderung. Machen wir dasselbe für diese kleine Bar hier. Etwas schwieriger zu klicken, Okay, aber wenn ich die Wahltaste doppelt gedrückt halte, wird der übergeordnete Container gefüllt. Also ich würde sagen, Doppelklick auf den Rand für Umarmung Option oder Alt, Doppelklick auf den Rand, Erfüllen Haiti, oder? Steht das im nächsten Video? 130. Wie man absoluten Abstand festlegt, damit man Autolayout in Figma ignoriert: Hallo alle zusammen. In diesem Video schauen wir uns etwas an, das Absolute Positioning genannt wird. Dieses Kommentarfeld hier, kannst du sehen, dass es ein Autolayout ist und darin dieser Avatar ist Das heißt, ich kann es bewegen, kommt mit. Weil es das normalerweise tut. Du versuchst, es in ein Autolayout zu stellen und es geht, ich brauche Platz Du sagst: Nein, nein, geh einfach da rüber und dann springt es raus und dann ist es wieder drin. Wir werden das mit Absolute Positioning in Figma beheben Absolute Positioning in Figma Um zu beginnen, habe ich einen Kreis. Ich werde ein Plugin namens Content Real öffnen. Ich habe es erst vor einer Minute benutzt, damit ich die Tastenkombination Command Option P, Control Alt P verwenden kann die Tastenkombination Command Option P, Control Alt P verwenden , um es erneut zu öffnen Und ich gehe zu Image und suche einen Avatar. Du gehst, nein, ich will, ich weiß nicht. Was am Ende passiert, ist, dass das in Ordnung ist. Der Avatar ist großartig, außer dass Sie feststellen werden, dass etwa 1.000 andere Mockups genau dieselbe Frau haben . Das ist in Ordnung. Also was ich tun will ist, dass es da oben ist. Wir wissen, dass ich die Leertaste gedrückt halten kann. Also fange ich an, die Leertaste zu ziehen und gedrückt zu halten. Ich kann es da hinstellen. Es ist allerdings nicht Teil dieser Bande. Ich kann eine weitere Komponentenverpackung darauf erstellen und es ist nur ein bisschen nervig Ich möchte, dass es Teil davon ist, aber ich möchte nicht, dass es im Wagen ist. Was wir tun werden, ist es in den Fluss zu bringen. Wir wollen es, und dann werden wir dieses magische Ding hier benutzen. Es heißt Absolute Positioning. Wenn Sie ein Webdesigner sind, kennen Sie den Begriff. Wenn Sie nicht irgendwie Sinn machen, aber von Annuity Web Term, klicken Sie darauf Sie können es absolut so positionieren, wie Sie möchten. Okay. Ich stelle meins hier auf. Sie können es versehentlich aus meinem Kommentarfeld ziehen , das ist nicht das, was ich will mache ich rückgängig. Es gibt also ein paar Dinge, die ich tun kann. Erstens möchte ich nicht, dass es abgeschnitten wird. Ich drücke Shift Enter, um das Elternteil auszuwählen, das ist mein Kommentarfeld. Und ich sage, schneide den Inhalt nicht ab, das zeigt mir den Rand. Doppelklicken Sie, um jetzt reinzugehen , damit es nicht herausspringt. Wer erinnert sich an die Abkürzungen, damit das Mitglied nicht verlassen Space Buster funktioniert. Okay, also ich kann es hier holen. Das Coole daran ist, dass es immer noch Teil dieses Kommentarfeldes ist. Schau, Kommentarfeld. Du kommst mit auf die Fahrt. Ich kann das Ganze in eine Komponente verwandeln und die wird dort bleiben. Wenn du im positiven Sinne ein paar Tricks mit Nullhöhe machst, okay, das ist der Ersatz dafür. Nun, falls Sie noch nie von einem Nullhöhen-Trick gehört haben, mit dem Sie versuchen können, solche Dinge zum Laufen zu bringen. Sei dankbar. Okay, ein paar Dinge, die ich tun wollte, um es zusammenzubinden, sind, dass ich es hierher ziehe und dabei die Leertaste gedrückt halte Ich möchte mit der Polsterung herumspielen etwas Platz zu geben Also werde ich darauf klicken. Da haben wir's. Und ich werde es einfach etwas extra gepolstert um Platz für meinen Avatar Ich habe ewig versucht, es in Einklang zu bringen. Warte, sie werden zu einem Schlagschatten. Aber mir gefiel es sowieso nicht, wir werden es dabei belassen. Das ist Absolute Positionierung in Figma 131. Wie man etwas in Figma absolute Positionierung findet, das reaktionsfreudig ist: Hallo alle zusammen. In diesem Video fügen wir dieses kleine Rauten-Ding hinzu, okay, und wir werden es so einrichten, dass es nicht nur außerhalb des Flusses ist , sondern immer noch Teil von sondern immer noch Teil von Aber sieh mal, es reagiert, kommt mit. Ordnung, springen wir rein, machen wir die kleine Kiste. Ich mache es im Speed-Modus. Okay, das hat viel zu lange gedauert, aber zum Glück habe ich eine schnelle Version davon Es ist nur eine Pastille , in der Text steht. Ich habe meine in der richtigen Reihenfolge laut gemacht, damit ich mit der Polsterung herumspielen kann , die nicht notwendig ist Was notwendig ist, ist, dass es hier rumhängen wird. Aber ich möchte, dass es wie dieses im Autolayout ist. Also werde ich das in mein Autolayout King stecken und ich füge es hier rein, damit ich die Zeile sehen kann, die murmelt Es ist nicht wirklich wichtig , weil es eine absolute Position sein wird. Beachten Sie, dass es nur der zweite in der Liste dieser Kommentarfelder ist, wie zuvor, ich werde sagen, absolut positioniert dieses Ding. Bumm. Dann schiebe ich es hierher und halte die Leertaste gedrückt, damit es nicht herausspringt Das bleibt in meinem Autolayout, Kommentarfeld und füge es hinzu, wo immer du willst Ich werde mir den Tag vertreiben. Lassen Sie uns nun überprüfen, wie schnell es reagiert, da Sie es tun könnten, Duke, überhaupt nicht sehr reaktionsschnell. Also, was ich tun werde, ist, dass ich einige meiner Abkürzungen in den Go Inside Tab, Tab, Tab, Tab, Tab, Tab verwende Tab, Tab, Tab, Tab Finde den, den ich will, und ich stelle ihn von links ein. Okay. Das ist nicht der Grund, warum es nicht responsiv ist. Also wollte ich der Weihnachtsmann sein, oder? Je nachdem, was du bis nach oben machen willst. Vielen Dank. Nun, es sollte, hey, ich möchte wahrscheinlich, dass meins nicht davon abhängt, ob du in der Mitte sein willst , ich werde meins auf der rechten Seite haben. Los geht's. Responsives Zeug , das sofort einsatzbereit ist. Schau uns an. Eine Sache, die Sie beachten sollten, ist, dass sich meine kleinen Pastillen mit den positiven Stimmen, die ich gemacht habe, verschoben haben Ich werde die Pastille nicht mehr verwenden. Es ist unten gelandet, obwohl es irgendwie oben angefangen hat und es aussieht, als wäre es oben Zieht es einfach irgendwie aus den Flows, habe es vom Avatar nach unten gedrückt Und die Upvotes standen früher ganz oben in diesem Kommentarfeld, aber jetzt werden sie hier nach unten gedrückt Ich weiß nicht, warum es interessant ist, dass du gehst, okay, so macht man Absolute Positionierung plus ein bisschen Reaktionsfähigkeit In Ordnung, wir sehen uns im nächsten Video. 132. Wie du die Dinge unten rechts in einem Auto-Layout in Figma festhältst: Hallo alle zusammen. Wir werden dieses Bild unten rechts platzieren. Muss kein Bild sein kann alles sein. Wir werden den Absolute Positioning-Trick anwenden. Außerdem schauen wir uns ein wenig vom Stacking an , das wir uns zuvor angesehen haben, sowie ein bisschen die Überarbeitung der Maskierung sowie ein bisschen die Überarbeitung der Maskierung . In Ordnung, springen wir rein In Ordnung, lassen Sie uns dafür sorgen, dass es funktioniert. Also ich habe das hier. Es ist nur ein zugeschnittenes Bild eines zugeschnittenen Bildes. Ich werde es hier haben wollen, okay? Aber ich füge es einfach dem Flow hinzu, wo immer ich will. Ich gehe deinen Weg. Absolut. Positioniert kommt aus dem Flow, landet am Ende meines Autolayouts und ich werde es an die richtige Position bringen Und das Letzte, was ich tun muss, ist, dass der Moment nicht reagiert. Ordnung, Sie müssen nur auf diese Zeile klicken . Das ist der großartige Name der Moscheegruppe Und ich werde Einschränkungen sagen. Ich werde sichergehen, dass es auf der rechten Seite ist. Und ich sage, bleib bitte ganz unten. Lass es uns. Mein Mann ist super reaktionsschnell. Sie haben Cooley, ignoriert die Polsterstäbchen unten rechts Was ist das Ding? Ich weiß es nicht. Etwas, das ich in Adobe Firefly entworfen habe, dem KI-Bildgenerator von Adobe Ich habe ein bestimmtes Thema der Cyberpunk-Blume eingegeben. Wie dem auch sei, eine letzte Sache, die ich Ihnen zeigen möchte , ist, dass das darüber liegt, was problematisch sein könnte, aber wir sollten in der Lage sein, auf das Kommentarfeld der Eltern zu klicken. Und es ist ein automatisches Layout. Denken Sie daran, bevor wir es in einem anderen Kontext verwenden, aber wir gehen zu den erweiterten Einstellungen. Und da war Canvas Stacking zuletzt oben, weil diese Typen ganz unten sind Meine Maskengruppe ist die letzte und die Liste, die ich sagen kann, hat sogar die erste ganz oben drauf gesetzt. Deins könnte standardmäßig auf das andere zurückgreifen, auf dieses Ego. Sie können zwischen den beiden wechseln. In Ordnung? Du darfst gehen. Jetzt werde ich diese Moschee mit einer Maske neu gestalten , nur weil es gut ist, sie zusammenzufassen Ein bisschen verwirrend. Ja, wir machen es trotzdem. Also drücke ich die Taste 0 und halte die Umschalttaste gedrückt, um Kreis zu zeichnen. Ich gehe Command OP, Command Shift K, um ein Bild einzufügen , das auf einem PC die Strg-Umschalttaste ist, ich werde diesen Firefly hineinbringen und dort reinklicken Okay, also was ich tun möchte, ist, dass ich mir einen Rahmen schnappe und ihn darüber zeichne. Ich gebe dasselbe für den Pixelradius an, für den ich es verwendet habe. Dann werde ich es bekommen, wie ich es will. Das kann ich nachher anpassen. Es ist wie bei beiden. Ich klicke auf Maske. Ich werde nicht funktionieren, weil das vorne sein muss. Das muss da sein und dann die Maske, versteh es immer falsch. Okay. Und so habe ich so etwas ausgeschnitten, in dem die Ecke erwähnt wird, damit ich den Schlagschatten verwenden kann , der gerade passiert Ich kann natürlich immer noch hineingehen. Drücken Sie die Eingabetaste für die verschiedenen Kinder mit der Maske und der Blume. Und du kannst bewegen , was auch immer. Ich werde die Blume wahrscheinlich hierher bringen. Okay, nimm meine Anpassungen vor. Ich werde es wahrscheinlich mit diesem machen. Doppelklicken Sie, um auf der Registerkarte in das Innere zu gelangen, doppelklicken Sie, um in die Registerkarte zu gelangen, zwischen den beiden Kindern. Okay. Und ich werde das anpassen. Du gehst. So habe ich das gemacht. Das war es nicht wert, für Dan herumzuhängen. Ja, du hast wahrscheinlich recht. Eine letzte Sache, bevor ich gehe ist im Grunde genommen, dass ich dieses Video fertiggestellt habe , als ich dachte, Oh, ich möchte, dass es größer wird. Wie machen wir das alles mit der Abkürzung, 0 waschen, die Leute mit der Abkürzung daran erinnern. Erinnert sich noch jemand, wie ich reingekommen bin? Denn in dem Moment, in dem es die Fülloption verwendet, läuft es, wenn ich auf meine Ellipse klicke, es benutzt die Fülloption, okay, innerhalb dieser Ellipse, wie komme ich da rein und bekomme all die Abkürzungen, damit ich sie skalieren und verschieben und ihre Größe ändern kann sie skalieren und verschieben und ihre Größe ändern Und es ist richtig, Sie halten die Optionstaste gedrückt. Also wenn ich auf Off klicke, kann ich das natürlich nicht, OK, Canopy C ist ein bisschen wie Click habe, irgendwie doppelklicke ich ein paar Mal bis ich irgendwann all das Zeug sehe Denken Sie daran, und ich kann es ändern, um es zu beschneiden und die Größe aber ziehen Sie einfach dieses mittlere Stück, zu ändern, aber ziehen Sie einfach dieses mittlere Stück, wenn Sie es aus diesem Grund vom Rand abbrechen möchten, lassen Sie mich mit der Zuschneidekante herumspielen Diese blauen Dinger lassen mich mit einem Kreis spielen , aber das will ich nicht. Ich möchte es irgendwie herausziehen, damit ich die Kanten dieser Formschicht herausbekomme , damit es nicht verrückt Und das ist es, was ich will, um eine interessantere Ernte zu bekommen und das Ego zu schneiden Flucht, Flucht, Flucht ist EBITDA Ja, was ist cool. In Ordnung, da haben wir's. Wir sehen uns im nächsten Video. 133. Wie man die Größe eines Rahmens automatisch in einem Auto-Layout an den Text in Figma anpasst: Hallo zusammen. Sehen Sie sich dieses kleine farbige Kästchen an der Seite hier an. Ich bin sicher, es hat einen Namen. Ich weiß nicht, was es ist. Schlecht, wenn wir Text löschen oder Text bearbeiten. Kannst du sehen, dass es expandiert und anspricht. Es ist eine nette Mischung aus Autolayout, Absolute Positionierung Okay, lassen Sie uns mit der Erstellung beginnen, in Ordnung, um damit anzufangen, ich werde einige Dinge verstecken, weil wir alles in dieses Tutorial geworfen haben und wir am Ende kein kleines Chaos hatten Also habe ich meinen Avatar Command Shift H ausgewählt, um ihn zu verstecken. Drücken Sie Shift H an einem Stück in dasselbe. Und lassen Sie uns die kleinen Texterweiterungen machen. Also zuerst brauche ich einen Rahmen. Okay, ich werde die Größe rausziehen. Ich kann das anpassen, wenn ich krank bin. Ich werde eine Farbe 500 verwenden. Ich verwende meine 3D-Farbe. Gib ihm einen Namen. Schlecht benannt Dan. Ich weiß, dass es für dieses Ding ein Fachwort gibt. kann mir das nicht vorstellen und wenn ich ehrlich bin, bezweifle ich, dass es ein Wort dafür gibt. Ich hätte gerne vorher. indem ich es hineinziehe, die Leertaste gedrückt halte, es irgendwie ausrichte Ich werde es irgendwie in die richtige Größe bringen, indem ich es hineinziehe, die Leertaste gedrückt halte, es irgendwie ausrichte. Ich denke ziemlich gut. Eigentlich. Heutzutage. Ändern Sie die Größe hier, stellen Sie es so ein, wie Sie es möchten, und ziehen Sie es dann wie zuvor in Ihr Autolayout in Ihr Autolayout Wir setzen hier die Absolute Positionierung ein , um die Route zu starten. Und wir wollen, dass es sich dehnt, okay, also werde ich es bis zum Rand einrasten lassen. Es ist zu nah am Text oder repariere ihn ein bisschen. Aber warum wollen wir nicht, dass wir Einschränkungen für das linke Ufer sagen wollen , aber ich will das obere und das untere Ufer. Das heißt, es wird sich die Gesamtgröße ansehen und anpassen. Wenn wir also die Gesamtgröße anpassen, indem dieses Textfeld ändern, das so eingestellt ist, dass es den Inhalt umarmt, oder zumindest das Äquivalent für ein Textfeld mit automatischer Kannst du sehen, dass es eine Zeile ändert, viele Zeilen. Ich werde zu dem zurückkehren, was ich hatte. Das einzige Problem dabei ist, dass es in Bezug auf Verantwortung nicht besonders robust ist. Verantwortung, Reaktionsfähigkeit, dehnbarer Text Dinge haben keine Verantwortung in der Welt In Ordnung? Und wir wollen es ein bisschen robuster machen. Eigentlich wird es zwei Dinge tun. Eigentlich werde ich den nächsten Teil rückgängig machen und wir kehren zu den Dingen zurück , die ich tun möchte. Ich muss das rüberschieben und ich kann nicht zum Textfeld gehen und sagen, dass du diesen Weg gehst , weil alles linksbündig innerhalb von, innerhalb dieses Autolayouts ist innerhalb dieses Autolayouts Also kann ich Shift Enter drücken , um das Elternteil auszuwählen. Und ich kann nach rechts sagen, es funktioniert irgendwie, aber es verschiebt alles andere Es ist nicht wirklich das, was ich will. Ich mache es auf diese Weise rückgängig. Was wir machen, ist ein bisschen der Anfang für Autolayouts Ich habe Autolayout Parent, aber dieses Textfeld. Wir wissen, dass, wenn ich Autolayout hinzufüge, sich das in Ordnung verschiebt. Es wird außen gepolstert. Und ich setze das auf Null. Terrier kreuzen die Null und zeigen ihnen allen, damit sie links sagen Lass uns ein bisschen essen, eine Lou, ich habe etwas Polsterung, das ist also ziemlich cool Und die andere Sache ist, dass das immer noch ein Problem beim Dehnen ist, weil es nur ein kleiner Trick ist. Wir sagen, bleib so weit weg von oben und so weit von unten. Und wenn das Textfeld erweitert wird, wird es auch erweitert, aber es gibt keine direkte Verbindung zwischen den beiden. Dieses Textfeld vergrößert das gesamte übergeordnete Element, wird größer und es funktioniert irgendwie, bis Sie das tun Was wir aber tun können, ist, dass wir dir sagen können, wir können dich da reinziehen. Also los geht's, du würdest dich innerhalb dieses Autolayouts befinden, weil es bereits eine absolute Position ist bereits eine Ich bin in diesem Rahmen. Lassen Sie uns es ein bisschen benennen. Kommt auf Xbox. Darin sind meine Tics-Blöcke und mein dehnbares Ding. Und weil es absolut positioniert ist und es herausziehen sollte, sollte es nicht zu weit entfernt sein. Wir wollen es nicht in die Länge ziehen. Also denk dran, die Leertaste gedrückt zu halten, lass uns wieder da rein gehen. Halten Sie die Leertaste gedrückt, halten Sie die Leertaste gedrückt, während Sie sie ziehen. Okay, und jetzt benutze ich meine Pfeiltaste. Es ist immer noch in meinem Lehrbuch , einem automatischen Layout. Lass uns auf diesen Typen klicken. Er ist immer noch auf oben und unten eingestellt, aber er bezieht sich jetzt auf diese Box, wenn ich sie größer mache, können Sie sehen, dass sie nicht kaputt geht. Aber es hat immer noch diese nette Funktionalität, dass es immer größer und kleiner wird. Okay, so macht man einen Stretchstoff, gib mir den Namen Wenn du weißt, wenn du über Graphen sprichst, sagst du, Oh, das nennt man so oder so. Jemand, der das Ziehen von Anführungszeichen und Einrückungen oder so ähnlich Den Namen dafür, lass es mich in den Kommentaren wissen. Aber im Moment denke ich, dass das alles für Absolute Positioning ist. Wir haben ein paar verschiedene Versionen davon entwickelt weil es sehr leistungsstark und sehr nützlich ist , um Ihr Autolayout Dann gehen wir alle Adjektive durch. Oh, noch eine letzte Sache, bevor wir unsere Shortcut-Tests machen, Pop-Quiz, ich ändere die Größe, sodass es jetzt unsere feste Breite Was ist die Abkürzung, damit es herausspringt und den Behälter füllt. Du erinnerst dich daran, du machst beide , du doppelklickst. Mir ist klar, dass es nicht der ist, den du willst. Und dann wählst du Option auf einem Mac, Alt auf einem PC und doppelklickst darauf und es füllt den Container. Los geht's, Pop-Quiz, in mein Freund das Ende des Videos ist . Wir sehen uns im nächsten. 134. Was sind die Abkürzungen für Autolayout-Padding und Größenanpassung: Hallo alle zusammen. In diesem Video schauen wir uns einige Abkürzungen für Autolayouts an, nur ein paar praktische Eine ist hier die Größenänderung, die Größenänderung eines Frames. Normalerweise können wir einfach nach der Ecke greifen, aber wenn wir die Wahltaste auf einem Mac oder die Alt-Taste auf einem PC gedrückt halten und das tun, zieht es von der Mitte aus und es ändert die Größe des Ganzen von der Mitte Das kennen wir schon ein bisschen. Sie können dieselbe Tastenkombination für das Padding verwenden. Ich kann also den Abstand auf dieser Folie herausziehen, aber ich kann sie alle dort mit 19 jetzt machen , was keine gute Zahl ist Okay, also ich werde meine Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt halten und eine dieser Überschriften ziehen Du kannst sehen, dass es sich hebt und nach rechts bewegt, was praktisch ist, ich kann es auf etwa 16 bringen , da will ich es Aber wenn ich die Wahltaste und die Umschalttaste gedrückt halte, lassen Sie uns Alt und Shift auf einem PC machen, sie alle gleichzeitig ausgeführt. Schau dir das an. Nett. Oder ich wollte 16 sein. Da haben wir's. Eine Sache, die mir dabei aufgefallen ist, ist, dass draußen der Himmel wahrscheinlich am Boden kleben und seine Größe ändern möchte am Boden kleben und seine Größe ändern sobald er dort eingepackt ist. Standardmäßig ist also alles in meinem automatischen Layout auf gepackten Speicherplatz dazwischen eingestellt. Du kannst dir vorstellen , dass das kleine Vorschaubild da es irgendwie ausbreiten wird Wenn ich hier runter gehe, bedeutet gepackt, dass es versucht , alles oben oder links reinzudrücken, je nachdem, was hier steht , waagerecht oder vertikal Wenn Sie es auf Abstand zwischen umstellen, versucht es einfach, es auszudehnen, um den dafür vorgesehenen Platz auszufüllen, und wechselt auf Auto. Es funktioniert nur für Boxen mit fester Höhe. Denn wer erinnert sich, sobald ich gehe, wie ich das dazu bringe, hochzuspringen und Inhalte zu umarmen? Du erinnerst dich, wir doppelklicken auf den Rand. Es wechselt von Hören zu Umarmen, wodurch es auch wieder auf Pact umgeschaltet wird, um Nein zu sagen Wenn du ihm eine feste Breite gibst, aber wenn du ihm eine feste Höhe gibst, kannst du es dann auf Abstand umstellen , viele Leute machen das einfach. Sie tippen einfach der Reihenfolge nach. Da gibt es keinen Bonus. In Ordnung, das sind also die Abkürzungen. Außerdem haben wir ein paar Emojis, die unten kleben. In Ordnung, wir sehen uns im nächsten Video. 135. So erstellst du einen Button für die Höhe der Mindestbreite in Figma: Hallo alle zusammen. In diesem Video werden wir uns die Mindest - und Maximalgrößen in Figma ansehen - und Maximalgrößen in Figma Also muss ich hier klicken, es ist ein automatisches Layout. Wenn ich es kleiner mache, kann es irgendwann nicht kleiner werden, es wird auf die Mindestbreite. Und genauso kann ich viele Sachen tippen und irgendwann wird es nicht größer. Es heißt Min- und Maximalbreite. Ideal für Dinge wie Schaltflächen, aber Sie können es für alles verwenden solange es ein automatisches Layout gibt. Lass mich dir zeigen, wie man es macht. Hallo alle zusammen. Dies ist ein aktualisiertes Video , da sie gerade ein besseres Min-Max veröffentlicht Dafür gab es schon einmal einen Hack, sodass die Dinge vielleicht ein bisschen anders aussehen. Also, was wir machen, ist wie Normal, eine automatische Layout-Schaltfläche kann sehr klein oder sehr groß werden. Also wollen wir das Minimum und das Maximum hinzufügen, um das zu tun. Tun Sie es nicht mit dem Textfeld, weil das übergeordnete Element eingegeben wurde, aber Sie können einen umgekehrten Schrägstrich Du verstehst also, dass der Elternteil hier das Autolayout gegeben hat und dir ein automatisches Layout ausmacht? Ja. Okay. Und das neue Budget ist hier drüben, unter Breite, da ist jetzt dieser Dropdown, okay? Und du kannst Min und Max hinzufügen. Das ist alles. Achte nur darauf , dass es draußen und nicht im Textfeld und im Inneren Okay, fügen wir ein Minimum hinzu. Was solltest du mindestens B, es liegt an dir. Das ist ziemlich üblich, dass 44 Pixel eine minimale Tastengröße sind. Und 32 für eine Ikone. So wie die Leute in der Lage sein müssen , es zu berühren, besonders auf einem Telefon Großartig, schauen wir uns das Maximum an. Also los geht's Dropdown deckt das ab. Gehen wir zurück zur Breite und sagen, fügen wir eine maximale Breite hinzu. Wie groß? Ich verwende nur ein Vielfaches von Acht. Ich habe keine Ahnung, was eine gute Größe für einen riesigen Knopf ist, aber 160 scheint ungefähr richtig zu sein. Jetzt. Ich kann anfangen zu tippen und es wird weitergehen und irgendwann kaputt gehen. Okay, wir haben also eine maximale Größe, was großartig ist. In Ordnung, geben wir unseren Text ein. Und ich möchte dich nur darauf aufmerksam machen , dass ich mir einen Rahmen schnappe und etwas zeichnen werde , das ungefähr die gleiche Größe Da haben wir's. Und was Sie feststellen werden , ist, dass, wenn sie die Breiten auf Minimum und Maximum einstellen, sie die Polsterung mit einbeziehen. Okay. Sie können dort sehen, dass das 44 ist, als ob mein Minimum da war, aber der Schlagschatten ist nicht enthalten. Der Schlagschatten hier ist, ich habe gerade etwas Ausgefallenes gemacht. Und naja, es sind nur zwei mal zwei Pixel mit nobleren, wiederum bekommt man einen wirklich quaderförmigen Schlagschatten, aber nicht in den Rahmen aufgenommen Die andere Sache, die zu beachten ist , ist, dass es ihm eine Füllfarbe gibt. Ich bin mir nicht sicher, warum Garfield Farbe hat, aber dieser hier, ein Rahmen kann momentan kein Minimum und kein Maximum haben Weder ein einfaches altes Textfeld noch ein Rechteck Es muss ein automatisches Layout sein, was hier diese Option ist. Vielleicht kannst du ein automatisches Layout sein. Jetzt kann ich das Dropdown für Min-Max haben. Eine andere Sache, die Sie tun können weil es sich um den Kurs für Fortgeschrittene handelt, ist, ihn auf eine bestimmte Größe zu ziehen. Sie haben bereits vorhandene Schaltflächen in Ihrem Design. Es gibt bereits die richtige Größe. Was Sie tun können, ist bis hierher zu gehen und sicherzustellen, dass es ein automatisches Layout ist. Dann kannst du unter Breite sagen, ich füge eine Mindestbreite hinzu, setze sie wieder nach unten und sage, setze sie auf die aktuelle Breite, was auch immer du hast. Okay, das verwendet also die vorhandenen Abmessungen für die Breite. Und du kannst dasselbe für Max tun. Und Sie haben eine, die nicht breit ist, aber die Höhe funktioniert offensichtlich genauso. Und wenn du so fragst, was sind das für Diamanten , die in dem Kurs waren und Dan hat sie nicht erwähnt. Die Art von Neuem. Schauen wir uns einen Frame an. Ich werde diese später in dem Kurs Variablen behandeln . Okay, es ist eine neue Sache und dazu gibt es später im Kurs einen ganzen Abschnitt . Kommen wir also zu den kleinen Sechsecken, die keine Diamanten sind. Du sagst, das ist die Mindest- und Maximalgröße in Figma, der neuen Version, eine kleine Randnotiz ist, wie lange es gedauert hat, dieser Teufel, der Kurs kommt in etwa 10 Stunden heraus , weil er noch nicht einmal veröffentlicht wurde und die neuen Updates haben mich dazu gebracht, das Min-Max-Video erneut aufzunehmen Gute Arbeit. Figma, ihr wartet bis ich Sachen aufgenommen habe, und dann geht ihr und ändert sie Wie dem auch sei, es ist jetzt auf dem neuesten Stand. Genieß es. Ich gebe dich an den normalen Dan weiter , den du kennst und liebst. I'm Future Dan hat den irregulären Dan ausgewählt von 136. Umschließt Auto-Layout-Objekte in Figma: Hallo alle zusammen. In diesem Video schauen wir uns das Verpacken von Autolayouts an Okay, ich habe diese kleinen Pillen hier, da drinnen und das automatische Layout, das aussieht, als ob die Mitarbeiter in der Passage oben, direkt nach unten gegangen sind Jetzt können wir wickeln. Aufregend. Lass mich dir zeigen, wie es geht. Ordnung, also die Verpackung, die ich gerade gemacht habe, und das automatische Layout enthält einige Häkchen, die sich ausdehnen und zusammenziehen Ich möchte sie in einer netten kleinen Gruppe zusammenfassen, okay, also werde ich sie alle auswählen, all meine kleinen Autolayouts, sie in ihr eigenes Autolayout setzen und sie alle am Schichttag einreiben einreiben Und die neue Version von Figma ist tatsächlich verpackt. Oder standardmäßig ist in der Vergangenheit dies und das passiert . Okay, also machen wir es mit Absicht. Wir sagen, packen wir sie ein, egal wie groß sie und was das Coole daran ist. also das Wickelsymbol. Wenn ich es ziehe, ist also das Wickelsymbol. Wenn ich es ziehe, können Sie sehen, dass es sich ausdehnt und zusammenzieht, je nachdem, was da hineinpasst. Das könnten Bilder sein. Ich habe diese kleinen Pillen mit Hashtags gemacht. Es liegt ganz an dir. Könnte aus irgendeinem Grund in die Standardeinstellung geraten sein, da ich am Boden hängengeblieben Doppelklicken Sie auf den Boden , um es zu umarmen, und los geht's. Wenn du so etwas wie diese Hashtags machen willst, dass wir im letzten Videozug Minmax gelernt haben , das könnte nützlich sein Also drücke ich die Eingabetaste auf meiner Tastatur, um in mein Autolayout einzutauchen und sie alle in einer großen Gruppe auszuwählen Ich habe dir im letzten nicht gezeigt, wie das geht. Ich kann sagen, dass alle einen Maximalwert von haben, sagen wir mal, es geht nicht zu verrückt und schief Diese Hashtag-Horde, die wir entworfen haben, ist oder ist in zwei Zeilen aufgeteilt, nur um die maximale Breite dieser Zeilen einzuschränken . Da hast du's. Das ist das Einpacken von Ordnungslayouts. Dies ist ein neues Update-Video. Sie sind vielleicht schon darauf gestoßen , aber das Ego wickelt absichtlich In Ordnung, wir sehen uns im nächsten Video. 137. Was bedeutet Strich-Include-Ausschluss im Auto-Layout von Figma: Hallo zusammen, in den erweiterten Einstellungen für das Autolayout gibt es dieses Ding namens Es ist im Layout enthalten, in laut ausgeschlossen. Was bedeutet das? Lass mich dir zeigen, was ich meine, lass mich dir zeigen, was ich meine. Ich habe dieses Autolayout unten gemacht. Okay. Es besteht aus zwei Teilen, diesem Textfeld. Okay, wenn ich darauf doppelklicke, siehst du dieses Textfeld Es ist ein bisschen schwer zu erkennen, lila und lila, aber können Sie den Button direkt neben diesem Modul sehen, das ich für Frühaufsteher gemacht habe. Okay, es gibt keinen Platz zwischen ihnen. Okay, und lassen Sie uns diesem Early-Bird-Modul einen Strich hinzufügen. Ich sage, du hast da einen Schlaganfall und lass uns ihn richtig groß machen. Okay. Lass es uns außen anmalen. Kannst du sehen, dass es nichts mit diesem Text gemacht hat. Das Autolayout schließt den Strich einfach aus, ignoriert ihn einfach. Nun, normalerweise ist das bei einem großen Schlaganfall wie diesem in Ordnung. Es macht tatsächlich ziemlich viel physische Distanz aus und vielleicht möchten Sie , dass Ihr Abstand an andere weitergegeben wird . Autolayout, um den Strich tatsächlich mit einzubeziehen , wenn das Layout ausgeführt wird Um das zu tun, wählen wir die übergeordnete Schicht in, okay, und gehen wir zu Autolayout Gehen wir zu den Erweiterten Einstellungen, und genau das ist es. Striche eingeschlossen oder ausgeschlossen. Sie können sehen, wann es enthalten ist, es ändert es ziemlich, vielleicht ist es genau das, was Sie brauchen. Nun, das ist ein gutes Beispiel für einen 10-Punkte-Schlag. Was am Ende passieren könnte, ist, sagen wir, Sie entwerfen etwas, das nur einen Ein-Punkt-Strich hat, okay? Und du hast alles aufgereiht und es schließt es aus. Okay. Es ignoriert also den Schlaganfall, den Sie Ihrem Ingenieur gegeben haben Sie kommen zurück und sagen, ich habe es genau so angeordnet, wie du es in Figma entworfen hast, du sagst, nein, das tut es nicht, es passt nicht perfekt zusammen Was bei der Webentwicklung oder App-Entwicklung passiert , dass die Entwicklerin, sie muss den Schlaganfall tatsächlich einbeziehen. Es gibt keine Möglichkeit, das auszuschließen. Es. Könnte nur ein bisschen anders sein. Du kannst das also nachahmen. Und in Figma, indem ich sage, Schlaganfall einbeziehen Für einige von Ihnen wird das sehr wichtig sein und für viele Menschen wird es das nicht sein. Aber das ist die Fortgeschrittenenklasse. Das macht das Ding. Aber jetzt weißt du es, in Ordnung, lass uns mit dem nächsten Video weitermachen. 138. 137 Benutzerdefinierter Abstand: Hallo zusammen, haben Sie ein automatisches Layout, aber Sie benötigen einen benutzerdefinierten Abstand zwischen einigen von ihnen. Haftungsausschluss Bei der Aufnahme dieses Videos gibt es keinen offiziellen Weg, es gibt Hacks Es gibt drei davon. Sie funktionieren alle irgendwie. Fangen wir mit dem Einfachsten an. Okay, lass es uns zuerst mit Text machen. Wenn Sie ein bisschen Text haben um daraus eine Komponente zu machen, werde ich ihn duplizieren Befehl oder Steuerung DDD. Lass uns fünf nehmen. Ich ändere den Text. Du wartest dort. Okay. Ein Haufen Text. Machen wir ein automatisches Ausschalten draus. Jetzt können wir den Abstand anpassen, aber der Moment spielt keine Rolle, was Sie gedrückt halten. Im Moment können Sie keine separate Polsterung vornehmen. Es ist eine dieser anderen Funktionen, von denen ich das Gefühl habe, dass so viele Leute Hacks dafür machen, dass sie bald verfügbar sein wird In Ordnung, Hack eins ist, dass ich diese Instanz hier drin habe. Ich möchte einen Abstand zwischen diesen beiden haben, oder? Ist es tatsächlich auf eine feste Höhe eingestellt? Ich kann also sagen, dass meine Tickets größer sind und Sie dort Platz haben können. Da hast du's, hacke eins. Aus irgendeinem Grund ist mein Autoout auf eine feste Höhe eingestellt. Denken Sie daran, wie Sie es auf den Rand doppelklicken, okay, damit es sich leicht umarmen Also das ist Hack Nummer eins. Das werde ich rückgängig machen, das funktioniert meistens. Eine weitere und sehr verbreitete Methode ist die Verwendung eines unsichtbaren Rahmens. Okay, ich stelle die Höhe ein, die du willst, das ist gut genug für mich. Welche Höhe auch immer das ist, 88. Perfekt. Ich bin versehentlich über ein Acht-Punkte-Pixelraster gestolpert. Okay. Und es hat keine Füllung, keinen Strich, aber ich kann es trotzdem ziehen und hineinlegen und es hält den Raum wieder in Schwung. Ich muss darauf doppelklicken, um zu Hug zu gelangen. Und dann kannst du das einfach verwenden, okay, um deinen Abstand zu bestimmen. Denken Sie daran, dass Shift eine wirklich gute Gliederungsansicht ist , sodass Sie sie dann etwas besser sehen können. Du musst das immer noch für die Polsterung berücksichtigen, okay? Wenn du also 88 haben willst, hast du ein Minus, was auch immer dein Abstand dazwischen ist, ist minus 2201, was nicht toll ist Sagen wir, es ist 16. 16 unten, 16 oben, plus was in der Mitte ist Das wird mir meinen Abstand geben. Stimmt damit etwas nicht? Nein, nicht wirklich. Du kannst es mit einem Hack von früher verknüpfen. Sie können auf diesen unsichtbaren Rahmen K klicken, die Befehlstaste oder die Steuerungstaste gedrückt halten Denken Sie daran, dass rauf und runter die Höhe nach oben und unten geht , und Sie können es einfach in Gang bringen Wenn Sie die Umschalttaste gedrückt halten, ist das in Schritten mit acht Punkten erledigt. Praktischer Hack Nummer drei. Wir können sagen, ihr drei seid in einer automatischen Schicht, ihr seid auch in einer automatischen Aus-Schicht A. Okay? Ich habe also den übergeordneten Rahmen, aber ich habe auch diese beiden Dinge im Inneren. Und wir haben uns das vorhin angesehen. Wenn ich den übergeordneten Frame nehme und ihn größer mache, passiert wirklich nichts. Warum? Weil sie da drin gepackt sind. Denken Sie daran, dass es unter den erweiterten Auto-Out-Einstellungen eine Option für automatische Ausgänge gibt. Und statt zu packen, können wir in den Zwischenraum gehen. Okay, und wir werden versuchen, sie zu verteilen, alle zusammen. Nur zur Erinnerung, dass sie die Erinnerung von vorhin verschoben haben ? Okay. Also war es früher hier unten. Okay? Wird Leerzeichen dazwischen genannt. Jetzt ist es nur noch so, wenn Sie den Mauszeiger über den vertikalen Abstand bewegen. Okay, die Lücke zwischen diesem hier, da ist ein kleines Drop-down-Menü und es heißt jetzt einfach Auto Okay, bitteschön, führe es aus. Und diese Typen sind irgendwie in ihren eigenen Autolouten gefangen , okay? Und es entsteht eine riesige Lücke in der Mitte. Dieser ist praktisch, weil er versucht, sich selbst nach unten zu zwingen. Je nachdem, was Sie tun, könnte das in Ordnung sein, wenn Sie es ganz unten haben möchten. Wenn Sie jedoch eine einheitliche Größe haben möchten, sollten Sie sich das unsichtbare Rechteck ansehen oder einfach die Größe dieses Rahmens vergrößern und die Figma-Updates im Auge behalten Ich werde dieses Video aktualisieren, wenn ich einen neuen Weg finde , wie Figma das macht, aber wähle vorerst einen der Ordnung, das ist es. Benutzerdefinierte Abstände in oder Layouts in Figma Erledigt. Ich werde es im nächsten Video sehen. 139. So organisierst du Komponenten in Gruppen in Figma: Hallo alle zusammen. In diesem Video schauen wir uns an, wie wir unsere Komponenten in Gruppen organisieren , die wir bereits angesprochen haben , um es irgendwie klarer zu machen Wir werden diese externe Designbibliothek verwenden, okay, ein anderes Dokument, und wir werden sicherstellen, dass alles gut in verschiedene Abschnitte gruppiert ist . Es gibt zwei Möglichkeiten, dies zu tun. Lassen Sie mich Ihnen den alten, perfekt guten Weg und den neuen, perfekt guten Weg zeigen . In Ordnung, lassen Sie uns loslegen, richtig, lassen Sie uns anfangen, unsere Komponentenzähmung aufzuräumen In dem Moment, als wir eine Mischung aus der Benennungskonvention mit Schrägstrichen hatten und Sections Plus zu verwenden begannen, begannen wir , unsere anderen Dokumente zu verwenden , um unsere Hauptstile zu speichern Lass mich dir die beiden Wurzeln zeigen und du kannst entscheiden, welche du tun möchtest, ist unsere Emojis aufzuräumen, okay Das sind meine Hauptbestandteile hier. Ich werde sie ausschneiden, okay, vielleicht musst du sie ausschneiden, wir werden sie in ein anderes Hauptstildokument verschieben . Wir werden sie einfügen, um sicherzustellen, dass die Verbindung funktioniert. Wir halten Option drei und einen Mac gedrückt , Alt drei und einen PC. Und wir werden diese vier Änderungen veröffentlichen. Diese Emojis sind umgezogen. Dadurch wird sichergestellt, dass dieses Originaldokument richtig und dann die Benennung zwei Optionen Wir können all diese Typen auswählen. Anstatt Emoji Smile zu nennen, was von den eigentlichen Dateinamen selbst herrührt, können wir es umbenennen, wobei viele von ihnen Wir können Command oder Control R gedrückt halten . Wir werden sagen, dass Emoji durch Emojis mit einem Schrägstrich ersetzt wird sagen, dass Emoji durch Emojis mit einem Schrägstrich ersetzt wird. Und wir werden Leerzeichen verwenden. Sie müssen es nicht umbenennen. Das, veröffentliche es. Also weiß irgendwie alles, was vor sich geht. Und das heißt, jetzt zurück zu diesem Originaldokument, wenn ich meine Schicht gedrückt halte, denke ich, Sie an meine Komponenten. Schauen wir uns das Dokument an, das wir mit diesem Dokument geteilt haben. Okay, das sind unsere Hauptstile. Sie können sehen, dass sich das Emoji in seinem schönen kleinen Ordner befindet. Da sind sie alle zum Slashen ist geil. Was jetzt immer beliebter wird, ist einfach einen Abschnitt zu verwenden, den wir zuvor in Abschnitten erstellt haben. Denk an das Versteck hier, Shift S, zeichne einen Abschnitt. Und ich werde diesen einen Befehl oder eine Steuerung nennen, das nenne ich Emoji Was ich mit diesen Leuten machen kann, ist, dass ich sie umbenennen und sagen kann , wo Emoji, Emoji-Leerzeichen, Schrägstrich Ich ersetze es durch nichts und lasse einfach Umbenennen Es wird all diese Emojis entfernen und dann kann die Benennung aus diesem Abschnitt erfolgen Es hat diese veröffentlicht. Okay, gehen wir zurück zum Original und schauen wir uns die Bibliotheksschicht an. Ich liebe unsere Hauptstile und du kannst hier sehen, das Gleiche passiert, okay, ich habe diesen Emoji-Ordner Es sieht genauso aus. Okay. Und sind da drin, warum ist das besser oder schlechter? Es ist geringfügig besser. Das heißt nur, wenn ich sage, dass ich einen Button-Bereich habe, muss ich nicht alles benennen. Ich kann einfach in Schicht S gehen. Dieser wird Button heißen. Diesen Knopf und wirf ihn einfach rein. Ich muss es nicht umbenennen. Ich habe ein paar Icons hier unten. Sie haben diese Namenskonvention, Schrägstrich, ich werde es von Command or Control auf einem PC entfernen Command or Control auf einem Ich werde sagen, dass der Schrägstrich durch nichts ersetzt wurde. Shift S für einen Abschnitt. Befehlen wir R, ziehen dieses Symbol und dann schnappen wir uns diese Typen und werfen sie rein. Es ist viel einfacher, sie von einem zum anderen zu bewegen. Denn wirklich dieses Ding , das es wahrscheinlich nicht gibt , könnte am Ende einen Abschnitt mit Schlagwörtern haben und ich kann einfach diesen Emoji-Abschnitt ziehen, okay, und er benennt ihn um und ordnet ihn in all den verbundenen Dokumenten neu an , die auf diesen Stil verweisen, in diesem Da hast du's, der Thron rein. Und es Doppelklicken Sie auf die Kante, um sie alle hineinpassen zu es in eine feste Form zu bringen. Okay, aber nun zu diesem Teil dieser Schaltflächen-Unterkategorie, kannst du noch weiter gehen, indem du eine strichförmige Namenskonvention verwendest. Angenommen, Sie haben diese, aber Sie haben zwei Versionen. Es gibt eine solide und eine, die skizziert ist. Dies sind skizzierte Versionen , von denen eine ein bisschen von beidem ist. Aber nehmen wir an, ich gehe jetzt zu Command R und ich sage, dass dieser durch einen Schrägstrich und dann durch den aktuellen Namen ersetzt wird Schrägstrich und dann durch den aktuellen Namen ersetzt Okay, ich habe hier etwas mehr Tiefe, aber das Elternteil ist von Icons. Und ich kann mit dieser Slash-Namenskonvention hier ins Gras gehen . Lass uns veröffentlichen. Ich werde alle Änderungen überprüfen. Im Grunde sind sie einfach umgezogen, lassen Sie uns sie alle akzeptieren. Und jetzt Shift, ich sehe die Codomain-Stile und -Icons hier Ich habe noch dieses zusätzliche Level vor mir, um zu Outline zu gehen. Okay? Und dann habe ich hier vielleicht eine solide Version. Ich hab's dir gezeigt. Das liegt hauptsächlich daran, dass die Leute im Moment nur die Namenskonvention verwenden und dann hier nur Frames für diesen äußeren Wrapper verwenden Durch die Einführung von Abschnitten können wir Dinge ganz einfach gruppieren und sie von Abschnitt zu Abschnitt verschieben , anstatt Dinge umbenennen und gruppieren und umbenennen zu müssen , bis Sie Ihre Komponenten aufräumen möchten. Sie werden beide sehen und gelegentlich sehen Sie dies, wo es einen Schrägstrich im Symbol gibt, aktueller Name Okay, jetzt haben sie also eine Lupe mit Schrägstrich und Umrissstrich Aber weil sie in diesem anderen Ding , nennen wir es Icon. Wirf ein bisschen verwirrend, nicht verwirrend, aber hier drüben veröffentlichen wir jetzt. Rückblick. Lass uns alles aktualisieren. Wenn ich nun zu meinen Komponenten gehe und zu meinen Hauptstilen gehe, können Sie sehen, dass ich ein Icon Plus-Symbol plus Gliederung habe. Spielt nicht wirklich eine Rolle. Aber genau das passiert, wenn Sie eine Mischung aus der vollständigen Benennung aus Schrägstrichen und den Abschnitten darüber verwenden der vollständigen Benennung aus Schrägstrichen und den Abschnitten Ich werde die entfernen. Rückgängig machen und veröffentlichen. Jetzt muss ich mein Dokument durcharbeiten und die Ressourcen durchgehen und alles finden, was lokal verwendet wird, ein Zuhause dafür auf meiner Hauptkomponente finden und ein Zuhause dafür auf meiner Hauptkomponente finden sie in den richtigen Bereich stellen. Oder wenn Sie kein separates Dokument verwenden , haben Sie es auf einer separaten Seite und verschieben Sie sie einfach alle auf diese andere Seite, in einen Abschnitt mit einem Schrägstrich. In Ordnung, das ist es. Ich werde es im nächsten Video sehen. 140. So erstellst du Platzhalterkomponenten in Figma: Hallo alle zusammen. In diesem Video werden wir eine Slot-Komponente erstellen. Was macht es? Im Grunde haben wir etwas, das wir immer wieder wiederverwenden werden. Als ob sich die Außenseite dieses Modals über diese abgerundeten Ecken erstreckt, gibt es einen Schlagschatten Anstatt zwei oder 100 verschiedene Popup-Modals oder viele der gleichen Elemente zu teilen Und wenn du anpassen musst, sagen wir das Kreuz, aber wenn du einen Teil davon anpassen musst und dann, wenn du einen Teil davon anpassen willst , musst du gehen und sie alle anpassen. Was wir tun können, ist etwas zu erstellen, das einen Platzhalter-Slot in der Mitte hat, diesen hier, dann können wir einige bevorzugte Instanz-Swaps zuweisen, okay, damit die Leute das durchgehen und einfach die Mitte ändern können einfach die Mitte ändern Es wird die Leute davon abhalten, hinzugehen und zu denken , okay, ich muss das ein bisschen ändern Also werde ich es auseinandernehmen und eine weitere Instanz erstellen, in der alles fehlt. also eins von Grund auf neu bauen, werden wir uns zusammen ein bisschen verirren. Wir reparieren es wieder. Dann haben wir diese süße Slot-Komponente bei der sich nur der Mittelteil ändert, nicht die Hülle In Ordnung, springen wir rein und machen es. In Ordnung, ich habe also zwei separate Modals. Ich habe einen modalen Abschnitt für diese Leute erstellt. Okay? Und was ich tun werde, ist, dass ich es zuerst so einrichten möchte, dass hier nur etwas drin ist, und dann werde ich es hinterher gegen den Platzhalter austauschen , weil ich echten Inhalt haben möchte und er vielleicht dazu verwendet wird , das Padding und so etwas richtig zu machen Damit das funktioniert, muss der Elternteil ein Befehl sein, durch lautes Verschieben wird er zu einer Komponente, weil wir es dafür verwenden. Jetzt ist es in Modals. Ich nenne das Popup. Dieses Fadenkreuz. Ich sage, Sie befinden sich absolut in einer Position, in der ich Sie belauschen werde. Ich werde sicherstellen, dass du oben rechts bist. Jetzt die Polsterung, ich werde sie rundum erhöhen. Wer erinnert sich an die Abkürzung? Würden Sie dort den Mauszeiger darüber bewegen und die Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt halten, stellen Sie sicher, dass Sie vorne herausgezoomt sind, damit Sie die Linie tatsächlich bekommen, halten Sie auch die Umschalttaste gedrückt Und es wird für alle Seiten funktionieren. Ich gehe, die Maske kann ziemlich groß sein. Ich gehe auf 40, erinnere mich an Vielfache von Acht. Ordnung, also was ich jetzt tun werde, ist, dieses Zeug zu holen und es herauszuholen Okay, ich werde es hier unten herausziehen. Und hier drinnen werde ich eine Steckplatz-Komponente einbauen. Die Slot-Komponente muss eine eigene Hauptkomponente sein. Wir wissen, dass Hauptkomponenten nicht in anderen Hauptkomponenten leben können. Also sage ich Frame, ich gehe zu Control oder Command R und ich rufe diesen auf meinem Slot auf. Jetzt kannst du es nennen , wie du willst. Dafür gibt es keine offiziellen Regeln. Aber die meisten Menschen TUN es, nur weil sie es versuchen werden. Sie werden den Strich rosa machen. Und sie gehen zu den Erweiterten Einstellungen und ändern es von Solid auf Dash. Das musstest du nicht tun, aber jeder scheint es zu tun. Muss es gefüllt werden? Das kann es. Welche Größe sollte es haben? Es ist nicht wirklich wichtig, weil es etwas umgestellt wird , um unser Modal offen zu halten, wenn es es umarmt Das muss also eine Komponente sein. Also verwende ich meine Tastenkombination Command Option K Control Alt Taste auf einem PC. Nur zur Erinnerung, und ich ziehe eine Instanz davon, okay, hierher, um näher darauf einzugehen und sicherzustellen, dass dieses Popup-Modal in beide Richtungen passt Jetzt werden wir die Teile herstellen, die darin enthalten sind. Sie brauchen kein externes Chrome oder dieses Modal, okay, diese Leute hier müssen nur Komponenten sein Wir werden den Instance Swap verwenden. Also müssen wir daraus einen Komponentenbefehl R machen . Er ist im modalen Abschnitt Das wird also eine E-Mail-Anmeldung sein. Dieser hier drüben. Ich brauche das Modal Okay. Das war nur für Design da, weil ich dort hineinwechseln wollte. Dieser heißt Löschen. Ja, sind wir nicht. Du kannst Modals kommen Lass uns groß genug werden. Du wirst auch hier reinkommen. Stellen Sie sicher, dass es eine Komponente und der Slot ist, wir werden das wahrscheinlich woanders aufbewahren , weil es nicht sein wird Sie können das in allem verwenden, was wir für modale Zwecke verwenden, Sie können jedes Element K verwenden. Wird das funktionieren Lass es uns testen. Ich kenne die Hauptkomponente wir hier benötigen, um die Eigenschaft hinzuzufügen Denken Sie an Instance Swap zu Beginn des Kurses. Also diese Komponente hier, ich sage unter Eigenschaften, wie du weißt, werde ich sie für diesen Slot machen. Wählen Sie also den Steckplatz darin aus. Ich würde einfach Slot sagen. Ich möchte, dass du Instance Swap sein kannst. Was will ich? Ich möchte, dass Sie nicht alles mit den bevorzugten Werten austauschen können , sondern nur mit meiner süßen Modals-Option Und ich möchte einfach löschen und mich anmelden. Mach das zu. Wird es jetzt funktionieren? Wechseln wir zur Option Meine Asset-Bibliothek um einen Blick auf unsere Komponenten zu werfen, für die wir Modals haben Wir sagen, ich möchte dieses Pop-up in diesem Dokument hier haben, gehe hinein, wähle auf dem Slot aus und sage, ich würde es gerne ändern. Pausiere das Video, stearate für eine Weile, realisiere meine bevorzugten Werte auf, in ihrem, realisierten, was ich getan habe im Kurs enthalten, weil es dir wahrscheinlich passieren wird Ist ich gegangen und habe all das ganze Zeug gemacht. Instanzentausch. Und ich habe eine Liste erstellt und auf Kreuz geklickt, anstatt Eigentum zu erstellen. Tu das nicht. Okay, lassen Sie uns das reparieren. Also ich sage, du und du gründen Eigentum, nicht Kreuz. Jetzt sollte ich in der Lage sein, auf mein übergeordnetes Modal zu klicken, okay? Und sie sind als Instanz drin, tausche K mit einigen bevorzugten Werten aus, okay, und ich kann das jetzt gegen das austauschen was jeder will, außer dass der kaputt ist. Tolle Arbeit. Dann hast du die Idee. Lassen wir das, sie ignorieren das. Okay, es schaltet das tatsächlich auf das andere um. Das ist das Ziel, dass ich jetzt die volle Kontrolle über das Popup-Modal und die Elemente habe , die für viele verschiedene Dinge generisch sind Wenn ich zurückkomme und sage, dass ich tatsächlich die Polsterung anpassen muss Okay. Ich kann es mit diesem machen. Okay. Und sie passen sich alle an. Ich muss nicht gehen und das Team anpassen. Verschiedene Modals, die ich für Popups habe. Sie können mehr als einen Steckplatz haben. Wir haben hier gerade einen gemacht. In Ordnung, lass uns herausfinden, was mit diesem schief gelaufen ist. Ich glaube, ich weiß, was es ist. Dies ist kein automatisches Layout. Es sind nur zwei Bits in einer Komponente und sie werden hier und in Autolayouts hineingeworfen Das Autolayout bringt sie einfach zusammen . Also werde ich sagen, wie du Komponente bist, aber auch laut eine Reihenfolge verschieben. Hoffentlich hier drüben, wenn ich das wechsle, musst du es sein. Da haben wir's. Okay, das ist eine Slot-Komponente und wie man sie auf verschiedene Arten zerlegt und wieder repariert. Die großen Dinge, die Sie auffallen werden dass die Dinge darin, einschließlich dieser, eine Komponente und ein automatisches Layout sein müssen eine Komponente und ein automatisches Layout Und weil sie Hauptbestandteile sein müssen, können sie nicht in diesem Original enthalten sein. Du musst sie nach draußen bringen und ein Exemplar von ihnen mitbringen. Und wenn du dann bereit bist, klicke auf die Instanz, die du tauschen möchtest, okay, in unserem Fall den Slot, mach die Eigenschaft Instanzentausch, achte darauf, dass wir Eigenschaft erstellen drücken und nicht kreuzen. Die andere Sache, die wir tun könnten ist, diesem Slot etwas Text hinzuzufügen, oder ist es okay, also könnten wir in diesen Slot gehen, den Text TO nehmen und ihn S1-Platzhalter-Slot nennen, nur damit die Leute, wenn sie ihn benutzen, sie ein bisschen scharf darauf sind , was wir Du bekommst hier alle möglichen Notizen. Ich denke, wir werden es veröffentlichen, bevor wir gehen , weil ich es hier wieder verwenden möchte. Okay, also ich bin in dieser Art von Hauptstildesign-Datei. Ich habe alle meine Komponenten. Ich wähle Option drei, Alternative drei und einen PC. Lassen Sie uns all die Dinge veröffentlichen, die wir getan haben. Und weil wir diese Design-Datei bereits verbunden haben, sollten wir in der Lage sein, Option eins, Option bis, um zur Essenz zu gelangen, oder Sie können hier nach oben gehen. Und schauen wir uns das an, nicht die lokalen Komponenten. Werfen wir einen Blick auf die wichtigsten Stile und Arten von Denkmälern, es gibt sie. Es hat das Popup gepackt Dann kann ich oder jemand , der mit meinem Designsystem arbeitet , das durchgehen und sagen, dass ich tatsächlich löschen möchte. Eigentlich nein, ich brauche die E-Mail-Anmeldung. Es ist ein bisschen groß, Dan, du gehst, in Ordnung, das ist es. Wir haben eine Platzhalter-Swap-Komponente erstellt. Wir sehen uns im nächsten Video. 141. Wie man eine bestehende Website in ein Figma-Design umwandelt: Hallo alle zusammen. In diesem Video schauen wir uns ein wirklich cooles Plugin an. Wir schauen uns die EPA-Website an. Schauen wir uns eine Figma-Datei an , Outline View ist eine Figma-Datei Wird es Text editierbar sein. Wofür ist es gut? Es ermöglicht uns, jede URL einzugeben und es wird sein Bestes geben , um sie in eine Figma-Datei zu konvertieren Ideal für Projekte , bei denen Sie nicht am ursprünglichen Design beteiligt waren . Vielleicht wurde es nicht einmal in Figma entworfen. Vielleicht war es Photoshop oder Illustrator oder Microsoft Paint, etwas anderes. Und du musst anfangen, Pods neu zu erstellen. In diesem Video schnappen wir uns den Knopf dort. Wir machen daraus ein cooles Fotolayout, konvertieren es in Komponenten und beginnen, es in unserem Prozess zu verwenden. Es ist auch sehr praktisch, um Bilder auszuleihen, Farben , Symbole, Logos, allgemeine, alle Realm coole Fondstool, die Tools namens HTML zum Entwerfen herauszunehmen Logos, allgemeine, alle Realm coole Fondstool, die Tools namens HTML zum Entwerfen Und lassen Sie mich Ihnen zeigen, wie man damit arbeitet. In Ordnung, um loszulegen, ich habe nur ein leeres Dokument. Es ist und Entwürfe Ich öffne das Plugin. Das, was Sie suchen, ist etwas namens HTML to Design. Klicken Sie auf Ausführen. Es gibt eine kostenlose und eine kostenpflichtige Version. Ich werde die kostenlose Version durchgehen , die mir jetzt zur Verfügung steht. Wahrscheinlich hat sich das geändert , wenn du dazu kommst. Ich werde apple.com verwenden. Sie können eine beliebige URL eingeben. Sie können es fragen, wann es Hühnchen ist, die Website nach dem Hell- oder Dunkelmodus zu fragen und welche Größe? Das kommt nicht direkt von Apple. Es heißt nur, nun, möchtest du, dass wir versuchen , eine Version in Tablet-Größe davon zu laden? Hat Ihre Website eine Version mit Tablet? Hat Ihre Website die Größe eines Tablets? Das tut es. Nun, zumindest Apple tut das. Okay, wählen Sie das aus, klicken Sie dann auf Importieren und Sie können eine beliebige URL eingeben. könnt hier sehen, dass einige der Upgrades für Pro, aber wir können viele bekommen, solange wir sie brauchen und die kostenlose Version im Moment. Je nachdem, ob Sie die Schriftarten haben , wie wir sie uns zuvor angesehen haben, können Sie die Schriftarten herunterladen, wenn Sie sie benötigen. Okay, ich habe ein paar von ihnen und habe die Helvetica, die ich brauche Und jetzt musst du dich darauf vorbereiten, weil es unglaublich ist und dann gibt es Dinge, die nicht großartig sind die nützlich wären, wenn ich es bräuchte, sagen wir das Logo Ich kann mich an Command or Control erinnern, klicken und in Sachen klicken. Ich könnte das einfach kopieren und in mein anderes Dokument mit all meinen Logos einfügen, vielleicht in eine Masterkomponente. Okay. Da haben wir's. Wir müssen es vielleicht aufräumen. Niemand hat es wirklich gut überstanden. Andere Dinge, die schmerzhafter sein könnten. Nehmen wir an, ich will diesen Button, okay, also kann ich weiter klicken und einfach die paar Male doppelklicken, die ich in all diese Div-Tags gegangen bin und die Schaltfläche gefunden habe. Wenn ich weiter reingehe, ist das leider kein Text, es ist nur eine Form. Dann SVG. Warum? Ich habe keine Ahnung. Ich würde annehmen, dass es Text auf der Website gewesen wäre, aber anscheinend sehe ich das Plugin oder es ist Apple, die es als Vektor und nicht als tatsächlich bearbeitbaren Die nützlichen Teile sind Bilder. Okay, ich kann den Befehl geben, klicken, Okay, das Bild finden. Und ich kann sagen, lass uns exportieren, was ich ausgewählt habe. Sehen wir uns eine Vorschau als PNG-JPEG an. Klar, klicken Sie auf Exportieren und wir haben das Bild, oder kopieren Sie es einfach und fügen Sie es in ein anderes Dokument ein. Supercool, andere coole Dinge sind, dass Sie mit dem Wiederaufbau einiger Komponenten beginnen können . Also lass uns einen Button finden. Es ist, benutze diesen hier. Ich komm schon, klick nach draußen Also habe ich mir irgendwie die Verpackung von diesem Ding geschnappt. Vielleicht kannst du das hinauszögern. Okay, ich kopiere es und füge es ein. Es ist nur so, ich habe meine eigene Version hier drüben und wir werden sehen, wie gut sie ist. Es wird Zeiten geben, in denen es einfach einfacher ist, es wieder aufzubauen. Und es wird Zeiten geben, in denen du einfach dieses Plugin benutzen kannst , um nah genug heranzukommen und es wird etwas Aufräumen Nun möchte ich zunächst überprüfen , ob das Text ist. Perfekt. Es ist also Tod ist Text. Das Problem ist, dass es kein automatisches Layout ist. Also wähle ich die übergeordnete Schicht a für ein automatisches Layout aus. Es wurde ein wenig Polsterung ausgelassen Es sieht toll aus. Das einzige Problem ist, dass das nicht in Schwierigkeiten geriet , dass dieses Ding hier irgendwie in einer seltsamen Maske gefangen ist irgendwie in einer seltsamen Maske gefangen Also könnte ich die Clubinhalte ausschalten, vielleicht bringen wir das hin. Was ich tun könnte, ist , einfach alle Tasten zu merken und die Größe so zu ändern, dass Command Option Shift, Control, Alt Shift auf einem PC passen , und es wird einfach von außen neu gezeichnet Und das hat irgendwie alles gut aufeinander abgestimmt. Um einen Blick auf den Hintergrund zu werfen, Scott riesige, abgerundete Ecken darauf. Das ist in Ordnung. Ich kann es auf zwei oder 20 reduzieren. Okay. Ich würde also sagen, dass sich die Mühe gelohnt hat , es über das Plugin zu bekommen, denn das hat mich ein bisschen dazu gebracht, es irgendwie fertig zu Sie können sehen, wie toll es für eine Website ist , die Sie geerbt haben, vielleicht haben Sie einen Job bekommen. Niemand benutzt Figma, oder zumindest wurde es entworfen und sagen wir Photoshop oder Illustrator, bevor irgendjemand Komponenten herstellte Wir können die Dateien einfach nicht mehr finden, laden sie herunter und fangen an, sie neu zu erstellen. Wenn nichts anderes ideal ist, um Logos, Symbole Farben aufzunehmen und einige dieser Komponenten nachzubilden . In Ordnung, das ist es Die einzige Warnung ist, ich habe das Gefühl gegeben , dass es perfekt ist und wirklich gut funktioniert. Funktioniert ziemlich gut auf der Apple-Website und auf einigen Websites, die ich ausprobiert habe, ich habe andere Websites ausprobiert und Anpassungen vorgenommen. Es ist eigentlich zu heiß. Es sind nur Anfälle unterbrochen und die Tiefe all dieser Ebenen hier ist etwas verwirrend, aber ich habe das Gefühl, dass Sie jetzt vielleicht an einem Punkt sind, so weit im Fortgeschrittenenkurs, wir wissen tatsächlich, was ich tue. Das ist super nützlich, okay, das ist es. Wir sehen uns im nächsten Video. 142. Wie man einen Drop-Down mit Overlays in Figma erstellt: Hallo zusammen. In diesem Video werden wir uns das ansehen. Es ist ein Dropdown-Menü. Du kannst den Mauszeiger über Sachen bewegen. Schick. Du kannst auf der riesigen Seite zwei auf verschiedene Seiten gehen , es wird besser. Wir werden ein zweites Level haben. Wir können zu Weitere Optionen gehen und schauen, es gibt eine zweite Ebene. Nun zu dieser speziellen Methode, es gibt ein paar Möglichkeiten, Dropdown-Menüs in Figma zum Laufen zu bringen, das ist, das ist wahrscheinlich der einfachste Weg Im nächsten Video machen wir noch einen, der etwas schwieriger, aber ein bisschen robuster ist. Du würdest diese verwenden, um loszulegen, okay, und es ist wirklich gut, wenn du nur ein oder zwei Minuspunkte hast, ein bisschen Interaktivität zu dieser speziellen Methode hinzufügen willst, ein bisschen Interaktivität zu dieser speziellen Methode hinzufügen willst verwendet eine Reihe offener Overlays, bei denen wir nur ein Menü an der Seite haben und es einfach an einer Position unter dem Button öffnen an einer Position unter dem So nette, einfache Art, es zum Laufen zu bringen. In Ordnung, springen wir rein und Forellen arbeiten. Okay, um loszulegen, habe ich eine neue Designdatei erstellt und nur um sie von allem anderen getrennt zu halten, weil es ein wenig chaotisch und verwirrend werden kann Und ich habe drei Frames erstellt, eine Seite eins und Seite zwei. Ich verwende hauptsächlich eine Desktop-Ansicht , weil sie darin weggefallen ist. Wie ich am Anfang sagte, es gibt eine Hover-Aktion und du kannst auf einem Mobilgerät keinen Mauszeiger ausführen, aber die Leute wollen es auf dem Desktop machen Das ist es, worauf wir eine Vorschau geben und wir werden alle Komponenten hier haben. Okay, lass uns zwei Knöpfe machen. Okay, ich werde das Textwerkzeug verwenden, einmal klicken, aus irgendeinem Grund Diäten, aus irgendeinem Grund verwende ich riesigen Text. Ich werde meins passender machen. Scape Shift Aid, mach ein Autolayout draus. Ich gebe ihm eine Hintergrundfarbe und etwas Polsterung. Hast du eine Idee? Weil daran nichts Ausgefallenes ist. Ich nehme zwei davon. Ich werde meinen Filter haben und wenn du ihn herunterklickst, Menüpunkt, diesen Menüpunkt weil es viele verschiedene Links sein werden. Und gibt zumindest einen Typ an, ich sage, ich möchte, dass er eine feste Höhe und Breite hat, okay? Und ich möchte, dass dieser 180 mal 48 ist. Und ich werde sicherstellen, dass es eine Linie zur Mitte meines Autolayouts Nicht wichtig. Lauf eigentlich in der Mitte. Da haben wir's. Zum automatischen Layout. Das ist es. Wir sollten sie zu beiden Komponenten machen damit wir sie später problemlos aktualisieren können. Okay, also erstelle mehrere Komponenten, kein Set, sonst nichts. Benennen Sie beide um. Befehlstaste R, Ein-Taste, Shift-Tab, um zum nächsten zu gelangen, und Sie werden als Menüpunkt aufgerufen. In Ordnung, also was ich machen wollte, ist dieser Filter. Ich möchte mir ein Exemplar davon schnappen. Eigentlich möchte ich diesen Filter, wenn er angeklickt wird , ein paar davon öffnen Also werde ich mir ein paar Exemplare davon schnappen, okay, und mir eine schnappen, ich werde sie duplizieren. Befehl D, D, D, nimm ein paar davon, wähle sie alle aus. Und was sie sein müssen, ist, dass sie in einem Rahmen sein müssen. Denken Sie daran, als wir Overlays gemacht haben, haben wir auf die Schaltfläche geklickt, sagen wir Overlay öffnen, und es wird angezeigt, welchen Frame Sie möchten Es sagt nicht, welche Gruppe von Instanzen oder welchen Stapel von Instanzen wir alle zusammenfassen müssen. Wir müssen sie alle in einem Rahmen zusammenbringen. Das ist also Befehlsoption G. Um daraus einen Frame zu machen, geben Sie einfach Frame und Namen ein. Nennen wir es Liste eins. Die Sache mit Overlays ist lass uns hier zu dieser Schaltfläche zurückkehren Also diese Art von, die wir benutzt haben wird ihn einfach so oder so nach unten bewegen. Wir verwenden sie , damit wir ihn auf dem Laufenden halten können und er aktualisiert alle Artikel. Okay. Dafür ist er also da, aber vergessen wir, dass er sich da runtergeschlichen hat Was ich jetzt machen möchte, ist dieser Button. Wenn Sie angeklickt werden, schalten wir Shift a um in den Prototypmodus zu wechseln Sagen wir, die Umleitung erfolgt, wenn darauf geklickt wird . Ich möchte, dass ein Overlay geöffnet wird, von dem ich nicht sehen kann, was für eine Art von See dieses namens List1 Okay. Overlays müssen aus dem Niemandsland kommen Sie müssen von außerhalb eines anderen Frames kommen, damit sie nicht darin verschachtelt werden können Stellen wir es hier hin. Jetzt kann ich sagen, ich will die Interaktion per Klick. Ich möchte, dass Sie ein Overlay von Welches gibt es eines öffnen. Wo will ich es haben? Gehen wir ins Menü und verschieben es dann einfach dorthin, wo wir es haben wollen. Ich lasse mein Ausfallen ganz unten stehen. Aber deins hättest du gern? Und wir werden das schließen lassen, wenn wir nach draußen klicken. Wir wussten es also, aber er klickt einfach herum, das versperrt den inoffiziellen Fluchtweg Ich meine, du Lass uns sehen, ob das funktioniert. Also behalte ich meine Komponenten hier. Ziehen wir die Version hier rüber, okay, auf Seite eins. Und das bin ich, und ich habe einen Flow in diesem Fall. Wenn Sie nicht angeben, dass Sie auf dieser Seite einen Flow haben , kann ich ihn noch einmal in der Vorschau ansehen. Hoffentlich war ich zum Reset da. Jedenfalls. Ich klicke darauf. Hey, sieh dir das an. Ich meine, du klickst, klickst, klickst. Das könnte alles sein, was du willst. Warum? Wenn Sie ein Hoverboard möchten, wenn Sie es mit einer Seite verbinden möchten, lassen Sie uns beide einzeln durchführen Ich kehre zu meiner Hauptkomponente zurück. Wie du weißt, bin ich das nicht, ich gehe hier zu diesem Menüpunkt. Und fügen wir die Links hinzu. Ich sage, wenn ein Menüelement in den Entwurfsmodus wechselt, können Sie Ihr Element um eine Registerkarte auf drei reduzieren. Geh du, ich habe die Namen geändert jetzt gehe ich zurück zum Prototypenmodus. Sagen wir, wenn auf diesen geklickt wird, gehe zu Seite eins. Dieser hat geklickt. Gehe zu Seite zwei. Ich werde sicherstellen, dass sich der Filter auf meinen beiden Seiten befindet. Ich kopiere es und füge es ein , sodass ich, wenn ich in der Vorschau Aktualisierung anbiete, zu Filter gehe, Seite für Seite eins gehe. Los geht's. Wir haben ein Menü, das funktioniert. Wir wollen einige Schwebebewegungen, weil Mauszeiger das sind , was Menüs normalerweise tun Deshalb haben wir diese Hauptkomponente hier. Bei diesem hier können wir sagen, ich will eine Variante, okay? Und ich möchte, dass der zweite im Designmodus dieser Farbsättigung und Helligkeit gefüllt Ich drücke die Umschalttaste nach unten, um meine Helligkeit Okay, mach eine andere Farbe draus. Es wird nicht ganz funktionieren, wenn wir nicht unseren Prototyp und die Anweisungen hinzufügen. Wechseln Sie also in den Prototypenmodus, um zu sagen wann Sie sind, was geklickt hat, notieren Sie, während Sie mit der Maus darüber schweben, wechseln Sie zur Eigenschaft eine Variante Es ist nicht ganz das, was wir wollen. Und wir verwenden Dissolve. Das Gleiche gilt, wenn du in diese Richtung zurückgehst, es wird funktionieren. Wir haben einige schreckliche Namen. Lassen Sie uns einfach beweisen, dass es funktioniert, zuerst testen, testen. Okay, schauen wir uns an. Fantastisch. Gut gemacht haben wir diesen Namen, diese Varianten richtig. Ich habe den Designmodus und diese Option hier oft verwendet. Was viele Leute jedoch tun, ist, dass ich hier doppelklicke und sage, Staat ist gleichbedeutend mit Mauszeiger Tabulator, Tab. Der Status entspricht Standard. Das hängt davon ab, ob Sie zum Beispiel eher ein Webentwickler sind, könnten Sie es so machen. Oder wenn du mich magst, mache ich es am Ende so. Klicken Sie auf Eigenschaften, geben Sie mir den Namen des Bundesstaates und machen Sie es dann auf diese Weise. Und dann sollte OCD und Go Standard über Hover stehen , das macht keinen Unterschied, außer dass das die Reihenfolge ist, in der sie visuell sind. Jedenfalls. Überprüfe noch einmal, wir haben nichts kaputt gemacht. Nett. Es geht immer noch zu den Seiten. Ordnung, That my friends ist die erste Ebene des Dropdown-Menüs. Wenn du wie ich bist und alles funktioniert, denkst du, wie stolz auf mich dieser nächste Schritt wahrscheinlich sein wird. Wir werden also den Versionsverlauf anzeigen. Also nichts ausgewählt, Escape, Escape, Escape drücken. Dieser kleine Chevron hier und sagt, ich möchte den Versionsverlauf zeigen Speichern wir einen kleinen Plus-Button und wir können diesen hinzufügen. Bevor ich ihm den Kiefer gebrochen habe, können wir zu der Zeit zurückkehren, als es funktioniert hat, und es noch versuchen, wenn wir es kaputt machen. Warum mache ich das? Und ich habe es noch nie gemacht, weil du es wahrscheinlich kaputt machen wirst. Es ist schwierig, diesen nächsten Schritt jetzt zu machen und zu versuchen, ihn nett zu erklären, okay, also was wir tun wollen , ist im Grunde dasselbe zu tun Wir haben diese MainComponent hier im Prototypenmodus, wenn sie angeklickt wird, wird dieses Menü ausgeblendet. Was wir jetzt tun wollen, ist, dass wir dasselbe tun wollen. Wir wollen diesen Menüpunkt finden, bei dem es sich um diese kleine Komponente hier unten handelt. Und wenn es angeklickt wird, habe noch eine Option, die ich nicht allen antun möchte. Also was ich gerne tun würde, ist hier unten und wir geben uns etwas Platz. Möchte ich diesen ersten Befehl oder Control D abrufen und ihn duplizieren. Ich möchte eine dritte Variante. Nennen Sie sie. Ich habe den Hover-Standard und wir werden diesen einen kalten Zustand gleich Zustand drei haben einen kalten Zustand gleich Zustand drei Wir nennen das 1. S Level ändert seinen Namen , um es klarer zu machen. Wir nennen das nochmal , damit du darauf klicken kannst. Wir werden gleich auch Pfeile darauf platzieren. Aber du weißt, dass du darauf klicken kannst und du bekommst eine weitere Ebene von Menüpunkten. Okay? Also, was wir tun werden, ist diese Liste zu duplizieren , okay, das ist quasi wie Level eins, Lass uns sie duplizieren. Es endete sehr weit weg. Geh da rüber. Okay. Es heißt automatisch Atlas, was für mich funktioniert. Lassen Sie uns diese umbenennen, um sie etwas klarer zu machen. Ordnung, wir haben diese Liste , die hier erscheinen wird. Wir wollen sagen, ich bin im Prototypenmodus, nicht im Schwebemodus. Wir können beide machen. Wir sagen, wenn ich angeklickt werde, möchte ich das Overlay von L2 öffnen Ich kann es sehen, weil es überall haftet. Es ist nicht in einem anderen Frame verschachtelt. Wo will ich es haben? Vorüber? Hier an der Seite, etwas anderer Ort als der letzte. Schließen, wenn Sie auf Manuell klicken, sieht gut aus, wird es funktionieren? Nicht sofort. Schauen wir uns den Filter an. Du springst zu den Seiten. Ich kann es hier nicht sehen. Warum kann ich es hier sehen? Ich kann es tun, ist auf Liste eins, ich brauche einen Schalter an einem von diesen, an meinem anderen. Da es Variante a geben sollte das eigentlich durchgehen und sagen können, einfach auf diese klicken. Gehen Sie zur Designansicht und sagen Sie: Ja, ich möchte es für mich haben. Der Menüpunkt, der dieses Ding ist, ist so, wie es Komponenten hier gemacht haben, aber nicht der Standardeintrag, keinen zu haben. Aber das zweite Level. So machen wir in Sectioned Man, finde ich ein paar Mal komisch, das so aufzunehmen, dass ich mir nicht die Haare ausreiße , was davon übrig ist, aber lass es uns versuchen Der Filter wird also dieses Element hier aktivieren . Dieser hat einige spezielle Inhaltsstoffe , wobei er uns die Liste hier zeigt. Lass es uns versuchen. Voreingestellter Filter Mehr, steck es ein. Schau uns an, wir machen Sachen. Jetzt gehen wir natürlich durch, und wenn wir sie anklicken, gehen wir irgendwohin, in dem Moment, in dem sie es nicht sind. Aber das haben wir am Anfang gelernt. In Ordnung, die Hausordnung läuft. Wenn du zurückgehen musst oder vielleicht kannst du hier reingehen, zeige den Versionsverlauf an. Geh zurück zu bevor ich es kaputt gemacht habe. Sie können auf diesen klicken und sagen, warte eine Sekunde, gehe dorthin und sage „Diese Version wiederherstellen“. Es ist nicht das, was ich tun möchte , weil meins funktioniert. Da hast du's. Andere Dinge, die Sie tun könnten, um es aufzuräumen, verschieben Sie es einfach und ändern Sie die Größe, damit es schöner aussieht Die eine Sache ist, dass wir hier mit der Maus auf diese Option zeigen können hier mit der Maus auf diese Option zeigen Denn im Moment, wenn ich einen Prototyp habe und ich sage, dass du auch einen Hover willst, lass uns ein Duplikat davon machen Hat die Farbe sehr schnell geändert. Wenn ich Shift E sage, gehst du dorthin. Wenn Sie den Mauszeiger bewegen, wechseln Sie zu Status Vier, ich sollte ihm einen Namen geben. Aber auch die Clique. Kannst du sehen, um das ein wenig zu verstehen und zu sagen, dass du nicht beides kannst, du fährst einfach irgendwie mit der Maus darüber Es. Sagt, dass die Umleitung nicht ausgelöst werden kann, Wilson , andere haben zuerst ausgelöst. Also kann ich nicht beide zum Laufen bringen. Früher konnte ich einfach beide arbeiten. Früher konnte ich die Reihenfolge der Ebenen hier ändern , aber ich kann es nicht mehr zum Laufen bringen. Du könntest es versuchen und ich könnte versuchen, beides zu tun. Aber im Moment, wenn ich es versuche, funktioniert Filter, Hover, Hover und ich klicke darauf, alles funktioniert wieder Wenn ich es schließe und wieder öffne , in Ordnung, es funktioniert Das lasse ich im Kurs, denn Männer, das hat früher funktioniert. Und als ich mich dann auf dieses Video vorbereitete , konnte ich es nicht zum Laufen bringen. habe genau das Gleiche gemacht, ich schwöre, aber dann konnte es einfach nicht funktionieren. Also hey, wie es heißt, sollte es nicht, aber es funktioniert jetzt. Da hast du's. Vielleicht hast du noch mehr Probleme, Probleme. Und die andere Sache, die ich tun möchte, ist, dass ich dort einen kleinen Chevron hinzufüge dort einen kleinen Chevron hinzufüge , damit die Leute wissen, dass sie darauf klicken müssen Okay, ich klicke bei gedrückter Umschalttaste auf alle, um zu sagen, dass sie tatsächlich linksbündig ausgerichtet sind , weil ich den kleinen Chevron platzieren möchte und ich werde ein Plugin öffnen, okay, ich werde Iconscout verwenden, um zwischen all den verschiedenen Icon-Plugins umzuschalten , die Ich verwende Error. Und ich klicke, sobald SVG-Einfügen in den Sinn kommt, dass es zufällig dort platziert Ich möchte den Außenrahmen davon und es stellt sicher, dass er die benötigte Größe hat Lassen Sie es uns eigentlich gleich loslegen. Und eigentlich ist das eine ziemlich gute Größe. Glaubst du, es ist eine Komponente daraus zu machen? Nehmen wir eine Instanz dieser Komponente und fügen wir sie in mein Autolayout Und je nachdem, in welche Richtung du es möchtest, kannst du, anstatt vier Pfeile zu haben, einfach um 90 Grad drehen diese einfach um 90 Grad drehen oder nach unten fallen lassen oder herausdrücken. Wie hier drüben. Es fällt nach unten, aber das schiebt etwas über diesen Punkt. Wir müssen sichergehen, dass ich zentriert gehe, vielleicht linksbündig Das Gleiche gilt für diesen. Okay, dieser ist schon heilig. Das Einzige dabei ist, dass ich wahrscheinlich möchte, außen, in der Mitte ist alles irgendwie gequetscht, auch wenn ich in die Mitte gehe, denk an den Trick, den wir machen können, um sie nach außen zu schieben , um sozusagen die Mitte zu verteilen Also hier unten, unter Autolayout, statt gepackt, können wir Leerzeichen dazwischen legen Das war das Wort, das ich wollte. Ich mache das Gleiche und schnappe dich, kopiere es in dieses Diagramm, die Eltern gehen hierher, sagen wir, gepackter Raum dazwischen. Du solltest das nicht zu Beginn tun , wenn du es erstellst. Ich wollte diesem Video einfach nicht zu viel Verwirrung stiften. Lass uns gehen, lass es uns zurücksetzen. Filtern. Mehr. Schau uns an, wie wir Sachen machen. Ja, keine sehr schönen Knöpfe. Sie arbeiten für uns. In Ordnung, das wird es sein. Das ist eine Möglichkeit, das zu tun. Denken Sie daran, dass er auf diese Weise einfach wirklich gut ist. Wenn Sie ein oder zwei Menüs haben, müssen Sie nur einen Prototyp erstellen Es ist schneller, das nächste Video ist leicht zu verstehen, aber das nächste ist etwas robuster. Die Leute können mehr Komponenten für ein größeres Designsystem bauen . Ja, gehen wir jetzt darauf ein. 143. Wie man ein mehrstufiges Dropdown-Menü in Figma erstellt: Hallo alle zusammen. In diesem Video machen wir diesen kleinen Knopf. Aber sieh dir an, was passiert, wenn wir darauf klicken, es Dropdown und schau, wir zeigen mit der Maus über Dinge und sehen uns das sofort überwältigend an Es gibt ein doppeltes Dropout-Menü. Manche nennen ein Untermenü vielleicht ein mehrstufiges Menü. Und wenn wir auf Dinge klicken, haben wir eine Seite, die zu aufregend Wenn Sie nun das letzte Video gemacht haben, in dem wir uns mit einer anderen Art der Erstellung eines Dropdown-Menüs befasst einer anderen Art der Erstellung eines Dropdown-Menüs Wir landen am selben Ort, aber wir verwenden dort ein anderes Methodenticket. Und es ist wichtig , beides zu lernen. Es ist sowohl eine gute Übung für Erlernen von Gehör als auch für den Kurs für Fortgeschrittene, aber es ist praktisch, wenn wir die Arbeit anderer Leute verwenden, die vielleicht Dropdown-Menüs und andere Methoden erstellt haben Dropdown-Menüs und andere Methoden Und wenn wir beide kennen, können wir es einfach aktualisieren oder unser eigenes erstellen. Nun zum letzten Video, ich habe gesagt, dass diese Methode etwas heißer ist als die letzte Ich bin mir nicht sicher, ob es so ist. Ich glaube, ich kann es in der zweiten Version besser erklären. Es scheint also ungefähr so, dass es dir überlassen bleibt, welches du verwendest. In Ordnung, lassen Sie uns da einsteigen, wo es mir vorher gefallen hat. Ich habe eine Komponentenseite und ich habe zwei Seiten, zwischen denen wir irgendwie hin- und herspringen können Ich beginne mit dem Textwerkzeug, Tiki, der Filter-Schaltfläche, riesigem Text oder runter Ich werde die Flucht auf meiner Tastatur drücken, um das Ganze auszuwählen, und schiebe a, um es zu einem automatischen Layout zu machen. Ich fange mit einer etwas neuen Idee an. Okay, also ich habe eine Schaltfläche und tatsächlich steht auf der Schaltfläche im Bestellrahmen, ich werde noch eine haben, bevor daraus eine Komponente mache, weil auf ihnen separate Komponenten stehen, wenn er mein Menüpunkt sein wird. Weil sie unterschiedlich viele Texte enthalten werden. Ich möchte, dass sie eine bestimmte Größe haben, nicht der Text. Ich möchte den Text nicht auf eine feste Breite ändern. Ich möchte das Elternteil benutzen, um in, okay, ich will nicht, dass du die Breite festlegst und ich werde 160. Linksbündig ist in Ordnung. In Ordnung, also das alles als separate Komponenten. Erstellen Sie also mehrere Komponenten. Das ist der Name, der richtige Befehl oder die richtige Steuerung, oder es wird mein Button-Filter sein. Dieser hier wird mein Menüpunkt sein. In Ordnung, also hier ist die große Sache, die wir machen werden. Wir belassen das, okay, das sind unsere Hauptbestandteile. Von nun an werden wir solche Instanzen verwenden. Okay, ihr seid also hilfreich, aber ihr könnt gehen. Okay? Also ich will das, es ist eine Instanz von Button-Filter. Ich möchte es in eine andere Komponente stecken. Geben wir ihm einen besseren Namen, wird Dropdown heißen. Dropdown. Ich kann buchstabieren. Oh, warum können wir nicht zum Dropdown-Menü gehen. Dieser wird den Großteil der Arbeit erledigen, die wir wollen, in Variationen. In diesem hier wird einiges davon vor sich gehen. Also noch einmal, ich möchte die Hauptkomponente nicht hier haben. Ich will das Beispiel dafür. Ich werde eine Instanz erstellen, indem meine Wahltaste auf einem Mac und die Alt-Taste auf einem PC gedrückt halte. Dann ziehe ich es hier rein. Okay, und wo wird es hingehen? Es wollte dort wirklich nicht in mein Dropdown-Menü gehen , um zu zoomen Sie können es also einfach ziehen und versuchen, es dort hineinzubringen. Ich möchte eine Variante von innen haben , da wollte ich wirklich diesen Namen haben, diese. Okay, ich mache es hier , weil ich das bevorzuge. Okay. Das wird gestrichen. Oh Mann, ich tippe heute. Okay. Und ich gehe zu Varianten. Ich werde geschlossen und Tab wieder geöffnet haben. Und ich werde die Reihenfolge der Ebenen ohne triftigen Grund ändern , außer dass geschlossen oben ist und ich denke, dass Open unten sein sollte. Innerhalb von Open habe ich zwei Möglichkeiten. Nun, diese beiden Instanzen dieser beiden Typen oben hier sind in diesem übergeordneten Frame zusammengefasst , der zufällig ein automatisches Layout ist. Es liegt an Ihnen, ob Sie Reihenfolge laut halten möchten, weil es hilfreich sein könnte. Nehmen wir an, dieses vertikale Layout ist tatsächlich sehr nützlich und im Moment oder umgekehrt. Also werde ich auf Filter klicken und los geht's, du bist ganz oben. Und dann diese, ich kann Command D, D oder Control D, D, D drücken, die übergeordnete Shift Enter. Es muss kein automatisches Layout sein. Du kannst Minus machen und es wird immer noch funktionieren. Du kommst jetzt einfach rein, du kannst hauptsächlich mit ihnen dorthin gehen , wo du es haben willst, lass meins als Autolayout, weil es irgendwie hilfreich ist lass meins als Autolayout, weil es irgendwie hilfreich ist . Also bin ich fertig. In Ordnung, jetzt brauchen wir nur noch die Umleitung. Also das oberste hier ist Shift E, Okay, ich sage, du gehst in die Notaufnahme, wenn du hier auf Zur Dropdown-Liste wechseln von Öffnen und Filtern klickst Zur Dropdown-Liste wechseln von Öffnen und Filtern klickst Wenn Sie angeklickt werden, kehren Sie zu dieser Richtung zurück. Gehe zurück zu geschlossen. Lass es uns testen. Also werde ich es tun, ist, eine Instanz zu ziehen. Beachten Sie, dass diese Typen hier nicht hingehen. Du bist der Boss. Du machst die ganze Arbeit. Sie möchten Beispiele dafür sehen. Okay. Sehen wir uns eine Vorschau an. Nun, es funktioniert. Ich weiß es nicht. Ich denke, das sollte es. Seite eins, indem Sie darauf klicken. Hey, es funktioniert. Los geht's. Es gibt also ein Dropdown-Menü. Ich überlege gerade , welcher Weg ist jetzt schwieriger? Ist es der Übersichtsweg oder dieser Weg das Menü? Es wird beide lernen, weil Sie beide online finden werden . Kein richtig oder falsch. Ich bin mir sicher, dass es noch etwa zehn andere Möglichkeiten gibt. Die Lids haben sich mit unserem Schwebegerät ein bisschen ausgedacht. Dieser hier ist eine MainComponent. Ich möchte variieren, ich möchte die zweite Variante, Shift E nach unten zu Fill gehen, auf HSB klicken Deshalb benutze ich gerne diesen letzten, halte die Umschalttaste gedrückt und drücke nach unten, um ihn etwas abzudunkeln Ich habe ein Dunkles, ein Licht. Nennen wir sie. Klicken wir auf das übergeordnete Element, klicken wir auf die Varianz und nennen wir diesen Zustand Und wir haben Standard und zeigen mit der Maus. Und wir gehen in den Prototypenmodus und sagen dir, wenn du mit der Maus fährst, wechselst du in den Schwebemodus Und Sie kehren zu dieser On-Click-Änderung zur Standardeinstellung zurück. Nett. Es sollte ohne weitere Probleme funktionieren. Wir fahren nach Nizza. Nun, hier wird es verwirrend. Wir brauchen eine zweite Option. Okay, wir brauchen also diesen zusätzlichen Dropdown, wenn Sie das nur brauchen, Ihre Arbeit ist erledigt Natürlich müssen wir das durchgehen und sagen: Du bist tatsächlich hier, dieser hier, oh, Stiftdesign. Gehen wir von geschlossen zu offen und sagen, wenn Sie auf den Prototypmodus geklickt haben, werde ich sagen, als eine weitere Interaktion, außer als eine weitere Interaktion Wenn Sie darauf klicken, navigieren Sie zu Seite zwei, denn schon auf Seite eins, lassen Sie es uns testen Deine Seite, die beide Seite eins genannt haben. Sie sind beide auf Seite eins. Da hast du's. Gefällt dir, dass es damals nicht funktioniert hat? Weil ich sie beide Seite eins genannt habe. Jetzt probieren wir es aus. Benutze meinen Linkspfeil , um wieder auszuschalten oder zu aktualisieren. Ich habe es überhaupt nicht viel aktualisiert. Diese erste Option sollte auf Seite zwei gehen. Los geht's. Nett. Was ich vielleicht tun möchte, ist, das standardmäßig zu schließen. Jetzt. Kopiere es. Füge es hier drüben ein. In Ordnung, wir stylen Knöpfe. Ändere die Schrift hier, okay, anstatt Menüpunkt zu sagen, kannst du die verschiedenen Seiten mit Kategorien haben. Ändere meins. In Ordnung, da sind meine. Wir gehen. Okay, als Nächstes möchte ich diese zweite Ebene hinzufügen. Was wir also tun wollen, ist, dass du diese Art von Apparatur hier nachbauen willst . Wir werden sie wiederverwenden, weil diese Menüelemente, du könntest einen zweiten Satz davon haben, aber sie machen das, was wir wollten. Im Grunde müssen wir das neu erstellen. Wir müssen also zuerst klicken, keine Instanz davon. Wir müssen es auseinandernehmen. Es ist Befehlsoption B, Strg Alt B ist Umbenennen, damit wir nicht zu verwirrt werden Was heißt dieses eine andere, ändere die Häkchen darin, um „Anderes“ zu sagen. Sie können hier im Ebenen-Panel sehen , dass ich gerade mit der Tabulatortaste durchgehe Sie können quasi mit der Tabulatortaste durch die Menüs blättern, was praktisch ist. Denken Sie daran, sie haben es überhaupt nicht geändert. Da haben wir's. Punkt, Punkt, Punkt, Punkt das Etikett und der Text. Okay, wir haben das, es ist ein automatisches Layout. Machen wir es zu einer Komponente, damit wir es kontrollieren können. Und jetzt müssen wir dasselbe tun wie zuvor. Lass uns das duplizieren. Also ich habe ein Beispiel dafür. Das brauchen wir nicht mehr. Das ist nur mein allgemeiner Controller. Diese Instanz kann sich jedoch innerhalb einer Komponente befinden. Wir machen das, weil wir Varianten davon haben wollen. Diese Variante hier wird sich nicht viel ändern, außer dass wir dasselbe tun werden. Ich möchte einen dieser Menüpunkte. Sie könnten einen weiteren Satz von Menüelementen erstellen , wenn diese funktionell anders sein müssten Aber ich werde eine Instanz dieser Komponente erstellen, okay, keine neue Komponente, nur eine weitere Instanz, weil ich sie auf allen verwenden und sie hier platzieren möchte . Und es wird nicht reingehen. Es hat letztendlich hier draußen rumgehangen, nicht darin. Schauen wir uns also zuerst die Benennung an. Wenn diese Option ausgewählt ist, gehe ich zu Eigenschaft, das ist das sekundäre Dropdown-Menü Ich muss, ich muss schließen und Tab öffnen. Ein bisschen mehr Sinn. Also ich will, dass das, was in nichts enthalten ist, innerhalb der Sekundarstufe ist, oder ist es da? In meinem Bauteil, das ich hergestellt habe und das „Andere“ heißt, habe ich es eigentlich nicht genannt, es hat es nur von diesem ursprünglichen Namen abgelöst. Benennen wir diese Menüschaltfläche also um. Ich möchte, dass es in der offenen Option ist, sobald wir umgekehrt sind. Du bist also an der Spitze. Das, ich möchte Command D sein. Ich bin den falschen Weg gegangen. Es ist ein automatisches Layout, daher kann ich es nicht verschieben Manchmal passt das Autolayout nicht zu Also klicke ich auf das übergeordnete Element, Shift Enter und schnappe mir die ganze Gruppe. Und ich brauche kein automatisches Layout, weil ich ein Kreuz und dann runter machen will, okay, es ist nicht wie nur ein Flow. Ich bin gelandet. Ziehen Sie ein paar weitere Optionen heraus, je nachdem , wie viele Sie benötigen. Du kannst sie verschieben, sie alle auswählen und sagen, oh, schau, einige von ihnen sind weit draußen gelandet. Du gehst da rein. Eigentlich müssen sie dort bei seinen Kumpels sein. Das wird Ihnen wahrscheinlich das größte Problem bereiten Das größte Problem ist, dass Sie Dinge tun und sie ziehen und duplizieren und außerhalb der Stelle landen, an der sie sein müssen, entweder außerhalb des Komponentensatzes, wie es am Anfang der Fall war, oder dass sie außerhalb der geöffneten Variante landen Sie sind alle im Jetzt. Weil ich komisch groß bin und weitermache, erinnere dich an Command, Optionshift, alle Tasten plus R. Das ist Control Alt Shift R, zumindest um es herum. Und das geht an Eric, sobald wir all diese ausgewählt haben, ich erinnere mich an Schnelltasten. Verwenden wir „Vertikal packen“. Jetzt hat es die falsche Größe. In Ordnung, wir haben da ein bisschen telefoniert. Im Grunde haben wir das neu gemacht. Wir haben ein Beispiel für diesen Button genommen. Da ist es da. Wir haben zwei Varianten davon gemacht. der zweiten Variante hier haben wir uns ein paar der Menüpunkte geschnappt und sie hineingeworfen Wir stellen nur sicher, dass es in der Variante enthalten ist, die wir Open genannt haben. Und jetzt probieren wir, dass es funktioniert, ohne es mit dem ersten zu verbinden. Also ich will mich nicht erinnern, das ist der Boss. Diese beiden Jungs waren hilfreich bei der Steuerung des Stils der Tasten, aber die Mechanik funktioniert hier mit diesen beiden Gruppen. Okay, Sie möchten also eine Instanz von View. Bringen wir dich hierher. Wenn du arbeitest, erfrischen wir uns. Es funktioniert nicht. Wissen Sie, warum es nicht funktioniert? Weil wir eigentlich keine Interaktivität hinzugefügt haben. In meinem Prototyp gehst du also zu deren onClick-Änderung, um diesen Button hier zu öffnen Ich möchte es nicht der ganzen Gruppe antun , wenn darauf geklickt weil ich möchte, dass diese Menüelemente woanders hingehören Wenn jedoch auf eine andere Schaltfläche geklickt wird, kehren Sie zu dieser ersten Option zurück Lass uns das versuchen. Du verstehst, dass es funktioniert. Jetzt müssen wir es damit verbinden. Was wir also tun müssen, ist, hier zu meiner ersten Liste überzugehen . Diesen Menüpunkt hier müssen wir auswechseln. Ich könnte mir diese Kopie schnappen, zu dieser gehen und den Befehl „Option Shift V“, „Alt, Shift V“ einfügen und ersetzen Alt frage mich, warum ich sie zu klein gemacht habe. Das ist okay. Flux in einer Sekunde. Aber jetzt würde das diese Gruppe auslösen. Dieser Typ wird seine andere Gruppe auslösen. Ich denke, lass es uns versuchen. Du weißt schon, du filtrierst und gehst runter zu „Andere“. Und da sind meine Menüs . Ich mache einfach die originalen 160. Deshalb habe ich das. Also schnappst du dir deine feste EUO 160 und umarmst sie nicht Was machst du hier kaputt? Du passt, du passt. Vielleicht müssen die Bienen vielleicht auch einfach ein bisschen umziehen. Hoffentlich hier drüben. Den brauche ich nicht. Ich muss nur eine Vorschau davon sehen. Bup, bup, bup. Los geht's. Lass uns. Jetzt kannst du etwas Zeit damit verbringen es durchzugehen und zu sagen, wenn dieses Exemplar im Prototypenmodus gesammelt wird, wo geht es hin? Es wird gehen, um zu klicken und zur Seite zu gehen, wo immer es hingehen muss. Navigiere zu dieser anderen Seite , die ich erstellt habe, richtig? Seite eins. Filter, anderer Menüpunkt, Seite zwei. In Ordnung, also wie hat er sich versteckt, ruiniert nach etwa einem Dropdown-Menü Und wenn Sie es ein bisschen schwierig finden, tun die Leute oft, dass sie kein interaktives Dropdown-Menü erstellt interaktives Dropdown-Menü nur um etwas zu sein , das so aussieht Also werde ich das rausziehen und auseinandernehmen. Und sie werden das einfach tun, sie werden das und das zeigen. Und dann haben sie vielleicht ein anderes Menü mein Design zerstört. Copy Paste das, Leute da raus. Und ich mache das nur, um ein Dropdown-Menü anzuzeigen. Weil der Entwickler es erstellt hat, verwenden wir JavaScript-Wahrscheinlichkeit, um Ihr Menü zu erstellen. Und ich muss nur die Bilder dafür sehen. Und Ihre Stakeholder müssen möglicherweise nur sehen, wie eines Ihrer Menüs aussieht. Dropdown-Spiel, ich habe diese anderen Schaltflächen und du zeigst nur, wie das zum Beispiel so funktioniert. Und das war's. Es gibt keine Komponenten, keine Instanzen, keine Swaps, keine Varianz, die nur diese Version zeigen Aber es ist wirklich gut, diese Art von Prototypen und interaktiven Versionen zu zeigen , anstatt nur eine ästhetische Version . Okay, das ist es für die andere Art, Dropdown-Menüs zu erstellen, ganze Menge ähnlicher Komponenten, aber eine andere Implementierung, kein richtig oder falsch Und in der Community findest du Dinge , die beide Versionen verwenden. Und es ist gut zu wissen, wie sie hergestellt werden, damit Sie die Arbeit anderer verwenden und sie im Urin wirken lassen können . In Ordnung, das ist es. Wir sehen uns im nächsten Video. 144. Kursprojekt 17 - Verschachteltes Dropdown-Menü: Hallo alle zusammen. Es ist Zeit für Klassenprojekte. Ich möchte, dass du es zu einem verschachtelten Dropdown-Menü machst. Mir macht es auch nichts aus , wie du es machst. Die letzten beiden Methoden haben wir uns angesehen, aber es wird die knifflige sein, bei der wir ein zusätzliches Untermenü haben Okay, also mach den ersten wenn du auf eine Schaltfläche klickst, die herunterfällt, aber sie wollen keines der Elemente sehen. In der Lage sein, es zu erweitern, um Ihnen ein anderes Menü anzuzeigen. Nur für den Fall, dass ich es falsch erkläre. Diese Schaltfläche mit Menü, mit einem anderen Menü, das erscheint Ich möchte, dass du es einfach so erstellen kannst, wie ich es getan habe, aber ich möchte, dass du nachschaust und ein bisschen über die Benutzeroberfläche des Dropdownmenüs recherchierst Das ist der Begriff, den Sie für die verschiedenen Stellen verwenden würden . Ich habe dir zu Beginn des Kurses einige Orte gezeigt, an denen du suchen kannst, wie diesen letzten Link hier oben, K Dribble Behance, Screen Lane, Page Collective, Mob, und es gibt viele Orte, an denen du nachschauen kannst, sogar eine Google-Suche, nur um eine Vorstellung davon zu bekommen , wie du sie verwenden könntest Außerdem, wenn Sie in Ihrem Leben bereits ein Dropdown-Menü erstellt haben in Ihrem Leben bereits ein Dropdown-Menü und es anders strukturiert ist Du denkst, du wirst sagen, es ist anders oder besser, oder Teile davon sind besser. Ich würde diese Version auch gerne sehen. Zeig uns das in der Einreichung und lass es uns auch in den Kommentaren wissen. Es gibt mehrere Möglichkeiten, ein Dropdown-Menü zu erstellen. Okay, mach ein Bildschirmvideo von dir, wie du dein Menü benutzt , und lade dann den Link zum Abschnitt Aufgaben hoch. Teile es in den sozialen Medien, hashtagge es mit Figma Advanced und stelle sicher, dass du mich an den verschiedenen Stellen taggst Und denken Sie natürlich daran, auch die Arbeit einiger anderer Leute zu kommentieren . Das ist das Minimum. Sie können einen Teil der Arbeit kommentieren, mindestens jedoch zwei. In Ordnung, viel Spaß und Schmerz. Erstellen Sie Ihr verschachteltes Dropdown. Wenn Sie auf Probleme stoßen, schreiben Sie Ihre Notizen in die Kommentare. Wenn du es getan hast, sieh in den Kommentaren nach und sage: Wenn du jemandem helfen kannst, werde ich versuchen, auch da reinzuspringen. Gemeinsam erstellen wir ein verschachteltes Dropdown-Menü. In Ordnung, das ist es. Genieß es. Das sind keine Hausaufgaben. Ich werde es im nächsten Video sehen. 145. So erstellst du einen Hover-Grow-Effekt für Bilder in Figma: Hallo alle zusammen. In diesem Video machen wir diese Art von Hover-Ding, bei dem sie ein bisschen einblenden und ein bisschen größer werden , wenn du über den oberen Rand rollst Warum ist dieses Video so lang? Das liegt daran, dass ich dir etwas zeigen möchte , bei dem wir es wirklich einfach machen, aber dann wollen wir weiter Dinge hinzufügen. Wir wollten sowohl verblassen als auch wachsen. Und wir wollen in der Lage sein, darauf einzugehen, ein Plugin zu öffnen und einfach schnell zu sagen, okay, ich will eine neue Reihe von Bildern, in denen wir alle männlich sein werden, und dann auf Alle anwenden klicken Es wird sagen, möchtest du dich auf den Bildbereich bewerben , den sie alle aktualisieren? Vielleicht muss der Text geändert werden. Okay, lassen Sie uns den Vornamen oder den Vor- und Nachnamen eines beliebigen Benutzers ändern Das ist, klicken Sie auf Alle anwenden, wenn Sie möchten, dass es auf die Komponenteneigenschaft mit dem Namen des Künstlers angewendet wird, Sie sagen, Ja, lassen Sie uns das machen. Das Gleiche gilt für das Land. Und wir wollen, dass alles funktioniert, wenn es fertig ist. Deshalb möchte ich Sie durch ein bisschen führen , nicht nur, dass wir am Anfang die Sache mit dem Image Grow machen am Anfang die Sache mit dem Image Grow , das ist wirklich einfach. Aber ich werde immer Ebenen von Dingen hinzufügen , die wir tun wollen. Und wir werden immer wieder auf Probleme stoßen und versuchen, Probleme gemeinsam zu lösen Denn manchmal ist dieser Kurs ein bisschen wie, hey, so macht man das. Es ist super einfach. Warum machst du es nicht so super einfach? Die Wahrheit ist, am Ende baue ich etwas so, wie ich es für gut halte. Und dann denke ich irgendwie, oh, und das will ich auch machen und das macht die andere Sache kaputt , die ich mich so gemacht habe, als ob er okay wäre. Und dann sagst du, oh, ich möchte das auch machen und dann möchte ich, dass es für andere Leute wirklich einfach ist, es zu benutzen. Und du würdest gerne, du landest in diesem Kaninchenbau , indem du es so machst, wie du denkst, dann ein bisschen mehr Komplexität hinzufügst, es kaputt machst, es repariert. Ich denke, das ist eher ein realistischer Ansatz für die Art und Weise, wie ich arbeite, wenn ich Komponenten in Figma ausbaue und ich rede, das Video ist schon zu lang, aber ich hoffe, es gefällt euch. Frau Jumping. Um loszulegen. Ich habe nur einen Rahmen, der die Quadratwurzel ist, und hier einen Rahmen, den Sie als automatisches Layout sehen können. Und ich habe etwas Text drin, um Textzeilen zu trennen. Hey, füge seinen Namen und sein Herkunftsland hinzu. In Ordnung, lassen Sie uns unsere Reise beginnen. Das hier, ich füge einfach ein Bild ein. Also werde ich zu Fill gehen, ich werde nicht solide gehen. Du bist ein Bild. Wähle ein Bild und schon hast du Übungsdateien. Es gibt Künstler 1.2. Du musst es rausbringen. Nur einer. Okay, es wird gut werden. Ich werde ein Duplikat davon machen , weil ich wahrscheinlich sowieso irgendwann oder nach meiner Gewohnheit eine andere Version erstellen werde. In Ordnung, lassen Sie uns das in eine Komponente umwandeln. Geben wir ihm einen Namen, einen Künstler, okay? Und ich möchte zwei Varianten davon haben. Und das untere hier, ich werde den Trick anwenden, mit dem ich hineingehen kann , Options-Doppelklick. Ich werde es auf Crop umstellen und versuchen, den Rand zu finden, was schwierig sein kann. Halten Sie die Wahltaste auf meinem Mac, Alt-Taste auf einem PC und die Umschalttaste gedrückt. Okay, ich werde es einfach ein bisschen vergrößern und sehen, wie das läuft. Versuchen wir, eine Instanz davon zu bekommen. Und ich werde mir das in der Vorschau ansehen und es wird nicht funktionieren. Warum nicht? Das stimmt. Ich habe die Interaktionen nicht hinzugefügt. Okay, das ist mein erstes kleines Problem. Also kann ich das machen. Shift E, du gehst auf Tippen zu ihnen, während du den Mauszeiger bewegst. Ich möchte, dass Sie diese Variante auf den Namen Kovarianz ändern . Unterwegs. Klicken wir auf die Eltern, um zu Design zu gelangen. Ich sage in den Einstellungen hier, das wird mein Status sein und es wird eine Standardeinstellung und einen Mauszeiger geben Jetzt werde ich eine Vorschau ansehen und sehen, wie es uns geht. Oh, sieh dir das an. Das einzige, was wir nur sicherstellen müssen, ist die Interaktion stattfindet, ist, dass wir sie auf Smart und Animate setzen Ich habe meinen sanften Kommandanten geändert, okay, also lasst uns die Arbeit erledigen, oder? Das Problem wird darauf stoßen wenn ich sage, ich will ein Vielfaches davon, solange du sagst, du und dann noch ein Set, was würdest du, wenn du ihr Duplikat hättest, ein bisschen verrückt Okay, also habe ich ein paar davon. Ich werde sie alle auswählen. Ich werde das Plugin verwenden. Ich werde den verwenden, der Content Real heißt und ihn bereits geöffnet hatte Das ist Command Option P, Control Alt P auf einem PC. Um das letzte zu öffnen, verwende das Plugin mit Content Real , weil es sehr praktisch ist. Ich gehe auf Bild und sage, ich möchte, dass ein paar Fotos auf sie alle zutreffen. Und es wird „ Ebene auswählen“ stehen und du sagst, Oh, wow, in Ordnung, probiere es aus. Ich werde diese Ebene sagen. Los geht's. Wende das an. Kann ich mehrere machen? Ja, halten Sie Shift, Shift und Command gedrückt, gehen Sie irgendwie rein und schnappen Sie sich all diese und jetzt werden wir sie alle spielen. Hervorragend, jetzt ein Zeichen. Deshalb werde ich hier eine Vorschau dieses Flows anzeigen. Oh, erstes Problem. Okay, Sie könnten also zurück zu dieser Option gehen und sagen, wir kopieren die Eigenschaften. Denken Sie an die Befehlsoption C und dann die Alt-Z-Taste auf einem PC. Ich kann sagen, dass Sie in der Entwicklung einen anderen Schwebezustand haben Und dann könnte ich in diesen Zustand gehen und dann diesen Status einfügen , der dieselben zwei Abkürzungen plus V hat . Und jetzt wird es funktionieren Alle Badaga erklimmen das. Jetzt. Natürlich wir selbst. Wir geraten in eine Sackgasse. Ich zeige dir, wie du dich zurechtfindest. Nicht so sehr wie der offizielle Weg, aber wenn Sie nur auf Probleme stoßen sie im Laufe der Zeit beheben, werden Sie vielleicht feststellen, dass diese ursprüngliche Option, die wir gerade mit einer Person auf und ab skaliert haben, Sie skalieren jeden von ihnen. Ich möchte etwas haben bei dem, wenn ich ein Bild aktualisiere, beide aktualisiert werden. Im Grunde wollen wir hier etwas haben , das sich auf beiden befindet. In dem Moment, in dem es sich um zwei separate Bilder handelt, wollen wir daraus eine Komponente machen, zwei Instanzen davon haben. Das wird also die Lösung sein. Also LEDS, es versteckt dich. Ich bin mir nicht sicher, ob wir dich brauchen. Was ich tun möchte, ist, dass ich einfach darauf doppelklicke eine Version davon herausziehe. Okay, es ist kein Fall, es ist nichts. Ich habe es einfach rausgezogen, weil ich die Form haben will und ich werde das in eine Komponente umwandeln Ich benenne es um und nenne diesen einen Fehler Und dann ziehe ich eine Instanz heraus und kopiere sie. Und ich sage, Sie fügen sie ein und platzieren It's Command Option Shift V, Control Alt Shift V auf BC. Oh Mann, für diesen hier sind die gleichen Abkürzungen, sodass es sich um zwei Instanzen handelt , die mit derselben Komponente verknüpft Du musst das nicht. Instanzen sind die Hauptkomponente. Hoffentlich werde ich das umgehen, wenn wir eines aktualisieren, wir aktualisieren beide Mal sehen, ob das funktioniert. Okay, aber zum Ausprobieren habe ich sie alle ausgewählt. Ich sage Open Content, echte Bilder, wahrscheinlich werde ich Fotos sagen. Wählen Sie die Ebene aus. kann ich machen. Also Command and Shift, und ich klicke auf all diese Befehle und Shift, das ist Strg und Shift auf einem PC. Okay, alles anwenden. Es gefällt ihm nicht mehr so wie früher. Weitere Probleme , weil es sich nicht in die Füllung unserer Instanz einarbeiten kann. Das können wir aber, anstatt nur mein Chef zu sein, hat dir gesagt, dass es quasi zwei Möglichkeiten gibt , Bilder hinzuzufügen Du kannst es als Füllung verwenden oder lass uns das loswerden. Es kann ein Bild sein, das sich in unserem Rahmen befindet. Bringen wir also ein Bild ein. Also werde ich Künstler reinholen, ich werde es als zwei herausbringen. Jetzt. Ich werde meine Shift-Taste gedrückt halten , um sicherzustellen, dass es die richtige Größe hat, die richtige Größe. Ich stecke es da rein. Der Unterschied zwischen dem. Oft, wenn wir komplizierte Bilder machen, ist es schön, einen Rahmen zu haben, in dem sich etwas wirklich Tastbares befindet, das wir skalieren und bewegen und Dinge tun können skalieren und bewegen und Dinge tun Schauen wir uns jetzt an, wie das funktioniert. Lassen Sie uns zunächst sehen, was passiert. Es passiert nichts. Also funktioniert mein Hover? Das ist es, aber es gibt einfach keinen Unterschied zwischen den beiden. Also, was ich tun werde, ist, dass ich in diesen hineingehe, in den Kopfschuss. Okay. Und da ist ein Auto S1 und kann ich es einfach skalieren, sagen wir K? Und weil wir sie innerhalb der Instanz nicht skalieren können. Noch mehr Ärger. Versuchen wir es mit dem Elternteil. Gehen wir Shift Enter. Okay, um das Elternteil zu nehmen, vielleicht einfach das hochskalieren, sodass das Keto auf jeden Fall 1,05 Bit größer sein kann Mal sehen, ob es funktioniert. Zuallererst Hover nicht. Okay, ich habe dich. Das geht zu ihrer Vorschau. Auffrischen. Es ist irgendwie feuchtigkeitsableitend Etwas stimmt damit nicht. genieße es nicht, nachdem ich es mir eine Weile angesehen Ich habe Figma einfach geschlossen und wieder geöffnet und dann hat es gut funktioniert Das war komisch. Ich werde das im Kurs ausgleichen, weil es Zeiten gibt, in denen ich einfach wieder rübergegangen bin und ich dachte, schien zu funktionieren und ich musste einfach schließen, um ein Backup zu öffnen, es irgendwie kaputt zu machen und wir machen uns Es liegt irgendwie außerhalb des Geltungsbereichs. Okay. Also, wie können wir das beheben? Okay, kann ich es also in die Eltern stecken? Also habe ich diesen Hover bekommen, meinen Hover-Rahmen hier herausgenommen. Es hat eine Grenze an der Außenseite. Lass es uns abschneiden. Okay, los geht's. Mal sehen, ob das funktioniert. Und es funktioniert irgendwie. Du kannst sehen, dass es ein bisschen Geisterbilder gibt, weil es bei diesem Video keine Ausschnitte Und es versucht irgendwie, in diesen hineinzuwachsen. Es ist also irgendwie hier abgeschnitten, nicht hier abgeschnitten. Und da es um halbe Clips wächst und halb nicht, verdunkeln sich beide. Schauen wir uns Vorschau an, Vorschau. Moment arbeiten wir Im Moment arbeiten wir da unten. Kannst du den Namen sehen? Hängt davon ab, wie du das machen willst. Will ich das vielleicht oben nach unten haben, hat er es mit diesem gemacht. Lass mich meine eckige Klammer benutzen. Komm bis ganz nach oben. Mach es kaputt, es würde funktionieren. Hast du nicht gesehen, dass sie irgendwie hin und her springen. Es mag es nicht, wenn mehrere Schichten fehlen. Ich möchte, dass die Schichten auf beiden gleich sind. Hier. Frame 37, was ein schrecklicher Name ist, lass uns ihn umbenennen Okay, das ist mein Künstler-Textblock. Dieses hier muss auch als Textbox aufgerufen werden und sie müssen in derselben Ebenenreihenfolge sein Kannst du sehen, dass es über dem Headshot sein muss , damit die Gruppe zu dieser Gruppe passt? Wir gehen. Also mehr herumfummeln und reparieren. In Ordnung, lassen wir es einblenden, weil ich weiß, dass es dort wahrscheinlich auch ein Problem geben wird. Okay. Also, was wir in der Vergangenheit früher gemacht haben, lassen Sie uns einfach sicherstellen, dass diese Öle aktualisiert werden, wenn ich sie wechsle. Das ist ein weiterer guter Punkt. Wählen Sie also all diese aus, bis mein Plugin nicht geöffnet wurde, weil ich Figma geschlossen und erneut geöffnet habe Jetzt funktioniert meine Abkürzung danach. Er hat mindestens einmal geöffnet, ich gehe Bilder, ich klicke auf Fotos und ich werde alles anwenden. Und jetzt kann es tatsächlich auf das Bild zugreifen, das sich darin befindet. Wir sind ein bisschen abgelenkt. Anstatt also eine Füllung zu sein, müssen wir versuchen, alles auszuwählen. Nun, da ist tatsächlich diese Einheit , die sich innerhalb des Rahmens befindet. Wenn ich Einheit sage, meine ich das hier drüben, denken Sie daran, dass es sich nicht nur um einen Rahmen mit einer Füllung handelt. Es ist ein Rahmen, in dem dieses Bild tatsächlich physisch drin ist, dieses kleine Symbol dort. Okay, vielleicht haben wir es platziert und in den Rahmen gezogen. Schauen wir jetzt, ob es funktioniert. Ah-ha, es funktioniert. Es fehlen ein paar Bilder, die jetzt geladen wurden. Nett, sind einfach zu aktualisieren. Skalieren Sie ein wenig. Lass uns das Fade machen. Also ich könnte hier reingehen, weiter reingehen und ich kann Füllung auftragen. Mal sehen, ob das funktioniert. Also eine zusätzliche Füllung, wie wir es zuvor gemacht haben. Es funktioniert nicht. Okay. Also, wie machen wir das? Es ist also über allem, was Deckel hat. Es ist vielleicht Arbeit mit dem Bild. Okay. Und sagen wir, das Bild wird die Belichtung verringern. Lass uns das versuchen. Geh hier hin. Auffrischen. Was es getan hat, ist es noch mehr kaputt gemacht. Du kannst diesen Übergang zwischen oder im Moment nicht machen, zumindest nicht diesen Expositionsübergang zwischen den beiden. Es sieht darin ein anderes Bild. Liegt das jetzt daran, dass wir diese Änderungen vorgenommen haben. Ordnung, wir können mit den Anzeigen leben, mehr Workarounds. Wie bringen wir das zum Laufen? Ich musste schon darüber nachdenken und bin irgendwie auf das Problem gestoßen Also tue ich so, als ob ich denke, okay, ich füge unseren Rahmen Eigentlich möchte ich, dass der Rahmen die gleiche Größe hat wie dieser. Am Ende dupliziere ich also eine Instanz, zerbreche sie und entferne das Bild auf der Innenseite Gib ihm eine Füllung, die ich will. Ich gebe meinem Schwarz, sagen wir, 0,22$, benenne es um und nenne es Fade Und ich werde das in diesen hineinlegen , damit sie auf beiden sind. Und dann kann ich hoffentlich einfach zu dir gehen und sagen, ich habe das gewählte Fade vergessen. Hab ich nicht, da ist die Verblendung. Nehmen wir an, der Fade ist auf Null Prozent gesetzt. Wird das kaputt gehen? Verblasst dort von Anfang an und es verschwindet. Glückliche Tage. In Ordnung, lassen Sie uns einfach sicherstellen , dass wir es jetzt aktualisieren können Wählen wir sie also alle aus. Denken Sie daran, dass wir versuchen, dies für unser Team nützlich zu machen , damit es das nutzen kann, was es nicht kaputt macht. Mal sehen, ob sie einfach neue Bilder auswählen können. Männliche Werbung. Jetzt können wir graben und die Schicht auswählen, die cool ist. Mal sehen, ob es funktioniert oder funktioniert. Okay, die andere Sache, die wir wahrscheinlich umbenennen müssen, ist, dass die Instanz tatsächlich umbenannt werden kann Also hier, dieser Fade, da ist dieses Ding. Können wir ihm einfach einen anderen Namen geben? Lass es uns abkühlen, Bild. Wenn wir das jetzt aktualisieren, ist es vielleicht etwas klarer. Jedes Mal eine andere Option auswählen. Ja, ich kann mir das Bild einfach schnappen. Nett. Vorschau, es funktioniert. Aber er verschwindet richtig und skaliert. Und einige der letzten Kleinigkeiten, um das aufzuräumen, werden darin bestehen, zu unserer Komponente hier zurückzukehren Ich setze die Komponenten ein und lass uns einen schönen Künstlernamen eingeben. Also wähle ich einen Künstlernamen aus. Okay, und wir werden Komponenteneigenschaften verwenden weil ich in der Lage sein möchte, den gesamten Text hier einfach zu aktualisieren , indem ich ihn einfach eintippe und hoffentlich einige dieser Plugins verwende um sie irgendwie vorab auszufüllen Warum müssen Sie also nicht den Namen des Künstlers sagen, die Inhaltsoption finden Sie hier. Okay, lassen Sie uns eine Komponenteneigenschaft erstellen und sagen, ich möchte, dass der Name ein Künstlername ist. Es wird den Standardwert des Künstlernamens haben. Das ist in Ordnung. Das Gleiche gilt für diesen hier. Okay. Ich werde sagen, du hattest keine Schande. Wir werden ein neues erstellen. Das ist das andere in zwei separaten Textfeldern, das wir in das Land eingeben werden . Hervorragend. Hoffentlich kann ich sie jetzt hier alle auswählen und sagen: Schau, ich kann den Künstlernamen in Dan Scott ändern, der in Neuseeland lebt, eigentlich aus Neuseeland, der in Irland lebt. Lass es uns testen. Es ist kaputt. Okay. Wir sind also nur in eine der beiden Instanzen eingestiegen. Okay? So lustig, gemacht in eine der beiden Varianten. Okay, sie sehen genauso aus, aber hier drüben. Wenn ich also auf einen Künstler namens Kesey klicke , hat das so etwas wie eine Pastille, ein schreckliches Wort, ein rundes, abgerundetes Rechteck Es ist wie ein kleines Etikett , das sagt, dass das angebracht ist. Ich muss eine Eigenschaft erstellen, diese hier, Command- oder Ctrl-Klick hat sie nicht, aber ich habe schon eine erstellt. Ich kann dasselbe für ein EU-Land anwenden. Also sollten sie jetzt zusammengebunden sein . Lassen Sie uns eine Vorschau geben. Alles, was ich verstehe, ist nett. In Ordnung, Team, aber es ist ein kleiner Sprung. Ich weiß, aber ich habe vergessen, dir einen der Coupons zu zeigen, ist dass ich jetzt alle auswählen und sagen kann, ich verwende das Plugin und ich sage Text. Und weil wir diese Komponenteneigenschaften hinzugefügt haben, kann ich sagen, lassen Sie uns den Namen der Personen zuerst und zuletzt eingeben. Ich setze mich hin und bewerbe mich für alle und es heißt: Welches möchtest du, füge zwei hinzu und füge es zum Künstlernamen hinzu. Vielen Dank. Schau dir das an. Sie werden es aktualisieren. Ich bin jetzt Ralph Edwards Ich gehe zurück. Ein anderes ist Firma, kein Land. Hier gibt es alle möglichen Optionen. Nehmen wir an, auf alle anwenden Welches eine Ursprungsland. Schauen Sie sich das Vereinigte Königreich Großbritannien an, Männer, das haben sie lange gehört. Aber etwas, für superlange Namen muss man bereit sein. Es ist immer das Vereinigte Königreich von Großbritannien, das einfach Großbritannien geschrieben wird Da haben wir's. Problem gelöst. In Ordnung, lass uns mit dem Video weitermachen Ich habe nur vergessen, dir das zu zeigen , bis zum Ende. Mach weiter. Jetzt kann ich das in meine Master-Komponentenbibliothek verschieben , die Bibliothek aktualisieren und entweder in Zukunft ich, alle Leute, mit denen ich zusammenarbeite, oder vier können gehen, um sich die Bibliothek anzusehen. Okay. Meins ist immer noch hier auf Seite eins, aber sie können es auf die seltsamste Weise ausprobieren Sie ändern den Namen, das Land, und jetzt ändern sie das Bild. Entweder mit dem Plugin, zufällige Leute, es wurde getestet, du arbeitest, oder sie können es manuell machen. Ich kann es kaum erwarten, dass das eine Komponenteneigenschaft für Bilder wird. Ich kann mir vorstellen, dass es bald draußen sein wird. Behalte das im Auge, falls es nicht schon da ist. Wenn ich es manuell machen wollte, okay. Normalerweise kann ich mit der Befehlstaste klicken und einfach hineintauchen oder so. Aber in dem Moment, in dem ich diese Fade habe, steht mir das im Weg. Was wir also tun könnten, ist Lockett, okay, also ich kann einen Befehlsklick darauf ausführen um direkt reinzuspringen und das Bild zu ändern Und das ist ein gutes Argument, okay, anstatt es auf der Instanz zu machen, irgendwie freizuschalten, werde ich zur Hauptkomponente gehen, was in diesem Fall ist, dass was in diesem Fall ist das Fade vom Headshot kommt, der sich im Künstler befindet , der dann an meine Instanz weitergegeben Ich kann sagen, sperre das, damit ich es nicht ändern kann. Wenn sie eine andere Instanz herausziehen, können sie mit der Befehlstaste klicken und ich umgehe das Ausblenden mit einer Sperre, kann direkt zum Bild gelangen und es manuell aktualisieren Du brauchst ein bisschen Kohlenstoff. Okay, und lassen Sie uns eine Vorschau ansehen. Du siehst dir das einfach wiederverwendbar an, es hat ein bisschen Zeit gedauert, aber manchmal lasse ich diese Tutorials wirklich einfach erscheinen, als ob ich alle Antworten habe und oft gibt es eine Menge Testversuche im Labor. Das funktioniert und füge dann ein bisschen mehr hinzu. Und jetzt funktioniert es nicht . Wir haben ein cooles Emoji-Ding mit Gesichtern Wir haben ein paar Möglichkeiten gefunden, das zu tun. Möglicherweise müssen Sie für das, was Sie tun, nicht so weit gehen . Aber ich finde es interessant, ich weiß nicht, Probleme, Lösungen, mehr Probleme, mehr Lösungen für etwas zu sehen ich weiß nicht, Probleme, Lösungen, mehr Probleme, mehr Lösungen für etwas zu , das am Ende hoffentlich funktioniert. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 146. Kursprojekt 18: Hover-Grow-Effekt: Ich hoffe, er bringt uns nicht dazu, Ding mit dem Schwebewachstum für ein Klassenprojekt zu machen, Überraschung, Zeit für Klassenprojekte, Hover-Grow-Effekt Und du musst nicht gehen, wie Kern und irgendwie schlängelnd ich gegangen bin, aber ich möchte, dass du dich selbst testest , dir eine Idee einfallen lässt, dir ein Design einfallen lässt, es zu den Dingen bringst, die du brauchst, ist, dass du Text brauchst, der irgendwie Wir hatten den Namen des Künstlers und das Herkunftsland. kannst du gegen etwas anderes ändern. Ich weiß es nicht. Ich habe versucht, mir andere Ideen auszudenken , die in diesem Genre gemacht werden können, mir nicht sicher, wie wichtig das Herkunftsland ist. Ich möchte sie und mit diesen Textteilen nur, ich möchte, dass du sicherstellst, dass es Komponenteneigenschaften gibt , sodass die Instanzen einfach im Eigenschafteninspektor geändert werden können , ich meine so, aber du kannst hier rüber gehen und diese Komponenteneigenschaften einfach sehen und aktualisieren. Ich möchte, dass du das Image wachsen lässt. Du kannst es auch verblassen lassen. Du kannst es dazu bringen, alles zu tun, was du willst. Zum Beispiel hat sie es nicht getestet, um zu sehen, ob du auf irgendwelche Probleme stößt , wenn du es gemacht hast Ich möchte, dass du mit dem Mauszeiger drüberfährst. Ich möchte, dass du eine Aufzeichnung von dir schickst, wie du das tust. Okay, es gibt also zwei Teile, oberen Screenshot der Ansicht, der Mauszeiger bewegt sich und macht sein Ding Und auch ein Screenshot von diesem Teil hier drüben , der so etwas macht wo Sie das ausgewählt haben, machen Sie einen Screenshot von all dem, damit ich Ihr aktuelles Bild sehen kann, ich zeige auf meinen Computerbildschirm hier, ich zeige auf meinen Computerbildschirm hier, aber auch über den Eigenschafteninspektor, über den Spieß und laden Sie beide hoch Das Video Ich hätte gerne einen Link-Screenshot. Sie können sie einfach direkt hochladen und in den Bereich Aufgaben hochladen. Für diejenigen, die keine Videos machen können, machen Sie einfach ein paar Vorher-Nachher-Screenshots von klein und groß, das wird funktionieren Sonst noch etwas? Screenshot deiner Instanz, kleines Video von dir, wie du damit Regie führst, ein bisschen recherchieren oder wie du das gestalten könntest Sie werden wahrscheinlich keine Künstlerkarte finden, aber Sie werden so etwas wie Headshots oder Biografien finden Avatare der Benutzer schauen sich lassen sich etwas Interessanteres einfallen als mein grünes Kästchen mit schwarzem Text Wenn du es einmal gemacht hast und es auch in den sozialen Medien geteilt hast, liebe es, es zu sehen. Stellen Sie sicher, dass Sie den Hashtag Figma Advanced verwenden, und stellen Sie sicher, dass Sie anderen Menschen helfen In Ordnung, viel Spaß damit, Bumper für alle Probleme. Schau, ob du sie reparieren kannst. Wenn du einen besseren Weg findest, das zu erstellen, was ich dort gemacht habe, kennen sie nur die Kommentare. Ich wette, es gibt 100 verschiedene Möglichkeiten, das zu tun. Viel Spaß beim Lernen. Und wenn du fertig bist, sehe ich dich im nächsten Video. 147. Wie man eine erweiterte Suchleiste in Figma erstellt: Hallo alle zusammen. In diesem Video machen wir das. Es ist das Suchsymbol in einem Kreis, aber wenn ich darauf klicke, wird es erweitert. Der Text sieht nett aus. Es hat ein bisschen Schwung. Lass mich dir zeigen, wie man das in Figma macht. Zunächst schaue ich mir meine wichtigsten Stile und Komponenten an . Ich sollte meine Hauptkomponenten hier erstellen und sie dann in die verschiedenen Designdokumente einfügen, indem in die verschiedenen Designdokumente ich die Schattenbibliothek wirf. Okay, also lass es uns so machen. Und ich habe hier einen Rahmen, der nur als Platzhalter für die Größe dient, dass ich diese Suchleiste benötige, und ich habe diese beiden Teile Ich werde beide auswählen. Also nur ein Symbol, ein bisschen Text. Ich werde die Opazität dieser 15 auf Ihrer Tastatur verringern, um sie auf 50 Prozent zu senken. Beide schalten a, damit unser Autolayout kein automatisches Layout sein muss, aber wir mögen Autolayouts, weil wir damit Dinge wie Padding machen unser Autolayout kein automatisches Layout sein muss, aber wir mögen Autolayouts, weil wir damit können Vielleicht bist du 16, Tab acht. Okay, und ich werde es auffüllen. Ich werde Weiß verwenden, weil ich hier ein cremefarbenes Weiß auf dem Hintergrund habe Ich werde wahrscheinlich einen Schlagschatten oder eine Linie an der Außenseite benötigen . Etwas. Die andere Sache, die ich machen möchte, ist, dass es rund wird, weil mir diese Art des Hin - und Herspringens in diesen Kreis gefallen hat - und Herspringens in diesen Kreis Okay. Also zieh das nach oben, du kannst es weiter rausziehen, oder? Okay. Du willst, dass ich weiter zu einer hohen Zahl K gehe, damit sie perfekt rund ist. Ich tippe einfach 100 ein. Es ist viel mehr als ich brauche, aber es macht es zumindest perfekt rund. Cool. Als Nächstes möchte ich diese Komponente erstellen. Möchte ich das zuerst machen? Ich denke nicht, dass es wichtig ist. Machen wir es zu einer Komponente. Geben wir ihm einen Namen. Suchleiste. Ich werde es zunächst in die richtige Größe bringen. Ich sage, du gehst so raus. Das wird wahrscheinlich nötig sein, legen wir es in einen Schlagschatten. Fangen wir mit Schlagschatten an, und ich zeige Ihnen gleich einen Strich. Schlagschatten, der 111 zur Opazität zehn ergibt. Reicht das? Wahrscheinlich nicht. Nur Ältester. Also dieses Ding muss jetzt variiert werden, okay, also von Komponente zu Variante, diese erste muss heruntergetrimmt werden Und es sollte funktionieren, wenn ich weiß, dass es kein Clip ist, der das in einer Sekunde ausschneidet Clip ist, der das in einer Sekunde ausschneidet Schauen wir einfach, ob die Mechanik funktioniert. Also Schicht E, ich sage , du bist hier oben in der Leiste, wir wollen das Elternteil. Wir möchten, dass diese Standardeinstellung angezeigt wird, wenn darauf geklickt wird. Wechseln Sie zur Variante, um Smart Animate zu verwenden. Und ich werde es verwenden, wenn wir es benutzen werden. Und wenn es andersherum zurückkommt, verwende ich Not Bouncy Lass uns schnell verwenden. Lass es uns testen. Lassen Sie also unsere MainComponent hier draußen. Schnapp dir Instance, nicht die ganze Sache. Also diesen Teil hier, du kannst kein Duplikat machen. Du kannst, ich bin im Prototypenmodus, Umschalten des Vektordesign-Modus macht die Sache einfacher. Lassen Sie uns also eine Vorschau geben. Also ihr alle Es funktioniert irgendwie. Der Kreis funktioniert. Was wir für den letzten Teil tun wollen, ist , dass wir dir hier das Beste sagen wollen. Wir könnten einfach sagen , dass dies so eingestellt ist Command Shift H oder Control Shift H ausgeblendet wird. In diesem Fall ist es also versteckt, aber sie sind auf diesem , das Sie sich ansehen. Also du ja, ja. Jep. Funktioniert irgendwie, aber es wird eingeblendet. Und der Bounce gefällt mir immer weniger. Also schalten wir den Bounce aus. Lass uns schnell gehen. Und einen auf der weißen Rückseite, den wir auch schnell benutzen werden. Okay, also lass es uns versuchen. Du, es funktioniert überhaupt nicht. Alpha-Aktualisierung. Gehen Sie zurück zu dieser Seite und stellen Sie fest, dass Sie, anstatt den Flow am Prototyp zu starten, damit wir das können zumindest wenn wir auf Aktualisieren klicken, zu dieser Seite hier zurückkehrt. Es funktioniert immer noch nicht. Cool. Was habe ich kaputt gemacht? Hast du eine Idee? In Ordnung, wir sind zurück. Ja. Einfach schließen und öffnen. Es schien das Problem zu beheben. Ich habe mehr Probleme in diesem Kurs und das habe ich normalerweise in Figma, normalerweise ist es sehr unzuverlässig und du findest es vielleicht super zuverlässig für Aber manchmal müssen Sie es aus- und wieder einschalten. Schauen wir uns das an. Was wir tun wollen, ist, anstatt es zu verstecken, schauen wir uns das an und probieren es aus. Lassen Sie uns den Augapfel wieder auf die Standardeinstellung stellen. Dreh den Augapfel zurück. Was wir tun werden, ist eigentlich nur die Standardvariante zu sagen. Wir gehen zur Design-Ansicht und sagen Clip-Inhalt. Und schauen wir mal, ob es funktioniert. Testen Sie weiter. Und es funktioniert irgendwie. Sie können sehen der Editor eine seltsame Pixelisierung hineinzoomt Das ist etwas, das früher nie passiert ist. Was passiert jetzt? Ich wette, wenn du es benutzt, passiert es nicht. Ich glaube, ich weiß, was es ist. Ist das hier, an dem wir sitzen und ausschneiden, und wir haben es nicht getan, es braucht es nicht wirklich, aber es wechselt nicht gerne zwischen den beiden hin Schauen wir uns das an. Diego. Jetzt ist es nett. Okay, also ein paar Dinge sind, dass es abgeschnitten ist, was großartig ist Und was ich wahrscheinlich in dieser Version machen möchte, also Command-Klick, eigentlich bin ich zu weit in den Vektor gegangen. Ich möchte die Komponente meiner kleinen Lupe haben und kann sie nicht verschieben, weil sie sich in einem automatischen Layout Sagt, dass wir vielleicht nicht das Autolayout verwenden und nur einen Rahmen verwenden, in dem sie sitzen. Wir können dafür sorgen, dass es funktioniert. Okay, ich kann hier auf diesen klicken. Wenn deins hier oben nicht perfekt abgerundet ist, hat es versehentlich die gleiche Höhe wie die Breite. Deshalb ist es so und es sieht nicht ganz richtig aus. Stellen Sie einfach sicher, dass unabhängig von der Höhe die Breite ist. Jetzt können wir mit dem oberen Polster herumspielen und versuchen, es in der Mitte auszurichten Okay. Sie können es in einzelne Teile zerlegen und aufhören, damit herumzuspielen Das wird den zweiten nicht beeinflussen. Lass es uns jetzt versuchen, sieht besser aus. Wahrscheinlich hätte ich dort auch etwas kleiner gebraucht. Du kannst also eine Waage verwenden, das Keto, ich mache 0,75, aber in der richtigen Größe und spiele mit meinen Eltern herum Also werde ich sagen, dass du 40 bist, aber anstatt dich zu umarmen, werde ich sagen, dass du auch 40 Nun, lass uns mit diesem herumspielen, du bist so, aber ich denke, du bist ein guter Boop, Boop, Boop, Boop Los geht's. Sehr cool. Skaliert nach unten, springt nach unten. Mir gefällt es. Okay, ein Problem, auf das ich stoße ist, mir das anzusehen, anstatt eines Schlagschattens, ich lasse den Schlagschatten Aber wenn ich zu beiden einen Strich hinzufüge, weil wir sagen, dass ich es eigentlich sein wollte , setzen wir einen Strich, geben wir ihm eine Farbe und verwenden meine 300 neutral. Weisen Sie das ab. Und wir gehen. Und bei der gleichen Sache werde ich 300 Schläge machen. Das sind wir. Dadurch wird es auch ein wenig verpixelt. Kannst du sehen, dass das komische Sachen damit macht, ich kann im Moment nicht damit umgehen. Hühnchen für dich. Lass es mich in den Kommentaren wissen, da es mit einem Schlaganfall immer noch dasselbe für dich tut. Ich kann es im Moment nicht schaffen , das nicht zu tun. Du gehst ein bisschen mehr in Position. Nett. Das Letzte, was wir tun werden, bevor wir gehen, ist den Schlaganfall loszuwerden, weil er dadurch hässlich aussieht. Aber wir werden es auch von rechts knallen lassen. Also lasst uns den Schlaganfall schnell loswerden. Geschmeidig. Beide hatten Minus, beide sind weg. Und wir wollen, dass es hier drüben ist . Und lassen Sie uns eine Vorschau ansehen. Es. Funktioniert nicht ganz, drückt irgendwie von der anderen Seite der Standardeinstellungen von links Das können wir also nicht in der Hauptkomponente machen. Wir müssen es in der Instanz machen. Es muss den Eltern-Frame sehen. Und wir können sagen, wir sollten es richtig verwenden, einfach diese Seite benutzen, um loszulegen. Geben wir ihm eine Ziege. Ein Blick auf uns. Nett. Ich muss es anordnen, weil es nicht ganz passt. Und du kannst auf jeden Fall einen Strich machen, als ob er tatsächlich in der App oder auf der Website gemacht wurde. Aber für uns gibt es im Moment nur einen winzigen kleinen Fehler in ihrem Figma Solche Bugs verschwinden einfach mit der Zeit, wenn sie veröffentlicht werden und wenn das Team sie aktualisiert. Aber im Moment liebe ich es. Gab das Letzte. Ich habe es mir angesehen und war gerade dabei, das Video zu beenden und ich dachte, ich kann nicht damit leben, dass das nicht im Mittelpunkt steht. Und dann dachte ich, Oh, bewege ich es einfach weiter und gehe hierher zurück? Ich denke, Nein, das tust du nicht. Was du tust, ist, zu diesem zurückzukehren, okay? Du sagst, scrolle nach oben, finde deine unterschiedliche Varianz. Du ziehst eine benannte Variante , um sie einfach darauf umzustellen. Dann kannst du darauf klicken und es genau in die Mitte bekommen. Okay, dann schalte es zurück auf die Standardeinstellung und sag Magie. Jetzt ist es perfekt aufgereiht. Die letzte, letzte Sache ist, weil ich es auf meine wichtigsten Styles und Komponenten gesetzt habe , ich muss es veröffentlichen. Was ich tun werde, ist, dass ich mir das hole und es in einen eigenen Bereich stelle. In dieser Schicht geht es darum, einen Abschnitt zu erstellen. Okay, ich mache einen Abschnitt, ich werde ihm einen Namen geben, Befehl. Das ist ein Feld. Ich kann mir eigentlich nicht vorstellen, was es sein sollte. Ist es ein Feld? Geht es in andere über? Kopiere das Styling und übertrage es auf dieses. Und ich werde im rechten Teil einen Blick darauf werfen. Da haben wir's. Ich werde es jetzt veröffentlichen. Also denk dran, Option drei, wir haben das schon einmal gemacht, oder? Option drei öffnet es, okay, Alt drei auf einem PC, wie Bibliotheken? Wir werden diese Änderung veröffentlichen. Okay, los geht's, nur eine Änderung. Und jetzt, da dieses Dokument hier ist und ich es verwenden möchte, sollte ich in der Lage sein, entweder zu meiner Schicht I zu gehen und die Suche einzugeben. Suche sogar. Okay, wir gehen zu meinem Assets-Bedienfeld und dann ziehe ich das hinein. Ich werde euch ein bisschen nach unten bewegen. Und dann gehst du. Ich muss das auf diese Variante umstellen, um es gut in die Reihe zu bekommen. Ich muss mir noch etwas anderes merken , wie das geht. Gehen wir zurück zur Standardeinstellung. An wen erinnerst du dich, was ich vorhabe? Das stimmt. Wir sagen Aufzug. Wir werden es wiedergutmachen. Das fängt also hier an. Und dann taucht eine Variante auf. Ist es in der Mitte? Da hast du's in der Mitte. Zurück zu diesem. Sehen wir uns nun eine Vorschau an. Vigo, ich mache es richtig. erstellen die Hauptkomponenten unserer Datei mit den wichtigsten Stilen und Komponenten und stellen sie zusammen mit dem Rest des Teams sicher. Okay, das ist es jetzt eigentlich, ein paar kleine Boni zum Schluss. Weiter zum nächsten Video. 148. Kursprojekt 19: Suchleiste erweitern: Hallo alle zusammen. Hey, das Klassenprojekt für dieses Video ist die expandierende Suchleiste , die wir im letzten Video erstellt haben. Ich möchte, dass du deine eigenen machst. Okay, also in den Klassenprojekten aufgeführt, aber da ist nicht viel dran Mach die Suchleiste, lass es mich in den Kommentaren wissen , wenn du auf irgendwelche Probleme stößt, vielleicht irgendwelche Workarounds, um die Pixelisierung loszuwerden, vielleicht ist das jetzt weg, vielleicht ist das jetzt weg Erstellen Sie also eine Bildschirmaufnahme, auf der Sie es verwenden und mit der Suchleiste interagieren, und laden Sie dann einen Link zum Aufgabenbereich Teilen Sie in sozialen Medien, verwenden Sie Figma Advanced. Das wette ich mit dir. Die Leute lieben es, diesen online zu sehen. Und wenn sie dich fragen, woher du es hast, sagst du: Oh, ich kenne einen Kurs, den du machen solltest. Ich zeige sie auf mich. Wenn du sie hochlädst, markiere mich in den sozialen Medien und achte darauf, dass du anderen Leuten Feedback gibst . Es ist sehr cool. Mann, ich klicke für immer darauf. Ich habe 1.000 davon gemacht, aber sie sind immer noch anklickbar. Ordnung, viel Spaß beim Klassenprojekt, jetzt Hausaufgaben, und wir sehen uns im nächsten Video 149. Was sind Variablen in Figma: Hallo alle zusammen. Hey, im nächsten Abschnitt, okay, nun, in den nächsten beiden Abschnitten werden wir uns Variablen ansehen und ich wollte kurze Übersichtsvideos, in denen ihr sehen könnt , was wir tun werden, um euch hoffentlich kurze Übersichtsvideos, in denen ihr sehen könnt , was wir tun werden, um euch hoffentlich schon früh ein besseres Verständnis zu geben , wozu Variablen fähig sind Es gibt also drei Hauptnahrungsmittelgruppen für Variablen. Es gibt den ersten, wo dieser Prototyp hier ist, sieh dir das an. Wenn ich den Knopf drücke, sieh dir das an, die Zahl steigt. Wenn ich eins zurückgehe, okay, es geht zurück auf Null und du siehst den Einkaufswagen, wenn ich um eins hochgehe, geht es auch nach oben. Und das ist aufgetaucht, es ist alles sehr cool. Und nein, es ist kein Sammelsurium aus einem Haufen verschiedener Frames sondern nur ein Frame mit einigen lokalen Variablen , die wir zuweisen Wir weisen diese Schaltflächen an, diese Variablen anzupassen. Okay, es sieht irgendwie verwirrend aus, mach dir keine Sorgen. Wir werden es Schritt für Schritt durchgehen. Aber es gibt Variablen, die wir verwenden können um unsere Prototypen zu kontrollieren und sie zu sogenannten fortschrittlichen Prototypen zu machen sie zu sogenannten fortschrittlichen Prototypen Variablen sehr CO verwenden und den Nudeln entkommen, die überall herumlaufen und versuchen, alle Frames miteinander zu verbinden. Sehr cool. Jetzt die zweite Lebensmittelgruppe, okay, ich rufe ihn für Grids an, für echte Anwendungsfälle Dies ist ein logischer, auf Logik basierender Anwendungsfall für Variablen. Klicken Sie auf die Schaltfläche, die um eins nach oben geht und ändern Sie das kleine Symbol , und ändern Sie das kleine Symbol dieser Komponentenvariante von leer in voll. Eine gewisse Logik verwendet Variablen. Die andere Verwendung von K für Variablen ist die Verwendung von Modi und Variablen. Also ich kann diese Karte hier sagen, okay, hier unten in meinem Ebenen-Panel, ich kann sagen, du bist die Farbe des Lichts Modus. Sie können den Dunkelmodus ändern, Hintergrundfarbe und die Schriftfarben aktualisieren. Du kannst noch weiter gehen. Man kann auch sagen, dass ich eigentlich möchte, dass die Abstände nicht kompakt, sondern bequem sind. Lass es uns ein bisschen ausdehnen. Oh, sieh dir an, wie bequem es ist. Das sind also variable Modi. In der letzten Version werden wir uns Design Tokens ansehen, denen wir viele Dinge definieren und sie miteinander referenzieren können, um Dinge wie Designsysteme viel einfacher zu implementieren zu machen , sowohl für uns als auch für Enlarge-Design in Figma, und wahrscheinlich noch wichtiger, wahrscheinlich noch wichtiger ist, was der Entwicklungsseite der Erstellung einer App oder Website verbunden der Erstellung einer App oder Sie und der Entwickler verwenden Design-Tokens, um gemeinsam sicherzustellen, dass die Dinge korrekt aktualisiert werden und ein skalierbares, das heißt Design-Token , das all diese Aspekte einzeln abdeckt , während wir das durchgehen. Aber ich wollte herausfinden, dass wir nächsten beiden Abschnitte hier und ein Übersichtsvideo anstreben. Ja, die Sache ist, dass du es während des Kurses gewusst hast. Ich habe es schon einmal erwähnt, dass ich Variante und Variable sage. Ich verwechsle diese Sprache. Das ist eine Variante, okay, es ist eine Komponente. Dies für Varianten ist die leere und die vollständige Variable im Grunde mit diesen lokalen Variablen zu tun. Bei Variablen gibt es viel zu entdecken. Wir werden viele verschiedene Möglichkeiten behandeln, es zu verwenden , um allgemeine Farben alle möglichen coolen Variablen zu verwenden. Aber Varianten sind nur diese verschiedenen Optionen innerhalb einer Komponente. Da hast du's. Oh, die andere Sache, bevor wir anfangen, außerdem gibt es einen Punkt, an dem Sie die kostenpflichtige Pro-Version von Figma benötigen die kostenpflichtige Pro-Version , um alle Variablen nutzen zu können Es gibt einige Teile, auf die man verzichten kann , auf einige Teile kann man nicht verzichten. Und falls Sie hier oben diese kleinen Sechsecke und Fünfecke bemerkt haben , was auch immer sie sind, Symbole, die jetzt zwischen auftauchen Okay, das sind Variablen. Es ist irgendwie das neueste Upgrade und dafür stehen sie, diese kleinen Formen da Variablen. Würdest du einfach gehen und etwas machen, Dan? Klar können wir das machen. Gehen wir zum nächsten Video und erstellen wir unsere erste Variable 150. So erstellst du eine Warenkorbsumme mit Zahlenvariablen in Figma: Hallo zusammen, Willkommen zu diesem Video über Variablen. Wir werden uns speziell eine Zahlenvariable ansehen. Es wird das tun, wir werden in der Lage sein, Plus und Minus bei unserem Prototyp genau zu treffen . Sehr cool und für uns eine nette Einführung in Variablen. Lass uns reinspringen und dafür sorgen, dass es funktioniert. Okay, um loszulegen, habe ich unseren Einkaufswagen aus unserer vorherigen Datei genommen und ihn einfach in ein neues Dokument gelegt nur um die Dinge getrennt zu halten Dies ist übrigens ein Update-Video, daher könnten die Dinge etwas anders aussehen und das Variablen-Interface könnte ein bisschen ändern, erheblich geändert. Ich werde das Video aktualisieren, aber wenn es nah genug aussieht , verstehst du, worauf es hinausläuft. Also, um loszulegen, möchte ich, dass du mir mein Textwerkzeug schnappst. Klicken Sie einmal. Ich tippe die Zahl Null ein, okay? Und ich werde es irgendwie an der richtigen Stelle platzieren. Du kannst da hingehen. Okay? Was wir also tun müssen, ist unsere Variablen zu definieren, es sind lokale Variablen. Das bedeutet, dass wir nichts ausgewählt haben. Ich verwende Escape und hier gibt es diese neue Option namens lokale Variablen. Klicken wir hier auf diese Optionen. Und wir werden eine Variable erstellen. Wir werden uns die Zahlenvariablen in diesem Video ansehen. Ich gebe ihm einen Namen. Du kannst es nennen, wie du willst. Kanonisch, meins, total. Was wird der Wert sein? Lass es uns einfach ändern. Ändere es einfach auf fünf. Und das ist es. Okay, wir haben unsere Variable hier definiert. Lassen Sie uns das beenden. Jetzt müssen wir es zuweisen oder auf etwas anwenden und wir werden es darauf anwenden. Ich klicke hier auf dieses Textfeld und sage Du, mein Freund drüben im Textfeld, okay, da ist diese Option Okay. Schon wieder dieses kleine Sechseckgemälde, ich bin mir nicht sicher, welches es ist, mit Punktnetz geformt Wenn du auf Variable anwenden klickst, haben wir nur eine, was es einfach macht. Wir wenden sie an und beobachten, was mit der Null passiert. Du schaust auf die Null, ich lasse seine Uhr auf fünf umstellen. Aufregend, nicht wirklich, aber zumindest wissen wir, dass es zusammenhängt. Okay, schauen wir uns das an, lassen Sie uns öffnen, lassen Sie uns nichts auswählen. Klicken Sie im Hintergrund auf „Aus“ und es wird geöffnet. Und ich kann sagen, dass die Summe Null ist und zusehen, wie sie sich ändert. Siehst du, dass es sich dort verändert hat? Sie sind miteinander verbunden, was großartig ist. Was ich jetzt tun möchte, ist Ihnen zu zeigen, wie Sie es kaputt machen können, während wir hier sind, ich habe das Textfeld ausgewählt. Also du ganz unten , diese kleine Pille hier, die mir zeigt, dass diesem Textobjekt , das ich ausgewählt habe , diese Variable zugewiesen ist, die Summe heißt. Ich kann es kaputt machen, indem ich darauf klicke. Ich kann es auch versehentlich zerstören, indem ich es ändere. Okay, wenn sich herausstellt, dass wenn ich es ändere, es ist, wow, ich habe gerade die Verbindung losgeworden und sie ist jetzt kaputt. Okay, es wird nicht funktionieren. Ich mache es rückgängig , bis es funktioniert hat. Und das ist da hinten. Hervorragend. Okay, der nächste Schritt besteht darin, diese Plus-Schaltfläche zum Laufen zu bringen, wenn sie ausgewählt ist. Wechseln wir in den Prototypenmodus. Das ist die große Sache, die mich irgendwie verwirrt hat, als ich zum ersten Mal erfuhr dass ein Teil der Arbeit in der Entwurfsansicht stattfindet, ein Teil der Arbeit, die passiert, und in der Prototypenansicht Also im Prototypenmodus, diese Option ausgewählt ist, werde ich sagen, lassen Sie uns eine Umleitung hinzufügen haben wir schon einmal gemacht. On Tap oder OnClick spielen keine Rolle Ich werde sagen, dass ich bei dieser kleinen Sache, die ich hier ausgewählt habe, gerne variabel sitzen würde. Ich wollte zuerst sagen: Hey, wenn du das machen willst, musst du es auf ein kostenpflichtiges Konto verschieben. Das mache ich zurück. es ausgewählt ist, bearbeite ich die Interaktion und drücke auf die Plus-Schaltfläche. Ich sage, Sie möchten die Variable oder Variable setzen. Ich wollte das Ganze sein. Welchen Ausdruck will ich? Ordnung, also ich will total sitzen, und das ist diese Sache hier. Ich möchte das sagen, was ich auch tun möchte, aber ich möchte, dass Total einen hinzufügen würde. Ich habe gerade einen eingegeben Ich sage also, finde die Summe und erhalte dann die Summe und füge eine hinzu. Da hast du's. Drücken wir die Eingabetaste auf der Tastatur, wie es seltsam aussieht. Aber da hast du's. Mal sehen, ob es funktioniert. Ich gehe zu meinen Prototypenlisten und benutze diesen schicken neuen, den du im Kurs nicht oft gesehen hast, weil es wusste, dass du im Kurs nicht oft gesehen hast, weil es sie Shift Leertaste bekommen würden und Ready City uns anschaut, geht Okay, wir haben kein Minus, aber das Ego würde sein variables High-Five aussetzen Nicht so heiß. Lass es uns rückwärts gehen. Also lass uns dasselbe tun. Ich habe diesen ausgewählten Wechsel in den Prototypmodus und die Interaktion damit. Es wird ein On-Tap-Out sein. Ich möchte, dass die Variable für dieses Ding gesetzt wird. Was möchte ich sitzen? Ich wollte die Summe kontrollieren, das ist dieses Ding hier, meine kleine Null. Was ich will, dass es tut, sobald es gefunden ist, möchte ich den Ausdruck schreiben, der total sagt. Ich wollte minus eins haben. Drücken Sie die Eingabetaste. Mal sehen, ob es funktioniert. Verschiebe die Leertaste Und gehen wir positiv, negativ, positiv, negativ, positiv, positiv, negativ, negativ ins Knie. Du gehst, es könnte ein paar Probleme mit deinem geben. Du könntest sagen, ich weiß, es ist ein negativer 01:00 Uhr, ich werde negativ viele zahlen. ich werde negativ viele zahlen Werden sie mir Geld geben? Das werden wir im nächsten Video mit Bedingungen beheben. Aber im Moment funktioniert es. Ein paar Dinge, die ich Ihnen zeigen möchte, sind, dass ich es einfacher finde , an diesen Dingen zu arbeiten. Wer sind kleine Diamanten, die herausspringen , wenn Sie die Variable zugewiesen haben, sie sind tatsächlich einfacher zu tun wenn Sie sie hier auswählen. Warum sind sie besser? Ich weiß es nicht. Das Ding. Er fühlt sich hier sehr distanziert. Wenn Sie dazu kommen, sehen die Grenzen anders aus, da dies ein brandneues Update für den Kurs ist Das Letzte, was ich Ihnen zeigen möchte, bevor wir gehen, ist, dass Sie alles einzeln daraus entfernen können. Die Sit-Variablen. Wir können nichts sagen und es wird es loswerden. Machen Sie das rückgängig, wenn Sie die lokalen Variablen loswerden möchten. Denken Sie also daran, dass in der Entwurfsansicht unter lokalen Variablen nichts ausgewählt wurde. Du kannst gehen, du kannst mit der rechten Maustaste darauf klicken und „Variable löschen“ sagen. Wenn du es hier aus dem Text entfernen willst, kannst du dieses Ding hier einfach löschen, okay, sagen wir, Variable und es wird es kaputt machen, wenn du gehst, wir haben ein paar Variablen hinzugefügt und es hat etwas gesteuert Was wirklich cool daran ist, da wir wissen , dass wir in der Vergangenheit wahrscheinlich versucht haben , Prototypen zu erstellen und sie nicht so effizient gemacht haben, weil man nicht Rahmen für Rahmen herstellen Rahmen für Rahmen und die Prototypen zusammenfügen musste. Also los geht's. Gehen wir zum nächsten Video, in dem wir dieses Minus und die kalten Bedingungen loswerden . Also du im nächsten Video 151. Hinzufügen von Bedingungen zu Variablen in Figma: Hallo alle zusammen. In diesem Video funktionieren alle N-Minus-Schaltflächen, aber wir haben ein Problem, bei dem es auf minus aber wir haben ein Problem, bei dem es eins bis drei geht. Wenn wir weiterhin Minus-Balken drücken, korrigieren wir das mit einer Bedingung, die besagt, dass, wenn sie auf Null fällt, nicht tiefer gehen. Also lasst uns loslegen und herausfinden, wie man eine Bedingung macht. Okay, denken Sie daran, dass unser Problem darin besteht, dass wir Dinge hinzufügen und abziehen können, aber irgendwann geht es auf Minus C zurück. Wir wollten bei Null aufhören. Um das zu tun, machen wir es mit diesem Minus-Button. Okay, denk dran, wir können es hier machen und einen Prototyp. Wir haben also zwei zufällige Prototypen und können hier anfangen , daran zu arbeiten. Ich bevorzuge es, hier drüben daran zu arbeiten und diese kleine Form hier zu verwenden. Okay, also in dem Moment, in dem wir sagen, hey, finde die Summe heraus, die wir dem zugewiesen haben, was ich von dir will, ich möchte, dass du eins davon abziehst, gehst du. Aber was wir tun müssen, ist eine sogenannte Bedingung hinzuzufügen . Okay, fügen wir eine Bedingung hinzu. Bedingtes Wissen funktioniert. Es heißt, wenn das wahr ist, führe diese Aktion aus, andernfalls führe diese andere Aktion aus. Wir wollen sagen, wenn die Summe größer als Null ist, ich hier einfach Null ein. Ich möchte, dass du eine Aktion ausführst. Was ich will, ist, dass du all diese Dinge tust , die wir gemacht haben, die Set-Variable hier oben. Ich werde es zusammenklappen, um es einfacher zu machen, es zu ziehen und zu rasten, damit es hier rein gezogen werden kann. Was machen wir einfach? Wir haben gesagt, wenn die Summe größer als Null ist, musst du eins davon abziehen. Wenn es nicht größer als Null ist, möchte ich, dass du nichts tust. Es gibt keinen Stopp. Tun Sie nichts, Benutzer lassen es leer. Das sind also zwei, was größer als Null ist, es wird minus eins sein. Wenn es eins ist, ist es auch größer als Null. Also ziehen wir einen Abzug ab. Wenn es Null ist, ist es nicht größer als Null, also werden wir nichts tun, um auf die Idee zu kommen. Testen Sie es, kommen Sie runter, okay. Liegt daran, dass ich Programmieren unterrichte und kein besonders guter Coda bin Und gehen wir hoch und gehen wir runter und es bleibt bei Null hängen. Lassen Sie uns, ich bin beeindruckt von mir selbst. Wenn Sie ein Entwickler sind, schütteln Sie den Kopf, weil ich vieles falsch ausgesprochen und wahrscheinlich Dinge nebenbei gemacht habe vieles falsch ausgesprochen , aber hey, das ist so gut wie ich Ordnung, das ist unser Zustand, so interessante Bedingungen, das ist ein kleines Symbol hier, okay? Und wir haben unsere Variable darin, aber sie wird nur aktiviert, wenn das stimmt. Sonst mach diese andere Sache. Und dieses andere Ding kann eine Menge Zeug sein, aber wenn du es leer lässt, wird das Ganze deaktiviert In Ordnung, du erklärst es zu weit, Dan, lass uns mit dem nächsten Video weitermachen und noch mehr Variabilität 152. Variantenänderung mit Boolescher Variable: Farbe des Warenkorbs ändern: Hallo alle zusammen. In diesem Video schauen wir uns an, wie man eine Variable erhält , um eine Variante und eine Komponente zu ändern. Also das sind alles Varianten, okay, was ist mit Varianten? Da ist dieser leere Einkaufswagen und dieser volle Schnitt. Ich wollte in der Lage sein, auf eine Schaltfläche zu klicken, Variablen zu verwenden und sie zu ändern. Aufgepasst, 321. Alles sehr aufregend. Wir werden die boolesche Variable lernen, die für solche Dinge praktisch ist In Ordnung, lassen Sie uns loslegen eine Art Symbolschaltfläche zeichnen Wir benötigen einen Variantenraum, aber keine Variablen, nur zwei verschiedene Versionen einer Komponente. Also werde ich diese Komponente schnell mit zwei Variablen erstellen . Wissen Sie jetzt, wie das geht? platzieren In Ordnung, wir wollen also Komponenten, die unterwegs sind, auf unserer Komponentenseite Es wird mich auf diese Idee bringen. Ich brauche eine Instanz davon, also wähle ich die erste aus, halte meine Option auf einem Mac gedrückt, Alt auf einem PC und ziehe das heraus. Also dieses Ding ist zwei Modi. Es gibt zwei verschiedene Varianten. Für einen booleschen Operator machen wir das hier. An, aus wahr-falsch kann es nur zwei Optionen geben, okay, perfekt dafür Und wir wollen sie richtig benennen. Die Benennung ist hier also sehr wichtig. Also zurück zu meinen Komponenten hier, lass es uns öffnen. Nennen wir das ein Warenkorbsymbol. Und die beiden Werte müssen wahr oder falsch sein. Okay, also werde ich False als ersten angeben. Und wahr ist der zweite. Wie die Logik, die ich verwenden werde, das ist die Katze voll, wahr oder falsch, okay, also die erste ist falsch, sie ist nicht gefüllt, hat nichts drin. Das ist sinnvoll, um sicherzustellen, dass Sie die Wörter wahr und falsch verwenden. Deshalb funktioniert dieser boolesche Operator. Okay? Jetzt gibt es ein paar Dinge, damit das funktioniert, okay, also zuerst, habe nichts ausgewählt. Gehen wir zu einer lokalen Variablen und setzen Sie eine davon. Lass dich nicht dazu verleiten, die Plus-Taste zu drücken, okay, fügt einen anderen Modus hinzu, nicht das, was wir wollen Ich kann es nicht rückgängig machen. Ich lösche den Modus. Ich möchte, dass wir eine neue Variable erstellen. Wir werden diesen booleschen Wert verwenden, das Ein- und Ausschalten, wahr, falsch Dann gehen wir, okay, geben wir ihm einen Namen. Wir sollten es so etwas wie und Cato nennen. Oft verwenden sie jedoch CamelCase. Sie werden also zuerst klein geschrieben. Es wird keine Leerzeichen und das B in Großbuchstaben geben, um die verschiedenen Teile zu kennzeichnen , wenn es zu visuell ist Und ich mache solche Sachen. Okay, das ist eine schreckliche Art, es zu benennen. Wahrscheinlich wird die Frage, sie zu befragen, alles töten. Aber hier in Figma wird es keinen Unterschied machen. Aber wenn Sie ein Entwickler sind, den Kopf schütteln und keine Leerzeichen verwenden können, sollten Sie CamelCase verwenden, das beste aller Und der Standardwert wird falsch sein , was für mich funktioniert. Du könntest es wahr haben. Es liegt an dir. Wir haben diesen Teil erledigt. Das müssen wir etwas zuordnen. Okay. Wenn Sie also sagen, dass Sie mit diesem hier in Verbindung gebracht wurden und ich sage, die Katze ist voll. Überprüfe einfach noch einmal , ob das funktioniert. Zweitens, deaktivierte lokale Variablen, wahr, falsch, wahr, falsch Das funktioniert also ausgezeichnet. Jetzt brauchen wir den Button , damit es funktioniert. Wir beginnen hier mit dem Plus-Button. Wie finde ich all diese Variablen? Machen Sie dem Prototyping einen Strich durch die Rechnung, denn das ist es, was wir tun, oder? Fortgeschrittenes Prototyping, wie sehe ich das alles? Das ist in Ordnung. Wir müssen im Prototypenmodus sein, so schlau Und ich werde es hier machen, weil ich bereits eine Variable darauf angewendet habe. Ansonsten ist Stat hier aufgewacht. Okay, hier habe ich schon angefangen. Ich habe diese Set-Variable zum Hinzufügen zu den Nullen bereits Ich werde etwas Neues hinzufügen. Ich füge eine Bedingung hinzu. Und diese Bedingung wird Dinge sagen wie, was werden wir sagen? Ich klicke hier rein. Wir werden sagen, wenn die Summe jetzt ist gibt es ein paar Möglichkeiten, dies zu tun, oder? Ich sage, es ist größer als Null. Aber man könnte sagen, größer als oder gleich eins. Oder ich denke, für alle anderen guten, die nicht gleich Null sind, gibt es verschiedene Möglichkeiten, dies zu tun. Ich mache mehr als Null. Was ich machen wollte, dieses Ding wird sich bestimmt ändern, weil es ein bisschen klobig Wenn ich ehrlich bin. Drücken Sie die Eingabetaste oder tun Sie, was tun Sie jetzt? Schaltfläche „Bestätigen“. Ich drücke Enter. Das funktioniert. Okay, die Bedingung sucht also danach, ob die Summe größer als Null ist, was wir tun wollen, wir werden eine Aktion hinzufügen , die besagt, setze L Variable, welche Variable? Der boolesche Wert, bei dem es sich um Add to Cart handelt. Was ich damit machen wollte , ich möchte es auf „True Full Man“ setzen, wenn es größer als Null ist. Wenn ich jetzt die Eingabetaste drücke, wird es ein edX-Zeug. Es ist also ein bisschen komisch. So wahr. Klick raus, los geht's. Und wenn das stimmt, tu das. Sonst tu einfach nichts. Hervorragend. Also lass es uns testen. wird nicht funktionieren. Oh, das scheint zu einfach zu sein. Verschiebe die Leertaste Lass uns eine kleine Vorschau machen. In Ordnung, Jump Cuts. Jemand ist an die Tür gekommen. Ich bin einsatzbereit zurückgekommen. Ordnung, wir haben unsere Vorschau im Gange und schauen dort zu, 321 Hey, sieh uns an. Wir haben es geschafft. Aber im Grunde hat Codas niemand gesagt. Aber los geht's. Ich bin, das einzige Problem ist wenn ich auf Null runtergehe, funktioniert es nicht. Okay, also was ich tun werde, ist als Herausforderung dazusitzen. Es wird kein vollwertiges Projekt wie in einem Video sein, das ihr einreichen müsst. Es ist mehr, ich will dich jetzt, okay? Um diesen Minus-Button durchzugehen und Logik hinzuzufügen , um ihn zurückzudrehen. Okay, schauen Sie sich im Grunde an, was wir für das Hinzufügen getan haben , okay, und sehen Sie, ob Sie es hier umgekehrt funktionieren lassen können . Wenn es furchtbar schief geht, ist es okay, Variablen sind schwierig Ich werde es im nächsten Video machen, aber probieren Sie es jetzt auf jeden Fall aus. Holen Sie sich das eine funktionierende Ding der Minus und lassen Sie es mich in den Kommentaren wissen, haben Sie es zum Laufen gebracht oder brauchten Sie Hilfe? Das ist völlig okay. Bin nur daran interessiert zu sehen, ja, viel Glück. Und wenn du dort ankommst, großartig. Wenn du es nicht getan hast, ist es okay. Wir machen es zusammen im nächsten Video. Ordnung, meine Freunde, wir sehen uns im nächsten Video, nachdem ihr geübt habt 153. Unsere boolesche Variable in Figma zu falsch machen: Ordnung, wie ist es dir im letzten Video ergangen? Hast du es ausgeschaltet bekommen? Du hast High-Five gemacht, peng. Gute Arbeit. Wenn er sein großer Cody-Mythos war, ist das in Ordnung, wir machen Und schauen wir uns an , was wir tun. Ich möchte das ausschalten können, wenn ich wieder bei Null bin, damit es nicht funktioniert. Schauen wir uns also schon die Logik hier an. Okay, also eines der großen Dinge ist wie, was zerquetsche ich es da rein Wo stelle ich es hin? Wir werden eine zweite Bedingung hinzufügen. Okay, um zu sagen, dass, wenn der Zeh gleich Null ist, okay, er hat auch mehrere Möglichkeiten , das zu tun. Und ich würde diese Aktion gerne machen. Ich möchte diese Variable, welche Variable ist der volle Einkaufswagen, auf false setzen . Dann klick raus. Andernfalls führe diese andere Aktion aus , die nichts ist. Okay, funktioniert es also, Dan, als gute Frage, du musst es hier neu starten. Meine Güte, das ist ziemlich neu. Der Reset funktioniert irgendwie. Warten, warten, warten, warten, warten. Da ist es. Sicher warum? Aber ich habe es zurückgesetzt und gehen wir hoch und runter. Geh hoch und geh runter. Wir machen Sachen. Und wir haben es benutzt, um das ein- und auszuschalten. Sie lassen Ihrer Fantasie freien Lauf, was Sie mit einem booleschen Operator ein- und ausschalten können , okay Es ist, als ob du etwas hast , wo es ein Knopf ist. Jemand sagt, ich hätte gerne diese zusätzliche Funktion und sie könnte einige andere Funktionen aktivieren oder deaktivieren. Oder es könnte verschiedene Schaltflächen aktivieren oder deaktivieren , auf die Sie klicken können , weil Sie zum Auswahlbaum gegangen sind . Sie könnten auf das klicken, die jährliche Anzeige dort zeigt Ihnen vielleicht den Rabatt und wie viel Sie sparen, solange es das ist, wenn Sie Boolean verwenden wollen, okay, Sie müssen es ein- und ausschalten Es gibt noch andere Dinge, die Sie tun können, die wir gleich tun werden. Aber ja, du gehst, das ist es. Lass uns zum nächsten Video springen. 154. Ein Overlay-Popup im Aktionspanel für Variable in Figma erstellen: Hallo alle zusammen. In diesem Video drücken wir die Plus-Taste und kann eine kleine Nachricht erscheinen, du bist bereit. Das werden wir tun. Okay? Ich möchte das in diesem Abschnitt hier haben, weil wir das schon einmal gemacht haben, oder? Du sagst, hey, das ist nur ein Overlay mit dieser neuen Variablen-Funktion obwohl sie einige dieser Funktionen übernommen haben , sodass du es an zwei Stellen machen kannst Am Anfang dachte ich, vielleicht machen wir dafür eine Variable. Und eigentlich nein, sie verwenden einfach die gleiche Schnittstelle, um Variablen, Bedingungen und einige dieser Navigationsdinge ausführen zu können , die wir normalerweise mit Nudeln machen wo wir sie ziehen und verbinden Also lass mich dir zeigen, dass alles klar ist, okay? Oh, eins habe ich vergessen, den Anfang dieses Videos zu erwähnen: Du musst dich im Prototypenmodus befinden, damit das funktioniert. Sie werden es wahrscheinlich herausfinden, aber ich habe vergessen zu erwähnen, dass Sie als Prototyp, der all diese Indirektionen hinzufügt, Prototyp, der all diese Indirektionen hinzufügt, den Job bekommen Das nächste, was ich Ihnen zeigen wollte, ist eine Art Bündelung von normalen Aktionen , die wir in diesem kleinen Dropdown-Ding hier machen Also nur um Ihnen zu zeigen, dass sie denken, dass sie dasselbe sind , wenn die Feature-Befehle wie entweder sie unterschiedlich sind, gleich sind. Und lassen Sie mich Ihnen zeigen, was ich meine ist, dass wir, wenn ich abklicke, diese beiden kleinen Symbole haben. Das ist ein bedingtes Symbol, das ist die Variable, die auf diese Schaltfläche angewendet wurde. Es ist nur eine Aktion. Wir haben viele andere Dinge getan. Ich sagte, die lokalen Variablen, weisen Sie sie Schaltflächen zu, aber das müssen wir eigentlich nicht tun, um diesen Block hier zu verwenden Also was ich will, Beispiel den Anfang sortiert, wenn ich auf Plus drücke, ich möchte, dass es Dinge macht, kein Variablenset , keine Bedingung. Ich würde gerne etwas tun , das wir in der Vergangenheit schon einmal gemacht haben. Also anstatt eine Nudel hierher zu schleppen, okay, und sie miteinander zu verbinden, können wir es tatsächlich einfach hier machen Also normales altes Open Overlay, ich werde sagen, was ich gerne machen würde Öffnen Sie die Erfolgsmeldung. Ich möchte es auflösen. Sie möchten nicht, dass es schnell rein und raus geht und dann die Immobilien ausgehen. Scrollen Sie nach unten, die letzten 100 Tage endeten wahrscheinlich manuell. Das Ding ist irgendwie im Weg, aber du kannst es ziehen, weil ich möchte, dass es dort erscheint und sie schließt, indem du nach draußen klickst Perfekt, lassen Sie uns das testen. Shift Spacebar. Und wenn wir das anklicken, hey, sieh dir den kleinen Erfolg an, der Diego hinzugefügt hat. Es ist also so, als ob es die Dinge sind, die wir gemacht haben , aber jetzt an einem etwas anderen Ort, nur damit du es weißt, du könntest das auf jeden Fall überspringen und das zeichnen. Okay, und füge ein Overlay hinzu, wie wir es in der Vergangenheit getan haben. Es gibt kein besseres oder schlechteres. Ich weiß nur, wann ich das erste Mal bin. Also denke ich, mache ich Variablen für Open Overlay Weißt du, es stellt sich heraus diese Dinge alle diesem Button zugewiesen werden können. Variablen, Bedingungen und reguläre alte Open-Overlays. Sie sagen, dass wir in den anderen Aktionen, zu denen wir navigieren können, noch andere Dinge tun können. Er geht auf eine andere Seite. Wir können zurückgehen, zu der Seite scrollen und einen Hyperlink öffnen. Okay, da drin gibt es noch viele andere Dinge die wir tun können. Okay, jetzt, das ist das Ende des Videos. Wir sehen uns als Nächstes. 155. Hell- und Dunkelmodi mit Kollektionen und Farbvariablen in Figma: Hallo alle zusammen. In diesem Video schauen wir uns den Hellmodus und den Dunkelmodus an. Okay? Das bedeutet, dass wir einen Rahmen auswählen und sagen können: Du, mein Freund, hast jetzt die Farbe des Lichtmodus, deines Dunkelmodus. Und es verändert alles innerhalb des Rahmens. Dazu müssen wir lernen, was eine Sammlung und was ein Modus ist, die besonders schwierig sind. Also lasst uns einspringen und dieses großartige Erlebnis verwirklichen. Ich liebe es. Dokumentenmodus, dunkle Stimmung, heller Modus. Um damit anzufangen, habe ich nur ein paar Textstellen. In einem Bild ist nichts los, okay? Das erste, was ich tun möchte, ist nichts ausgewählt zu haben. Es ist gut für unsere lokalen Variablen. Und wir werden feststellen, dass wir bereits unsere erste Kollektion haben. Wir sprechen über Sammlungen von Modi. Sammlung stellt euch im Moment einfach eine Gruppe verschiedener Rollen vor, wir haben diese, die Sammlung Eins heißt. Ich benenne es um und nenne General einfach meine Junk-Schublade mit den Sachen, die ich will Aber es gibt eine spezifischere Kollektion , die ich mit Farben machen möchte. Wir machen noch einen für Größen und ein bisschen. Das sind alles verschiedene Sammlungen. Also werde ich sagen, lasst uns eine neue Kollektion kreieren. Es heißt dieses, Colors American, New Zealand D. Okay, also verwenden wir alles und erstellen eine Variable. Und wir beginnen mit dieser Farbvariablen. Okay, nur um es noch einmal zu wiederholen, wir haben Sammlungen, wir sind jetzt zu einer allgemeinen, die Summen berechnet und Alcott gewechselt hat Summen berechnet und Alcott Und jetzt haben wir Farbe und du wirst am Ende ein paar verschiedene Kollektionen haben. Ich gehe zu diesem. Wir werden dieser ersten Farbe einen Namen geben. Und wenn Sie diese benennen, wenn Sie Variablen verwenden, um Farben zu ändern Und es ist ein bisschen wie Styles. Sie machen fast dasselbe und Sie können dieselbe Namenskonvention verwenden Das wird also meine primäre Primärfarbe sein, aber wir werden Zecken als Primärfarbe verwenden. Okay, das sind also meine Haupttexte, in denen angegeben wird , welche Farben es geben wird. Ich werde eine dunkle Farbe verwenden. Ich habe das Grün beibehalten, damit wir sehen können, wie es sich ändert. Lassen Sie mich also ein dunkles Grau verwenden. Okay, das wird also mein Wert für den Primärtext sein. Jetzt haben wir Sammlungen gemacht. Wir wissen, was Variablen sind, aber was ist dieser Button? Weil ich versehentlich immer wieder darauf klicke und wir diese zusätzliche Kategorie bekommen. Das sind die Modi, Modus, ein Modus zu diesem hier wird mein Lichtmodus sein. Und du kannst noch nicht mit der Tabulatortaste wechseln, aber dieser hier wird der Dunkelmodus sein. Es wird aufregend. Okay, also hier werde ich sagen, wir könnten Text schreiben, ich verwende nur diesen, Definition, Text und ich werde mich noch auf diesen Text anwenden, aber es gibt zwei verschiedene Modi zwischen denen ich wechseln kann. Okay, ich werde den Hellmodus und den Dunkelmodus haben. Der Lichtmodus wird einfach heller Text E sein. Und das ist der erste Teil. Sammlungen, verschiedene Modi, Modi können also viele verschiedene Optionen sein. Es könnten kleine und mittelgroße Dinge sein, okay, was vielleicht Abstand und Polsterung angeht Also lass uns das schließen. Und ich möchte es zuerst anwenden. Also ich sage, Sie haben die Füllfarbe von, ich werde mein Stilfenster hinzufügen und es ist irgendwie ständig auf Stile gestoßen Sie haben sich noch nicht wirklich gut getrennt. Und das sieht bei dir vielleicht anders aus, aber los geht's. Texte primär, zack, du nimmst auch die Grundschule. es zu den Dingen hinzufügen, von denen Sie möchten, dass Sie zwischen den Modi wechseln können, wie schalten Sie es dann um ? Es ist also angewendet, aber es ist im Lichtmodus, oder? Also diese dunklere Farbe. Wie bringen wir es dazu, in den weißen Farbmodus zu wechseln , wählen Sie es einfach aus gehen Sie zum Ebenenbedienfeld. Ebenen werden hier dieses kleine Symbol haben. Okay, wir können den Variablenmodus ändern , der erst angezeigt wird, wenn Sie Modi haben. Da ist es dieses Farb- und 3D-CAD. Dunkler Modus, aufregend a, machen es aufregender. Dann mache ich einen Rückzieher. Was wir tun können, ist, dass ich das hätte machen sollen, bevor wir angefangen haben. Lassen Sie mich das schnell in eine automatische Layoutverschiebung umwandeln. Und ich werde ein weiteres Autolayout erstellen , das diese beiden Schaltvorgänge kombiniert Los geht's. Weil ich möchte, dass mit den Abständen und so gespielt wird. Okay, wir haben das, wir könnten es mit dem gesamten Elternbild machen und es ändern und es wird alles durchschauen , auf das eine Stimmung angewendet wurde, und versuchen, es aus dem Leitmotiv des Hundemodus zu ändern es aus dem Leitmotiv des Hundemodus Gehen die Eltern ausgewählt, was in meinem Fall Rahmen heißt um es kalt zu machen, Karte und gleiche Stelle. Gehe zu deinem Ebenen-Panel. Da ist es da. Okay. Farbe und alles, was hier drinnen ist, sollte so in den Dunkelmodus wechseln. Machen wir es noch besser. Wir möchten, dass sich auch der Hintergrund ändert damit wir diesen Text tatsächlich lesen können. Was wir also tun werden, sind zwei Dinge. Lasst uns fliehen, fliehen, entkommen, damit wir lokale Variablen sehen können. Wir haben hier nur eine Farbe. Fügen wir einen anderen Modus hinzu. Darauf möchte ich jedes Mal klicken. Es ist dieser hier unten. Fügen wir eine weitere Farbvariable hinzu. Wir sind also auf dem Weg dorthin, richtig, wir haben den booleschen Wert für Farbzahlen gelernt booleschen Wert für Farbzahlen Okay, geben wir diesem einen Namen. Also machen wir Interface in Face. Manchmal heißt es Surface, okay, ich nenne mein Interface primär. Okay. Ich kann es einmal benutzen, aber ich habe zwei verschiedene Optionen dafür. Ich wähle Dunkelviolett für meinen hellen Modus. Beachten Sie, dass dies für den Dunkelmodus gilt. Ich nehme nur das Weiße und dieses wird dunkler sein. Da gehen wir zu verschiedenen Optionen, die einen schönen Kontrast dazu bilden, und der Text bildet einen schönen Kontrast zum Hintergrund der Benutzeroberfläche. Wenden wir es also an. Worauf wenden wir es an? Machen Sie es mit diesem Autolayout-Frame Angenommen, Sie haben einen vollen Hintergrund mit der Verwendung der kleinen Symbole und des Pickers. Okay, ich verwende Interface, großartig, aber lassen Sie uns einen Abstand von 16 mal 16 geben. Okay, Und bist du bereit? Okay. Wir können sagen, dass du, mein Freund, das Ebenenpanel sein wirst. Diese ganze Sache darin wird der Dunkelmodus sein. Bereitet euch vor. Ich freue mich. Freust du dich? Tut ich das? Es ist neues Zeug. Ich mag es, super geil. Es wird noch besser. Machen wir das rückgängig. Was passiert, ist , dass es hier standardmäßig ist. Kannst du sehen, dass es standardmäßig auf den ersten Modus eingestellt ist Es ist also standardmäßig auf den Lichtmodus eingestellt, was auch immer der erste war Okay, also es geht eigentlich in den Modus, der auf dich angewendet wird. Okay, also 52, das sind drei davon. Und was wäre, wenn ich den ganzen Frame aufnehmen und einfach sagen könnte , dass die Ebene jetzt Dark Modes ist. Gut, guter Weg. In Ordnung, also die Dinge, an die Sie sich erinnern sollten, sind lokale Variablen. Ich habe jetzt Sammlungen. Wir haben mehr als einen. Wir hatten eine Kollektion , die wir in General umbenannt haben und diese neue heißt Color. Wir bearbeiten eine Variante und haben einen zusätzlichen Modus hinzugefügt. Sammlungen sind also im Grunde genommen einfach Gruppen, Modi, Dinge, die wir zwischen dem Aufwachen ändern können, dem Objekt geben, wie in diesem Fall, eine Farbe, einen Namen, ein Zeichen, um zu sagen, dass du Textprimär bist, aber es hat andere Funktionen, zwischen denen wir hin- und herschalten können Von dort aus wenden Sie diese Farben auf die Dinge an , auf die Sie sie auftragen möchten. Und dann der übergeordnete Frame, egal ob es das Textfeld ist, das automatische Layout, das sich direkt darüber befindet, oder das, das es umgibt oder das, das Oder sichern Sie jetzt das ganze Telefon. Sie können dann zu Layer gehen und dann zwischen den verschiedenen Modi wechseln. In Ordnung, gutes Arbeitsteam. Lass uns im nächsten Video eine weitere Version davon machen. 156. Ändern des Abstands mit Zahlenvariablen in Figma: Hallo alle zusammen. In diesem Video verwenden wir dasselbe wie im letzten Video, als wir Modi und Sammlungen verwenden. Aber das machen wir wegen der Abstände. Was wir hier tun können, ist, nicht nur den Dunkelmodus oder den Hellmodus zu verwenden , was cool ist, sondern wir können zwischen kompakten und komfortablen Abständen wechseln. Und kannst du sehen, wie sich der Raum zwischen allem verändert? Sehr ähnlich dem, was wir gerade mit Farben gemacht haben. Aber wir werden Zahlenvariablen verwenden und der Außenseite ändern, oder? Lass uns reinspringen und ich zeige dir , wie es geht. Das ist zu eng. Ich weiß, es ist okay, anzufangen, wir brauchen unsere Sammlungen. Sie haben nichts ausgewählt. Lokale Variablen. Lass uns eine neue Sammlung erstellen. Nennen wir das einen Abstand. Okay? Und lassen Sie uns eine Variable erstellen. Wir werden eine Zahlenvariable verwenden, weil wir versuchen, Zahlen zu kontrollieren, nicht Farben. Wir versuchen, den Raum zwischen den Dingen zu verändern, okay? Und das wird in Pixeln gemacht , also in Zahlen. Mein erster wird also mein Medium sein. Oft mit Abständen, es wird in so etwas wie mehr T-Shirt-Größen gemacht wie mehr T-Shirt-Größen Also mittel, klein, extra klein, extra groß. Du solltest gehen und sie alle erstellen. Ich werde einfach den erstellen, den ich gerade brauche. Ich mache einfach Medium. Du kannst Medium ausschreiben. Das ist auch okay. Der Wert für die Größe wird 16 sein, okay? Und ich werde zwei Modi haben. Es könnte der mobile Modus sein. Der unterschiedliche Abstand zwischen Handy und Desktop. Sie könnten entscheiden, dass es üblich ist, etwas wie Kompaktes Layout, okay, im Vergleich zu Komfortabel zu sagen . Das ist eine ausreichend übliche Art des Abstands. Also mein Compact wird, sagen wir, 16 sein. Und wenn es bequem wird, verteilt es sich irgendwie und es ist ein bisschen größer Also lass uns gehen und das anwenden. Nehmen wir an, wir haben das schon. Im Moment ist es ein automatisches Layout , es gibt nur zufällige Größen für die Seiten Was ich tun werde, ist, anstatt zu sagen , dass dieser Abstand hier genau 16 ist, sehen Sie, dass diese kleine Option hier erscheint. Ich kann sagen, dass du variabel bist. Jetzt werde ich dir das Medium beibringen. Das ist mein mittlerer Abstand. Ich habe den falschen Abstand gewählt. Es ist in Ordnung. Ich werde das machen, in dem es um dein Medium geht. Dieser Abstand zwischen den Sachen ist momentan auf zehn gesetzt . Variable anwenden. Wann wären das diese? Du kannst auf das kleine Icon klicken. Dieser hier, du musst Dropdown holen und es machen. Ich bin damit einverstanden. Wenden wir also das Medium an. Also füge das aus. Ich habe noch einen da drin. Dieser hier muss hoffentlich sein, weil ich ihn gerne auf Seite eins verwende. Hoffentlich werden dort bald Variablen angewendet. In dem Moment können Sie das nicht und Sie werden überall variable oder mittlere Abstände hinzufügen . Jetzt lass uns gehen und es ändern. Es gibt eine Änderung, du könntest es mit dem Eltern-Frame machen und es liegt an dem ganzen Telefon und sagen wir, tatsächlich auf die Mitgliedsebene zugreifen, wir werden in den Hellberg-Dunkelmodus wechseln. Aber sieh mal, es gibt auch Abstände, Dunkelmodus, Hellmodus, aber Abstände sind da drin. Okay. Es ist standardmäßig auf das, was auch immer das erste war, nämlich Konvekt, ich werde Ich ändere es auf Comfortable ready, 24 Pixel everywhere. Es ist gigantisch. Geh weiter. Okay, das heißt nur, dass Sie sich wahrscheinlich für einen mobilen Desktop und dann für Compact and Comfortable entscheiden für einen mobilen Desktop können. Und das hängt von Ihrem Anwendungsfall ab, aber weil es einen Modus gibt, können Sie anfangen zu sehen: Schau, ich bin hier auf diesem übergeordneten Frame. Ich kann bequem gehen. Ich kann das umschalten, aber ich kann sagen, dass ich eigentlich auf Compact setzen möchte, ich möchte nicht, dass es im Lichtmodus ist, der nicht funktioniert. Warum funktioniert es nicht? Ah, entweder ich habe das vor dir gemacht, war nicht vor der Kamera, aber dieser Rahmen hier. Okay. Ich sagte, du kannst jeden Frame machen. Okay. Der Eltern-Frame, wir können es mit diesem speziellen Frame machen. Ich muss das ändern und es Vorrang vor dem, was dieser versucht zu tun Dieses Autolayout hier ist wahrscheinlich zu dunkel, also ist es egal, was ich mit dem Elternteil mache Also schalte ich es auf Auto , damit es den Eltern folgt. Jetzt sollte ich in der Lage sein, viel mehr Dark Mode in komfortabler Größe als CO zu hören . Die nächste Sache ist, dass wir noch eine davon hinzufügen, denn warum haben wir zum Beispiel mehr als eine? Es gibt dir nur einige Abstandseinheiten denn sobald wir Medium haben, fügen wir eine weitere Farbvariable hinzu, tut mir leid, eine Zahlenvariable. Und wir nehmen das kleine, okay? Und dieser hier wird er um 8.16 Uhr sein. Wir können beide in unserem Design verwenden. Wir müssen uns nicht für das eine oder andere entscheiden. Kann die Reihenfolge der Ebenen ändern, indem Sie sie nach oben ziehen. Okay, ich weiß nicht, warum es an der Spitze sein muss. Okay, also was ich tun werde ist, dass du sehen kannst, dass der Abstand hier drin zu groß ist. Also wähle ich das aus und sage: Du, mein Freund, bist eine andere Variable. Du bist die kleine Variable, die bei uns, weil wir in der bequemen Version sind, 16 ist. Also für diesen hier möchte ich es für die kleine Version verwenden. In diesem Design ist diese Außenseite jetzt auf mittel eingestellt. Das Innere ist zu klein. Vielleicht hast du ein extra kleines, du wirst wahrscheinlich ein extra kleines K haben, das kann ganze Pixel sein und du kannst es einfach dort anwenden, wo du es brauchst. Aber du hast zwei Optionen oder zwei Modi. Damit später, wenn jemand es ändert, er von Komfortabel zu Kompakt wechseln kann. Und jetzt geht das auf acht runter, das geht runter auf 16, wäre angemessen. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 157. Was sind Design-Tokens in Figma: Hallo zusammen. In diesem Video werden wir über Design Tokens sprechen. In diesem Video wird viel geredet, um zu erklären, was sie sind, wenn wir sie verwenden. Die Hauptgründe, warum wir sie verwenden, der Unterschied zwischen Variablen, Stilen und Design-Tokens. Es gibt eine Menge Armwinken, die du nicht sehen kannst und ich erkläre es dir, aber hoffentlich ist es nützlich, uns auf das nächste Video vorzubereiten in dem wir tatsächlich anfangen, einige der Design-Tokens Aber lass uns anfangen. Bringen wir die Arme zum Winken. Lass uns gehen. Beginnen wir mit der Erstellung eines einfachen Design-Tokens. In dem Moment, wo ich dieses einfache Design habe, kodiere ich die Farbe fest Diese Farbe hat einen Strich mehr als der untere Bildschirmrand. Dieses Feld oben hat die gleiche Farbe. Das ist nicht gut, weil ich dann all diese Farben aktualisieren jedes Mal, wenn ich eine Änderung vornehmen möchte, all diese Farben aktualisieren muss. Wir brauchen also etwas, das diese Farbe repräsentiert. Und genau hier können Design-Tokens nützlich sein. Und hier ist das Design-Token nützlich. Seien Sie gewarnt, wir haben das irgendwie schon gemacht , ohne dass etwas ausgewählt wurde Gehen wir zu lokalen Variablen. Lassen Sie uns eine Variable erstellen, eine Farbvariable, ich nenne meine Karla Primary Ich gebe ihm diese Farbe. Ich werde es anwenden. Es schnappt sich die Kiste da oben. Und ich sage, ich möchte nicht, dass du fest programmiert bist. Ich möchte, dass du einen der Stile verwendest. Es ist irgendwie kein Stil. Stile von hier unten in den Kreisen. Und die Variables-Gedanken , herumzuspringen, haben aufgehört zu springen. Da ist in diesem Quadrat, okay, im Grunde dasselbe. Los geht's. Ich habe meine Farbvariable, auch bekannt als Design-Token, auf dieses Feld angewendet , sodass es später wirklich einfach ist, die Farbe zu aktualisieren, besonders wenn ich mehrere Exemplare derselben Sache habe . Ich kann sagen, lokale Stile, Sie entwerfen ein Token oder so weil wir das Token anstelle der tatsächlichen Nummer verwendet haben . Es ist wirklich einfach, es zu aktualisieren. Also, hey, es geht um mehr, aber im Grunde ist es das, was es ist. Das hier ist ein Token , das das repräsentiert. Wir verwenden diese statt dieser Zahl als Platzhalter-Design-Token, variablen Platzhalter, sie machen alle dasselbe Sie stellen etwas anderes dar, sie enthalten Informationen in sich. Und ein Alkan behält seine Farbe, wir erstellen ein weiteres Design-Token, okay, dieses könnte eine Zahl sein, und dieses wird den Grenzradius haben, und wir werden acht verwenden Das ist ein weiterer Design-Tokens, ein wirklich einfacher. Wir werden komplexer. Aber jetzt fragst du nach einem Design, Tokens nur Variablen. Das sind sie absolut. Wenn es sich um eine Variable handelt, die das Design von etwas wie Abstand im Abstand und Schrift- und Farbdesign-Token steuert die das Design von etwas wie , auch bekannt als Variable, ist Was kein Design-Token, aber immer noch eine Variable Denke über solche Dinge nach. gibt so viele weitere Variablen auf der Welt, insbesondere wenn es um Codierung geht. Wir haben das zu Beginn des Kurses gemacht, uns unsere lokalen Variablen angesehen, wo wir zu Allgemein gegangen sind. Okay, die Summe entspricht dem Wert Null. Das ist kein Design-Token. Ist der Einkaufswagen voll? Falsch? Nein, das ist ein bisschen Logik, die wir bei der Erstellung unseres fortschrittlichen Prototyps verwendet haben. Es ist eine Variable, aber es ist kein Design-Token. Design Tokens ist eine Möglichkeit für uns als Designer, die Dinge, mit denen wir unsere ganze Zeit verbringen, sozusagen zu gruppieren, okay? Schriftabstand, Farbe fokussieren was wir mit Variablen machen, aber Ihr Entwickler, wir nennen einfach alles, was Sie tun, egal ob es Farbe oder Schrift ist, wahrscheinlich nur eine Variable und schüttelt vielleicht den Kopf Sie ausgefallene Design-Tokens verwenden. Es ist nur die Variable und ich denke, es ist so, dass sie unsere Welt definiert. Deshalb haben wir schon früher einige Design-Tokens gemacht , weniger gute Abstände. Immer noch das Design-Token, dies entspricht acht Pixeln. Sam ist also unser Zeichen. Wir verwenden das stattdessen, um die Aktualisierung zu vereinfachen, sowohl in unserem Figma-Design wo unsere Designs auf einer Website und einer App bereitgestellt werden . Ihr Entwickler verwendet auch diesen Variablennamen , damit die Dinge konsistent sind Warum verwenden wir sie also? Irgendwie drei Gründe. Ich glaube. Zum einen macht es die Dinge viel klarer, wenn ich Border-Radius in meinem Design und beim Codieren der Website verwende Aufbau des CSS-Grenzradius ist also so viel einfacher zu verstehen und logisch, dass es Sinn macht Der zweite Grund ist für große, komplexe Designs Wir brauchen diese Art von Struktur, damit wir nicht nur die Farbwerte und Pixelwerte für alles verwenden und Pixelwerte und sehr schnell unhandlich werden. Ideal für große Designs. Und wahrscheinlich am wichtigsten ist es, wenn Sie eng mit dem Entwicklungsteam zusammenarbeiten. Dies ist wahrscheinlich der wichtigste Grund für die Verwendung von Design Tokens, denn was wir tun können, ist, dass wir uns beide, Design und Entwicklung, auf eine Namenskonvention einigen können Design und Entwicklung, auf eine Namenskonvention einigen , damit sie nicht versuchen, das, was Sie Farbe Eins nennen, in das zu übersetzen, was sie als primäre Farbe bezeichnen Wenn Sie auch die Primärfarbe verwenden, wissen wir alle, wovon wir sprechen. Das wird viel weniger Implementierungsprobleme geben. Und später, wenn du versuchst, das Design zu aktualisieren, kannst du sagen, Hey, Kayla, entschuldige mich, muss diese andere Farbe sein und du entwickelst, weil mein Problem wie ein Update ist, weil es genau hier geschrieben ist , Farbe Warum verwenden wir also nicht einfach Stile, wie wir es im Rest des Kurses getan haben. Die Styles sind in Ordnung, okay, sie sind allerdings sehr figma-zentriert Mit ihnen ist wirklich nichts falsch. Der große Vorteil der Verwendung von beispielsweise Variablen als Design Tokens. Sie können Stile als Design-Tokens verwenden , solange die Namenskonventionen in Ordnung sind, okay, weil Sie gesehen haben, dass wir Farbe schon einmal primär gemacht haben und wir einen Farbwert erhalten haben, von dem haben und wir einen Farbwert ein Entwickler genau weiß, was Sie meinen Aber wenn es um den Begriff Design Tokens geht, beziehen wir uns oft auf Variablen. Und wir mögen Variablen lieber als Styles, hauptsächlich, weil wir zwei große Dinge machen können , die im nächsten Video tatsächlich funktionieren werden In diesem Video wird viel geredet, ich weiß, lassen Sie mich einfach loslegen, aber ich muss die Bühne ein bisschen vorbereiten. Schauen wir uns unseren im letzten Video an, was wir mit Styles nicht machen können, da wir diese Modi nicht machen können. Kompakt, komfortabel. Aus diesem Grund sind Design Tokens, auch bekannt als eine bessere Anpassung an Variablen, möglich. Weil wir diese verschiedenen Modi haben, genauso wie die Farben, die wir gemacht haben. Okay, wir haben den Hellmodus und den Dunkelmodus, wohingegen wir in Styles Primary Light ankreuzen müssten und dann eine weitere Liste haben steht , dass Ticks primär dunkel sind, oder können wir einfach einen und diese beiden verschiedenen variablen Modi haben . Ja, der Grund, warum wir Variablen anstelle von Stilen verwenden , ist , dass Sie Variablen verwenden können, um auf andere Variablen zu verweisen. Wir werden das in einem Beispiel tun, das bald erscheint. Aber Stile sind irgendwie ihr eigenes Ding geschrieben, da Variablen alle miteinander verknüpft werden können und so eine Art Kettenaktion in Gang bringen so eine Art Kettenaktion Sie entwerfen Systeme. Kannst du ziemlich knifflig und ziemlich komplex werden, Variablen auf andere Variablen verweisen, wer auf andere Variablen verwiesen hat? Es ist aber auch die geheime Macht. Mann, du hast ein bisschen geredet, Dan, habe ich das überhaupt geklärt? Wahrscheinlich nicht. Lass uns gehen und im nächsten Video tatsächlich etwas machen und wir werden es ein bisschen sinnvoller machen Hoffentlich solltest du nicht sehen, wie oft ich winke. Kannst du fühlen, dass ich winke , um es zu erklären. Okay. Wie dem auch sei, lass uns zum nächsten Video übergehen und tatsächlich ein paar Sachen machen, sie in die Praxis umsetzen. 158. So erstellst du Design-Tokens in Figma: Hallo alle zusammen. In diesem Video werden wir tatsächlich einige Design-Tokens erstellen. Okay, wir beginnen mit Design-Tokens der ersten Stufe, nett und einfach Wir haben es bereits gemacht, und dann fügen wir etwas mehr Komplexität hinzu und zeigen Ihnen den Wertbonus dieser Komplexität. Wir schauen uns ein paar Root-Design-Tokens an und geben diesen Design-Tokens einen Alias. Lauf nicht weg. Wenn das alles zu schwer klingt, ist es das nicht. Wir werden es Schritt für Schritt durcharbeiten. Lassen Sie uns anfangen, einige Design-Tokens zu erstellen. Lass es uns machen. Okay, also auf der ersten Ebene, lassen Sie uns keine lokalen Variablen auswählen. Das haben wir schon einmal gemacht. Wir sagen, lass uns eine Variable erstellen. Lass es färben, geben wir ihm einen kleinen Farbnamen, okay, ich nenne meine Farbe Primärfarbe. Und du musst es nicht Primärfarbe nennen. Es hängt davon ab, was Sie mit dem Entwickler ausgearbeitet haben und wie Sie die Dinge nennen. Manchmal verwende ich keine Bindestriche und verwende so etwas wie dieses namens camelCase, wobei es sich um Kleinbuchstaben Das mit und dann um Großbuchstaben für all die Großbuchstaben für all Manche Leute verwenden Unterstriche, aber niemals irgendwelche, sondern nur vollständige Leerzeichen Programmiersprachen mögen keine Leerzeichen, also wird hier etwas drin sein. Wir entscheiden uns für den primären Farbbindestrich. Okay, wir geben ihr die Nummer, die eine Farbe ist, die ich will, das ist mein Grün. Toll, ich bin irgendwie ein erstklassiges, wirklich einfaches Design-Token. Es wird es anwenden. Du und ich haben das eigentlich ausgesucht, was wir einfach alles hier in meinem kleinen Autolayout auswählen können und sagen in dieser Auswahl ist diese Farbe Es wurde zweimal verwendet, sowohl in diesem oberen Feld als auch in der Zeile unten. Also werde ich sagen, dass ich alles , was diese Farbe verwendet, in meiner Auswahl umstellen werde . Für die Kreise, die Stile sind, wenn der Stuhl ohne triftigen Grund herumspringt . Zurück an die Spitze. Oh Mann. Ich gehe zu dem, das ein Quadrat ist, okay, das eine Variable verwendet, auch bekannt als Design-Token. Toll, ich werde sie auch auf meinem Button verwenden. Okay, dieser Button hier wird diesen Stil verwenden. Und das ist großartig, bis Sie entscheiden, dass dieser Button tatsächlich eine dunklere oder hellere Farbe haben muss , Sie ihn ändern möchten. Wir stecken jetzt also bei einer sehr begrenzten Option fest. Wir können die Primärfarbe durchgehen und ändern. Und wir können sagen, eigentlich möchte ich, dass es dunkler ist, aber ich will nicht, dass es oben und unten ist, nur der Knopf. Ich muss eine ganz bestimmte Sache ändern. Also, was ich tun werde, ist, diesen zu löschen , nur um die Dinge zu klären. Und ich werde meiner Sammlung einen Namen geben. Ich werde diesen umbenennen. Das wird meine Wurzelfarbe genannt werden. Ich werde also nicht wirklich Grundfarben verwenden . Warum erstellen wir sie? Damit ich eine weitere Sammlung namens Alias Colors erstellen kann , diese verweist, und wir werden gleich sehen, warum. Gehen Sie also zu den Aliasfarben. Wir sagen, erstelle eine Farbvariable, und diese wird die Hauptschaltfläche sein. Wir könnten es hier einfärben, dass es eigentlich viel besser ist , mit der rechten Maustaste zu klicken, ich setze das hin und erstelle einen Alias. Ich gehe in meine Bibliotheken, okay, und ich werde nach meinen Stammfarben suchen. Ich werde sagen, das hängt damit zusammen. Okay, Button bezieht sich also auf diesen. Dieser bezieht sich auf diese Hexadezimalzahl. Die zweite Ebene jetzt, der Grund, warum das praktisch ist, ist , dass es spezifischer ist. Okay, das nennen sie Semantik. Wenn sie es schreiben, wo du beschreibst , was der Button nicht will. Die Schaltfläche sieht so aus, als ob Sie diese eine Taste nicht grün nennen möchten. So ist die Schaltfläche primär und sie bezieht sich auf diese Farbe. Warum ist das nützlich? Damit Sie einige Grundfarben haben , haben wir Primärfarben, lassen Sie mich hier ein paar hinzufügen. Ich beschleunige das. Ich habe also diese Stammfarben, die möglicherweise überall auf der Website verwendet werden. Und wir haben herausgefunden, dass wir sie nicht auf alles anwenden wollen , denn was passiert, wenn wir sie ändern müssen? Nun, wir können diese Alias-Option verwenden. Mit diesem Decknamen können wir verrückt werden. Wir können so viele verschiedene Anwendungsfälle haben, sozusagen semantische Versionen davon Wir können sagen, dass die Schaltfläche primär ist, diese zweite Schaltfläche, die nur beim Checkout verwendet wird , nur wenn ein Fehler auftritt. Du kannst ziemlich spezifisch werden. Aber es kann auf diese Farbe verweisen, die leicht aktualisiert werden kann und irgendwie über die Website weitergegeben werden Lassen Sie uns also eine erstellen , die wirklich spezifisch ist. Also dieser wird in Ordnung sein . Du würdest sie nicht so lang nennen, aber du kannst ziemlich spezifisch sein. Und ich kann sagen, ich möchte diesen Alias auf setzen, ich möchte meine Bibliotheken verwenden, ich möchte die quadratischen verwenden und ich werde meine verschiedenen Gewichte verwenden, okay, ich habe also nur ein paar Grundfarben, aber ich kann so viele dieser Aliase verwenden, wie ich für wirklich komplexe Websites benötige Ich werde sagen, dass ich diesen Kerl brauche und ich werde sagen, dass du, mein Freund, das benutzt. Nicht die Wurzelfarben. Benutze das nicht. Ich möchte meine Aliase verwenden Ich kann also Button auf der Karte für die Microsite sagen. Es ist sehr spezifisch. Es ist wirklich einfach zu wissen, was damit zu tun ist. Und später, wenn ich zu dieser riesigen, weitläufigen Website zurückkehre , wurden dort eine Reihe verschiedener Aliase verwendet und ich sage, Leute, wir werden einfach diese Sekundärfarbe aktualisieren Sie können zu den Grundfarben gehen und sagen , dass das eigentlich leicht veränderbar ist Okay, sie können das durchgehen und das ändern. Und sie mussten nur diesen einen kleinen Ort aktualisieren. Aber für alle Aliase, die darauf verweisen, werden sie ebenfalls aktualisiert Ebenso, wenn ich das alles rückgängig mache, wenn sie zurückkommen und sagen, wir wollen nur diesen Button hier aktualisieren, muss ich nicht gehen und die Stammfarbe aktualisieren wenn sie zurückkommen und sagen, wir wollen nur diesen Button hier aktualisieren, muss ich nicht gehen und die Stammfarbe aktualisieren, weil ich nur den Alias finden muss , der das steuert , der geschrieben ist. Okay, ich kann hier beides in meinem Design in Figma sehen, diesen Button auf der Kurve für die Microsite Okay, ich kann das herausfinden, wenn ich ein Entwickler bin , entweder iOS, Android, Web und je nachdem, wo es implementiert wird, oder vielleicht wird es für alle implementiert. Sie können gehen und genau diesen Knopf finden. Finde heraus, wo es ist. In ihrer Bibliothek. Ihre Variablen werden irgendwo gespeichert. Sie werden Ihre in den Vordergrund stellen und in Figma gibt es eine Option für lokale Variablen Und du kannst diesen Alias finden , weil du den Namen kennst. Du kannst es finden und tatsächlich sagen, Okay, ich möchte das ändern, sodass es bei der Variablen endet. Ich will, dass es wohin geht? Gehen wir zu dieser leichteren Version oder der Docker-Version. Gibt mir eine kleine Kontrolle darüber, was wir hier für diese kleinen Instance-Anwendungsfälle tun Aber es gibt einen schönen großen Überblick über die Grundfarben, sodass, wenn sich die Marke ändert, es vielleicht ein Usability-Test ist und Sie feststellen, dass dieses Orange eine permanente Farbe ist, die dem Licht gerecht wird. Und Sie haben das Kontrastverhältnis getestet . Nur ein bisschen, du kommst in die AAs, du bist cool und alles verteilt sich auf der Website, auf die verwiesen wird Das ist ein Alias, sie nennen das Mapping, bei dem eine Gruppe von Variablen einer anderen Gruppe zugeordnet Sie hätten dann einen dritten haben können, der dem Alias zugeordnet ist , der einem anderen Stamm zugeordnet ist Ich habe noch nie etwas so Komplexes gebaut, aber es wird Leute geben, die das gemacht haben und die die ganze Zeit tun. Nun, andere Dinge, die Sie hier in Figma tun können, um die Dinge ein wenig einfacher zu machen , und Sie werden sehen, dass andere Leute es tun, sind zunächst die Benennung mit der Grundfarbe des Gerichtsgebäudes Denken Sie daran, dass wir CamelCase haben, Kleinbuchstaben, Großbuchstaben, Großbuchstaben, keine Leerzeichen. Das ist eine Art, es in einer anderen zu definieren wir 500 für die Art der Primärfarbe verwendet haben. Sie können es Primärfarbe nennen. Dieser hier. Farbprimäres Licht. Dieser hier, Primärfarbe, dunkler. Es spielt keine Rolle, solange es konsistent ist. Je nachdem, was die Entwickler zum Codieren von Dingen verwenden, hat das Framework, das sie K verwenden, ähnliche Normen, die sie normalerweise für die Benennung von Dingen verwenden, vergessen, welche das sind, und sie für Ihre Designs vertiefen oder umgekehrt Bring sie dazu, das zu verwenden, was du gerne zum Färben verwendest. Ich finde es einfacher, einfach das auszuwählen, was die Entwickler verwenden. Die andere Sache, die Sie tun können, ist, dass ich das rückgängig machen werde, ist, dass Sie hier in Figma tatsächlich Dinge gruppieren können Anstatt es mit diesen Bindestrichen zu verwenden, können Sie sagen, Sie halten die Umschalttaste gedrückt. Ich versuche Shift gedrückt zu halten. Und genau wie beim Zeichnen kann ich sie mit der rechten Maustaste anklicken. Gehen wir und machen ein paar komische Sachen. Also Gruppe mit Selection, ich kann nicht wirklich sagen, was es ist. Hoffentlich funktioniert die rechte Maustaste besser für Sie. Ja, Gruppe, neue Auswahl, großartig. In dieser Sammlung von Routenvariablen kann ich also eine Gruppe erstellen und das wird kalt. Karla Primarschule. Hier drin brauche ich wirklich nur 300 Tab, Tab, Tab, Tab, Tab, Tab, Tab, Tab, Tab funktioniert nicht. Metazoa. Es funktioniert im Moment nicht. K und du im Jahr 700, das ist vielleicht nur einen Katzensprung entfernt. Und ich zeige es dir, weil du es sehen wirst, wenn andere Leute entweder Tutorials machen oder du mit der Arbeit anderer Leute arbeitest. Diese Sammlung, eine Sammlung. Du kannst eine Gruppe haben. , manchmal ein paar wirklich große Grundfarben aufzuräumen, besonders wenn man in die Aliase kommt , mit einer Bazillion, verschiedenen Dingen, Und es hilft einfach, manchmal ein paar wirklich große Grundfarben aufzuräumen, besonders wenn man in die Aliase kommt, mit einer Bazillion, verschiedenen Dingen, die vor sich gehen. Okay? Sie gruppieren sie in Rahmen, in Knöpfe, in Karten. Okay, es ist eine Möglichkeit, sie alle zusammen in letzter Sache zu sammeln und warum es immer leistungsfähiger wird Wir haben im letzten Video darüber gesprochen , dass Grundfarben zwei Modi haben können. Ich kann also mehr Variablen haben, nicht im richtigen Team. Wir haben schon einmal Farbmodi gemacht, oder? Wir können einen hellen und dunklen Farbmodus haben. Sie beziehen sich beide auf Sekundärfarben, aber wir können einen Hell- und einen Dunkelmodus haben Ich muss meinen in einen Gehaltsplan umwandeln, aber Sie haben die Idee. Du kannst sie bauen, als hätten wir gerade erst angefangen und wir haben ein ziemlich komplexes Design Tokens am Laufen. Wie findest du, dass in diesem Video eine Schnecke zu viel weiter ist, lass uns glücklich sein Es ist fertig und ich habe irgendwie eine Idee und lass uns ein anderes Beispiel machen Im nächsten Video holst du dir eine Tasse Tee, entspannst dich, machst eine Pause und wir sehen uns im nächsten Video. Es fällt mir ein bisschen schwer. Es ist eine Art HOD und erklärt, dass RPM gute Arbeit leistet Wie dem auch sei, lass uns mit dem nächsten Video fortfahren und mehr tun. Ein weiteres Beispiel: Hilfe beim tiefen Atmen 159. Erstelle Abstands- und Radiusdesign-Token in Figma: Hallo zusammen, lasst uns noch ein paar Design-Tokens erstellen. Wir werden uns die Größe und den Randradius ansehen. Und dieses Video ist im Grunde dasselbe wie das letzte Video, aber es ist ein anderes Beispiel dafür, wie man das eingibt. Wir werden auch einige weitere Themen behandeln nur um das, was wir wissen, zu erweitern. Aber im Grunde werden wir ein paar Roots Icings kreieren , die einige Werte haben Wir werden sie in einer anderen Sammlung mit Aliasnamen referenzieren , um es einfacher zu machen, wirklich spezifisch zu sein, okay, der Grenzradius für eine Karte verwendet das Medium Medium besteht zufällig aus acht Pixeln, aber etwas ganz anderes Das Polster für diese Karte hat die gleiche Größe. Bei den Basisgrößenwerten handelt es sich um die Stammgröße von Large, zwei verschiedene Dinge, die auf dieselbe Routensammlung verweisen die auf dieselbe Routensammlung So können wir ziemlich spezifisch sein, aber auch eine gute Kontrolle darüber, wann wir einfach die Root-Sammlung aktualisieren können , um große, weitreichende Änderungen vorzunehmen In Ordnung, ich habe gesprochen, du verwirrst alle. Fangen Sie einfach an, okay? Okay, um das zu tun, lassen Sie uns keine lokalen Variablen auswählen und wir werden eine neue Sammlung erstellen Ich habe eine Größe und werde meine Gesichtsvariable erstellen. Das wird eine Nummer sein, okay? Weil wir extra kleine machen werden. Ich werde einfach gehen, ein anderer wird durch den Rest von ihnen rasen. Okay, wir werden also T-Shirt-Größe K4 verwenden, diese Werte hier verwende ich ein Acht-Punkte-Raster und deine könnten anders sein, du könntest es und 1012 sein Du kannst deine Werte so einstellen, wie du willst, okay, und ich könnte es auf jeden Fall durchgehen und sagen und ich könnte es auf jeden Fall durchgehen und sagen , dass der Abstand auf dieser Seite nicht 16 sein wird. Ich ersetze es durch meine Variable, okay, also ich werde dich und du wirst mein sein, also was bedeutet 16, das ist mein großes Perfekt, dasselbe auch für den oberen Teil tun. Das Problem dabei, es hier zu belassen und nicht mit Aliasen in das nächste Level zu gehen , ist, dass, wenn ich das Gleiche beispielsweise für Radiusecken mache , gehen wir zur Rücktaste, holen uns das gesamte Autolayout und ich möchte auch abgerundete Ecken von groß hinzufügen Das Problem, dass sie sich alle darauf beziehen, ist einfach groß. Wenn ich die Größe von Large ändern muss , um etwas anderes zu sein. Okay. Aber ich möchte nicht, dass es die Radien sind, die du magst Ich kann das nicht ändern, denn wenn ich den Radius von 16 ändere, okay, machen wir es zum Beispiel auf 30. Dafür habe ich auch die Polsterung geändert. Was wir machen, ist einfach diese Art von Kohle- oder Wurzelgrößenmessung beizubehalten Kohle- oder Wurzelgrößenmessung Okay, und dann werde ich eine weitere Kollektion erstellen , die meine früheste ist. Also Alias schneidet. Ich kann also sagen, dass ich tatsächlich etwas Konkreteres habe. Auch dieser wird okay sein. Es wird der Grenzradius sein, meine Karte. Okay. Und ich kann sagen, ich möchte keinen tatsächlichen Wert angeben. Ich möchte einen Alias erstellen. Das ist eigentlich für meinen Rand, speziell für meine Karten werde ich LacZ verwenden Und was das angeht, Polsterung oder der Abstand für meine Karte wird sein, ich kann immer noch groß sein Okay, ich kann sagen, du bist groß, es wird es anwenden. Lassen Sie uns also den Grenzradius dafür vergrößern und sagen, Sie schauen nicht mehr zu weit. Sie sehen sich diesen spezifischeren Alias an. Das ist der Grenzradius für die Karte. In diesem Polster unten, links und rechts, werden Sie für die Karte polstern Polsterung für die Karte. Warum ist das nützlicher? Ist das für mich als Designer wirklich einfach, bis die Polsterung der Karte beim Entwickler aussagt, wenn die Beschichtung auf der Seite ist beim Entwickler aussagt, wenn die Beschichtung auf der Seite Aber es gibt mir später auch die Kontrolle entweder ein großes globales Update durchzuführen, um zu sagen: Okay, alle zusammen, wir gehen von einem Acht-Punkte-Raster aus. Gehen wir zu meiner Größenwurzel und ich sage, dass jetzt alles auf den 12. Platz steigt Jetzt wird alles ein paar Punkte einbüßen. Sag, alles wird sein, ist es 16? Ich weiß nicht, ob es jetzt 20 sein werden. Und Sie werden feststellen , dass sowohl der Radius auch der Radius auf 200 steigen. Zu viel. Sowohl die Polsterung auch der Radius kommen bei der Fahrt zum Tragen Ich habe also quasi eine gute Kontrolle über alles. Aber was wahrscheinlich noch wichtiger ist, ist, dass ich etwas Spezielles habe. Wenn jemand zurückkommt und sagt, dass ich eigentlich den Radius ändern muss, änderst du nicht groß weil es das ist, worauf es verweist Du gehst zum Alias für die Größe und sagst , dass der Grenzradius nicht mehr groß sein wird Du sagst, kann es nicht groß sein, aber kann es sein, wir verwenden einfach Medium für den Radius für die Karte. Da haben wir's. Wir haben diese Änderung vorgenommen. Wir mussten keine weitere Variable erstellen, die besagte, welches Medium ist? Medium ist ein Punkt, okay? Du musst sie nur vertauschen. Welches ist das, ist referenzierend, weil Sie als Nice kontrollieren können, was wir hier tun, und Padding wäre seine eigene Gruppe Und wir könnten eine Gruppe für das gesamte Padding und eine Gruppe für den Grenzradius erstellen Du kannst am Ende Gruppen für alles haben. Sie können entscheiden, sie aufzuteilen. Wir haben Größenaliase und Farbaliase. Es ist gut, separate Schriften zu haben die man zusammendrücken kann, mit denen man nur ein bisschen schwierig arbeiten kann, okay, aber Schriftarten, die du momentan nicht machen kannst, aber ich wette, du könntest sie im nächsten Update dafür machen im nächsten Update dafür Sie können die Strichstärke einstellen, Sie können viel tun. Jede Art von Designelement hier in Variables. Und weil wir das Design beeinflussen und sie aufzeichnen, sie aufzeichnen, verwende ich Design-Tokens für so etwas wie einfache Anwendungsfälle je nachdem, wo Sie sind und wie groß das Unternehmen ist und wie viel sie in ein Designsystem investiert haben Vielleicht stellst du fest , dass Design Tokens auch dafür stehen, warum wir sie verwenden. Die Überlegung, warum wir diesen speziellen Stil auf einer Karte Design von Tokens geht es also um mehr als nur das, was die Variablen sagen. Die Polsterkarte ist gleich groß, aber sie ist das Herzstück Eine weitere Sache, auf die ich bei Design Tokens hinweisen möchte , ist, dass die Namenskonventionen sehr wichtig sind Polsterkarte macht also Sinn, Lodge macht Sinn. Und der Grund, warum wir keine tatsächlichen Zahlen verwenden , ist, dass die tatsächlichen Zahlen davon abhängen oder sich ändern, je nachdem, mit welchem Team Sie zusammenarbeiten. Also ich weiß, gehen wir zur Sizing Root über. In Figma. Wir verwenden Pixel. Aber wenn man ein Entwickler ist, sagt man, wenn man eine Website erstellt, verwendet man so etwas. Du hast eins, was zählt das? Denken Sie an REM, eine Felge oder vielleicht ein Ziel, das dieselbe Größe repräsentiert. 16 Pixel in Figma sind ein Rand. Im Webdesign kann es sich um einen DP und ein mobiles Design handeln. Diese verschiedenen Teams werden sie unterschiedlich verwenden. Die Art und Weise, wie sie das Endergebnis beschrieben haben , ist etwas anders. Aber wenn Sie das als konsistente Sache für alle drei Viererteams verwenden , wenn Sie sich selbst als Designteam einbeziehen, weiß jeder, was er tut. Groß entspricht ihrer Version von 16. Und sie hatten unterschiedliche Entwicklungsräume. Und wenn du sagst, Hey, ich brauche eine Größe von 16 Pixeln, können sie das durchgehen und die A-Version davon auswählen. Sie können sie den verschiedenen Entwicklungsteams entsprechend zuordnen , je nachdem wie anspruchsvoll Ihr Designsystem ist Aber wisse, dass 16 Pixel nicht universell sind. In Figma ist es universell. Okay? Aber die anderen Entwicklungsteams werden andere Messungen verwenden, um das zu erreichen , was Sie von der Lodge erwarten. Deshalb verwenden wir Tokens, das macht es einfacher. Das ist dasselbe, aber Farben, wir verwenden Farben als, wo gehen wir hin? Wir werden die A-Wurzelfarben verwenden. Wir verwenden hier in Figma hauptsächlich Hexadezimalzahlen. Aber Sie werden sehen, dass es eine RGBA-Version davon gibt und die anders codiert geschrieben ist , wenn sie in SPSS oder SAS oder weniger oder iOS oder Android geschrieben ist in SPSS oder SAS oder weniger oder iOS oder Android geschrieben iOS oder Android Aber wir können alle sagen, dass die Primärfarbe 300 diese grüne Farbe ist , und sie können sie in ihren verschiedenen Entwicklungsräumen so definieren , wie sie es brauchen. Ich mache das einfacher oder schwieriger. Okay, das war's für dieses Video. Was wir tun werden, ist, dass wir danach noch ein Video machen danach noch ein Video das so aussieht, wann Sie sie verwenden sollten , wann nicht, wer sollte sie verwenden? Wer sollte das nicht? Hat Alice das gemacht? Jetzt sehe ich mir das nächste Video an 160. Wann würdest du Design-Token in Figma verwenden: Hallo alle zusammen. Hey, dieses Video werden wir gerade von Design Tokens abschließen. Wir werden darüber sprechen, wann Sie sie verwenden sollten, wann Sie sie nicht verwenden sollten und in welcher Phase sollten Sie anfangen, sie zu verwenden? Also lasst uns reinspringen und das machen. Jetzt. Wann würden Sie Design-Tokens verwenden? Du wirst die ganze Zeit Variablen verwenden , weil sie einige nützliche Dinge enthalten, wie zum Beispiel, erinnere dich an das fortgeschrittene Prototyping, wo wir gerade machen, wo wir auf eine Schaltfläche klicken und alles bearbeiten müssen. Und das haben wir auch getan. Sie werden es auch verwenden, wenn sie nicht in ihrer traditionellen Design-Token-Art verwendet werden , okay, also Variablen, die eine Farbe, eine Primärfarbe, repräsentieren , können Sie sie in Ihren Designs verwenden. Sie verwenden Design-Tokens, wo sie an Bedeutung gewinnen. Full Design Tokens selbst ist, wenn Sie mit viel zusammenarbeiten, Jimmy, sie sind ein größeres Unternehmen mit einem größeren Designsystem. Das ist Jim, wirklich, am nützlichsten ist es, wenn Sie mit dem Entwicklungsteam zusammenarbeiten. Und in der Regel verfügt dieses Entwicklungsteam über interne Mitarbeiter für Begleitung, die groß genug sind, um ein eigenes internes UX-Designteam und ein eigenes Entwicklungsteam zu haben . Und die Verbindung zwischen euch beiden ist ziemlich eng. Vielleicht arbeitest du abends in demselben Büro. Damit die Dinge, die Sie tun, wirklich gut durch das Designteam fließen . Vor allem, wenn Sie zwei verschiedene Orte haben , wird es zu iOS gehen, es wird zu Android gehen, es wird viele verschiedene Orte auspeitschen, an denen Tokens entworfen werden könnten, um die Konsistenz zu gewährleisten. Wann würden Sie Design-Tokens also nicht für kleinere Jobs verwenden? Styles funktionieren perfekt. Der große Nachteil von Styles ist, dass man sie nicht mit Aliasnamen referenzieren kann, aber bei vielen Jobs muss man sich einfach nicht hinsetzen Ziemlich komplex mit Gruppen in verschiedenen Sammlungen, da dies möglicherweise nicht erforderlich ist Jiminy auch diese kleineren Jobs. Und es besteht eine Diskrepanz zwischen Ihnen und dem Entwicklungsteam, das Ihr Design implementiert. Und Sie wollen nicht eine ganze Menge Zeit damit verbringen, Design-Tokens zu bekommen, eine Benennungskonvention für Strukturen in Gang zu bringen, nur damit der Entwickler sie ignoriert sich Ihr Figma-Design schnappt Das passiert Schichten und geht ungefähr groß. Du hast das Acht-Punkte-Raster erreicht und ich habe neun, sieht ungefähr aus, oder? Und sie sind gegangen und haben bei der Dimensionierung gebaut, sie werden es sich ansehen, ihre eigenen bauen Sie müssen Variablen erstellen und sie werden Design-Tokens erstellen. Aber sie werden sie in ihrer eigenen Sprache auf ihre eigene Art erstellen , eine Methode, die davon abhängt , wie sie die letzte Arbeit gemacht haben, wie das Framework bereits strukturiert ist. Sie also sicher, dass die Entwicklungsabteilung weiß , was Sie tun, wenn Stellen Sie also sicher, dass die Entwicklungsabteilung weiß , was Sie tun, wenn Sie sich die Mühe machen, Design-Token zu erstellen. Sie haben eine einheitliche Namenskonvention. Andernfalls könnten sie einfach ignorieren, was Sie alles getan haben, und ihr eigenes Ding machen. Okay, kleinere Jobs benötigen also im Allgemeinen keine Design-Tokens. Größere Jobs tun dies in der Regel. Das ist eine gute allgemeine Regel. Der letzte ist komisch. Wird es erledigt? Wann fange ich an, diese Design Tokens zu bauen? Es liegt an dir, wann du neu bist. In der Konzeptphase. Es ist wahrscheinlich noch nicht so nützlich, mit der Erstellung von Design-Tokens zu beginnen. Weil Sie es sind, es geht um Rapid Prototyping, nicht um den Tag der langsamen Prototypenerstellung Es geht darum, es einfach rauszuholen, es zu probieren. Was ist die Sache mit dem Kunden, wie ist das Feedback der Stakeholder? Verwenden Sie Stile, um die Konsistenz zu wahren. Aber bauen Sie noch keine Design-Tokens aus. Denn oft ist es, wenn die endgültige Zustimmung des Kunden vorliegt oder die Projekte in die Entwicklung gehen. Dann können Sie einige Zeit damit verbringen, alles in Ordnung zu bringen und ein gutes System auszuarbeiten, ein gutes System auszuarbeiten weil Sie ein Gefühl dafür haben, was der Job nicht ist Es geht darum, eine angemessene Sache zu dieser Phase mit dem Entwicklungsteam zusammenzuarbeiten. Wie nennst du es? Wie soll ich es nennen? Mit deinem Anführer, dem Benennen oder Verfolgen dessen, was sie tun Im Allgemeinen ist es mindestens nach ja erledigt. Du hast eine gute Grundlage für das, was du tust. Wenn du in einem bestehenden Unternehmen arbeitest und diesen Kurs machst, hast du wahrscheinlich schon ein Designsystem, oder du musst die alten Sachen, die ich habe, durchgehen und selbst eines bauen. Es ist fertig nach all dem Herumspielen von Schriftarten und Farben, wie es bereits getan wurde Schließlich gibt es im Vorfeld viel Arbeit mit Design-Tokens, aber ihre langfristige Nützlichkeit ist erstaunlich wenn Sie in einem größeren Unternehmen arbeiten Also ja, es gibt eine Menge Arbeit im Voraus, wenn Sie denken, Mann, es scheint wie eine Straßenarbeit Es ist so lange, bis Sie Ihr Design implementiert haben und es überall ist. Und dann musst du gehen und Updates vornehmen. Und es bereitet nur große Kopfschmerzen denn diese Person, die den WordPress-Blog hat , und diese Person, die die iOS-App-Version verwaltet, sie sind alle, du versuchst wieder, sie alle zu verwalten und unter einen Hut Wenn Sie dagegen ein, ein Sound-as-a-System von Namenskonventionen und einem Designsystem haben , können Sie es für alle einfacher mischen. Das macht Sinn. Du gehst ein bisschen waffelig. Ich hoffe, das hat Ihnen geholfen ein bisschen zu verstehen, welche Design-Tokens , wo Sie sie verwenden können, wir werden sie nicht verwenden. Du gehst, das ist es. Wir sehen uns im nächsten Video. Ordnung, ich gehe zurück in die Maschine, für eine Weile raus, zurück hinter den Bildschirm Lass uns reden. Wir sehen uns beim nächsten Video. 161. Wie animierst du entlang eines Pfades in Figma: Hallo alle zusammen. In diesem Video werden wir das machen. Wir werden PacMan dazu bringen, einem Pfad zu folgen und in Figma zu animieren Irgendwie, warum hat er das irgendwie gesagt? Denn bevor wir anfangen, nur damit du es weißt, Animationen in Figma sind ziemlich knifflig Also werden wir ein Plugin namens Motion verwenden. Es ist wirklich eine coole, Timeline-Keyframes basierende Animation Aber sobald wir es geschafft haben, will Figma die Sache nicht wirklich akzeptieren, dass wir diese Problemumgehungen gemacht haben und wir müssen das in Kurs a tun, weil ich die ganze Zeit gefragt werde, wie man Animationen auf einem Pfad Und weil du Agenten im Internet damit verbringen wirst , sich animierte Sachen anzusehen, animierte Sieger Und die Leute werden dich bis zu einem gewissen Punkt auftauchen und dann werden sie nicht mehr reden. All die Tutorials, die ich je gefunden habe, kommen zu dem Punkt, an dem du jetzt denkst, sie implementieren sie in Figma und sie tun es nicht, sie kommen einfach irgendwie an diesen Punkt, schau, Arbeit erledigt Aber Figma hat einige skurrile Dinge. Und im Moment dieser Aufnahme werden all diese Animationen zu Geschenken reduziert, all diese Animationen zu Geschenken reduziert die funktionieren und wir werden es tun. Aber es gibt ein paar Dinge, die das nicht tun. Also lasst uns darauf eingehen. Erforsche, verstehe, sei super kompetent. Und natürlich weiß ich, dass Figma darauf wartet , dass ich dieses Video veröffentliche, damit all das, was ich gerade gesagt habe und was ich in diesem Video sage , nicht stimmt Hoffentlich gibt es bald ein Update dem wir, ich weiß nicht, JSON oder animierte SVGs importieren können JSON oder animierte SVGs Also überprüfe das. Es könnte wirklich sein, es könnte draußen sein. Ich habe das Gefühl, dass es auf der Roadmap stehen muss, bis heute nicht gepasst zu haben Also lasst uns jetzt loslegen. Ich habe einen Telefonrahmen. Ich habe ein Hintergrundbild eingefügt, es ist in Ihren Übungsdateien. Wenn du willst. Es heißt abstrakter Hintergrund. Es macht nichts, außer dass sie cool aussehen und ich ein bisschen Pac-Man bin Wenn Sie beim Grundlagenkurs nicht dabei waren, können Sie das machen, wenn ich einen Kreis zeichne wenn ich einen Kreis zeichne und zu meinem Auswahltool gehe. Nummeriere sie, sie, sie, sie, aber okay, so habe ich meinen Pac-Man bekommen Du zeichnest etwas und springst dann in K zurück Damit das funktioniert, brauchen wir einen Pfad, dem es folgen kann. Ich werde mein Pin-Tool verwenden. Also der Peaky und ich werde etwas zeichnen, das irgendwie geht, ich klicke und ziehe heraus, um eine Kurve zu bekommen Okay, es geht irgendwie so und dann vielleicht etwas, das den Pfad da unten erweitert und dann so etwas Okay. Entkomme, wenn du ein paar Mal fertig bist. Ich werde das hauptsächlich weiterführen, weil es ein Problem aufdecken wird, auf das wir stoßen könnten. Wir haben also die Form, wir haben die Linie, wir müssen das Plugin finden. Das Plugin wollen wir Motion nennen, es gibt also viele verschiedene Plugin-Bewegungen. Wahrscheinlich das robusteste, es ist wirklich gut. Aber auch hier ist Animation in Figma nur automatisch, sie weiß, wofür sie gemacht ist Aber jeder fragt mich immer wieder, wie man Animationen auf einem Pfad macht und wir können es irgendwie machen Was wir also tun müssen, ist in der Lage zu sein, herauszuzoomen und sie beide irgendwie zu sehen Okay. Ein bisschen herumwackeln. Jetzt möchte ich auf meinem auswählen, es heißt Subtrahieren. Subtrahiere seinen Pac-Man Eigentlich diese Umbenennung hier drüben, Pac-Men. Und aus irgendeinem Grund wird es darin nicht aktualisiert , aber wenn ich es schließe, öffne ich es erneut. Da ist es, Pac-Man Wenn Sie schon einmal Timeline-Animationen gemacht haben, würden Sie sagen, Hey, das sieht toll aus und es ist, okay, es ist sehr ähnlich wie Adobe Animate nach dem gefälschten Premiere Pro, beliebigen Timeline-Keyframe-Animationswerkzeug Wir werden hier also nicht zu sehr in die Tiefe gehen , aber für diese Leute. Und es gibt viele von uns, die wissen, wie man die Grundlagen davon anwendet. Bewegung ist ein großartiger Schritt. Wer einfach etwas Grundlegendes zusammen macht, um etwas zu machen , aber auch um zu sehen, wo all die Probleme liegen, kommen zu einem Bildungsprozess. Dies wird sich im Laufe der Zeit ändern, da Figma im Moment weiterentwickelt Lassen Sie uns auf diese Probleme eingehen Also warum nicht, ich will Pac-Man sagen, ich würde gerne Kannst du diese Option hier sehen, X und Y, alle drei sind miteinander verknüpft. Ich kann sagen, du fängst mit einem von ihnen an. Es heißt, wähle einen Pfad, diesen Pfad, und klicke auf OK. Es wird funktionieren. Mein Typ da, er hat irgendwie gearbeitet. Ich bin da irgendwie stecken geblieben. Jep. Es funktioniert irgendwie Wenn deins dasselbe ist. Der Grund, warum das nicht funktioniert, ist dass meine Vektoren außerhalb des Frames liegen, an dem ich gerade arbeite, sowohl innerhalb als auch außerhalb des Es spielt keine Rolle. Okay. Das ist es, was es braucht. Dann wird es möglich sein, eine Verbindung herzustellen. Da hast du's. Gutes Stück Animation. Was stimmt nicht, Dan? Nichts falsch außer, lass uns kommen Pac-Man. Klicken wir auf diese. Zuallererst muss die Lockerung linear sein Gehen wir rein und raus. Und lassen Sie uns einige Anpassungen für die Zeit vornehmen. Also werde ich hier auf Pac-Man klicken. Ich gehe nach oben. Ich gebe den Kontotyp in 1 s ein. Wenn Sie das tun, geben Sie einfach 0,1 ein. Also werde ich sagen, einer ist für eine Sekunde. Ich lasse es in meinem Workspace nach unten ziehen, sodass es am Rand einrastet , damit es nicht einfach in dieser kleinen Schleife abgespielt wird. Nächstes Mal. Okay, das Seltsame an Figma ist jetzt , dass es dir nicht erlaubt, das einfach zu behalten Sie sagen, ich kann es spielen sehen. Warum kann ich einfach die Animation haben? Einfach als würde man es in eine Instanz oder Komponente werfen. Ich kann es bewegen und es wird von selbst abgespielt , ähnlich wie ein Video. So funktioniert es nicht, wenn ich das jetzt schließe und eine Vorschau sehe, es ist immer so, dass es immer aussieht macht nichts. Das kann sich im Moment in Zukunft ändern, das kann nicht passieren. Ich kann es exportieren und wieder reinbringen . Das werden wir also tun. Aber es macht nicht immer Doulas-Zeug, das das Plugin macht. Aber mein Prototypmodus kann diese Informationen nicht verarbeiten und auf unseren Prototyp übertragen. Das ist derzeit die größte Einschränkung. Also, wie werden wir abgerundet? Ein paar Dinge. Zum einen exportieren wir es und importieren es erneut. Sie haben also verschiedene Exportoptionen. Das, was ich will, ist wahrscheinlich SVG, weil Sie SVGs jetzt animieren können, das Opfer wird Leider funktioniert das nicht. Sie können das in ein Figma oder im Moment in Klumpen in einer großen animierten Version importieren Klumpen in einer großen animierten Und diesen hatte er Div. Diese hier ist eine JSON-Datei. Mir gefiel JSON, weil wir daraus eine Lottie-Datei machen können , von der Sie jetzt vielleicht nichts wissen, aber leider auch dort zu Daten gelangen, weil im Moment Figma, Konto und Port oder Lottie-Datei oder JSON-Datei Aber Sie könnten jetzt die Animation in Gang bringen , nicht als Prototyp. Und wenn Sie Ihrem Entwickler diese JSON-Datei mitteilen, kann er sie implementieren, okay, das könnte die Problemumgehung für Sie sein Sie können es in Figma nicht sehen, oder zumindest können Sie diese JSON-Datei nicht sehen, aber Sie können sie an Ihren Entwickler senden , um sie in eine Animation In Ordnung, aber sagen wir, wir wollen das hier sehen weil wir es prototypisieren wollen . Es ist Teil dessen , was wir tun. Okay, hier gibt es eine Option namens GIF. Wir alle wissen, was ein animiertes GIF ist, okay? Ich werde alles als Standard belassen. Ich werde es exportieren und wir bekommen es. Da ist es, tuckern und durch. Das wird bei einem Zwei-Grad-Fall funktionieren. Ich lege meins in meine Müllschublade. Ich werde es schlecht benennen lassen. Lassen Sie uns eine weitere Version exportieren, das Video, weil wir so sind, ich werde das Video einfach verwenden. Leider wird es als MP4 exportiert. MP4s sind großartig. Sie haben einfach keine Transparenz. Ich kann es also quasi als Ergänzung zu anderen Dingen verwenden. Es macht einen großen, festen Klumpen aus einer Datei, durch den ich nicht hindurchschauen kann Also werden wir schauen. Ich habe diese beiden Akten. Schauen wir uns beide an. Also habe ich mein GIF bekommen. Es gibt ausgezeichnet. Und schauen wir uns das MP4 an. Das funktioniert also auch. Ein Geschenk kann transparent sein und Mp4 nicht. Also ich will das GIF , weil es gut aussieht. Es ist ein bisschen pixelig, aber das können wir umgehen Also, was wir tun wollen, ist, dass ich ein paar Dinge machen will. Ich will die Linie nicht sehen. Und das können wir tun, indem wir den Sieger finden und den Schlag einfach auf 0% reduzieren. Okay, das wird funktionieren. Und es hat tatsächlich den Hintergrund exportiert. Vielleicht schnappe ich mir das und der Sieger zieht es raus. Okay, ich kann es nicht sehen, aber da ist es. Sie wechseln zur Mitgliedschaft im Outline-Modus. Tun. Okay. Ich werde beide auswählen. Ich öffne das Plug-in. Auch hier verwende ich die Tastenkombination Command Option P, um sie für das Plugin zu öffnen , das du zuletzt benutzt hast oder Strg Alt P. Du hast diese Tastenkombination gesagt. Nun, ich werde versuchen, es zu exportieren. Es wird heißen, dass ich einen Rahmen brauche, damit ich das machen kann. Okay, ich habe die beiden ausgewählt. Ich werde sie in einen Rahmen stellen. Ich werde diesen Rahmen nennen, aber der Bieter nennt ihn Pac-Man. Und jetzt werde ich es exportieren. Und exportieren Sie GIF-Bilder in bester Qualität hoher Qualität pro Sekunde. Ich denke, Sie benötigen die kostenpflichtige Version, um die höheren Bilder pro Sekunde zu erreichen. Aber hey, es wird funktionieren. In Ordnung, Pac-Man GIF, das ist der Ort, an dem ich vorhin eines gemacht habe Und schauen wir uns Beckman GIF an. Hier. Ihr habt Transparenz. Die Gleichstellung von GIF ist immer nicht großartig. Sie können es von bester auf qualitativ hochwertiger Qualität umstellen. Aber jetzt schenkt eine der Dateien , die und verdeckt dies, dass Figma Also werden wir das irgendwie ausdrücken. Ich werde sicherstellen, dass es in meinem Rahmen ist. Okay, fängt irgendwie da an und flitzt irgendwie herum. Und ich bringe sie irgendwie dazu, da rein zu gehen. Sehen wir uns eine Vorschau an. Jetzt. Geh du, da ist meine kleine Animation. Auffrischen. Er schneidet den Boden aus. Okay, das liegt daran, Lass uns gehen, Pac-Man. Kannst du sehen, dass mein Weg hier irgendwie direkt an den Rand geht. Also muss ich meinen Rahmen machen. Jetzt ist der Vektor, der Rahmen Pac-Man, größer. Nur um Pac-Man entgegenzukommen, während er dort auf seinem kleinen Siegerpfad umhergeht Reicht das? Wahrscheinlich genug. Wenn du gehst, kannst du sie auf einem Pfad animieren lassen. Im Moment. Es ist nur ein GIF, wenn es eine neue Version gibt oder ich weiß einfach nicht, wie das geht. Ich will Victor wirklich, denn Geschenke sind, die Animationen sind nicht großartig. Oder wie mein Freund, es gibt nur ein paar Dinge, an die man sich erinnern sollte, wenn man es in Bewegung erstellt. Stellt sicher, dass Sie sowohl den Pfad als auch für das Objekt oder innerhalb des Rahmens die Deckkraft für den Strich verringern können , dem er folgt Und wenn du willst, dass es transparent ist, lege es einfach in einen Rahmen, der an den Rändern genug Platz für unsere kleinen Pac-Man-Guides hat den Rändern genug Platz für , und ich werde abgeschnitten, wenn ich das GIF mitbringe Sobald Sie es getan haben und es möglicherweise an den Kunden oder das TIA-Team verkaufen , können Sie Motion verwenden. Ich habe vergessen, was das Team will. Sie wollen animierte SVGs , die gut sind, aber in dem, was sie tatsächlich erreichen können, ziemlich begrenzt Wenn es sich um einfaches Vektorkram handelt, ist es vielleicht in Ordnung. Okay, aber es könnte auch animiertes CSS sein, du kannst im Moment auch grundlegende Dinge damit machen, für mich und mein Wissen ist eine JSON-Datei wahrscheinlich die beste und robusteste Implementierung. Es behält einen Vektor. Sie können diese Animation tatsächlich im Code steuern. Es ist nicht wie The Gift , wo es irgendwie gemacht wird und du es niemals ändern kannst Du kannst tatsächlich Dinge im Inneren kontrollieren. Du könntest die Farben des Pac-Man ändern. Du könntest die Größe ändern. Das alles wird danach im Code gemacht, es könnten einige dynamische, coole Sachen auf Ihrer Website sein. Ich denke, die größte Erkenntnis ist, dass eine Animation in Figma im Moment nicht das ist, wofür sie gemacht ist Es geht um Rapid Prototyping, aber wenn es ausgereift ist, bin ich mir sicher, dass es viele weitere Funktionen einführen wird Ich hoffe, dass JSON und vielleicht etwas namens Lottie bald dazu kommen Es können animierte SVGs sein, das wäre großartig. In Ordnung, das ist es, unseren Pac-Man auf einem Pfad in Figma zu animieren . Wir sehen uns im nächsten Video. Und bevor wir gehen, eine kleine Abmeldung von meinem Sohn, der den ganzen Tag zu Hause war , der krank ist? Krank für das Hinspiel 2 s bis jetzt ist es nur nervig oder Tag. Nimm es weg, beende das Video, das sie erhalten hat, fertig , waren die ersten 2 Minuten. Ich weiß also, dass ich versuche, mit Menschen zu arbeiten. Ja. Wir sehen uns beim nächsten Video. Tschüss 162. So fügst du Lottie-Animationsdateien in Figma hinzu: Hallo alle zusammen. In diesem Video werden wir Animationen von Lottie in Figma einfügen Aber um es auf den Punkt zu bringen: Wir können Lottie-Dateien nicht nativ in Figma einfügen, wir legen Geschenke rein und dann schicken wir den Entwicklern die Im Moment war es also ein kleiner Workaround. Das wird sie sicherlich ändern, sobald ich in diesem Video auf Aufnahme trete. Im Moment können Lottie-Dateien jedoch nativ eingegeben werden. Lass uns das herausfinden, Schauen wir uns das Plugin an und finden heraus, wie wir es im Moment umgehen können. Ordnung, erster Schritt, falls Sie noch nichts von einer Lottie-Akte gehört haben, und ich sage es dort, mein Akzent. Lottie-Dateien. Es ist eine sehr gängige Animationsdatei tatsächlich in der Produktion auf einer Website oder einer App verwendet wird. JSON ist der zugrunde liegende Code. Es ist sehr schnell zu laden. Es ist sehr klein, was gut ist. Und es enthält all die guten Sachen, die wir brauchen, wie Sieger und wir können alle Arten von Timeline-Animationen machen alle Arten von Timeline-Animationen Lottie ist also großartig. Und wie ich dort am Anfang sagte, können wir das irgendwie in Figma umsetzen Es ist wie das letzte Video. Wir können ein GIF implementieren. Und dann dem Entwickler die Datei zu sehen, die er braucht, das ist ein ekelhaftes Problem. Sie funktionieren. Erstellen Sie zwei Dateien , denn der Grund, warum sie irgendwie eklig aussehen, ist, dass sie sich auf einem Hintergrund befinden, der Transparenz erfordert Öffnen wir also das Lottie-Plugin. Lottie verlangt also, dass Sie sich anmelden. Sie können ein kostenloses Konto einrichten. Mit dem kostenlosen Konto können Sie ziemlich weit kommen. Ich finde es oft einfacher, nur die Website zu benutzen . Du kannst hier reingehen und sagen, ich möchte Animationen laden. Hey, anstatt ewig zu versuchen, es in Figma zu entwerfen, okay, hier sind ein paar Sachen drin und es gibt eine Menge kostenloser Sachen, was großartig ist Aber lass es uns hier in Figma machen. Lass es uns laden. Finde heraus, welches du willst. Nehmen wir an, wir wollen dieses coole Ding. Also kann ich ein SVG einfügen und das könntest du tun. Skalierbar. Es ist ein Sieg, es ist gut. Und was Sie tun, ist, wir an, das lenkt ab Du musst das nur beachten, wenn du es Entwicklern sagst, das ist keine animierte Datei. Hier ist ein Link zur JSON-Datei, der gesamten Lottie-Datei. Okay, also du würdest es von hier aus verlinken. Da ist es. Du würdest es öffnen, es herunterladen und du würdest sagen, hier ist die Lottie-JSON-Datei Und das könnte es sein. Das könnte die Art sein, wie Sie beide miteinander verbinden. Sie fügen einfach einen SVG-Platzhalter ein und sehen ihnen den Link an. Aber nehmen wir an, Sie möchten das Geschenk demonstrieren. Was Sie also tun können, ist , das zu löschen. Und im Moment können wir das nicht. Hoffentlich schauen Sie sich das bald an und können vielleicht auf Lottie einfügen klicken, und es könnte perfekt funktionieren Es wird bald passieren, okay, es kann getan werden. Es war tatsächlich in Adobe XD, also machen sie es. Wir auf Figma ist eine Roadmap. Wird es eingefügt? Ich weiß es nicht. Hoffentlich ist es bald da. Lass es mich in den Kommentaren wissen. Wenn es aktualisiert wurde, muss ich zurückkommen und dieses Video erneut aufnehmen Aber im Moment sagen wir : Eigentlich ist das, statt GIF, ich mache , welche Größe ergibt ein großes. Okay, es dauert ein bisschen, es zu schaffen. Ich lege es hier rein. Ich werde nur sichergehen, weil es irgendwie irgendwo auf der Seite abgelegt wird Stellen Sie also sicher, dass es sich in dem Frame befindet , den Sie in der Vorschau anzeigen möchten. Okay, also ich werde es jetzt schließen und ich werde dir eine Vorschau geben, da ist es. Es sieht gut aus. Ich weiß es nicht. Ich hatte das Gefühl, dass es schlimmer aussah. Der Boss, der ist eigentlich ziemlich nett. Ich habe eine größere Datei erstellt und sie verkleinert , damit die Geschenke gut aussehen Okay. Los, es ist ein animiertes GIF. Diego. Sie geben das GIF ein und dann wieder der leitende Entwickler, diese Lottie-JSON-Datei ist in Schwierigkeiten geraten, dass es nicht Victor ist Ich kann nicht viel in der Hand ändern, aber ich kann viele Farbanpassungen in der Lottie-Datei vornehmen Ich weiß, für die kostenlose Version nimmst du einfach, was du bekommst, aber mit der kostenpflichtigen Version kannst du durchgehen und sagen, okay, es ist in Ordnung, mein Es ist ziemlich cool. Sie können die kostenpflichtige Version durchgehen und auf Anpassen klicken, und Sie können verschiedene Farben auswählen. Speichern Sie diese Animationen erneut und erstellen Sie Ihre eigenen Paletten Im Moment benötigen Sie jedoch einen individuellen Plan, bei dem es sich um eine Pipeline handelt. Aber es gibt jede Menge coole kostenlose Sachen. Und ich freue mich darauf , dieses Video erneut aufzunehmen , wenn wir Lottie tatsächlich von Haus aus einsetzen können Lottie tatsächlich von Haus aus einsetzen Und wenn wir dann unseren Export machen, muss der Entwickler keine Kassette sein , eine separate Datei Sie können es in der Dokumentation und im Inspektionsgremium abrufen. Wenn Sie Ihre eigene benutzerdefinierte Lottie-Datei erstellen möchten, können Sie Sie benötigen etwas wie Adobe After Effects als Plugin namens Body Moving aus dem Rahmen dieses Kurses Aber wenn du meinen Kurs nach dem Festlegen ausprobieren möchtest, werde ich ihn bald aktualisieren und sicherstellen, dass die Erstellung von Lottie-Animationen als Teil davon zur Standardeinstellung wird Okay, momentan sind wir in Figma mit Verlusten behaftet, wir stecken nur ein bisschen in ein GIF, indem wir dem Entwickler die Lottie-Datei schicken Das ist okay, wir können dafür sorgen, dass es funktioniert. Sie werden ein leicht knuspriges GIF haben. In Ordnung, das war's, sage ich im nächsten Video. 163. Barrierefreie Designs - Ein Leitfaden für das Plugin für Barrierefreiheit in Figma: Hallo alle zusammen. In diesem Video werden wir uns die Barrierefreiheit in Figma ansehen Barrierefreiheit in Figma Wir schauen uns einige Plug-ins an, die uns helfen können, und welche Dinge Sie bei der Erstellung Ihrer Designs achten sollten Sie bei der Erstellung Ihrer Designs In Ordnung, lass uns anfangen. Zuerst ein Haftungsausschluss. Ich bin kein Experte für Barrierefreiheit, aber ich wollte es in diesem Kurs beibehalten , weil es ein gutes Plugin ist. Es gibt einige wichtige Dinge , die Sie beim Design beachten sollten, aber es gibt noch viel mehr, als ich über Barrierefreiheit weiß. Aber Sie sollten alles, was ich hier sage, mit Vorsicht genießen und Ihre eigenen Nachforschungen anstellen. Also die wichtigsten Dinge, auf die Sie sich konzentrieren möchten , wenn Sie Ihre Designarbeit machen. Auf der Figma-Seite besteht K aus zwei wichtigen Dingen Es hat mit Schriftarten zu tun und wie lesbar Ebenen und Kontaktpunkte sind, wie anklickbar einige dieser Schaltflächen sind und wie weit sie voneinander entfernt sind, Schriften und Um zu beginnen, habe ich eine neue Seite mit einem neuen Frame erstellt und einfach ein paar meiner Elemente hierher geworfen . Sie gehören zu meinen Hauptstilen , weil ich sie einfach alle reinwerfen und ein paar Checks durchführen wollte , um sicherzugehen, dass wir in die richtige Richtung gehen. Außerdem ist es auf dieser einen einfachen Seite mit einem einfachen Rahmen schön sauber . Nun, wenn es um Plugins geht, gibt es einige davon. Ich habe keine besondere Liebe für einen bestimmten. Das sind alles Klassenstufen. Sie tun genug von dem , was ich tun muss. Ad Stock und Contrast, suche in den Plugins danach. Denken Sie daran, dass diese möglicherweise noch nicht da sind, wenn Sie hören , dass sie sich ändern, während einige von ihnen bezahlt haben, andere aus freiem Willen. Fangen Sie mit dem an, der optisch recht einfach ist, nicht viele Details enthält, aber ziemlich cool ist. Es muss also kontrastieren. Ich muss los. Und es läuft hier auf meinem Rahmen. Und du kannst anfangen, ein paar Dinge zu sehen. Manche Dinge sind grün, manche Dinge sind rot. Im Grunde ist es ein Verhältnis, es ist etwas zu eins. Sie sehen, das ist 3.1, 321 und es ist rot geworden. Es ist nicht gut, zu wenig Kontrast. Dieser hier hat den gleichen Kontrast, 3,13, aber er hat eine größere Schriftgröße Es gibt also einen Kompromiss zwischen der Farbe, die Sie verwenden, und ihrer sowie dem Gewicht und dem, was sich auf der Rückseite befindet was sich auf der Rückseite Sehen Sie hier unten, der Editor wird hineinzoomen. Beide haben also die gleiche Größe, die gleiche Schriftstärke, aber der untere hat ein viel höheres Kontrastverhältnis. Also wie Grün und das oben, hat es kein so gutes Kontrastverhältnis zu dem Violett. Die Differenzierung zwischen den beiden ist nicht hoch genug, um den Test zu bestehen. Wer macht den Test? Die meisten Barrierefreiheitstools verweisen hier auf dieses Dokument, dieses große, hässliche W3C-Dokument Das ist es, wonach du suchst. Wenn Sie näher darauf eingehen möchten, werden Sie dieses Wort rund um die WCAG finden Wcag, niemand nennt es dort, aber es sind die Richtlinien zur Barrierefreiheit von Webinhalten Und richtige Beschreibungen mit Beispielen finden Sie hier. Es ist ziemlich schwierig zu benutzen. Am Ende lade ich es auf. Okay, ich bin in dieser Kurzreferenz gelandet , das wird sich ändern. Wir verwenden V2. Ich glaube, sie arbeiten gerade an V3, aber ich suche nur nach Kontrast, Nicht-Textkontrast Ich suche nach einem Minimum an Kontrast. Ja, da haben wir es. Schauen wir uns die vollständige Beschreibung an. Im Grunde heißt es, dass großer Text ein Kontrastverhältnis von 3,1 haben muss. Logos mit Text darin müssen keine Kontrastanforderungen haben. Also das sind wir, um Ihr Wissen zu erweitern. Nun wissen Sie, dass es hier unten AA und AAA gibt. Sie sehen, dafür ist ein viel höheres Kontrastverhältnis von sieben zu eins erforderlich. Du wirst hier in diesem Plugin sehen, dass du zwischen diesen beiden wechseln kannst. Sie sehen, selbst bei großen Texten hat es die falsche Farbe. Es gibt also keinen Kontrast, der bereit wäre, eine dreifache A-Bewertung zu erhalten. Und du musst überprüfen, welches Kontrastverhältnis du anstrebst. Fairness halber muss ich sagen, dass ich noch nie irgendwo gearbeitet habe , wo es erforderlich war, irgendwelche Barrierefreiheitsanforderungen, keine gesetzlichen Anforderungen Aber ich bin mir sicher, wenn Sie auch für eine Regierungsbehörde arbeiten, ich habe für Regierungsbehörden gearbeitet, und obwohl sie vielleicht irgendwo versteckt Anforderungen haben, gibt es niemanden, der sie überprüft Es ist also irgendwie so, dass ich den Designer optimiere , um sicherzustellen, dass ich sie implementiere. Und wenn es jemals ein Audit geben würde, würde ich damit durchfallen, aber es dauert hier. Also, wie werden wir abgerundet? Dieser hier, du kannst einfach mit solchen Dingen herumspielen . Dinge schneiden groß ab. Mein kleiner Bildschirm. Lass es uns mit diesem hier machen. Nehmen wir an, passen wir das Weiß an. Okay, ich springe das Gewicht höher, indem ich meine süße Abkürzung aus früheren Control Option verwende, mehr als zuzuhören. Und ich werde es auffrischen. Es ist größer und funktioniert immer noch nicht. Also um einen Blick auf meine Farben zu werfen. Also werde ich hier rüber gehen. Ich gehe zu meinen, sagen wir, meinen siebenhundertsten Mal sehen, ob wir den Test bestehen. Also wurde es auf die 700 geändert. Lass es uns ausführen. Jetzt. Es hat ein viel höheres kontrastreiches Farbverhältnis. Und es funktioniert. Sie können sehen, wie wichtig es ist, schon früh im Design ein wenig davon zu verstehen , nur um sicherzugehen, dass Sie Farben haben. Sie sehen nicht nach Gefahr aus. Ich wähle das Rot, das mir nicht gefällt. Es ist ein bisschen nervig. Aber bei dieser Größe hier funktioniert es super. Nur damit du es weißt, einige der Grundregeln sind dieses Zeug hier. Wenn es also 18 Punkt ist und nicht fett oder höher ist, wird es als großer Text betrachtet. Sie kommen mit einem viel niedrigeren Kontrastverhältnis durch. Großer Text wird ebenfalls als 14-Punkt-Text betrachtet, aber nur, wenn er fett gedruckt ist. Er gilt immer noch als großer Text. Auch hier kommen Sie mit einem viel niedrigeren Kontrastverhältnis durch. Das Kontrastverhältnis für Schriftarten ist also eine Mischung aus Schriftgröße, Gewicht und Farbe im Vergleich zum Hintergrund. Schauen wir uns weitere nützliche Tools an. Schauen Sie sich die Aktie an. Man hat ein bisschen mehr drauf. Es gibt auch eine kostenpflichtige Version, aber schauen wir uns den Kontrast an, den ich hier in meinen Button eintauchen werde. Und es sagt mir, dass die beiden hier den AAA-Test bestanden haben. Es wird als großer Text betrachtet. Es hat ein Drei-Punkte-Eins-Kontrastverhältnis, aber es war normaler Text, nicht fett, kleiner als 18, es würde Es enthält Vorschläge, an denen Sie sehen können , dass es sich auf die WCAG bezieht, okay , also früh in Ihrem Design, sobald Sie einige Textstile haben, machen Sie einen kleinen Test mit Stock oder einem der anderen Denken Sie daran, die Werbung ist gut, Aktie hat einen guten Kontrast, das ist praktisch, nur um zu sehen, ob Sie etwas entwerfen, das Sie etwas entwerfen, das irgendwann sowieso geändert werden muss , ich wurde wirklich komisch, ist zu klein. Und wenn es um Text geht, gilt Text als etwas, das rot und nutzbar sein muss. Wenn Sie Text haben, schauen Sie sich das an. Hier. Das tritt hier in den Hintergrund, das würde das Kontrastverhältnis stark beeinträchtigen. Dieser Text wird als zufälliger Text betrachtet. Es ist wie reine Dekoration und dient keinem Benutzerzweck, sondern nur als Grafik. Um die musst du dir also Sorgen machen. Aber dann rennt man manchmal zu diesem Zeug und fragt sich, ist es brauchbar, nicht wahr? Sie können etwas knifflig werden. Das Kontrastverhältnis ist eine Wissenschaft, aber es kann etwas chaotisch werden Lassen Sie uns über Touchpoints sprechen. Schauen wir uns diesen an. Wir waren zufällig auf dieser Seite. Es ist 32 mal 32, und genau das verwende ich voll meinen Shift E für meinen Prototyp. Wenn ich darauf klicke und zu dieser Seite gehe , die einen Berührungspunkt hat, und der Touchpoint wird nicht als Grafik, sondern als aktiver Bereich betrachtet sondern als aktiver Bereich Wenn ich mir das also ansehe, ist das der Teil, auf den geklickt werden kann Kannst du da unten sehen , das ist diese Art von aktivem Bereich. Das sind die berührbaren Bereiche. Was Sie also tun können, ist, manchmal so zu tun , als ob Sie einen Touchpoint-Test Okay, was sind also die Regeln für Touchpoints? Das ist für verschiedene Betriebssysteme unterschiedlich. Also ein Apfel, okay, sie wollen, dass der Berührungsbereich oder das Berührungsziel ist, wir haben 32 mal 32. Apple wollte 44 mal 44 sein. Das ist die Mindestgröße. Android ist ein bisschen größer, 48 mal 48. Und weil Android Google gehört und Google das Internet betreibt, hat es auch für Websites dieselbe Größe, 48 mal 48. Und Google bietet Möglichkeiten, Tests durchzuführen , um zu testen, wie die Dinge funktionieren, insbesondere auf Mobilgeräten, um zu sehen, wie Sie in den Suchergebnissen rangieren . Es ist also eine wichtige Sache. Schauen wir uns also an, wie wir die gleiche Größe beibehalten können. Aber sei der, sagen wir mal 48 mal 48. Also gehe ich zu meiner Hauptkomponente, okay, hier ist sie. Und sehen Sie 32, 32, ich könnte dieses Ding einfach 48 mal 48 machen, aber es ist zu groß oder der Touchpoint, um größer zu sein, aber nicht unbedingt das Symbol Also werde ich das alles rückgängig machen. Was ich tun werde, ist sicherzugehen, dass ich die Eltern habe. Und ich werde es tatsächlich tun, also in der Hauptkomponente ist der innere Vektor. Ich schnapp mir die Außenseite. Und denk an die Abkürzungsformel. Sie können auf einem Mac die Befehlstaste und auf einem PC die Strg-Taste gedrückt halten , und Sie können die Rahmengröße sogar getrennt vom Symbol ändern , sodass Sie es auf diese Weise nach außen verschieben können. Es ist einfacher, wahrscheinlich nur ein raffiniertes Elternteil, macht es zu einer automatischen Layoutverschiebung a. Und ich werde einfach etwas Abstand hinzufügen. Ich werde alles bearbeiten. Merken Sie sich die Option Shift oder Alt Shift, oder Sie können es hier einfach manuell tun und eingeben. Was Sie suchen, ist insgesamt 48 mal 48. Für mich muss ich acht mal acht addieren. Ich denke, das ist es. Wir gehen insgesamt 48, damit all diese Polsterungen im Touchpoint enthalten sind Also werde ich es aktualisieren. Option drei, sagen wir, wir haben alle Seiten veröffentlicht , die an einigen Stellen verwendet werden. Also muss ich vorsichtig sein. Gehen wir zurück zu diesem Thema. Kehren wir zu dieser Option zurück. Lassen Sie uns sie alle überprüfen und aktualisieren. Und Sie können hier sehen, das ist aktualisiert, es ist 48 48. Sollte in der Lage sein, es zu testen. Wenn ich jetzt wegklicke, ist das irgendwie ein Vorschlag zum Sammeln, aber du kannst die Berührungsbereiche viel größer sehen Okay, das sind also 48 mal 48. Wenn du für eine iOS-App entwickelst, wollen sie, dass es 44 mal 44 ist. Das ändert sich jetzt. Überprüfe es noch einmal Nimm nicht alles, was ich sage, für Evangelium. Recherchiere ein wenig nach der Plattform, die du entwickelst. Für. Die andere Sache , die sowohl zwischen Android als auch Apple und dem Webdesign konsistent ist, ist ein Abstand von 16 Punkten zwischen ihnen. Das hat also eine große Lücke, also werden sie gut funktionieren. Alle Schaltflächen und Symbole benötigen jedoch mindestens 16 Punkte zwischen ihnen. Okay, die letzten Dinge, die es zu beachten gilt, die wichtigsten, oder? Achten Sie auf die richtige Schriftgröße und den richtigen Kontrast und stellen Sie sicher, dass die Kontaktpunkte in diesem Zwischenraum groß genug sind . Aber es gibt noch viele andere Dinge zur Barrierefreiheit, die es zu beachten gilt. Wenn Sie sich Ihre Persona ansehen, mit welcher Altersgruppe arbeiten Sie Was sind ihre technologischen Fähigkeiten? Machst du? Das Minimum, das für Ihr Publikum möglicherweise nicht ausreicht, sind die Dinge, die Sie sich ansehen können. Dinge wie Farbenblindheit und Pull-Site. Einige der Apps haben auch dabei geholfen. Schau es dir an, sieh dir das hier an und starte jetzt den farbenblinden Simulator Komm schon, sie sind verdammt kostenlos, aber ich kann meine Zeichenfläche auswählen Suchen wir einen, der einige Inhalte enthält . Klicken Sie auf diesen. Okay, also ich werde das Kommentar-App-Board verwenden. Und was Sie tun können, ist, eine Art von Farbenblindheit auszuwählen eine Art von Farbenblindheit Dann kannst du zwischen ihnen wechseln und sehen, wie es bei jemand anderem aussehen wird. Und ist es noch nutzbar? Ist das Kontrastverhältnis hoch genug? Auch hier hat Barrierefreiheit noch viel mehr zu bieten. hier nur einige der Grundlagen behandelt, die wichtigsten, die sich auf unsere Designseite auswirken. In die Entwicklung fließt noch viel mehr. Leute, die Dinge wie Alt-Text benötigen , wenn es um Bilder geht, Screenreader, wie die Tastatur durch eine Website navigieren kann Es gibt viel zu beachten wenn es um Barrierefreiheit geht, aber los geht's, das ist mein Überblick. Das Ticket ist jedoch nur ein erster Schritt um mehr über Barrierefreiheit zu erfahren. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 164. Welche Tipps gibt es für die Arbeit mit Kollegen in Figma: Hallo alle zusammen. Willkommen in der Sektion „Arbeit mit Kollegen“. Dieses Video ist so, als ob all die kleinen Tipps und Tricks, die Sie verwenden können, um diesen Prozess des Austauschs mit anderen Designern zu unterstützen , die Mitarbeiter in Ihrem Unternehmen sind Es gibt nützliche Widgets, lädt eine Tastenkombination, von Einstellungen, die Sie ein- und ausschalten können , wenn Sie mit einem großen Team arbeiten Sie sind ratlos, okay, also der einfachste Weg, mit Kunden oder Kollegen über eine Datei in Kontakt zu treten Kunden oder Kollegen , ist die Verwendung des Casey ist die Abkürzung und du kannst Kommentare hinterlassen. Und wenn Sie hier zu diesem Tool wechseln werden alle vorherigen Befehle angezeigt. Du kannst sie anklicken und dich bewegen. Wenn du ein Team hast, das ruhig und glücklich ist und es überall nur Kommentare gibt. Ein praktisches Tastenkürzel ist Shift C, - oder ausschalten, die nicht verschwinden Das ist quasi visuell verschwinden. Sehr wahr. Kommentare sind so gestaltet , dass sie nicht aufdringlich sind. Sie sind nützlich, aber manchmal braucht man die großen Waffen. Du brauchst einen riesigen Post-it-Zettel, wenn du zu Widgets gehst, okay, es gibt also wirklich gute Ich füge das Wort klebrig ein. Und es gibt ein paar kleine Anzeigen und beide sind ziemlich gut. Ich verwende die Anmerkungen wie diese hauptsächlich, weil sie die kleinen Bubble-Extras enthält , die Sie unten links sehen können, sie haben dieses kleine Ding Warum das wichtig ist. Ich bin mir nicht sicher. Du kannst dort auch deinen Namen haben. Okay. Und deine Notizen und wähle eine Farbe. Sehr wichtig. Poste die Notizen sollten gelb sein, also belasse ich es so. Und gerade wenn du es auslegst, sei vorsichtig. Wir verwenden einige unserer Figma-Kurzbefehle denn wenn du das herumziehst, also schnappst du dir den Titel und ziehst ihn hin und her, es wird innerhalb der Frames platziert und es ist wahrscheinlich besser, einfach darauf zu sitzen Okay, also sieh dir das an, wenn ich es ziehe, halte die Leertaste gedrückt Okay. Und das bedeutet, dass ich in einen Frame gesprungen bin und ich damit die Dinge ein bisschen einfacher modellieren kann . Okay, das ist also das erste Widget. Die andere, die ziemlich praktisch ist, ist eine To-Do-Liste. Zu wissen, dass du noch Arbeit vor dir hast. Ich liebe es, von einer To-Do-Liste aus zu arbeiten. Ich habe sie überall. Das Gleiche, Widgets und nur Tippen, um zu tun. Da ist ein nettes Zitat, es gibt ein bisschen zu tun. Und es macht genau das, was du dir vorgestellt hast. Füge es hinzu, um es zu tun. Okay, Bearbeitung, damit andere Leute wissen, woran du arbeitest. Sie könnten es auch für sich selbst verwenden. So wie eine kleine Checkliste in der Akte, besonders praktisch, wenn Sie für einen Urlaub wegfahren, an einem anderen Projekt arbeiten müssen für einen Urlaub wegfahren, an einem , Sie können zurückkommen und alles ist irgendwie zusammengefügt . Auch dies ist nur ein kleines Modul. Du kannst dich überall bewegen. Ich finde das ein Hindi-Widget. Wenn Sie Dokumente mit Ihren anderen Kollegen teilen , können Sie rechts auf Teilen klicken und den Link kopieren und ihnen eine E-Mail senden. Was ich wirklich praktisch finde ist, dass ich zu meinem Hauptkomponentendokument springe. Nehmen wir an, ich spreche von den Knöpfen. Anstatt sie einfach an diese Datei zu schicken , die überall ist. Ich kann sagen, klicken Sie auf diesen Abschnitt. Ich kann zu Teilen gehen und hier gibt es eine Option, es heißt Link zum aktuellen Abschnitt. Also, wenn ich mir den Link schnappe, der in einem Google-Dokument veröffentlicht wurde, okay. Können Sie sehen, dass es direkt zu diesem Abschnitt führt, nicht nur zum gesamten Dokument? Großartig. Wenn Sie beispielsweise per E-Mail verlinken und jemandem die richtige Richtung weisen möchten. Du wolltest auf Seite vier in diesem Abschnitt sagen, du kannst Trinken damit verknüpfen. Es muss kein Abschnitt sein. Sie können in diesem Modul auf alles verlinken, was Sie wollen , es passiert dasselbe. Es spielt keine Rolle, was Sie ausgewählt haben. Wir werden direkt darauf verlinken. In Ordnung, das bringt ein gutes Argument zur Sprache. Wenn mehrere Personen ein zentrales Designsystem verwenden, sind ihnen möglicherweise kleine Pfeile verloren gegangen oder Sie leiten ein Meeting und alle sind an der Datei beteiligt und es ist als würden Pfeile überall laufen. Ich finde es praktisch, ziemlich schnelle Aktionen zu befehlen. Und wenn Sie mehrere Cursor eingeben, ist es standardmäßig aktiviert. Es gibt eine Abkürzung, an die ich mich nie erinnern werde, aber ich kann sie ausschalten Und das heißt nur, obwohl es vielleicht zehn Leute in der Sitzung , denen du das irgendwie vorführen wirst Du kannst sie alle ausschalten. Eine andere Sache, die Sie tun können, wenn Sie eine Präsentation halten, ist, dass Sie bis hierher gehen und ins Rampenlicht treten können . Ich. Und was sie meinen , sind alle, die noch in diesem Dokument stehen. Ich habe es auf ein paar Computern geöffnet, meinem PC-Laptop hier drüben, und ich habe es im Browser geöffnet. Das bedeutet, dass sie die Zoomstufe und die Position sehen, an der Sie sich befinden. Wenn ich hier reinzoome, haben alle anderen, die sich das ansehen, dieselbe Zoomstufe. dasselbe betrachten, ist es für Präsentationen wirklich einfach , einen Blick auf die Desktop-Ansicht zu werfen. Kannst du sehen, dass die Move-Lifte tatsächlich einen kleinen Vorgeschmack geben. Ich bewege mich hier. Dieses andere Beispiel spielt keine Rolle, ob du in dem Moment eine andere Version von mir bist. Aber es könnte Ihr ganzes Team sein, wenn Sie zu dieser Option hier sagen, folgen Sie mir, sie folgen alle. Sie können es ignorieren und Sie können es danach beenden. Als Nächstes geht es um Benachrichtigungen. Sie sind manchmal großartig und manchmal nicht. Ich habe die Desktop-App. Einer der Vorteile ist also, dass Sie dieses kleine Modul haben, das ausgeführt wird und angezeigt wird, wenn Leute Ihrer Figma-Datei Notizen hinzufügen Sie können damit Konversationen führen. Manchmal ist es aber auch nur ein Teil einer Datei, zum Beispiel die wichtigsten Styles. Sie müssen eigentlich nicht Teil der Konversation sein. Es gibt viele Leute darüber reden und du willst einfach davon abbekommen, Hände hoch, wessen E-Mail voller Figma-Benachrichtigungen ist , die für sie nicht relevant Sie können Ihre Kontoeinstellungen entweder der Website oder hier in der Desktop-App aufrufen. Die Benachrichtigungen nehmen wenig Zeit in um zu entscheiden, was Sie Ihnen mitteilen möchten Das hängt von Ihrer Rolle in dem Dokument ab. Oft braucht man einfach Dinge wie, ich will nur, wenn ich direkt erwähnt wurde oder auf einen meiner Kommentare angewendet wurde, wir können sie ausschalten und so etwas wie die Desktop-App-Version von Figma verwenden die Desktop-App-Version von Figma Das ist die einzige Möglichkeit, die Benachrichtigungen hier durchzubringen. Die andere Sache, die Sie beim Teilen beachten sollten ist, dass ich das habe und das teilen wollte. Okay? So wie Sie das einrichten, können Sie beim Teilen des Links sowohl die Designdatei als auch den Prototyp teilen . Du solltest die Prototypen sagen, damit sie nicht in die Designdatei aufgenommen werden. Das ist besser für Kunden, aber auch für andere Teammitglieder. Was Sie tun können, ist, dass das, was Sie hier sitzen, in Erinnerung bleibt. Der Link. Warum meinst du das? Wenn ich sage, auf tatsächliche Größe setzen und dann auf Teilen klicken, wird es auf dem Computer der anderen Person in der tatsächlichen Größe geöffnet , nicht in der Anpassung an den Bildschirm, genau wie bei Chrome. Also gehe ich zurück zu diesem Thema, ich habe einen Prototyp erstellt und ich sage, eigentlich möchte ich, dass es auf dem iPhone 14 als Vorschau angezeigt wird, aber ich möchte die rote Version verwenden. Wenn ich nun in die Vorschau gehe, diese Änderungen vornehme und den Prototyp teile, erscheint er rot und da ist er, also sei vorsichtig, mache ihn so, wie du willst, bevor du den Prototyp teilst Die letzte Abkürzung, an die ich mich gerade erinnere, ist Command or Control L. Sie können sehen, was auch immer Sie darauf haben. Wir werden einen Link dazu teilen. Sie müssen sich nicht die ganze Mühe machen, dies zu und dann auf diesen Befehl oder die Strg-L zu klicken , Mac oder PC Das Gleiche gilt für Prototypen und Design View. Wenn ich das ausgewählt habe, drücke ich Command L auf meinem Mac, drücke L auf einem PC, kannst du sehen, dass es mit diesem Frame verknüpft ist. Nun, für malt das in einen Browser, Sie sehen, dass es hier direkt mit dieser Seite verlinkt ist. Ich werde das jetzt zum Shortcut Sheet hinzufügen, bevor ich es vergesse. In Ordnung, das sind so wie kleine Kleinigkeiten, die Art von Tipps und Tricks , die man mit Kunden teilen kann Und es gibt noch viele weitere wichtige Tipps und Tricks für die Zusammenarbeit mit Kollegen, die wir in den nächsten Videos behandeln werden . 165. Wie du den Versionsverlauf in Figma duplizierst und wiederherstellst: Hallo alle zusammen. Hey, wir werden uns eingehend mit der Versionsgeschichte befassen. Das ist das hier drüben, das wir vorhin angesprochen haben. Aber es gibt noch viele andere coole Dinge, die man tun kann. Willst du alles in einem schönen Video zusammenfassen. Wir werden über automatische Backups, den Versionsverlauf, das Hin- und Herspringen und die Zeit sowie das Teilen von Links früherer Versionen sprechen das Hin- und Herspringen und die Zeit sowie . Alle möglichen coolen Sachen. Lassen Sie uns loslegen, richtig, alles, was wir brauchen, versteckt sich in einer sogenannten Versionsgeschichte anzeigen. Wir haben es uns vorhin kurz angesehen. Gehen wir näher darauf ein. Und so habe ich nichts ausgewählt. Sie können den Dateinamen also hier sehen und er sollte dort sein. Sie finden es hier, unter dem F, unter Datei. Da ist es auch. Okay, so oder so, wir haben unsere Versionsgeschichte. Lassen Sie uns nun zunächst über die automatischen Speicherungen sprechen. Es gibt also einen großen Teil der automatischen Speicherungen. Hey, deine, die du dir ansiehst, speichert wahrscheinlich nur automatisch, wenn ich im Laufe der Zeit Versionen meines Verlaufs manuell speichere. Aber Sie können hier einen Teil der automatischen Speicherungen sehen. Jetzt ist Figma, es speichert es alle etwa 30 Minuten, in denen die Datei inaktiv ist. Daran wurde nichts geändert. Es zeichnet also nicht alles auf und jeden Schritt zeichnet einfach auf wie ja, Pausen, zeichnet auf, kurz bevor du weggehst, um eine helle Farbpause einzulegen Und es wird alle auflisten , die an dieser Datei gearbeitet haben. Im Moment arbeite nur ich an dieser Datei. Es war also weniger wie ein Rückgängigmachen und sagen wir Photoshop, sondern eher wie wichtige Pots, große Meilensteine, die, weil es großartig ist, das ist automatisch und manchmal möchte man ein bisschen granularer und dann muss man ein manuelles Speichern machen. Das Einzige, was man über diesen Versionsverlauf wissen muss, mit einem Sie ihn hineinlegen oder er speichert automatisch, ist, ein bisschen granularer und dann muss man ein manuelles Speichern machen. Das Einzige, was man über diesen Versionsverlauf wissen muss, mit einem Sie ihn hineinlegen oder er speichert automatisch, ist, 0 dass, wenn Sie auf dem kostenlosen Plan sind oder Wenn Sie in Entwürfen sind, sie nur für 30 Tage gespeichert Okay, also steck es in ein bezahltes Team. Wenn du es also für immer behalten möchtest und es alles im Versionsverlauf speichert, musst du einen kostenpflichtigen Team-Tarif abschließen. Wenn Sie also eine Version speichern möchten, können Sie hier auf diese Plus-Option klicken. Oder anstatt all das durchzugehen, können Sie die Tastenkombination verwenden, die auf einem Mac die Befehlsoption und auf einem PC die Strg-Alt-Taste S ist . Dies dient als reguläres Speichern. Das Gute daran ist , ein paar Details hinzuzufügen, einen Titel hinzuzufügen, zu bearbeiten, zu beschreiben und zu speichern. Wisse das einfach, falls du zurück musst, okay. Du kannst hier reingehen und ein paar Dinge tun. Wenn du zu dieser Liste gehst, funktioniert es irgendwie seltsam Nehmen wir an, ich möchte zu vor fünf Tagen zurückkehren. Wenn ich darauf klicke, komme ich zurück zu dieser Seite. Sie können sehen, dass ein Teil des Designs verschwunden ist. Und ich kann es sehen und zoomen, aber ich kann eigentlich auf nichts klicken. Es ist wie eine Ansicht, nur wenn Sie hier reingehen und sagen möchten , dass Sie etwas anderes kopieren und einfügen oder zumindest wiederherstellen möchten. Alle Optionen hier, sogar die automatischen Speicherungen, haben diese kleinen Punkte hier, klicken Sie darauf. Und ich kann ein paar Dinge tun ich auf diese Version zurücksetzen könnte, was bedeutet , dass alles wieder hier ist, okay, das Gute daran ist, sagen wir , die Leute kommentieren unsere Arbeit Die Kommentare bleiben unverändert. Sie verlieren sie nicht, aber die Arbeit wird wieder hierher zurückkehren. Nun, vielleicht möchten Sie es duplizieren. Am Ende wirst du die Versionen haben. Und das Coole daran ist , dass es zwar eine Kopie davon erstellt, es sich aber um eine völlig separate Datei handelt. Jetzt könntest du das benutzen, um in eine andere Richtung zu gehen Es könnte sein, diese Datei zu teilen , damit Sie weiter am Original arbeiten können, vielleicht ein anderes Teammitglied. Das einzige, was zu beachten ist, ist, dass dieses Original immer noch seine Versionsgeschichte hat. Diese neue doppelte Kopie, eine völlig neue Datei, hat keine Historie. Es hat irgendwie angefangen, dich zu verstehen. Eine andere Sache, die Sie tun können und was ich oft mache, wenn ich zurückgehen und mir etwas schnappen möchte , ist, dass ich das hier durchgehe und Sie zu dieser Version zurückkehren können. Also lasst uns zu dieser alten Version zurückkehren. Blitzlicht drauf und macht irgendwas. Das Wichtigste für mich ist, dass ich versucht habe dass hier oben die Schaltfläche steht, die Schaltfläche Fertig. Okay. Ich bin mir nicht sicher, warum ich das auch anklicken muss, aber ich tue es. Okay, jetzt ist es vollständig editierbar und das Coole daran, dass ich Sachen holen kann , ich weiß nicht, was ich brauche Ich weiß es nicht. Ich hole mir das. Ich werde es kopieren. Und jetzt kann ich zu dieser ersten Vision zurückkehren , auch wenn du hier ein bisschen arbeitest, okay, du Rick-Zeug. Okay. Sie können zu diesem Versionsverlauf zurückkehren und zu dem zurückkehren, an dem ich gerade gearbeitet habe. Keine aktuelle Version. Zurück zu dem , den ich gespeichert habe, und ich kann ihn hier wiederherstellen. Wir haben diese Version gestartet. Vergessen Sie nicht, auf Fertig zu klicken, sobald es blinkt, warten Sie. Dieser Blitz hängt davon ab, wie komplex Ihre Designer sind, okay, wie viele Ressourcen verwendet werden. Klicken Sie auf Fertig. Und jetzt bin ich wieder da, wo ich war, aber ich kann das Ding einfügen, das ich versehentlich gelöscht oder kaputt gemacht habe oder es einfach als Referenz verwenden möchte. Die andere Sache, wenn man damit arbeitet, ist, dass es ziemlich chaotisch werden kann Also manchmal hat das hier so viele Optionen, wie all diese automatischen Speicherungen hier drin. Was Sie tun können, ist zu Filter zu gehen und mir einfach zu zeigen, sagen wir, Sie arbeiten mit einem großen Team zusammen, um mir Ihre Änderungen zu zeigen. Aber für mich und alle, die an dieser Datei arbeiten, ist das nicht so hilfreich. Was für mich hilfreich ist, ist, dass ich die automatischen Speicherungen nur für die Dinge ausschalten kann , für die ich absichtlich einen Meilenstein hinzugefügt habe absichtlich einen Meilenstein hinzugefügt Ich habe der Versionsgeschichte von Given the Name, Inhabing in einer Sendung, diejenigen hinzugefügt , die für meine Bestellungen hilfreich sein könnten , die wieder aktiv sind Die andere coole Sache ist, dass Sie tatsächlich frühere Versionen teilen können . Du kannst zurück hierher gehen und sagen, ich möchte sehen, wann wir das gemacht haben, wann es zu den kleinen Punkten hier geht. Und ich möchte einen Link zu diesem kopieren , was sehr praktisch ist. Das kannst du teilen. Es wird einfach so angesehen werden. Die Leute können es sich ansehen, okay, aber sie können es nicht aktualisieren oder alles Ausgewählte ändern. Aber wenn Sie darauf verweisen, kann es sehr praktisch sein, das zu teilen Der Link ist hier, ich füge ihn in einen Browser ein und er wird mit dieser speziellen Version geteilt. Es sah auch zehn Jahre aus, wenn ich es betrachte. Das Letzte, was ich Ihnen zeigen möchte, sind Aktivitätsprotokolle. Ich habe nicht das richtige Konto dafür, aber wenn Sie auf der Ebene des Unternehmensplans arbeiten , können Sie sich etwas namens Aktivitätsprotokolle ansehen , die ziemlich einfach zu verstehen sind. Um in Ihrem Admin-Konto nachzusehen, haben Sie Zugriff auf Big Brother. Sie können von K aus sehen, wer, wann und was sie mit der Datei gemacht haben und wo sie wann und was sie mit der Datei gemacht haben und wo sie darauf zugegriffen haben. Es heißt Aktivitätsprotokolle und Sie können es irgendwie hier sehen Es ist eine Administratoreinstellung, aber nur, wenn Sie sie im Moment haben, es ist Unternehmen und Organisation. Wenn Sie also herausfinden müssen, was wo passiert ist, ist dies eine wirklich coole Übersicht. Es heißt Aktivitätsprotokoll. In Ordnung, das ist der tiefe Einblick in die Versionsgeschichte. Wir sehen uns im nächsten Video. 166. Archivieren und Wiederherstellen früherer Versionen von Figma-Dateien: Hallo alle zusammen. In diesem Video schauen wir uns an bestimmte Teile einer Designdatei archivieren. Angenommen, Sie möchten Komponenten oder Seiten löschen weil sie nicht mehr verwendet werden. Aber du willst für alle Fälle zurückkehren können. Das Wichtigste, an das Sie sich erinnern sollten, ist, ob Sie einen kostenlosen Tarif haben oder Ihre Kraftstofffilter und -drosseln, es spielt keine Rolle Es gibt nur 30 Tage Geschichte und Rettung. Auch bei diesen Arco-Versionen benötigen Sie einen kostenpflichtigen oder organisatorischen Unternehmensplan Und diese Archivversionen werden für immer da sein. Im Grunde werden wir den Versionsverlauf nutzen . Lass mich dir zeigen, wie es funktioniert. Okay, also die Archivierung alter Werke, es gibt keine offizielle Archivierungsabteilung. Im Grunde werden wir das nutzen, was wir über die Versionsgeschichte wissen. Es gibt jedoch eine gute Methode , die Sie befolgen sollten, um sicherzustellen , dass Sie einfach zurückkehren und sich sicher fühlen können, insbesondere wenn Sie Inhalte aus Dateien löschen. Nehmen wir an, wir haben die meisten unserer Komponenten oder alles, was wir benötigen, in eine separate Datei verschoben unserer Komponenten oder alles, was wir . Also ich habe diese Seite hier, die ich nicht brauche. Okay, also ich werde mit der rechten Maustaste darauf klicken und die Seite löschen und ausflippen, weil ich so denke, was ist, wenn da etwas drin ist Also, was ich tun werde, ist einen Versionsverlauf zu speichern. Denken Sie an unsere Tastenkombination Command Option S oder Control Alt S auf einem PC, und nennen wir dieses eine Archiv. Okay, erreiche II. Jedenfalls archivieren. Und wir werden das Datum angeben, also legen wir den Mai hinein und legen es auf den 3. Mai, was geändert wurde. Okay. Das wird für den zukünftigen Dan praktisch sein. Also sagen wir, die tatsächliche Geschwindigkeit wurde dadurch gelöscht . Okay, wir fügen einige Unterlagen hinzu. Das Coole daran ist, dass ich jetzt sagen kann, jetzt löschen, los, meiner Arbeit nachgehen, weiterarbeiten, weiterarbeiten. Wisse, dass es da ist. Okay, ich kann zu meinem Versionsverlauf zurückkehren. Okay, und sag, Schau, obwohl ich Sachen gemacht habe, kann ich hierher zurückkehren. Wie komme ich wieder hierher? Ich kann darauf klicken und ich kann zu den kleinen Punkten gehen. Ich kann tatsächlich darauf klicken und mich einfach zurechtarbeiten. Sie werden sehen, dass die Komponentenseiten zurückliegen, damit ich sie durchgehen und sie einfach überprüfen kann , während wir in diesem Modus sind. Denken Sie daran, wir können hineinzoomen , schauen und überprüfen, aber wir können nichts kopieren und einfügen. Wir können nichts manipulieren. Wenn Sie das tun möchten, können Sie entweder diese Version wiederherstellen, sich die gewünschten Inhalte schnappen und dann zur aktuellen Version zurückkehren Oder Sie möchten es vielleicht trennen und duplizieren. Sie haben also eine weitere separate Datei oder erstellen eine weitere Figma-Datei, eine Kopie Und wir können das jetzt in etwas Passenderes umbenennen. Ich lasse es in meinem Entwurfsordner fehlen. Okay, und wenn Sie fertig sind, klicken wir auf Fertig. Ich kann also jederzeit dorthin zurückkehren, um es noch praktischer zu machen. Gehen wir jetzt zurück zu unserem Versionsverlauf, falls Sie nichts ausgewählt haben müssen, falls Sie nichts ausgewählt haben müssen, dann fahren Sie mit dem kleinen Shape Run fort. Was Sie etwas professioneller machen können , ist, dass Sie darauf klicken, auf die kleinen Punkte klicken und Link kopieren sagen. Okay, und dann können wir ein Änderungsprotokoll erstellen und auf Fertig klicken. Ich werde eine neue Seite erstellen. Also mache ich das einfach schnell auf einem Deckblatt und hier sind meine Archivversionen Okay, es gibt einen kleinen Bug mit diesem Hühnchen funktioniert jetzt, denn was wirklich praktisch wäre, ist zu gehen, okay, heute ist das Ich werde den Text durchgehen. Ich füge einen Hyperlink hinzu. Ich werde das einfügen, aber das scheint nicht zu funktionieren. Du kannst es natürlich anklicken, aber das tut es. Es, es verlinkt auf dieselbe Seite, hat im Moment nur Probleme. Im Moment besteht die Problemumgehung darin, es einfach als URL einzufügen, was nicht schön ist weil das kein schöner Dateiname ist, aber die Leute können ihn kopieren und einfügen Ich werde es ziemlich klein machen. Und wann muss ich dort vielleicht ein paar Notizen hinzufügen oder das kopieren und einfügen, um zu diesem Archiv zurückzukehren. Insbesondere haben sie es jedoch nicht repariert. Sie können sogar standardmäßig sehen, dass er zu einem anklickbaren Link gemacht wurde, was immer noch nicht gut Ich werde den Link dazu unterbrechen. Habe dort tatsächlich auf den Link geklickt und ihn kaputt gemacht. Das sind also nur Häkchen, auf die die Leute klicken können. Hoffentlich wird das aktualisiert, wo Sie tatsächlich darauf klicken können , und wir werden tatsächlich zu einer archivierten Version wechseln. Aber ich kann es entweder im Ansichtsmodus oder im Entwurfsmodus kopieren und einfügen . Fügen Sie es in einen Browser ein und Sie werden sehen, dass es zu dieser Archivversion zurückgekehrt ist. Und die Leute können entscheiden, ob sie diese Version wiederherstellen oder duplizieren möchten . Du gehst. So archiviert man Mitarbeiter und passt auf, dass sie nicht für immer verschwinden. Gib ihm einfach einen Namen. Das ist wirklich alles, was Sie tun müssen. Sie können etwas schicker sein, indem Sie sich diesen Link schnappen und auf eine eigene Seite setzen, auf der Sie Ihre Arbeit archivieren, ohne eine 167. So erstellst und teilst du einen Flows in Figma: Hallo alle zusammen. In diesem Video werden wir uns Flows und etwas mehr Tiefe ansehen. Wir haben sie im Grundlagenkurs behandelt, ein bisschen schon in diesem Kurs, aber wir können noch viel mehr tun. Lass uns loslegen und Flows ein bisschen besser kennenlernen, gleich als Erstes, lass uns in Flows ein bisschen besser kennenlernen, gleich als Erstes, den Prototypmodus Shift D K wechseln . Und falls du das nicht getan hast, kannst du sehen, dass ich bereits jede Menge Flows habe. Wenn nicht, haben Sie in diesem Kurs wahrscheinlich eine Menge gelernt. Aber wenn Sie das nicht tun, klicken Sie auf einen Frame und sagen, ich möchte von hier aus einen Flow starten. Und es bedeutet nur, dass wir auf einen Prototyp verlinken und ihn verlinken können , um von hier aus zu beginnen, anstatt von Seite eins, was die Standardeinstellung ist, während wir das entwickeln. Das könnte ausreichen. Wir können einfach auf Play klicken und von dort aus ansehen, wo wir mit Flows etwas mehr in die Tiefe gehen können mit Flows etwas mehr in die Tiefe wenn wir sie mit Kunden teilen. Also werde ich nichts auswählen lassen. Okay, und du kannst anfangen, hier drüben zu sehen, schau, da sind all meine Flows, die haben, ich weiß zufällig, Flow acht. Ich denke, da ist der, an dem ich gerade arbeite und mir das ansehe . Ich kann darauf klicken und ich werde direkt dorthin weitergeleitet, was praktisch ist. Ich benenne das um Sie können es entweder hier umbenennen, indem Sie darauf doppelklicken, oder es hier umbenennen Meins wird meine mobile Kasse sein. Und warum würdest du es so nennen, dass du im Prototypmodus, wenn du einen Link an jemanden schickst, alle Flows hier an der Seite sehen kannst? Und wenn Flow 123 nicht so nützlich ist, ist dieser natürlich nützlicher, Sie können weitere nützliche Informationen hinzufügen. Wenn ich hier wieder reingehe, klicke ich auf meinen mobilen Checkout-Flow. Und hier gibt es diese Option, um weitere Details hinzuzufügen , sodass Sie sie hier in eine Vielzahl von Dokumentationen aufnehmen können . Schau, Stichpunkte, fett. Wenn du Command I gedrückt hältst oder kursiv schreiben kannst, ist es Control I auf einem PC, es gibt alle möglichen anderen Dinge Wenn Sie die Tastenkombination Command Shift X für Strikethrough kennen , bin ich mir nicht sicher, warum ich die kenne Es ist Control Shift X auf einem PC. Wenn Sie also die grundlegenden Abkürzungen für Texte kennen, können Sie hier viele Informationen eingeben, aber ich verwende sie wahrscheinlich nur, um eine kurze Beschreibung einzufügen aber ich verwende sie wahrscheinlich nur, um und Sie können einen Link hinzufügen Woher bekomme ich diesen Link? Ich werde die Leute dazu bringen, auf diesen Link zu klicken und hier zu dieser Seite zu springen. Ich wähle meinen gesamten Bereich aus. Es könnte ein Rahmen sein und alles Mögliche. Denkt daran, dass im letzten Video, wenn wir teilen gehen und das aktiviert ist, es mit der aktuellen Auswahl verknüpft wird Wenn ich das kopiere, sehe ich eine Aktion, klicke darauf. Gehen wir dazu und ich werde das im Hyperlink hervorheben, einfügen und speichern Okay, das ist nützlich , weil die Leute, die an meinem Prototyp arbeiten , auf Mobile Checkout klicken können. Sie können sehen, dass es eine Beschreibung gibt und sie können darauf klicken und es wird auf die richtige Seite gesprungen, nur gute Dokumentation. Die andere Sache, die Sie mit Flows machen können ist, dass Sie tatsächlich eine direkte Verbindung zu ihnen herstellen können anstatt diesen großen Stapel von Dingen zu bekommen , anstatt arbeiten zu müssen , wann sie wollen, Sie können nichts auswählen lassen, um sich im Prototypenmodus zu befinden. Und hier drüben kannst du sagen, eigentlich möchte ich nur auf diese bestimmte Seite verlinken, es kopieren und in ein Deckblatt einfügen. Wir sind vielleicht wie dieser hier. Phi hat einfach auf Einfügen geklickt. Ich musste nicht einmal die speziellen Abkürzungen für Hyperlinks drücken speziellen Abkürzungen für Hyperlinks Es wird nur davon ausgegangen, dass Sie es leicht unterstrichen über den Text einfügen möchten unterstrichen über den Text Du bist dafür verantwortlich, daraus den fiesen blauen Button aus den 80ern und 90ern zu machen. Dieser Link führt nun direkt zu diesem Prototyp, zum richtigen Flow. Eine letzte Sache ist, dass Sie Flows löschen können. Ich gehe zurück zu meiner ersten Seite, schiebe eins, um alles zu sehen. Wechseln Sie in den Prototypmodus, Shift E. Sie können sie auswählen und löschen. Wenn Sie sie nicht mehr benötigen, können Sie sie auswählen und hier zu Minus gehen, um sie zu löschen. Und schließlich können Sie sie verschieben, auswählen und los geht's. Jetzt ist es hier drüben, erstelle eine neue Datei, verschiebe sie alleine. Das ist Flows in Figma 168. Nutze das Slice-Tool in Figma: Hallo alle zusammen. Wozu dient das? Es ist das Slice Tool. Es hat eine wirklich gute Abkürzung. Wozu dient es? Spoiler-Alarm Es ist für den Export von Sachen und es wird nur für ein paar von uns nützlich sein. Ich möchte das Slice Tool im spannenden Intro nicht zu sehr verkaufen , es ist Jetzt tut mir das Slice Tool leid, tut mir leid, Slice Tool. Lass uns einsteigen und es ein bisschen besser kennenlernen. Vielleicht ist das Slice Tool, hier ist es, hier oben, die Abkürzung. Was macht es? Im Grunde genommen gibt es seine Art zu exportieren, es gibt ein paar Anwendungsfälle. Sagen wir, ich habe dieses wirklich lange Dokument, an dem ich arbeite. Und wenn ich es exportiere, exportiere ich die Frame-Minute mit diesem riesigen PNG-Format. Ich kann es also auf der Tastatur verwenden und einfach ein Feld ziehen dem aus Sie den Export durchführen möchten. Das Coole daran ist , dass nicht nur der Frame exportiert wird. Es wird alles exportieren, was Sie ausgewählt haben. Also selbst dieser Hintergrundteil ist wirklich nützlich, wenn Sie zum Beispiel Dokumentation machen, vielleicht für den Entwickler, oder vielleicht einfach, um das in eine E-Mail zu werfen. Und die Sache ist, wenn ich zu meinem Ebenen-Panel gehe , wirst du es hier sehen. Es heißt Slice One. Geben wir ihm einen Namen. Okay, mein Name ist Slice und Overhear hat eine eigene, unabhängige Art von Exportoption Natürlich kann ich in den Frame gehen und das exportieren, okay, aber meins wird zu lang sein. Also kann ich diesen Frame auswählen und den Slice auswählen, da sie es mir mit Absicht schwer gemacht haben Ich weiß nicht, im Hintergrund, oft musst du sie entweder in deinem Ebenen-Panel auswählen oder ein kleines Kästchen um sie herum ziehen. Und ich habe auch irgendwie ihr eigenes kleines Design als Ikone bekommen . Aber ich könnte Exports sagen, sagen wir PNG, der Name kommt von der Ebene und ich werde auf Exportieren klicken. Es wird in meine Akte aufgenommen. Dann gehst du, hier ist mein heißes Neues. Das Coole daran ist, dass es wiederholbar ist. Das kann ich machen. Nimm mein Wechselgeld vor. Okay, nimm das, kopiere es, füge es ein und ersetze es. Okay, jetzt kann ich genau die gleichen Abmessungen durchgehen und exportieren wie vorher und nachher. Sie haben es schon einmal gemacht, als Sie versucht haben, zwei Screenshots zu machen, sagen wir, mit dem Max-Screenshot, und nichts passt zu ihm Jetzt habe ich zwei Versionen , die genau dieselbe bevorzugte Dokumentation sind. Ideal für E-Mails und auch ideal zum Zerhacken von Seiten, die ebenfalls gedruckt werden müssen Das Drucken kann je nach Drucker und Beherrschung der Druckerdialoge eine große Drucker und Beherrschung der Druckerdialoge Manchmal ist es schön, sich einfach einen Abschnitt zu schnappen und das ist wiederholbar Das einzig Schöne daran ist , dass Sie, anstatt nur einen Frame zu haben, tatsächlich mehrere Frames oder große Teile des Dokuments durchgehen und sich viele Haustiere schnappen können große Teile des Dokuments durchgehen und sich viele Haustiere schnappen Warum ich einfach meinen Screenshot Command Shift four verwenden möchte. Nein, ich bin mir nicht sicher, was es auf einem PC ist und schleppe Sachen herum. Das benutze ich meistens. Aber da hast du's. Da ist das Slice Tool 169. Wie exportiere ich ungestörte und unskalierte Bilder aus Figma: Hallo alle zusammen. In diesem Video werden wir Bilder entpacken, die für den Export bereit Je nachdem, wie viel Sie über Entwicklung wissen. Ihr Entwickler möchte das vollständige Bild und er wird die Option „Füllen, Zuschneiden und Anpassen“ auf seinen Seiten codieren, er möchte das ganze Bild haben Aber wenn ich das jetzt aus Figma exportiere , wird es verkleinert. Es wird abgerundete Ecken geben. Wie kann ich dieses Bild freigeben, damit ich es in voller Größe oder einer bestimmten Größe an meinen Entwickler senden kann voller Größe oder einer bestimmten Größe an meinen Entwickler ? Das zeige ich dir auch. Okay, lass uns loslegen, richtig, der einfachste Weg ist mit einem süßen Plugin Gehen Sie also zu den Plugins und geben Sie sie ein, exportieren Sie Originalbilder und führen Sie das aus. Und macht im Grunde das, was es sagt. Ich werde das mal reinklicken. Es ist eine Füllung innerhalb dieses Rahmens. Und ich sage, will ich, dass es ein PNG- oder JPEG-Format ist? Jpeg wird gut für mich sein. Und zur Auswahl werden wir nur die Dinge haben , die ausgewählt wurden. Und klicken Sie auf Exportieren, entschuldigen Sie den Namen aus meiner Instanz. Das ist cool. Schauen wir es uns an. Oh ja, es hat es ausgepackt und es in seiner Originalgröße gebracht, die in Figma gebracht wurde , unbeschnitten, weiß ich, abgerundete Ecken Du kannst es mit einer ganzen Gruppe von Dingen machen. Du kannst entscheiden. Sie können alles auf der Seite auswählen. Oder ich klicke einfach auf dieses Ereignis höre mir viele Bilder an oder schneide sie dort rein Und Sie können diese Option verwenden, die besagt, dass Sie alles auswählen , einschließlich der Kinder. Vergiss die Kinder nicht. Okay. Jetzt Kopfschmerzsport. Sie erhalten eine Zip-Datei. Okay. Schau es dir an. Ich bin ein Paket und in dieser Zip-Datei. Oh mein Gott. Schau dir das an. Sie sind alle da drin. Nun, die verrückten Aliens und all die anderen Bilder, die wir über Plugins gekauft haben. Super praktisch. Okay, es gibt die hackige Art und Weise, wie es genauso gut funktioniert Das Problem ist, dass Ihr Entwickler vielleicht autark sein möchte und nicht alle Dateien durchforsten und durchsuchen muss, um das richtige Bild zu finden und die Namen abzugleichen Was Sie tun können, ist, wenn Sie eine Datei teilen, okay, Sie kopieren den Link, den Sie an Ihren Entwickler gesendet haben. Sie haben sie darüber informiert , dass sie zur Registerkarte „Prüfen“ gehen müssen. Und sie haben es vielleicht schon einmal benutzt. Und sie können herumlaufen und sich CSS- oder iOS- oder Android-Codebarge schnappen iOS- oder Android-Codebarge Sie können nicht an das Bild gelangen. Warum kann ich das Bild sehen, CSS, irgendwas? Nichts. Was für ein Anblick, wenn die Bilder hineinkommen, klicken Sie weiter, klicken Sie weiter. Immer noch. Nichts. Ah, aber es gibt einen Hack. Ich habe das Gefühl, dass es in naher Zukunft einfach hier aufgeführt wird. Aber in dem Moment, in dem Sie zu einem dieser Bereiche wechseln, von der Codeansicht zu TableView wechseln, können Sie aus irgendeinem Grund darauf klicken Es öffnet sich in einem neuen Tab. Da hast du's. Du kannst das kopieren und einfügen, mit der rechten Maustaste klicken, Bild kopieren oder speichern, los geht's, du könntest es selbst anstelle des Plugins verwenden, einfach ein paar Bilder schnappen, die du brauchst Sie können es kopieren und wieder in Figma einfügen, wenn Sie möchten. Im Grunde genommen ist es in voller Größe, in der ich es bekommen habe. Es ist eine großartige Möglichkeit, Bilder aus Plugins zu extrahieren und herauszufinden, wo sie sind, was in der Kälte ist, aber es ist auch nützlich, um die Größe zu bestimmen , sodass ich sie an meinen Entwickler senden muss Ich verwende tatsächlich die Browseransicht. Ich gehe zurück zu meiner Desktop-Ansicht. Und hoffentlich war da drüben Schichttag. Daniel arbeitet daran. Okay. Dieses Bild hier. Wenn ich zu Design gehe, muss ich sicherstellen, dass es für den Export gekennzeichnet ist. Und was nicht jeder weiß, ich kann die volle Größe oder wie halbe Größe mit doppelter Größe machen, je nachdem, was ich brauche. Aber wenn Sie zu dieser Person gehen, Sie möglicherweise haben Sie möglicherweise einige maximale Anforderungen an Ihre Website. Nehmen wir an, Sie haben für ein Thumbnail oder so, es sind 150 W, solange Sie W hineingeben, werden 150 Pixel breit exportiert Das ist praktisch. Sie könnten entscheiden, dass Sie mehrere Versionen haben. Es gibt 300 W oder H für Höhe. Sie können das durchgehen und weitere Exporte hinzufügen. Klicken Sie auf Bild eins exportieren, schrecklicher Name. Aber jetzt gehst du zu image1 dot PNG und image1 at two. Du gehst. In Ordnung, das ist es Auf diese Weise können Sie Bilder aus der Innenseite von Rahmen und abgerundeten Ecken und Schlagschatten entfernen und alles für den Export herausziehen 170. Exportiere Webp-Bilder aus Figma und Photoshop: Hallo alle zusammen. In diesem Video schauen wir uns Web P an. Was macht es? Sie haben es wahrscheinlich in der Gegend gesehen. Einige von Ihnen werden nicht schnell erklären , was es ist, und ich werde Ihnen zeigen, wie Sie dieses Format aus Figma herausholen Im Grunde ist es ein Ersatz für JPEGS und PNGS. Das super Tolle. Falls Sie dies noch nicht getan haben, werden Sie in Kürze gebeten, Bilder in diesem Format bereitzustellen. Also lasst uns reinspringen. Zunächst einmal Wenn Sie noch nicht mit Web P-Images vertraut sind, welche sind das? Nur eine neue Version. Alle JPEGS und PNGs. Ist es der Ersatz für sie? Das ist es. Ich arbeite an Websites , die alle JPEGs und PNGs herausnehmen und durch die Breite P ersetzen, weil sie kleiner und Breite P ersetzen, weil sie von besserer Qualität sind Und bei einem Format verwenden wir ein verlustbehaftetes Format, wie JPEGs. Sie können die Qualität verringern, wenn Sie einige Kilobyte sparen müssen Aber es hat auch Transparenz wie PNGs und es hat auch ein verlustfreies Format Ich werde nicht zu viel durchmachen, was verlustreich und verlustlos ist. Und ich denke, alles, was Sie wissen müssen , ist, dass Sie immer häufiger gebeten werden Webp-Images an Entwickler zu liefern , weil wir P großartig sind Im Moment gibt es also keine native Unterstützung. Also ich habe dieses Bild hier. Wenn ich im Moment auf Export gehe, überprüfe, einfach deine neue Version mit einem Web P einchecken ist eine Option, wenn es nicht so ist wie im Kopf, es gab ein Plugin, um das zu beheben . Es gibt immer ein Plugin. Der beste, den ich hier benutzt habe, ist Tiny Image Compressor. Okay, führen Sie das aus und es durchsucht Ihr Dokument und sucht nach allem, was Sie zu Exporten gesagt haben. Wenn du hier nichts siehst, musst du das durchgehen und das Bild sagen. Und hier drüben in Ihrem Eigenschaften-Panel und Ihre überprüften Eigenschaften gehen Sie zu Exportieren und fügen dort nichts hinzu Jetzt, wo es für Export gekennzeichnet ist, sollten Sie es aktualisieren können und es sollte in dieser Liste erscheinen. Was ich tun werde, ist, diesen zu benutzen. Wenn du etwas auswählst, sollte es genau hier erscheinen. Und was ich machen werde, ist hier ganz oben, diese kleine Einstellungsoption. Dadurch wird dein Plugin geändert , das du möglicherweise verwendest, um es zu ändern. Aber im Grunde suchst du, ich denke, standardmäßig in diesem speziellen Plugin, keine Bildkonvertierung, und dann geht es ins JPEG-Format. Und dann ist die zweite Option JPEG und PNG zu Webp. Es gibt noch viel mehr Details, auf die Sie eingehen können, aber das ist es, was ich im Moment möchte. Das andere coole daran ist, dass du entscheiden kannst, ob du mit der Qualität herumspielst, okay? Nehmen wir an, Sie möchten, dass es diese Größe hat, aber etwa 60%, okay? das verlustbehaftete Format angeht, können Sie die Qualität wie bei einem J-Peg nach oben und unten ziehen Und die grundlegenden Rollen sind ungefähr 60%, das ist normalerweise ziemlich gut. Wenn es ein schlechtes Bild ist, müssen Sie es möglicherweise heruntersetzen. Wenn ich schlecht sage, ist es einfach schlechte Qualität. Aber wenn es sich um ein kommerzielles Foto handelt, können Sie es wahrscheinlich auf 60 reduzieren und niemand wird den Unterschied bemerken. Machen Sie einige Tests, um zu sehen, was für Sie funktioniert und welche Bilder Sie haben. Lass uns auf Export klicken. Okay, jetzt wirf es da rein und danach suchen wir. Web-P-Format. Es ist sehr zufrieden mit sich selbst. Okay, es hat also eine ganze Menge gerettet. Ich habe, ich habe das größte Bild ausgewählt, das ich in Ihren Übungsdateien gefunden habe . Die andere coole Sache an diesem speziellen Plugin, die ich wirklich mag, ist, dass Sie es auf die Zielgröße einstellen können. Du kannst eigentlich sagen, ich möchte nicht, dass du dich für eine Qualität entscheidest. Ich möchte, dass du versuchst, es auf 200 KB zu bringen. Nehmen wir an, das ist das größte Bild, das dieses Bild sein kann. Nun, Sie wissen aus Ihrem Entwickler oder Ihrer Erfahrung, dass Sie Bilder mit einer Größe von 50 KB benötigen. Du kannst das machen und es wird diese Größe behalten und versuchen, unter 200 KB zu bleiben, was super cool ist. Was wir jedoch tun könnten, ist, dass es die tatsächliche Größe verwendet , in der es in das Dokument aufgenommen wurde. Es sieht riesig aus, es ist gigantisch im Vergleich zum Rest Vielleicht passe ich meine Körpergröße von 844 an, was mein Mobilgerät ist Und dann aktualisiere die Liste. Und dann wird es bei dieser Größe mit 200 KB exportiert. Passt auf jeden Fall in meinen Telefonrahmen, aber vielleicht 200 KB. Lass uns gehen. Ein Teil davon ist der Export von Webp. Eigentlich kannst du das im Moment auch von Photoshop aus machen. Okay, es ist noch nicht perfekt. Prüfen. Was wir wirklich tun wollen, ist, dass es unter Photoshop und unter Export ist. Und ich möchte Export sagen , weil ich es dort haben möchte. Das ist der beste Weg, um Bilder aus Photoshop für den Webcheck hier herauszuholen , okay, sobald es kein seltsames Rosa mehr gibt, hoffe ich, dass es bald soweit ist Der Grund, warum ich das mag, ist, dass Sie hier mehrere Größen haben können , wie Sie es in Figma tun können Okay, es wird eine Einheitsgröße nach X exportiert und Sie können die endgültige Größe festlegen , denn sobald das sehr groß ist, können wir sagen, dass wir hier drüben auf dem Weg nach draußen sagen können, anstatt die Größe zu ändern und Photoshop zu ändern, wir können sagen, dass Sie tatsächlich eine Größe von 500 haben und wir werden all die verschiedenen Größen exportieren, die wir benötigen. Aber das ist im Moment nicht da. Wir können es mit dem Speichern unter rausholen. Also warte ich einfach, Datei speichern unter. Und im Moment gibt es da eine Web-P-Option, die haben sie einfach zurückgelegt und kürzlich die Müllschublade beendet, die unordentliche, unordentliche Schublade hier haben sie einfach zurückgelegt und kürzlich die Müllschublade beendet, die unordentliche, drüben Ähnliche Funktionen wie dieses Plugin fühlen sich eher wie eine Photoshop-Person an. Lossy wird die Qualität verringern, aber oft unbemerkt bedeutet Lossless, dass Sie nichts von der Qualität entfernen können, machen Sie es einfach mit P. In Ordnung, das heißt, Ihre Dateiformate in webp umzuwandeln, nur eine praktische Sache für Leute, die noch keine Erfahrung mit P haben. Das wird jetzt immer beliebter Und ich weiß, wenn ich jetzt Grafiken für eine Website erstelle, müssen sie mit P sein, weil Google es mag, schnell heruntergeladen und sie sehen toll aus. Ordnung, das war's für Web P, wenn das Plugin nicht funktioniert oder Sie von einem Plugin wissen, lassen Sie es mich in den Kommentaren wissen Und wenn du dir dieses Video ansiehst, schau den Kommentaren nach, ob es etwas Besseres gibt, besonders wenn winzige Bilder nicht mehr da sind. In Ordnung, das ist es. Wir sehen uns im nächsten Video. 171. So verkleinerst du die Dateigröße aller Bilder in einer Figma-Datei: Hallo alle zusammen. Haben Sie eine große Figma-Datei, die Bilder verwendet , die viel zu groß sind, dann müssen Sie, dass Figma anfängt, Fehler zu melden , weil es mit all den riesigen Bildern zu kämpfen hat Ich möchte nur die Größe ändern. Alles füllt Bilder von selbst aus. Ich wünschte, es gäbe eine Möglichkeit, einfach alles auf eine angemessene Größe zu verkleinern, nicht zu klein, aber nicht zu groß. Es gibt ein Plug-in für diesen winzigen Bildkompressor. Verkleinern Sie eine, lassen Sie mich zeigen, wie es funktioniert. Ordnung, die Größe aller Bilder können Sie derzeit mithilfe eines Plug-ins Der, den ich mag, ist der winzige Bildkompressor, Ihnen nur ungern Plugins zeigt, weil sie sich ändern . Sie werden ein bisschen aktualisiert die Benutzeroberfläche ein bisschen anders sein wird , wenn Sie dort ankommen Wenn du einen findest , ist das besser. Lass es uns auch in den Kommentaren wissen. Ordnung, und sie werden denken , dass wir nach diesem Ding suchen , das man Downsize nennt Das einzige Problem mit der Verkleinerung ist, dass sie Teil des Pro-Kontos Du hast 15 Versuche, glaube ich, im Moment, machst du 15 Versuche, das zu tun und das könnte für eine lange Zeit reichen. Und Sie könnten erwägen , auf das COAP umzusteigen. All diese Bilder sind in viel größeren Größen erschienen, um sich dieses Wasserbild hier anzusehen. Also werde ich es reinbringen. Ich verwende dieses, weil es das größte in den Übungsdateien ist. Ich habe es von Unsplash. Du hast keine Wahl, wenn du einige dieser Bilder einbringst und welche Größe sie haben, in welcher Qualität, besonders wenn du ein Plugin verwendest welcher Qualität, besonders wenn du ein Plugin verwendest, sie einfach dort abgelegt Warum machen wir das nicht, wenn es in dieser Größe abgedeckt ist. So viel habe ich nie gebraucht. Also, was ich tun werde, ist es in einer geeigneteren Größe zu verwenden , der gleichen Größe wie eine meiner Bilddateien. Die gleiche Größe hat eines meiner Telefone. Und was ich tun kann, du kannst nichts auswählen lassen und du kannst sie alle machen. Ich mache nur einen , um das zu beschleunigen. Und das Coole daran ist, dass du siehst, dass es auf das Doppelte der Größe verkleinert werden muss , die ich brauche. Das ist also 844 Es wird es tatsächlich mit 16 machen. 88 gibt mir einen gewissen Spielraum und ein bisschen Flexibilität, um es zu exportieren und eine ausreichend gute Qualität zu haben. Eine gute Standardeinstellung sowohl für Mobilgeräte als auch für das Internet ist, Bilder in der sogenannten Zweifachen Größe zu haben , die Sie für Bildschirme mit sehr hoher Auflösung benötigen . Perfekt. Im gesamten Dokument ist Patina für sie alle angekreuzt Ich werde verkleinern. Es ist alles erledigt. Sehr zufrieden mit sich selbst, 10 MB gespeichert. Und es ist ein kleiner Blick darauf. Dieses Bild ist jetzt also viel kleiner. Wie viel kleiner, um einen Blick darauf zu werfen, erinnere dich an unseren bekannten Trick, wir können zu Inspect gehen und vom Code zur Tabelle gehen. Und du solltest dort drüben darauf klicken können , dass das Bild geladen wird. Ich gehe Bilder speichern. Ich werde es in meine Müllschublade legen. Er hat die Auslosung verpasst. Und schauen wir uns das an. Also es war 6.2 und es ist durchgegangen und er hat alles, was ich erwähnt habe, gesehen, gespeichert, nicht 10 MB. Ich zeige nie, wie sie solche Dinge berechnen. Aber hey, es sind 0,3 MB statt sechs. Dadurch wird Figma sehr gut funktionieren. Und es wird dir trotzdem eine angemessene Bildgröße für den Export geben , wenn du das tust , schicke es an den Entwickler, schwere Würfel, okay, das war's So können Sie alle Bilder aufnehmen und ihre Größe ändern, auch diejenigen, die in Figma als Füllung innerhalb eines Rahmens verwendet werden in Figma als Füllung innerhalb eines Rahmens Danke. Winziger Bildvergleich, auch wenn Sie Ihre Ersparnisse ein wenig übertreiben, 10 MB, ich bin mir sicher, dass es einen Grund gibt Ich weiß es nicht. In Ordnung. Ich werde es im nächsten Video sehen 172. Dokumentieren einer Komponente in einem Designsystem in Figma: Hallo alle zusammen. In diesem Video schauen wir uns an wie man eine Komponente spezifizieren kann. K-Dokument, die verschiedenen Elemente, aus eine Komponente spezifizieren kann. K-Dokument denen sie besteht, Farbe, Schriftgrößen, auch das Layout und die Abstände und den Abstand. Ideal, um Updates mit dem Rest des Designteams zu teilen oder an einem Dokument für Entwickler zu sprechen oder etwas darüber , die meiste Arbeit wird von einem Plugin erledigt, super tolles Plugin eine, die ziemlich detailliert ist, eine, die uns etwas einfachere Dokumentenmaße bietet . Figma hat Inspektionsoptionen , damit die Leute sie durchgehen und überprüfen können Aber oft arbeiten wir mit größeren Teams zusammen und müssen auch Dokumentationen erstellen. Okay, lassen Sie uns loslegen, richtig, um loszulegen Ich habe eine neue Seite namens Design-Spezifikation erstellt und sie ist leer und es heißt Option oder Alt Und ich gebe COD und finde das, was wir vor so langer Zeit gemacht haben. Erinnerst du dich an diesen Kerl? Okay. Du musst etwas ausgewählt haben, das kann alles sein. Okay, und dann musst du das Plugin finden. Es heißt acht Formen, die Suchfunktion in den Plugins. Im Moment können Sie acht Raumformen haben, sie werden einfach nicht gefunden. Setze also H-Formen zusammen. Es gibt andere Spezifikationen, Optionen, aber diese hier für mich im Moment ist großartig. Ich glaube, sie sind gut darin, dass sie als Erstes etwas ausgewählt hat , auf Run klicken und zurücklehnen und entspannen und staunen, aber was es macht, wenn nichts anderes, es ist ein großartiger Ort, um loszulegen Es gibt wahrscheinlich mehr Details als wir brauchen. Es könnte ausflippen, wer auch immer sich das ansieht, wenn er denkt, dass das Herzsymbol hier unten vom Symbol Slash-Herz abhängt Möglicherweise müssen Sie das umformulieren , um es klarer zu machen. Aber Mann, es ist ein großartiger Ort, um anzufangen. Die Anatomie hier und hier unten , das ganze Layout und die Abstände. Auch hier sind jede Menge Details drin, mehr als wir brauchen, was gut ist Okay, Padding ist hilfreich, aber brauchen wir Richtung vertikal, okay, es ist die Art und Weise, wie die Reihenfolge der Ebenen es gestapelt hat, es liegt an dir, bringt auch all meine schlechten Benennungsfälle zum Vorschein Ein Rahmen für ist offensichtlich kein sehr gutes Argument. Wir müssen zurückgehen und einige Umbenennungen vornehmen , bevor wir das ausführen Aber so ein toller Platz in einem so gut gestalteten Plug-In, eine Sache, die Sie vielleicht finden, ist, dass, wenn es verschachtelt ist wie dieses hier, zu Beginn des Kurses eine ziemlich komplexe Verschachtelung war Beginn des Kurses eine ziemlich komplexe Verschachtelung Es hat Early Bird nicht definiert, okay, Nummer sieben, Preis groß. Es war nicht in der Lage, sich mit der Instanz zu befassen , die die niedrigere Karte und der Frühaufsteher ist. Sie können hier sehen, dass es überhaupt nicht dokumentiert ist. Also manchmal, abhängig von der Struktur, lass uns eine andere Version davon machen und du musst sie vielleicht ein bisschen auseinandernehmen. Okay, also ich verwende meine Befehlsoption B, kontrolliere Optimismus, zerlege es Gehen wir zu Option eins und schauen wir uns unsere Ebenen an. Da ist also meine Event-Karte, an, aus. Du kannst sehen, da sind Nested Instances drin. Also die heißen Ikonen, kein großes Drama. Es ist dieser hier, in dem Sachen drin sind. Also werde ich das auseinandernehmen. Ich gehe in den Preis rein und zerlege das. Und es sollte jetzt all das sehen, muss ich das auseinandernehmen? Wie dem auch sei? Ich habe es nicht irgendwie in den Müll geworfen, aber zumindest jetzt zu Dokumentationszwecken , diese süße App laufen Okay, schauen wir uns das an. In Ordnung, also schauen Sie mal rein, um sich darauf einzulassen Es ist viel länger. Okay. Und ja, es hat diese Töpfe kaputt gemacht. Es ist auch praktisch für mich, denn manchmal magst du, kann ich wirklich sagen , dass das fünf Pixel sind? Schauen wir uns die Spitze dort an. Kein Wortspiel war der Unterseite gemeint. Es ist nicht das, was ich wollte. Okay. Und es kann durchgehen und Anpassungen vornehmen, bevor ich es zur Entwicklung schicke und es der Dokumentation hinzufüge. Ein weiteres praktisches ist, dass dieser hier einige wirklich coole Sachen macht. Es ist jedoch ziemlich langatmig und detailliert, was großartig ist. Aber manchmal. Schnappen wir uns das und machen eine andere Version davon. Und da ist noch ein Hund. Wir haben uns das vorhin angesehen. Es heißt Design Doc. Da ist es. Design Doc läuft ähnlich, aber es ist eher ein Glücksfall. Maße, okay? Es ist fertig mit der Höhe und der Breite und du kannst auf Dinge klicken, die Dinge, die dir wichtig sind, okay? Und dann messen Sie den Modus erneut und er hat den Abstand durchgemacht und bearbeitet. Ich denke, es ist ein bisschen anders, wenn ich noch einmal dokumentiere, das Gleiche hier. Ich liebe es. Eine Sache, die Ihnen auffallen wird , ist, dass Sie in Ihrem Ebenen-Panel sehen können, wie riesig es jetzt ist? Diese Plugins erstellen viele Details, besonders das erste. Okay, also behalte es auf einer eigenen Seite. Und mit einem Designdokument gibt es eine Menge Sperrkram, weil es Dinge wie, ich brauche diese Folie nicht noch einmal in der Breite , sie ist schon da drin. Also werde ich das alles auswählen. Erinnert sich noch jemand an die Abkürzung zum Entsperren von Command Shift L, verstehst du, oder? Drücken Sie Shift L, der Container Store enthält auch alle internen. Okay, jetzt kann ich sagen, dass dieser Wechsel in das Elternteil, Übergang zum Elternteil, eine Regel dass jede der WBS es ist, du könntest das verwenden, da entweder eine Ergänzung zu diesem anderen Plugin wirklich davon abhängt, was die Anforderungen für dich und dein Unternehmen sind , eins zu eins mit den Entwicklern, so etwas könnte ausreichen, mit ihnen zu chatten, zu sehen, was Aber wenn Sie unsere Online-Dokumentation erstellen, okay, ein Designsystem, das von vielen Leuten und einer großen Organisation verwendet werden kann, ist so etwas sehr praktisch. Wir können viel mehr Text und Erklärungen hinzufügen , um sicherzustellen, dass die Leute Ihre Komponenten verwenden, oder? In Ordnung, das ist es. Das ist eine großartige Möglichkeit, mit der Dokumentation Ihrer Komponenten zu beginnen, indem Sie ein süßes Plugin in Figma verwenden 173. Nutze den DEV-Modus in Figma: Hallo alle zusammen. Ein Update-Video. Sie haben unseren Inspektionsmodus auf diesen Entwicklungsmodus geändert. Es sind irgendwie Aktfotos in der Beta. Es ist jedoch in der Vollversion verfügbar. Und das Einzige, was man daran beachten , ist, dass es hier früher inspiziert wurde. Jetzt ist es dieser Kippschalter hier. Du kommst an den gleichen Ort, aber mit Boni. Also ist es nett. Die andere Sache, die es zu beachten gilt, ist, dass es sich im Moment um eine sogenannte offene Beta handelt, sodass jeder sie nutzen kann. Okay, aber es wird in Zukunft eine Zeit geben , in der sie planen, es nur zu einem Profi zu machen. könnte also sein, dass Sie am Ende eine Inspektion oder eine abgespeckte Version dieses Entwicklungsmodus haben . Aber im Moment kann jeder alles gebrauchen. Lassen Sie uns also zu den Profis kommen. Okay, der größte Vorteil ist, dass es eher für Entwicklungszwecke konzipiert wurde Früher konnten sich Entwickler selbst in einem Inspektionsmodus verirren. Ein bisschen so, als würde ich mich umschauen, besonders wenn Ihr Dokument so aussieht, also was mache ich? Was du jetzt als Designer tun kannst, okay, wir sind immer noch im Designmodus und wir werden Abschnitte verwenden, falls sie auch dafür verwendet werden. Also Abschnitte, die wir uns angesehen haben, ich nehme das und füge es um etwas herum , das ich für meine Entwicklung identifizieren möchte. Nehmen wir an, es ist dieser Rahmen , damit ich ein Kästchen um ihn herum zeichnen kann. Der Unterschied zu Abschnitten jetzt darin, dass Sie sie vielleicht gesehen haben. Da ist dieses kleine Ding hier. Okay, da steht Mark for Development. Wenn ich zu meinem Pfeilwerkzeug gehe, kann ich darauf klicken. Okay, also bereit für DIV. Also klicke ich darauf und in diesem Modus ändert sich nichts wirklich , außer wenn ich in den Entwicklermodus gehe. Und das ist vollständig, du entwickelst die Vision, zu der Dharma wird, indem du dein Design durchschaust Was am Ende passiert, ist hier auf der linken Seite zu sehen Es wird ein wenig Coaching für Ihren Entwickler geben, um ihn irgendwie daran zu gewöhnen Es gibt einen Abschnitt, der zur Entwicklung bereit ist, okay, also wenn sie das Dokument öffnen und es so aussieht, und dann hierher gehen. Es gibt nur diesen einen Abschnitt, du besser benennen könntest als Abschnitt eins. Das ist mein Wochenendbildschirm, also würde ich ihn so nennen. Klicken Sie darauf, sie können dorthin gehen. Das ist also wirklich cool. Wie bringst du das zu deinem Entwickler, okay, also du als Designer oder in diesem blauen Modus, grünen Modus, blauen Modus. Okay, also du besitzt diesen Modus hier. Wenn ich im Moment zu Shear gehe, kann ich nur Links und Bart teilen, wie das normale Zeug Aber wenn ich in den Entwicklermodus gehe und eine Aktie erhalte, kann ich sagen, kopiere den Dev-Link. Das heißt nur, dass sie zu dieser App kommen, aber sie werden über diese grüne Version zu ihr kommen, sodass sie nicht in den Designmodus gehen und dann den Schalter umschalten müssen , sondern einfach direkt hierher gehen Und wenn du etwas wie dieses hier ausgewählt hast, kannst du auf eine Auswahl verlinken, damit sie direkt dorthin gehen können und die Leute vielleicht nicht zu sehr verwirren Ordnung, das ist das Erste, worüber Sie sich im Klaren sein können, was draußen los ist Anstatt eine separate Seite , die vielleicht für Entwickler wegfällt, kannst du einfach einen Abschnitt darum legen und sagen, Mach das. Springen wir nun zu dieser Datei, die etwas sauberer ist. Und das zweitinteressanteste und nützlichste Feature für einen Entwickler, K mit a, Sie verwenden es für die Entwicklung oder wahrscheinlich für die nächste Person in der Reihe, Ihren Entwickler, der Ihr Design nimmt und es baut, ist, sagen wir, ich ändere die Farbe dieser Schaltfläche auf diese andere Variable und verwende ihnen ein Design, von diese andere Variable und dem Sie sagen , dass es bereit für DIV ist, okay? Sie müssen nicht wirklich den Abschnitt herumlegen, in dem steht, dass bereit für Dave nur eine hilfreiche Sache ist. Sie können es so lassen, wie es ist und in dieser Datei zu sehen ist, okay, aber sie bekommen diese Version. Mir gefällt, was hast du getan? Was Sie tun können, ist ein Entwickler, Sie können auf den Frame klicken und zu dieser Option hier gehen. Sie können sehen, dass er vor einer Minute von Awesome bearbeitet wurde, Diego sind oder wie lang er auch war. Das Ding hier ist sehr cool. Vergleichen Sie die Änderungen. Du kannst also sehen, da ist mein Knopf links, der Knopf rechts. Okay, also ein direkter Vergleich mit Overlay hängt davon ab, ob ein Farbwechsel schwierig sein wird Weil das Overlay das macht, ich weiß es nicht. Sie können es einfach hin und her ziehen. Siehst du, das macht es einfach? Es könnte genauso nützlich sein, die Farben nebeneinander zu sehen. Das andere coole Ding ist hier unten. Kannst du tatsächlich sehen, dass es hier eine Geschichte von, sagen wir mal, meinem Hauptbutton hat . Es zeigt mir, dass die vorherige, die Füllfarbe, diese war und diese Variable verwendet hat. Die aktuelle Farbe hat diese andere Farbe, aber diese Variable zu verwenden, ist sehr praktisch. Und dann kannst du die Änderungen noch einmal durchgehen und einfach sehen, dass sie es vielleicht seit etwa zehn Änderungen nicht mehr gesehen haben, wie Mann, das sieht überhaupt nicht so aus, als hätte ich es angefasst. Sie können zu dem zurückkehren, zu dem sie zuletzt aufgestiegen sind. Okay, das ist also sehr hilfreich. Andere allgemeine Dinge sind, dass es für sie einfacher ist , Dinge auszuwählen, okay, also in der Vergangenheit, vor allem, wenn Sie Autolayouts anstelle von Gruppen innerhalb von Frames anstelle von Frames statt Gruppen haben innerhalb von Frames anstelle von Frames statt Es kann ziemlich schwierig sein, hineinzukommen und Dinge wie Symbole zu bekommen. Also das kann ich nur mit einem Klick machen und ich habe die Plus-Schaltfläche ausgewählt. Es, es hat irgendwie einige dieser Ebenen deaktiviert, tiefere Gruppierung der Ebenen für sie, weil sie nicht alle Gruppen kennen wollen Sie wollen nur die Ikone. Sie können darauf klicken und einfach direkt dorthin gehen. Sehen Sie sich die allgemeinen Dinge an , die wir gesehen haben, als wir sie immer von selbst inspizieren mussten. Eine der Änderungen besteht darin, dass Sie als Designer oder Entwickler, verknüpft mit den Ressourcen, die Ihre GitHub-Bibliothek sein könnten, mit Asana verknüpfen können Wenn es ein Jobprogramm ist, willst du nur eine Verbindung zu Dingen herstellen, die ich mag. Es könnte eine Dokumentation sein, wie die Implementierung der Schaltfläche in Ihrem Designsystem, damit Sie auf diese verlinken können. Die andere Sache ist, das ist typischer je nachdem, ob Sie schon einmal Webdesign gemacht haben Diese Randbox ist eine Methode, die es gewohnt Dinge zu sehen, wie wenn ich hier darauf klicke, ist, Dinge zu sehen, wie wenn ich hier darauf klicke, werden die Polsterung und der Rand so ausgedrückt Das gleiche Zeug, nur entwicklerfreundlicher. Und die andere Sache ist hier unten, ein Teil des Codes , den sie verwenden könnten könnte großartig sein, um etwas davon zu kopieren und einzufügen . Wahrscheinlich nicht. Sie werden es wahrscheinlich umschreiben oder ihren eigenen Geschmack von dem, was sie tun, SCHLECHT verwenden ihren eigenen Geschmack von dem, was sie tun, SCHLECHT Es gibt ihnen einen Heiligen. Es ist wirklich einfach zu sehen, was Sie getan haben. Die andere Sache ist, dass wir CSS verwenden, sie verwenden möglicherweise eines der Frameworks für die App-Entwicklung Und sie können zwischen etwas wechseln , das für sie besser funktioniert, wie zum Beispiel normal zu Stilen und Farben. Sie können das durchgehen und exportieren. Also lass uns gehen und uns das ansehen. Sie können gehen, sie haben diesen Plus-Button. Sie können hier runterkommen und tatsächlich Deckel sagen, gib mir das, ich habe dieses Symbol. Es ist ein SVG Ich werde es herunterladen und der Entwickler hat es einsatzbereit, falls Sie es ihnen nicht direkt schicken. Andere normalere Dinge sind, wenn sie mit der Maus über Dingen fahren, die keine der Tasten gedrückt halten müssen Denken Sie daran, dass wir zu Beginn des Kurses die Wahltaste gedrückt halten müssen , um Dinge wie den Abstand und die Polsterung zu erhalten Im Entwicklermodus fährst du einfach mit der Maus über Dinge. Du musst alles tun und du kannst anfangen, all die Dinge zu sehen , zum Beispiel, wie wir die Polsterkarte verwenden, erinnere dich an diese Variable, okay, und dann muss ich alles tun, was einfach gut aussieht Ein weiteres cooles Feature für Entwickler ist, dass wir zu Beginn des Kurses einige Zeit damit verbringen Beginn des Kurses einige Zeit damit diese Komponenten mit Eigenschaften auszustatten. Denken Sie daran, dass wir hier drüben sagen können dass wir den Müll wollen. Okay, wir hatten Lower, wir hatten eine große Version, wir hatten eine kleine Version, wir hatten eine mit reduziertem Preis. Also verschiedene Versionen davon. Wie teilt man das dem Entwickler mit? Normalerweise durch Dokumentation. Aber jetzt können sie im Entwicklermodus darauf klicken. Sie können all die verschiedenen Eigenschaften sehen , die Sie als Requisiten haben Und Sie können hier Price Lodge sehen, Sie gehen auf den Spielplatz und sie können damit herumspielen und sie werden nicht an Ihrem Design herumspielen. Denn wenn du den Designmodus umschaltest, bleibt er irgendwie in diesem Modus Während du hier drin damit herumspielen kannst, es kaputt machen, ändern, herausfinden, was passieren wird. Und wenn Sie es dann schließen, hat es keinen Einfluss auf die Designoption. K nur a, es ist ein Spielplatz und du kannst damit herumspielen und ein Gefühl dafür bekommen, was du Designer mit diesen verschiedenen Optionen machen willst. Das ist also auch eine praktische Funktion. Die letzten paar Funktionen sind, dass sie unter den Code-Einstellungen zwischen Einheiten wechseln können. Okay, du entwickelst wahrscheinlich, wenn sie Webkram machen und sich wahrscheinlich mit relativen Maßen befassen, sich wahrscheinlich mit relativen Maßen befassen anstatt mit Pixeln, die wir hier in Figma verwenden , können sie das ändern Okay? Das andere ist ein Plugin. Es gibt hier also zwei Pluginsätze. Es gibt Plugins , die sie verwenden können. Ich sage sie, weil es die andere Person ist. Ich bin kein Entwickler. Ich kann ein bisschen Frontend-Sachen machen und Code kopieren und einfügen. Aber ich bin kein richtiger Ingenieur. Es gibt also Dinge für den Div, die für sie nützlich sein werden, für Plugins, die ihnen helfen, Dinge aus Figma herauszuholen. Der andere Satz von Plugins ist eigentlich, dass Figma ein Plugin hat. Der wahrscheinlich nützlichste ist VS Code, da VS Code ein sehr verbreiteter Texteditor für Entwickler ist . Und dafür gibt es ein Figma-Plugin , das wirklich cool ist Okay, Sie könnten sie dazu beraten und es bringt einige der Designmerkmale in VS Code ein. Sie können Dinge wie den Entwicklungsmodus abrufen, auf VS-Code übergehen, anstatt von Figma zu wechseln und zwischen Anwendungen zu wechseln Das ist also auch ein cooles kleines Plugin. Denken Sie nur daran, im Moment kann jeder den Modus verwenden, wie er ihn in Zukunft gegen Bezahlung implementieren wird, die unbezahlten Leute werden sehen müssen, was das ist und ich muss das Video aktualisieren, wenn es eine große Änderung ist Aber sonst kann es im Moment jeder benutzen. Das wird ein Pro-One-Feature sein, der Dev-Modus. In Ordnung, das ist der Dev-Modus. Geh, wir sehen uns im nächsten Video. 174. Projekt 20 in der Klasse: Fertige dein Design an: Hallo alle zusammen. Es ist das letzte Klassenprojekt. Ich hoffe, du arbeitest nicht. Du sagst: Kein Mann, ich wünschte, es gäbe mehr. So oder so. Das ist das Projekt. Beenden Sie Ihr Design. Okay, also wir haben während des gesamten Kurses Teile dieses etwas chaotischen Baus gesamten Kurses Teile dieses etwas chaotischen Ich möchte, dass du sie aufräumst, etwas für dein Portfolio bereitstellst und einige dieser Fähigkeiten in die Praxis umsetzt Also habe ich im Grunde ein kleines Wireframe gebaut. Es ist in den Übungsdateien. Es gibt ein sogenanntes Z-Abschlussprojekt. Nur damit es dort ganz unten auf der Liste steht, es gibt ein PDF und hier ist, was es bekommen hat. Ein kleines Wireframe , mit dem Sie arbeiten können. Davon solltest du schon viel haben. Die Seiten sind auch einzeln enthalten. Lassen Sie mich Ihnen die Datei zeigen, die ich erstellt habe . In Ordnung, hier ist es Sie haben also bereits einen Willkommensbildschirm erstellt und teilweise auf Ihrer Seite nach oben gelangt. Denken Sie an diesen Fall, ich bin eine Art Animation auf dem Begrüßungsbildschirm. Was passiert also, wenn die Leute deine App zum ersten Mal installieren? Irgendwie muss Onboarding nicht zu spektakulär sein, aber räumen Sie das einfach auf, falls Sie das nicht früher in Jetzt die Homepage, ich werde es nicht zu schwierig machen. Sie könnten anderer Meinung sein. Aber was wir tun werden, ist, dass wir drei Kategorienoptionen haben werden. Wenn Sie landen, verlassen Sie den Willkommensbildschirm. Es wird FirstPage sein, wenn die App geladen wird, okay, und das wird zu Trend-Events gehen, okay, also benutzt du die Event Card das von vorhin auf Ich wollte zwei weitere Kategorien haben. Okay, wir haben also Trends. Okay? Die anderen Seiten könnten so sein, wie wir es in dem Kurs gemacht haben, den wir dieses Wochenende hatten. Es könnten Unterkategorien innerhalb des Musikgenres sein , das du hast, okay, es könnte dieses Wochenende neu sein In was auch immer du es aufteilen willst. Das sieht sehr ähnlich aus, wenn wir das Subnetz haben wollen , das wir zuvor hatten Wenn wir also gut hinschauen, gibt es von ihm, okay, es muss also nicht so aussehen das nicht genauso funktionieren muss Nur eine zusätzliche Navigation , um diese drei Kategorien zu umgehen. Sie können vier Kategorien haben. Ich muss sehen, wie du auf die Homepage gehst und all diese ausleihst. Eigentlich kopiere ich diese Karten und füge sie ein. Was sind das für Rahmen? Okay, also quasi so , als würde man zwischen diesen drei Kategorien hin- und herschalten Ich möchte, dass Sie auch eine Suchoption haben. Wir haben die Suchleiste erstellt, wir haben keine Suchergebnisseite entwickelt . Ich möchte, dass Sie einige Nachforschungen anstellen, wie das aussehen sollte. Eines der wenigen Dinge, die wir während des gesamten Kurses nicht angegangen sind, im Rahmen der Projekte Ich habe also die Suchleiste und eine Suchergebnisseite . Entweder klicke ich auf die Eventkarten oder die Suchergebnisse gehen zu den Veranstaltungsdetails. Also nur Lage, Preis, worum es geht, ein paar Bilder Und wenn das abgeschlossen ist, möchte ich, dass die Leute in der Lage sind, ein Ticket zu kaufen und wir machen einen einfachen Cashflow, okay, also dieser Checkout-Flow wird da sein über den Einkaufswagen, mit dem Sie Ihre Kartenzahlungsdetails erhalten haben , wir im nächsten Schritt und dann eine Bestätigungsseite Das ist alles. Schauen wir uns das Klassenprojekt an. Vergewissere dich, dass ich etwas verpasst habe. Willkommen auf der Animations-Homepage. Es wird standardmäßig auf die Trendseite gesetzt, wird ein niedriges Navi und eine Unterkategorie-Navigation Okay. Das ist das untere Navi dort in der Unterkategorie Navigation. Bei diesen Kategorieseiten wird es drei geben, einschließlich der Startseite von Trending Du kannst viel kreativer sein als und die verschiedenen Kategorien, es ist mir egal, was sie sind. Okay. Haben Sie eine Suchleiste mit der Ergebnisseite, Veranstaltungsdetails und dem Checkout-Flow. Als letztes möchte ich, dass Sie eine Komponente dokumentieren. Es wird wahrscheinlich die Event-Karte sein, weil sie irgendwie die interessantesten Details enthält Mir ist egal, welcher es ist. Und wenn du das Plugin benutzen willst, irgendein Plugin, möchte ich, dass du es aufräumst Ich möchte, dass du dich mit diesen Schichten beschäftigst, siehst, wie sie aufgebaut sind, und die Dinge herausnimmst , die nicht so nützlich sind. Ich suche nach so etwas. Nicht jeder hat gleich viel Zeit. Also, wenn du das tust, würde ich mich freuen, wenn du das brandmarkst. Es sieht also nicht so aus, als würden alle anderen Dinge aufräumen, von denen Sie nicht das Gefühl haben, dass keine guten Informationen an Ihre Kollegen oder die Entwickler weitergeben Ihre Kollegen oder die Entwickler Achte darauf, dass du alles gut benennst. Kein Rahmen für das Du gehst, das ist alles. Hier gibt es zwei optionale Extras, und diese sind für die Leute, die wirklich dieses komplette Portfolio zusammenstellen wollen dieses komplette Portfolio zusammenstellen Erstellen Sie das auch zu einer Wunschliste Und die seltsamste Profilseite, wenn Sie die Zeit haben und die Fähigkeiten , die Sie in diesem Kurs gelernt haben, wirklich üben möchten , würde ich Ihnen wärmstens empfehlen, die optionalen Extras zu verwenden, aber das hängt davon ab, bis zu welcher Zeit Sie für die Ergebnisse zur Verfügung haben Ich möchte, dass du wie zuvor ein Video machst , in dem du mit deinem Prototyp interagierst und alle Seiten zeigt, die wir erwähnt haben, einschließlich des Sprungs zu deiner Spezifikationsseite, oder du kannst einen Screenshot davon hochladen Auch hier haben einige Leute das Video nicht gemacht, sodass der Kurs-Screenshot all deiner Seiten einwandfrei funktioniert, um das Video auf YouTube, Vimeo oder Behance hochzuladen und dann den Link im Aufgabenbereich zu Vimeo oder Behance hochzuladen und dann teilen Und ich empfehle wirklich, dies in den sozialen Medien zu teilen. Ich kann es kaum erwarten zu sehen , wo deins landet. Denk dran, wir üben alle hier. Wenn Sie UX-Design oder Design im Allgemeinen übernehmen. Und du hast das Gefühl, dass unser Verstand es nicht wert ist, online zu gehen, es hochzuladen, es der Bring Your Laptop-Community zugänglich zu machen. Wir sind alle hier, um zu lernen, und ich kann es kaum erwarten zu sehen, was Sie als Jump Cut machen. Okay, denk daran, die Arbeit anderer Leute hier zu kommentieren. Hier können Sie etwas mehr Zeit mit Ihrer Kritik verbringen mehr Zeit mit Ihrer Kritik Seien Sie nett, seien Sie kritisch und gehen Sie zu The Critique Sandwich. Und auch hier ist es optional, dies für Ihr aktuelles Portfolio zu erstellen. Baue es noch weiter aus als das, was wir oben besprochen haben, okay, füge den Brief, die Persona und alle Wireframes hinzu, die du vielleicht erstellt hast, vielleicht bist du einfach auf High-Fidelity umgestiegen Vielleicht sollten Sie bei diesem Artikel auf Wireframes zurückgreifen, nur damit es ein schönes, vollständiges Portfoliostück ist Nicht ideal, das so zu machen. Warum sollte ich an erster Stelle stehen? Aber solange Sie sich darüber im Klaren dass dies ein Projekt ist, das Sie durchgeführt haben , eine Fallstudie, die Sie durchgemacht haben. Das wird in Ordnung sein. Es beinhaltet deine fertigen Designs und wenn es zu einem guten Portfoliostück wird, suche nach ein paar guten Beispielen, aber auch Dinge wie Annahmen, die du hattest, bevor du angefangen hast, okay, wenn du Dinge machst, Dinge, bei denen du auf Dinge gestoßen bist , die du ändern musstest Solche Dinge zeigen deinen Denkprozess im UX-Designprozess. In Ordnung, es ist ein großes. Hoffentlich liegen schon viele dieser großen Brocken von früher im Kurs herum Und es gibt nur ein paar Dinge, die Sie tun müssen, um es aufzuräumen Hoffentlich nehmen wir uns aber einige Zeit, um es ein wenig aufzupolieren und es für dieses wichtige Portfolio oder bei meinem Freund vorzubereiten , dann seine letzten Klassenprojekte, weitere Videos werden aber folgen Lassen Sie uns also auf diese eingehen, um es abzuschließen, dann können Sie mit Ihrem Projekt beginnen. In Ordnung, wir sehen uns im nächsten Video. 175. Was als nächstes kommt: Figma Fortgeschrittene: Es ist das Ende. Es ist das was als nächstes Video. Danach werden wir ein paar kleine Tipps für Nicks geben. Aber zuerst herzlichen Glückwunsch, Sie haben es bis zum Ende geschafft. Ich habe es bis zum Ende geschafft. Was für ein langer Kurs. Der größte, den ich je gemacht habe. Und ja, das ist, um der Tatsache Rechnung zu tragen, dass es für keinen von uns einfach ist, diese fünf zu bekommen. Deshalb freue ich mich. Ich bin enttäuscht , dass es das Ende ist. Wir können nicht mehr so viel miteinander abhängen, aber ich werde einige andere Kurse besprechen aber ich werde einige andere Kurse besprechen , die du vielleicht machen kannst, komm und hänge ab. Aber erst einmal, um High-Five zu feiern, ich weiß, dass das eine Kamera ist und du nicht wirklich da bist, aber ich kann dich auf der anderen Seite fertig machen und immer weiter Komm schon. Ich werde es machen. Da haben wir's. Peinlich. Lassen Sie uns besprechen , was jetzt als Nächstes kommt. Okay, was die nächsten Schritte zur Software angeht, was Sie vielleicht mit mir zusammen mit jemand anderem lernen ist, nachdem Figma sich so etwas Webdesign-Zeug befasst Also entweder habe ich Web Design Essentials, eine Art HTML, CSS, etwas grundlegendes JavaScript, das wirklich hilft, wenn Sie mit Entwicklern zusammenarbeiten, auch wenn Sie nicht wie der Frontend-Designer einer Webdesign-Firma sein möchten . Nur ein Verständnis für solche Dinge ist sehr nützlich. Wenn Code gruselig ist. In meinem Webflow-Kurs erfahren Sie, wie Sie eine No-Code-Version eines voll funktionsfähigen, fantastischen Websites erstellen eines voll funktionsfähigen, fantastischen , ein ziemlich großartiges Tool. Ich habe viele andere Kurse, Photoshop, Illustrator, InDesign, After Effects, Premier Pro, Light Room Es gibt alle möglichen, also schau dir diese wenn du an einem anderen Kurs teilnehmen willst , um dich weiterzubilden, folge mir auch ein Figma Ich habe eigentlich erst vor 10 Minuten ein öffentliches Profil in der Figma-Community erstellt So sexuell, mein Name in der Community, Daniel Walter Scott oder auf figma.com Schrägstrich bei Folgt mir und ich folge euch. weiß noch nicht genau, was wir damit machen werden, aber ihr müsst euch gegenseitig folgen. Das Praktische, wenn Sie Figma nicht kennen , ist, dass sie jedes Jahr eine Konferenz abhalten, normalerweise im Mai oder Juni Wer weiß, wann sie es jetzt haben, es heißt config, suche danach und schau, ob es so ist und melde dich an. Es gibt eine Online-Version und eine persönliche Version. Das ist eine gute Sache , um sich in eine ganze Reihe cooler neuer Updates Zeit auch eine ganze Reihe cooler neuer Updates anzusehen Solange ich auch gerne gehe und aktualisiere . So sind sie ziemlich gut. Und ein großes Dankeschön an unsere Redakteure und Rezensenten. Jason Hummels Taylor Coleman, Steven, eine Fundgrube Vielen Dank, so viel, wenn es um Dinge geht , die ihr nicht sagen könnt, nun, ihr könnt es sehen, aber es scheint, als ob es alles ich bin, aber danke Team für eure Hilfe. Als Nächstes bitten wir Sie um eine Bewertung. Wenn dir der Kurs gefällt, gib mir eine Bewertung. Und für diejenigen unter Ihnen, die es wirklich geliebt haben und Zugriff und die Möglichkeit haben, einen Link zurück zu meiner Website zu haben. Das Verlinken auf meine Website hilft mir wirklich zu wachsen. Goo liebt es. Es hilft den Leuten, mich besser zu finden. Also das ist meine Frage, ob du die Möglichkeit hast , entweder über soziale Netzwerke oder über Interwebs, ob du den Link zu mir sehen kannst Toller Figma-Kurs von Dan Scott, normalerweise schau ihn dir hier an, ich einfach zurück zu diesem Kurs verlinkt Es wäre cool. Und zum Schluss wollte ich mich nur ganz herzlich bei Ihnen bedanken. Du hast mir den ganzen Kurs über Gesellschaft geleistet. Und ich weiß, es ist irgendwie komisch mit der Kamera und ich tue so, als ob du da bist, aber ich glaube nicht, ich fühle dich, sie sind total vibe und du hast es bis zum Ende geschafft. Wir sind jetzt Freunde Und ich wollte Ihnen nur gratulieren, dass dass Ihren großen Aufwand überstanden haben und Ihre Zeit aufgebraucht haben. Und du solltest beglückwünscht werden. Willkommen am Ende. Aber es ist auch irgendwie traurig Es ist das letzte Video. Wir können in anderen Videos abhängen , wenn du zu mir kommen willst. Aber jetzt, Freunde, das war's mit dem Kurs. Zu schwarz verblassen?