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

1. Intro zum Figma Advanced Course: Hallo. Ich bin Dan Scott, und das, mein Freund, ist der Figma Advanced-Kurs Nun, dieser Kurs richtet sich an Personen, die entweder meinen Figma Essentials-Kurs besucht haben meinen Figma Essentials-Kurs oder die Sie sich selbst beigebracht haben. Du bist ziemlich gut Aber du weißt, dass es noch so viele weitere Tools und Tipps und Tricks und Workflows und Updates gibt, für deren Erkundung du einfach noch keine Zeit hattest. Wenn das nach dir klingt, ist dieser Kurs genau das Richtige für dich. Wer ist dieser Typ? Ich bin Dan Scott. Ich bin UX-Designer und Figma-Dozent. Ich habe mehrere Lehrpreise gewonnen und mehr als 1 Million Menschen wie Ihnen geholfen , bessere Designer zu werden Wir werden hier also nicht einfach Kisten umstellen. Wir werden tatsächlich etwas bauen. Sie erhalten Ihr eigenes einzigartiges Projekt und Ihre eigene Persönlichkeit, und am Ende haben Sie eine komplette App, eine komplette App direkt in Ihr Portfolio Zunächst werden wir KI in Co Figma einsetzen, um schnell voranzukommen. Ich spreche von echter Effizienz, die Ihnen Stunden spart, keine Minuten. Wir werden uns eingehend mit automatischen Layouts und Einschränkungen befassen, also mit Dingen, die Amateure von Profis unterscheiden Sie beherrschen Komponenten und Variablen so eng, dass sie nicht kaputt gehen und mühelos aktualisiert werden können kaputt gehen und Fügen Sie visuelle Akzente, Effekte, Typografie und Mikrointeraktionen hinzu, die Ihr Design von anderen abheben Ich zeige Ihnen Workflow-Hacks , mit denen Sie Ihre Ressourcen, Raster und Stile wie ein absoluter Chef verwalten können, und ich zeige Ihnen einige der Hardwarekomponenten, die Sie schneller machen und Sie so aussehen lassen, als wüssten Sie , was Sie tun, wenn Leute an Ihrem Schreibtisch vorbeikommen Oh, sieh dir das an. Sie werden Variablen verwenden, um helle und dunkle Modi kompakte und komfortable Layouts zu erstellen. Wir werden uns mit Animation, Maskierung und Video für Fortgeschrittene befassen. Dinge, von denen die meisten UX-Designer nicht einmal wissen, dass Figma sie kann Du wirst lernen, bessere Benutzertests durchzuführen, schneller Prototypen zu erstellen und Dinge zu bauen, die sich echt anfühlen Du wirst Barrierefreiheit, Zusammenarbeit, die Entwicklung eines Handoffs mit Dvmode, Refactoring und Team-Bibliotheken verstehen Entwicklung eines Handoffs mit Dvmode, Refactoring und Team-Bibliotheken Bist du bereit, ein Figma-Profi zu werden? Wenn Sie sich anmelden und sich darauf vorbereiten, von Figma zu einem Figma-Superhelden zu Ah. Mach dir keine Sorgen. Ich projiziere während des gesamten Kurses Superhelden. Mir ist aufgefallen, dass ich während der Aufnahme das Shirt richtig gemacht habe und ich dachte, ich werde immer wieder zerknittert, also mache ich das den ganzen Kurs über, okay Um zu versuchen, es zu entwirren und Superhelden zu projizieren. So natürlich. Mach mit dem Kurs weiter. 2. Erste Schritte - Abbildung Adv: Ordnung. Du hast es geschafft Willkommen. Herzlichen Glückwunsch. Du hast eine gute Wahl getroffen. Als Erstes werden Sie die Übungsdateien für diesen Kurs herunterladen. Okay, auf dieser Seite wird es einen Link geben, um sie herunterzuladen. Darin wird es ein Shortcut-Blatt geben. Ich werde sie im Kurs durchgehen, aber es wird auch ein Blatt mit ihnen geben, auf dem Sie diejenigen ausdrucken und einkreisen können , die Ihnen wirklich gefallen, und diejenigen hinzufügen können , die ich verpasst habe. Leg es neben deinen Computer. Seht alle toll aus. Ich spreche schnell. Ich glaube, ich spreche schnell. Damit du mich verlangsamen kannst. Da unten in der Ecke ist ein Zahnrad, auf das du klicken und die Geschwindigkeit einstellen kannst , mit der ich spreche Du kannst mich entweder in den superlangsamen Betrunkenmodus oder in den Hibunk-Modus versetzen oder mich so lassen, ganz dir Figma ist neu und verändert sich ständig. Sie lieben es, Dinge zu bewegen. Also, wenn du im Kurs bist und sagst, H, das heißt nicht gleich, aber es sieht genauso aus. Es ist wahrscheinlich dasselbe. Oder wenn es verschoben wurde, müssen Sie sich vielleicht umschauen, um zu sehen, wo es etwas verschwunden oder umbenannt wurde. Schau dir ihre Kommentare an, ich habe vielleicht einen Kommentar hinterlassen. Wenn es einfach ist, wenn es eine große Veränderung ist, werde ich den Kurs erneut aufnehmen. Aber es gibt ständig Änderungen. Figman macht uns das gerne an. Machst du diesen Kurs mit der kostenlosen Version? Du kannst für eine Weile. Einen Großteil des Kurses können Sie in der kostenlosen Version machen . Das ist kein Problem. Es wird einige kostenpflichtige Teile geben, die wir uns ansehen werden. Also, wenn du das nicht hast, kannst du einfach weitermachen, vielleicht entscheidest du am Ende, dass ich die kostenpflichtige Version brauche. Aber ja, es ist keine Zeitverschwendung, dies mit der kostenlosen Version von Figma zu tun Ich werde meins auf einem Mac mit der heruntergeladenen Software Sie können es auf dem PC im Browser tun. Es sieht alles gleich aus und funktioniert genauso. Einige von Ihnen werden den Figma Essentials-Kurs abgeschlossen haben, und einige von Ihnen werden direkt zu diesem Kurs übergehen, weil Sie dafür bereit sind Die Leute, die aus dem älteren Kurs kommen, während Sie beim älteren Kurs, dem ersten Kurs, dem Grundlagen-Kurs, feststellen werden, dass es kleine Überschneidungen gibt Wenn wir zu etwas kniffligeren Dingen kommen , wo wir es noch weiter vorantreiben, dann ist Ordnung in der Sache Wir werden einfach schnell erklären, was ein All-Out macht und wie es funktioniert, was Sie bereits getan haben, okay Nur eine kleine Zusammenfassung bevor wir loslegen und es noch weiter vorantreiben Also haben wir ein paar Mal gesagt, Han, wir haben das gemacht ein bisschen davon gemacht, aber wir werden es in diesem Kurs noch weiter ausbauen, und ich möchte, dass jeder quasi am richtigen Anfang anfängt. Wissen Sie, was ich meine? In diesem Kurs gibt es ein paar Stufen Eins und Stufen Zwei wie Automatische Zulage Es gibt eine Stufe eins, Stufe zwei. Der Grund, warum ich es mache, um sie aufzuteilen, damit wir nicht verrückt und den ganzen Teil damit verbringen uns diese eine Funktion, Komponenten oder eine Variable oder so etwas anzusehen Okay? Also, ich habe ein Level eins gemacht, wo wir wahrscheinlich eine Menge Typkram benutzen werden. Wir machen eine Pause, machen paar andere Dinge, damit wir nicht verrückt werden, aber es ist auch gut, wir stoßen auf einige Gründe, warum, oh, das wäre gut, wenn wir mit dem, was wir früher gelernt haben, mehr anfangen könnten mit dem, was wir früher gelernt haben, Überraschung, Stufe zwei. Wo wir es durchgehen und es einfach irgendwie erweitern. In diesem Kurs werden Sie also ein paar Level Eins und Zwei sehen. Dafür sind sie da. Teilen Sie sie auf, damit uns dasselbe nicht langweilt , aber auch, damit wir die Möglichkeit haben, damit zu arbeiten und den Grund zu finden , warum wir mit diesen Funktionen noch weiter gehen wollen. Schließlich kannst du mir bei Figma folgen , okay? Es gibt eine Community Gehen Sie zu figma.com mit dem Schrägstrich AP BYOL, okay? Und das musst du nicht, aber folge mir dorthin. Dort werde ich die fertigen Dateien dieses Kurses posten , okay? Wenn du gerade erst anfängst, gibt es die fertigen Dateien im Kurs. Du kannst dich in den Dingen umsehen, die ich gemacht habe. Es ist nicht besonders gut organisiert, aber manchmal ist es praktisch, Dateien zu sehen, an denen ich gearbeitet habe, und Sie können sie sich auch ansehen. Ordnung. Das ist es, meine Freunde. Kein Gerede mehr. Lass uns anfangen zu machen. Wir sehen uns im nächsten Video, nicht wahr? 3. Ihre Beschreibung für den Figma Advanced Kurs: Hallo. Bevor wir beginnen, gebe ich Ihnen jedes einzelne Briefing, das Sie für den Kurs durcharbeiten müssen. Wir werden alle eine Musik-App erstellen. Ich werde dir deine eigene Version davon geben , damit du mich nicht kopierst und jeder anders aussieht. Es ist also gut für Ihr Portfolio, weil es einzigartig ist. Wenn Sie also nach dem Zufallsprinzip auf Project Generator.com gehen, ist das etwas Gemeines, um Ihr Laptop-Team zusammenzustellen, und Sie finden Figma Advanced Klicken Sie darauf und geben Sie den Namen Ihres Dorfes oder Ihrer Stadt ein. Mein Name ist Limerick, also sage ich Generate Project. Und ich habe das Ich weiß nicht einmal, was Bluegrass ist. Aber das wird mein Ding sein. Versuch, den zu behalten, den du bekommst. Es bringt dich vielleicht aus deiner Komfortzone raus oder es zeigt, dass es eher zu einem intellektuellen Projekt wird , bei dem du an den Nutzer denken musst, okay? Bluegrass ist etwas , von dem ich nichts weiß und ich muss einen kurzen Blick auf das Genre werfen. Welche Art von Atmosphäre hat es, fühlt es sich Ich weiß es nicht. Ich weiß es eigentlich nicht. Also ja, Limerick-Brauglas, und was es auch hier unten hat, ist, dass es Ihnen die Marke gibt, die Sie verwenden können Okay? Wir werden eine kleine Mikromarke kreieren. Es ist kein Branding-Kurs. Wir werden einfach einen Schakal als Logo verwenden, okay? Wir werden also Bilder von Schakalen finden. Wir werden ein kleines Icon für das Logo finden, damit jeder einzigartig ist. Von hier bekommst du es. Drücken Sie nicht auf Antworten. Nun, was ist das? Versuchen Sie es erneut. Okay? Schlag es auf keinen Fall dreimal. Schnapp es dir einfach. Machen Sie hier einen Screenshot davon , weil er Ihnen genau das zeigt, was wir tun. Es ist jetzt nicht wirklich wichtig, schnapp es dir, nimm eine Abkürzung oder lade es als PNG herunter. Also, was ich tun werde, und wir werden den Kurs durcharbeiten. Deins wird anders, aber ähnlich sein. Du verstehst es. In Ordnung, nächstes Video 4. Erster Entwurf mit AI in Figma: Hallo zusammen. Wir beginnen den Kurs mit einem Feature namens First Draft. Okay? Es ist KI-gesteuert. Es ist eine großartige Möglichkeit, sich Vorlagen zu besorgen und loszulegen. Es ist nützlicher, wenn Sie ein paar weitere Fähigkeiten aus diesem Kurs haben , um es weiterzuentwickeln, aber ich möchte es jetzt zeigen, weil es großartig ist und eine großartige Möglichkeit ist, mit Projekten zu beginnen. Sie können also hier unten sehen, dass ich die Eingabeaufforderung geöffnet habe, und ich werde sagen, dass es sich um eine einfache App handelt. Erstellen Sie eine Checkout-Seite für eine Musik-Event-App und schon ist es soweit. Da hast du's. Es wurde eine Checkout-Seite erstellt. Ich kann mit den Stilen und Schriften herumspielen, aber es ist etwas, das von Figmas KI von Grund auf neu generiert wurde Figmas KI von Grund auf neu Lassen Sie uns loslegen und uns die Vor- und Nachteile ansehen und herausfinden, wie Sie es für Sie zum Laufen bringen Wir werden uns auch die KI-Funktion für Anzeigeninteraktionen ansehen. Lass uns gehen. In Ordnung, ich bin also in einer neuen leeren Design-Datei. Ich bin im Design. Das ist es hier unten und ich gehe zu Aktionen Nun, das hier ist ein kostenpflichtiges Feature, also schau einfach zu, ob du das kostenlose Es ist wo ist es? Es heißt First Draft. Sie könnten danach suchen. Ich habe meins hier unter Design Tools gefunden. Es. Das Coole daran ist, dass Sie ihm einige Richtlinien geben können, wie zum Beispiel, möchte ich eine einfache App oder ein Wireframe Benötigt es Bilder oder nicht, einfache Website oder ein Site-Wireframe. Wir haben uns das schon einmal angesehen, hohe Genauigkeit, niedrige Genauigkeit. Ich werde eine App machen und ich werde sagen, ich möchte, dass es sich um eine App mit Veranstaltungslisten handelt. Für Musik, und klicken Sie einfach auf Make it. Treten Sie zurück und schauen Sie zu, wie die KI-Bots das kleine Ding machen. Oh, das ging schnell. Dachte , wir müssten vielleicht sogar schnell springen. Oh, Coldplay. Taylor Swift, ich bin draußen Es ist Sharon Billy Eilish. Es ist nicht meine Musik. Aber was Sie hier sehen können, ist, dass es tatsächlich diese einzigartige App für Sie entwickelt hat. Es generiert diese Bilder. Diese Bilder sind so, als ob sie von einer KI-Engine erzeugt werden. Deshalb können sie manchmal eine Weile dauern und sie glitzern irgendwie Aber oh mein Gott, es ist eine App geworden. Schau es dir an. Lass uns gehen. Lass uns einen Prototyp erstellen. Lass uns gehen. Jep. Okay. Und lass uns einen Blick darauf werfen. Ich mag es. Was funktioniert? Was nicht einfach nur verspottet ist. Macht nicht viel. Es gibt eine Menge Interaktivität. Du kannst, in den Grundlagen-Kurs gehen, du, lass uns mal was anderes anschauen Schauen wir uns die Farben an. Was ist das? Das ist der erste Farbweg. Du siehst, du kannst es durchgehen und sagen: Oh, ich mag die. Das ist ein toller Einstieg. Und wenn Sie diesen Kurs, den Fortgeschrittenenkurs, abgeschlossen haben, werden Sie in der Lage sein, all die Interaktivität und die richtigen Methoden hinzuzufügen , um es irgendwie für Designs Es ist, als würde man mit einer Vorlage arbeiten, Ausnahme der Vorlage, Sie müssen sehr individuell sein Okay, besonders bei Dingen wie den Farben. Dinge wie auch Änderungen vornehmen. Schau, du kannst sogar sagen, abgerundete Ecken. Ich möchte super abgerundete Ecken. Keine abgerundeten Ecken. Wir setzen auf den kastenförmigen Look Okay? Der Abstand, den wollen wir öffnen. Der ist einfach sehr cool. Welche Art von Schriften möchtest du verwenden? Okay? Du kannst es durcharbeiten. Du kannst es auch auffordern, zu sagen, kannst du eine große Heldenbox haben? Ich weiß übrigens nicht, ob das funktionieren wird. Okay? Aber du kannst anfangen, es aufzufordern, Dinge zu tun Es wäre wahrscheinlich einfacher für mich, viele kleine Änderungen selbst vorzunehmen Okay, weil es eine Version davon gemacht hat. Es ist nicht das, was ich in meinem Kopf hatte, also das wird der knifflige Teil sein Sie können sofort loslegen, und manchmal ist es einfach, es einfach zu machen. Schauen Sie also unter Vermögenswerte nach. Okay? Es hat keine Ressourcen für dieses spezielle Dokument. Es gibt keine Bibliothek, es gibt keine Stile dafür. Vielleicht wird sich das ändern, wenn du dazu kommst, aber jetzt gibt es noch viel zu tun, aber es ist eine sehr coole Art, anzufangen , sobald du einige Fähigkeiten hast. Du kannst nicht einfach ein UX-Designer sein und dann gehen, okay. Ich habe nichts über Figma gelernt. Ich benutze einfach die Aufforderung. Vielleicht ist das in Zukunft möglich. Ich glaube nicht, aber das möchte ich dir dort zeigen. Die andere Sache, die ich dir aus dem Grundlagen-Kurs zeigen wollte , war, sagen wir, wir wollen eine weitere Seite machen. Lass uns gehen. Ähm und lass uns alles auswählen und löschen. Dieser hier, wir werden wieder zu unserer Eingabeaufforderung zurückkehren und sagen, wo wir den ersten Entwurf her haben, und ich werde die Eventliste im Detail sagen. Schau es dir an oder buchstabiere es gleich. Los geht's. In Ordnung, es ist weg und es ist es auch. Oh, ich habe gerade eine neue Seite erstellt anstatt zu versuchen, die zu verwenden, die ich dafür gemacht habe Aber Sie können hier sehen, ob es dieselben Schriften verwendet hat? Also schau mal Public Sands, und das hier ist kein Outfit, also wird es besser werden. Weißt du, ich freue mich auf die Zeit in der ich nur eine wirklich einfache Seite brauche, wie eine Ts- und C-Seite oder eine Checkout-Seite, die wie eine wirklich vertrauenswürdige aussieht, und sie kann die Sterne nehmen, die du bereits hast , und sie dann anwenden. Das ist wahrscheinlich nicht allzu weit in der Zukunft. Im Moment ist es eher die Ideengenerierung und du reparierst es und änderst es danach, alles ist anders. Aber was es tun kann, ist, dass wir diesen Teil hier machen können, wir gehen zu den Aktionen über und wir können sagen, ich würde mir das Hinzufügen von Interaktionen gerne ansehen. Okay? Zwischen Ihnen und Ihnen Fügen Sie Interaktionen hinzu. Okay, und es hat es geschafft, okay? Also fügen wir die kleinen magischen Interaktionen hinzu. Also lass uns ihm jetzt einen Prototyp geben. Fangen wir mit diesem Typen an und gehen wir zu Teller. Lassen Sie uns einen Blick darauf werfen. Ich kann mich nicht einmal erinnern, welcher Knopf es war. Oh ja, ich habe gearbeitet. Okay? Und dann geh zurück nach Hause. Ordnung. Also diese beiden kleinen Dinge können mächtig sein, okay? Und später wird es besser sein. Aber ich möchte dir zu Beginn des Kurses nur zeigen, welche neuen Dinge mit Figma passieren, und ich kann zurückkommen und dieses Video in Zukunft aktualisieren Es nimmt uns nicht die Jobs weg, aber es verkürzt einige der Dinge, die wir früher gemacht haben, zum Beispiel, okay, ich frage mich, wie eine gute Form aussieht Sie können einen ersten Entwurf mit M beginnen oder wie gewohnt zur Home-Browser-Version zurückkehren. Denken Sie daran, zum F zu gehen und zur Startseite zu gehen, die sich ganz oben befindet Okay? Und du kannst zu den Vorlagen gehen. Es gibt viele Vorlagen da draußen. Es ist irgendwie die Art, wie ich es im Moment benutze . Es wird besser werden. Aber es ist neu, es ist ausgefallen und es wird praktischer sein, wenn Ihre Fähigkeiten noch praktischer sind und Sie quasi das nehmen können, was das ausmacht, und es, Sie wissen schon, mit Stilen, automatischen Layouts und Variablen verbinden können Oh, es wird Spaß machen. Okay, das war's für das erste Video. Was denkst du? Spielt eine Runde damit. Wir sehen uns im nächsten Video. 5. Flüssigglaseffekt in Figma: Hallo, alle zusammen. In diesem Video werden wir uns Apples Flüssigglas ansehen. Okay? Es ist ein sehr cooler Effekt, und Sie können hier sehen, dass er Teil der Benutzeroberfläche ist, aber wir können ihn auch innerhalb von Figment machen . Wir werden das machen Es bewegt sich und man kann es gewissermaßen durchschauen. Es ist alles glasig und gut. Alles klar, lassen Sie uns darauf eingehen. In Ordnung. Öffnen Sie zunächst eine neue Designdatei, entweder mit dem Tab „Neuer Tab“ oder mit der Entwurfsdatei, wo immer Sie möchten. Und ich möchte, dass Sie aus Ihren Übungsdateien nur ein Bild einfügen. Es kann alles sein. Es spielt eigentlich keine Rolle. Ich verwende diesen Flüssigglaseffekt und ziehe sie gerne so aus meinem Browser, nur um ToFGMA zu glätten. Aber du könntest die Befehlstaste Shift K verwenden, was eine Abkürzung für das Einfügen von Bildern ist, oder du kannst hier runter zum Rechteck gehen und sagen, es sind Die andere Sache , nur um das klarzustellen, ist, dass es hier unten ein paar verschiedene Modi gibt. Es sei denn, ich sage es dir, es ist der mittlere. Wir werden daran arbeiten. Bring das Bild rein. Ich habe mein Image verloren. Komm rein und lass uns etwas draufmalen. Jetzt funktioniert der Flüssigglaseffekt nur bei Rahmen, sodass Sie das Rechteck-Werkzeug hier nicht verwenden können, um ihn zu zeichnen. Es muss mit einem Rahmen gemacht werden. Das F k, lass uns R, den großen alten Knopf hier durch die Mitte ziehen großen alten Knopf hier durch die Mitte und wir werden es für den Moment einfach halten. Lass uns einfach den Effekt hinzufügen. Unter Effex habe ich ihn ausgewählt. Es ist ein Rahmen Ich kann Plus drücken und ich kann zu Drop Shadow gehen , und wir können in diesen einsteigen. Glas. Schon jetzt ist es großartig. Und was wir tun können, ist es einfach zu verschieben. Ah, es ist so cool. Lass uns ein paar kleine Dinge tun. Stellen Sie sicher, dass ich abgerundete Ecken habe. Um ein Maximum an abgerundeten Ecken zu erreichen, stellen Sie einfach etwas richtig hohes, z. B. 1.000, dann werden die Kanten abgerundet. Ich zoome rein und schauen uns die verschiedenen Effekte an , mit denen sich Glas öffnet. Wenn ich es abgewählt habe, klicke ich darauf und um die Effekte zu öffnen, klicke ich auf dieses kleine Symbol hier und ich öffne dieses Backup Das Licht, wo trifft das Licht darauf? Es liegt an dir. Wie hell ist das Licht? Sie können es eingeben oder einfach auf eines dieser Symbole hier klicken und es gedrückt halten. Es. Ich lasse meins bei 80, und dann kannst du einfach damit herumspielen. Du wirst ein Gefühl für sie bekommen. Es gibt kein Richtig oder Falsch. Die Standardwerte sind großartig, aber Sie können mit Dingen wie der Tiefe herumspielen , wie dick ist das Glas Oh, großes, sprudelndes Glas, kleine dünne Glasscheibe Wenn du für das Apple-Betriebssystem entwirfst, kannst du in den Spezifikationen nachschauen, was genau es sein muss Es ist wahrscheinlich besser, nach Hause zu gehen und zu Vorlagen zu gehen. Und dann hier drin suchen und Flüssigglas eintippen. Apple nennt es Flüssigglas und Figma nennt es einfach Glaseffekt Sie sind wahrscheinlich besser dran, einfach mit einem davon zu beginnen, weil jemand anderes das Apple-Designsystem durchgegangen ist Oh, da ist es da. Es ist das Kit, fang mit dem Kit an. Aber für uns wollen wir darauf zurückkommen. Wir können mit Brechung und Tiefe herumspielen, weil wir nicht durch die Apple-Spezifikationen eingeschränkt Eine der komischen Eigenschaften ist die Streuung, okay? Sie können es ein bisschen besser sehen, wenn es beispielsweise über einem Text steht. Kannst du hier die Kanten sehen? Es ist alles grau. Wenn ich Streuung aufschreiben will, füge da ein paar Farben hinzu. Vielleicht besser mit etwas Tiefe. Da hast du's. Da kann man anfangen zu sehen, dass das Blau durchkommt und ein bisschen Gelb hier drüben. Offensichtlich ist Frost einfach so, wie blau ist. Ich mag es wirklich. Das letzte ist das Licht. Siehst du eine kleine Glühbirne? Du kannst sie herumschleppen. Je nachdem, wo das Licht aufleuchten soll. Machen wir das schon? Ja. Ich glaube, das haben wir getan. Das Einzige, was Ihnen auffallen könnte , ist , dass es zusätzlich zu dem sein muss , was es zu zerstreuen versucht Deshalb haben wir einfach mit einem Bild angefangen nur um es für den Moment einfach zu machen Lass uns im nächsten Video etwas Schwieriges machen. Glaseffekt. Oh, es ist nett. Hoffentlich ist meine Stimme besser geworden. Es ist Morgen und ich habe meine erste Kaffeestimme zur Hälfte hinter mir Im Laufe des Kurses wirst du tatsächlich erkennen können, was passiert ist wie sehr meine Stimme tatsächlich zu hören begonnen hat. Ordnung. Nächstes Video, Dan 6. Arbeiten mit komplexen Layouts in Figma: Hallo, alle zusammen. Dieses Video, wir werden dieses Glas-Ding etwas kleiner machen. Das ist nicht wirklich das, was wir hier machen. Was wir hier machen, ist, dass dies der Kurs für Fortgeschrittene ist. Aber manchmal ist es wirklich schwierig, mit all dem Guten für Fortgeschrittene zu arbeiten. Schauen wir uns das an Wenn ich diese Schaltfläche hierher bewegen möchte, können Sie sehen, dass sich Autoausgänge innerhalb von Autoausgänge innerhalb von Autoausgänge befinden. Es ist sehr gut und strukturiert, aber manchmal willst du es einfach verschieben und dann, warum bist du da drin? Hör auf, so kompliziert zu sein. Genau das werden wir in diesem Video machen. Ich werde Ihnen zeigen, wie Sie einige der komplizierten Layouts ausschalten oder mit ihnen arbeiten können. Wir machen den Kurs für Fortgeschrittene, aber manchmal sind wir noch nicht ganz fortgeschritten. Wir nähern uns dem Fortschritt. Wir müssen nur einige der Sachen ausschalten oder zumindest damit arbeiten. Lassen Sie uns also einsteigen und Ihnen zeigen, wie Sie mit komplexen Layouts arbeiten. Lass uns gehen. A: Zuerst müssen Sie eine Datei öffnen. Es gibt ein paar Möglichkeiten, dorthin zu gelangen. Ich habe eine Kopie davon in die Übungsdateien aufgenommen, sodass Sie auf diese Punktdatei doppelklicken und sie öffnen können. Gehen Sie die einzelnen Schritte durch, wo Sie die Datei ablegen möchten, sie wahrscheinlich in Ihre Entwürfe ein, und klicken Sie auf Importieren Warten Sie dann eine Sekunde, und dann wird angezeigt, ob Sie es in einen veröffentlichten Ordner verschieben möchten Sie müssen nicht in ein Projekt einsteigen, Sie können einfach auf Fertig klicken und schon kann es bearbeitet werden. Die andere Art, es zu tun, da ist es jetzt. Ich kann darauf doppelklicken und anfangen zu arbeiten. Die andere Möglichkeit, das zu tun, ist, wenn Sie bei BYOL auf den Schrägstrich tofgma.com gehen , dort finden Sie die Dateien Wie auch immer Sie es tun möchten, Sie werden Figma Advanced eFeToo finden Es wird eine Menge weiterer Dateien geben, wenn dieser Kurs wächst. Sie können sie öffnen und sagen, öffnen Sie sie bitte in Figma, und sie werden im Browser geöffnet Es spielt keine Rolle, wie Sie zu dieser Datei kommen, ich werde sie auf meinem Desktop öffnen , weil ich altmodisch bin Es sollte in meinen Entwürfen stehen, wo wir hingehen. Und da ist es da. Ordnung. Ich gebe dir das , weil es sehr kompliziert ist. Das ist es und das ist es nicht. Okay? Dies wurde zu einem früheren Zeitpunkt im Kurs erstellt , als ich die erste Entwurfsfunktion in Figma verwendete die erste Entwurfsfunktion in Figma Nicht jeder hat Zugriff darauf, da es Teil der kostenpflichtigen Version ist Aber ich habe hier das Endergebnis, mit dem wir alle arbeiten können. Das Coole daran ist, dass es sich ausschließlich um automatische Layouts handelt und dass es sehr gut strukturiert ist Also schnappe ich mir diesen und sage, ich möchte unten einkaufen, Ich kann es einfach darunter ziehen und schauen, sie wechseln, weil sie in automatischen Layouts sind Rückgängig machen. Gehen wir hier in die Einkaufsebene und sagen, rechts diese obere, untere, nächste. Ich kann einfach auf die oberste klicken und dann den Abwärtspfeil drücken. Und kannst du sehen, wie es sich da drinnen bewegt? Es ist also alles sehr gut strukturiert. Aber manchmal geht man rein und denkt, oh, mehr automatische Zuteilungen. Mou. Mehr Outs. Mehr automatische Layouts. Es gibt so viele automatische Outs und knifflig wird es, selbst wenn Sie fortgeschritten sind und sagen, okay, ich möchte nur diesen Knopf bewegen Wie ich am Anfang gesehen habe, werde ich das hier nach oben verschieben. Es wird da reingehen. Ordnung. Jetzt ist es Teil des automatischen Ausgangs. Ist es nicht. Ich will nur irgendwie Ah, es ist überall. Okay? Das kann schwierig sein, sowohl mit dieser Funktion, dem ersten Entwurf oder einfach mit den Dateien anderer Leute zu arbeiten, oder sagen wir, Sie sind gerade einem großen Unternehmen beigetreten , sie haben ein großes Designsystem und Sie denken einfach, oh Mann, das ist wirklich schwer. Ich muss nur etwas Einfaches tun. Hör auf, so schlau zu sein. Also, was Sie tun können, eines der schönen Dinge ist, dass Sie den übergeordneten Frame auswählen und mit der rechten Maustaste darauf klicken und sagen können, wo ist er? Automatische Ausgänge. Oh, mehr automatische Ausgangsoptionen. Sie verschieben das ständig und benennen es um. Schau es dir an. Es wird hier irgendwo versteckt sein. Wir könnten sagen, Autolot entfernen, das funktioniert nur für diesen einen Frame Wir wollen sagen, entfernen Sie alle Autolayouts da drin und Sie werden feststellen, dass das alles nur einfache alte Frames sind Jetzt sind die Dinge nur ein bisschen einfacher. Eine der anderen praktischen Eigenschaften bei der Arbeit mit komplexen Outs ist, dass viele Ebenen vorhanden trotzdem alle Ebenen vorhanden sind, was gut ist. Manchmal dieser Button hier. Ich will einfach nur reingehen. Mach es, klick. Dann nochmal, mach es, klick. Mach es, klicke, doppelklicke. Endlich finde ich dieses Ding namens Große Schaltfläche, da ist etwas Text drin. Großartig. Möchte es rausbringen. Wir werden es aus Glas machen , weil ich Ihnen mehr von dem Effekt zeigen werde , den wir zuvor gemacht haben. Aber ich möchte, dass es alles übertrifft. Wenn ich anfange, es zu ziehen eine der Standardeinstellungen für Figma und eine der Komplikationen bei der Arbeit mit ist eine der Standardeinstellungen für Figma und eine der Komplikationen bei der Arbeit mit komplexen Dateien, dass es in diesen Container kommt , der Teil der Einkaufskasse ist, oder Sie legen es hier hinein und es ist jetzt Teil dieses Layouts oder Sie legen es hier hinein und es ist jetzt Teil Es möchte sich automatisch in diese Frames oder Autoouts einfügen, was meistens cool ist Aber sag mal, du willst einfach, dass es dahin geht, wo du willst. Du machst solche Dinge. Ich mache es rückgängig, wo es war, also bist du genauso wie ich. Okay, ich habe den Knopf gefunden. Da ist er den ganzen Weg hier unten . Da zerre ich ihn raus. Ich werde sagen, du gehst raus und stellst dich vielleicht zwischen die untere Leiste und der Hauptinhalt bringt ihn auf und raus. Also ist er draußen, okay? Also hat er alles im Griff. Aber sobald ich anfange, ihn herumzuschleppen, taucht er wieder in etwas ein Also steht er jetzt über allem. Ich kann sie alle schließen, nur um alles ein bisschen sauberer zu machen. Also habe ich alles geschlossen. Meine unteren Balken sind da. Das brauche ich momentan nicht wirklich. Und da ist mein großer Hauptknopf. Und noch einmal, denk dran, wenn ich ihn schleppe , geht er in etwas rein. Was ich tun kann, ist, wenn ich auf ihn klicke, okay? Bevor ich mit dem Ziehen anfange, habe ich Maus nach unten geklickt und die Leertaste gedrückt Dann kannst du ihn einfach überall hin ziehen, wo du willst. Er wird es nicht verpassen Ich kann nicht wirklich auf die Schichten da drüben zeigen, aber er bewegt sich nicht von den Schichten weg, und ich kann ihn hinstellen, wo ich will. Ich kann sagen, dass du jetzt dorthin gehst. Siehst du, er ist nicht in andere Schichten gesprungen. Ich finde, diese beiden Dinge sind am wichtigsten, wenn es darum geht, mit den komplexen Dateien anderer Leute zu arbeiten oder einige der automatisch generierten Dateien zu verwenden . Vorlagen sind einfach, zu Autolayouts zu gehen, sie zu entfernen, und wenn Sie anfangen, Dinge zu ziehen, klicken Sie auf Halten und halten Sie Leertaste B gedrückt, um klicken Sie auf Halten und halten Sie Leertaste B gedrückt, Dann springt er nicht über mehrere Ebenen. Cool. Das ist es. Jetzt will ich das machen, was ich dir am Anfang gezeigt habe, wo wir den Glasknopf hatten und er sich bewegt hat. Also lass uns das zusammen machen. Ein paar Dinge, die ich tun muss, ist dass meine Knöpfe hier oben bleiben. Ich könnte diese Ebenen einfach sperren , damit ich die Leertaste nicht gedrückt halten muss . Ich kann es einfach herumziehen. Es kann nirgends hingehen, ein paar Dinge, die ich tun muss, sind, lass es uns jetzt einfach in der Vorschau ansehen. Also werde ich auf die App klicken. Ich werde sagen, lass uns die Vorschau öffnen, also das ist Shift Space, und sie sollte dort geöffnet bleiben, okay? Du wirst sehen, wenn ich auf und ab scrolle, es funktioniert. Wenn deins nicht so funktioniert, können Sie auf die Außenseite klicken und zum Prototyp gehen. Lassen Sie uns eigentlich auf den Hintergrund klicken und ich sage, stellen Sie sicher, dass ich nichts ausgewählt habe. T Prototyp-Einstellungen, ich werde dieses hier verwenden, das iPhone 16, und das ist in Ordnung. Sie können verwenden, was auch immer Sie wollen. Das ist wieder über meiner Vorschau und funktioniert immer noch. Wenn das nicht funktioniert, musst du manchmal hier reingehen und sagen, tatsächlich Scrollverhalten. Ich möchte vertikal scrollen , damit es tatsächlich anfängt zu scrollen Aber wieder hoch, uns geht es allen gut. Aber ich will, dass das unten bleibt. Wie mache ich das? Weil ich es ausgewählt habe und ich diese Schaltfläche hier nehme und sage, ich möchte eigentlich, dass du am Ende der Seite bist. Im Moment ist es auf den oberen Rand beschränkt. Auf die Spitze beschränkt, was wahrscheinlich funktionieren wird. Ich würde sagen, ich bin im Prototyp. Ich kann nur sagen, ich möchte, dass du so positionierst, dass du als Elternteil scrollst. Nein, ich möchte, dass du an Ort und Stelle bleibst. Ich kann es prototypisieren. Wenn ich jetzt scrolle, kannst du sehen, dass es an Ort und Stelle bleibt? Also lass uns sie alle glasig machen. Lass uns auf ihn klicken. Lass uns zum Design gehen. Gehen wir runter zum Affix. Denken Sie daran, dass dies ein Rahmen sein muss, damit das funktioniert. Ich kann kein Rechteck sein. Ich hole mir einen Schlagschatten, ein Glas. Oh, ich mag es wirklich. Ich werde die Tiefe hochkurbeln. Der Frost ist fast perfekt. Standardmäßig sieht alles gut aus. Führen Sie jedoch eine Gleitbrechung nach oben und unten durch. Schau dir das an Das ist cool. In Ordnung. Jetzt schauen wir uns nochmal die Vorschau an und scrollen sie hoch und runter und er macht das coole, glasige Ding, bleibt aber da, wo er sein sollte Wie bringe ich ihn nun dazu, sich nach unten auszurichten? Lassen Sie uns das schließen. Lass uns gehen. Ich muss herausfinden, wo der Boden ist. Wenn ich auf „Aus“ klicke und zum Prototyp gehe, sehe ich, dass das iPhone 16 ist, was ist es? 393 mal 852. Ich kann Sie anklicken und sagen, dass unter Design die Größe dieses Rahmens eigentlich 393 mal 852, 92 sein sollte 393 mal 852, 92 Es ist erst eine Sekunde her. Ich kann mich nicht erinnern. Wir raten auf 852. Komm schon, Brain. Kannst du das sehen? Das sind Clip-Inhalte. Das kannst du ein- und ausschalten. Es sei denn, ich weiß, wo der Boden jetzt ist, also kann ich sagen, dass du hier unten sein wirst. Ich könnte Shift gedrückt halten, damit es nicht in all die verschiedenen Frames springt . Aber denk dran, ich sperre diese Ebenen, also ist das kein großes Problem. Jetzt ist er auf die oberste Linie beschränkt, also auf diese gepunktete Linie. Ich kann sagen, dass Sie nach unten beschränkt sind, weil wir jetzt ein Unterteil haben , auf das er sich beschränken kann , ist nicht wirklich wichtig Drücken Sie die Taste, drücken Sie die Leertaste und schauen Sie sich an, wie wir coole Dinge mit Glaseffekt bei wirklich komplizierten Designs Okay? Das übergeordnete Objekt klickt mit der rechten Maustaste darauf, wechselt zu weiteren Layoutoptionen und entfernt alle automatischen Layouts. Halten Sie beim Herumziehen die Umschalttaste für Ihren Drachen gedrückt. Er wird nicht in all die verschiedenen Frames und Autolayouts eintauchen und einen süßen Glaseffekt hinzufügen Sie können sehen, dass meins einen Rotstich hat, was auf diese, meine Füllung, die reduziert wurde, zurückzuführen ist . Sie könnten sie wieder auf Weiß umstellen , um traditionelleren Glaseffekt zu erzielen Vielleicht ein bisschen blau . In Ordnung. Ich hoffe, das war nützlich. Ich ging auf einige Dinge ein die wir im Grundlagen-Kurs gelernt haben, wie Einschränkungen, Herumspielen mit Prototypen und die Sicherstellung, dass wir unseren kleinen Prototyp in ein iPhone einbauen können unseren kleinen Prototyp in ein iPhone einbauen , was immer cool aussieht A Wir sehen uns im nächsten Video. 7. Textur und Geräusche und Effekte Reihenfolge: Hallo zusammen. Schauen wir uns ein paar coole Effekte an. Einer davon ist , dass dieses Rauschen, das wir auf das Hintergrundbild angewendet haben , ihm ein altmodisches Aussehen verleiht. Das andere ist diese Textur, damit wir diesen wirklich coolen Glaseffekt erzielen können . Als würden wir durch das Toilettenfenster des Wohnmobils schauen Schau, wie cool es aussieht. Oh, großartig. Lassen Sie uns loslegen und Textur, Rauschen und einige der Auswirkungen kennenlernen , die die Ebenenreihenfolge auf diese Effekte hat. Lassen Sie uns einsteigen. Um zu beginnen, können Sie einfach ein beliebiges Bild haben. Wir werden den Glaseffekt auch für diesen Textur- und Rauscheffekt verwenden . Aber wenn du genau mitmachen willst , gibt es einen Effekt, der deine Übungsdateien punktförmig Sie können das in Figma öffnen, oder Sie finden mich als Mitglied auf figma.com, Schrägstrich bei BYOL, und Sie können diese Datei öffnen und Ihre eigene Version davon in Figma öffnen Okay. Also ich habe diesen Knopf, okay? Darauf wurde der Glaseffekt angewendet. Okay? Es ist ein Effekt, und ich habe Glas hinzugefügt. den anderen neuen Effekten, wenn ich Plus drücke, können Sie mehr als einen Effekt auf ein Objekt anwenden. Okay? Und ich kann sagen, ich will keinen Schatten werfen, was cool ist, okay? Ich mag Schlagschatten, aber ich werde zu dem gehen, auf dem Textur steht, okay? Und du kannst sehen, lass uns ein bisschen hineinzoomen. Was passiert damit? Lass es uns richtig ankurbeln. Okay? Die Textur ist irgendwie wie Milchglas, okay? Und genau das tut es. Okay, kommt zu dieser Art von Grübchen, wie auch immer du es nennst Okay, du kannst beide Einstellungen spielen. Ein bisschen von beidem. Die eine Sache, die ein bisschen komisch aussieht, sind die Ränder Es gibt eine Mischung aus, wenn ich eine Textur wieder öffne, eine Mischung aus Zuschneiden an der Form, damit sie nicht herauskommt, und zurück zum Glas gehen und herumspielen wo die Lichtquelle herkommt , und das auf und ab drehen Das hängt von jedem Fall ab. Es gibt keine spezielle Nummer. Aber es ist sehr cool. Sie können einen Blick darauf werfen. Effex, lass uns einen dritten hinzufügen. Schauen wir uns den Text an, tut mir leid, Lärm. Lärm, du kannst sehen, füge etwas Rauschen hinzu. In diesem Fall ist es interessant. Ich möchte es hier zeigen, weil Lärm interessant ist. Sie können mit nur einer einfarbigen Duofarbe herumspielen. Es gibt zwei davon, und Mehrfarbig funktioniert mit allen möglichen Farben, die Sie hier sehen können Das Geräusch besteht aus einem Haufen verschiedener Es hat also einen grünen Old-School-Effekt. Ich will dir das zeigen, weil ich das Rauschen hochdrehen werde , nur damit du es sehen kannst Sie können mit einigen Effekten herumspielen, Sie können mit der Reihenfolge herumspielen Im Moment macht es erst Rauschen und dann Textur, man kann sagen, wenn diesen seltsamen kleinen Bereich mit ein paar Händen hierher zieht , kann man ihn sehen und ihn wie Ebenen nach oben und darüber ziehen Es macht zuerst die Textur und dann das Rauschen. Möglicherweise stellen Sie einfach fest , dass Sie nicht den gewünschten Effekt erzielen können. Sie versuchen, die von jemand anderem zu kopieren. Das liegt daran, dass diese Reihenfolge unterschiedlich ist. Glas scheint in diesem Fall keinen Unterschied zu machen , wie es ist. Aber einige von ihnen tun es. Wozu Lärm wahrscheinlich netter ist ist für so etwas wie dieses Retro-Bild hier. Ich kann sehen, dass du, mein Freund, eine Wirkung hast und es wird das Geräusch sein Ich zoome ein bisschen und du kannst sehen, dass es eine Art Schul-Retro-Atmosphäre Ausschalten einschalten ausschalten einschalten, du verstehst es. Eines der Dinge an dieser Einstellung in der wir die Textur aktiviert haben, dass ich das Geräusch ausschalten werde. Ich werde es löschen, indem ich auf das Minus drücke. Ich mag die Textur. Ich mag das Geräusch nicht so sehr, aber sagen wir mal, ich mache das. Wenn ich im Moment möchte, ist es ein Rahmen, sagen wir, ich möchte Text darin einfügen. Ich nehme mein T für das Textwerkzeug, klicke hinein und sage: Jetzt buchen, buchen. Okay. Also, was passiert? Du machst es mit dem Elternteil, hat die Texturhülle, alles drin , leider wird der Effekt auch darauf angewendet. Wenn ich das so machen will, kann ich keine schicken Autos machen. Der Text muss drin sein, alles was ich tun muss, ist den Text hier drüben außerhalb davon zu machen. Buchen Sie jetzt zurück zum Verschiebe-Tool und legen Sie es oben drauf, nicht drinnen. Okay, eine Sache, die mir nicht aufgefallen ist, ist, dass das Bild ein Rahmen war und jetzt die Schaltflächen darin. Und weil ich das Bild angewendet habe , um einen Effekt darauf zu haben, es für alles, was sich darin befindet. Kannst du sehen, dass mein Text sogar den Rauscheffekt hat? Nochmals, wenn ich das nicht wollte, müsste ich mir diese beiden Typen schnappen und gehen, du bist da raus und du bist an der Spitze. Und ich habe eine andere Schrift gewählt. Da hast du's. Das ist der Textur- und Geräuscheffekt. Man muss nur wissen, vor allem, was in einer Figur steckt, ist, dass man die Ebenenreihenfolge dieser Dinge oft ändern kann die Ebenenreihenfolge dieser Dinge Du kannst zwei Füllungen haben und dann mit dieser herumspielen Ich kann das sofort kaputtmachen. Wenn es oben ist, ist es ganz anders, wenn es unten ist. Es ist nicht so anders, oder? Lass uns das lauter machen. Ob das Weiß oben oder das Weiß unten ist ganz anders All diese haben es und es ist nicht so klar, ob man sie bewegen kann Da hast du's. Undo Undo, Undo, wir haben einen coolen Button gemacht. Aber jetzt muss ich vielleicht gruppieren. Klicken Sie mit der rechten Maustaste auf Gruppe. Yuk. Jetzt bewegen sie sich zusammen Ausgezeichnet. In Ordnung, das ist es Wir sehen uns im nächsten Video. Ich bin zurück, weil ich dir etwas zeigen wollte . Ich war gerade dabei, das Intro für diesen Kurs zu machen. Also für dieses Video mache ich das am Ende, damit du sehen kannst, was wir machen Ich wollte es nur besser aussehen lassen, weil ich so ein bisschen darüber dachte. Und dann dachte ich, oh, ich habe es besser gemacht. Oh, ich sollte es ihnen zeigen. Okay, ich habe dieses Ding ausgewählt. Okay, also ich habe die Schaltfläche ausgewählt. Hier sind ein paar Dinge im Gange. Da ist also noch eine kleine Füllung übrig. Es begann zu 100%. Wenn Sie den Glaseffekt anwenden, wird er automatisch auf 10% reduziert. Ich könnte das loswerden, und es verleiht ihm irgendwie diesen glasigeren Effekt, ich mag es Die andere Sache ist ein seltsamer kleiner Rand , der etwas zu stark erscheint Wenn ich reingehe und darauf klicke, kann ich das Glas unter Textur, Radius sehen. Wenn ich das nach unten oder oben drehe , kannst du sehen, was es hier macht? Ich habe irgendwie diesen wirklich seltsamen Punkt ausgewählt , an dem es am schrecklichsten ist. Man kann es hochdrehen und es geht weg und wenn es wirklich niedrig ist, geht es weg. Um etwas zu finden , das für Sie funktioniert, können Sie natürlich auch mit der Größe herumspielen Aber ob du es kleiner machst und mit einem großen oder kleinen Radius herumspielst , ich weiß es nicht. Ich dachte, das ist es, wonach ich gesucht habe, und mein Text braucht es. Schlagschatten. Das ist nicht so verschwommen. Das geht nicht so weit runter. In Ordnung. Das ist es Jetzt können wir das Video beenden. Sehen wir uns im nächsten? Schau, wie cool es ist. Nein. 8. Progressiver Unschärfeeffekt: Hallo, alle zusammen. In diesem Video werden wir uns etwas ansehen, das Progressive Blur genannt wird Hier wird die Farbe zunehmend verschwommener. Sie können auch mit Bildern arbeiten. Es ist wirklich einfach und sehr schnell und das machen wir zuerst. Wenn Sie jedoch etwas Zeit haben möchten, machen wir das, wo wir in diesem Tutorial etwas weiter gehen, nur um machen wir das, wo wir in diesem einige der schönen Dinge zusammenzufassen, die wir zuvor im Grundlagen-Kurs gelernt haben , um alle anderen auf dem Laufenden zu Es gibt einige kostenpflichtige Funktionen , die wir durchgehen, einige KI. Es lohnt sich, hier rumzuhängen, wenn Sie Figma noch nicht Wir sind nur wegen der progressiven Unschärfe hergekommen, machen das am Anfang und fahren dann mit dem nächsten fort Richtig. Das ist es. Lass uns einsteigen. Lassen Sie uns schrittweise Unschärfe erzeugen. In Ordnung, Sie werden feststellen, dass meine Benutzeroberfläche dunkel ist. Ich dachte, ich zeige es dir, kurz bevor wir anfangen. Ich habe nachts meins getauscht Du musst eine Datei geöffnet haben, zum FK gehen, zu den Einstellungen gehen und unter Thema kannst du zwischen hell und dunkel wechseln Es ist jetzt Nacht und das Licht in meinem Büro ist wirklich hell, also drehe ich es einfach ab Denken Sie daran, Datei geöffnet, Einstellungen-Thema dunkel. nichts ausgewählt ist, können Sie die Farbe Ihrer Seite ändern. Es könnte die Standardfarbe sein, weiß, aber vielleicht möchten Sie hier mit einer dunkleren Farbe arbeiten. Co.. Schnappen wir uns den FK. Klicken Sie einmal. Schnappen wir uns Hiphone 16. Mir gefällt das, der weiße Kontrast zum Schwarz. Bringen wir ein Bild rein. Command Shift K ist eine, die ich häufig verwende, oder ich ziehe sie hinein. Das Problem beim Hineinziehen, wenn es sich ein wirklich hochauflösendes Bild handelt, ist riesig Command Shift K ist eine wirklich gute Abkürzung. Ich werde diese 03 reinbringen und wir werden öffnen. Der Grund, warum ich das so mache, ist, dass ich es anklicken und ziehen kann, bis es eine Größe hat, die ich haben möchte, ungefähr diese Größe. Jetzt lassen wir es einfach progressiv verwischen und dann lassen wir es so aussehen wie im Intro Alles, was Sie tun müssen, ist ein weiterer Effekt. Sie können von Schlagschatten über Technologie bis hin zu Ebenenunschärfe wechseln. Das, in dem wir uns verstecken wollen, ist progressiv. Und was du machen kannst, ist einfach so, es ist ziemlich cool. Es fängt oben an, wirklich knackig, und man kann hier unten sehen, es ist verschwommen Sie können diese kleinen Punkte herumziehen. also von links nach rechts Sie können also von links nach rechts die Umschalttaste gedrückt halten und es wird in geraden Linien angezeigt. Also kannst du coole Sachen machen. Es muss kein Bild sein. Ich kann F k für das Rahmenwerkzeug nehmen, indem ich die Shift-Taste gedrückt halte, es ist ein Quadrat , gib ihm eine Füllfarbe, jede alte Füllfarbe hier drüben, solange es grün, grünlich Komm schon, Grün, das Aqua, das hier. Wir können das Gleiche tun. Oh, lass uns eine Abkürzung machen. Lass uns die ausgewählten haben. Ich habe einen Effekt. Ich kann hier klicken und es wird blau. Kannst du diesen Bereich sehen, den wir früher benutzt haben , um ihn herumzuziehen? Du kannst darauf klicken, es kopieren, darauf klicken und auf Einfügen klicken. Sie können Stile kopieren und einfügen. Und wir werden es tun. Wir werden reingehen und das ein bisschen mehr beeinflussen und es macht eine wirklich coole Sache. Wenn du das Ende nimmst und es nach oben ziehst, kannst du sehen, dass es wirklich verschwimmt Das ist ein sehr cooler Effekt. Ich kann es nicht oft benutzen. Es funktioniert im Code. Ihre Entwickler werden ein bisschen ausflippen , weil sie es anwenden müssen, aber es ist machbar, ziemlich einfach mit CSS. Das ist progressive Unschärfe Was wir jetzt tun werden, ist es so zu stylen, wie wir es vorher hatten. Es gibt eine kleine Zusammenfassung einiger Dinge, die wir im Grundlagen-Kurs gelernt haben, nur für diejenigen, die eine Zusammenfassung benötigen oder wenn Sie den Grundlagen-Kurs überspringen weil Sie bereits sehr gut sind Vielleicht möchten Sie sich den Rest dieses Videos ansehen, falls Sie etwas verpasst haben. Das möchte ich behalten. Sieht cool aus. Gegen die Ente sieht es noch cooler aus. Ich liebe es. Ich möchte dieses Quadrat machen, also muss ich es beschnitten machen Ich werde jetzt füllen, was mein Bild ist Ich gehe zu Ausgewählt. Da ist die Füllung. Ich klicke auf das Bild und gehe bis hierher, dort steht „Füllen“, sagen wir, du bist nicht gefüllt, du bist beschnitten, und dann kann ich diesen Rand hierher ziehen Wie groß soll es sein? Im Moment -16 16116 groß, also werde ich meinen 116 weiß machen Es ist ein Quadrat. Nun, das verschiebt den Rand Der Rand ist die Ernte. Wenn Sie an eine beliebige Stelle in der Mitte ziehen, können Sie es innerhalb des Zuschnitts verschieben. Also werde ich meins so ziehen, dass hier genau in der Mitte ist. Ich werde im Hintergrund rausklicken, und jetzt ist es ein Quadrat mit diesem Ding. Ich glaube, ich möchte mit der Ebene, der progressiven Ebene blau, herumspielen und so groß machen, wie wir es in dieser gemacht haben. Sie können sehen, dass Sie es überall starten können. Es könnte hier sein. Da es sich hier um eine generische Genre-Liste handeln soll, nicht um einen echten Künstler, muss ich vielleicht ziemlich weit anfangen um die Atmosphäre von Hip Hop zu vermitteln, aber den Künstler nicht wirklich zeigen In Ordnung, ich möchte es verkleinern. Immer wenn ich Bilder skaliere, funktioniert das, aber wenn ich Dinge skaliere, verwende ich das K-Werkzeug. K auf Ihrer Tastatur , um vom Verschieben-Werkzeug zum Skalieren-Werkzeug zu wechseln Verschieben-Werkzeug zum Skalieren-Werkzeug zu , nur um alle Effekte und alles zu skalieren. Es ist einfach eine wirklich gute Angewohnheit. Das ist wahrscheinlich so, wie ich meinen haben will. So zoomen Sie ein bisschen heraus. Ich möchte dafür FK hinzufügen , weil ich eine kleine Box für das Genre haben möchte. Bring es einfach nach oben. Wählen Sie eine beliebige Farbe, solange sie grün ist Sie können das Auge auf Ihrer Tastatur für die Pipette drücken . Schnapp dir das einfach Oh, es ist zu blau. Ich möchte, dass es ein bisschen grüner ist. Oh, das ist es. Ich werde ein paar Sachen tippen. Also tippe zwei, klicke einmal. Ich werde das im Handumdrehen erledigen, weil Sie mir nicht beim Tippen zuschauen müssen. Eine Sache, die ich kurz unterbrechen und Ihnen zeigen möchte, wir kaum beschleunigt haben, ist, dass ich Schriften wirklich mag, okay, die sind wie Roboto, ich mag es, weil es eine komprimierte Version Okay? Condensed ist einfach sehr praktisch, wenn Sie versuchen, viel Text unterzubringen. Kannst du das sehen? Es ist eigentlich nur, weißt du, in dieser anderen Schrift, kannst du sehen, wie viel weißer sie war War in einer komprimierten Schrift, es gibt viele komprimierte Schriften Sie können hier einfach wirklich nicht Roboto eingeben, sondern komprimiert eingeben, um all die verschiedenen Arten von komprimierten Schriften zu sehen all die verschiedenen Arten von komprimierten Schriften Und einige von ihnen sind superkondensiert. du dir das da ansiehst, wirst du noch viel mehr hineinpassen können. Da ist kondensiert und komprimiert, komprimiert komprimiert ist kleiner als kondensiert Ich bin mir nicht sicher, ob ich mich nicht an die Sprache erinnern kann, aber C. Was machen wir? Kondensiert, okay? Und es ist einfach so, ja, du kannst mehr Text auf engstem Raum unterbringen, besonders auf einem Telefon, weil es dieses seltsame Seitenverhältnis hat. Es ist schmaler als hoch, oder? Also lass uns rückgängig machen. Also habe ich mein Ding tatsächlich wieder beschleunigt. Wir haben nicht wieder zu schnell gefahren. Ich verwende gerne dieselbe Schrift mit unterschiedlichen Stärken. Also immer noch Roboto Condensed. Eins ist leicht Einer ist mutig und verwendet die Größenhierarchie. Weniger wichtig, wichtiger. Ich spiele mit dem Gewicht, okay, leicht und mutig. Auch hier kannst du weitermachen, wenn du schon wirklich gut mit solchen Dingen umgehen kannst, ich bin nur irgendwie ich weiß nicht, und ein paar Extras hinzufügen. Machen Sie einfach weiter, denn da sind wirklich die KI-Dinge. Um die Zeilenhöhe herum und ziehen Sie sie einfach nach links. Nicht die Zeilenhöhe. Ich spiele mit der Zeilenhöhe, wähle alles und die Zeilenhöhe aus, ich gebe -50 ein. Viel zu viel Ich werde eintippen. Sie können es also einfach überschreiben. Ich kann Minus eingeben, eigentlich nur 16. Ich werde die Umschalttaste gedrückt halten und meinen Aufwärtspfeil benutzen , um etwas zu finden. Was machen wir 24? nicht den Shift-Pfeil gedrückt halte ich jetzt nicht den Shift-Pfeil gedrückt halte, benutze ich nur die Aufwärts- und Abwärtspfeiltaste , um die Zeilenhöhe so einzustellen, wie ich sie haben möchte. So etwas in der Art. Alles Tipps, die wir im Essentials-Kurs gemacht haben, aber hey, wir werden sie hier am Anfang reinwerfen. Okay, flüchte ein paar Mal, um das Textwerkzeug zu verlassen. Ich werde darauf klicken. Es wird ungefähr hier drin sein. Also, ich will ein paar davon machen, also zoome ich raus. Ich werde mir das groß genug schnappen? Shift Null auf Ihrer Tastatur ist die automatische Einstellung , um auf 100% zu kommen. Okay? Halten Sie also Shift O gedrückt, bis alles auf den Bildschirm passt. Nummer zwei ist, etwas auszuwählen und alles zu vergrößern. Also, dass Shift Zwei und Shift Null auf Ihrer Tastatur auf 100% gehen. gefällt mir. Die Schriftgröße ist also wahrscheinlich groß genug. Wenn ich sie mir einfach beide schnappen und sie vergrößern möchte, halte das K-Werkzeug-Element für die Skalierung gedrückt, los und beide werden ein bisschen größer , was die Schriften angeht. Um es zu bewegen. In Ordnung, lassen Sie uns ein paar Versionen davon machen Also werde ich alles auswählen meine Optionstaste auf einem Mac nehmen Oh, kein PC, um es zu duplizieren, ziehe es direkt nach unten. Ich nehme eins, zwei, drei, das reicht für Ooh vier, fünf Okay? Im Moment möchte ich nur, kannst du einfach auf die Boxen selbst klicken? Mal sehen, ob wir aus all diesen auswählen können. Okay, das ist eine kostenpflichtige Funktion. All dieses Zeug ist oft C unter Aktionen. Okay? Gehen wir runter zu. Unser erster Koch, nein. Gehen wir zu. Schreib das um. Klicke darauf und ich werde sagen: Was möchte ich, dass du tust? Ich möchte, dass du schneller tippst. Wenn es Musik ist, schauen wir mal, ob ich das kann, ohne ein Ti auswählen zu müssen. Oh, das kann ich. Es macht es. Es hat mir all meine anderen Sachen weggenommen. Verdammt. Okay? Das hat es nicht getan , als ich es geübt habe. Also werde ich meins etwas anders bauen müssen. Fehler, Leute. Okay. Also eigentlich wird es wahrscheinlich immer einfacher sein, wenn ich dich schnappe. Leg das da hin, füge den Text ein. Sie befinden sich in zwei separaten Textfeldern. Verkleinern. Wie ist mein Zeilenabstand etwas höher? Ein bisschen höher. In Ordnung. Lass es uns jetzt machen. Lass uns schnappen und hier runter gehen. Ich halte die Optionstaste auf einem PC und drücke dann Befehl D. Habe ich das schon einmal gesagt oder Strg D, um das zu duplizieren , was wir gerade getan haben? Wie viele habe ich jetzt, sechs. Jetzt muss ich alles auswählen, nur den Text. Ich will nur den Hip-Hop, aber ich will, dass er das Wort Genre verändert. das ausgewählt ist, möchte ich die Umschalttaste gedrückt halten und ich klicke darauf, um das Ganze zu erfassen, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, ich will nur den Text darin Lass uns auf den ersten klicken. Okay, dieser Typ hier , doppelklicken Sie auf ihn. Wenn Sie dann Shift und Ihre Befehlstaste oder Shift und Strg gedrückt halten , können Sie auf Sie und Sie und Sie und Sie klicken . Also gehen sie alle ausgewählt. Jetzt kann ich umschreiben Ich kann sagen, dass du das umschreibst. Ich möchte, dass du Speed Typing sagst. Dramen, Musik. Ich scanne , es wird meinen ersten ersetzen Da steht Hip Hop. Das ist es, nicht wahr? Das ist okay. Oh, Geek, nimm Änderungen vor Nur in Worten. Viel zu lang. Es ist cool, oder? Es ist so gut für Platzhaltertext Ich mag es. Ich werde wahrscheinlich wählen müssen. Es ist auch wirklich gut, weil man ein Gefühl dafür bekommt , wie lange manche Dinge dauern werden Also sagst du, oh, das war cool für Hip Hop, aber all diese müssen wirklich eine kleinere Schriftgröße haben, wahrscheinlich 24, um alles hineinpassen zu können Oh, wir haben in diesem Kurs viel gemacht, oder? Wir sind wegen progressiver Unschärfe gekommen. Jetzt verwenden Sie KI. Du lernst alle möglichen coolen Abkürzungen. Der Kurs für Fortgeschrittene. Der ist genial. Es ist voll von Soul-Beats Base-Vibes und zwei Gruppen. In Ordnung, das ist es Ich werde dich im nächsten Video sehen. 9. Klassenprojekt 01 - Genre-Auflistungen: Ordnung. Es ist Zeit für erstklassige Projekte. Die Klassenprojekte sind also in den Übungsdateien in einer PDF-Datei namens Klassenprojekte aufgeführt in den Übungsdateien . Ich werde ungefähr so aussehen. Und das ist der erste. Ich möchte, dass du einen Handyrahmen erstellst. Im Grunde möchte ich, dass du das, was wir im letzten Tutorial gemacht haben, neu machst was wir im letzten Tutorial gemacht haben Also dieses Ding. Aber speziell für Ihren Auftrag. Meins ist Limerick Hip Hop. Ich möchte, dass du dich darauf konzentrierst und dann herausfindest , welche Subgenres dafür geeignet sind, zum Beispiel dieses Techno, du hättest Techno-Acid vielleicht als industriell bezeichnen können. Das sind alles Arten von Techno. Rock, es gibt viele Unterkategorien. Du weißt nicht wirklich, mit welchem Musikgenre du arbeitest. Googeln Sie ein bisschen Ich wette, Sie werden feststellen, dass es Unterkategorien gibt, aus denen sie bestehen. Das ist hier nicht wirklich wichtig, ich möchte, dass du mit der progressiven Unschärfe experimentierst Mir ist egal, wie du das machst. Du kannst es genauso machen, wie ich es gemacht habe. Spiel einfach damit. Mir ist egal, wie du das machst. Wenn Sie das Pro-Konto haben, gehe ich in diesem Kurs davon aus Sie das Pro-Konto haben. Wenn Sie das nicht haben, können Sie damit absolut weitermachen. Ich werde mich nicht jedes Mal entschuldigen und sagen, wenn Sie es nicht haben, versuchen Sie, einen Workaround zu finden, denn okay Wenn Sie die KI-Funktionen nicht mit Rewrite This nutzen können, ist das okay . Sie haben gesehen, wie es funktioniert Sie könnten stattdessen HGBT verwenden, was kostenlos ist. Das ist das Wichtigste, was jeder hat, aber die KI-Funktionen, und einige davon in diesem Kurs sind nur für Profis Aber wenn du sie hast, geh und spiel mit ihnen. Spielen Sie ein bisschen herum und schreiben Sie das um , als wir den Text geschrieben haben Und ich habe es auch mit den Bildern gemacht. Sie können diese auswählen und entweder zu den Aktionen gehen und ein Bild erstellen, oder Sie können bereits ein Bild auswählen, zur Füllung gehen und sagen, ein Bild erstellen, Sie können KI verwenden, um das Bild zu erstellen. Bei Unsplash oder Pixels finden Sie viele kostenlose Bilder, die Sie zum Ausfüllen Ihres Prototyps verwenden können zum Ausfüllen Ihres Prototyps verwenden Ich war die Klassenprojekte, das musst du machen. Machen Sie auf jeden Fall Progressive Blur, spielen Sie mit KI-Funktionen und Ergebnissen herum Ich möchte, dass du einen Screenshot machst oder dein Bild exportierst und es in die Klassenprojekte hochlädst Screenshot auf einem Mac ist Command Shift 4 und du kannst ein Feld um ihn herum ziehen. Auf einem Mac mit Druckbildschirm können Sie etwas Ähnliches tun . Ich denke , so macht man das. Ich weiß, dass es noch eine Abkürzung für PCs gibt. Sie wissen wahrscheinlich, was es ist. Wenn nicht, können Sie das Bild einfach exportieren. Ich kann das auswählen. Oh, ich würde wirklich gut aussehen. Oh, daran habe ich nicht gedacht. Wenn du zu einer Präsentation gegangen bist und es in einem Telefon war, habe ich vorher gelernt, wie man das einstellt. Das würde cooler aussehen, mach einen Screenshot als diesen. Andernfalls, wenn Sie sich nicht sicher sind, wie ein Screenshot erstellt wird, können Sie auf den Rahmen klicken und dort nach unten exportieren. Ich möchte den ganzen Frame exportieren, scrolle nochmal runter. Was für eine Größe? Nur bei einer Größe, und ich werde ein PNG machen, werde ich auf iPhone 16 exportieren klicken. Du gehst. Sie können diese Datei verwenden, um Projekte für das Klassenprojekt in die Klasse hochzuladen . Ja. Weil jeder einzigartig ist und es ein interessantes Projekt ist, würde ich mich freuen, wenn du es in den sozialen Medien teilst. Taggen Sie mich mit beiden Hashtags. Figma Advanced erleichtert es mir, bestimmte Kurse zu gruppieren und mir diese anzusehen Aber stell sicher, dass du mich auf Instagram, der Facebook-Gruppe, Twitter, du mich an diesen Adressen hier markierst. Egal, welche Art du verwendest, dein Instagram oder ein LinkedIn oder ein TikToker, es liegt ganz bei dir, aber ich liebe es, es zu Viel Spaß. Es geht hauptsächlich darum, mit progressiver Unschärfe herumzuspielen Du könntest noch ein bisschen weiter gehen und das Ganze in Bezug auf eine Genre-Seite viel cooler gestalten in Bezug auf eine Genre-Seite viel cooler Wir halten es leicht für diejenigen unter Ihnen, die nicht viel Zeit haben, aber wenn Sie bereit sind zu spielen, können Sie diese Seite ein bisschen schöner gestalten Wenn Sie sich nicht sicher sind, wie Sie diese machen sollen, was kopiere ich dann einfach? Was sollte ich tun? Sie können online ein wenig nach Inspiration suchen. Ein guter Begriff ist so etwas wie UI-Karte. Wir gehen einfach zu Hause durch den Hinterhof. Du kannst die Vorlagen durchgehen, ein wenig nachschauen, damit ich sie auflisten kann. Hat aber nicht wirklich funktioniert. Sie können dort irgendwie sehen, dass verschiedene Arten von Karten wahrscheinlich besser sind. Karten ist der Oberbegriff für alles, was sich in einer Schachtel befindet, und Sie können anfangen, interessante Arten von vielleicht sogar Feature-Karten zu sehen . Lass uns das machen. Feature-Karten sind noch besser, ein bisschen spezifischer, okay? Und du siehst Dinge wie, Oh, das mache ich vielleicht damit, irgendwas auf der Unterseite, okay? Es liegt an dir. Es kann einfach sein, kann komplex sein. Ich freue mich darauf zu sehen, was du machst. In Ordnung, das Klassenprojekt ist vorbei. Wir sehen uns im nächsten Video. 10. Effektstile speichern und nicht verwendete Stile löschen: Hallo, alle zusammen. Wir werden die Effekte, die wir im letzten Video gemacht haben in einen Stil umwandeln, sodass wir sie wiederverwenden und sie alle auf einmal ändern können. Was wird von der Perspektive her einheitlich sein. Eigentlich ist das Wort progressiv. Aber wir haben die Kontrolle über sie alle und dann zeige ich Ihnen, wie Sie alle Stilbibliotheken entfernen , die zu Ihrer Datei hinzugefügt wurden Sie werden ein bisschen verwirrend, Stile, nach denen Sie nicht gefragt haben. Dann zeige ich Ihnen, wie Sie all die Stile entfernen können, nach denen Sie nicht gefragt haben, die alle einfach in Ihren Bibliotheken erscheinen, und Sie fragen sich: Woher kommen sie? Ich zeige Ihnen, wie Sie sie löschen können, sodass wir nur die Dinge haben, die wir als Stile erstellt haben. Lass uns reinspringen. In Ordnung, also im letzten Video haben wir ein paar Styles gemacht . Ich habe ein paar gemacht. Ich habe auch ein paar mit Schlagschatten gemacht. Nehmen wir diese progressive Unschärfe. Sie können es hier sehen. Es wurde auf meine Fixpaneele aufgebracht. Diese vier kleinen Punkte die Art und Weise, wie wir Stile erstellen und verwenden können. Jetzt machen wir es für Affix. Wir können es für Striche machen und alles ausfüllen , was kleine Punkte hat Ich klicke auf Affix und sage, ich möchte einen neuen Starteffekt hinzufügen Es ist etwas anderes, als hier auf das Plus zu klicken. Wir gehen den Punkten auf den Grund. Kopf plus und wir sagen, wir nennen das, ich nenne das M. Ich nenne das 101, weil ich bestimmt noch eins ich nenne das M. Ich und noch eins erstellen werde und ich muss sie unterscheiden. Manchmal setze ich den Namen des Kunden davor, nur damit ich weiß, dass das die Version von Drop Shadow ist, die ich verwende, um einen Laptop mitzubringen oder um welche Firma es sich auch handelt. Sie können es auch hier unten beschreiben. Lass uns auf Stil erstellen klicken. Das Coole daran ist , dass wir es durchgehen und sagen können, dass die neue Sache, die wir zeichnen FK-Mitglied Progressive Blur nur auf R-Frame funktioniert Nein, das ist etwas anderes. Das ist der Glaseffekt. Okay, also werde ich das hier anbringen gehen. Anstatt jetzt auf Plus zu klicken und alles durchzugehen und einzustellen, kann ich einfach zu den kleinen Punkten unter Affix gehen und Progressive Unschärfe sagen Da hast du's. Erledigt. Wiederverwendbar. Die andere coole Sache beim Festlegen von Stilen ist, dass wir sagen, dass wir diese Stile anwenden. Oh, sie wurden bereits angewendet. Das ist progressive Unschärfe. Das nennt man Layer Progressive Blur. Ebenenunschärfe, progressiv nein, der hat es drauf. Oh, ich habe den Stil daraus kreiert. Diese haben sich nicht beworben. Also werde ich all diese anwenden. Ich werde sagen, dass ich den Effekt entfernen möchte und nicht den zufälligen Ebeneneffekt anwenden möchte. Ich möchte das, was ich gemacht habe , hinzufügen wollen, es heißt Progressive Blur. In Ordnung, jetzt sind sie also alle verbunden. Am liebsten würde ich sie alle auf einmal ändern. Ich habe nichts ausgewählt. Absolut nichts. Du siehst hier drüben, solange ich im Design bin, wirst du vielleicht bei Draw oder Dev nicht weiterkommen. Okay, stellen Sie sicher, dass Sie bei diesem Design sind. Unter Design werden alle Ihre Styles aufgelistet , die Sie verwendet haben. Das Coole daran ist, dass ich sagen kann, sieh dir das an. Ich habe hier ein paar Einstellungen. Ich kann sagen, bearbeite diesen Stil. Ich kann darauf eingehen und sagen, ich möchte es tatsächlich endet, was offensichtlicher sein wird. Gehen wir zur Uniform über. Ich habe auf Uniform umgestellt und sie haben alle aktualisiert. Das ist eine großartige Möglichkeit , ein wirklich großes Dokument zu kontrollieren . Erstellen Sie einen Stil, und dann können Sie ihn bearbeiten, indem nichts ausgewählt haben, und Ihren Stil durchgehen. Ich wollte das noch einmal zusammenfassen. Wir haben es nicht im Grundlagen-Kurs für Effekte gemacht, aber wir haben es für viele andere Dinge getan Wenn Sie also direkt zum Kurs für Fortgeschrittene springen, werden Sie feststellen, dass es sagen wir, was das ist, es ist eine Farbe, die ich mag, okay? Anstatt sie jedes Mal abzutippen, können Sie zu Styles gehen und genau dasselbe tun und Plus drücken, und das wird meine primäre Primärfarbe sein, und ich kann einen Stil erstellen und dann kann ich anfangen, ihn wiederzuverwenden Wenn ich einen neuen Rahmen zeichne, kann ich einfach hier reingehen, auf die Schaltfläche „Stile“ klicken und bam, wir haben die Primärfarbe. Das ist alles, was wir dafür tun Als Nächstes möchte ich Ihnen zeigen wie Sie einige der Standardbibliotheken entfernen können , die Ihnen Stilvorschläge geben , wenn Sie diese bereinigen möchten. Es könnte standardmäßig einfach da sein. Es könnte dort sein, weil Sie das Dokument einer anderen Person geöffnet haben , vielleicht ein größeres Projekt, das Sie bereinigen möchten. Was ich tun werde, ist, dass wir auf dieses klicken. Und wenn ich auf den Affix drück, mache ich es tatsächlich, es ist egal, für welchen Stil wir uns entscheiden. Ich werde mich satt machen Was du sehen wirst ist , kannst du sehen dass es hier unten noch viele andere gibt? Also, wo kommen die her? Okay, vielleicht hast du nichts, aber vielleicht hast du schon diese riesige Liste. Eigentlich will ich es nur aufräumen. Sie können zu allen Bibliotheken gehen, Sie können zu den Bibliotheken gehen , die in dieser Datei aufgeführt sind . Wir räumen sie einfach auf Sie zeigen nur die in dieser Datei, nicht alle Bibliotheken, die Sie möglicherweise Rahmen Ihrer Arbeit haben Wir werden später speziell Bibliotheken einrichten, aber es ist einfach schön, die Dinge früh aufzuräumen Schau dir das an. Lassen Sie uns den Link zum Stil unterbrechen. Lass uns hier reingehen. Okay, das Gleiche hier. Okay, meine Fex Styles, hier ist alles Mögliche drin. Also kann ich in meine Bibliothek gehen und sagen, ich will eigentlich nicht Ich werde die Bibliotheken entfernen und von diesem, diesem hier, dem hier, zurück gehen. Ich werde diesen und diesen entfernen. Dies sind Teambibliotheken, die in diesem Dokument mit mir geteilt wurden. Wir werden uns später mit Teambibliotheken befassen, aber manchmal möchte man sie einfach aufräumen und einfach weggehen. Und ich habe jetzt nur Progressive Blur. Nett Ordnung, das ist also das Hinzufügen von Effektstilen und nur Stilen im Allgemeinen. Vorteile sind, dass Sie sie nach der Anwendung zunächst Ihre Vorteile sind, dass Sie sie nach der Anwendung zunächst sehr einfach anwenden können, und wenn sie einmal angewendet sind, können Sie sie alle auf einmal bearbeiten. Wir haben versucht, alle Stile zu entfernen, die mit Ihrem Dokument in Verbindung stehen und nach denen Sie nicht gefragt haben. All das ist es. Ich werde dich im nächsten Video sehen. 11. Workflow-Tipps und Tricks: Jeder. In diesem Video werden wir uns alle Tipps und Tricks ansehen , die mir einfallen. Ich werde sie alle in ein Video packen. Wenn Sie bereits mit Tipps und Tricks vertraut sind, können Sie sie überspringen. Es ist ein sehr langes Video. Ich fühle mich schlecht. Aber es gibt eine Menge Tipps und Tricks und einen Bonus für jeden, der bis zum Ende wartet. Ich zeige dir das Es ist eine kleine Tastatur , die ich für Figma habe , und ich werde dir zeigen, was sie für Cool nützlich ist Aber es ist ein Bonus, wenn du dir all die Tipps und Tricks durchliest Dies wird entweder Ihr wertvollstes Video für den Kurs sein oder Sie verlieren vielleicht nicht, weil es so lang ist. Nun, lass uns einsteigen. Gutes Verkaufsargument, Dan. Mary ist alarmiert. Videozeit. Okay, um loszulegen, öffne eine alte Datei. Wir werden etwas ziemlich Kompliziertes öffnen, um all die guten Abkürzungen zu beweisen In Ihren Übungsdateien gibt es hier einen Link namens Workflow-Demo. Sie können alles öffnen. Ich mag diese Datei einfach wirklich. Sie ist in deinen Übungsdateien. Es heißt Workflow 01. So oder so, du wirst hier in Figma sein. Und hier auf den Seiten gehen wir runter zum Design. Wir kommen gleich zu diesem. Das ist der, den ich mag. Das ist sehr cool. Das Problem, wenn man mit der Datei eines anderen anfängt oder für ein großes Unternehmen arbeitet , ist, dass es manchmal ziemlich kompliziert sein kann, alte Dinge zu ändern, besonders wenn es keine Stile gibt. Was Sie jedoch tun können, ist eine der einfachsten Möglichkeiten, hier eine ganze Reihe von Dingen auszuwählen, anstatt mit einer Füllung zu hier eine ganze Reihe von Dingen auszuwählen, spielen, weil Sie gemischte Dinge ausgewählt haben , offensichtlich haben Sie eine Menge Dinge ausgewählt Was Sie hier unter Auswahlfarben sehen können Wenn Sie eine Menge ausgewählt haben, wird möglicherweise ein kleines Drop-down-Menü wie dieses Aber du kannst hier sehen, hier sind alle Farben drin. Da ist meine Grundfarbe oder meine Akzentfarbe. Ich bin mir nicht sicher, wie sie es genau genannt haben. Hat eigentlich keinen Namen. Habe die Hexadezimalzahl Also können wir darauf klicken und sagen, ich möchte, dass du Oder blau. Es ist einfach eine sehr schnelle Art, mit vielen Dateien zu arbeiten , anstatt die gefürchtete Schicht zu machen, Clue Klicken Sie darauf, halten Sie die Umschalttaste gedrückt, halten Sie die Taste gedrückt. Wer hat das gemacht? Das dauert zu lange. Eine weitere sehr praktische Möglichkeit ist, klicken wir hier auf dieses Feld. Ich bin ziemlich weit herausgezoomt. Ich liebe die Abkürzung Shift Two. Dadurch wird alles vergrößert, was Sie ausgewählt haben. Wenn du ein kleines Ding ausgewählt hast, also wenn ich die Befehlstaste gedrückt halte und auf diesen kleinen Punkt klicke , der innerhalb der Gruppe springt Lass uns Control auf einem PC, Command auf einem Mac. Wenn ich die zweite Schicht mache, ist das nicht wirklich nützlich. Okay, Schicht eins ist also so, weil sie herauszoomt, um alles zu zeigen Schieben Sie zwei nach rechts in das Objekt , das Sie ausgewählt haben. Shift Null ist 100%. Das ist wirklich gut. Schicht eins, zwei und Null. Eins steht für alles im Dokument, zwei für das, was Sie ausgewählt haben, und Null steht für 100%. Perfekt. Lass uns auf klicken. Nehmen wir an, wir haben das hier. Lassen Sie uns auf meinem Mac etwas gedrückt halten , um meinen PC zu steuern. Springt einfach rein, weil es eine Gruppe innerhalb einer einer Gruppe innerhalb einer Gruppe gibt, und du könntest für all die Doppelklicks sterben, okay? Sie haben also nichts ausgewählt. Halten Sie einfach Command oder Control gedrückt. Klicke darauf. Dann kannst du zu Bearbeiten gehen, okay? Und es gibt eine Option „Alle auswählen“ mit. Das ist super praktisch. Man kann sagen, ich möchte eigentlich alles füllen , was die gleichen Texteigenschaften hat. Okay? Und es ist die gesamte Seite durchgegangen, auf der wir gerade sind. Ich zoome ein bisschen heraus. Was gibt es sonst noch? Es sind nur diese Typen. Aber es bedeutet nur, dass ich nicht alle mit der Shift-Taste anklicken muss. Ich kann sagen, dass wir dafür, ich weiß nicht, Acme verwenden ich weiß nicht, Acme Oh, ich mag Acme nicht. Ich ruiniere die Arbeit dieses Mannes Ich glaube, er wird gerade vorgestellt. Da ist er da. JH Patel, du hast eine coole Vorlage gemacht Danke fürs Teilen. In Ordnung, andere coole Tipps Komm runter und schnappen wir uns einen dieser Knöpfe. Ich werde mit einem Doppelklick wegklicken. Das ist ein Haufen Zeug. Es ist mehr als nur Text, es ist mit einer Polsterung versehen, sodass Sie es bearbeiten und auswählen können Hier gibt es eine Menge anderer Optionen. Wir werden sie nicht alle behandeln, aber stellen wenn es einen Schlagschatten hat, können Sie alles auswählen , was den gleichen Effekt hat. Ich gehe und mache die gleichen Eigenschaften. Es wurde jede Komponente ausgewählt , die gleich aussieht. Das Eigentum ist etwas allgemeiner. Es hat dieselbe Füllfarbe plus die Polsterung den Eckenradius Ich denke, das ist es für das gesamte Dokument. Versuch es noch einmal. Schnappen wir uns den Kreis hier. Gehen wir zu „Bearbeiten“, „Auswählen mit und dann „Ausfüllen“ und Sie werden feststellen , dass dieses Dokument in vielen Fällen dieselbe Füllung hat, ähnlich wie zuvor, indem wir die ausgewählte Farbe verwendet haben . Vertikal. Eines der Dinge, die ich gefragt werde, ist, Sie sehen hier, wie JS alles mit diesen Seiten aufgeteilt hat . Gehen wir zurück zu einer unserer alten Dateien. Ich gehe zurück zu dem, den wir gemacht haben. Ich habe nur eine Seite. Was wir tun können, ist seitenteilig. Ich habe diesen. Das ist mein Hi-Fi. Lass uns das schnell durchgehen. Okay, ich werde also eine Komponentenseite haben. Es wird die Spitze sein. Ich möchte es von meiner Art von Arbeitsdokumenten trennen. Also werde ich eine Seite hinzufügen, und alles, was Sie tun, ist Seite drei, um diese aufzuteilen. Sie können die Bindestriche wie JSTED einfügen. Ich mag es, die Umschalttaste gedrückt zu halten und den Unterstrich zu drücken, und es sieht eher aus wie ein Seitenteiler Wenn du noch schicker werden willst, kannst du Emojis zu jedem davon du Sagen wir, Komponenten, Sie möchten etwas finden , das Sie hier tatsächlich mit dem Handy machen können Automatischer Steuerbefehl Leertaste, okay? Und das wird auftauchen. Es ist ein kleiner Emoji-Typ, und du kannst auf eines davon doppelklicken Also gebe ich Handy ein und finde etwas Falsches auf dem Handy. Ist das ein Handy? Ja. Okay, doppelklicken Sie darauf und es wird überall hingehen , wo Sie Ihren Cursor hinbewegen. Also doppelklickst du. Oh, ich habe zwei davon. Okay, auf einem PC ist es so, dass der Cursor hier drinnen blinkt und dann die Windows-Taste gedrückt halten und entweder, ich glaube, es ist Punkt oder Semikolon drücken , eins Das sieht nicht aus wie ein Telefon. Du verstehst die Idee. Und für Komponenten musst du Puzzleteile einsetzen. Da hast du's. In Ordnung. Es ist nützlich, die Benutzeroberfläche auszublenden. Es ist Command and Backslash oder Control Backslash Versteckt es einfach, während du arbeitest. Ändert nichts. Du kannst immer noch arbeiten, wenn du deine Abkürzungen kennst. Alle diese Tastenkombinationen haben sich geändert, während Sie zwischen der Aufnahme dieses Videos und dem Ort, an dem Sie es sich ansehen, liegen. Schauen Sie sich das Fragezeichen unten an. Gehen Sie zu den Tastenkombinationen und schauen Sie sich dort um. Sie werden all die verschiedenen Tastenkombinationen erklären. Sie sind blau, wenn du sie benutzt hast. Okay? Sie sind dunkel, wenn du die Abkürzung nicht benutzt hast, okay? Da hast du's. Ich werde meine Benutzeroberfläche ausschalten weil es etwas schwierig wird, sie zu benutzen, wenn Sie sie einmal ausgeschaltet haben , aber Sie haben mehr Platz, besonders auf einem Laptop. Aber dort befindet sich die tollste Abkürzung , die es je gegeben hat. Es heißt Quick Actions. Okay? Es ist im Grunde eine Abkürzung, um zu dieser Schaltfläche hier zu gelangen. Okay? Also lass es uns schließen. Also die schnellen Aktionen. Lass uns gehen. Die, für die ich es am häufigsten benutze, ist ziemlich langweilig. Ich klicke mit Befehl oder Ctrl auf das Wort Ich bin Jenny, ganz oben, und verwende meine Schnellaktionen , also Command K oder Control K auf einem PC Ich werde einen Fall eingeben , okay? Andernfalls dauert es ewig, bis das Menü einen Fall gefunden hat. Aber du kannst es für alles verwenden. Alles in einem der Menüs, füge diese obere Menüleiste hinzu, ich sage Befehl K und ich werde sagen, um 90 Grad nach links drehen. Ich bin mir nicht sicher warum, aber alles ist da drin. Letzter, Befehl K, und lassen Sie uns ihn auch übersetzen. Ich weiß es nicht. Lass uns ins Portugiesische gehen. Da hast du's. Und mach und fertig. Möglicherweise muss nicht jeder übersetzen. Es könnte jetzt aber ein Profi-Feature sein, denk darüber nach. Aber was das betrifft, das ist für alle kostenlos. Wer erinnert sich daran, wie man die Benutzeroberfläche wieder einschaltet? Das ist richtig. Backslash für Befehl oder Steuerung. Dort lehnt es sich zurück. Schrägstrich. In Ordnung. Das nächste ist ein relativ neues Update. Okay, ich werde hier oben mit dem Befehl auf diese Schaltfläche klicken. Es ist eine Komponente eines Masters. Ich habe es nicht geschafft, also habe ich keine Ahnung, wo es ist. Oder erwähnt, ob es eine tolle Abkürzung gibt, fertig? Kurztaste, hin und her schalten. Was ist die Abkürzung Es ist auf einem Mac. Sie halten alle Tasten gedrückt. Befehl, Optionssteuerung. Alle drei sind unten links und drücken K. Auf einem PC ist das etwas anders. Es ist Strg Alt Shift K. Schauen Sie sich Ihre Tastatur an? Es ist schwer, sich das zu merken, aber wenn Sie wie ich viele Komponenten anpassen müssen, wird Ihnen das Tastenkürzel gefallen und Sie werden sich daran gewöhnen. Denken Sie daran, dass es in Ihren Übungsdateien eine Kurzbefehlstabelle geben wird, in die ich all diese Dateien einfüge. Ich liebe es einfach, sehr schnell hin und her wechseln zu können . Sonst noch etwas? Habe noch andere Komponenten, diese hier. Du bist nicht dieser, wenn alle Tasten plus K hin und her schalten Eine weitere Neuerung ist, dass Sie jetzt Stile kopieren und einfügen können. Wir haben hier nur ein paar Stile erstellt. Wenn Sie jedoch eine Menge kostenloser Dokumente erstellt haben, können Sie sie anhängen, kopieren und mehrere auswählen. Ich habe nicht mehrere. Mach mehrere, Dan. Warte dort. Drop Shadow, damit ich zwei dieser Typen auswählen kann. Klicken Sie einfach auf den oberen, halten Sie die Umschalttaste gedrückt , nehmen Sie den unteren, klicken Sie mit der rechten Maustaste darauf und ich kann sagen, dass Sie Stile kopieren , zu einem anderen Dokument wechseln , nichts ausgewählt haben und dann einfach auf normales Einfügen klicken. Befehl VN MAC Control V auf einem PC. Kopieren und Einfügen von Stilen aller Art. Nett. In Ordnung. Lass uns ein paar superschicke Feldarbeiten machen. Ich gehe zurück zu dem Dokument, an dem ich gearbeitet habe. Ich habe keine Ahnung, wo alles ist. Oh, ich habe eine neue Seite erstellt. Da haben wir's. Schauen wir uns alle Felder an. Fangen wir also mit einem Titel an. Du hast sie gegessen? In Ordnung, also habe ich ein bisschen Text hinzugefügt. All diese Felder sind anpassbar , indem Sie einfach darauf klicken und einfach den Aufwärtspfeil verwenden. Ich mag das, wenn ich Schriften auswähle, weil ich mir nicht sicher bin, welche Größe ich hier verwende. Ich halte nur die Pfeiltaste nach oben oder die Pfeiltaste nach unten gedrückt. Klicken Sie in einen von ihnen. Könntest du es auch mit diesem Buchstabenabstand machen? Verwenden Sie Ihren Aufwärtspfeil oder Ihren Abwärtspfeil. Sie können dies für jedes einzelne Feld tun. Das hier, diese Position hier, sagen wir X und Y, hoch und runter, verschiebt es nach links und rechts. Wenn du es in größeren Teilen machen willst, kannst du die Shift-Taste gedrückt halten Es ist der große Schubs oder der große Schubs, und er wird um ein Vielfaches erhöht. Kannst du hier von acht sehen. Das funktioniert für alles. Rotation. Ich wollte hochgehen, es macht keine Acht, aber die Halteschicht macht eins. Sie mit der Pfeiltaste nichts gedrückt halten , wird es in Einsen verschoben. Aber wenn Sie die Umschalttaste gedrückt halten, wird es in einem größeren Teil verschoben. Viele von uns verwenden das Acht-Punkte-Raster. Wenn wir also Dinge wie die Position bewegen , geht es rein, fangen wir um 100 an und klicken hier rein, halten die Umschalttaste gedrückt, Sie können sehen dass es um acht steigt, um acht runter geht. Lassen Sie uns das verschieben , damit es für den Editor etwas einfacher ist. Tut mir leid, Editor, und wenn ich das sage , werde ich gleich wieder herauszoomen und wir gehen zu den Einstellungen. Gehen Sie zu LitleF, gehen Sie zu den Einstellungen und hier unten finden Sie etwas, das als Nudge-Betrag bezeichnet wird Standardmäßig ist es eins. Das ist nur mit Rake oder Eight. Das ist, wenn du Shift gedrückt hältst Das kannst du wieder auf zehn ändern. Das war dort und in vielen anderen Programmen eine Zeit lang die Standardeinstellung . Ich mag acht, weil es wirklich üblich ist Abstand vier ist. Mobil und Web. Es ist dasselbe, wenn Sie nichts ausgewählt haben keines der Felder verwenden Sie können hier hineinklicken und es einfach mit der Ara-Taste bewegen, und die Umschalttaste gedrückt halten, um in größeren Blöcken zu gelangen Acht Pixelblöcke. Sie können auch auf all diese Felder ziehen, insbesondere auf die Felder, in denen sie das Symbol haben Kannst du hier sehen, du kannst das Symbol einfach nach links und rechts ziehen , anstatt deine Tastatur benutzen zu müssen. Sie können es einfach hin und her ziehen. Wenn du eher ein Dragger-Fan bist. Einige von ihnen haben keine Symbole. Dieser tut es. Ich habe keine Layerhöhe, also funktioniert es nicht wirklich. City, zieh das einfach hin und her. Diejenigen, die das nicht tun, können die Option KineMac auf einem PC gedrückt halten und ziehen trotzdem, auch wenn sie kein Symbol haben Wenn Sie solche Dinge gerne tun und es kein Symbol wie dieses gibt, können Sie auf einem PC einfach die Option KineMaoky gedrückt halten Eine meiner Lieblingsbeschäftigungen ist es, es auf den Kopf zu stellen. Nein. Lass uns Ike das Frame-Tool holen. Gehen wir davon aus, dass du etwas von einer Seite zur anderen zeichnest. Lassen Sie es uns ausgiebig machen. Okay. Oh, du kannst sie auch hier benutzen. Schau dir das an. Ich kann mein Ich bin auf HSB benutzen. Es liegt an dir, was du machen willst. Ich bevorzuge HSB. Wenn ich also den Farbton, die Sättigung und den gewünschten Farbton ändern möchte, gehen wir zur Helligkeit über Es ist wirklich hell. Es ist oben rechts. Sie können einfach Ihren Abwärtspfeil benutzen. Du siehst, es kommt runter, runter, weniger hell, weniger hell, weniger hell. Gewinnen Sie größere Stücke, wenn Sie Shift gedrückt halten. Anstatt zu versuchen, in Ordnung, nehmen wir , es ist fast da und du willst es runterholen. Du kannst einfach diesen nehmen und sie direkt runterholen, Du kannst einfach diesen nehmen und sie direkt runterholen anstatt das alte Drag, Diff, Geradeaus, geradeaus zu machen Diff, Geradeaus, geradeaus Der Grund, warum ich das auch machen möchte, ich möchte Ihnen den anderen Feldtrick zeigen, ist, sagen wir, ich muss ihn in drei Teile unterteilen, was schwierig ist Mein Gehirn funktioniert so nicht. Ich werde das Maß finden, damit es eine perfekte Breite hat. Sie können dividieren durch, was Schrägstrich drei ist Da hast du's. Jetzt habe ich drei separate Boxen, geteilt durch drei. Bitteschön. Du kannst alles rechnen. Du kannst sagen, ich möchte, einfach ist, sagen wir, du willst sagen, du willst sagen. Du willst es auf jeder Seite ein bisschen verkleinern. Du willst minus acht von jeder Seite. Also sage ich -16, es ist jetzt ein bisschen kleiner. Acht Pixel auf jeder Seite. Gönnen Sie sich einen kleinen Spielraum. Du kannst dich nicht drehen, dich ständig um 90 Grad und 45 verwirren lassen , so wie ich. Du kannst sagen, richtig, ich will drei, 60/4. In Ordnung, es sind 90, nicht 45. Ordnung. Lass uns über einige der schwer zu findenden Symbole sprechen. Ich werde sie hier auf dem Bildschirm einfügen. Sie werden Smart Symbol genannt, okay? Das sind diejenigen, die im Moment da sind. Ich füge das dem Shortcut-Sheet hinzu. Aber sagen wir, wählen Sie hier einen Pfad. Ich drehe das zurück, wo es bei 12 Grad Null ist. Ich finde das Tippen hier. Man muss sie der Reihe nach eingeben, und sie müssen genauso aussehen wie der obere Teil. Wenn ich also Klammer, C, niedrigeres KC und eine weitere Klammer wähle, erhalte ich sofort das Copyright-Symbol. Sie können sehen, wie das laufen wird, R, es wird durchgehen und mir das eingetragene Markenzeichen geben . Die sind praktisch. Die, die ich am häufigsten benutze, sind Pfeile. Manchmal ist es in der Schrift schwer zu finden und man kann sehen, dass es nur aus einem Strich und mehr als, kleiner als, was auch immer das ist, besteht. Der Abwärtspfeil ist komisch und ist VB. Da hast du's. Da ist ein Abwärtspfeil. Der Aufwärtspfeil ist die Taste, die ich auf meiner Tastatur nie finden kann. Bitte warte. Da ist es auf meiner Tastatur. Ende der Sechs. Der Herausgeber hätte das schnell weitergeleitet, aber das hat lange gedauert. Also muss ich Shift gedrückt halten und dann sechs, sechs und dann die Leertaste. Du musst es danach ein bisschen verschieben, sonst tut es das nicht. Und das letzte ist das Quadrat. Okay? Gehen wir einfach. Eckige Klammern, links und rechts, Kopffreiheit. Oh, sieht so aus, als müsste da ein Leerzeichen dazwischen sein. Ich benutze diesen natürlich nicht. Da hast du's. Also eckige Klammer, Leerzeichen, schließende eckige Klammer. Da hast du's. Nur ein paar der intelligenten Symbole, okay, für alle Schriften. Als Nächstes, kurz nach einer Komponente, wählen Sie all diese aus. Ich wähle Command Option K auf einem Mac. Lassen Sie uns K auf einem PC steuern. Wir haben uns das vorhin angesehen Wenn ich anfange, das herumzuschleppen, will es wirklich in die Dinge hineinspringen Du sagst, das ist cool, aber geh nicht in diesen Rahmen. Geh nicht in diese Komponente hinein. Denken Sie daran, dass Sie darauf klicken, um es zu ziehen Halten Sie dann die Leertaste gedrückt und bewegen Sie Sie werden sehen, dass es dort nicht im Ebenenbedienfeld angezeigt wird. Es wird nicht durch andere Ebenen hindurchgehen und versuchen, Es wird nicht durch andere Ebenen hindurchgehen und versuchen springen und Teil anderer Ebenen zu werden Nett und einfach ist, dass Command One Sie zurück zu Ihrer kleinen Home-Option bringt , es sei denn, Sie sind im Browser Dann bringe ich Sie einfach zurück zum ersten Tab in Ihrem Browser , den Sie geöffnet haben. Wenn du drin bist, funktioniert es in einem Browser, außer dass es einfach zu den verschiedenen Tabs springt Befehl eins, zwei, drei, welche Tabs auch immer in Ihrem Chrome-Browser geöffnet sind, Fiery oder was auch immer Sie in der Figma-App verwenden , sie macht etwas Ähnliches diese Tabs hier oben ansehe, kann ich Befehl eins für die Startseite, Befehl zwei für das Dokument, Befehl Ich kann zwei und drei, zwei und drei wählen. Es bedeutet, Command oder Control auf einem PC gedrückt zu halten und einfach zwischen den verschiedenen geöffneten Tabs hin- und herzuschalten Sie haben eine Registerkarte, die eher bedeutet, dass Sie Komponenten aus einer Bibliothek oder Datei abrufen, aus der Sie ständig abrufen müssen Sie möchten es nicht hier oben wo Sie es in eine Registerkarte umwandeln möchten, Sie können mit der rechten Maustaste klicken und sagen, diese Registerkarte anheften. Sie können sehen, dass da oben einfach dieses kleine Symbol wird, es kleiner macht und es schwieriger ist , es zu schließen. Du kannst es aber schließen. Das funktioniert auch im Browser. Sie können Tabs anheften. Das ist nur ein normaler Chrome-Typ oder eine Safari-Sache. Du kannst sie lösen. Sie können sie auch neu anordnen, indem Sie sie anklicken, gedrückt halten und ziehen Oft öffne ich sie in lustiger Reihenfolge. Du willst nur , dass der, aus dem du ziehst , hier vorne ist. Auch wenn es nicht festgesteckt ist, kannst du es einfach herumziehen. Es ist also am Anfang. Wenn du immer wieder mit denselben Dateien arbeitest und es schwierig ist, jedes Mal herauszufinden, wo sie sich befinden und es schwierig ist, jedes Mal herauszufinden , sagst du, in meinen letzten, sagen wir, es ist diese Limeric-Techno-Version, du kannst sie zur Seitenleiste hinzufügen Es sind Favoriten. Klicke es dort an und du wirst sehen, dass es da ist, Limeric Techno Immer wenn ich ein Dokument öffne, sind da welche drin, die du ständig verwendest Es spielt auch keine Rolle, wo Sie sich in Ihrem Projekt befinden. Wenn Sie sich auf dem Startbildschirm oder im Browser befinden, können Sie jetzt im Browser zu Keep Forgeting wechseln. Sie können zu dem Fenster wechseln, auf dem Zurück zu Dateien steht Sie kehren zum Startbildschirm zurück, anstatt auf den Startbildschirm zu klicken Lass es uns schließen. Es spielt keine Rolle, wo du bist. Sieh dir diese drei kleinen Punkte an. Diese sind praktisch, haben Sie einfach all Ihre kürzlich geschlossenen Dateien zur Hand. Anstatt zu den letzten zurückkehren zu müssen. Ich bin mir nicht sicher, ob das ein Spareffekt ist, aber so ist es Eine weitere Möglichkeit ist, wenn Sie mit sehr großen Dateien oder einem sehr alten Computer arbeiten , Sie können herausfinden, warum der Computer langsam läuft Sie müssen sich in dem fraglichen Dokument befinden. Das läuft vielleicht etwas langsam und du kannst zum F gehen, runtergehen, um es anzusehen, und da drüben erscheint ein sogenannter Speicherverbrauch . Sie können sehen, dass es 2% meines Speichers beansprucht, was nicht viel ist, also ist es in Ordnung. Deiner ist vielleicht am Ende. Und wenn das der Fall ist, können Sie auf Managed Memory klicken und herausfinden , was Ihnen das Problem tatsächlich verursacht Seiteninhalt macht die meiste Arbeit und importierte Komponenten von anderen Orten erledigen ein bisschen davon. Das gibt Ihnen einige Tipps. Sie können dies auch einschalten. Ich sage, es ist der Seiteninhalt , der wirklich schlecht läuft. Es sind bis zu 80% und alles ist ein bisschen träge. Sie können hier sehen, dass es für jede Ebene aktiviert wird Kannst du sehen, welche hier kleine Punkte hat, keine meiner Ebenen macht irgendwas. Du kannst diesen Rahmen sehen. Es hat 0,2%, und Sie können irgendwie herausfinden was Ihre Probleme verursachen könnte Oft können es SVGs sein, sehr komplexe SVGs, die Sie importiert haben Sie haben sie gerade von einer kostenlosen Website bekommen und es stellt sich heraus, dass sie wirklich schlecht gemacht sind Da hast du's. Sie können den Vorschlag hier sehen. Sie können die SVGs abflachen. Oder es könnte bedeuten, dass Sie einige Seiten herausziehen und zwei Seiten daraus machen und mehr als ein Dokument Meine Maschinen laufen einwandfrei, also lassen Sie uns das schließen. Das Letzte, bevor ich Ihnen die Tastatur zeige ist, dass Sie dieses Panel tatsächlich oft herausziehen können, besonders wenn Sie hier ziemlich komplexe Ebenen haben. Sie können es direkt herausziehen, damit Sie sie etwas besser sehen können. Okay. Aber auch in Ihrem Assets-Menü, sobald das ein bisschen verrückt wird, werde ich mir die Assets für diese Datei ansehen. habe nicht viel, aber du kannst anfangen danach zu suchen. Sie können mit der Suche beginnen. Hier ist ein Symbol, von dem ich weiß, wie es heißt, weil ich es wirklich gut benannt habe. Es heißt Export und du kannst hier suchen. Und es ist dieser hier, es ist dieser Typ hier. Funktioniert nur, wenn Sie all Ihre Vermögenswerte benannt haben. Sie werden feststellen, dass es in diesem Bild viele Komponenten gibt, es gibt viel Frame 64, nicht gut. Wenn sie groß werden, können Sie hier reingehen und die Filterung anpassen, indem Sie beispielsweise die Listen anzeigen lassen, damit Sie leichter herausfinden können die Listen anzeigen lassen, damit , wo sich alles befindet. Diese Suche funktioniert auch unter Datei. Sie klicken auf Suchen und sagen wir, ich möchte die Sterne, von denen ich weiß, dass sie hier drin sind. Da sind sie alle. Sie sind überall in meinem Dokument. Aber ich kann sie jetzt alle einstellen, oder ich kann sie anklicken und sagen, geh hier hin. Aber ich kann anfangen, auf all diese Sterne zu klicken. Wow, es wurden eine Menge Sterne verwendet. Ich kann sie alle auswählen, löschen, entfernen. Sie sind alle da unten. Wenn deine Schichten sehr lang werden, ist das einfach. Oder wenn du, sagen wir, diesen hier finden musst, kann ich zur Suche gehen und ich kann den Text mit dem Wiz finden, dann weiß ich nicht einmal, was das bedeutet Oder nicht. Sie können auch in Ihrem Laos-Panel suchen Ich muss daran denken, es auszuschalten, indem Sie auf das Kreuz drücken. Sonst werdet ihr es sein. Das Seiten-Panel, okay, kann größer oder kleiner gemacht werden, okay. Standardmäßig erhalten Sie diesen wirklich winzigen kleinen Steckplatz , der etwas knifflig sein kann. Manchmal möchte man sie auch nicht alle sehen . Du kannst es also kleiner machen. Okay, schauen wir uns die coole Figma-Tastatur an. In Ordnung. Also ist es das hier. Okay? Das ist die Arbeit lauter, okay, Figma Creator Micro Ich glaube, so nennen sie es. Und alles , was es ist, sind einfach super tolle Abkürzungen. Also du kannst hier sehen, du kannst es so programmieren, dass es alles macht, okay? Also müssen wir scrollen. Zoomen, okay? Und du hast automatische Abkürzungen für Kreditkomponente, Skalierung bis, ich liebe es Ordnung, das ist Komponente. Sie können programmieren, dass sie alles machen Ich benutze sie nicht alle, aber es ist einfach praktisch. Okay, vor allem, wenn du die ganze Zeit Figma benutzt , um das anzuschließen Auch ein wunderschönes Stück Schreibtischkunst. Es kommt mit einer Reihe verschiedener Knöpfe. Okay, du kannst es also irgendwie dazu bringen, das zu tun, was du willst. Also, eigentlich haben nicht alle von Ihnen mein Büro gesehen, oder? So sieht es aus. So siehst du mich normalerweise mit dieser Kamera an. Okay? Aber das ist mein Büro. Ähm, ja, drei D-Drucker und so. Ja, das umgebaute Büro oben war nur ein kleiner Raum über meiner Garage, den wir zu diesem umgebaut haben . Ist wirklich gut rausgekommen. Ordnung, rein in den Computer. In Ordnung. In diesem Fall möchte ich dir zeigen , dass Figma One nicht mehr hergestellt wird Es war wie ein zeitlich begrenzter Lauf mit Figma, eine Art Promo Ich habe den ersten Start verpasst. Sie waren ziemlich schnell ausverkauft. Ich habe einen bei Ebay bekommen, weil ich ein Nerd bin und den offiziellen von Figma haben wollte Aber es ist eigentlich eine Tastatur, die diese Firma Wlouder Dot CC herstellt. Besorgen Sie sich einen Scheck Der von Figma erstellte Micro ist möglicherweise verfügbar, jetzt ausverkauft. Okay, aber sie haben nur das reguläre Creative Micro, das derzeit ausverkauft ist Aber wir kommen wieder. Es war nicht neulich. Es ist also genau dasselbe. Es ist einfach nicht in den Figma-Farben. Wie auch immer, brauchst du es für die Arbeit in Figma? Nein, es ist Schreibtischschmuck , den ich wirklich wollte. Also habe ich mehr als das bezahlt, was es kostet, nur um den offiziellen Figma-Schmuck zu haben, weil ich Angst verpassen. Also gut. Das war lang. Wir haben viele, viele gute Abkürzungen behandelt. Ich hoffe, sie waren nützlich. Lassen Sie uns im nächsten Video mehr über den Arbeitsablauf erfahren . Danke, dass du hier geblieben bist. 12. Wie verwende ich erweiterte Kopier-, Einfügen- und Auswahltricks in Figma?: Kehren wir zu dem Dokument zurück , an dem wir zuvor mit unseren verschiedenen Genres gearbeitet zuvor mit unseren verschiedenen Genres Und ich möchte , dass du einfach einen Rahmen mit etwas Text darin erstellst . Geben Sie den Namen Ihrer Art von App ein. Okay, meins ist Limerick Techno. Ich habe eine helle Version und eine dunkle Version gemacht. An diesen Rahmen mit Text darin ist nichts Besonderes . Okay, also lass uns ein weiteres iPhone 16 machen. Okay, also ich werde, lass uns das einfach duplizieren. Ich werde auf den Rahmen klicken. Es ist Command D auf einem Mac, Control D auf einem PC. Können wir ein Duplikat bekommen? Wir könnten sagen, lassen Sie uns die erste Auswahl treffen. Klicken wir darauf und ich werde sagen, da ist ein seltsames Ding drin. Ich benutze überraschenderweise viel. Gehe zu Bearbeiten. Das ist nicht sehr kompliziert, also umgehen wir es, es nicht zu benutzen. Aber wenn wir zur Bearbeitung gehen und Inverse auswählen, was Command Shift A auf einem Mac ist, Control Shift A auf einem PC, und es wählt einfach alles außer , und Sie können es löschen Frag mich nicht warum, aber am Ende benutze ich das oft. Und das andere und wahrscheinlich wichtigste Feature ist, sagen wir, wir wollen das zur dunklen Version machen , wir wollen sie austauschen. Wir könnten uns das schnappen und es kopieren und hier draufsetzen und es einfügen und anordnen und alles entfernen. Was wirklich gut ist, ist, wenn du das kopierst, auswählst und es gibt eine Option hier, die auf Bearbeiten geht , und da ist eine, die sagt, einfügen, um zu ersetzen. Es erfolgt ein Einfügen über die Auswahl. Sie können es überkleben. Der andere ist noch darunter. Ich weiß nicht, warum du den brauchen würdest. Aber ich verwende dieses, Edit Paste to Replace, das ist Command Shift R auf einem Mac, Strg Shift, R auf einem PC. Das ist wirklich praktisch, und es wird praktisch. Nehmen wir an, ich verwende den Stern überall in meinem Dokument, ich halte die Optionstaste gedrückt, während ich ziehe , oder die alte Taste auf einem PC, um es zu duplizieren Okay, nehmen wir an, ich möchte, dass es dadurch ersetzt wird, also kann ich es kopieren und ich verwende meine normale Kopiertaste, ich werde dich nehmen und ich werde Shift gedrückt halten und ich werde dich holen, und ich werde dich holen, du kannst genau das Gleiche tun , einfügen, um zu ersetzen. Kennt jemand die Abkürzung? Zu viele Abkürzungen, Dan. Es ist Command Shift R oder Control Shift R auf einem PC. Oder gehe zu Bearbeiten, es ist auch dort oben. Ich ersetzt einfach all diese . Das kann praktisch sein. Zum Ersetzen einfügen. Nun, das kratzt ein bisschen am Boden des Fasses Nehmen wir an, ich habe diesen Stern hier und ich kopiere ihn und sagen wir , ich gehe hierher, es könnte Text sein, es könnte alles sein Du zoomst einfach raus und arbeitest hier drüben im Niemandsland. Lass mich die Kommentare wissen. Wer arbeitet aus irgendeinem Grund hier drüben. Wenn ich standardmäßig Einfügen hätte, es wieder da sein, wo es war, es gibt zwei davon, direkt übereinander und du sagst, A, ich wollte es hier haben und es gibt keine wirkliche Möglichkeit es hierher zu bekommen, außer es einzufügen und zu verschieben Aber was Sie tun können, ist, ganz oben, eine dieser Personen zu sagen, und Sie können mit der rechten Maustaste klicken und sagen, fügen Sie es bitte hier Da ist mein kleiner Stern. Ungefähr 10% von Ihnen würden sagen : Oh, das scheint gut zu sein. Für den Rest von euch, lasst uns weitermachen. Eine letzte Sache, die ich dir zeigen wollte, war, dass wir das schon einmal gemacht haben. Ich möchte nur hervorheben , dass ich eine Menge neuer Rahmen habe. Ich werde das Frame-Tool drücken. Ich werde sagen, gönnen wir uns einen von denen. Gehen wir, Command DDD, ich habe jede Menge davon. Wenn ich das auf allen haben will, dann kann ich sagen, kopieren, auf dich klicken, Shift gedrückt halten und einfach alle Frame-Namen nehmen alle Frame-Namen und dann einfach die normale alte Paste drücken Dadurch wird es auf einmal wieder an die Position auf dem Rahmen gebracht , wie bei einem Mehrfacheinfügevorgang. Es gibt nichts Besonderes , was du tun musst. Einfach kopieren und einfügen, aber beim Einfügen müssen viele Dinge ausgewählt werden. Fantastisch. Wie ist das gelaufen? Lass mich die Kommentare wissen. Habe ich das Kopieren und Einfügen sexy gemacht? Du hast es wahrscheinlich sowieso gleich am Anfang übersprungen. Für diejenigen, die hier rumgehangen haben, danke. Mich lustig machen. Gehen wir zum nächsten Video 13. Rahmentipps und Tricks für effektives Arbeiten mit Figma-Rahmen: Genau da. In diesem Video lernen wir den gesamten Rahmen, die Tipps und Tricks kennen. Ja, ein ganzes Video, das mit Frames arbeitet. Sie sind ziemlich nützlich. Lass uns reinspringen. Okay, der erste hat eigentlich nichts mit Frames zu tun. Sehen Sie dieses kleine Symbol hier. Wenn deine Rahmen alle geöffnet sind und sie alle nach unten ausgerichtet sind und sie einfach richtig chaotisch sind Okay, klicken Sie darauf. Sie räumen alle auf. Und wenn wir mein Bild Nummer acht sagen wollen, doppelklicken Sie einfach auf das Symbol hier und ich springe direkt dorthin Okay? Sie können sich in diesem Dokument zurechtfinden solange Sie Ihre Frames benannt haben. Okay, es ist nett und einfach. Noch besser ist es, sich das anzusehen. Nehmen wir an, ich bin hier auf dieser ersten Seite. Ich sollte meine Seiten besser benennen. Klicken Sie auf Ihrer Tastatur rein in in in. In gehen wir einfach zum nächsten Frame. Ich zoome hinein. Das ist einfach die praktische Art, Dokumente durchzuarbeiten. Schalten Sie ein, wir gehen rückwärts. Nein, um vorwärts zu gehen Das ist November, mein Akzent, und dann wechseln wir für November, um rückwärts zu gehen Es gibt noch einen, den ich wahrscheinlich häufiger benutze. Die Tinte zoomt heran. Also, wenn ich rauszoome und die Tinte rein hätte, richtig. Ich bin beim nächsten Bild, aber ich habe wirklich hineingezoomt. Okay? Die Taste, die mir besser gefällt, ist die Home- und Endtaste. Nicht alle Tastaturen haben sie oder manchmal muss man eine spezielle Taste gedrückt halten, um sie zu bekommen, wenn man auf einem Laptop ist, aber ich bin auf meiner großen Tastatur Sie können wahrscheinlich hören, wie es wegklopft. Zuhause ist rückwärts und END geht vorwärts, vorwärts und rückwärts Genau das Gleiche , außer dass beim Heranzoomen und bei Home dieselbe Zoomstufe beibehalten wird und sich nur mit verschiedenen Frames bewegt Das ist ein guter. Sie können die Größe eines Rahmens ändern. Nehmen wir an, ich erstelle hier oben einen Rahmen, in dem mein gesamtes Navi enthalten ist Ich schnappe mir euch alle. Ich werde es hier hinstellen. Ich brauche den nicht. Da war ein Stern drin, da bist du da drüben . Da drüben ist es. Ich grüße dich, dieser Rahmen ist zu groß. Was Sie tun können, ist, dass es hier eine kleine Option gibt. Es gibt eine Abkürzung. Es sind alle Tasten plus R, benutze es nicht genug, aber es ist eine großartige Möglichkeit , einfach den äußeren Rahmen einzuwickeln und ihn sehr nah an den Dingen zu glätten , die sich im Rahmen befinden Ordnung. Den nächsten haben wir schon einmal gemacht, aber in einem anderen Kontext. Fügen wir ein Bild in Ihre Übungsdateien ein, eines mit dem Namen Bild von vier. Es ist eine Vektordatei und wir werden sie hier einfügen. Du willst nah am Rand sein. Aber wir wollen hinten und wir wollen es einfach ausschalten und dann springt es vom Rahmen Du sagst, nein, ich will nur , während du aus dem Bild springst Du kannst es beim Ziehen, wir haben das schon früher gemacht, daran denken, es starten, klicken und gedrückt halten, die Leertaste gedrückt halten, und das bedeutet, dass du es bis hierher ziehen kannst Es ist immer noch auf diesem iPhone 16-Rahmen. Sie können es hier hineinziehen und es nur am Rand verwenden . Dadurch wird verhindert, dass es in andere Frames und Komponenten springt . Wir haben es schon einmal gemacht, als wir Dinge wie den Stern einfach herumgezogen haben, aber es ist praktisch, wenn Sie versuchen, Dinge an den Rand zu bringen , die Sie auf diesem Frame haben möchten und nicht einfach herunterspringen möchten Da hast du's. Da schieb ich meins rein. Und ich werde es nach hinten schicken. Die Abkürzung, um es nach hinten zu schicken sind die eckigen Klammern. Es ist neben dem PK. Ich schicke meins mit der ersten eckigen Klammer nach hinten . In Ordnung. Eine weitere coole Sache mit Rahmen ist, alles im Gliederungsmodus zu sehen. Es ist Command Shift O oder Control Shift O auf einem PC. Es zeigt Ihnen alles, aufgeteilt in Vektoren. Das kann sehr praktisch sein besonders bei diesem Stern. Denken Sie daran, er hat nur rumgehangen, passen Sie auf, ob ich rauszoome. Das kannst du sehen, war ein Typ da, er ist da? Nur ein bisschen leichter zu erkennen als das. Stern weg, Stern da. Er war winzig, winzig Wenn Sie beispielsweise aus Illustrator oder einem anderen Vektor-Zeichenprogramm kommen , verwenden Sie es ziemlich oft Vor allem, wenn Sie mit einem Stiftwerkzeug zeichnen und Dinge erstellen Ich finde es einfach praktisch für die Rahmen, besonders wenn Rahmen vielleicht ähnliche Farben haben. Du kannst die Konturen sehen und du kannst hier einfach in diesem Modus arbeiten. Sie können Dinge vielleicht etwas einfacher zum Fotografieren bringen, weil Sie sie besser sehen können. Wenn Sie aus Illustrator oder Adobe Illustrator kommen , funktioniert der Befehl Y immer noch Ich weiß nicht warum. Wenn du daran gewöhnt bist. Die offizielle Erfindung ist Command Shift O oder Control Shift O. Wenn sich einige der Tastenkombinationen geändert haben, tun sie es Sie versuchen immer, sie besser zu machen. Sie halten sich nie an sie. Sie können auf das Fragezeichen klicken und zu den Tastenkombinationen gehen und durcharbeiten, um zu sehen, ob, wenn Dan es gesagt hat, wo es unter der Ansicht ist, Konturen anzeigen Ja, es ist immer noch Command Shift O auf einem Mac. Vielleicht sind sie einfach anders als das, was ich auf dem PC sage Sie werden sie hier aufgelistet sehen. Blau bedeutet, dass du sie benutzt hast. Ich habe die Tastenkombinationen der Lineale nicht mehr verwendet, seit ich dieses Dokument zurückgesetzt habe, also ist es einfach. Das, meine Freunde, sind all meine Rahmen, Tipps und Tricks. Wenn du welche hast, würde ich sie gerne alle reinnehmen. Also lass es mich in den Kommentaren wissen, wenn du sagst, dass du das nicht erwähnt hast. Das ist ein cooler neuer. Schau dir für dich die Kommentare an. Da sind vielleicht ein paar coole neue drin. Da ist es. Ich werde dich im nächsten Video sehen. 14. Automatische Layoutaktualisierung mit Problemlösungen: Hallo, alle zusammen. Wir werden das Audit überarbeiten, um herauszufinden, warum sie gut sind, wie sie funktionieren und welche Komponenten sie enthalten, warum sie gut sind und wie sie funktionieren Möglicherweise wissen Sie das bereits, sodass Sie dieses Video überspringen können Was wir tun werden, ist, eine nette kleine Überarbeitung vorzunehmen, nett und schnell. Und dann werde ich ewig damit verbringen. Deshalb geht dieses Video so lange all die Probleme ein, auf die die Leute stoßen, besonders wenn Sie ein bisschen neuer in Figma Wenn du hier bleibst, machen wir die kurze Demo, und dann zeige ich dir die unzähligen Möglichkeiten sich meine Schüler verirren und wie man sie umgehen Wenn Sie wissen, was ein Lout und eine Komponente ist und Sie nie wirklich Probleme hatten oder zumindest wissen, wie man sie behebt, fahren Sie mit den neuen Aber lassen Sie uns vorerst einsteigen, alle auf den gleichen Stand bringen und anfangen, Teile und Komponenten zu finden und kaputt zu machen. Hinein. Ordnung. Lassen Sie uns zunächst an dem Projekt von vorhin arbeiten, wo wir unsere Genres hatten. Lassen Sie uns ein paar Dinge tun, um Ordnung zu Stellen wir sicher, dass wir hier oben auf den Namen doppelklicken und ihm einen Namen geben Okay? Meins heißt Limerick Techno V One Okay? Und hier oben haben wir das iPhone 16. Das einzige Problem, das Ihnen vielleicht aufgefallen ist, ist, wenn Sie es duplizieren oben auswählen, Shift D drücken. Okay, nicht Shifty, rückgängig machen In den Inspektormodus gegangen. Lassen Sie uns den Inspektionsmodus indem wir zu diesem Thema gehen. Du könntest es tun. Ich lasse das im Kurs stehen, ich möchte, dass dieser Name ausgewählt ist , und lassen wir das Kommando D für Duplizieren wählen. Sie werden feststellen, dass hier oben steht: Oh, schau, iPhone 17, wir sind in die Zukunft gegangen. Nein, es versucht nur, schlau zu sein. Es läuft auf iPhone 16, 17. Wenn ich es noch einmal mache, wird Befehl D 18 gesetzt. Lassen Sie uns das loswerden. Es ist praktisch, aber nicht für das iPhone. Kann praktisch sein, aber nicht jetzt. Nennen wir dieses eine Genre. Jetzt duplizieren wir es Member Command oder Control D auf einem PC. Doppelklicken wir auf diesen und nennen wir ihn. Startseite. Ich kenne es rückwärts. Lassen Sie uns das alles loswerden Lassen Sie uns Auto Out ausbauen. Ich werde auch die Hintergrundfarbe ändern. Ich habe vorhin mit uns rumgespielt, um etwas cremefarbenes zu verwenden. In Ordnung. Lass uns die schnelle Version eines Autolou machen. Lassen Sie uns ein paar Icons einbauen. Wir drücken Command Shift K , um eine Menge Sachen reinzubringen. Ich werde sagen, ihr alle, kommt rein, klickt auf Öffnen und ich klicke auf Einfügen A. Ich werde sie alle hierher verschieben , nur um mir etwas Platz zu verschaffen Ich nehme mein Skalierungswerkzeug, das K-Werkzeug, und ich möchte, dass sie alle eine Höhe von etwa 32 Wenn ich ungefähr 32 sage. Um ein bisschen hineinzuzoomen. Ich werde sie herausziehen, damit ich sie alle sehen kann. Es spielt keine Rolle, in welcher Reihenfolge sie sich gerade befinden Wählen Sie alle aus und sagen Shift A, schon sind Sie in der richtigen Reihenfolge. Zoomen Sie heraus und lassen Sie es laufen. Lass es uns hier anziehen. Lass uns den Boden runtergehen. Ich würde sagen, ich werde es sogar bis hierher schleppen. Ich will nicht, dass es skaliert. Deshalb arbeite ich im Skalierungstool. Ich gehe zum V-Tool, um zum Auswahlwerkzeug zurückzukehren , ohne es zu skalieren. Ich werde dich überall hinschleppen, überall hin, und ich werde dort, wo ich gesessen habe, ein paar Sachen machen. Ich will es in der Mitte haben und ich kann mit der Lücke zwischen ihnen herumspielen . Okay. Und so, meine Freunde, macht man ein Autolayout. Das Coole daran ist, lassen Sie uns daraus eine Komponente machen. Es ist also wiederverwendbar. Sie können entweder auf die Schaltfläche hier oben klicken oder die Tastenkombination verwenden, die auf einem Mac Befehlsoption K und auf einem PC Strg Alt K lautet . Es ist eine Komponente. Ich werde die ganze Seite duplizieren , Command oder Control D. Diese Seite wird M sein . Anstatt dass dieser Frame iPhone 16 ist, werde ich das iPhone P max machen, das große. Das Coole daran ist, dass es ein Autolayout ist Ich kann Ju Doc sehen und es nach unten bewegen, ich spiele vielleicht mit dem Abstand oder der Lücke herum Es ist wirklich einfach, responsiv zu sein. Die andere coole Sache ist, dass ich dich sagen kann, mein Freund, sagen wir mal diese Homepage hier. Die Leute haben sich noch nicht angemeldet, daher sollten sie ihre Ticketoption nicht sehen können Ich kann darauf klicken und das kann ich in meiner Datei unter meinen Ebenen Schauen wir uns diesen Typen an und ich kann sagen, dass du mein Freund bist. Welches will ich, das Ticket? Ich kann den Augapfel ausschalten. Aber hier drüben kann ich dir sagen, ich will den Augapfel Oh, sieh uns an. Reaktionsschnell. Ich kann hier reinklicken. Eigentlich ist das meine Instanz. Dies sind die Hauptkomponenten. Zu dieser Hauptkomponente kann ich sagen, dass ich eigentlich möchte, dass die Suche hier abgeschlossen ist. Sie können sehen, wie Sie die Reihenfolge umgehen. Seien es die Komponenten, diese Dinge sind miteinander verknüpft, die Lupe ist hier gelandet. Das Ticket ist wieder da. Das ist die Stärke von Auto Loos Hoffentlich ist das eine gute kleine Auffrischung zu Auto Outs. Wir haben im Grundlagen-Kurs viel gemacht und Sie sind vielleicht schon fortgeschrittener Figma-Benutzer und können direkt zum Fortgeschrittenenkurs übergehen Lassen Sie uns auf alle Probleme eingehen und darauf, wie man sie behebt. Ich werde es tun, weil ich durch das, was ich gerade getan habe, unbewusst viele Fehler vermieden Aber ich weiß, wenn ich Leute unterrichte, machen sie alle Fehler , die du sein könntest Bleib hier. Lassen Sie alle Probleme und Lösungen eingehen. Ordnung, ich habe es einfach irgendwie rückgängig gemacht, bis ich zurückkomme, bevor ich die Symbole aufsetze Also lasst uns anfangen und auf all die Probleme stoßen. Also, wenn ich meine Icons einfüge, gibt es zwei verschiedene Möglichkeiten. Ich könnte den Befehl Shift K benutzen, um sie alle einzufügen, und das stapelt sie quasi alle nach oben, besonders wenn ich auf Alle platzieren drücke Sie sind alle da drin, genau das habe ich im ersten Teil der Naht gemacht und alles hat Aber wenn du wie ich bist und viele deiner Übungsdateien aus Symbolen machst , schnappst du dir einfach all diese und gehst, yo und fügst deine eigenen Soundeffekte hinzu und ziehst sie einfach weiter Sie kommen auf eine andere Art und Weise. Sie sagen, ja, das ist kein Problem, außer wenn sie alle ausgewählt sind und Sie das Kt als Maßstab wählen und sagen können, ich möchte eigentlich, dass die Höhe 32 ist. Du sagst, das ist perfekt, fertig. Eigentlich hat es es nicht getan. Am Ende haben Sie aus dieser ganzen Gruppe 32 geworden. Siehst du? Diese ganze Höhe beträgt 32. Dieses eine Herzsymbol ist erst 15 Jahre alt. Das zu umgehen, ist einfach. Du hast nur diesen ausgewählt und sagst, du bist 32 groß. Das bringt mich zu dem anderen Problem. Ist das, schauen wir uns dieses Herz an. Hier ist es in einem Rahmen, was cool ist. Hier drin ist ein Vektor. Was die Leute tun können, ist versehentlich auf den Vektor zu klicken, nicht auf den übergeordneten Frame. Kannst du sehen, dass sie anders sind? Der Rahmen, um den es herum ist, und das Ding, das sich darin befindet, wenn ich das Ding darin auswähle und ich gehe, bist du 32 groß. Lo macht komische Sachen. Kannst du herausfinden, was los ist? Es gibt einen Rahmen, aber das Herz darin wurde skaliert, aber nicht der Rahmen, also ist es, als würde man ihn abschneiden Es heißt rückgängig machen, rückgängig machen. Das können Probleme sein , auf die Leute versehentlich stoßen . Sie können es hier im Vorstand machen. Sie können sehen, dass ich den Vektor gesammelt habe, nicht den übergeordneten Frame. In Ordnung. Löse ein paar Probleme. Vielleicht sind Sie schon auf sie gestoßen Der nächste ist, dass sich die Leute manchmal solche SVGs schnappen, und ich werde einfach eine kleine Auswahl dazu Wir werden feststellen, dass ich die internen Teile von all dem ausgewählt habe Achte auf die Vektoren, nicht auf den übergeordneten Frame. Wenn ich das jetzt wegziehe, schau, ziehe die internen Vektoren, nicht diese Am Ende haben Sie diese Bilder, die sie selbst hinterlassen haben. Es ist so, dass die Welt nicht explodieren wird wenn man Vektoren hat und versucht, sie zu skalieren . Das ist in Ordnung Aber es ist sehr verbreitet und Sie haben viel mehr Flexibilität, wenn sich Vektoren innerhalb von Frames befinden. Seien Sie vorsichtig, wenn Sie auswählen, entweder machen Sie eine wirklich große Auswahl, sie wird direkt nach außen verschoben und Sie können sehen, dass ich alles ausgewählt habe, oder Sie können die Umschalttaste drücken , wenn Sie die Namen sehen können. Ich kann sie alle auswählen oder in Ihrem Ebenen-Panel hier die obere Umschalttaste drücken und dann die untere auswählen. Es ist nicht wirklich wichtig. Wenn du Probleme findest und denkst: Das ist komisch, es ist wahrscheinlich, dass du den Vektor ausgewählt hast und nicht den Rahmen. Am Ende haben Sie selbst einen Vektor und haben keine Ahnung, wo sein Rahmen geblieben ist, oder er hat einfach keinen mitgebracht. Die Datei, die Sie geerbt haben, hatte ihn nicht, Sie können ihn einfach rahmen. Sie können sagen, wir klicken mit der rechten Maustaste darauf und sagen wir, Rahmenauswahl. Er muss jetzt rahmen. Hervorragend. In Ordnung. Lass uns wieder rein gehen. In Ordnung. Und was ich tun möchte, ist, ich denke, das sind vorerst die Probleme. Es wird noch mehr kommen. Ich werde einen hinterhältigen Trick machen. Anstatt sie alle einzeln zu machen, werde ich sagen, dass Sie übereinander ausgerichtet sind Denken Sie daran, sie nicht übereinander zu ziehen. Wenn ich ihn schleppe, wo wird er dann hingehen? Er wird in das Herz gehen. Du kannst die Leertaste gedrückt halten. Das haben wir vorher gelernt. Es wird einfach oben drauf sitzen. Aber es ist einfach, sie alle zu ergattern, eine große Auswahl oben drauf, und Sie. Jetzt werde ich sagen, dass ich möchte die Größe all dieser Typen 32 ist. Nett. Achten Sie darauf, dass ich die Abmessungen der Rahmen verwende, nicht die Skala. Ich will die Waage hier drüben haben. Reifen, 32. Ich tue so, als hätte ich das mit Absicht hinzugefügt, aber nein, ich habe es nur vermasselt. Das nächste Problem ist, dass Sie, wenn wir das in Automatische Ausgabe umwandeln, Okay, cool, wählen Sie alle aus, haben die große Auswahl getroffen, wie Dan gesagt hat, und dann haben Sie Shift A gewählt. In der früheren Version waren sie alle gut aufeinander abgestimmt. Okay? Das liegt daran, dass ich Dinge getan habe , die wussten, wie man solche Probleme vermeidet. Okay? Figma versucht jetzt standardmäßig, für dich zu denken, und das macht im Moment einen furchtbaren Job Das könnte funktionieren. Wenn es funktioniert, bist du fertig. Wenn nicht und du dieses Problem hast, was passiert ist, ist, dass dieses Ding auf Autoout umgestellt wurde, okay? Also schau, es heißt Frame Ten. Nennen wir diesen einen Nav Forward Slash, was ist dieser eine Nav-Bottom Okay. Und da drinnen, lass uns das alles schließen, nur damit es aufgeräumt ist Du hast einen Frame, ist wenig Hash, ein anderer Frame, kleiner Hash Dann hast du diesen Typen Hash in einer kleinen Zielscheibe. Diese Typen hier ignorieren den Autoausgang. Dieser Typ, der zuhört, das Herz, die Lupe, hört zu, und sie fließen nebeneinander weiter Dieser hier, Moody Teenager, ignoriert dich. Das ist diese kleine Ikone hier. Sie werden sie in vielen Dokumenten sehen. Andere Leute werden sie machen. Es bedeutet nur, dass es immer noch im Autolayout ist, aber es fließt nicht wie bei einem Warum? Gründe. Wir machen es später. Wir werden uns etwas ansehen, das als absolute Positionierung bezeichnet wird. Aber im Moment musst du sagen, dass du damit aufhörst, okay? Ich will, dass du erwachsen wirst und aufhörst , launisch zu sein. Wenn Sie Auto Out ignorieren, schalten Sie das aus. Schau, das Ticket fließt jetzt einfach mit. Es gibt nur noch eine weitere Person, den Icon-Benutzer. Du ignorierst uns nicht mehr. Ordnung. Sie kommen alle gut voran. Die andere Sache , die passieren kann, ist, wenn Sie auf den Rahmen klicken, werden Sie feststellen, dass Autolayout anderes hat, es versucht zu erraten Meinst du horizontal? Die meiste Zeit wird dort vermutet. Manchmal geht es so, Dada, lass uns zurück zur Horizontalen gehen und rauszoomen Ich denke, das sind die Probleme, auf die wir stoßen werden. Eine Sache, die wir tun müssen , bevor wir weitermachen, ist diesen Rahmen zu nehmen und ihn herauszuziehen. Lassen Sie uns die Symbole, die sich darin befinden, in Komponenten umwandeln. Warum machen wir das? Weil das Herz , wir wollen nicht viele Kopien des Herzens haben. Wir wollen ein Herz, das oft benutzt wird und das wir kontrollieren können. Lassen Sie uns also all diese auswählen. Ich möchte, dass ihr alle Komponenten seid. Ich möchte sie nicht zu einer Komponente machen. Kannst du eine riesige Komponente sehen? Ich möchte, dass sie alle hier unten auflisten und mehrere Komponenten erstellen. Ich habe ein Herz, eine Lupe, ein Ticket und einen Benutzer. Lassen Sie uns sie ins Spiel bringen und erklären, warum Komponenten so gut sind Sie wissen es wahrscheinlich schon. Lass uns das hier unten durchgehen lassen. Lass uns das hier rausziehen, das hier raus. Lassen Sie uns die Ausrichtung in der Mitte platzieren und ziehen wir die Lücke nach oben. Sie können die Lücke auf Automatisch setzen, aber sie reicht bis zum Rand. Ich will das runterholen. Ich möchte das auf 50 reduzieren. Eigentlich sollte das Alignment mittig sein. Wenn ich heranzoome, kannst du damit auf der Zeichenfläche herumspielen Kannst du sehen, ob du eine Lücke hast, die nicht auf Auto eingestellt ist? Jede andere Zahl kannst du herausziehen, während du hier unten bist. Wir können das auf Auto setzen und links und rechts etwas Abstand hinzufügen, nur damit es das ist, was wir tun sollen? Lass uns 32 machen Fügen wir es dem größeren Dokument hinzu. Lass uns gehen für. Lass uns sie duplizieren: Command oder Control D. Du wirst der Rahmen des Pmax sein Es ist also schön und groß. Das Coole daran ist jetzt, dass wir, weil es ein Autolo ist, diesen schönen Abstand eingerichtet haben, Shi Sie können sehen, dass wir es für ein anderes Gerät größer gemacht haben, und alles läuft gut Okay? Der Grund, warum wir diese Symbole gemacht haben, ist unsere Komponente , damit wir darauf eingehen und sagen können, richtig. Das ist meine Hauptkomponente. Ich kann sehen, dass es hier ein komisches kleines Symbol hat, nicht diese Version hier unten. Wo ist er? Doppelklicken Sie auf ihn. Siehst du den Diamanten, das ist das normale Beispiel. Lass uns rüber gehen. Gehen wir und doppelklicken, doppelklicken, doppelklicken und anfangen, mit ihm herumzualbern, geben wir ihm verrückte Koteletten Das sind sowieso keine verrückten Koteletten. Aber weil Sie mit dem Master, der Verkleinerung oder der Hauptkomponente herumgespielt haben , können Sie sehen, dass auch das angepasst wird Wenn wir diese nicht in mehrere Komponenten konvertiert hätten, wäre das nicht aktualisiert worden und wir müssten es erneut aktualisieren Ordnung, meine Freunde, das war ein langes Video, und ich hoffe, es bringt uns alle zu dem gleichen Verständnis für Order Louts, warum wir sie verwenden, wie man eine Komponente herstellt, warum wir sie verwenden und die unzähligen Probleme, auf die Sie stoßen könnten , ich weiß nicht, gut genug, um Figma zu verwenden, aber es stößt auf viele Probleme. Hoffentlich hat das ein paar von ihnen gelöst. Ordnung, lassen Sie uns im nächsten Video zu einigen neuen Dingen übergehen. 15. Automatisches Layout vorschlagen, Inhalt ersetzen, Ebenen duplizieren und umbenennen (Ai): Eins. In diesem Video werden wir uns mit all den tollen KI-Funktionen von Cyto Figma befassen. Dazu gehören die automatische Übertragung, das Ersetzen von Inhalten, das Duplizieren, Umbenennen und die KI-Bildgenerierung So gut. Wir nehmen das, was nur ein Bild und ein paar Texte ist. Daran ist nichts Besonderes. Wir kopieren und klicken dann mit der rechten Maustaste auf weitere Ebenen, schlagen Autolou vor und bam, es ist Es macht all diese tollen Autolout-Sachen , ohne es selbst bauen zu müssen. Dann machen wir ein paar davon, fügen sie beide zu einem Autoout hinzu und dann schauen wir, Wir können sie duplizieren. Mehr Magie. Wir können darauf klicken und sagen, lass uns den Inhalt darin ersetzen. Lassen Sie uns einfach die Standardeinstellung verwenden und sie mit realistischen Inhalten füllen. Lehnen Sie sich zurück, entspannen Sie sich. Es hat alles neu gemacht und weiß, was es tut Außerdem machen wir auch alle Bilder. Ordnung. Ich habe tatsächlich das ganze Tutorial im Intro gemacht das ganze Tutorial im Intro Es ist ein bisschen detaillierter als das. Da ist ein bisschen. Also lass uns reinspringen und anfangen. Ich kämpfe mit den KI-Robotern. In Ordnung, ich habe hier eine Karte erstellt. Es ist ein Rahmen, innerhalb dieses Rahmens ist nur ein Bild, ein paar Texte. Sie schweben alle irgendwie herum. Niemand macht irgendwas. Okay, also ich muss zu Auto Layout wechseln, weil ich ein anderes Dokument hinzufügen und die Größe ändern und alle möglichen Dinge machen möchte ein anderes Dokument hinzufügen und die Größe ändern und , wo ich hingehe, richtig, Rock 'n' Roll muss wirklich, wirklich lang sein Es tippt einfach alles über. Daran reagiert nichts. Alles, was ich tun muss, ist das übergeordnete Bild. Wenn ich meine normale Umschalttaste verwende , um auf Auto Out umzuschalten. Das funktioniert nicht. Lass uns rückgängig machen. Ein Trick besteht darin, das übergeordnete Element auszuwählen, Bild 38, mit der rechten Maustaste darauf zu klicken, und es gibt eine Option und hier stehen weitere Layer-Optionen. Dieser hier schlägt Auto Loud vor. Es sollte super toll sein, Auto Out. Sehr bescheiden Lass uns auf die Schaltfläche klicken und nichts ändert sich. Wie cool ist das? Nichts hat sich geändert. Schau es dir an. Mein Rahmen ist jetzt ein automatisches Layout. Darin befindet sich ein Bild. Aber dann gibt es noch einen weiteren Autolayout-Rahmen. Ich habe das für mich gerahmt. Es ist also in einem so großen Rahmen, und ich kann jetzt entscheiden, dass wir es tatsächlich zusammenbasteln, das Bild ist darunter Es fließt zurück. Es sind alles verschachtelte Autolayouts. Es ist sehr aufregend vielleicht entscheiden wir hier drin Aber vielleicht entscheiden wir hier drin, was haben wir? Da ist ein Rahmen, 40, ich möchte, dass er unter dem Text ist, oder ich ziehe den Text nach oben. Sie alle wiederholen, rückgängig machen, rückgängig machen, rückgängig machen. Sagen wir auch Rock 'n' Roll. Nehmen wir an, ich tippe den wirklich langen Schlag ein und schau, was er jetzt macht. Es schnappt, es hat diese Box erstellt. Es ist so gut Es ist rückgängig gemacht. Gehen wir noch weiter. dass es in dem Moment, in dem es wirklich schwer Denken Sie daran, dass es in dem Moment, in dem es wirklich schwer ist, Frame 35 genannt wurde. Es löscht nur die Frame-Namen, aber Sie können es zurückbekommen. Ihr könnt sagen, ihr alle, ich kann mit der rechten Maustaste darauf klicken und die süße KI zum Umbenennen von Ebenen verwenden Das ist vielleicht ausgeschaltet, wenn du die kostenlose Version benutzt, aber sieh dir das an. Sie können sie eingeben. Schau dir das an. Benennen Sie Ebenen um. Es wird durchgehen. Es wird darüber nachdenken. Schau es dir an, tippst. Es ist die Zukunft. Titelbild. Oh, das hatte ich sogar geändert. Schau, Titelbild, Song-Info. Es ist nicht ganz richtig. Es hat die Überschrift, den Titel, das Datum. Ah, Beschreibung. Song-Infos sind nicht wirklich eine Song-Info. Es ist eher ein Genre. Ah, so gut. Oh, es wird besser. Schnappen wir es uns. Lass uns eine Kopie davon machen. Okay? Ich habe daraus keine Instanz gemacht. Ich sollte, aber ich habe jetzt zwei Bilder hier. Ich wähle beide aus und schalte sie automatisch aus. Nur der normale. Schichttag. Das funktioniert. Das ist nicht sehr kompliziert. Aber sieh dir das hier an. Oh. Okay, so schicke Option zum Duplizieren Sie können kleine Glitzer daneben sehen. Ich werde es zuerst einfach wegziehen , weil es ein bisschen eng wird, und ich werde es größer machen Lassen Sie uns tatsächlich herauszoomen. Man muss es weit genug ziehen. Wenn Sie es ziehen, bewirkt es nichts, bis Sie weit genug sind, um genug Platz zu haben, damit sie alle darin erscheinen können. Okay? Schau, was wir machen. Oh, und es wird noch besser. Wir werden die KI-Funktion namens Rechtsklick verwenden. Das ist nicht die Funktion, aber hier gibt es eine namens Cart Remember. Komm schon, Gehirn. Inhalt ersetzen. Es ist überhaupt nicht da drin. es ausgewählt ist, der ganze große Rahmen, den du hast, mach weiter und lass uns den Inhalt ersetzen. Und siehst du dieses kleine vorgefüllte Ding? Es heißt, gefüllt mit realistischem Inhalt, wenn Sie die Tabulatortaste drücken. Das ist eine Aufforderung. Das könntest du eintippen. Das spielt keine Rolle. Aber ja, probiere es aus. Realistischer Inhalt. Es wird es versuchen. Oh, es macht es. Wie cool ist das? Es macht die Bilder nicht. Du musst die einzeln machen. machen wir in einer Sekunde. Aber sieh dir das an. Es hat die Daten. Es hat die verschiedenen Genres. Es gefällt mir. Jetzt können wir reingehen und sagen , du bist hier, das habe ich gemacht. Wir könnten zu mehr KI gehen und sagen, mach ein Bild, und das ist Indie-Pop-Band Lassen Sie uns das auf den Punkt bringen, an dem es fertig ist , weil es eine Weile dauert Ich mag es. Oh, sieh dir an, wie schnell es reagiert. Ich mag die kleine Änderung von IndioPo. Nehmen Sie Änderungen vor. Hm. Es ist näher an mir. Ich nehme es. Alles mit Brille. Besser. Ein bisschen rundes Gesicht für mich, aber das reicht Es hat keine Koteletten. Was passiert dort Aber es hat die Frisur. In Ordnung, also können wir uns durcharbeiten, um diese Dinge zu erledigen Die einzige Einschränkung, das einzige Problem, das ich bei der doppelten Option stoße, ist, dass wir uns das Oh, ich habe keine Version davon behalten . Kopieren Sie das aus dem Rahmen und fügen Sie es hier ein. Okay, er ist also draußen. , ich habe das gemacht und wir sollten daraus eigentlich, ich will das machen. Ich möchte den Rahmen größer machen. Eigentlich weiß ich, ich will das Bild haben. Ich habe da eine wirklich komische Größe verwendet, nicht wahr? Das ist die Polsterung. Komm schon, Dan Schnappen wir uns den Vorteil. Da haben wir's. Okay. Was wir tun sollten, ist daraus eine Komponente zu machen. Denken Sie an Command Shift K. Nein, denken Sie an Befehlsoption K, um daraus eine Komponente zu machen, oder klicken Sie einfach auf die Schaltfläche dort drüben. Okay. Also haben wir eine Hauptkomponente , damit wir sie später ändern und alles kontrollieren können. Ich mache eine Kopie davon, das ist meine Instanz, Instanz meines Hauptrahmens. Ich werde sie verschieben. Das ist oben, das ist da. Ich wähle beide aus und lasse sie zu R wechseln. Eigentlich das doppelte Ding, weißt du noch, das war hier unten? Es ist weg. Zum Mitnehmen. Okay? Also es wird mit einer Hauptkomponente funktionieren, wie Sie es nicht können, aber ich werde das rückgängig machen wir sollten es auf eine Komponentenseite setzen, öffnen und hier einfügen. Und dann zurück auf meiner anderen Seite, meinem Hi-Fi-Handy. Eigentlich habe ich es falsch herum gemacht, und ich werde das schneiden, zu meinen Komponenten gehen. Also meine Hauptkomponenten sind hier drin. Dann kopiere ich das, gehe zurück zu meinem Hi-Fi-Handy und füge es hier ein. Das ist also eine Kopie dieser Hauptkomponente. Sie können sehen, dass es ein kleiner Diamant ist. Das wird funktionieren. Okay? Also werde ich es mit denen machen. Sie verschieben ein automatisches Layout und dann erscheint es dort. Das könnte verschwinden Ich weiß nicht, warum es das tut, aber ja, sehr cool. Ein paar andere Dinge, die Sie vielleicht tun müssen, bevor wir daraus das Duplizieren machen, sind, lassen Sie uns zur Hauptkomponente zurückkehren Was Sie tun möchten, wenn Sie Suggest Auto Out verwendet haben. Stellen Sie einfach sicher, dass es funktioniert. Das Bild hat super funktioniert. Du siehst, genau das wollte ich machen. Die Polsterung auf beiden Seiten. Was war meine Polsterung ursprünglich? Lass uns darauf klicken Siehst du, ich hatte 17 auf der einen Seite und 16 auf der anderen. Nur weil ich es zufällig herausgezogen habe, ist es wahrscheinlich am besten, es jetzt aufzuräumen, bevor ich es in eine Komponente verwandle, um überall Duplikate davon zu machen Ich will wahrscheinlich 16, 16, eigentlich 16 rundum Komm schon, Dan. Ich klatsche gern um sie herum, nur um sie zu bekommen. Die andere Sache ist, dass wir uns das ansehen wollen. Ich werde ein paar Renditen einreichen. Man kann sehen , dass es nicht fließt. Das ist etwas, was ich wahrscheinlich will. Das hängt davon ab. Wenn du eine Karte mit fester Höhe willst, lass sie stehen. Aber was ich tun möchte, ist, auf den unteren Rand des Textfeldes zu doppelklicken und es wird von KC umgeleitet, wo ist es Das ist eine feste Größe, und wenn ich auf den unteren Teil doppelklicke, springt es automatisch zu dieser Größe, oder du kannst auf das Symbol für Automatische Höhe klicken Das ist eine weitere gute Sache, die Sie überprüfen sollten. Jetzt kann ich mehr Sachen hinzufügen. Geh da rein. Treten Sie ein, um einzutreten. Da hast du's. Eine andere Sache, die ich jetzt wahrscheinlich überprüfen würde, ist, ob genug Platz für alle Termine ist? Wahrscheinlich. Was passiert, wenn ich auf eine Ziffer herunterkomme, das funktioniert immer noch. Das sind die Dinge, die ich gerne überprüfe. Was ist, wenn der Kunde sagt, das muss alles in Großbuchstaben geschrieben werden, passt trotzdem, oder wir wollen die Vollversion Das ist auch okay. Was passiert hier drüben, wenn das wirklich lang wird? haben wir schon überprüft. Alles klar. Oh, die andere Sache ist die Verkleinerung. Es ist innerhalb des Headers zentriert, was cool ist, was dieser Teil hier ist Man könnte sagen, dass das Datum vermutlich irgendwo zentriert sein soll. Wo ist es? Eigentlich ist es nicht das, es ist der übergeordnete Header. Wir können sagen, die Kopfzeile, ich möchte, dass sie einen Abstand haben, was cool ist, aber ich möchte, dass sie einen Abstand haben und entlang der Oberseite ausgerichtet sind Wir haben hier einige seltsame Dinge behandelt. Es ist alles sehr einfach, bis es nicht mehr ist. Ich habe etwas gegeben , das wirklich gut funktioniert. Aber Sie werden feststellen dass es oft einfach nicht funktioniert. Das ist es, was wir für den Rest dieses Abschnitts tun : Automatische Übertragung. Ich gebe dir einen etwas ausführlicheren Crashkurs und wie man diese verschachtelten , wunderbar ausgerichteten Einschränkungen und Abstände Aber ja. Das ist ziemlich cool, oder? In Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. Eigentlich eine letzte Sache. Lass es uns einfach auf die Seite bringen. Ich werde dich wegziehen. An welchem haben wir zuletzt gearbeitet? Ich denke dieser. Ja, wir. Da all diese Instanzen in diesem automatischen Layout sind, kann ich dir das ansehen. Ich kann mir die Eltern schnappen, solange die Eltern. Ah, das ist der netteste Teil. Ich kann den Abstand machen. Okay? Spielt mit dem Abstand herum, so wie ich ihn haben möchte. 32. Wer er zu tun hat. Lass es uns hier machen, 32. Ein weiterer kleiner Trick Sie können einfach auf die Lücke doppelklicken und sie eingeben. Wer, doppelklicken Sie auf die Lücke für den Abstand. Komm schon, Dan. Meine Maus macht komische Sachen. Also lass uns zu dir gehen, doppelklicken Sie auf die Lücke und Sie können sie hier oben eingeben, sodass ich 32 eingeben kann. Wir machen es hier drüben. Es liegt an dir. Aber es spielt keine Rolle, wie groß das ist, es wird darauf reagieren. So gut. Ordnung, wir haben ein Chaos angerichtet. Jetzt sehe ich dich im nächsten Video 16. Klassenprojekt 02 - Bandlisten: In Ordnung, es ist Zeit für ein Klassenprojekt. Ich möchte, dass du eine Seite erstellst. Und lass uns zu den Klassenprojekten gehen. Denken Sie daran, dass diese in Ihren Übungsdateien enthalten sind. Ich möchte, dass du „ Was ist auf der Seite“ erstellst. Okay? Was ist los? Die Sprache macht mir nichts aus. Okay, es muss eine Überschrift und eine Karte mit sich wiederholenden Bandlisten geben. Okay, schauen wir uns meinen an. Okay, ich habe hier eine Überschrift. Wir haben diese Karte , die sich wiederholt, mit allen verschiedenen Bands, die an unterschiedlichen Terminen auftreten Um mit den KI-Funktionen zu experimentieren. Wenn Sie versuchen, diesen Kurs in der kostenlosen Version zu machen , ist das okay. Entwerfen Sie es einfach. Es muss nicht mit KI gebaut werden. Sie müssen nur ein bisschen mehr tippen und kopieren und einfügen und Bilder von Seiten mit kostenlosen Archivbibliotheken suchen mir nichts aus. Wenn Sie in der kostenlosen Version sind, gibt es tatsächlich eine kostenlose Testversion. Es könnte toll sein, diesen Kurs der kostenlosen Testversion zu absolvieren und am Ende können Sie ihn ausschalten. Aber wenn Sie die Funktionen haben, möchte ich, dass Sie sie durchgehen und damit herumspielen. Ich schlage vor, dass Autolayout das wichtigste ist. Das haben wir im letzten Video gemacht, wo du es einfach entwirfst und sagst: Hey, gib mir bitte das automatische Layout Und es macht nette Dinge. Sie werden auf Probleme stoßen. Ich habe zum Beispiel einen ganz einfach entworfen, damit er funktioniert. Es hat beim ersten Mal funktioniert. Ich weiß, ich habe andere Dinge getan, bei denen ich gesagt habe : Oh, das wird funktionieren, und es hat nicht funktioniert. Halten Sie es also einfach oder machen Sie etwas Kompliziertes und sehen Sie, wie Suggest Auto Layout damit umgeht. Später im Kurs werden wir unsere Fähigkeiten verbessern , damit wir das Problem beheben können, aber versuchen Sie es mit etwas Einfachem. Sie möchten zumindest, dass Sie mit den Funktionen zum Umbenennen von Layern herumspielen . Falls du dich nicht erinnern kannst , wo das ist, weil es nur ein kleiner Teil des Kurses war ein kleiner Teil des , kannst du hier reingehen und sagen, ich möchte das ganze Ding nehmen, rechten Maustaste darauf klicken und es heißt Umbenennen, wo bist du? Benennen Sie Ebenen um. Da ist es da. Ich möchte auch, dass du mit neuen Inhalten duplizierst. Das ist der Fachausdruck für das kleine Ding, das unten erscheint, wenn Sie es herausziehen Es ist dieses Ding hier unten. Ich kann das Ding nicht sehen. Inhalt ersetzen. Das haben wir gemacht. In diesem Fall baue ich gerne etwas, wenn ich weiß , was ich machen werde. Was ist das? Geh mir aus dem Weg. Erinnern wir uns, falls du dich verirrst, Kommando eins. Oh, ich habe das Ausrufezeichen eingegeben. Schalt eins, tut mir leid, und es wird auf alles gezoomt , was du hast Was ich gerne mache, wenn ich den Platzhaltertext einfüge, dann verwende ich diesen Ersatztext mit Ich tippe einfach den Bandnamen ein. Das gibt ihm einen Hinweis. verwende Rewrite This oder Rewrite This, um eine Beschreibung über eine Band mit dem Namen hinzuzufügen , und ich habe ihr einen falschen Namen gegeben und sie dann dupliziert , sodass ich dann das, was man Rewrite this nennt , verwenden kann , verwenden Ich habe ein aktuelles Datum eingegeben und verwende Rewrite This oder Rewrite This, um eine Beschreibung über eine Band mit dem Namen hinzuzufügen, und ich habe ihr einen falschen Namen gegeben und sie dann dupliziert , sodass ich dann das, was man Rewrite this nennt , verwenden kann. Überlegt sich Bandnamen. Du kannst das vorschlagen , es wirklich klar beschreiben. Man könnte sagen, ich schreibe das um und ich sage, ich schreibe das für Techno-Bands aus den 90ern und das werde ich dir speziell geben Du musst es nicht einfach leer lassen. In Ordnung, spiel ein bisschen herum und mach ein Bild. Okay, also ich habe ein Bild gemacht, und du wirst feststellen, dass sie alle Balltypen mittleren Alters haben. Ich habe versucht, die Koteletten zu machen. Es mag es nicht, Koteletten hinzuzufügen. Keiner von denen sieht aus wie ich. Aber wie dem auch sei, sie sind alle da drin versteckt. Kleine Leichtigkeit macht Spaß. Ich glaube, ich mag diesen Kerl am meisten. Er hat eine ähnlich haarige Hand. Was wir sonst noch umschreiben , worüber wir gesprochen haben, das ist Figmans Version von Chat GPT, spielen Sie damit herum Ich möchte deine Seite scrollbar machen. Okay. Stellen Sie also sicher, dass, wenn Sie die Vorlage erstellen, sie das kann. Wenn Sie das noch nie gemacht haben, stellen Sie einfach sicher, dass, wenn Sie Ihren Rahmen haben, und Sie haben das drin, er länger ist . Okay, es passt also da rein. Okay, das ist auch die Höhe des Telefons. Ich bin 852 groß und wir haben den Inhalt abgeschnitten, sodass wir ihn nicht sehen Das ist nicht wirklich wichtig. Was wirklich wichtig ist , ist, dass es auf einen Rahmen von etwas eingestellt ist, das es weiß, wie ein iPhone 16. Wenn es nicht funktioniert, können Sie zum Prototyp gehen. Es wird wahrscheinlich immer noch nicht funktionieren, also musst du zum Prototyp gehen und sagen, ich hätte gerne den Overflow, das ist das Zeug, das hier rumhängt . Die Standardeinstellung ist kein Scrollen Ich möchte vertikal scrollen, und das sollte dir diesen Typen einbringen. In Ordnung. Fantastisch. Ich habe mir ein paar Freiheiten genommen und bewegt, um die Kamera zu entfernen. Du machst das Gleiche Ich habe mit einigen Schriften und Farben herumgespielt. Darauf werden wir später näher eingehen, aber ich selbst konnte es nicht herausfinden. In Ordnung, spring rein. Spielen Sie mit der KI herum, freuen Sie sich über die Zeit, die sie Ihnen sparen kann, und erkennen Sie einige ihrer Schwächen wenn sie nicht das tut, was wir im letzten Kurs getan haben Einfache Dinge, tolle, wirklich komplizierte Dinge. Wir werden uns selbst reparieren müssen. Wir machen uns Sorgen. Wir werden lernen , wie es geht. In Ordnung. Viel Spaß beim Erstellen von Klassenprojekten. Wir sehen uns, wenn du fertig bist. Oh, eigentlich alle letzten Dinge hier drin, Liefergegenstände Mach einen Screenshot wie diesen und lade ihn in die Klassenprojekte Teilen Sie es auch in den sozialen Medien. Lass die Leute wissen, dass du den Fortgeschrittenenkurs mit Dan machst und es ist großartig. Ihr schaut es euch an und das habe ich gemacht. Ja, da hast du's. Ich sehe dich im nächsten Video. 17. Verschachtelte und reaktionsschnelle Auto-Layouts: Eins. In diesem Video werden wir unsere eigenen responsiven verschachtelten Autolayouts erstellen unsere eigenen responsiven verschachtelten Autolayouts Wie im vorherigen Video verwenden wir die Roboter wir Wir verwenden KI, um alles zu erledigen. Wir werden alles selbst machen, weil wir verstehen müssen, wie diese Dinge entstehen , damit wir Probleme lösen, komplexere Layouts erstellen und lernen müssen, wie man sich umarmt Ja, in diesem Fall wird es Umarmungen geben. Es wird wirklich peinlich sein. In Ordnung, lass uns reinspringen. Umarmen. Fangen wir an, indem wir die I-Taste drücken, und wir wählen einen iPhone 16-Rahmen Aus irgendeinem Grund lege ich es hinein, wo immer es will, gehe hin, um es perfekt auszurichten, und das wird mein oder zwei Menüs sein Es hat einen Namen, sehr sexy. Wir werden einfach anfangen, es zu bauen. Ich fange mit einem Rahmen an und ich werde hier einen einzeichnen. Ordnung, ich werde die Farbe ändern, damit wir es vor dem Hintergrund sehen können, beliebige alte Farbe auf dem Bildschirm auswählen, eine Schleife. Bringen wir ein Bild rein. Du kannst alles reinbringen. Ich habe einen. Denken Sie daran, dass Command Shift K das Tastenkürzel ist, um ein Bild einzufügen. Und es gibt eins namens Bild fünf. Es ist sehr cool. Bringen Sie einen Laptop mit. Da haben wir's. Ich ziehe es einfach manuell hin und her, so wie ich es haben möchte, und schauen wir uns das mal an. Okay, die Einschränkungen sind gesperrt. Kannst du das sehen, wenn ich es ziehe, kannst du die gepunktete Linie sehen, die durch die Mitte verläuft? Es heißt nur, dass Höhe und Breite gesperrt sind. Du kannst es kaputt machen, indem du den Knopf dort drückst. Schalte das Seitenverhältnis frei. Ich möchte nur das seltsame Seitenverhältnis haben. Okay. Ich werde es in die Länge ziehen. Ich sollte rücksichtsvoller sein. Es ist gut genug Also, ich werde es einfach nach und nach bauen. Anstatt alles aufzubauen und dann zu konvertieren. Also, was ich sagen werde , ist eigentlich dieser Rahmen, geben wir ihm einen Namen. Nennen wir das eine Karte. Dieses Bild wird Bild genannt werden. Was ich machen möchte, ist das Elternteil, das ist die Karte. Ich will sagen, dass du Auto out hast. Ich kann auf den Button klicken. Wo ist der Button? Da ist er, oder ich kann mein Tastenkürzel Shift A verwenden . Das Tolle daran ist, kannst du sehen, dass es sich um ihn herum schlängelt? In Ordnung. Ich möchte sichergehen, dass meine Polsterung 16 und die Höhe 16 beträgt Großartig. Lass uns irgendeinen Typ machen. Ich werde es hier drüben eintippen. Ich werde eintippen, deinen Laptop mitbringen und er wird hier reingehen, aber das Problem ist, wenn ich das Auto einstelle, funktioniert das? Es wird genau da hingehen , wo ich es tun musste. Hervorragend. Das Problem ist, ich gehe und füge mein Datum hinzu. Lassen Sie mich gleich ein Date vereinbaren. Ich habe mein Date. Wenn ich versuche, es da rein zu legen, gibt es Auto Out, dieser automatische Ausgang ist auf den Punkt eingestellt , der vertikal ist, oder ich könnte es horizontal machen. Beide werden nicht funktionieren. Wir müssen hier in der Mitte nisten . Lassen Sie mich die einfach hin und her bewegen, also bringen Sie einen Laptop Es funktioniert immer noch nicht, aber wenn ich mir diese beiden Typen schnappe und sie in ihren eigenen Autoausgang stecke, nennt man das einen verschachtelten Autoausgang Ich habe einen, den ich hier in diesem Elternteil einbauen werde hier in diesem Elternteil einbauen Es ist darin verschachtelt. Wenn Sie diese beiden ausgewählt haben, können Sie mit der rechten Maustaste darauf klicken und sagen, ich möchte diese Auswahl einrahmen Du könntest zuerst den Rahmen zeichnen und diese Typen hineinwerfen. Es liegt an dir. Sie sind in diesem Bild. Ich werde daraus eine Toot-Shift A machen. Diese wird Überschrift heißen Funktioniert immer noch nicht, Dan. Schau, es ist aber verschachtelt. Lo versteckt seine Innenkarte. Aber dieses Ding hier, ich kann ein paar coole Sachen machen. Denk dran, diese Karte war so eingestellt, dass sie nach unten fließt. Dieses Ayo kann horizontal ausgerichtet werden. Vertikal, horizontal. Cool. Es funktioniert nicht ganz, aber das ist eine verschachtelte Au Sie werden viele Nester im Inneren von Nestern finden. So hat KI das automatisch gemacht, was cool war. Schauen wir uns an, es ein bisschen besser zu machen, denn dem Moment, in dem es das tut. Es ist nicht ganz richtig. Wenn ich tippe, tippe , funktioniert es, aber es geht einfach aus und für immer. Es gibt ein paar Dinge, die wir uns ansehen müssen. Schauen wir uns das Elternteil an, die Überschrift. Diese Überschrift bezieht sich im Moment auf ungefähr dort. Wir wollten den ganzen Weg hierher gehen. Tun Sie das. In dem Moment, in dem die Breite sagt, umarmen, Inhalt umarmen, heißt es Umarmung großer Bär, umarmen den Inhalt so fest wie möglich, was sehr eng ist, was sehr eng ist Was ich sagen will ist, umarmen Sie sich nicht. Ich möchte, dass du deinen Behälter füllst. Der Container ist in diesem Fall der Wagen. Das ist das Elternteil oder der Container. Ich möchte, dass du so viel wie möglich füllst. Du siehst einen kleinen Pfeil , der hier erscheint. Schau. Ich werde diesen Weg gehen. Du bist echt genial. Das funktioniert. Diese Überschrift erstreckt sich jetzt also über die gesamte Länge. Was ich jetzt tun muss, ist dass sie alle nach links gequetscht Ich werde sagen, ich möchte, dass du nach links gequetscht wirst. Und es hat eine Lücke von acht Das ist eine kleine Lücke dazwischen. Ich würde sagen, die Lücke, kannst du sie einfach automatisch machen? Der Elternteil sagt, ich möchte so groß wie möglich sein. Ich werde in diesen Behälter füllen . Aber wir haben erzwungen, dass die Lücke auch eine bestimmte Zahl hat. Aber wir sagen B Auto, es macht, richtig, B, was immer du willst, und es dehnt sich auf den Container aus. Hol es dir. Schließen wir unser Elternhaus, das ist ein Autoausgang. Darin hängt dieses Bild herum, und dann haben wir diesen kleinen Block, in dem sich eine eigene kleine Welt von Auto Lou abspielt, in der diese beiden Typen drinnen Okay, jetzt füge ich meinen Beschreibungstext hinzu. Ich werde sofort damit beginnen, dass das erledigt ist. Okay, das war das Seltsamste, das ich überprüft habe , um zu sehen, ob die KI mir Urnipsm geben würde Das ist der Laurenismus, den wir haben. Jetzt haben wir also Disney. Wow. Es ist nicht Disney. Ich fühlte mich wie Disney, als ich es las. Okay? Wenn wir sie hier reinwerfen, so lange wir sie an der richtigen Stelle haben, sollte es sich füllen und wir haben dieses schöne Auto Out, fast genauso wie das Lassen Sie uns ein paar Dinge überprüfen um sicherzugehen, dass alles funktioniert Ein paar Dinge sind, dass das nicht an die Grenze geht. Wie machen wir das? Wir haben ihn angemacht und gesagt, wollen wir deine Breite? Wir wollen, dass du gehst Lass uns deinen Behälter füllen. Lass uns den ganzen Weg rausgehen. Hat es getan. Es funktioniert nicht wirklich , weil keines der Wörter klein genug ist, um kaputt zu gehen. Lass uns das nochmal machen. Also werde ich die Textgröße ändern. Lass uns regulär zu Roboto gehen. Oh, das wird reichen. Ich mache genau das Gleiche. Warum schnappen Sie sich nicht den Text. Wir können deine Breite sagen, mein Kumpel ist Füllcontainer. Oh, mindestens ein Wort ist aufgetaucht. Aber was ich meine, ich fülle es super aus. Lass uns weiter tippen. Die andere Sache überprüfe ich gerne mit Autolayouts. Wir haben es früh gemacht, zu überprüfen, ob es funktioniert, und weitermachen. Es funktioniert nicht. Dieses Textfeld wird als feste Höhe bezeichnet. Wir haben den Text ausgewählt. Ich kann sehen, dass die Höhe auf diese Höhe von 115 eingestellt ist. Du sagst, ich will nicht 115 sein. Ich möchte, dass es ein riesiger Inhalt ist. Das würde funktionieren. Es gibt ein paar, die wir machen könnten. Wir könnten Inhalte umarmen. Dieser Button hier macht genau das Gleiche. Automatische Höhe. Es ist nur ein anderes Wort für umarmen Inhalt. Es ändert sich sogar Schau, wenn du Inhalte umarmst, kannst du sehen, dass es darauf umschaltet Der andere Weg, der dritte Weg weil man drei Arten braucht, Dinge zu tun Sie können einfach auf den unteren Rand eines Textfeldes doppelklicken. Es schaltet es trotzdem auf Umarmung und Automatische Höhe um. Testen Sie es Testen, komm schon. Es funktioniert. Fantastisch. Ordnung. Möchten wir noch etwas überprüfen? Die andere Sache, die wir überprüfen möchten, ist ganze Sache responsiv? Oh, irgendwie. Ja, ist es. Absolut ansprechbar. Ich dachte, es würde nicht funktionieren und ich wollte es dir zeigen, es funktioniert alles. cool. Manchmal ist es nur diese Kiste hier. Es ist bereit, sich zu füllen. haben wir schon gemacht. Manchmal, wenn man es herauszieht, ist es genau das, was es war. Ich hatte meine ganz klar so, mit einer bestimmten Breite. Wenn ich es entwerfe, richte ich es oft trotzdem dort aus, auch wenn ich nicht füllen gesagt habe, und es wird immer noch eine feste Breite haben. Ich werde so aussehen, wie es ist. Ich werde so aussehen, als würde es an den Rand gehen. Aber wenn ich das mache, heißt es: Nein. Okay. Also dieser hier, ich habe es gemacht. Füllen Sie bitte den Behälter. Nett. Es ist total knifflig. Okay? Also, wenn du denkst, oh, das war ein bisschen schwierig. Wir werden im Laufe des Kurses noch ein paar machen. Aber was die automatischen Ausgänge angeht, so ist eine davon wirklich einfach Wenn du anfängst, eins in andere zu stecken, denkst du, das ist komisch Dann wirfst du das hinein, wird es sich umarmen oder wird es den Behälter füllen Ich erinnere mich, als ich sagte, ich musste auf den Ball klicken und sagen: Ist er ein Haken? Ist es ein gefüllter Behälter? Einkaufen ist nicht richtig. Und du hast einfach mit den Knöpfen herumgespielt bis du ein Gefühl dafür hast, in Ordnung. Ich verstehe Ich verstehe es voll und ganz, aber ich habe es auch nicht sofort gelernt. Wenn Sie es also etwas schwierig finden, ist es schwierig. Aber wenn du es verstanden hast und all diese guten Sachen machst , und du kannst anfangen, die Dinge zu tun, die wir in der letzten gemacht haben, wo wir hingehen, in Ordnung, du wirst ein Duplikat sein , sie beide nehmen, A verschieben oder herausziehen und dann Gruppen von ihnen herausziehen und dann Befehl K drücken, weil wir großartig sind und wir ersetzen Inhalte, und wir sagen einfach, füllen mit Replatic Tabs, damit wir sie mit realistischen Inhalten füllen können, drücken dann Command Enter, obwohl ich immer nur Enter drücke. Macht das sonst noch jemand Es ist einfach so gut. Schau, Networking-Events gerade durchgemacht und sie verändert. Verschiedene Daten, verschiedene Beschreibungen, verschiedene Oh, weiß irgendwie, was wir sind. Woher weiß es, was Bring Her Laptop ist? Oh. Das ist irgendwie beängstigend. Das ist es. Das ist das Zeug, das wir machen , wenn wir ihren Laptop mitbringen. Renommierte Designerin. Oh, die Roboter Du machst mir Angst, Mann. In Ordnung, das ist es Ich werde über mein Leben mit den Robotern nachdenken und werde dich im nächsten Video sehen. Wow 18. Automatische Layoutraster in Figma: Hallo, alle zusammen. In diesem Video erfahren wir mehr über Auto-Out-Grids. Schau, wie cool das Ding ist. Es hat Gitter. Wir können Sachen bewegen Du gehst da hin. Sie heißen Auto Out Grids. Sie sind einfach zu benutzen. Ich liebe sie. Es springt. Okay, für den Anfang habe ich einen neuen Rahmen erstellt, nichts drin. Ich habe eine Hintergrundfarbe wie Mitternachtsblau erstellt. Es spielt keine Rolle. Schnappen wir uns einen Rahmen. Wir werden es hineinstecken und das Auto finden. Es ist dieser neue hier. Wir haben uns im Grunde genommen Freiform angesehen, bedeutet nur , dass es ein Rahmen ist, in dem überall Dinge wackeln Genauso wie ich Dinge in diesen Rahmen zeichne. Das ist freie Form. Da ist ein Rechteck drin. Da ist es einfach nicht voll, aber es hängt nur rum. Löschen wir ihn und ändern wir ihn. Bei der automatischen Ausgabe haben wir uns die vertikale und die horizontale Ansicht angesehen. Was wir tun werden, ist hier auf diesen zu klicken. Was es tun wird, ist es in Autolout umzuwandeln. Erspart uns, darauf zu klicken, verwandelt es aber auch in dieses Raster. Also im Moment besser. Ich bin mir sicher, bis du es machst, wird es nett sein und nicht die Batterie, vielleicht nicht mehr so viele Bugs haben, ich werde vielleicht nicht mehr so viele Bugs haben, vielleicht ein paar neue Funktionen machen. Alles, was wir hier haben, ist, lass uns ein paar Bilder reinbringen. Das ist der beste Weg, es zu erklären. Gehen wir zu Command Shift K oder Control Shift K. Wir werden sechs bis zehn der Bilder einfügen. Klicken wir auf „Ort A“ und ziehen eines hinein und es wird nicht funktionieren. Gehen wir da rüber. Die sind alle übereinander gestapelt Wenn ich mir das schnappe und es in mein Raster werfe, das ich nicht wirklich sehen kann, wo bist du dann? Da ist es. Wenn ich das nehme und reinziehe, hat es nicht funktioniert. Lassen Sie uns die richtige Größe wählen , nur um loszulegen. Ich werde expandieren und mich zusammenziehen. Lass es uns irgendwo in dieser Größe hinbringen, und ich sage, du gehst da rein. Oder du kopierst und gehst hier rein, wählst den Rahmen aus, in dem du ihn haben möchtest, und füge ihn ein und ich gehe auch rein. Das einzige Problem dabei ist, dass es funktioniert. Es hat dieses kleine Raster. Sie können hier sehen, dass das Bild kleiner wird. Es versucht zu füllen, aber es kann es einfach nicht. Was wir tun müssen, ist entweder vorher oder nachher, wir müssen auf dem Bild auswählen und sagen, dass Ihr Seitenverhältnis nicht gesperrt sein Lassen Sie uns das Seitenverhältnis freischalten. Klicken Sie darauf Ich werde es mit all diesen auf einmal machen. Jetzt wird es cooleres, responsives Zeug machen. W ist James Sie könnten das mit Rahmen, Polsterung und automatischem Layout selbst erstellen , aber mit Rastern Das Coole daran ist auch, dass wir uns dieses Exemplar schnappen und ich werde es tatsächlich, lass es uns reinziehen, wenn es ein bisschen größer ist . Mal sehen, was es macht. Wenn ich den Kerl einfach herschleppe, ist es das nicht. Es benutzt die obere linke Ecke dieses Dings und es kommt nicht annähernd nahe. Es ist also zu groß, es weiß nicht, wohin es gehen soll. Es ist weiß und betafarben. Wenn ich das mache, ist es eingezwängt Manchmal geht es zu den Geräuschen über. Das wird zwei meiner Reihen durchqueren. Was sind das für Reihen? Das Coole daran ist, sieh mal, es ist alles skalierbar und verantwortlich Responsive ist das Wort. Lass uns reinfahren. Das war mein Schlüssel. Ich habe AI gebeten, mir eine Keta zu machen. Ich wusste nicht, was es war Ich sagte, es ist ein Klavier mit einer Gitarre und es hat es an der Seite zertrümmert . Jetzt, was ich wollte Also werde ich das kopieren, einfügen. Ich habe es einfach doppelt angeklickt und eingefügt. Es ist so gut. Es ist super einfach , diese kleinen Raster Andernfalls dauert es ewig, diese zu markieren. Sie können sie so einrichten, dass sie mehr als einen wie diesen hier umfassen . Sie können sich überschneiden. Okay. Und dieses Ding wird immer noch expandieren und schrumpfen. Wenn du mit den Ebenen herumspielen musst, ist das ganz normal hier in deinem Ebenen-Panel, wenn ich ihn unter all diesen Typen haben will, bam, los geht's Das will ich nicht. Ich mag das Netz, das sie am Laufen haben, alle Lücken schließen. Sie können all dies anpassen. Kannst du hier drüben sehen, du kannst sehen, dass der Abstand zehn und zehn ist. Wenn du willst, was wollen wir 16 und 16? Sie können Polsterung hinzufügen. Lass uns um acht und acht Uhr Sie sind ziemlich vielseitig. Ich schleppe sie den ganzen Weg dorthin und sie sind sehr verantwortungsbewusst. Warum ragt der Typ da unten raus? Nun, lassen Sie uns einen Blick darauf werfen. Er ist jetzt nicht eingeschränkt, aber unter dem Füllbild ist er unterfüllt Es. Bill, das liegt daran, dass ich ihn vorhin rausgezerrt habe Vielleicht habe ich versucht, ihn zu zerren. Da hast du's. Da du dein kleines Zuhause bist, Kumpel, kannst du sie leicht bewegen. Ich kann auf den Kerl doppelklicken und ihn einfach hochziehen und er wird versuchen , da raufzukommen. Nett. Du kannst sie duplizieren. Was wird aufgrund dieser seltsamen Zeilenstruktur passieren . Lass uns gehen. Komm schon, Di. Wir legen einen neuen rein. Es ist so klug. Sie können sie selbst hinzufügen, indem auf den gesamten Frame klicken und hier drüben können Sie darauf klicken und sagen, ich habe einfach standardmäßig zwei und zwei gewählt Nehmen wir an, ich möchte, dass es drei und zwei ist. Ich fahre einfach mit der Maus darüber, um ein Gefühl dafür zu bekommen, was ich will, und klicke dann darauf In diesem Fall muss ich dir sagen, ich will es, aber ich will das hier drüben haben und ich werde es vielleicht so machen Schau uns an. Da du ganz kreativ bist, gehst du da rein Okay, der dunkle Hintergrund war eine dumme Idee. Gehen wir zurück zu einem cremefarbenen. Eigentlich ganz weiß. Es kann ein bisschen komisch sein, wenn man sie bewegt. Schau dir das an. Ich will den Kerl hierher bringen. Wir wollen diese Seite. Wir haben es rausgequetscht und alles bewegt. Manchmal musst du sie kopieren und einfügen. Manchmal funktioniert es gut, manchmal hängt es nicht davon ab, wie viel man schon überspannt hat und was sich innerhalb des Grids Jetzt können Sie diese Zeilen, Zeilen und Spalten nach oben und unten verschieben Sie können sie in individuellen Größen gestalten. Im Moment sind sie alle auf Auto eingestellt. Diese kleinen Punkte, wenn ich herumschwebe. Diese kleinen Punkte sind auf der Außenseite und da sind die Maße Was ich tun kann, ist, ich kann sagen, ich möchte, dass dieser hier einfach ist und du kannst entweder darauf klicken und ihn einfach ziehen oder ihn eingeben. Wenn du weißt, dass es 150 sein sollen, tippe es ein. Diese ändern sich alle, je nachdem, wie viel Platz zur Verfügung steht. Es ist sehr cool. Man kann sie tatsächlich aus ihren kleinen Häusern holen. Alles, was Sie tun müssen, ist, dass der übergeordnete Frame nicht so eingestellt ist, dass er Inhalte ausschneidet. Sie können einige skurrile Dinge damit machen, aber am Ende machen Sie es kaputt. Mach es nicht kaputt Mach es rückgängig, mach es nicht kaputt. Aber ich weiß, dass du Text hinzufügen kannst. Lass mich in den Kommentaren wissen , ob du es herausfinden kannst. Ich kann den Text nicht erstellen, erweitern und zusammenziehen, wenn es sich um essbaren Text handelt. Es ist nicht so responsiv, aber machen wir es trotzdem. Lass uns hier reingehen, lass uns das reinziehen und zu dir gehen. Ich habe eine SMS bekommen, mit der ich rumgespielt habe. Hier ist es. Ich werde das reinlegen. Das ist der Grund, warum ich den dunklen Hintergrund wieder hatte , ungefähr zu der Zeit. Ist das hier? Ich will eine zusätzliche Reihe an der Spitze. Ich kann nur sagen, ich will, was ich will, noch eine Zeile. Es wird jetzt drei mal drei sein. W. Ich werde diese nehmen und ich muss sie nach unten ziehen , um etwas Platz für den Text zu haben. Es ist so einfach, nicht wahr? Also, das hier, ich werde schneiden. Also kopiere es, klicke hier wieder rein. Ich klicke auf dieses Feld und füge es ein, es wird da drin sein. Es hat die falsche Größe. Aber das Problem ist, ja, das ist das große Problem , ich kann nicht herausfinden, wie man die Größe ändert, also musst du eine passende Breite wählen, damit es mit den Jungs rumhängen und das Zeug machen kann Aber der Text wird irgendwann an den Rand kommen und sagen, tschüss Aber das ist das Einzige. Das Gleiche gilt für diese Höhe hier. Ich möchte nicht, dass es automatisch ist. Ich werde es runterziehen, damit es irgendwie so aussieht. Ich könnte es kaputt machen lassen. Schau dir das an. Ich schaffe es nicht, die Größe zu ändern. Das ist wirklich das, was ich will. Ich werde den Text auswählen, ich werde sagen, ich möchte nicht, dass er sich an die Breite schmiegt Ich möchte, dass es den Container füllt, und ich möchte, dass es ihn bis hierher zieht Also wird es jetzt kaputt gehen. Schau dir das an. Du kannst es zum Laufen bringen. Das schnappen wir uns auch. Du wirst kleiner. Oh, sehr cool. Ordnung. Was? Mit dieser Grid-Funktion ist es einfacher geworden. Eine Sache, die ich dir zeigen möchte, ist, kurz bevor ich gehe, es ist wie ein besonderer Leckerbissen, wenn jemand so lange gewartet hat. Ich habe vergessen, es zu benutzen. Der hier passte zu mir. Ich meinte, Mann, das war cool. Ich habe es bei einer KI und dachte mir, wie zum Teufel habe ich das bekommen Weil ich es auch dafür bekommen habe. Also, ich habe, richtig, ein Rechteck gezeichnet. Und dann habe ich das gemacht. Es wird nicht dasselbe sein weil KI, ich weiß nicht, die Unfähigkeit hat , Dinge zu wiederholen, aber ich mache ein Bild und ich mache das, was ich in der Gitarre aus nächster Nähe aufgenommen habe. Sie können Farbe verwenden und ich verwende die Hexadezimalzahl der Sie könnten IGB, was auch immer es ist, als Hauptfarbe verwenden. Dann habe ich es gemacht und ich habe das bekommen und ich war wie genial. Ich habe die Kopfhörer gemacht. Genial. Dann habe ich die Keta versagt Oh, ich habe eine andere Farbe verwendet. Es war nicht orange, es war pink. In diesem Fall würde ich sagen, alle nehmen Änderungen vor und sage Akustikgitarre. liegt an dir, aber so habe ich diese wirklich schönen flachen Grafiken bekommen, die ich hier verwende. Jubel. Wenn du alt genug bist und sagst, was zur Hölle ist ein Keitar M ist der Akzent Bist du bereit? Da hast du's. Du bist willkommen. Ich wollte unbedingt einen. Hände hoch, wer vergessen hat, dass sie existieren. Da hast du's. In diesem Video haben wir viel über Figma, Auto Lou Grids und Ketars gelernt Auto Lou Grids und In Ordnung. Das ist es. Wir sehen uns beim nächsten Video. 19. Klassenprojekt 03 - Netze: Oh, lustig. Es ist Zeit für Klassenprojekte. Es macht Spaß. Wovon sprichst du? Tolles Lernen und Üben. Ich möchte, dass du die Auto-Lout-Funktion verwendest. Entschuldigung, die Grid-Auto-Lout-Funktion, die wir im letzten Video gelernt haben Okay? Es ist ziemlich einfach. Ich möchte, dass du das machst, was wir im letzten Video gemacht haben . Es gibt einige Anforderungen. Ich möchte, dass du vier oder mehr Bilder verwendest. Es ist egal, wo du sie herbekommst, KI-generierte Archivbibliothek, deine eigenen Bilder. Ich möchte, dass sie mit Ihrem speziellen Musikgenre verwandt sind. Es könnte also Rock 'n' Roll, Soul, Hip Hop sein, was auch immer du hast. Hey, mach das. Ich möchte, dass du mit mindestens einer farbigen Schachtel experimentierst. Du kannst hier auf meiner sehen, dass ich meine nach dem Video geändert habe , um diese farbigen Boxen hinzuzufügen. Die Sache ist, dass sie in der Lage sein müssen , sich mit ihnen fortzubewegen. Das wird ein bisschen schwieriger? Ich weiß nicht, Kurs für Fortgeschrittene. Ich übernehme einige Aufgaben, bei denen das, wenn man es einfügt, wahrscheinlich nur ein Rahmen ist. Es ist also ein Rahmen, der hier drüben stand und jetzt da drin ist. Aber standardmäßig will dieser Typ nicht expandieren und sich zusammenziehen. Ich möchte, dass du siehst, ob du herausfinden kannst , wie das geht. Mach es. Mach dir keine Sorgen. Schau im nächsten Video nach. Nun, sieh unten nach. Schau noch nicht hin, aber jemand in den Kommentaren wird dir mitteilen, wie er es zum Laufen gebracht hat. Also nur ein farbiges Kästchen statt eines Bildes. Ich gebe dir einen Hinweis, der etwas mit der Breite und Höhe zu tun hat. Mal sehen, ob du das herausfinden kannst. Wir haben es schon einmal gemacht, das ist der Schlüssel. Und Text, aber das ist optional. Ich möchte, dass Sie mindestens ein Objekt erstellen, das sich über eine Spalte erstreckt. Das umfasst eins, zwei, drei, das sich über zwei erstreckt, ist zumindest nur eines davon. Regeln, mach einen Screenshot und lade ihn in die Klassenprojekte Und die sehen cool aus. Ich mag dieses kleine Gitter. Laden Sie es in die sozialen Medien hoch und sagen Sie einfach, dass Sie mit dem automatischen Layout des Figma-Grids experimentieren Und was hältst du davon? Vergewissere dich, dass du mich markierst. Viel Spaß beim Herumspielen. In Ordnung. Wir sehen uns, wenn du deine Hausaufgaben gemacht hast , nicht Hausaufgaben, Klassenarbeiten, lustige Sachen. Erinnerst du dich? A. Nächstes Video. 20. Wichtige Informationen zu Komponenten in Figma: Komponenten. Du kennst sie schon. Warum machen wir ein Video? Ich habe ein paar wichtige Dinge, die Leute auffangen, mich auffangen. Ich möchte das mit dir teilen. Macht dieses Video Spaß? Ich verliere mich ein bisschen. Ich hatte nicht vor, mich zu verirren, aber wir haben es getan, aber wir haben es repariert. Hoffentlich ist das ein netter kleiner Schatz für dich . Wir schwören es, ich weiß Wir wollen es nicht, aber wir tun es. Ordnung. Das ist alles. Lass uns einsteigen. Sprechen Sie über Komponenten. In Ordnung, also verwenden wir, dass ich diesen Nerv geschaffen habe und vergessen habe. Deiner ist vielleicht vorne, weil du sagst, er hat da seine Nerven vergessen. Das haben wir schon früher im Kurs gemacht, also werde ich darauf klicken und meine Zurück-Schaltfläche verwenden, meine Zurück-Schaltfläche verwenden, die nur die erste eckige Klammer ist. Und dann habe ich das. Ich mache es einfach hier drüben, weil es ein bisschen klarer ist. A, ich habe dieses Navi, das ich gemacht habe. Schauen wir uns an, wie es hergestellt wird. Es heißt also Nerve Bottom. Darin befinden sich einige. Was sind das? Erinnerst du dich? Ja, das sind Hauptbestandteile. Das sind die Chefs Das sind die Eltern. Wenn ich also Kopien davon mache, werden sie zu Exemplaren dieses Chefs. Das Coole daran ist, wenn ich den Hauptteil anpasse, tu es. Ich bin mir nicht sicher, was ich damit machen soll, aber ich werde es ruinieren Kann ich es aus dieser Entfernung machen? Kannst du es dort sehen? Es macht es mit beiden. Cool. Wir wissen, was Komponenten bewirken. Eines der Dinge ist jedoch, sagen wir, ich möchte dieses Navi auch zu einer Hauptkomponente machen , weil ich es auf vielen Seiten verwenden werde. Ich könnte genauso gut alles kontrollieren. Mal sehen, was passiert. Ich werde mein Tastenkürzel Command Shift K verwenden . Du bist die Komponente. Das ist ein Import-Bild. Das ist Befehlsoption K oder Steuerung K, was ist passiert? Es wurde zum Hauptbestandteil, das ist großartig, aber es hat sie abgefeuert . Woher kamen die? Das passiert, wenn ich die Dateien anderer Leute sehe, vor allem, wenn sie sich auf der mittleren Ebene befinden und noch nicht ganz fortgeschritten sind. Du sagst, sie lassen sie einfach hier liegen und was zur Hölle ist das passiert? Die Regel besagt, dass Hauptkomponenten nicht innerhalb anderer Hauptkomponenten verschachtelt werden können innerhalb anderer Hauptkomponenten verschachtelt werden Weil wir den Außenrahmen zur Hauptkomponente machen, hat er sie rausgehustet und das Innere hier gelassen. Siehst du, das sind nicht mehr die Hauptkomponenten. Schau, das sind nur Beispiele, kleine Diamantenversion. Was wir tun müssen, ist einfach darüber nachzudenken. Und was Sie finden werden, ist, dass wir ein bisschen zoomen. Du wirst sehen, dass der Typ hier drunter ist. Ich werde es tun. Was werde ich tun? Ja, lass uns sie rauswerfen. Und was ich tun werde, ist sie zu finden. Sie sind alle hier. Lassen Sie uns sie herausziehen, und wir werden sie auf einer Komponentenseite platzieren. Also werde ich sie ausschneiden und sagen, ihr wohnt jetzt auf meiner süßen Komponenten-Seite , von der ich nicht viel habe. Sie können sie auf demselben Dokument behalten Dagegen gibt es kein Gesetz. Aber wenn Sie an einer größeren Datei arbeiten, benötigen Sie wirklich eine Komponentenseite. Andernfalls können Sie sie einfach neben Ihrem Design haben und einfach hier rumhängen. In Ordnung, das ist wichtig , Nummer eins. Die andere Sache, die ich Ihnen zeigen möchte , ist , dass dies jetzt ein Hauptbestandteil ist. Also klar, was habe ich getan? Oh. Ich frage mich, was stimmt nicht? Gefroren? Nein, ich habe versehentlich die Tastenkombination für Lock Layer gedrückt. Ich kann mich nicht einmal erinnern , was es ist. Was ist die Tastenkombination für die Sperrebene? Bitte warte. Oh. Da ist es da Shift-Befehl raus. Ich habe nicht darauf geklickt. Ich habe auf etwas auf meiner Tastatur geklickt und sie wurde gesperrt. Jedenfalls. Also habe ich es freigeschaltet. Was ich tun muss, ist, dass ich das hier auch nicht wirklich benutzen sollte . Ich könnte es hier lassen. Das sind also viele Leute, die das einfach auf ihrer ersten Seite lassen und dann einfach Instanzen daraus machen. Seien wir clever, okay? Lass uns das rausschneiden. Gehen wir zu unserem Komponenten-Panel. Lass es uns hier reinstellen. Das ist ein noch größeres Durcheinander. Was haben wir hier gemacht? Du bist da. Was ich habe, ist, dass viele dieser Typen übereinander liegen. Ordnung. Ich möchte sie wirklich einfach aus dem Kurs streichen, aber diese Dinge werden dir auch passieren. Was zur Hölle ist da passiert? Ich mache es rückgängig, gehe zurück. Da müssen so viele Typen rumgehangen haben. Gehen wir zurück zu meinem Hi-Fi. Ich will dich zurück haben. Da bist du ja. Was ist das? Es gibt nur einen von ihnen. Kopiere und gehe zu meinen Komponenten. Klicken Sie auf Einfügen. Was habe ich getan? Vielleicht habe ich sie in diese Typen geklebt Hatten sie ausgewählt und eingefügt? Das ist es, was ich getan habe. Ich weiß nicht, was dort passiert ist. Du weißt, was ich tue. Wie dem auch sei, das passiert. Da hast du's. Ich hatte die ausgewählt. Ich hatte nur meine normale Paste und irgendwie sage ich, dass es ein Bug ist. Es sind drei von ihnen. Es hat für jedes Symbol, das ich hatte , eins eingefügt. Hm Oh, ich habe in jedes Bild eine Instanz davon eingefügt. Das ist komisch. In Ordnung. Da hast du's. Ich habe in diesem Kurs etwas gelernt. In Ordnung, fangen wir nochmal an. Schau es dir an. Schüttel es aus. Bist du bereit? Vergiss all das Verirren. Ich gehe zu Mobile Hi Fi. Ich werde dich sagen, mein Freund. Ich werde ihn schneiden, nicht kopieren. Da habe ich wahrscheinlich einen Fehler gemacht. Keine gute Komponente, also werde ich dich sagen. Nichts ausgewählt. Füge ihn ein. Hier werde ich diese Hauptkomponente aufbewahren. In dieser Hauptkomponente befinden sich einige dieser Beispiele dieser Typen hier oben. Ordnung, uns geht es gut. Gehen wir zurück zum Handy. Gehen wir zu unserem Assets-Menü und wir sollten in dieser Datei unter Komponenten eine Quellenangabe haben. Wir sollten wissen, wo er ist. Da ist jetzt mein Hintern. Okay, also ich werde das reinstecken. Es sollte jetzt eine Instanz sein. Cool. Sonst noch etwas? Wo müssen wir lernen? Gibt es, aber ich war nervös. Das ist es wirklich Was ich tun möchte, ist, dass ich hier auch eins reinstellen werde , weil es responsiv ist und wir es anpassen können. Das Coole an Instanzen der Hauptkomponente ist, sich daran zu erinnern, dass unsere Hauptkomponenten hier oben rumhängen. Das sind nur Kinder von ihnen. Sie tun, was er sagt, aber es gibt ein paar kleine Dinge, die wir tun können. Ich kann sogar sagen, dass die ausgewählten Farben hier drin weiß sein sollen. Okay, sie sind immer noch verbunden, wenn ich zu meiner Hauptkomponente zurückkehre und frage, wo ist der Typ hier? Ich sage, jeder hat ein gewisses Maß an Polsterung. Ich polstere unten. Ich möchte die Polsterung aufteilen. Wenn es um Navi geht, mag ich eher das untere, nettes kleines Kinn, lass uns 24 gehen, und das hier oben, lass uns 16 gehen Ich werde auch eine Hintergrundfarbe wollen. Ich werde es leicht cremefarben füllen. Nur weil ich finde, dass es cool aussieht und ich es gerne hätte und ich möchte sagen, dass Sie einen Schlagschatteneffekt haben. Ich möchte, dass es nicht runter geht, Null, nichts nach rechts. Das ist rauf und runter, also ich möchte minus vier sein, es geht nach oben. Kannst du es dort sehen? Vielleicht ist die Streuung oder die Unschärfe etwas größer. Vielleicht nur ein bisschen weniger Opazität. Ich habe das schon oft gemacht, ich weiß, was mir gefällt, ohne es auf dem Dokument zu sehen Gehen wir zurück zu unserem Handy und weil wir es auf unserer Komponente gemacht haben , wurden alle diese angepasst. Das ist sehr cool. Aber du kannst hier sehen, dass diese weiß geblieben sind, was auch sehr cool ist. Ich kann das Navi jetzt wahrscheinlich benutzen, aber ich wähle es aus und sage dir, ich möchte, dass es eine dunklere Farbe hat als ich. Ich habe das noch nicht wirklich im Idealfall geklärt. Die Hauptkomponente ist großartig. Legen Sie die Hauptkomponenten nicht in andere Hauptkomponenten, da sie sonst herausgespuckt werden Sie sollten sie wahrscheinlich auf einer separaten Seite speichern, aber das müssen Sie nicht, und Sie können Instanzen durch kleine Dinge wie Farbe überschreiben Ich kann das Symbol hier nicht anpassen. Ich muss zur Hauptkomponente zurückkehren, aber ich kann die Farbe und einen Teil des Layouts ändern und ich kann gehen, ein Ticket ausstellen, ich möchte hier drüben gehen Ich möchte den Augapfel ausschalten und er fließt wieder rein, weil wir Es ist immer noch da. Es ist nicht ausgeschaltet. Es ist unmöglich, etwas zu drehen oder zu löschen. Wenn ich auf meiner Tastatur darauf klicke und lösche, geht es einfach in den Ruhemodus. Schläfrig. Das Letzte an Komponenten sind sogenannte Einschränkungen Sie kennen sie, aber schauen wir uns einige Eigenarten an. Das hier, ich werde die Typen nach oben bringen. Im Moment ziehe ich das standardmäßig nach oben, sie verschwinden. Ich möchte, dass es unten im Navi bleibt. Ich werde Einschränkungen sagen. Ich möchte, dass es links und rechts , weil es das im Moment nicht ist. Schauen wir uns das mal an. Ich glaube, es dreht sich einfach nach links, also steckt es da fest. Ich muss sagen, du musst nach links und rechts gehen , damit es matschig wird. Außerdem möchte ich, dass es unten bleibt. Ihr werdet auf den Grund beschränkt sein. Du sagst, das weiß ich schon , Dan. Du sagst, okay. Aber wo ist es jetzt? Wo gibt es schöne Einschränkungen? Sie sind gegangen. Ich weiß. Die Einschränkungen müssen einen übergeordneten Frame haben. Andernfalls werden sie nicht angezeigt. Keine Einschränkungen, schauen Sie sich genau dasselbe innerhalb eines übergeordneten Frames an, Einschränkungen sind wieder da. Es muss nicht einmal eine Komponente sein. Wenn ich etwas zeichne, Rahmen, keine Einschränkungen, weil es keinen übergeordneten Rahmen hat . Er geht hier rein. Oh, er hat Einschränkungen. Glückliche Tage. Okay, das ist eine Sache, an die man sich erinnern sollte. Die andere letzte Kleinigkeit, ich sage die letzte Sache. Es werden wahrscheinlich noch 20 sein also gehen wir zurück zu meiner Komponentenseite. Du sagst, oh, das könnte ich genauso gut für ihn tun. Also dieser Typ, damit ich es nicht jedes Mal machen muss . Casey sagt, in Ordnung, keine Einschränkungen. Dan hat uns gesagt, dass es einen Elternrahmen braucht. Oft findet man alle Komponenten innerhalb dieses Rahmens, obwohl sie das nicht müssen, sodass man Dinge wie diese sehen kann. Schau, er steckt oben und links fest. Okay? Das macht nichts. Nehmen wir an, ich mache es wieder nach oben und ändere es auf damit ich nach rechts bleibe, das sollte ich tun. Ich gehe auf eine andere Seite. Lass uns gehen F Oh, das habe ich nicht gemeint. Ich ein Bild, klicken Sie darauf. Warum sollte ich das tun? Ich glaube, wir beschimpfen einfach alle. Was ist der übliche Schnitt War in meinem Gehirn, ich wurde von der FU abgelenkt. Oh, das wollte ich gerade sagen. Schnappen. Da hast du's. Ich habe diesen neuen Rahmen mit schlechter Sprache. Also werde ich mir mein Vermögen schnappen. Ich werde den einen Call Bottom finden und sie reinstecken. Steck sie irgendwo hin. Und sieh mal. Oh, er ist dabei. Er ist top, was die Standardeinstellung ist, aber pass auf. Er ist nicht richtig gegangen. Es ist also nicht wirklich wichtig, was du tust. Ich weiß nicht warum. Überprüfe es jetzt auf deiner Version. Das könnten sie ändern. Es wäre toll, es als Standard für die Hauptkomponente festzulegen , weil ich es nicht weiß. Das ist der Grund für die Hauptkomponenten, aber es funktioniert nicht. Lass mich wissen, ob es das tut, und die Kommentare, du musst es irgendwie danach tun. Das ist okay. Okay, oben, unten. Denn wenn du es einmal gemacht hast, ist es nicht so schlimm, okay? Denn oft schnappst du sie dir, okay, und du fügst sie ein und er bringt das Zeug mit. Nur nicht von der Hauptkomponente. Ordnung, es gab einen lustigen. Wir haben ein bisschen geschworen, wir haben uns verirrt und haben uns wirklich Ich hoffe, du fandest es nützlich. Komponenten sind einfach, können aber auch ein paar schnelle Teile enthalten, und das ist die Art von schnellem Zeug, das ich gerne Großartig. Das ist es. Wir sehen uns im nächsten Video. Ich werde Sachen mit runden Ecken versehen. Das ist alles was ich tun werde, okay? Du kannst jetzt gehen. Ja. Acht ist eine schöne Größe für ein Telefon. Eigentlich müssen sie für ein Telefon größer aussehen. 24 ist repräsentativer für ein modernes Telefon, sogar ein bisschen größer. Ich sehe es gerne im Design. Das musst du nicht, wenn ich das rückgängig mache und wieder zum Anfang zurückkehre. Wenn ich es prototypisch mache, geht es natürlich rein und wird sowieso von der Innenseite eines Telefons abgeschnitten Du brauchst es also nicht wirklich, aber du benutzt meine Pfeile, okay? Du kannst sehen, dass sie abgerundete Ecken haben, richtig große auf dem neuen iPhone. Ordnung. Das war alles was ich wollte. Ich werde dahin zurückkehren, wo, oh, ich werde zurück in meine Eckrunde gehen. Ich mache das in der Pause, du machst mit dem nächsten Video weiter. Wir sehen uns dort. 21. Welcher Abstand sollte in Figma verwendet werden?: In diesem Video werden wir darüber sprechen, welcher Abstand verwendet werden soll Sie können alles verwenden, was Sie möchten, aber wofür auch immer Sie sich entscheiden, Sie können dieses kleine Raster hier erstellen. Es gibt dir eine nette kleine visuelle Referenz für unterwegs. Okay, ich verteile hier den Abstand. Was sollte es sein? Milla Lass uns 32 benutzen Ich kann sichergehen, dass das 32 entfernt ist. Derzeit ist es 43. Es ist nicht gut. Sie können es nur als visuelle Anleitung verwenden, was sollte ich verwenden? Halten Sie sich an Ihren Abstand. Ich werde Ihnen auch zeigen, wie Sie mit einer App all diese kleinen Maße hinzufügen oder die Boxen zeichnen können. Und wir machen es einmal und du kannst diesen kleinen Kerl kopieren und bei jedem neuen Job einfügen sodass es in Zukunft keine Zeit mehr dauert. In Ordnung, lassen Sie uns einsteigen. In Ordnung, fangen wir an, sie herauszuziehen. Sobald Sie es einmal gemacht haben, können Sie jedes zukünftige Dokument für immer kopieren und einfügen Okay? Also ich möchte, dass das eine schöne, helle Farbe ist, damit ich sie als visuelle Referenz sehen kann. Und ich will meine erste, die grundlegendste Größe ist acht mal acht, okay? Und weil ich Einschränkungen aktiviert habe, okay, bedeutet das, dass ich sie nur einmal eingeben muss und es aktualisiert sowohl die Höhe als auch die Breite. Spart ein bisschen Zeit. Okay, also acht ist die erste. Ich werde ein wenig heranzoomen. Okay, und ich möchte eine visuelle Darstellung der nächsten Größe sehen , die nur weitere acht ist, also 16. Dann will ich einfach in Achter weitermachen, okay? Ich bin ein bisschen verwirrt mit Mathe in meinem Kopf, also habe ich nur das plus acht im Feld Okay? Wir sind bei 24. Das weiß ich. Okay, 32. Das sind die wirklich gängigen Größen. Du kannst weiter nach oben gehen. Es liegt an dir. Du kannst auch ein Vielfaches von sechs oder fünf machen. Sie sind nur schwieriger zu unterteilen und Ihr Entwickler wird Sie hassen , weil die Entwicklerin oft mit einem Framework arbeitet, das bereits existiert Anstatt in all den Nullen und Nullen und 16 Pixeln zu schreiben , wird sie die vorgefertigten Abstände verwenden, und es werden wahrscheinlich acht oder eine Division davon sein Hängt davon ab, wie sehr du deinen Entwickler magst. Ich mag es auch, den Abstand da drin zu lassen. Weil ich diese mag, denn welche Größe sollte mein Button haben? Icon B, Bild B. Du bekommst ein Gefühl dafür, wenn du sie dir ansiehst. Den Abstand lasse ich gerne. Wenn du weit genug hineinzoomst, kann ich meine Pixel nicht mehr sehen. Früher war ich dazu in der Lage. Ich bin mir nicht sicher, ob ich meins ausschalte oder ob es standardmäßig ausgeschaltet ist. Du wirst es wissen, weil deine entweder an ist, du wirst die kleinen Pixel hier sehen können. Sie können bis zu wenige auswählen und Sie können zum Pixelraster wechseln . Und du kannst sie sehen. Weil ich vier davon zählen möchte . Schau, ich habe dort vier. Das ist die Art von Mindestlücken für Dinge. Offensichtlich ist die minimale Lücke Null. Minimis ist kein Wort, Dan, die nächste Größe wird wieder größer Also nehmen wir eins, zwei, drei, vier, sechs ist gut. Entschuldigung, acht ist eine weitere. Die Leute benutzen sechs. Ich gebe dir nur die allgemeinen Regeln. Die Leute tun, was sie wollen. Also sechs, die du häufig sehen wirst. Ich werde mich an dieses Achterraster halten. Woher weiß ich das? Anstatt Pixel zu zählen, können Sie ein paar Dinge tun. Wenn Sie beispielsweise diese Option ausgewählt haben, halten Sie die Optionstaste auf einem Mac gedrückt, die Oh-Taste auf einem PC gedrückt und wandern Sie einfach herum Du kannst sehen, dass es dir den Unterschied zwischen all diesen Typen verrät. Acht, du hast es geschafft. Oder du kannst das tun. Du kannst sagen, du fängst dort an und dann will ich, dass die Ausstellung plus 16 Ich wollte 16, weil es quer ist, um diese Lücken zu sehen. Dieser hier, wollen wir eine Lücke von 24? Wir brauchen wahrscheinlich einen dazwischen. Was ich tun werde, ist, anstatt plus 16 zu gehen, was bin ich plus 16 gegangen? Ich habe es getan. Ich wollte hier eine andere Größe. Ich werde das rückgängig machen. Geh bitte zurück. Ich mache plus acht plus vier. Das macht die Masse schwer. Das funktioniert in meinem Gehirn. Ich will also nicht die vollen 16 sein. Ich will nur 12 sein. Ich gehe plus 12. Es ist eine vernünftigere Größe. Es ist immer noch teilbar, es gibt Achter, du verstehst mich Okay? Und dann könnte dieser die Größe von 16 haben. Also werden wir plus 16 bekommen. Du kannst mit den Größen weiter nach oben gehen, aber die gefallen mir. Das ist eine gute Referenz, die man in jedem Dokument haben sollte. Kopieren Sie es oder fügen Sie es ein, damit Sie anfangen können. Siehst du diese Lücke hier? Was sollte es sein? Wahrscheinlich der. Nein, vielleicht dieser. Vielleicht wären die Lücken dazwischen auch nett. Kannst du sehen, dass es nur eine visuelle Referenz ist? Das funktioniert vielleicht nur in meinem Kopf. Eine Sache, die ich tun möchte, ist, dass ich nicht weiß, was das ist. Ich muss darauf klicken. Da steht 32. Es ist nicht schwer. Ich zeige dir ein Call-Plugin. Ich gehe runter zu meinem Aktionen-Menü. Gehen wir zu Plugins. Da ist dieser namens Design Doc. Sie benennen es gerade in Spectral um. Ich glaube, sie haben es in Spectral umbenannt, und dann haben es nicht alle gefunden, also sind sie zurück zu Design Doc gegangen Es könnte etwas anderes genannt werden. Bis du hier ankommst, gibt es schon viele, die das machen. Das ist nicht nur einer von ihnen. Das ist der, den ich mag. Das ist der beste? Ich habe keine Ahnung. Ich benutze nur das. Eigentlich gibt es eine namens Dimension, es gibt Anmerkungen. Es gibt noch ein paar andere. Sie könnten einfach Maße eingeben und sehen, was Sie bekommen. Wenn dieser nicht mehr verfügbar ist. Es ist wie ein Todeskuss, wenn ich sie zu einem Kurs hinzufüge. Sobald ich ein Plug-In mache, stirbt derjenige, der es gemacht hat , oder hört zumindest auf, es zu aktualisieren. Lass uns diesen ausführen. Ich mag diese Maßnahme. Es gibt viele andere coole Dinge, die wir machen. Aber schauen wir uns das an . Schauen wir uns das an. Ich werde dazu gehen. Ich werde sagen, ich möchte, dass du die Höhe knapp darüber setzt. Da hast du's. Es ist nicht vorübergehend. Es ist für immer da. Sie können es in meinem Anzeigen-Panel sehen. Da ist dieser Behälter, in dem meine Maße stehen. Ich kann ein- und ausschalten. Es ist einfach sehr praktisch. Das Gleiche gilt diesen, lass uns gehen, du brauchst. Auch einer der Besten. Du auch, bitte, top. Es ist einfach eine nette, sauberere Art zu sehen, welche Größen man hat. Wahrscheinlich werden ein paar größere Größen benötigt. Sie können auch die Lücken zwischen den Dingen schließen. Ich kann sagen, du und du. Lass uns den Raum dazwischen machen. Oh, als ich es unten gemacht habe, war es so clever. Okay, ich mag kleine Apps wie diese. Das ist super hilfreich. Das habe ich jetzt vergessen. Sie können es jedes Mal kopieren und in das neue Dokument einfügen , wenn Sie eines beginnen und dann haben Sie einen schönen kleinen visuellen Hinweis wo sich alles befinden wird. Was ich an dieser App mag, ist, dass ich sie gerne hineinlege, um all das zu schaffen. Es ist ziemlich chaotisch. Ist es chaotisch? Ich weiß es nicht Ich werde es in einen Rahmen einfügen, und ich werde diesen einbauen , der heißt, es ist nicht alles reingegangen. Der Container wollte wirklich nicht rein. Ich glaube, das liegt daran, dass er verschlossen ist. Ich kann es hineinziehen. Du gehst da rein, Kumpel. Ich bin ein Debss. Ich werde das hier abholen. Nur damit ich es zumachen kann und es ein bisschen schöner ist, damit ich es zumachen kann Oh, das ist komisch. Alles ist da. Ich kann es nicht auswählen weil es gesperrt ist, und ich kann nicht, oh da ist es. Hallo. Das tut mir leid. Ordnung, lassen Sie uns den Hintergrund des Abstands dunkel machen , weil er seltsam und weiß aussieht. Weil ich es entworfen habe. Lass uns schwarz werden. Wirklich hoher Kontrast. Also, das ist diese App. Wir schauen uns das später an. Ich will es dir zeigen, weil ich nicht weiß, ich kann mir nicht helfen. Ich liebe diese Mess-App. Oh nein, das machen wir später im Kursstand. Tun Sie es jetzt nicht. In Ordnung. Das sind die grundlegenden Abstände. Du kannst alles verwenden, was du willst. Was auch immer Sie tun, erstellen Sie ein kleines Raster. Sie sich einmal Mühe geben , können Sie es immer wieder verwenden. In Ordnung. Nächstes Video. 22. Welchen Abstand sollte ich für Web- und App-Entwurf in Figma verwenden?: Hallo, alle zusammen. Lassen Sie uns ein bisschen mehr darüber sprechen, wie der Abstand sein sollte. Ich habe dir in der letzten Version einige generische Dinge gegeben. Woher habe ich diese Magie? Wie wirst du besser darin? Wenn du deine Abstände schon ziemlich gut beherrschst, kannst du weitermachen Aber wenn Sie ein bisschen Hilfe benötigen, um sicherzustellen, dass die Dinge konsistent und einfach sind, mit Ihrem Entwickler zu arbeiten, wenn Sie Ihre App übergeben, ohne Probleme zu verursachen oder zumindest darauf zu achten, dass der Entwickler und das, womit er arbeiten wird , Watch oh, es gibt viele Orte an denen Ihre App oder Website enden wird, und was enden wird Was passiert, ist Ihr Ingenieur, Ihr Entwickler, wen auch immer Sie für die Erstellung verwenden, es könnten Sie sein. Es ist sehr wahrscheinlich, dass es auf einem sogenannten Framework aufbaut. Ihre Entwicklerin, sie wird nicht alle Nullen und Nullen durchgehen und eingeben. Okay? Sie werden auf den Dingen aufbauen, sie hätten auf den Dingen gebaut, sie werden darauf aufbauen. Wenn Sie ein IOS-Entwickler sind, okay, der Entwickler wird die vorgefertigten oder zumindest die Richtlinien von Apple verwenden. Wenn es Android ist, wird es dieses Material sein. So nennen sie ihr Designsystem, und sie geben dir viele hilfreiche Informationen darüber, wie die Dinge voneinander getrennt sein sollten Wenn du ins Internet gehst, könnte es Bootstrap sein, es könnte Rückenwind sein Sprechen Sie also mit Ihrem Entwickler, finden Sie heraus, wohin es führt, worauf sie es aufbauen, und lesen Sie sich dann ein wenig herum. Es kann verwirrend sein. Wir müssen mit solchen Dingen anfangen, damit Sie tatsächlich, ich weiß nicht, anfangen können, vielleicht ein bisschen CSS, ein bisschen Code zu verstehen, damit Sie Ihren Entwicklerabstand von sieben nicht über Bord werfen , weil sieben schwierig ist, weil Sie ihn nicht in zwei Hälften teilen können. Okay, du kannst kein halbes Pixel haben. Sie können acht in zwei Hälften teilen. Sie können vier Pixel haben. Schauen wir uns auch einmal an, warum acht gut ist. Schauen wir uns also Material für Android an, okay? Im Materialpunkt IO. Sie sind auf ihrer dritten Version. In Zukunft sind Sie vielleicht bei Version vier oder fünf. Schau es dir an. Ich unterstehe Fundamenten. Ich schaue mir das Layout an und verstehe es laut. Und es ist wirklich nett zu sagen, dass der Abstand zwischen den Spalten eine Standardeinstellung von 24 DP ist , was im Wesentlichen Pixeln entspricht. Abkürzung für geräteunabhängige Pixel. Sie verwenden dies, weil viele verschiedene Telefone unterschiedliche Pixeldichten haben Betrachte es einfach als Pixel , wenn du das verstehst. Und wenn Sie Figma entwerfen, ist DP gleich Px. Sie verwenden einen Abstand von 24. Stellen Sie also sicher, dass Sie, wenn Sie Ihren kleinen Abstandhalterblock bauen und zuerst zu Android wechseln, Ihren Abstand 24 einhalten Das ist die Standardeinstellung. Es ist glücklicherweise durch acht teilbar Nicht zufällig. Aber zumindest ist es Moment ein wirklich üblicher Abstand. Schauen wir uns IOS an. Lesen Sie sich durch , was sie tun. Ich glaube, 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 sowohl Telefone als auch Fernseher und Gadgets gibt, okay? Es gibt Uhren. Schauen Sie sich das mal an. Wofür auch immer Sie entwerfen, es wird eine Dokumentation online geben. Du gehst ins Internet, also baust du eine Website oder eine Web-App, finde heraus, ist es Wordpress? Benutzt Wordpress Bootstrap? Bootstrap ist ein Framework, das Entwicklern hilft, schnell zu arbeiten. Okay? Und was sie am Ende tun werden, ist, schauen wir uns das mal an. Ich habe das gefunden, okay? Die Dachrinnen nennen sie es Okay, der Abstand zwischen den Objekten und die Standard-Dachrinnen sind 1,5 RM, und Sie können sehen, dass dort 24 Pixel stehen, genau wie Wenn ich also 24 als Abstand verwende, wird es dem Entwickler gefallen, weil es irgendwie mit Bootstrap und Android konsistent ist , je nachdem, wohin Sie Jetzt gibt es 100 verschiedene Frameworks. Tailwinds, die Leute benutzen das oft, okay, um ihnen beim Styling zu helfen Sie können hier sehen, ich habe unter GAAP gefunden, Bootstrap nennt es Gutter, Tailwind nennt es Gap Als UI-Designer ist es nützlich, das alles zu wissen. Sie können hier sehen, was ein Entwickler eingibt, ist, dass er die Nummer nicht wirklich eingibt. Sie werden hoffentlich in der Nähe einer von diesen sein. Also werden sie beim Programmieren Leerzeichen eingeben, um zu sagen, dass Lücke Null ist, was Null ist. GAP ist eins, was 0,25 von REM entspricht. Ein REM ist standardmäßig 16. 0,25 von 16 sind also vier Pixel. Also vielleicht ist der kleine Abstand, den wir vorher hatten , der Mindestabstand hier, und es ist eine gute Regel, nicht drei zu wählen Wissen Sie, die Unterteilungen werden knifflig und Ihr Entwickler wird viele der Framework-Standardeinstellungen überschreiben müssen viele der Framework-Standardeinstellungen überschreiben Sie können es tun, aber Ihr Entwickler wird es wahrscheinlich einfach ignorieren und einige der Standardeinstellungen verwenden , sofern Sie sie nicht erzwingen Okay? Lass uns einen Blick darauf werfen. Also 16, sechs, acht, zehn, oh, da ist eine Zehn. Sie könnten in Ihrem Design entscheiden , dass Sie eine Zehn benötigen. Wo war sie? Wir haben keine Zehn. Wir haben vier, sechs, acht, 12. Es gibt keine wirklich festen Regeln, was das sein können. Aber wenn du vier Frameworks entwirfst oder sie ein bisschen verstehst, vor allem, wenn du weißt, wohin es führt, wenn du weißt, dass der Entwickler Rückenwind nutzt, großartig. Geben Sie all diese ein Das Wichtigste ist also, dass ein Vielfaches von acht gut ist, aber du solltest dir wirklich ansehen, wie es gemacht wird, und das kopieren Dadurch wird der Übergang von Figma zum eigentlichen Design und zur Entwicklung viel nicht, aber ich habe auch ein Web-Essentials, das viele der Dinge abdeckt , die wir uns hier ansehen, wie zum Beispiel, was ist ein REM? Was ist ein DP? Was ist Bootstrap? Was ist Flexbox Es gibt alle möglichen guten Dinge, die Sie lernen können und die Ihr Design beeinflussen werden, wenn Sie in Figma sind Aber das würde den Rahmen dieses Kurses sprengen, aber ein bisschen HTML- und CSS- und Framework-Kenntnisse machen Sie meiner Meinung nach zu einem besseren UX-Designer Ordnung. War das verwirrend? War ein bisschen mäandrierend. Wie dem auch sei, lass uns zu etwas mehr Hard Skills 23. Klassenprojekt 04 - Reaktionsschnelle untere Navigation: Es ist Zeit für Klassenprojekte. machen die Low-Navigation. Wir haben es bereits getan, falls du mitgemacht hast. Ich will nur irgendwie alle hierher bringen. Ich möchte also, dass du den Low Nav erstellst, okay? Es ist dieser Typ hier, okay? Und ich will, dass es ein paar Sachen macht, okay? Und wir werden einfach die Dinge üben, die wir bereits gelernt haben. Ich möchte also sichergehen, dass Sie Komponenten verwenden, sowohl die Icons als auch das Navi. Was bedeutet das? Okay? Dieses Ding hier ist ein Beispiel für meine Hauptkomponente, die hier drüben ist. Um das zu tun. Das sind Hauptbestandteile meiner Icons. Stellen Sie sicher, dass Sie das nur zum Üben tun. Sie müssen ein automatisches Layout für Ihre Navigation verwenden , damit Sie den automatischen Abstand zwischen den Elementen festlegen können Das heißt nur, wenn ich das aufnehme, wird zusammengedrückt und die Symbole haben automatische Abstände , die rein und raus gehen nach außen automatisch raus und stellen Sie sicher, dass Sie das Auto zwischen ihnen einrichten können Der letzte Punkt da ist mit Einschränkungen verbunden. Einschränkungen ermöglichen es uns, dies mit einer Navigation zu tun. Ich möchte, dass Sie es unten und links und rechts , sodass wir, wenn wir eine neue Seite auswählen, tatsächlich zu dieser gehen, nicht zu einer neuen Seite, sondern sagen wir, wir müssen eine andere Rahmengröße verwenden, weil wir das tun, ich weiß nicht. iPhone 13. Schau, es ist geschrumpft Es ist kein so großer Unterschied. Das war aufregend, aber man kann sehen, dass es sich unten und an den Seiten festsetzt. Das ist der Teil mit den Einschränkungen Mach all das. Dann möchte ich, dass du auf einer deiner Seiten ein Video aufnimmst, in dem du diese Sache machst , damit wir sehen können, dass du es geschafft hast. Wenn du keine Videos aufnehmen kannst, weil es einfach zu schwer ist und du es nicht schaffen kannst, akzeptiere ich Screenshots, ich vertraue dir, dass es funktioniert. Machen Sie vielleicht einen Screenshot davon. Außerdem können wir all die Dinge sehen, die hier vor sich gehen, und wir sagen, ich kann die Einschränkungen sehen und sie scheinen, dass ich es liebe, Videos zu sehen wenn Sie sich nicht sicher sind, wie Sie ein Video auf Ihrem Computer aufnehmen sollen. Die meisten Macs und PCs haben eine integrierte Software, Macs nennen das Bilderfassung kannst du gebrauchen. Ich benutze Camtasia Sie können QuickTime verwenden, das sowohl auf dem Mac als auch auf dem PC kostenlos ist. In Figma gibt es Plugins, die interessant sind. Du kannst zu den Plugins gehen. Der, den ich zuvor verwendet habe, ist VmeovMovMo-Record, mit dem Sie sich anmelden können und ein kostenloses Konto bei ihnen einrichten müssen, aber Sie können Ihren Bildschirm in der App aufzeichnen Bildschirm Es wird auch andere Plug-ins geben. Wenn du es hochlädst, wollen wir den Link zum Video, nicht das eigentliche Video selbst Wir können nicht die riesigen MP Fours nehmen, sie entweder auf Vimeo, Bee Hunts oder YouTube mit kostenlosen Accounts hochladen und dann einfach den Link reinschicken In Ordnung. Das eigentliche Ziel hier ist nicht so sehr, Videos zu machen, sondern diesen responsiven unteren Navigationsbereich zum Laufen zu bringen. Ich möchte, dass du damit übst und wir sehen uns im nächsten Video. 24. Klassenprojekt 05 - Einschränkungen der Ereigniskarte: Ein weiteres Klassenprojekt. Haben wir nicht gerade ein Klassenprojekt gemacht? Wir haben es getan. Das ist so etwas wie ein Pickup-Pfad. Mach es selbst. Ich lasse dich eine ansprechende Eventkarte erstellen. Das macht das auf eigene Faust. Ich möchte, dass du dieses Ding kreierst, alles ansprechend und gut. Also die Daten sind in der Ecke hängen geblieben , ein bisschen Text und Bild. Oh. Ich überlasse es dir einfach. finde, diese kleinen Projekte gehören zu den besten, um Leute zu lernen, wo Sie alle Tools haben. Ich habe dir alles beigebracht, was du wissen musst, aber etwas Eigenes zu machen, das nicht mitmacht, kann sowohl knifflig sein als auch irgendwie alle Fähigkeiten in Oh, okay. Weil es ein paar Möglichkeiten gibt, das anzugehen. Weil es das gibt und es schwierig sein kann, abhängig von deinen Figma-Fähigkeiten, gibt es gleich danach ein Video, in dem ich es baue Wenn Sie sich also verirren, können Sie gleich zur Sache kommen und zusehen, wie ich es baue Aber mach es selbst und dann schau, wo du hingekommen bist. Es ist eine Herausforderung. Ich fordere dich heraus. Mal sehen, ob du es schaffst. Ihr Weg könnte anders sein als meiner. Du könntest dich verirren. Das ist total cool. Aber ich wette, du gehörst zur Mondstadt. Wenn du fertig bist, teile ein Video von deiner Reaktionsfähigkeit Okay? Diese Seite auf der rechten Seite hier, weil ich möchte, dass der Text erweitert und zusammengezogen wird, okay, wodurch die Box größer wird. Das muss nicht genau so sein , wähle dein eigenes Bild. Auch hier versuche ich, Bilder von mir zu finden. Middle Age ist wahrscheinlich zu alt für mich, aber ich bin auch nicht dieser Typ. Der Text und alles andere machen mir nichts aus. Es ist eher die Struktur. Da ist ein Bild drin, oben rechts klebt ein Datumsfeld. Vielleicht sind das Einschränkungen. Einzelheiten zur Veranstaltung. Stellen Sie sicher, dass es die Komponente ist, dann die Ergebnisse, ein Video, Sie können die Videos nicht machen. Ein Bildschirmfoto Das ist cool, du kannst es in sozialen Netzwerken teilen. Vergewissere dich, dass du den Hashtag Figma Advanced verwendest und mich darin markierst, damit ich es mir ansehen kann Das ist es. Viel Spaß beim Erstellen deiner eigenen Eventkarte. Sehen Sie im nächsten Video. 25. Klassenprojekt 05 - Abgeschlossen: Hallo. Dieses Video ist meine Version davon, wie ich dieses Ding zum Laufen gebracht habe. Sie können mitverfolgen, um zu sehen, wie nah Ihre an meiner war. Es ist nicht wirklich wichtig, wie Sie zum Endergebnis gekommen sind. Aber wenn du nicht weiterkommst, du steckst immer noch fest, du kannst mir zuschauen. Wir verlieren uns in diesem Video ein bisschen. Es gibt ein paar kleine Abkürzungen. Also, selbst wenn du es verstanden hast und es ziemlich einfach wäre , überfliege diesen, dreh vielleicht die Geschwindigkeit hoch und da sind Kleinigkeiten drin. Das ist es, was ich meine. In Ordnung, es gibt also keine wirkliche Regel , wo man anfangen soll, und es gibt ein paar verschiedene Möglichkeiten, das zu tun. Ich werde zeigen, wie ich es getan habe. Wenn ich es mit Schülern im Unterricht mache, finden die Leute andere Möglichkeiten, das zu tun. Also mach dir keine Sorgen, wenn deine etwas anders ist. Ich werde hier mit meinem oberen Rahmen beginnen, dem Bild mit dem Datum darin, und ich werde später am Text arbeiten. Also werde ich es füllen , damit wir sehen können, was wir tun. Wählen Sie eine beliebige Farbe, solange es grün oder türkis ist. Ich möchte also einen weiteren Rahmen hineinlegen und eine andere Farbe wählen. Etwas klares und ich werde sagen, du gehst da rein und innerhalb dieses Rahmens, ich möchte sagen, dass du dich nur auf die obere und rechte Seite beschränken musst auf die obere und rechte Seite beschränken Hoffentlich haben wir diesen Teil jetzt im Griff. Das ist der erste Teil, dieser untere Teil, wie machen wir das? Nun, du willst es nicht wirklich hier reinlegen, du willst, dass es in einer separaten Box ist , weil es etwas anderes machen muss. Ich werde eine neue Kiste machen. Ich werde sagen, dass das ohne Grund eine dunkle Farbe ist. Ich werde etwas Text hineinlegen , die Elemente hineinwerfen. In Ordnung, ich füge nur Text ein. Alles was ich tun muss ist es vielleicht die richtige Größe hat. Das ist der erste gute Schritt. Ich möchte, dass dieser Text hier drin einbricht. Ich möchte sagen, dass du nicht diese Art von automatischer Breite oder fester Größe hast, ich will diese mittlere automatische Höhe, und dann werde ich sie kaputt machen, damit du da hingehst. Perfekt. Aber wenn ich die Größe ändere , passiert nichts, weil dieser Typ Autoout braucht Okay, also ich sage Schicht A. Er ist außen rundum gewickelt Perfekt. Jetzt haben wir ein bisschen responsiven Text im Gange. Es funktioniert nicht. Der Text hier ist jetzt die automatische Höhe, aber wir müssen die Breite je nach übergeordnetem Objekt oder Container ändern . Schauen wir uns die Breite an. Sie hat eine feste Breite. Ich möchte den Fokus nicht auf die Breite legen. Ich möchte sagen, ich möchte du den Behälter füllst, bitte. Wenn sich der Behälter nun ändert, versucht er ihn zu füllen. Geh. Also, was sind diese beiden Teile, und du könntest sie getrennt lassen, aber das wäre seltsam. Also wollen wir jetzt beide in eigenen Rahmen zusammenfügen. Beide haben, ich würde sagen, diese Typen ausgewählt. Okay. Geben wir ihm einen Namen, damit wir uns nicht zu sehr verirren. Nun, schauen wir mal, wie gut die automatische Benennung funktioniert. Also lass uns gehen. Gehen wir zum Umbenennen. Da ist es, Ebenen umbenennen. Schau einfach, was es macht. Es wird besser und besser. Ich wette, Container. Fußzeile. Oh, es ist gut gemacht Behälter. Nennen wir das ein Bild. Es wird angenommen, dass das das Bild war, aber das ist es nicht. Das ist das Datum. Es ist nah dran. Es ist sowieso ein guter Vorspeise. Oh, ich mag es wirklich. Ich habe einen Behälter drin. Ich habe die beiden Kisten, die ich gemacht habe. Schauen wir uns das an und testen wir einfach jedes Mal weiter. Schnapp dir den Elternteil, funktioniert das alles? Tut es nicht. Warum? Das liegt daran, dass es kein automatischer Ausgang ist. Dieser Container, Audioausgang, bitte. Lass es uns versuchen. Lass uns sehen, was es gemacht hat. Wir bauen es selbst. Wir verwenden nicht die KI-Funktion „ Alles für uns erledigen“. Es funktioniert. Nur dass der Boden nicht rauf und runter geht. Was ich tun möchte, ist wahrscheinlich, dieses Bildfeld hier in Ruhe lassen zu wollen . Ich will nur das Textfeld unten haben. Komm runter. Was ich tun werde, ist dass du was tun musst? Du musst den Behälter füllen. Also, diesmal ist es die Höhe, die Breite, die wir gemacht haben, aber wir haben uns die Höhe nicht geliehen Also, wir wollen nicht, dass du dich umarmst. Keine Umarmungen hier, Kumpel. Wir wollen den Behälter füllen und ich möchte, dass du ihn füllst, aber ich möchte, dass du dich bitte an die Spitze hältst Schau dir das Elternteil an. Was machen wir hier? Es hat funktioniert. Oh, lassen Sie uns mehr Details eingeben und schauen , ob wir es kaputt machen. Okay? Aber das sind quasi die Grundlagen. Was die Leute tun, und ich tue es. Es gibt keinen wirklich schwierigen Weg, es zu tun. Du fängst mit dem Elternteil an, dann fängst du an, mit den Blöcken dazwischen zu arbeiten und dann einen weiteren Block für das Datum einzufügen . So kannst du es machen Es ist ein bisschen komplizierter, wenn du neu bist. Wenn Sie es auf diese Weise angehen und es wirklich frustrierend fanden, versuchen Sie zuerst, die einzelnen Teile zu machen und sie dann zu kombinieren Aber es ist nicht wirklich wichtig, ob du zuerst versuchst, den Container-Rahmen zu bauen und zuerst versuchst, den Container-Rahmen dann anfängst, Dinge darin zu bauen Es ist ein bisschen kniffliger. In Ordnung, ich möchte, dass das ein Bild ist. Also kann ich hier nicht einfach ein Bild reinlegen , weil das übertrieben ist Also drücke ich Command Shift K, um mein Bild, Control Shift C PC, einzufügen Control Shift C PC Weißt du, ich weiß, du weißt es. Ich werde das reinbringen. Was ich tun möchte, ist, dass ich mir den Rahmen schnappen möchte. Eigentlich hätte ich den Rahmen auswählen und ihn als Füllung einfügen können. Ich habe es anders gemacht. Ich werde mir das schnappen, die Füllung stehlen, kopieren, das grüne nehmen und auf Einfügen klicken. Ich brauche den grünen nicht mehr. Und hoffentlich, erinnerst du dich an den Test Test Test, immer funktioniert hat? Es funktioniert. Cool. Nett. Als nächstes folgt dieser Text hier unten. Ich werde das einfach durch Command K ersetzen. Ich werde sagen, schreibe das um und ich gebe etwas ein, das eher einen Sing-Song-Rhythmus Ich weiß, was das ist. Lass uns vier gehen. In Ordnung. Ich bin mir nicht sicher, was das bewirken wird. Befehl Enter, damit das KI-Zeug das macht. Manchmal musst du es jetzt kürzer machen . Ich muss Änderungen vornehmen. Ich denke, das ist lang genug. Lass uns kürzer machen, weil ich eine kleinere Schrift verwenden werde. Wenn du die KI nicht hast und dir wünschst, du hättest sie, kannst du einfach zum kostenlosen Chachi BTK gehen oder einfach alles eingeben, was du In Ordnung, Schriftgröße, ich gehe auf 16. Du kannst jetzt gehen. Ich weiß es nicht. Wenn ich auf Probleme stoße, werde ich es vielleicht tun. Eine Sache, die dort passiert ist, ist Sie bemerkt haben, dass es keine Polsterung gab Also habe ich es größer gemacht und es wurde nicht erweitert. Es funktioniert immer noch. Schau, es ist alles skalierbar, aber ja, ich habe es nicht auf den Boden getrieben. Wer weiß warum? Ein paar Dinge. Zuallererst möchte ich, dass der Typ automatisch höhenverstellbar ist. Und auch sein Elternteil, der übergeordnete Rahmen, funktioniert, die Polsterung ist wirklich klein Ich würde sagen, hier in der Polsterung ist 24 toll an den Seiten Ich möchte, dass Ober- und Unterseite unterschiedlich sind. Ich gebe dir eine Abkürzung für jeden, der so lange rumgehangen hat. Nehmen wir also an, ich möchte, dass es 24 sind. Aber dann kannst du ein bisschen Cameron einsetzen , Cameron die Tastatur. Das ist die Spitze. Wenn du einen Cameron einsetzt, kannst du den unteren Teil bis 32 machen. Das hat zu 100% irgendwie funktioniert. Ich habe 24 an der Spitze, 32. Okay, aber mein Text hier drin macht nicht das, was er sollte, die Größe dieses Typen. Die Größe dieses Kerls. Du bist satt Das Paar und den Behälter füllen. Mein Paar und meine Behälter sind nicht groß genug für den Text. Komm schon, Dan. Also der Trick hat funktioniert. Kannst du das sehen? Ich habe 32 unten, 24 oben. Sie können dasselbe für links und rechts tun. Sie können einfach Kommas hinzufügen Es erspart dir nur, nicht wirklich viel zu tun, als das zu öffnen Sie können einfach Kommas verwenden. Du bist ein Computerhacker Du bist willkommen. In Ordnung, andere Dinge werden mir Probleme bereiten Ich möchte, dass diese Höhe so aussieht, wie ich zwei tippe. Macht es das? Ist es nicht. Und das nur, weil ich es dauernd mit mir herumschleppe , um zu beweisen, dass es funktioniert Ich will, dass dieser Erbe auf den Grund geht. In Bezug auf die Höhe gibt es also ein paar Dinge zu tun. Siehst du, da steht , Behälter füllen, also sollte es das machen. Aber dieses Elternteil, wo ich hingehe, klicke aus, klicke c an. Dieses Elternteil hat eine feste Größe. Er hat eine Größe von 330. Er zwingt es, es größer zu machen. Also kann ich sagen, dass ich eigentlich nur den Inhalt umarmen möchte. Eigentlich bist du jetzt so groß, dass ich möchte, dass du den Inhalt auch umarmst Es kann ein bisschen komisch sein, diese Dinger aufzustellen. Also, was ich jetzt suche, ist das. Wenn ich Sachen tippe, Sachen tippe und es wird länger, es wird größer. Fantastisch. Wenn ich jetzt rausgehe und das übergeordnete Dokument herausnehme und es auf ein größeres Dokument kommt, kann ich es einfach herausziehen. Schau mich an. Wie weit von den Rändern entfernt? Was ich tun könnte, ist meinen Guide einzuschalten. Lass uns zu den Eltern gehen. Gehen wir hier runter, Layout-Anleitungen. Wir haben es im Wesentlichen gemacht, lassen Sie es uns noch einmal hier reinwerfen. Layoutanleitung hinzufügen. Ich möchte keine Raster. Ich will Spalten Ich werde darauf klicken und wie viele Spalten möchte ich haben? Ich möchte nur eine, aber ich möchte, dass die Ränder an den Rändern 16, 24 sind. Sie können die Kanten hier sehen. Du könntest es einfach dafür benutzen, damit alles zusammenpasst. Du Snap. Nett. Die Abkürzung für Hilfslinien ist Shift G, schaltet sie ein und aus. Okay? Und wir haben es geschafft. Benötigt abgerundete Ecken. Elternteil, du wirst sagen oder warst du abgerundete Ecken. Abgerundete Ecken. Acht? Nein, 16? Sowas in der Art. Oh, es hat nicht funktioniert. Warum hast du keinen Eckenradius von 16? Bitte warte. Ich kann das herausfinden. Was ist dein Radius? Oh, ich glaube, ich weiß, was es ist. Lass uns wieder reinspringen, damit ich dir beweisen kann, dass ich es geschafft habe. Gehen wir den Inhalt ausschneiden. Oh, es gab einen guten. Ich weiß nicht, wie es nicht zu Clip-Inhalten gekommen ist. Da hast du's. Okay, also lass uns auf 16 gehen. Es ist viel zu groß. Ich habe 12. Ich sagte zwar, nimm ein Vielfaches von Acht, aber du kannst machen, was du willst Das ist Design Ten. In Ordnung, es war also nett, ein bisschen interessant. Der Inhalt des Clips war ausgeschaltet, also hängt alles irgendwie draußen, wohingegen ich jetzt alles innerhalb dieser Hauptkomponente sagen möchte innerhalb dieser Hauptkomponente Oh, es ist kein Hauptbestandteil. Du wirst herkommen. Ich werde dich zur Hauptkomponente machen, ich kann mich nicht erinnern, was die Abkürzung gerade ist. Oh, was bist du? Oh, das stimmt. Befehlsoption K. Das ist Steuerung, altes K auf einem PC. Manchmal vergessen wir es alle. Das ist also meine Hauptkomponente, und die werde ich verwenden. Und dieser Typ muss geschnitten werden, du musst auf die Seite meiner Komponente gehen. Du kannst hier rumhängen. Okay, du kannst dorthin gehen, du kannst dorthin gehen. Hoppla. Wir haben's geschafft. Ah, es ist sehr aufregend. Du kannst jetzt weggehen. In Ordnung, ich bin sehr zufrieden mit mir selbst. Du hättest es vielleicht ganz anders gemacht. Du hättest vielleicht einen halben Tag damit verbracht, an deinem zu arbeiten , aber jetzt kapierst du es irgendwie Ich schätze, ich mag diese kleinen Übungen. Sie sind wie etwas. Oh, du hast das Date nicht gemacht. Sollen wir das Date machen? Eigentlich ist an dem Datum nichts dran. Du wirfst einfach den Text rein. Eins, zwei, drei. In Ordnung, also gib einfach etwas Text ein. Ich werde es hier reinwerfen und du warst nicht an der richtigen Stelle. Geh da hin. Und ich wähle März und dann Command B oder Control B, um es fett zu machen. Wir. Text funktioniert immer noch. Haken ok. Es funktioniert nicht. Es ist nicht in der richtigen. Du hängst also außerhalb von all dem rum. Ah, warum konnte ich das nicht tun? Das liegt daran, dass ich auch versuche, Text hinzuzufügen , was ist das? Pause machen? Denkst du? Es ist eine Instanz der Hauptkomponente, nicht die eigentliche Komponente selbst. Ein guter Tipp ist, dass Sie Instanzen eigentlich nichts hinzufügen können. Du musst hierher gehen und sagen, füge es dort ein. Jetzt sollte es auf allen erscheinen. Korrekt. Das Handy und der Text sind da. Das einzige Problem ist jetzt, dass ich das gemacht habe, das pink ist, und das hier ist grün. Was ich dafür tun kann, ich konnte das auf der Instanz machen, die abgerundeten Ecken ändern und sie grün machen. Sie können die gesamte Instanz auswählen , mit der rechten Maustaste darauf klicken und sagen, eigentlich alles , was ich geändert habe, können Sie zur Hauptkomponente gehen und diese Änderungen darauf übertragen, und dann schauen wir uns unsere Komponente an. Hast du es getan. Schau uns an. Warum können wir uns nicht einfach alles schnappen und zu dieser Option übergehen, die wir uns zuvor angesehen haben? Kannst du dich an die KI-Version erinnern, in der wir gesagt haben: Los, A, lass uns zu mehr A-Optionen gehen? Lass uns das vorschlagen und es hat nicht funktioniert. Das ist der Grund. Es kann manchmal funktionieren, und wenn es nicht die Fähigkeiten braucht, es durchzustapfen und es zu schaffen Aber ich mag die Problemlösungsfähigkeit, wenn man so etwas macht Ich habe das Gefühl, etwas in der Welt geschaffen zu haben. Selbst wenn es so ist, nur kleine einstellbare Pixel. Ordnung, das ist es. So habe ich es gemacht. Mich würden die Kommentare interessieren, wie du es gemacht hast. War irgendwas ganz anders? Hat es jeder anders gemacht als ich? Das würde ich gerne sehen. Gib mir auch eine Zeit. Wie lange hast du gebraucht? Hast du 10 Minuten gebraucht? 5 Minuten. 5 Stunden. Lass uns einen Blick darauf werfen. Ist es okay? Ich bin einfach interessiert. Ich werde es sehen, wenn ich es bin. Ich werde schlafen. 26. Wie man eine einfache Variante in Figma erstellt: Hallo, alle zusammen. Wir werden eine wirklich einfache Variante machen. Okay? Vielleicht hast du schon einmal einen gemacht. Ich wollte es durchgehen, nur damit jeder eine gute Ausgangsbasis hat. Okay? Das heißt, wenn du noch nicht auf eine Variante gestoßen bist oder es lange her ist, dass du die wichtigsten Punkte gemacht hast, dieser Button hier, okay, hier drüben, kannst du sagen, ich will Wassermelone sein Was wirklich cool daran ist, sagen wir, in meinem Assets-Menü, okay, sehen Sie, ich habe nur Aber in diesem Button, okay, er hat zwei Varianten. Okay? Halte es schön und aufgeräumt, und es wird uns die Fähigkeiten geben, in der nächsten Version multidimensionale Varianten zu bauen in der nächsten Version multidimensionale Varianten Sehr ernst. Alles klar, lass uns reingehen Lass uns eine Variante machen. In Ordnung. Also fange ich mit einem Knopf an, den ich gemacht habe. Ich mache diesen Button am Ende des Videos, falls es dich interessiert, aber jeden alten Button. Da ist nichts dran außer einem Rahmen, aber etwas Text drin. Es ist ein automatischer Ausgang. Nichts davon ist für eine Variante wirklich wichtig. Jetzt müssen wir nur noch sicherstellen , dass es sich um eine Komponente handelt. Lass uns das machen. Befehl, Option K Automac, Befehl K auf einem PC, du verstehst es Oder Sie können den Button hier oben anklicken. Bosh. Okay. Was wir tun werden , ist, dass wir sagen werden, dass ich eigentlich gerne eine andere Variante davon hätte. Diese kleine Option hier besagt, dass ich zwei davon haben möchte. Ich habe eine Variante. Sie sind sich zwei ähnlich, also ist es technisch gesehen eine Variante, aber lassen Sie uns die Farbe der unteren ändern. Ich werde auf den übergeordneten Frame klicken. Ich werde sagen, nach unten scrollen, Farbe füllen. Ich werde die Wassermelonenfarbe wählen, die wir verwenden. Jetzt Variante. Wir müssen es benennen, aber das ist es. Gehen wir und schauen es uns an. Wir sollten das machen, ich werde es kürzen. Ich gehe auf meine Komponenten-Seite. Du solltest hier sein, Kumpel. Lass uns alles richtig machen. Dies wird als Komponentensatz bezeichnet. Sehen Sie sich die gepunktete Linie an der Außenseite an. Figman ruft einen Komponentensatz auf. Mach dir darüber keine Sorgen, aber es wird auftauchen . Es gibt eine Komponente. Fügen Sie mehr als eine davon ein, nämlich seine Varianten in einem sogenannten Komponentensatz. Viele Begriffe. Das ist okay. Lass uns zu unserem Hi-Fi-Handy gehen. Gehen wir zu unserem Assets-Menü. Abkürzung, die wir ab sofort verwenden werden, ist, wenn Sie die Option KemackOPC gedrückt halten und eins von zwei, eins von zwei, eins von zwei, eins von zwei ist einfach, von Datei zu Asset zu gelangen. Was ist das? Option eins und zwei, eins und zwei oder Alt im Bedienfeld „Elemente“ Schauen wir uns die Dateien in dieser Bibliothek an. Gehen wir zu den Dateien in unserem Komponenten-Panel. Hervorragend. Hier ist unser Button. Zieh ihn raus. Das Dumme an ihm ist, dass er hier eine Variante hat. Standard? Nein, nicht der andere. Oh. Cool. Varianten sind großartig. Was wir jetzt jedoch tun sollten, ist zu unserer Option oder Alt One zurückzukehren, zurück zu unseren Ebenen. Dateien. Ich gehe zu meinen Komponenten und ich werde sagen. Lassen Sie uns ein paar Namen machen. Lassen Sie uns das Ganze auswählen. Wie heißt es? Wissen Sie noch, was die gepunkteten Linien bedeuten? Komponentensatz. Du hast es. Mit der Auswahl hier oben habe ich eine Menge Eigenschaften, die ich umbenennen kann. Es gibt ihnen nur Standardmaterial. Klicken Sie auf diese kleinen Einstellungen als Eigenschaft bearbeiten. Das ist was es ist. Klicken Sie darauf und geben wir ihm einen Namen . Dieser wird heißen. I-Knopf. Ich habe ein paar Werte. Okay, geh wieder rein. Ich habe ein paar Werte. Eigentlich ist der Name nicht Button, sondern Farbe. Okay? Also benennen wir unsere Variante, nicht den Namen der eigentlichen Schaltfläche. Das haben wir schon gemacht. Ich möchte diese Variante verschiedene Farbvarianten nennen. Oh, spring weiter von dem. Wo Standard steht, möchte ich, dass einer, sagen wir, grün ist und der andere Ater Melon. Das ändert sich nicht wirklich , außer wenn ich wieder auf meinem mobilen Hi-Fi bin, klicke ich darauf. Es macht ein bisschen Sinn. Schau, ich habe Farbe. Okay. Und ich habe Grün oder Wassermelone Das macht es einfacher für jemand anderen, es zu benutzen, und für Sie Komm schon, lass uns Sachen benennen. Mr. Untitled 57 oder in diesem Fall Frame 57. Dan mag es, Leute zu beschatten, obwohl er wirklich schlecht benannte Sachen hat , wenn er alleine arbeitet Erzähl mir keinen. In Ordnung, so baut man also eine wirklich einfache Variante von Figma Lass uns jetzt den Button erstellen, falls du daran interessiert bist. Wenn Sie wissen, wie man eine Schaltfläche erstellt, was Sie wahrscheinlich tun, fahren Sie mit dem nächsten Video fort, aber ich werde es zusammen erstellen. Lass uns abhängen. In Ordnung, wir werden das alles noch einmal machen. Wir werden den Knopf machen, aber ich habe ihn gerade mit ausgeschaltetem Mikrofon aufgenommen. Lass es uns nochmal machen. Ich liebe es, es zweimal zu machen. Ordnung, gehen wir zum Rahmenwerkzeug zeichnen ein beliebiges altes Format heraus Geben wir ihm die Farbe der Schaltfläche, die wir verwenden möchten. Ich werde das benutzen. Wir sollten bald anfangen, einen Farbstil zu kreieren. Wir machen ein paar Grüntöne, Dan. Ich schnappe mir das F-Tool. Nein, ich nehme das Type-Werkzeug, das ist das Tiki. Klicken Sie irgendwo auf die Innenseite und geben Sie einfach die Schaltfläche ein. Ich verwende Großbuchstaben, und ich verwende ein Roboto, das fett formatiert ist. Eine wirklich übliche Tastengröße ist 16. Es ist leicht zu erkennen. Es ist einfach okay, jetzt sollte ich es in der Mitte aufstellen. Ich drücke Escape, um das Textwerkzeug zu verlassen. Ich sollte es in der Mitte ausrichten, aber was ich tun kann, ist einfach auf den übergeordneten Frame zu klicken. Ich habe hier also diesen Rahmen , den ich Buttons nennen werde. Okay. Wenn es ausgewählt ist, das übergeordnete Element mit einem Text drin, wenn ich einfach Shift A drücke, werde ich auf Auto Lout umschalten und können Sie standardmäßig sehen, dass es sich um den Text schmiegt , was perfekt ist Umarmen ist perfekt, weil es bedeutet, dass wir mehr tippen können und Sie sehen, dass sich die Schaltfläche erweitert Die einzige Sache ist jedoch, dass standardmäßig eine zufällige Polsterung verwendet wird, die auf der Originalgröße basiert die Polsterung angeht, die ich machen möchte , beginnt mit der Breite, 24, ich gehe mit der Tabulatortaste quer und drücke acht für oben Er ist mein kleiner Button hier unten für den Eckradius. Ich kann meinen Aufwärtspfeil benutzen, nach oben schauen, wenn du perfekt rund sein willst, musst du nur oben sein. Wann immer die Radien verschwinden, lass es mich hier runterzoomen. Kannst du sehen, was ich meine? Verstehst du, was ich meine, ich habe 16 gemacht, du würdest sagen, es ist rund. Aber wenn ich die 100 gemacht habe, ist es extrem rund und es muss der perfekte Kreis sein Also gib einfach eine riesige Zahl und sie wird an den Enden abgerundet Ich habe es nur für den Fall gemacht, dass du interessiert bist. Alles klar. Wir sehen uns im nächsten Video. 27. So erstellst du eine mehrdimensionale (multidimensional) Variante in Figma: Hallo. Hallo, wir werden in diesem Video die mehrdimensionale Variante lernen. Okay? Sie sind schick, vor allem, weil sie es mit dieser Stimme machen, aber sie ermöglichen es uns, Varianten auf die nächste Ebene zu bringen , oder die Stimmen. Das bedeutet, dass dieser Button nicht nur eine Variante hat, wie Farbe, wir haben mehrdimensionale Varianten Das ist ein ausgefallenes Wort. Das ist der Grund, warum sie es nennen, aber es bedeutet nur, dass ich zwei verschiedene Dinge habe. Ich kann gehen, ich will grün sein, aber ich will auch, dass es umrissen wird. Das Ding hier, okay? Das ist eine nette kleine Bereicherung. Sie sehen ihn dort, die Schaltfläche Zoom. Du zerrst ihn raus, aber er hat alle möglichen Sachen. Er hat beide verschiedene Farben und er hat unterschiedliche Werte. Mehr als eine Eigenschaft zu haben bedeutet nur, dass es multidimensional ist, nicht so ausgefallen, wie es sich anhört Geh einfach und baue eine. In Ordnung. Geh Zeit. In Ordnung. Also werden wir mit der einfachen Variante beginnen, die wir im letzten Video gemacht haben , und darauf aufbauen , um sie multidimensional zu machen Alles was wir tun müssen ist, rate mal was? Es ist jetzt multidimensional. Wir haben eine dritte Option. Das sind also eigentlich nur drei Varianten. Was wir tun wollen, ist, diese ein wenig zu ändern. Ich werde also in den Schnellmodus wechseln und es einfach skizzieren. Okay, ich werde noch einen machen. Um noch einmal einen zu machen, kannst du entweder diesen kleinen Plus-Knopf drücken. Hier oben gibt es eine Option. Nein, es gibt einen von ihnen. Nein, ich bin mir sicher, dass da oben auch ein Knopf ist. Also entweder drücken Sie diese Taste oder Strg D. Ich glaube nicht, dass Sie sie kopieren und einfügen können. Nein, aus irgendeinem Grund kannst du sie nicht kopieren und einfügen. Los geht's. Komm schon, D. Ich werde auch diese Farbe ändern. Du wartest dort. In Ordnung, also ich habe die. Ich könnte sie einfach so lassen, und wenn ich sie benutze, kann ich sie rausnehmen und sagen, A, ich habe all diese verschiedenen Optionen. Aber ich werde es multidimensional machen. Das bedeutet , dass ich meinen Komponentensatz nehme und sage, ich habe eine Eigenschaft Ich möchte eine weitere hinzufügen. Ich werde eine weitere Variante hinzufügen. Diese wird Fill heißen. Ich habe nur versucht zu überlegen, wie es heißen könnte und der Standardwert wird solide sein. Was wir hier erreichen wollen, ist, wenn ich das auswähle, ich sage dir, mein Freund, sind sowohl grün als auch solide. Du bist wassermelonenrot und fest. Du wirst grün sein, aber du fügst auch ein neues hinzu, du wirst skizziert sein Das ist sowohl die erste Eigenschaft, die wir gemacht haben, die zusätzliche Dimension. Mehrdimensional. Aber du musst da sagen, dass das multidimensional ist Wir haben Farbe, wir sind satt, wir sind Hardcore. Dieser hier, was bist du? Du bist Farbe Vier. Nein, du bist Wassermelone und du wirst bald aussehen. Das heißt jetzt wenn ich diese nette, einfache Schaltfläche nehme, denke ich daran, im Bedienfeld „Elemente“ die optionale Alt-Taste, zwei, eins, zwei, das Bedienfeld „Elemente“ umzuschalten Dieser schöne kleine Button hier. Um ihn rauszuholen, er ist multidimensional. Er hat Farbe und er hat Fülle. Ich sage du Wassermelone. Aber ich will die Gliederung. Geh. Ich hatte lange Zeit Angst davor , multidimensionale Varianten zu Es klang gruselig. Mehrdimensional, alles klingt schwierig. Okay? Aber es ist schwierig. Ich versuche ruhig zu sein, gib es dir. Es ist wirklich einfach. Aber wenn du es zum ersten Mal machst, denkst du, das macht keinen Sinn. Okay? Ich neige dazu, es irgendwie durchzuschlagen, bis du mindestens vier davon hast Dann vergiss es, ausgefallene Sachen zu machen und komm einfach her und sicher, dass es zuerst zwei Eigenschaften gibt, und dann arbeite dich durch alle Knöpfe und sage: Okay, ich möchte, dass du diese Liste durchgehst Und wenn Sie hier nicht etwas haben möchten, klicken Sie einfach auf ADN Okay, auch hier unten sagst du, okay, ich muss nicht grün sein. Es gibt eine dritte Farbe, also werde ich eine dritte Farbe hinzufügen. Oder es ist die richtige Farbe, aber hier unten ist nichts, also muss ich eine Eigenschaft hinzufügen. Wenn es keine gibt, wenn du die richtige Eigenschaft hast und du sagst, alles was ich brauche ist eine neue davon hinzuzufügen. Das ist im Allgemeinen der einfachste Weg. Ich möchte, dass du dort fertig wirst, da gehst und dich selbstbewusst fühlst. Ich gebe dir jetzt einen fortgeschritteneren Weg weil wir gerade im Fortgeschrittenenkurs sind. Es gibt einen anderen Weg, es zu tun. Es könnte einfacher für dich sein. Du meinst, Mann, das hat mich umgehauen. Oder du sagst vielleicht, ich liebe es, es auf zwei Arten zu tun . Warum lernen, es weiter zu machen? Was ich hier getan habe, ist, dass ich gerade einen Kreis mit einem Plus darin gemacht habe. Wenn Sie irgendwelche Plus - und Minus-Tasten verwenden, ist es oft besser, anstatt nach einem Symbol zu suchen , eine Schrift zu finden, in der Sie das Pluszeichen haben möchten Ich benutze diesen hier oft, der erste Tag genannt wird, aber du kannst sehen, dass ich das durchgehen und ein Plus finden kann , das mir gefällt Das Plus gefällt dir vielleicht besser als das Plus. Was Sie dann tun können, ist rechten Maustaste darauf zu klicken und zur Gliederung zu wechseln. Oder ist es das? Strich skizzieren. Dann ist es einfach wie ein Quadrat. Du kannst die Schrift nicht ändern, also musst du das wahrscheinlich zuerst tun und dann sagen, ich brauche dich? Und dann skizziere es. Oder wer erinnert sich an die süße Abkürzung Familia? Wenn wir einen Strich und dann einen größeren als machen, erhalten wir einen Pfeil. Diese Pfeile sind nicht sehr gut. Jeder andere hat einen besseren Pfeil. Wir haben alle unterschiedliche Stile. Lass uns den anderen Weg nehmen. Siehst du? Geh es durcharbeiten und schauen, wer einen besseren Pfeil macht . Ich benutze nur Schriften. Natürlich kannst du irgendwo zu einer Art Icon-Bibliothek gehen , das wird funktionieren. Habe sie in die Mitte gesteckt. In Ordnung, das war eine kleine Tangente. Also der Grund, warum ich dir das zeigen will , ist, dass ich euch da unterbringen werde, weil ich euch später benutzen werde , weil ich diese beiden habe, okay ? Also erstellen wir eine Variante. Aber was wir tun können, ist, anstatt das zu tun, was wir getan haben, wo wir eine erste Variante erstellen, dann Duplikate und sie dann irgendwie alle aufteilen Was wir tun können, ist zu sagen: In Ordnung, ich will diese beiden Und du baust sie einfach alle zuerst. Und ich will, dass die beiden besser sind. Also habe ich die alle zuerst. Diese müssen alle ihre eigenen Komponenten sein. Eines der großen Probleme ist, dass ich sie nicht gruppiert habe, okay? Wenn ich hier also mehrere Komponenten mache, zeige ich Ihnen das, weil Sie es tun werden. Du wirst gehen, in Ordnung, ich werde machen , was werden wir machen? Wir werden mehrere Komponenten herstellen. Okay. Jetzt haben wir eine, zwei, drei, vier, fünf, sechs, sieben, acht Komponenten. Machen wir das rückgängig. Ich werde diese entweder zuerst gruppieren, Gruppe, Gruppe, Gruppe, Gruppe. Eigentlich werde ich dir einen Weg zeigen. Ich werde zu abgelenkt. Jetzt kann ich mehrere Komponenten erstellen. Die andere Möglichkeit ist , sie einfach einzeln zu erstellen. Aber wir haben eins, zwei, drei, vier. Ich habe all diese. Ich werde sie alle auswählen, und ich werde Kombinationsvarianten sagen Warum machen wir es nicht einfach so, Dan? Oh. Das ist wahrscheinlich einfach einfacher, nicht wahr? Ja, es wird immer noch chaotisch. Also sind wir an diesem Punkt. Es war nicht schwer, das zu entwerfen. Es ist nicht schwer, an diesen Punkt zu gelangen. Der nächste Teil war, was wir wollen, ist wir ein paar Immobilien brauchen. Ich habe einen. Doppelklicken wir auf Eigenschaft eins, und wir nennen das eine Farbe. Farbe. Ich werde eine weitere Immobilie hinzufügen. Es wird eine Variante sein, und ich werde diese eine nennen. Was nennst du Plus oder Negativ? Manchmal funktioniert mein Gehirn nicht. Du hoffst nur auf einen Mehrwert. Ich kann ihr Eigentum erstellen. Wenn Sie sich nicht sicher sind, was es ist, ist der Wert etwas. Es ist ein guter generischer Alleskönner. Jetzt klicken wir darauf. Du bist eine Farbe der ersten Gruppe. Nein, nennen wir es, benennen wir es um. Nennen wir das hier. Grün, es ist grünlich, und es hat einen Wert von, wir nennen das, Standardwerte wir nennen es Plus oder Positiv Ich weiß nicht, ob wir das Pluszeichen verwenden oder das Wort positiv schreiben sollen das Pluszeichen verwenden oder das Wort positiv schreiben Ich bin mir nicht sicher, was einfacher ist. Dieser hier hat allerdings welche Farbe. Es wird grün, grün sein. Es wird einen Wert von Wir haben kein Minus haben, wir werden ein neues hinzufügen und wir werden sagen , du bist minus, mein Freund. Arbeite dich einfach durch. Dieser hier, Farbe der Gruppe zwei. Das ist kein wirklich guter Name. Nennen wir es Wassermelone Und ein Wert von A, wir haben einen positiven Wert. Nun, dieser hier sollte einfach sein, denn wir haben Wassermelone und wir haben einen negativen Wert Ordnung. Das Gleiche. Nimm eine Kleinigkeit, übe mit beiden und finde einfach heraus, welche Option dir gefällt. Welches ist deiner Meinung nach besser? Das Bedienfeld „Get Assets“, das Coole daran, braucht wahrscheinlich einen besseren Namen. Kann ich das hier machen? Nein, das kann ich hier nicht machen. Du musst dazu in der Lage sein. Wie dem auch sei, gehen wir zu Option oder Alt Eins zurück zu unseren Dateien. Gehen wir zu den Komponenten. Sie haben einen schrecklichen Namen namens Component One. Du kannst es entweder hier benennen, okay, oder du kannst es hier benennen. Was ist das? Das klingt so, aber ich kann mir nicht vorstellen, wie ich es nennen soll. Kann keinen Wert aufrufen. Bitte warte. Mir fällt kein Wort ein. Ich nenne es Zoom. In Oti. Wie dem auch sei, es gibt einen Namen dafür Kehren wir zu unserem High-Fidelity-Handy zurück. Gehen wir zu Option oder Alt zwei, um zu unserem Assets-Bedienfeld zu gelangen. Ziehe meinen Button Zoom heraus, okay? Und wir werden mehrdimensional sagen. Schau uns an. Ordnung. Die große Version ist also, es spielt keine Rolle, wie Sie dorthin gelangen, aber Sie benötigen nur einen Komponentensatz Dann arbeitest du dich hier durch, fügst verschiedene Werte hinzu, fügst verschiedene Varianten, verschiedene Eigenschaften hinzu und gibst ihnen dann im Laufe hier durch, fügst verschiedene Werte hinzu, fügst verschiedene Varianten, verschiedene Eigenschaften und gibst ihnen dann im der Zeit bessere Namen . Es spielt keine Rolle, ob du hier magst, mit ihnen anfängst und sie auf diese Weise weiterentwickelst, oder ob du mit einem anfängst und sie einfach weiter duplizierst und die Werte hinzufügst So oder so, am Ende mache ich es aus irgendeinem Grund so. Ich weiß nicht warum, aber vielleicht gefällt es dir so. In Ordnung, das sind multidimensionale Komponenten. Ich fühle mich gut, fühle mich fortgeschritten. Das ist fortgeschrittenes Zeug. Das Coole daran ist, dass Sie Bibliotheken anderer Leute finden , die diese haben, und Sie werden wissen, was die gepunkteten Linien bedeuten Sie werden sich nicht erinnern, wie sie heißen, aber Sie wissen, was sie tun Du wirst sagen, oh, ich kann mir eins davon schnappen und sagen Okay, es hat mehrere Dimensionen Nett. Es hat viele verschiedene Variablen. Schick. In Ordnung. Das ist es. Lass uns mit dem nächsten Video weitermachen. 28. Klassenprojekt 06 - Mehrdimensionale Variante: Es ist Projekt Nummer sechs Mal. Okay? Das sind mehrdimensionale Varianten. Also im Grunde genau das, was wir im letzten Video gemacht haben, außer dass ich möchte, dass Ihre beiden unterschiedlichen Eigenschaften Größe und Farbe Machen Sie einen Screenshot von beiden Komponenten. Das ist eine Sache mit gepunkteten Linien, und ich möchte das auch hier sehen, deine Eigenschaften, damit sie alle schön benannt sind Ich werde das überprüfen und in die Aufgaben hochladen. Sie müssen das nicht in den sozialen Medien teilen , weil es ein bisschen langweilig ist. Sehr nützlich, aber visuell nicht sehr anregend. Eine Sache, die ich dir zeigen möchte, ist, naja , ich möchte, dass du sicherstellst, dass es das tut. Ich kann sagen, okay, ich möchte grün pflücken, aber ich brauche dieses kleine Genau wie wir es mit der Gliederung gemacht haben, aber wir machen Größe. Eine Sache, die ich erwähnen wollte bevor Sie gehen, ist, dass diese Komponenten hier sind Manchmal könnten wir sagen, dass ich Sie alle schnappe , weil ich andere Varianten haben möchte. Ich will drei davon. Ich will nicht wirklich, dass du das tust. Aber nehmen wir an, du hast es getan , weil du verrückt bist. Sie wollten die Größen, die Farben, aber auch, ob es gefüllt oder umrandet ist. Ich gehe zum Kommando, hol ein paar davon und du gehst, aber es fühlt sich besser an, wenn sie hier drüben sind. Am Ende kommen sie da raus. Es ist wirklich schlimm. Was du mit dieser Zeile machen kannst, das möchte ich dir zeigen. Ist diese gepunktete Linie hier eigentlich nicht automatisch. Du ziehst es einfach herum Du kannst sagen, richtig, diesen Typen geht es hier besser. Ihr könnt da hingehen. Ihr seid nicht dazu bestimmt, ja ihr könnt eine dritte Immobilie machen, was ich nicht möchte, dass ihr das mit dem Umriss macht . Ich möchte , dass du das machst. Dieser kleine Kerl hier mit den zwei Farben und den zwei Größen. Ich wollte dich nur wissen lassen, dass du die Größen anpassen kannst. Klicken Sie auf den Rahmen und wackeln Sie ihn dann hin und her. In Ordnung. Bevor ich es kaputt gemacht habe, B, zurück, zurück, zurück, zurück, zurück, du kannst mit deinem weitermachen, während ich es rückgängig mache In Ordnung, viel Spaß beim Erstellen Ihrer mehrdimensionalen Variante. Sie können schwierig sein. Sie sind sehr befriedigend, wenn Sie sie zum Laufen bringen, vor allem, wenn Sie sie Ihren Teamkollegen geben können wenn Sie sie Ihren Teamkollegen geben Sie haben in Zukunft diesen wirklich einfach zu bedienenden Button, verhindert, dass mein Vermögen verrückt wird Okay? Da ist nur ein Knopf drin, der all diese verschiedenen Dinge macht. Ordnung, mach deine Hausaufgaben, keine Hausaufgaben, und wir sehen uns im nächsten Video 29. Variabel – Heller und Dunkelmodus: Erstens werden wir lernen, was eine Variable macht. Du kannst sie wirklich einfach benutzen, Figma. Du kannst sie wirklich Hardcore benutzen. Wir werden nett und einfach anfangen. Wir werden einen hellen und einen dunklen Modus machen. Sehen Sie sich diesen Text hier an, ziehen Sie ihn hierher. Es hat seine Farbe geändert. Ich weiß. Ich freue mich sehr. Ich bin so ein durchschnittlicher Coda-Slash-Entwickler. Ich mache ein bisschen Wedel in einem Copy-and-Paste-Zeug und denke, ich bin ein Computerhacker, aber ich liebe kleine einfache aber ich liebe kleine einfache Lösungen wie diese. Es wird noch besser, sich das anzusehen Wenn ich mir die schnappe und sie hierher ziehe, hat sich das geändert. Aber wenn ich zu den Eltern gehe und sage, eigentlich möchte ich, dass du im Dunkelmodus bist. Die ganze Sache ändert sich. Der Hintergrund ändert sich. Hast du das gesehen? Und der Text hat die Variablen geändert. Wenn Sie ein Entwickler sind, werden Sie sagen: Wow, mit den Augen verdrehen. Das ist nicht so toll. Aber wenn du wie ich bist, kannst du dich sehr für Variablen begeistern. Lasst uns alle aufgeregt sein. Und lasst uns einsteigen. Einige Variablen. Kurz, also lass es uns machen. Was ich habe, ist nur Text auf einer Seite. Das ist es. Daran ist nichts Besonderes. Lass uns unsere erste Variable erstellen. Jetzt werden Sie feststellen, dass ich immer Variante sage. Variante, was wir vorhin gemacht haben. Dieser Button hat hier zwei verschiedene Varianten. Sehr unterschiedliche Variablen. Wo findest du deine Variablen? Das ist es. Habe nichts ausgewählt. Sie werden feststellen, dass es eine kleine Option gibt. Variablen. Sie können darauf klicken. Wir haben keine Variablen. Lass uns auf Erstellen klicken. Was für verschiedene Optionen. Wir werden uns im Moment mit Farbe befassen. Wir werden später im Kurs mehr tun. Bringen Sie uns rein und lassen Sie uns anfangen. Lass uns malen gehen. Jetzt ändert es sich. Wenn Sie die kostenlose Version haben, könnten Sie tatsächlich so weit kommen. Es könnte dich nur bitten, es in ein Team zu verschieben . Es gibt einige kostenlose Optionen. Es gibt Zeiten, in denen die kostenpflichtige Option zum Einsatz kommt. Es hat sich im Laufe der Zeit geändert, daher kann ich Ihnen jetzt keine soliden Fakten geben , da es anders sein könnte Du bist in der Zukunft. Ich bin hier. Vielleicht musst du zuschauen, wenn du nur die kostenlose Version hast , aber du wirst wahrscheinlich ein bisschen damit zurechtkommen. Ordnung, also was hast du? Wir haben das. Das ist nur ein kleiner Tisch. Das sind meine Variablen. Ich habe hier einen dabei. Es heißt Farbe. Geben wir ihm einen besseren Namen. Ich werde diesen nennen. Text. Es ist meine Farbvariable namens Text, und ich möchte zwei Optionen haben, zwei Modi, sie nennen sie. Ich möchte einen Lichtmodus, einen Lichtmodus. Im hellen Modus, wenn alles hell ist, muss der Text ziemlich dunkel sein, weil er es einfach tut. Ich verschiebe das hier hin, damit ich es sehen kann . Hier sind ein paar Farbfelder, um das einfacher zu machen Im hellen Modus möchte ich ein dunkles Grün für den Text haben. Oh, du hast eine Variable erstellt. Macht nicht viel, aber lassen Sie uns sie anwenden. Klicken wir auf die Überschrift, sie wird wie ein Stil angewendet, speziell diese Farbvariable. Wenn ich hier reingehe und eine Feldfarbe mit einer zufälligen Farbe habe , die ich ausgewählt habe, kann ich zu meinen Stilen wechseln. Du könntest die Stile verwenden. Wir haben noch keine erstellt. Machen wir das? Klar, dass wir das irgendwann gemacht haben. Da sind noch ein paar andere vorgefertigte drin. Aber da ist das. Ich sollte darüber variabel sagen. Schreibt keinen Text. Man kann sehen, dass es die Farbe ist. Lass es uns anwenden. Es ist wie ein Stil. Das ist eine Menge Arbeit für genau das. Aber keine Sorge, es wird noch spannender. Lassen Sie uns nichts ausgewählt haben und gehen wir zu Variablen. Lassen Sie uns einen anderen Modus einrichten, indem wir hier auf Plus klicken Nennen wir diesen einen Dunkelmodus, Dunkelmodus. Im Dunkelmodus muss der Text eigentlich ziemlich hell sein. Ich werde nur eine Farbe für die Benutzeroberfläche auswählen. Ich benutze gerne EEE. Okay, nimm einfach alle sechs Eier raus. Ordnung. Wir haben einen anderen Modus für unsere Variable erstellt. Lass uns hier reinklicken. Lasst uns diesen Typen schnappen, lasst uns ihn kopieren. Lass uns hier drüben klicken, sie einfügen und du denkst, wir sind im Dunkelmodus. Hier drüben unter „Füllen“, das machst du hier nicht. Da gehe ich immer wieder hin. Du sagst, ich werde darauf klicken. Es gibt keine Lichtfarbe. Wo ist es hingegangen? Sie werden alle unter dem Deckmantel erscheinen. Dieser Typ hat eine Textvariable angewendet. Was ich unter Aussehen machen kann, siehe dieses kleine Swatchi-Ding hier, ich kann einen variablen Modus anwenden Denken Sie daran, dass wir zwei Modi gemacht haben. Ich habe eine Sammlung namens Light Mode. Nun, sie war bereits im Lichtmodus. Ich kann hier hingehen und sagen, du bist im Dunkelmodus. Oh, sehr aufregend. Ist es? Oh, es wird besser. Schau dir das an. Lass uns das löschen. Lassen Sie uns das Gleiche hier anwenden. Lass uns gehen, Phil, du hast einen Stil dieser Schriftfarbe, die grün ist. Wenn ich mir beide schnappe, sie kopiere, einfüge beide ausgewählt habe, kann ich sagen, du bist im Dunkelmodus und sie ändern sich alle. Oh, es wird noch besser. Ich weiß nicht, warum mir das gefällt. Fügen wir weitere Variablen hinzu. Haben Sie nichts ausgewählt, gehen Sie zu Variablen. Und wir haben Text angewendet. Lassen Sie uns einen weiteren erstellen. Nein, kein anderer Modus. Du kannst das größer ziehen. Ich will nicht den dritten Modus , den ich gemacht habe, wie man ihn los wird. Klicke darauf, lösche ihn, du löschst den Modus, das reicht. Ich möchte keinen anderen Modus. Ich will eine weitere Variable hier drin haben. Eine andere Farbe, und das wird eine Farbe sein. Nennen wir dieses Interface oder Hintergrund, wie auch immer Sie es nennen möchten. Ich werde es Interface nennen nur weil es etwas generischer ist. Wenn ich mich im Lichtmodus befinde, sollte die Farbe der Benutzeroberfläche wahrscheinlich schön hell sein , weil es der Hintergrund ist. Der Text muss sich davon abheben. Hier drin werde ich mein EEE benutzen. Im Dunkelmodus muss die Oberfläche jedoch wirklich dunkel sein , damit wir den hellen Text sehen können Ich werde sagen, ich werde diese Farbe verwenden. Kopiere sie, verschiebe sie hierher zurück. Im hellen Modus kann man sehen, der Text dunkel ist. Die Oberfläche ist hell und die Gegensätze sind da. Wenn Sie ein Entwickler sind, sagen Sie : Das ist so einfach. Wenn Sie eher der kreative Designkünstler sind, hacken Sie die Matrix So fühle ich mich wenn ich dieses Zeug mache Okay. Also, was haben wir getan? Lass uns dazu gehen. Sagen wir, ich möchte, dass dieser ganze übergeordnete Rahmen die Fülle von „Los geht's“ hat. Wir haben jetzt zwei Möglichkeiten. Ich möchte die Farbe der Benutzeroberfläche haben. Oh, es ändert sich. Es ändert sich zu dem, was auch immer die erste ist, zur Standardeinstellung. Das Coole daran ist, dass ich sagen kann: In Ordnung, ich brauche diesen Text hier. Komm rüber. Ich mache Duplikate, halte die Wahltaste gedrückt, bringe sie her und nichts ist wirklich passiert. Das war nicht überwältigend Was wir tun werden, ist das hier rüber zu legen und all die B auszuschalten, von denen ich gesagt habe, dass ich sehr spezifisch bin Ich sagte, du wirst definitiv in den Dunkelmodus wechseln. Dreh es einfach auf Auto. Der Typ hier drüben ist auf Auto, was im ersten Fall der Lichtmodus ist Also hier drüben ist er perfekt. Aber wenn ich sage, hey, dieser ganze Rahmen ist nicht unter Phil, denk dran, ich will immer wieder dorthin zurückkehren. Wir gehen zum Auftritt. Also du, dieser Rahmen und alles, was sich darin befindet, sind jetzt hier , wo es einen guten Dunkelmodus bekommt. Oh. Jetzt haben wir es mit dem Hintergrund und dem Text gemacht. Du kannst Knöpfe haben. Sie haben Variablen, Hell- und Dunkelmodus. Alles, was Sie tun müssen, ist den übergeordneten Frame zu ändern , alles, was sich darin befindet. Du musst nicht gehen. Du bist ein neuer Stil und änderst ihn. Alles kommt einfach mit. Freust du dich? Lass es uns einfach von Anfang an erstellen. Lass uns gehen. Oh, das zeige ich dir gerne. Ich werde eine neue Version machen, okay? Das ist immer aufregend. Okay? Ich würde sagen, du bist Mitglied von Appearance. Okay? Ich gehe in den Lichtmodus? Das Coole daran ist, dass ich nichts auf diesen aufgetragen habe. Denken Sie daran, dieser hat den Anschein von nichts. Er war auf Auto. Aber wenn ich ihn hierher schleppe, sieh mal. Ah. Ja, das war im Intro Alles, was wir tun mussten, war ein paar wirklich grundlegende Variablen zu erstellen ein paar wirklich grundlegende Variablen Wie fühlst du dich? Du bist wie ein Computerhacker. In Ordnung. Das ist eine nette, einfache Variable. Sie können sehr kompliziert werden. werden wir etwas komplizierter Kursleiter werden wir etwas komplizierter . Wir werden jetzt noch einen machen, bevor wir veränderliches Land verlassen. Das Gehirn schmilzt zu früh im Kurs zu stark. Ordnung. Wir sehen uns im nächsten Video. Bevor wir gehen, möchte ich nur diese Textteile wiederholen, obwohl sie nicht auf, sagen wir, den Dunkelmodus eingestellt sind, das lassen sie die Eltern tun Sie müssen die Variable tatsächlich immer noch anwenden. Also, wenn ich jetzt ein bisschen Text nehme und sage und ihn hier eintippe, kann ich dann sechs? Ich habe Frame eingegeben. Geben Sie zwei ein, tippen Sie hier ein, tippen Sie Sie werden feststellen, dass sich das nicht ändern wird. Es ist immer noch weiß. Auch wenn die Eltern eine andere Hautfarbe haben. Sie müssen zumindest die Variable anwenden, können wir sagen, Sie haben eine farbige Füllfarbe des Textes. Wir sind nicht bis hierher gegangen und haben gesagt, Sie haben das Aussehen im hellen Modus oder im dunklen Modus weil es egal ist, wohin er geht, er wird diese Farbe haben. Wir lassen ihn einfach stehen , berühren sein Aussehen nicht. Wir gehen zurück zu Auto. Wenn ich wieder darauf klicke, verschwindet es, wohingegen meine Eltern, da ist es da, verschwinden. Ich habe es einfach vergessen. Ich habe ihn hier abgespielt, den Text. Es wurde die Textvariable angewendet. Aber jetzt ist alles drin, weil meine Eltern sagen, mach das, oder die Kinder fahren mit. Das ist alles. Lass uns zum nächsten Video gehen. 30. Klassenprojekt 07 - Farbvariablen: Bitten Sie uns besser nicht, unsere eigenen Variablen zu erstellen. Ich werde es tun. Im Grunde genau das, was wir im letzten Video gemacht haben. Kopiere das einfach. Mal sehen, wie es dir geht. Die einzige Art von Mischung ist, ich möchte, dass du ein Logo hinzufügst, das nur Text ist. Es ist also genau wie Textkörper und Überschrift. Sie müssen nur die Variante anwenden, sie auf Auto belassen und sie sollte sich ändern. Ich möchte also, dass sich der Text ändert und ich möchte die Benutzeroberfläche. Also wird es zwei Modi geben, hell und dunkel. Wo sind sie? Das sind diese beiden Modi und zwei Varianten. Text und Oberfläche. Du könntest es so etwas wie Text nennen, nur weil es das ein bisschen einfacher macht , wenn du dir das ansiehst, aber es ist ein bisschen einfacher zu erkennen, wenn du hier bist, du kannst sehen, alles klar, das muss mit variablem Text gefüllt werden. Sonst sagst du, was zur Hölle ist das? Ganz klar ist es nicht. Ein paar Kleinigkeiten, die ich im letzten Video nicht gemacht habe und die ich mit dir teilen möchte, kannst du kaputt machen. Du kannst sagen, tu das nicht mehr. Geh einfach zurück zur Farbe. Sie können es auch in Ihrem Ebenenbedienfeld sehen. Kannst du hier drüben sehen? Wir haben Hellmodus und den Dunkelmodus. Das kann sehr praktisch sein, besonders wenn es sich nicht ändert. Wir haben herausgefunden, dass, wenn ich die Überschrift nehme und erzwinge , dass sie im dunklen Modus erscheint. Okay? Ich versuche es hierher zu ziehen, es ändert sich nicht. Auch wenn dieser Elternteil sagt, im Lichtmodus zu sein, macht er einfach nicht das, was wir wollen. Wir wissen, dass es eigentlich nicht auf etwas eingestellt werden kann Stellen Sie es auf Auto und es wird dem Beispiel dieses Elternteils folgen . Geht zurück, geht vorwärts. Wirklich praktisch ist es, es hier zu sehen. Kannst du sehen, ob ich auf den Weg gehe und ihn zwingt, sagen wir, im Lichtmodus zu sein. Kannst du das hier sehen? Dem Elternteil wurde eine Variable zugewiesen. Das ist diese kleine Pille hier. Aber diese Überschrift macht sein eigenes Ding. Er sagt, nun, verarscht euch. Ich bin nur im Lichtmodus. Mir ist egal, was Mama und Papa sind. In Ordnung. Cool Also baue Jerome, mach einen Screenshot davon, wie ich es dir dort gezeigt habe sie einfach so zusammengebastelt gesehen Weil du das bewegen kannst. Wenn du auf nichts klickst, dir Variablen schnappst, kannst du das verschieben. Okay? Mach es größer. Also hol es dir einfach so, wie du es gemacht hast, nur damit ich alles in einem großen Screenshot sehen kann, und lade es in den Klassenprojektbereich hoch. Ordnung. Hab Spaß. Viel Glück. Hoffentlich freust du dich genauso wie ich, wenn es funktioniert und du es herumschleppen kannst und es Dinge macht, aber es ist knifflig. Wenn du dir die Haare raufst und sagst, das habe ich getan. Offensichtlich vermisse ich hier eine Menge. Aber wenn es dir wirklich schwer fällt, mach dir keine Sorgen. Es ist wirklich schwer. Weißt du, wenn du es jetzt nicht zum Laufen bringen kannst, ist das okay. Wir werden es später im Kurs noch einmal behandeln. Wir werden auf einige weitere Variablen eingehen. Eigentlich machen wir jetzt noch eine, glaube ich, nur um ein Zuhause zu finden, und dann machen wir es ein bisschen weiter in der Klasse. In Ordnung, viel Spaß beim Erstellen variabler Farben. 31. So erstellen Sie Warenkorbsumme mithilfe von Zahlenvariablen in Figma: Ich Hallo, alle zusammen. Wir werden das machen. Anschauen, klicken, klicken, klicken. Und runter runter runter. Oh, ich liebe es wirklich. Es wird eine Variable genannt, hätten wir ein anderes Video gemacht. Das ist eine Zahlenvariable. Klicken Sie auf unsere Buttons. Sie steigen, wir kaufen Tickets. Wenn du sagst, oh, das kann ich machen, verlinke einfach ein paar Seiten miteinander. Schau, wir haben nicht viele Seiten. Wir haben gerade diese kleinen Kerle. Lass uns reinspringen. Lasst uns ein paar Techno-Tickets mit Zahlenvariablen kaufen ein paar Techno-Tickets mit Zahlenvariablen Okay, um anzufangen und nichts mit Zahlenvariablen zu tun zu haben, wir werden großartig sein und Option oder Alt Vermögenswerte wechseln. Wir nehmen unseren Button, den wir zuvor gemacht haben, und ich nehme einen, der Satz zwei ist. Kannst du sehen, wie cool das jetzt ist, und ich möchte die Wassermelonenfarbe verwenden Gefällt mir. Ich nehme dieses Seitensatz zwei plus. Es ist toll, einige der Dinge, die wir gemacht haben, tatsächlich verwenden zu können . Ich nehme das F K und mache eine kleine Kiste, wie du es am Anfang gesehen hast. Füllen wir es mit Weiß. Ich werde etwas Text hineinlegen. Es wird eine große alte, eigentlich eine kleine alte Null sein. Einfach da in die Mitte legen. Machen wir es größer. 24 zum Kichern, werde ich sagen, lassen Sie uns zentriert sein . Das wirst du in einer Weile sehen Ordnung. Also, was werden wir tun? Lassen Sie uns einige Variablen in Gang bringen. Wir werden nichts ausgewählt haben. Wir werden zu Variablen übergehen. Wir werden hier klicken und wir haben die, die wir zuvor erstellt haben. Was wir tun können, ist eine Variable zu erstellen und als nächstes machen wir Nummer 1. Aber dann fängst du an, sie alle zu vermischen und du denkst, es ist wieder ein bisschen verwirrend. Was mir gefällt, ist, dass Sie auf das Öffnen klicken können falls es noch nicht geöffnet ist, und Sie können sagen , ich möchte dieser Sammlung einen Namen geben. Diese hier wird Color Stuff heißen. Okay, ich werde eine weitere machen, eine neue Kollektion erstellen, und das wird Zeug zur Sammlungsnummer sein. Sie sind immer noch da. Ich habe Sachen wegen oder Farben, und ich habe Zahlenkram. Ich werde an Zahlenmaterial arbeiten , nur um es getrennt zu halten. Sie können zusammen gehen. Wir werden auf Nummer eins setzen, was werden wir tun? Anstatt dieser genannten Nummer. Nennen wir es total, damit es etwas klarer ist. Und den Wert, lassen Sie uns diesen Wert auf etwas anderes wie fünf ändern , nur damit wir sehen können, was er bewirkt. Okay, cool. Okay , wir werden das einfach hier nach oben verschieben, das da hin verschieben, sodass du beide sehen kannst. Alles, was wir tun müssen, ist dieses Textfeld zu sagen, nicht das äußere, aber das Außenfeld könnte es auch tun Aber das hier hätte ich jetzt gern, es ist keine Füllung und kein Stil , denn so haben wir die letzten gemacht . Zahlen sind unterschiedlich. Ich werde hier Zahlen angeben, und was wir tun, ist, dass der Weg hier oben ist. Sehen Sie dieses kleine Symbol hier. Das ist das Variablensymbol. Man sieht es hin und wieder, früher war es überall. Das neueste UI-Update, sie haben es ein wenig entfernt, aber Sie werden es sehen, wo wir hingehen. Siehst du dort? Das ist es. Hexagon, Pentagon, Pentagon . Ich glaube, es Aber Sie werden es in einigen Feldern sehen, manche haben es, manche bedeuten nicht, dass ich eine Variable auf die Zeilenhöhe anwenden kann Ich will nicht. Ich will dir nur die Idee geben. Aber dieser hier, dieser wird es auf dieses Textfeld anwenden . Welcher? Ich könnte. Ich kann mich nur insgesamt bewerben. Ich habe es gespielt und es wurde fünf. Diese Variable ist jetzt mit diesem Textfeld verbunden. Das Gute daran ist, dass ich sagen kann, eigentlich möchte ich, dass es 15 oder wieder auf Null Wir werden es auf Null setzen, aber wir können sehen, dass sie miteinander verbunden sind. Als Nächstes müssen wir das schließen. Das Ganze besteht aus zwei Teilen. Das ist der knifflige. Das ist die Farbe, als wir sagten, wir haben es für den ganzen Rahmen gemacht. Wir haben es unterfüllt gemacht. Das war klar, wir wollen die Füllung eine bestimmte Oberflächenfarbe hat. Das war cool. Das hast du am Anfang gesehen. Es ist eine Schaltfläche, auf die du klickst. Es ist eine Interaktion, die im Prototyp stattfindet. Das bringt mich jedes Mal, wenn ich es mache. Ich habe gebissen. Oh, ich erinnere mich. Denn was ich tun möchte, ist, dass sich das ändert, wenn auf diese Schaltfläche geklickt wird Wir sind jetzt mit der Nummer fertig. Wir brauchen ihn überhaupt nicht. Er ist vernetzt. Was wir allerdings brauchen, ist der Knopf, um dem Kerl zu sagen, was er tun soll. Man macht es als Prototyp. Unter Prototyp möchte ich Interaktion hinzufügen, wie wir es zuvor getan haben. Ich möchte sagen, welche Aktion möchte ich ausführen, wenn dieses Ding angetippt wird ? Was wir gemacht haben, ist Navigation zwei. Oft gehen wir einfach auf eine andere Seite. Das ist der, den wir wollen. Wir wollen eine Variable setzen. Hier wird es ein bisschen komisch. passieren ein paar Dinge. Du hast diese Interaktion. Kannst du sehen, dass dieses kleine Ding erscheint? Also, wenn du dir die Figma-Datei von jemand anderem ausleihst, eine der Community-Dateien, und sie Dinge macht, sagst du, wie zum Teufel macht das Zeug sagst du, wie zum Teufel macht das Also nur ein Prototyp und schauen Sie, ob Sie sich zurechtfinden können und gehen, schauen Sie, hier ist etwas los Und was ich gerne mache, ist , wenn dieser Button ausgewählt ist, anstatt hier oben zu arbeiten, das gefällt mir nicht. Es ist zu distanziert. Ich weiß nicht , warum genau das gleiche Drop-down-Menü , wenn du es hier drüben machst, sich mehr angehängt anfühlt. Es spielt keine Rolle , wie Sie es tun. Schaltfläche ausgewählt, klicken Sie hier oben oder wählen Sie diese Option. Ich kann es nicht wirklich sehen, ich muss es nach oben verschieben. Eine Variable setzen hat das gemacht. Welche Variable? Nicht das Farbzeug. Farbiges Zeug. Ich will das Zahlenzeug, das Ganze. Also, was wir bisher gemacht haben, ist, wenn darauf geklickt wurde, eine Variable mit dieser Farbe zu setzen Was möchte ich damit machen? Okay? Das ist der Ausdruck. Ich möchte, dass die Summe um eins subtrahiert wird, und ich habe gerade eins auf meiner Tastatur eingegeben Sie können eingeben, subtrahieren, subtrahieren. Eigentlich möchte ich es nicht subtrahieren. Ich möchte eine Pause einlegen Es spielt also keine Rolle , ob Sie es eingeben oder hinzufügen möchten, Nummer eins. Hervorragend. Es wird funktionieren. Hoffentlich. Lass uns das prototypisieren. Ich klicke auf den Rahmen, gehe hierher und lass ihn im Vorschaumodus starten, damit wir alles sehen können. Bist du bereit? Bereite die Matrix vor. Wir kommen dich holen. B biografisch. Ich liebe es so sehr. Das Problem ist.dd dt. Geh nicht runter Geil. Ich liebe es. Machen wir genau das Gleiche, aber wir kriegen es runter. Also, hier ist ein Button. Was werden wir tun? Wir müssen das im Prototypmodus sicherstellen. Was müssen wir tun? Prototyp-Modus. In Richtung? Was werden wir tun? Es könnte beim Tippen oder beim Klicken sein. Es spielt keine Rolle, aber ich werde sofort sagen , was ich will? Als ich bei Klick auf Tippen sagte, wenn es weiß, dass es ein Handy ist, wird es tippen, weil du nicht auf ein Telefon klickst. Wenn du ein Desktop-Gerät verwendest, tippst du auf Okay , das alles funktioniert trotzdem. Aber es wird beim Klicken angezeigt. Genau das Gleiche. Unter den Aktionen hier kann ich sagen, dass ich eine Variable setzen möchte, wie wir es zuvor getan haben. Ich mache es aber gerne hier unten. Welche Variable? Lass uns die Nummer machen. Scrollen Sie nach unten. Oh, Mann. Kann keine Variable sehen. Das hätte ich gerne gemacht. Dieser hier. Welches Ziel? Ich möchte, dass Sie die Summe als Ziel angeben , also diese Zahl dort. Ich möchte, dass du mit ihnen machst, ich nehme die Summe und minus eins. Du machst es. Schnapp dir das Oberteil. Gehen wir in die Vorschau und gehen wir eins rauf und eins runter. Äh, runter runter runter runter. Schau uns an. Es ist super einfach, aber ich weiß es nicht. Es gefällt mir. Eine Sache, die ich dir zeigen oder an die ich dich erinnern möchte ist, dass du manchmal die Ziele entfernen willst , während du sagst, Hue, mach es kaputt. Es wird nicht mehr verbunden sein. Und wie stelle ich sicher, dass ich die Variablen nicht sehen kann? Wo sind sie? Denken Sie daran, sie befinden sich im Prototypmodus. Die Abkürzung dafür ist Alt auf einem PC, Option auf einem Mac, und es ist acht und neun. Neun ist Prototyp, acht ist Design. Wechsle zwischen diesen beiden hin und gewöhne dich daran. Und direkt am anderen Ende der Tastatur derselben Taste eins und zwei zwischen Assets und Datei Das ist eine praktische Art , mich an sie zu erinnern. Sie befinden sich auf jeder Seite der Benutzeroberfläche, also acht und neun auf meiner Tastatur und eins und zwei ist hier drüben. Oh, es muss das optionale Alki gedrückt halten. In Ordnung. Wir haben eine Variable erstellt. Und es geht rauf und runter. Es ist ziemlich einfach. Es gefällt mir. Wir werden fortgeschrittenere Dinge tun, weil eines unserer Probleme im Moment ist, dass dieser Typ das macht. Du hast es wahrscheinlich getan. Du sagst, Ah. Was passiert, wenn ein Checkout minus sieben ergibt? Zahlen wir ihnen Geld? Limerick Techno muss dir also negative 7$ schicken, negative Sekunde , unabhängig von negative Sekunde Das nennt man variable Bedingungen. Das werden wir später im Kurs ziemlich viel später tun. Sie können also heranzoomen, wenn Sie jetzt einfach weitermachen wollen, aber ich denke, das war's. Das ist gut für den Einstieg in diesen Kurs für Fortgeschrittene. Verbringen Sie zu viel Zeit Variablen, weil viel dahinter steckt. Später im Kurs gibt es dazu einen ganzen Abschnitt , aber ich weiß es nicht. Ich möchte, dass du stolz darauf bist, dass es funktioniert. Wir haben zwei verschiedene Variablen erstellt. Wir haben die Farbe eins und wir haben die Nummer eins gemacht. Es gibt so viele Dinge, die Sie damit machen können, und das Coole daran ist, dass Sie sich Dokumente anderer Leute ausleihen können , die Variablen enthalten, und jetzt wissen Sie, wie man sie umgeht und ändert Nehmen Sie einfach ein paar Anpassungen vor. Schau dir das an. Wir sind Programmierer. Wir sehen uns im nächsten Video Ich hoffe, das zwingt uns nicht dazu, ein Klassenprojekt zu machen. Ja. 32. Klassenprojekt 08 - Anzahl der Variablen: Richtig, beruhige dich. Beruhige dich. Es ist Zeit für Klassenprojekte. Du liebst es. Okay, ich möchte, dass du einen Einkaufswagen erstellst. Nennen wir es sogar einen Einkaufswagen. Okay? Und ich möchte, dass du dafür sorgst, dass die Theke funktioniert. Genau wie wir es im letzten Tutorial gemacht haben. Erstelle einfach deine eigene Version. Okay, ich habe aufgelistet, mach eine Zahl variabel, damit die Plus- und Minus-Tasten funktionieren. Also im Grunde das. Ich möchte, dass Sie zur Vorschau gehen, was Shift Spacebar ist , auf die richtige Seite gehen Umschalt-Leertaste. Und ich möchte, dass das rauf und runter funktioniert Okay. Ich möchte auch, dass du deine Checkout-Seite gestaltest. Ich habe es Checkout genannt. Das ist eigentlich ein Einkaufswagen. Sie sind sehr unterschiedlich. Wir sind nicht sehr unterschiedlich, aber sie sind verschiedene Teile des Flow-Einkaufswagens. Oft müssen Sie auf der Checkout-Seite, sobald Sie dies bestätigt haben , Ihre Kreditkartendaten und Dinge wie Ihre Lieferadresse eingeben Kreditkartendaten und Dinge wie , die nach dem Auto passiert . Ich möchte, dass du es dir ausdenkst. Ich habe etwas sehr Kleines gemacht, du kannst noch weiter gehen. Die Art und Weise, wie ich mich inspirieren lasse, sind einige der neuen Dinge hier, Schicht zwei. Ich habe Figman gebeten, das mithilfe der KI-Funktionen zu erstellen Ich ging zum ersten Entwurf und sagte: Mach mir eine Checkout-Seite, was das falsche Wort ist Ich hätte Einkaufswagen für einen Veranstaltungsort sagen sollen. Ich habe mir die Grundlagen gegeben, und ich habe es einfach grob kopiert. Ich dachte, Bild auf der Seite , Titel. Ich benutze den kleineren Text dafür und dann benutze ich die Buttons, die schon gemacht sind , lass mich inspirieren. Wenn Sie die KI-Funktion nicht haben, gibt es viele Orte, an denen Sie sich kostenlos online inspirieren lassen können. Die wahrscheinlich beste ist etwas, das sich Mob nennt Okay, mobin.com wird von vielen UX-Designern verwendet. Es ist eine kostenpflichtige Seite. Es gibt kostenlose Optionen. Sie können es kostenlos verwenden, aber Sie erhalten nur eine bestimmte Anzahl von Ergebnissen. Sie können hier sehen, dass ich CRT eingegeben habe und es mir einige Warenkorb-Optionen gegeben hat Schauen wir uns IOS to Web an. Die Seite ist so gut, aber du musst dafür bezahlen. Wenn du Mobin benutzt, kannst du mir hier folgen Ich bin bei BYOL auf Mobin. Ich bin mir nicht sicher, warum du das tun würdest, aber du bist hier. An anderen Orten ist Dribbling offensichtlich ein richtig guter Ort. Ich habe Einkaufswagen eingegeben. Sie können hier sehen, dass sie extrem übergestaltet sind. Das ist einfach ein wirklich cooles Design , das jemand für sein Portfolio verwendet Das kannst du auch absolut machen. Manchmal, wenn du nach etwas suchst und du sagst, lass das funktionieren? Ist das praktikabel? Manchmal kannst du nicht, manchmal kannst du es Denn wer verkauft das Ding mit dem Nike-Helmkopf? Du hast ein langweiliges Ding, das du verkaufen musst. Aber einige von ihnen sind cool. Andere Orte sind Dinge wie ich nur Google-UI-Inspiration für den Einkaufswagen, nicht für die Checkout-Seite, weil sie anders sind. Lass es mich dir zeigen. Einkaufswagen, lass uns zur Checkout-Seite gehen. Siehst du, das ist eher der letzte Schliff kurz bevor du jetzt bezahlst. Sie haben alle Details verstanden. Lass uns einen Blick darauf werfen. Convert Cart war einer, der aufgetaucht ist und sie hatten eine Menge Inspiration darin. Offensichtlich Dinge wie Pintres Bhans Überall, wo du hingehst einen Einkaufswagen zu finden und etwas für dich in Gang zu bringen Jetzt, wenn es funktioniert, geht es rauf, rauf, rauf, runter runter Ich würde gerne ein Video sehen, in dem es funktioniert, rauf, rauf, runter und das Video entweder auf deinem YouTube- oder Vumeo-Konto veröffentlichen entweder auf deinem YouTube- oder Vumeo-Konto und uns den Link in den Klassenprojekten schicken Andernfalls mache ich einen Screenshot. Also ich möchte, dass du dich im Prototypmodus befindest, damit du diese kleinen Kerle sehen kannst, und ich möchte, dass du dein Design öffnest, Variablen öffnest, dann zurück zum Prototyp gehst und einen Screenshot davon machst im Prototypmodus befindest, damit du diese kleinen Kerle sehen kannst, und ich möchte, dass du dein Design öffnest, Variablen öffnest, , damit ich die Zahlen, den Wert oder noch besser sehen kann. Schau dir das an. Zeig dir, wie du arbeitest. Ein Screenshot von all dem wäre toll. Ich habe Klassendateien geladen und fühle mich großartig und fortgeschritten an, wenn Sie Variablen in Ihren Prototypen verwenden . Genieß es. Es könnte ein bisschen frustrierend sein. Möglicherweise müssen Sie sich die letzten Videos erneut ansehen. Wenn du Fragen hast oder dich verirrst, lass es mich in den Kommentaren wissen Wenn du weißt, was du tust, schau dir die Kommentare an, um zu sehen, ob du jemand anderem helfen kannst. Es fällt mir schwer, alle Fragen zu beantworten, du könntest mir helfen. Das ist es. Das ist das Klassenprojekt vorbei. Wir sehen uns im nächsten Video. 33. Klassenprojekt 09 - Event Branding: In Ordnung, es ist super tolle Zeit für Klassenprojekte. Ich möchte, dass du dir ein kleines Logo mit einem kleinen Symbol Ich möchte, dass du es eingibst und eine Statusleiste suchst. Okay? Das ist das kleine Ding da oben. Ich möchte, dass du auch ein paar Farben auswählst. Okay, das sind die Grundlagen. Die einzige andere Sache ist, dass das Logo einen Hell- und Dunkelmodus haben muss. Oh. Ich habe einen Kippschalter Ich zeige dir in diesem Video auch , wie das geht. Deshalb möchte ich es etwas genauer durchgehen und Ihnen zeigen, wo Sie Farben und Symbole bekommen. Also wird ein bisschen einfach geredet. Aber das Klassenprojekt ist nicht besonders schwer. Okay, Logo, Farben, Statusleiste und Bildschirmdiagramme. Komm rein. Woher bekommst du dein Tier Es ist vom Random Project Generator. Wenn du das noch nicht getan hast, gehe zu Random Project Generator.com, und das ist das, was ich bekommen Okay, ich war Limerick Techno und meine Marke war ein Vogel. Sie können Ihr eigenes Logo entwerfen wenn Sie bereit sind, ein Logo zu entwerfen Geh und mach das. Andernfalls können Sie einfach ein Symbol verwenden, wie ich es getan habe. Platzieren Sie es neben einem Text, fügen Sie eine Statusleiste hinzu, machen Sie sie zu Komponenten und fertig. Oh, und wähle Farben aus. Lassen Sie mich das etwas genauer durchgehen. Also, wo wir hingehen, holen wir uns den Brief, fertig. Das Logo. Sie können kostenlose Stock-Icons verwenden. Wo ich hingegangen bin, bin ich bis hierher gegangen. Ich habe mir meine Plugins angesehen und Icon eingegeben, und diese ändern sich Die, die ich in meinen früheren Kursen vorgeschlagen habe, ist weg. Icon 8 ist gut, manche sind kostenlos, manche nicht. ConAPI ist auch gut. Von dort habe ich diesen bekommen. Mir gefällt, dass du es reinbringst, du kannst sagen, eigentlich, weil ich eines davon mitgebracht habe Und ich möchte dir einige Probleme zeigen, die du bekommen könntest. Lass uns diesen reinbringen. Okay? Ich verstehe die Höhe, die Farbe. Ich kann es als Komponente importieren. Oh, das spart etwas Zeit oder als Rahmen und macht anschließend selbst eine Komponente. Okay? Egal, bring es rein. Und was Sie finden werden, ist, dass, selbst wenn es auf der Seite steht, es manchmal getrennt davon ist. Lass uns das wieder löschen. Ich möchte meine Seite nach oben verschieben. Ich bin jetzt genau in der Mitte meiner Seite Wenn ich die Kiwi sehe, bin ich Neuseeländerin Ich wollte unbedingt die Kiwis benutzen, mein Vogel. Es ist so eine hässliche Form. Das ist ein Fußball mit dem hängenden Teil. Ja. Was ich dir wirklich zeigen wollte, war, kannst du sehen, dass es vorbei ist? Warum kann ich den Namen sehen? Wissen Sie es? Pop-Quiz? Wissen Sie. Das liegt daran, dass es nicht wirklich in diesem Bild ist. Es wirft es einfach oben drauf, okay? Es hängt also einfach hier oben in meinen Schichten Um es in diesen Rahmen zu bekommen, okay? Ich muss raus und dann wieder rein, nicht raus. Ich lasse dich da stehen, lass los, bring es wieder rein. Und jetzt springt er automatisch in dieses Bild. Eines sollten Sie beachten. Manchmal müssen Sie bei der Skalierung, je nachdem, wie das Symbol entworfen wurde, möglicherweise auch das Skalierungswerkzeug und nicht das Auswahlwerkzeug verwenden . Oft funktioniert das Auswahlwerkzeug, aber manchmal wird ein Skalierungswerkzeug benötigt wenn Striche darin enthalten sind, weil sie seltsame Dinge bewirken könnten. Ordnung, du kannst abhängen. Vielleicht können wir es benutzen. Okay, also erstelle ein Logo, ganz einfach. Stellen Sie sicher, dass Ihr Logo eine Komponente ist und ich möchte, dass Sie eine Variante erstellen. Ich möchte, dass du sicherstellst, dass es einen hellen und einen dunklen Modus gibt. Wir haben vorhin etwas sehr Ähnliches gemacht. Wir haben Varianten gemacht. Wo haben wir das gemacht? Mehrdimensionale Variante oder eine beliebige Variante. Wir haben es für die Tasten gemacht, aber Sie könnten es auch dafür tun , weil ich möchte, dass Sie das haben und sagen, Oh, heller Modus, dunkler Modus, heller Modus, dunkler Modus. Stellen Sie also sicher, dass es sich um eine Komponente handelt. Ich habe meins auf meiner Komponentenseite hinterlassen. Ich habe einen hellen Modus und einen dunklen Modus. Ich möchte, dass du siehst, ob du diese Variante wieder zum Laufen bringen kannst . Keine Variable, Variante. Die letzte Sache hier ist, wo sind wir? Die zweite oder letzte Sache ist, ein paar Farben auszuwählen. Ich möchte mindestens eine Primär - und Sekundärfarbe. Ich habe auch ein paar andere ausgewählt. Ich habe eine Akzentfarbe, manchmal Tertiärfarbe genannt, und dann habe ich ein neutrales Licht und ein neutrales Dunkel Du sagst, ist das weiß und schwarz? Ist es nicht. Ich habe es schon einmal gemacht, wo das ziemlich gut ist, ich sehe, dass es nicht ganz weiß ist. Sie können den Kontrast dort sehen. Ich mag den Kontrast zwischen den beiden. Es liegt an Ihnen , ob Sie für all Ihre Farben reines Weiß oder für Schwarz hier dasselbe verwenden möchten. Es ist nicht ganz schwarz. Wie wählt man sie aus? Ich habe ein kleines Farbmuster gemacht, das du gebrauchen könntest Wenn du also auf meine figma.com bei BYOL gehst, findest du alle meine Community-Dateien, und eine davon heißt Kannst du hier sehen, sie sind alle schwarz-weiß, außer dass ich denke, dass dies die einzige schwarz-weiße ist Sie können sehen, dass ich wärmere Farben angegeben habe, sie werden ein bisschen rot. Es gibt ein bisschen andere Farben und dann wird es hier unten kühler. Sie können Ihre Sets daraus auswählen, wenn Sie möchten. Am Ende habe ich diese beiden für mich ausgewählt. Okay? Sie sind warm. Das ist quasi das, was ich für den Rest meiner Farbpalette anstrebe. Manchmal funktionieren die kühleren Farben besser. Du kannst sie dir selbst ausdenken. Du musst mir meins nicht schnappen. Eigentlich solltest du dort eine Pause einlegen. Ich werde es aus den Übungsdateien herunterladbar machen und es neutrale Farben nennen. Du wartest dort. Eigentlich komm mit. Sie können eine lokale Kopie speichern. Schau, Datei, speichere lokale Kopie. Das passiert nicht oft, weil es sich eine Art Online-Software handelt. Aber ich werde das hier für dich reinstellen . Ich werde die neutralen Farben entfernen und du wirst sie aus deinen Übungsdateien öffnen können . Ich habe oben in den Übungsdateien einen Link für meine Community-Dateien . Sie finden ihn hier und Sie können ihn als öffnen. Du. Da bist du ja. Neutrale Farben. Ich bin's. In Ordnung. Ich sagte, es gibt nicht viel zu tun. Es ist eine Menge erklären, was zu tun ist. Die Statusleiste ist die nächste. Ich möchte, dass du die Statusleiste durchgehst und die Statusleiste findest, wo ich die Statusleiste verwende Du bist das Ding da oben. Okay? Finden Sie es für Ihr spezielles Design. Okay? Also ging ich zu mir nach Hause oder wenn du im Browser Mitglied bist, geh hier hin und gehe zu Dateien wir als Vorlagen und Tools haben wollen. Und hier oben möchte ich eintippen, sie nennen es eine Statusleiste. Statusleiste ist der Name des Dings oben, auf dem sich Ihre Batterie und andere Dinge befinden. Was Sie also tun könnten, ist die Statusleiste und dann Ihre Eingabe , ob Sie ein iPhone 18 verwenden, wann Sie diesen Kurs machen oder was auch immer er ist, oder ob Sie den Android-Kurs möchten, geben Sie ihn einfach ein. Derzeit bei 16, und ich habe gerade einen geöffnet. Wenn ich mich entscheide, schaue ich mir einen an. Oft wähle ich den ersten. Nun, es hat Kamerasteuerung, mit vielen Likes und vielen Downloads, und dieser hier war wirklich gut. Jemand hat es dort gemacht, es ist da. Und es ist wirklich gut. Verstanden, Dan, Dummy, das macht es einfach. Ich habe einfach kopiert und bin zu meinem Design gegangen und habe eingefügt. Das Coole daran ist, dass derjenige, der das gemacht hat, das Süße gemacht hat, das Süße gemacht hat, das wir gerade gelernt haben, und sie haben Varianten hineingelegt Ich dachte, ich habe ein Es tut es. Okay? Es hat einen Hell-Dunkel-Schalter Oh, sieh dir das an. Also tu wirklich nichts dagegen. Danke, Person, die das gemacht hat. Dann hat sie Herman das definitiv falsch gemacht. Aber danke dafür. Die andere Sache , die ich machen werde, während ich hier drin bin, ist, du wirst sagen, den Kippschalter, wie machen wir das? Okay, das ist sehr einfach. Lass uns auch gehen. Wir gehen jetzt vom Thema ab, weil wir eigentlich einfach fertig werden wollen. Also habe ich das gemacht. Liefergegenstände: Machen Sie einen Screenshot Ihrer Farbauswahl und der Statusleiste oben und Ihres Logos. Das ist es , was ich sehen möchte Und lassen Sie uns wissen, ob Sie Ihr eigenes Logo entworfen haben. Wenn es vollständig benutzerdefiniert ist, Sie Ihren eigenen Vogel gezeichnet haben, teilen Sie uns dies mit oder ob es sich um ein kostenloses Symbol handelt, das Sie verwendet haben. Vielleicht wo du es her hast. In Ordnung, zurück zur Sache mit dem Umschalten. Lass uns rüber gehen. Gehen wir, also Komponenten. Gehen wir in die andere Richtung. Ich habe mein Logo hier. Ich kann mit der rechten Maustaste darauf klicken und zur Hauptkomponente gehen, genauso wie ich hier bin und es geht um die Benennung. Wenn ich darauf eingehe und es öffne, habe ich den Modus und ich habe Werte für Hell und Dunkel. Wenn Sie diesen einfach ein- und ausschalten, probieren wir es aus. Schauen Sie sich diesen an, Sie sehen, er ändert den Modus von hier aus. Alles, was Sie für die Namen verwenden müssen, ist das Wort Ja oder Nein. Oder ich denke, es gibt noch ein paar andere Varianten, die Sie verwenden können. Ich denke, du kannst benutzen, auf etwas klicken, Dan, ja, nein, nein. Das könnte in diesem Fall sinnvoller sein, weil wir sagen werden, was ist die Standardeinstellung? Ist es. Sag Dunkelmodus. Nein, Modus. Lichtmodus. Also jetzt Lichtmodus? Ja, Sie befinden sich im Lichtmodus, was bedeutet, dass er auf Lichtbildschirmen gut aussieht. Aber wenn ich den Lichtmodus ausschalte, Pop, ist er im Dunkelmodus. Es spielt keine Rolle, aber es sieht cool aus. In Ordnung. Das war länger als ich dachte. Aber da paar lustige kleine Projekte drin, Logo, Farben in der Statusleiste. Sobald Sie das getan haben, müssen Sie dieses nicht mehr in die sozialen Medien hochladen, sondern nur in die Klassenprojekte, und ja, sehen Sie im nächsten Video 34. Erstellen von UX Farbvarianten mit einem Figma Widget: Hallo, alle zusammen. In diesem Video werden wir uns Farbstile ansehen und sie automatisch erstellen. Hier benötigen wir diese primären und sekundären Farbfelder , aus denen wir ziehen können Anstatt zu versuchen, sie zu erraten und sie selbst herzustellen, verwenden wir unser Plug-In, bei dem wir die Farbe ändern können . Es geht durch und erstellt alle Farbstile für uns Bereit, in unser Style-Panel zu gehen. Super einfach, super schnell und super genial. Oh, um das Widget zu finden, öffnen wir unsere Aktionen. Befehl K oder Strg K. Wir klicken einfach auf die Schaltfläche und geben den Generator für Farbetiketten ein. Er heißt jetzt Generator „ Farbe einfügen“. Wie dem auch sei, auch wenn dies nicht hier ist, finden Sie einen der beiden Farbpalettengeneratoren. Es gab noch einen , der ziemlich gut ist. Es heißt Foundations Color Generator. Das ist ein bisschen härter, es liegt an dir, aber ich mag dieses. Zu sagen, dass, wenn Sie das nicht finden können oder es mehr funktioniert und nicht mehr unterstützt wird, es andere gibt, nach denen Sie suchen müssen. Aber der allgemeine Prozess ist derselbe. Was wir tun werden, ist , dass wir mir meine Primärfarbe schnappen müssen . Es ist dieser hier, ich vier, sieben, vier, sechs B, und ich werde ihn hier eintippen. Stellen Sie sicher, dass Sie den Hash da drin haben. Ich flippe aus, wenn es kein Hash gibt. Dann passiert nichts, bis du mit der Tabulatortaste weitermachst, mit der Tabulatortaste herausklickst, und jetzt habe ich meine Farbe habe die eine Farbe, die ich hatte, in verschiedene dunklere und hellere Töne aufgeteilt die eine Farbe, die ich hatte, in verschiedene dunklere . Wir können es benennen. Groß- und Kleinschreibung wird meine primäre Bindestrichfarbe sein. Wenn ich das mit der Tabulatortaste rauslasse, ist es für die britische Rechtschreibung weg , okay? Man kann sehen, dass sie sie wirklich gut benannt haben. Sie könnten genauso gut ein Akronym für Ihre haben müssen , denn wenn Sie mit vielen verschiedenen Kunden arbeiten, haben Sie möglicherweise zu viele Primärfarben. Okay? Es liegt an dir. Ich werde meinen verlassen, nur mich in diesem Kurs nicht verwirren, mach das Und dann sind sie alle hübsch benannt. Schau dir das an. Was wir tun können, ist zu sagen, dass ich diese Stile eigentlich speichern möchte. Und hier passiert die Elle. Und du sagst, es ist nichts Cooles passiert. Oh. Habe aber nichts ausgewählt Beobachten. Wenn ich darauf eingehe, passiert das. Warum? Lass es uns nochmal versuchen. Klicken Sie darauf. Speichern Sie Stile. Da drüben. Ich bin mir nicht sicher, was dort passiert ist. Da drüben. Wie auch immer, klicken Sie zweimal darauf. Ich habe meine Grundfarbe. Ich werde das loswerden, weil das nicht meine Grundfarbe ist . Ich habe all diese. Warum sind sie gut? Offensichtlich sind sie einfach bereit zu gehen. Ich kann das durchgehen und sagen, ich mache gerade eine Karte und muss mir eine meiner Farben aussuchen. Ich kann Farbstile wählen und sagen: Okay, ich will, dass es die 700 Fantastisch. Ich neige jedoch dazu, dass ich oft nicht die volle Bandbreite habe. Ich verwende keine 50. Das liegt an dir. Ich werde auch alle ganzen Zahlen los. Ich werde 200, 400 ganze Zahlen los , gerade Zahlen. Das will ich wissen. Ich will nur die. Es wäre wirklich typisch, diese zu haben. Wenn Sie ein größeres Unternehmen sind, haben Sie sie alle. Ich neige dazu, nur an kleineren Projekten zu arbeiten, und wenn ich 600 brauche, kann ich sie machen. Es ist nicht schwer. Ba Na hat gerade eine aufgeräumtere Gruppe. Und das Coole daran ist dieser kleine Stecker einfach rumhängt Du brauchst ihn nicht mehr. Du kannst ihn löschen, okay? Und deine Primi und deine Farben verschwinden nicht. Er ist ein Plug in , der einfach rumhängt, bis du ihn nicht mehr brauchst, okay? Ich werde den Rest machen. Wir machen noch einen zusammen, oder? Ich mache sie schnell und höre auf, wenn ich zu etwas Nützlichem komme. Füge es ein. Ordnung. Wir sehen uns in einer Sekunde. Oh ja, pausiert. Ich weiß, dass ich es getan habe Ich muss nicht einmal nachschauen. Also ging ich zu dieser, änderte die Farbe, weißt du, gab ihr eine Primärfarbe, ging zu dieser, änderte die Farbe, drückte einfach auf Stile speichern und ich habe den Namen nicht geändert, ich wette, wenn ich mal nachschaue, Primärfarbe? Oh, es hat es nicht überschrieben. Vielleicht musst du zweimal darauf klicken. Aber wenn ich das jetzt mache, werde ich meine Primärfarben durch diese neue ersetzen. Wenn ich also zur Sekundarstufe gehe, möchte ich, dass wir das richtig machen. Okay, du willst, dass das so ist. Also, es sind die richtigen, aber ich muss das ändern, bevor ich weitermache. Das wird also meine Sekundarstufe sein. Drücken Sie die Eingabetaste. Ich würde sagen, dass „Stile speichern “ zweimal gedrückt wurde, weil es anscheinend nicht funktioniert hat. Geh, sie sind dabei. In Ordnung. Also wieder unser letzter, Geschwindigkeitsmodus. Ja. Okay. Du hast gesagt , tu es nicht, ich übersetze es. Diese Sekundärfarbe wurde zu 100% überschrieben. Zurück zum Geschwindigkeitsmodus. Okay, eine Sache ich Ihnen zeigen werde, ist, dass auf dem Bildschirm sehr schwarz aussieht, aber wenn Sie dann zu diesen helleren Farben kommen, können Sie sehen, dass das Schwarz, das ich ausgewählt habe, sehr warm Also nenne ich es neutral und füge das hinzu. Ich muss zweimal darauf klicken. Ich weiß nicht warum. Und für diesen hier brauche ich eigentlich keine Versionen davon. Ich werde einfach den Namen in Interface ändern und ich werde nur eine Farbe dafür haben. Also ich muss dieses Stilding nicht benutzen. Es wird einfach diese Farbe sein, also werde ich sagen, gehen wir dazu, ich werde auf Stil hinzufügen klicken. Ich werde keine Variable sein. Ich werde wieder stilvoll werden. Nun, das ist verwirrend. Lassen Sie uns zu den variablen Dingen springen wir vorhin gemacht haben. Ich werde es stilvoll angehen lassen. Der Name dieses wird Interface sein. Toller Stil. Mal sehen, was wir haben. Ich brauche dich nicht mehr. Denk nach, Kumpel. Ich werde sie einfach im Schnellmodus aufräumen , weil dabei einfach eine ganze Menge Zeug gelöscht Schau dir das an. Wenn du die 50 willst, kannst du die 50 behalten. Wenn du sie alle haben willst, behalte sie alle. Es gibt keine wirklichen Regeln. Ich stelle gerne sicher, dass diese in Ordnung sind. Die Farben, die für sich allein stehen , müssen ganz oben stehen. Diese Gruppen hier, sagen einfach, wenn du sie in unterschiedlicher Reihenfolge erstellt hast, kannst du dich primär bewegen, um an die Spitze zu kommen, wenn es das vorher nicht war, großartig. Die andere Sache, die ich gerne mache, ist, wenn ich , sagen wir, etwas ausmale ein Kästchen oder einen Rahmen zeichne, und ich sage, du wirst diese Musterfarbe Anstatt sie alle durchgehen zu müssen, was ziemlich lang ist, können Sie einfach hier oben nach Typ 500 suchen Okay, dann gibt es dir die 500 von all diesen weil du weißt, dass du die Farbe 500 willst. Nehmen wir an, Sie möchten die dunkelste Version der Farbe. Okay, du kannst durchgehen und einfach diesen auswählen. Wenn sie dunkel sind, sehen sie sich eigentlich alle ziemlich ähnlich. Also ja, das ist praktisch. 500 und ich werde dich benutzen. Also gut. Das heißt, Farbvarianten innerhalb von Figma mithilfe eines Widgets zu erstellen . Muss nicht das Widget sein Denken Sie daran, dass viele andere Leute sogenannte Stiftungen verwenden . Es ist auch sehr cool. Es macht es ein bisschen anders. Ich bevorzuge diesen. Vielleicht findest du deinen eigenen, den du wirklich magst. Ordnung, meine Freunde. Das ist es. Wir sehen uns im nächsten Video. 35. Raster gegen Einschränkungen gegen Autolayout – Welches soll wann verwendet werden?: Sprechen Sie über Raster, Beschränkungen und/oder Louts, wann Sie sie verwenden würden, wofür sie verwendet wurden und wann Sie sie verwenden würden, wie ich sie in meinem Entwurfsablauf verwende, die wichtiger sind, womit ich beginne, was ich bis zum Ende nicht richtig mache, und einige von ihnen, die ich überhaupt nicht oft verwende, nur damit Sie ein besseres Gefühl dafür bekommen, was all diese Dinge bewirken und wie sie interagieren. Es ist waffelig. Mach dich bereit für die Waffel Gut, lass uns reinspringen. Alles klar, also eine kurze Zusammenfassung der Autolayouts Das sind nur Textfragmente, die herumliegen. Automatische Ausgänge sind großartig. Sie löschen sie alle und drücken Shift A. Sie sind jetzt Auto Out Auto-Outs funktionieren so, dass sie an den internen Komponenten hier drinnen arbeiten. Sie sorgen dafür, dass es ansprechbar ist. Aber zu den Dingen in meinem Auto raus. Das heißt nur, dass ich mir das schnappen kann, es hierher verschieben kann, ich kann mich einloggen und es hier reinwerfen. Ich kann zum Text wechseln und er fließt wieder. Das ist ein automatischer Ausgang. Eine Einschränkung ist das Äußere der Box. Es ist immer noch Reaktionsfähigkeit, aber wenn ich es auf diesen Desktop bringe, versucht es, von oben zu kommen und es bleibt bei der Standardeinstellung, die übrig ist Aber wenn ich hier rübergehe und sage, mein Freund, bleib auf der rechten Seite Das heißt, wenn ich hier reingehe und sage, dass du die Größe ändern musst, ändert sich die Größe und alles reagiert Es ist also das Äußere der Box. Bei der letzten Option handelt es sich um Raster oder Layoutführungslinien oder Stützen. Die Layoutanleitung für Anrufe finden Sie hier. Ich habe drei Kolumnen über meine geschrieben. Ich werde es später drehen, um sie richtig zu machen. Aber ich habe Kolumnen. Diese sind nur nützlich, um die Konsistenz zwischen den Seiten zu gewährleisten. Ich möchte, dass die Ränder auf beiden Seiten gleich anstatt zu versuchen, sie zu erraten oder die magische Kiste zu zeichnen. Wenn du das schon einmal gezeichnet hast, verschiebst du es, um die Dinge in eine Reihe zu bringen. Sie möchten Konsistenz bei Ihren Rändern und Spalten. Sie schalten Ihre Layoutanleitung ein, und das hilft uns bei der Reaktionsfähigkeit Wie trägt es zur Reaktionsfähigkeit bei? Es ist gut, um Dinge einfach in Ordnung zu bringen. Es ist gut für die Reaktionsfähigkeit. Wenn ich das tatsächlich tun würde, werfen wir diese hier auf die Karte. Das ist eine Bestellung, die ich vorhin aufgegeben habe. Ich gehe, in Ordnung, raste in die Seite. Das machen wir. Das ist praktisch genug. Aber wenn ich noch eins mache, arbeite ich jetzt an meinem Tablet. Und ich brauche es kleiner, ich werde schauen, was passieren wird. Es folgt unseren Kolumnen. Wir müssen es nicht hineinziehen und dann unsere Spalten finden und wieder zusammenstellen. Der Grund dafür ist eine Kombination. Das Erste, worüber wir gesprochen haben, ist ein Atoout . Es sind Einschränkungen Das zweite, worüber wir gesprochen haben, schau dir das an, wenn ich es hineinziehe, du wirst sehen, schau, er ist da drin. Das ist einschränkend, aber nicht auf die volle Größe der Seite. Wenn Sie Spalten aktiviert haben, wird es sagen: Ich gehe einfach hierher. Wenn du keine Spalten hast, versucht es, den Seitenrand zu verwenden. Sie werden sehen, dass sich beide Seiten auch an der Seite befinden. Ich habe diesen automatischen Ausgang sowohl links als auch rechts eingestellt . Also, wenn ich zum Tablet gehe, macht es das. Ich kann dasselbe tun, wenn ich auf das Handy umsteige. Das sind die drei Bereiche Einschränkungen und Hilfslinien für die automatische Ausgabe. Ich möchte dir zeigen, wann ich sie verwende , weil das wichtig ist. Ich zeige dir alles in diesem Kurs. Ich möchte Sie wissen lassen, welche Option häufiger verwendet wird , weil es eine dritte oder vierte Option gibt. Es gibt die Option „Nichts tun“. Ein Großteil meiner Arbeit besteht aus Mockups, für die keine automatischen Übertragungen, keine Einschränkungen und keine Raster erforderlich sind. Dann verwende ich Lassen Sie mich einfach darüber sprechen , wann ich sie am häufigsten benutze. Am Ende verwende ich wahrscheinlich am häufigsten die Hilfslinien, weil ich beim Entwerfen Konsistenz und ich möchte, dass Ränder und ich möchte, dass sie sich daran anpassen. Selbst wenn ich vorhabe, nichts zu tun, ist meine erste Stufe: Nichts tun, nichts haben. Zeichne alles heraus und oft kann ich ohne etwas anderes zu meinem Entwickler gelangen . Nur Frames auf der Seite, nichts ist responsiv, und wir arbeiten schon so lange zusammen, dass er es nicht sehen, sich bewegen muss. Wir führen keine Tests mit Benutzern auf verschiedenen Telefonen durch, sondern nur ein paar Quadrate mit Bildern, die alle aneinandergereiht sind. Aber um meiner selbst willen habe ich oft Anleitungen dabei, nur damit die Konsistenz auf allen Seiten gewährleistet ist. Ich möchte nicht, dass es auf dieser Seite ein bisschen so ist und dann ein bisschen weiter auf dieser , ich will Konsistenz. Das nächste, was ich verwenden würde, ist der automatische Ausgang. Automatische Ausgänge sind praktisch. Sie sind wirklich einfach zu erstellen und ich kann Dinge ändern und ich kann Dinge neu eingeben, vor allem Dinge wie Knöpfe Haben wir hier eine Schaltfläche, die Auto Layout heißt? Wahrscheinlich nicht. Vielleicht diesbezüglich. Wie ich meine Kurse teste teste das Video, bevor ich es mit dir mache. Haben wir einen Button? Da hast du's. Das ist die Auto-Out-Taste, Sie können sehen, wie nützlich das ist. Ich werde wahrscheinlich die Knöpfe machen. Es wird wirklich nützlich , wenn du diese Sache hier machst. Lass uns zu diesem gehen. Audios benutze ich ziemlich oft, wenn ich gehe, Ordnung, ich habe dieses coole Ding Okay, aber ich brauche ein paar davon. Ich gehe hoch, duplizieren, duplizieren, duplizieren, duplizieren, okay? Ich werde sie alle auf Auto Out setzen, dann kann ich da rüber gehen, da drüben. Sie können sehen, wie schnell und einfach es ist. Aber in der ersten Phase, in der ich dieses Ding entwerfe, ist es nie eine automatische Ausgabe. Ich entwerfe es einfach so, dass es aussieht, und wenn ich dann jede Menge davon machen muss, verwandle ich es in Autolou und fange an, mit ihnen verwandle ich es in Autolou herumzuspielen In Ordnung, was sonst? Der letzte sagt Einschränkungen. Einschränkungen sind nützlich , wenn Sie müssen. Nehmen wir an, Sie haben etwas relativ Komplexes oder wissen zumindest , dass die Entwickler Ihr Design auf verschiedene Weise interpretieren könnten. Du sagst, nein, nein, nein, du musst das definitiv tun. Lass uns zu unserer Karte gehen, eins verschieben, rauszoomen und so. Haben wir eine Karte? Sagen wir das hier. Ich möchte, dass er weiß, dass das in der oberen rechten Ecke bleibt und nicht einfach dort bleibt. Okay, ich musste wissen, dass das passiert. Das ist ein einfaches Beispiel, aber verstehst du, was ich meine? Ich möchte zum Beispiel nicht, dass es auf eine Zeile aufgeteilt wird. Ich möchte, dass es quadratisch bleibt. Ich möchte, dass es oben rechts ist, damit ich einen Prototyp bauen kann , der gezogen und zerquetscht werden kann Es ist manchmal wirklich schwer zu erklären , weißt du, zum Beispiel, hey, das grüne Kästchen in der oberen rechten Ecke, wenn es in den Tablet-Modus wechselt, möchte ich, dass es oben, links und rechts im Bild bleibt, aber wenn du es ignorierst, dann hast du das, ich zeige es dir einfach, du verwendest am Ende Einschränkungen. Wird noch wichtiger , wenn Sie in einem größeren Team arbeiten und Dateien weitergeben, die wiederverwendet werden sollen. Man möchte sie nicht ihnen überlassen , damit es zurückkommt und es ist so, wir überlassen es dem Team, und wenn ich zu meiner Hauptkomponente gehe und zu dieser Sache hier, weißt du, sie haben es irgendwie Wissen Sie, Sie können einfach eine Einschränkung hinzufügen , sodass sie dort bleibt wo sie ist, sodass der gesamte Rest des Teams sie so verwenden kann, wie sie soll. Richtig. Das ist so, als ob ich es nicht weiß. Ist es nützlich? Es ist eine Zusammenfassung darüber, wo ich all diese Dinge verwende, über die wir sprechen, wie wichtig sie sind und wann sie in meinem Designprozess auftauchen. Aber vieles davon ist nur ein Rahmen mit etwas Text darin, und es sieht alles so aus, als ob es responsiv sein wird, aber ich mache das nicht, weil ich mit jemandem zusammenarbeite , mit dem ich schon einmal zusammengearbeitet habe. Sie wissen, wie wir mit Dingen auf unserer Website umgehen , sodass sie kein schickes Autoout benötigen. Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. Hoffentlich war das hilfreich. 36. Hinzufügen von Zeilen und Spaltenrastern zu einem Layout in Figma: Hallo, alle zusammen. In diesem Video werden wir ein Dokument mit Streifen versehen. Sieht aus, als ob Wally ist. Man könnte es Wo ist Waldo nennen, derselbe Typ. Was wir wirklich tun werden, ist mehr als ein Layoutraster hinzuzufügen Wir werden unsere Spalten hinzufügen, wie wir es getan haben, aber diesmal werden wir Rose hinzufügen und wir werden erklären, warum wir uns mit diesem Acht-Pixel-Raster beschäftigen. A wird auf langweilige Weise enthüllt. Einige von Ihnen werden das lieben, andere fragen sich, warum es jemanden interessiert. Mir ist das wichtig. Also lass es uns machen. Ordnung. Fügen wir unseren ersten hinzu. Meistens fange ich damit an, dass ich meinen übergeordneten Frame lösche und dann zu Lou Guide gehe und einen , dass ich meinen übergeordneten Frame hinzufüge , der eine Kolumne ist, vor allem, wenn ich auf dem Handy arbeite. Oft arbeite ich einfach mit einem, weil ich dieses Ding wirklich nur für den Rand will. Denken Sie daran, wenn möglich in Vielfachen von acht zu arbeiten, also möchte ich wahrscheinlich 24. Das Coole daran, ist das alles erledigt? Alles gut? Ist das jetzt so, dass ich das alles durchgehen und sicherstellen kann , dass alles in Ordnung ist, dass alles zusammenbricht , alles konsistent ist Ich will, dass das hier drüben ist. Und die andere Sache, die wir tun könnten, während ich hier bin , ist sicherzustellen, dass es konsistent ist. Kannst du sehen, dass es nach rechts rastet, aber nicht, es ist links und rechts aktiviert Hervorragend. Wenn nicht, kannst du hier rübergehen und sagen, dass du links und rechts bist, damit es sich an der Säule festsetzt. Das haben wir schon gemacht. Besonders cool wird es, wenn wir auch Zeilen hinzufügen. Lass uns auf den übergeordneten Frame klicken. Gehen wir zu meiner Layoutanleitung und wir können mehr als eine hinzufügen. Set plus. Jetzt haben wir den ersten und diesen neuen mit dem Namen Grid Eight Point. Wenn ich eine Rose mit einer Zählung hier haben will, kannst du das auf Auto umstellen und das wird es tatsächlich, lass uns mal schauen. Gehen wir zu fünf. Sie können sehen, dass Zeilen standardmäßig wie Spalten funktionieren. Es ist nicht das, was ich will. Also werde ich das kürzen. Kannst du sehen, dass es eins, zwei, drei, vier, fünf gibt. Bei Zeilen ist es standardmäßig auf Stretch eingestellt. Sie können sehen, dass es das tut. Das will ich nicht. Ich möchte einen konsistenten regelmäßigen Abstand. Ich werde hier drüben gehen meine Zeilen auf B ändern. Stellen Sie es auf Auto ein. Dann heißt es Dehnen, ich will mich nicht dehnen, ich möchte ganz oben beginnen und dann will ich acht runter kommen, das ist wirklich gut. Vier ist besser für dieses Layout, gibt dir ein bisschen mehr Kontrolle. Sie können sehen, dass ich kleine acht Punkte habe und dazwischen eine Dachrinne von 20 Ich will einfach nur vier und vier sein. Ich kriege so ein Ding mit gestreiften Stangen, Barbershop-Stangenbonbons Barbershop-Stangenbonbons Ich sage immer Whiz Wally. Du könntest es Whiz Waldo nennen. Gleiche, das Gleiche. Okay, also ich habe das. Das ist alles was ich brauche. Und das Coole daran ist, dass wir das jetzt durchgehen und sagen können, dass meins eigentlich schon perfekt aufgereiht ist, aber wenn das Coole daran ist, dass wir das jetzt durchgehen und sagen können, dass meins eigentlich schon perfekt aufgereiht ist wir das jetzt durchgehen und sagen können, dass meins eigentlich , Sie mein Oberschiff hierher ziehen, werden tatsächlich diese mehreren angezeigt Ich habe das an der richtigen Stelle, raste bis zum Rand. Lass uns einen Blick darauf werfen. Ich werde das andere einfügen . Lass uns das untere machen. Wo ist er gelandet? Alles ist in Ordnung, aber vielleicht findest du heraus, dass deins auf halbem Weg dazwischen liegt Jetzt steht meins in der Reihe. Ausgezeichnet. Ich werde das Zeug wieder einfügen. Wo bist du hingegangen? Hier wird es richtig interessant. Der Typ ist großartig, wenn man diese vier Pixel Höhe verwendet. Sie können hier sehen, dass es nach unten einrastet. Toll, damit ich den Typ an dieses Raster anpassen kann. Das Gute daran ist, dass du dir das schnappst und sagst, ich will dich. Kannst du das hier unten sehen? Es passt zu dem Raster, und dann können Sie auf diesem sehen, dass das nicht der Fall ist Du sagst, H, ich will, dass das konsistent ist. Ich liebe meine Netze. Warum grillen sie nicht Dieser hier ist nicht an der roten Linie ausgerichtet, und dieser auch nicht Was Sie tun müssen, ist sicherzustellen, dass unabhängig von der verwendeten Schriftart die Zeilenhöhe durch acht teilbar ist Was ich tun werde, ist meine Schriftgröße tatsächlich durch acht teilbar zu machen meine Schriftgröße tatsächlich durch acht teilbar Das musst du nicht, aber ich bin mir nicht sicher, warum es bei 17 war. Dann hier, wenn es um Größe geht, möchte ich wahrscheinlich, dass es 24 sind. Was passieren wird , ist, weil unser Raster durch acht teilbar ist, das hier sollte dasselbe sein In der ersten Reihe sollten alle in einer Reihe stehen. Du sagst, ich heile nicht. Das ist in Ordnung. Du musst nicht heilen. Aber das Schöne daran ist, dass ich sagen kann, ich möchte für die Zeilenhöhe minus acht absetzen, und alles wird immer noch mit deinem Raster übereinstimmen. Sie müssen entscheiden, wie wichtig Raster für Sie sind. Sie verwenden es vielleicht nicht für Schriften, aber es ist auf jeden Fall gut, wenn Sie Dinge wie Bilder verwenden Kannst du diesen hier sehen? Er ist nicht mal da. Jetzt ist es aufgereiht. Konsistente Abstände sind eines der Dinge, bei denen Sie jemandem, der vielleicht ein Junior-Designer und ein Senior-Designer ist, sagen können ein Junior-Designer und ein Senior-Designer wenn Sie anfangen, sich nicht nur darum zu kümmern, dass die Dinge aneinandergereiht sind, sondern auch darum, dass die Konsistenz zwischen den Seiten stimmt. Das ist zu eng. Das kannst du machen, lass uns gehen plus vier. Ich kann es anordnen und du kannst sehen, schau, ah, es ist konsistent. Ich will es wahrscheinlich 20 haben. Denken Sie daran, Shift G, um es einzuschalten, Shift G, um es auszuschalten. Auf diese Weise fügen Sie einem Dokument mehr als eine Layoutanleitung hinzu und warum. Und Sie werden auf Leute stoßen, die das tun, Sie werden sich fragen, warum ist das alles gestreift Warum sollte es irgendwen interessieren? Weil uns Konsistenz, Layout und Komposition wichtig sind Ja, es ist zu weit weg. Oh, aber sieh mal, weil ich das Raster eingeschaltet habe, kann ich es auf Dinge übertragen, die sich richtig anfühlen. Schau, das sind vier Zeilen voneinander entfernt. Diese sind es auch. Nett. In Ordnung, das ist es Ich werde es im nächsten Video sehen. 37. Erstellen und Aktualisieren von Layoutleitstilen für Spalten und Zeilen in Figma: Erstens werden wir uns in diesem Video ansehen, wie man einen Rasterstil erstellt und einen Rasterstil aktualisiert Lass uns gehen. Lass uns stylen. Fangen wir mit einer Abkürzung an. G, schaltet die Führungen ein und aus. Nehmen wir an, ich habe einige Zeit damit verbracht diesen zu bekommen. Ich möchte es hier drüben hinstellen. Ich werde zuerst zu diesem gehen und sagen, werde dich los. Ich will mir diesen schnappen. Was Sie tun können, ist klicken. Denk dran, diese seltsame kleine Gegend. Shift, schnapp dir den anderen darunter. in diesem kleinen leeren Bereich hier Gehen Sie in diesem kleinen leeren Bereich hier zum Kopieren, klicken Sie auf den Namen dieser Datei, und vielleicht klicken wir auf den Namen dieser Datei drücken auf Einfügen. Es funktioniert nicht. Warum funktioniert es nicht? Weil hier schon etwas angewendet wurde. Ja. Du kannst nicht mehr als zwei von derselben Sache anwenden lassen. Aber ich kann es zwei von ihnen zuordnen. Ich muss sie nur rausräumen. Cool. Offensichtlich ist das der lange Weg, es zu tun. Ich möchte daraus einen Stil machen. Ich lasse das auswählen, gehe runter zu dem , den ich erstellt habe , gehe zu diesem kleinen Sterne-Panel und ich werde sagen, dass ich einen Stil hinzufügen möchte. Ich werde dem einen Namen geben. Ich werde das Handy nennen . Ich nenne das eine Kolonne, eine Kohle und fünf Pick or Rows. Okay, gib ihm einen Namen , den du verwenden oder wiedererkennen wirst , und ich werde einen Stil kreieren. Auch hier können Sie eine Beschreibung hinzufügen. Jetzt kann ich zu diesen gehen. Und anstatt zu versuchen, schnell zu kopieren und einzufügen, werde ich sagen, ich werde den Stil hinzufügen, den ich erstellt habe und den Namen Mobile genannt hat Da hast du's. Jetzt aktualisiere ich es. Nehmen wir an, Ihr Stil, sagen wir, Sie möchten diesen ändern. Du könntest hier reingehen und es kaputt machen und versuchen, ein neues zu machen und es dann auf alles andere zu kleben. Was Sie tun können, ist, nichts auszuwählen und Sie finden Ihre Stile wie alles andere in Ihrem Design-Panel unten hier. Du kannst zur Bearbeitung gehen. Du kannst hier reingehen und sagen , ich möchte, dass das auch ein Raster hat. Sie können sehen, dass ein drittes hinzugefügt wurde. Wir haben ein Raster und Zeilen und Spalten. Oder Sie könnten entscheiden, dass Sie nur die Zeilen bearbeiten möchten. Sie haben beschlossen, acht Pixel zu verwenden. Null. Ich gehe zurück, aber so macht man es. es gemauert. Auf diese Weise erstellen und bearbeiten Sie einen Stil , insbesondere einen Stil für Layoutrichtlinien In Ordnung, mein Freund, das ist es. Du bist ganz gestylt. Du siehst gut aus. Ich sehe dich im nächsten Video. 38. Animation mit benutzerdefiniertem (custom) Easing in Figma: Hallo, alle zusammen. In diesem Video werden wir eine benutzerdefinierte Lockerung durchführen Wir werden unsere eigenen machen, wo wir nette Dinge tun können Anstatt der Standardwerte könnte es wie alle anderen aussehen, aber wir haben das benutzerdefiniert gemacht. Ich zeige es dir Es ist diese Art von Lockerung , bei der wir mit der Leichtigkeit herumspielen und tun können, was wir wollen Mache es meistens schlimmer, aber manchmal besser. Lass uns reinspringen. Zunächst habe ich einen leeren Rahmen, keinen leeren Rahmen. Ein Rahmen, den ich gezeichnet habe und der als Ticket gedacht ist , sieht aus wie eine Flagge. Wenn du sehen willst, wie ich diese Dinge mache, kannst du hängen, wir haben das meiste schon einmal gemacht. Wir sind hergekommen, um die Zollerleichterungen zu vereinfachen. Ich brauche zwei Frames. Ich drücke einfach Command D, Control D auf einem PC. Animation eins, jetzt habe ich Animation zwei. Was ich tun muss, ist, dass diese unterschiedlich sein müssen. Ich möchte das hier nebenbei beginnen. Zuallererst werde ich es gruppieren. Gruppieren Sie das. Nun, das ist eine interessante Sache, sieh zu. Das heißt jetzt Gruppe zwei, weil ich es gerade gruppiert habe. ging alles über Command G oder Auf einem PC ging alles über Command G oder Control D oder man kann es mit der rechten Maustaste anklicken Dieser hier, wenn ich ihn gruppiere, das Gleiche. Was letztendlich passiert ist. Es heißt Gruppe drei. Animationen funktionieren nicht. Wenn ihre Namen unterschiedlich sind. Das ist anders als das. Ich kann eines von zwei Dingen tun. Ich könnte es gruppieren, bevor ich diesen Frame dupliziert habe, das würde funktionieren Oder ich kann einfach sicherstellen, dass beide den gleichen Namen haben. Wenn Ihre Animation nicht funktioniert, überprüfen Sie, ob die Namen in beiden Animationen identisch sind. Co. Als Nächstes möchte ich ziehen, es wird vom Bildschirm gestartet und dann auf dem Bildschirm angezeigt. Also, was wird hier passieren? Es wird aus meiner Animation herausspringen. Ich möchte nicht, dass es außerhalb davon liegt. Es muss immer noch drin sein, aber draußen, wer erinnert sich daran, was die Abkürzung ist? Das stimmt. Etwas verwirrend. Du fängst an zu ziehen, dann hältst du die Leertaste gedrückt und es wird nach außen kommen nach außen Sie können die Leertaste und die Umschalttaste gedrückt halten, und schon geht es geradeaus Sehr viele Abkürzungen und jetzt sollte es funktionieren. Wir müssen nur den Übergang zwischen den beiden Seiten hinzufügen . Lass uns auf diesen klicken. Lass uns zum Prototyp wechseln. Sie können entweder auf die Schaltfläche klicken oder sich die Tastenkombination merken. Sie erinnern sich, dass es jetzt Option neun, acht, neun, acht, neun oder Alt, acht, neun, neun ist Ihr Prototyp, acht bringt Sie zurück zum Design. Du weißt, dass du es weißt. In Ordnung. Wir werden das anklicken und ziehen. Wir werden sagen, vom Fass. Sicher. Navigiere zu dieser Seite. Großartig. Die Animation wird intelligent aufgelöst und wir verwenden, beginnen wir einfach mit Ich mag rein und raus. Sieht gut aus. Lass uns abklicken. Lass uns eine Vorschau davon ansehen. Eine andere Sache, die wir tun werden, ist wenn Ihr Flow hier nicht angezeigt wurde, sagen wir, dass Flows dort nicht mehr angezeigt werden. Werde es los. Sie können auf die erste Seite klicken denn andernfalls, wenn Sie mit dem Prototyping beginnen, wird es losgehen und die erste Seite des Dokuments prototypisieren , was nicht der Punkt ist, an dem wir uns gerade befinden Vor allem, wenn du ein größeres Dokument bekommst wie wir, du bist quasi das Du Man kann sagen, dass Sie am Fließpunkt beginnen werden. Da? Jetzt ist es ganz einfach, klicken Sie einfach auf diesen Button. Keine Abkürzungen, nichts. Geil. Ich sagte, was müssen wir tun? Es passiert nichts, Dan. Warum? Weil wir gesagt haben, vom Fass, wir tippen und da ist es da. Wir haben eine einfache Animation, wollen aber eine benutzerdefinierte Animation erstellen. Wir werden darauf klicken. Dieses Ding kann bewegt werden. Für mich ist es immer an der falschen Stelle, aber du kannst das Oberteil herumziehen. Wir werden es von der vorgefertigten Kurve auf ein maßgeschneidertes Bezier umstellen vorgefertigten Kurve auf ein maßgeschneidertes Bezier Das ist deine Bézier-Kurve, und sie wird anders aussehen meine, je nachdem, was Das ist rein und raus. So sieht es aus. Wenn ich sage, lockere und dann zurück zu Custom Bezier, so sieht ESN Wir passen etwas an, das wir bereits ausgewählt haben. Es könnte glatt sein Wenn es gerade ist, bedeutet das, dass es so aussieht, also ist es linear. Dann gehe ich zurück zur Gewohnheit, es ist so, als ob alles weg ist. Lassen Sie mich kurz erklären, was wir tun: Sie können auf diese Punkte klicken und sie an eine beliebige Stelle ziehen. Wenn Sie schon etwas herausgezogen haben, können Sie diesen kleinen Griff hierher ziehen und ihn einfach verschieben. Du kannst zwei davon haben Okay, lass uns etwas Verrücktes machen und lass uns das machen. Du kannst sie an alle möglichen seltsamen Orte ziehen. Lass uns so gehen. Lass uns sehen , was unsere Animation bewirken wird. Also gehe ich auf den kleinen Play-Button und klicke einmal komisch. Du kannst alle möglichen coolen Sachen machen. Die wichtigsten, die Sie verwenden werden, ist, dass diese S-Kurve gut aussieht Das ist rein und raus, aber rein und raus ist wirklich subtil Es ist so und so. Ich packe es gerne rein und raus und mache es selbst noch weiter. Es ist also so Am Anfang geht es superlangsam , in der Mitte superschnell, am Ende superlangsam. Die Standardeinstellung da drin ist einfach sehr subtil. Ich schöpfe das Maximum aus. Wie lange wird das dauern? Wir werden dafür sorgen, dass es eine halbe Sekunde dauert. Wie viele hundert Millisekunden? Stimmt, 500. 1.000 sind eine Sekunde, 500 sind die Hälfte davon, also eine halbe Sekunde. Lass uns hierher gehen. Sehen wir uns eine Vorschau an, klicken Sie einmal. Es ist nett, nicht wahr? Ich war ziemlich schnell in der Mitte und es war nett, sich zu entspannen. Du sagst, ich habe es verpasst, Dan. Mitgliederliste, wir setzen es zurück, klicken Sie erneut. Nett. Ich übertreibe gerne die vorgefertigten , wenn du sagst, ich kann den Unterschied nicht erkennen Machen Sie sich nicht die Mühe, Maßarbeit zu machen , weil es so eine Kleinigkeit ist Schauen wir uns ein paar Dinge an. Ich will es dir nur erklären. Gehen wir also zu Esn und gehen wir zurück zu Custom Was passiert, ist so schwer zu verstehen. Aber wenn du dir ein kleines Diagramm zeichnest, Zeitbewegung. Ist das das X? Wir werden das X am unteren Rand der Zeit sehen, und das ist die Bewegung. Wenn ich das mache, was bedeutet, dass es im Laufe der Zeit passiert, sagen wir, nach der Hälfte der Zeit, in der es erlaubt ist, was eine halbe Sekunde ist, machen wir es einfach zu einer Sekunde Machen Sie einfach die Masse so , dass die Zeit hier 0 Sekunden beträgt, das ist Null, und das ist 1 Sekunde Sie werden also sehen, dass nach der Hälfte der Zeit noch sehr wenig Bewegung gemacht wurde. Siehst du es? Das ist die Bewegung von dort, wo wir angefangen haben, bis hier drüben. Wenn wir hier also eine kleine Grenze ziehen, gehen wir für meine halbe Sekunde hier hoch, es hat nur sehr wenig von der eigentlichen Bewegung gemacht. Also muss es am Ende alles machen. Also in der letzten Hälfte der Sekunde bewegt es sich ein riesiges Stück. Deshalb heißt es Ease In. Es wird langsam, langsam, also... lassen Sie uns eine kleine Vorschau darauf werfen. Es ist hilfreich In Ordnung. Ähm, siehst du, super langsam am Anfang, super schnell am Ende Das Gegenteil davon ist E's out. Ich habe Ease ausgeschaltet , damit ich dir dann Custom Bezier Up zeigen kann dir dann Custom Bezier Es ist genau das Gegenteil. Wenn ich es ausdehne, nur um es ein bisschen mehr zu betonen , wenn du nach einer halben Sekunde hier raufgehst und versuchst, es dort zu finden, wo es sich trifft, kannst du sehen, dass es nach einer halben Sekunde fast fertig Der Rest der Sekunde läuft superlangsam, weil ich quasi eine halbe Sekunde habe, um diesen letzten Teil der Bewegung zu erledigen diesen letzten Teil der Bewegung Sinn. Dan winkt mit der Maus herum Wenn du es nicht weißt, wackle mit ihnen herum, schau sie dir an. Sie werden ein Gefühl für Zeitbewegung bekommen. Es sieht wirklich gut aus. Sie können tatsächlich auf diese Dinge doppelklicken und sie verschwinden. Was wirklich gut aussieht, ist diese S-Kurve. Diese hier, Sie kennen sie vielleicht aus anderen Programmen. Wir verwenden viel in Photoshop und alle Arten von Fotobearbeitung für die Kurven. Das sieht gut aus. Dann geht es nur darum den richtigen Zeitpunkt zu wählen. Das kannst du einfach ziehen. Warum zieht es nicht? Früher konnte ich das Ich wette, du wirst es schaffen. Irgendein Grund, warum meiner heute nicht funktioniert. Also werde ich meins auf 750 reduzieren. Probieren wir es aus, schauen Sie sich eine Vorschau an, klicken Sie darauf. Schauen Sie sich unsere Gebräuche an. Ordnung. Lass uns mit unserer Animation weitermachen. Also ist es. Das ist die benutzerdefinierte Lockerung. Du kannst weitermachen, wenn es das ist, aber wenn du noch ein bisschen rumhängen willst, machen wir ein bisschen mehr Animation und ich zeige dir, wie ich das gezeichnet habe Ich klicke darauf und wähle Befehl D. Wenn du versehentlich Shift D drückst wenn du fragst, was ist los? Warst du schon hier? Sie befinden sich im Entwicklermodus. Okay? Das ist der große Gruselmodus. Wir werden später einen Teil davon behandeln, aber zurück zum Design. Okay? Also Command oder Control D to du, ich will machen, wenn es hier ankommt, will ich, dass es ein bisschen wartet und dann in die Ferne geht. Ich klicke auf mein Ticket, fange an zu ziehen, die Leertaste gedrückt halten und die Umschalttaste drücken , schon geht es los Was ich auch tun könnte, ist darauf zu klicken und den Inhalt des Clips auszuschalten Es geht immer noch los, aber zumindest kann ich es sehen. Das Gleiche gilt für diesen hier. Es ist ein bisschen schwer. Du sagst , wo ist es? Ich weiß, es ist irgendwo hier drüben, wo ich sagen kann, lass uns den Inhalt des Clips ausschalten. Es ändert nichts an meiner Animation, macht es nur ein bisschen einfacher, damit zu arbeiten. Ordnung, jetzt muss ich sagen, dass Sie die Prototyping-Option neun haben werden Ich gehe, geh hierher. werde versuchen , sich an Dinge zu erinnern, aber ich will nicht, dass sie vom Fass laufen. Ich möchte, dass es ein bisschen rumhängt. Nach einer Verzögerung von ja, jetzt funktioniert es. Guck mal. Jetzt möchte ich darauf tippen. Warte, lass mich tippen. Ordnung. Es macht komische Sachen. Ja, also lass uns gehen, was? Nach so langer Zeit. Es spielt keine Rolle. Gehe auf die Seite. Sofortig. Nein, ich wollte Smart Animate trotzdem machen und werde dafür sorgen, dass es die Standardeinstellung bleibt Lassen Sie uns zuerst eine Vorschau darauf werfen. Lass uns also hochgehen. Klicken Sie sofort. Nach einer Verzögerung wird es losgehen. Lassen Sie uns eine weitere benutzerdefinierte Lockerung durchführen. Okay? Also, anstatt mich zu entspannen, werde ich zur Gewohnheit übergehen. Das hoch. Was ich tun möchte, ist, dass es langsam anfängt. Das heißt, ich werde darauf klicken und es herausziehen . Ich werde langsam anfangen. Zeit wird es nicht viel bringen, weil ich es so ziehen werde. Ich fange langsam an und ich werde es auch verstehen. Eigentlich möchte ich ein bisschen rückwärts gehen. Das nennt man Vorfreude. Lehnt sich zurück bevor es vorwärts geht. Wir alle machen es, wenn wir gehen Niemand fängt einfach an, vorwärts zu gehen. Wir alle legen unser Gewicht auf unsere Hinterfüße , wie ein Buckliger Es ist toll für Typen und Tickets, und was ich vielleicht tun könnte, ist einfach so zu fahren Ein bisschen Timing. Ich weiß nicht genau, was das sein sollte. Wie lange sollte es dauern? So lange. Lass es uns versuchen. Ja, einmal klicken. Es wird ein bisschen warten und dann wird es rückwärts gehen In Ordnung, das hat also nicht funktioniert. Lass uns noch einmal darauf klicken, und davon gibt es eine Menge. Ich mache nie genug Animationen für unterwegs. Oh, ich weiß genau, was es sein muss. Okay. Lass uns hier auf diesen klicken. Der war einfach zu nervös, also werde ich versuchen, ihn auszudehnen Es dauert also lange, bis es vorwärts geht, dann wird es durchstarten, und ich brauche wahrscheinlich insgesamt mehr Zeit Aber auch das ist mit Erfahrung verbunden. Du wirst für eine lange Zeit schrecklich sein. Aber du wirst besser. Einmal klicken, warten, vorwärts, rückwärts Oh, es war fast das. Es ist ziemlich gut, oder? Es ist nur ein bisschen langsam. Ein bisschen schneller. In Ordnung, also lass uns gehen und es uns ansehen. Was würde ich hier ändern Der Profi zoomt. Es hat den rechten Rücken Ich denke, vielleicht nur ein bisschen schnelleres Timing. Nicht viel anders, weil ich möchte, dass es anfängt zu zoomen Vielleicht das in ein bisschen. Ordnung, also lass uns gehen. Letztes Mal. Das war's, was auch immer es ist, ich werde dich dann genug verlassen. Das ist nicht richtig. Wir werden es lassen, weil du ewig damit herumspielen kannst. Das Letzte, was ich tun werde, ist hier zu gehen und den Clip-Inhalt unter Design, Remember, Option oder Alt Acht auszuschalten . Zurück zum Design. Ich werde Clip-Inhalt sagen nur weil er da drüben im Weg ist und ich werde ihn bewegen und so. Jetzt kann ich den Kerl reinholen. Ich habe ihn gerade aus dem Bildschirm genommen. Was ich von diesem will ist ich Option oder Alt Neun sagen will. Ich will sagen, du gehst hierher, und ich werde einfach nie sehen ein maßgeschneidertes Bézier funktioniert, wenn du ein Dissolve machst, weil ich mich einfach darin auflösen wollte Sie können mit dem benutzerdefinierten Besier herumspielen, wie Sie möchten, oder sogar damit herumspielen Du merkst sie einfach nicht. Was auch immer du ein - und auswählst , du merkst es einfach nicht. Ich habe das 1 Million Mal gesagt. Das ist wahr. Bist du so, habe ich einen Timer drauf gestellt? War nicht möglich zu klicken. Die Standardeinstellung war „Klicken“. Ich werde sagen, dass Sie nicht am Fass sind. Denken Sie daran: Wenn Sie ein Mobilgerät verwenden und es weiß es, es funktioniert auf Knopfdruck, wenn es etwas anderes als ein Handy benutzt Offensichtlich macht ein Mobiltelefon dasselbe. Ich werde sagen, nach einer Verzögerung von, ich werde wahrscheinlich auf Null sinken. Sie können nicht Null haben, eigentlich kann nur Punkt nur eine Millisekunde haben. In Ordnung. Lass uns gehen. Vorschau, sieh uns an. Wir haben ein paar Sachen mit Custom Easing gemacht. Lassen Sie uns jetzt ganz schnell ein Ticket erstellen. Eigentlich die eine Sache, um dich daran zu erinnern, wenn etwas nicht funktioniert, haben wir am Anfang vom Ende darüber gesprochen, aber wenn ich Nummer drei gemacht habe und genau dieselbe Animation gemacht habe, schau es dir einmal an. Ich ignoriere einfach all meine Animationen, weil es sie nicht zusammenfügen kann und nicht weiß, was ich tun soll, weil das nicht dasselbe ist Es heißt, nun, du kannst nirgendwohin gehen und du tauchst einfach auf magische Weise in Gruppe Ich werde dich nur dazu bringen, standardmäßig einzublenden. Wenn Dinge verblassen, anstatt sich bewegen, ist das Hühnchen beim Benennen Das ist generell immer das Problem. Das einzige andere Problem ist , dass es enden könnte, wenn ich es jetzt verschiebe, er immer noch drin ist. Aber wenn ich das herausziehe, wissen wir, dass, obwohl wir denken, dass es versucht, nach oben zu gehen, es außerhalb meiner Animation zum Framen liegt. Er hängt einfach alleine da oben rum. Sie müssen nur sicherstellen, dass Sie beim Herausziehen , sagen wir mal so, beim Ziehen die Leertaste gedrückt halten , damit es den Rahmen nicht verlässt, auch wenn es so aussieht Du verwirrst die Leute, Dan. Wie habe ich das gebaut? Okay? Ich will dir das zeigen, weil jetzt alle auf dem Grundlagen-Kurs sind. Also werde ich mit einem Rechteck beginnen. Okay, ich werde das rausziehen. Ich werde zurück in den Entwurfsmodus wechseln, was Option oder Alt 8 ist, okay? Ich werde ihm eine Füllfarbe für meine Stile geben. Lass uns eine andere Farbe machen. 500. Du kannst weitermachen. Ich entwerfe das gerade. Ich will das Oki für den Kreis. Halte die Umschalttaste gedrückt, um einen perfekten Kreis zu erhalten Mir ist egal, welche Farbe es hat. Ich werde es tun. Lass uns zwei für diesen machen, weil wir aufregend sind. 12 Schnapp dir noch einen hier drüben. Okay, wir werden die Zeichenwerkzeuge benutzen. Erinnert sich jemand daran , wie man diese Kreise benutzt , um es herauszuschneiden? Es ist knifflig. Wir müssen zum Zeichenwerkzeug wechseln. Wir sind beim Zeichenwerkzeug und es gibt hier immer noch keine Option. Ich will immer gehen, bis ich frage, wie heißt das? Shape Builder. Das ist das Tool. Also mit dem ausgewählten, wie Wo ist der Shape Builder, dachte ich, es wäre hier. Du musst es zuerst glätten, dann erscheint der Shape Builder Es ist MK. M ja, K. Oh, ich weiß. Du bist immer noch nicht da unten. Ich habe das in einen Vektor verwandelt. Das habe ich getan, als ich es platt gemacht habe. Im Moment gibt es eine ganze Reihe verschiedener Schichten. Ich sagte, auf einen Vektor reduzieren. Smush Es ist ein Vektor. Es ist immer noch nicht da. Wenn Sie darauf doppelklicken, um hineinzukommen, oder dreimal darauf klicken, um hineinzukommen , befinden Sie sich in diesem Vektor , befinden Sie sich in diesem Vektor und Sie erhalten das gewünschte Werkzeug. Der Shape Builder. Oft mache ich es platt und drücke dann einfach den MK Ich will Sachen loswerden. Um sie loszuwerden, wenn ich sie hinzufügen will, ziehe ich mit der Maus rüber. Wenn ich sie entfernen möchte, halte ich die Option KoacOh KPC gedrückt die Option KoacOh KPC Ich ziehe sie nur mit der Maus rüber. Sie können sie auch anklicken. Da ist eine Zeile drin, die ich loswerden möchte. Das ist also mein Ticket. Der Stern ist einfach. Die Linie. Eigentlich ist der Stern, nur damit du es weißt, unter dem Stern. Okay? Zieh es raus. Shift gedrückt halten, Shift gedrückt halten und ich werde meinen Stil stilisieren Okay. Und ich will die gepunktete Linie Ich werde die Al-Taste für das Linienwerkzeug verwenden. Ich werde eine Linie nach unten ziehen und die Umschalttaste gedrückt halten, damit es strikt wird. Ich werde dafür sorgen, dass das Gewicht steigt. Ich werde es zu etwas hochziehen, das mir gefällt. Jetzt versteckt sich die gepunktete Linie unter dem Breitenprofil? Nein, diese gepunkteten Linien, ja. Also diese kleinen Einstellungen, du kannst Stil sagen. Ich möchte enttäuscht werden. Was für eine Art von Schneide wollen wir? Ich mag den abgerundeten, okay? Keine Kappe. Okay? Es heißt normalerweise. Welcher heißt, in diesem rufen sie ihn nicht an. Illustriert nennen sie sie nur Kappen, deren Namen ich liebe. Das sind nur abgerundete Kappen. Weil ich 12 bin, werden wir die Dash-Cap-Runde machen. Deiner sieht vielleicht etwas komisch aus. Du musst mit den Strichen und Lücken herumspielen. Die Striche müssen für mich kleiner sein, nicht 23, drei, und die Lücke, ich möchte zehn sein Du spielst einfach mit den Größen herum. Hol es dir, wie du willst. In Ordnung, diese Zeilen. Die sind ziemlich cool, oder? Das Gleiche. Linie zwei, ziehe eine Linie. Okay, ich packe mit und ich gehe zu diesem Breitenprofil. Lass das fallen. Das nicht. Wir gehen wieder zu den Einstellungen, und wir gehen nicht zum Breitenprofil, wir gehen zu Pinseln. Gehen wir zu Basic, wir gehen zu Pinsel. Und ich werde sagen, ich mag diesen Pinsel. Pinsel sind hier drin. Die, die ich gefunden habe, weiß nicht mehr , welche ich benutzt habe. Bitte halte den da, glaube ich. Nun, was du tun kannst ist, ich hasse es, ich weiß nicht, wenn alle Schlaganfälle gleich sind. Ich verbringe viel Zeit. Ich werde das ein paar Mal duplizieren. Ich verbringe ein bisschen Zeit damit, zu sagen, in Ordnung, ich möchte du die Richtung umdrehen kannst, sodass man anders ist Ich kann das etwas länger machen, den kleinen Punkt dort nehmen und länger ziehen Okay? Dieser hier wird umgedreht Es wird ein bisschen so sein und es wird ein bisschen anders sein, ein Grad daneben. Ich weiß es nicht Ich verbringe viel Zeit damit, Dinge zu tun , die niemanden interessieren. Ordnung. Da werde ich einen Jump Cut bekommen, weil ich ewig damit verbringe , den richtigen Winkel zu Also ja, ich habe eine gewisse Zufälligkeit. Da hast du's. Das ist mein Ticket. So wie der erste noch. Wie dem auch sei, wofür sind wir hergekommen, Dan? Wir sind wegen der Zollerleichterungen hergekommen. Das ist einfach Ich wollte hier quasi reinspringen und die Leute an einige Macken erinnern Animationen kaputt macht, weil jeder mit seinen aktuellen Prototyping-Animationen unterschiedliche Fähigkeiten hat mit seinen aktuellen Prototyping-Animationen und dir zeigen, wie man eine Karte baut Eine wirklich hässliche. Wir sehen uns im nächsten Video. 39. Klassenprojekt 10 - Check Out Animation: Ordnung. Es ist ein Klassenprojekt. Willst du deine eigene Checkout-Animation machen? Sie wurden gebeten, eine Erfolgsanimation zu erstellen nachdem jemand ein Ticket gekauft Sie geben die Kreditkartendaten ein, klicken auf „Senden“, und von dort aus möchte ich, dass Sie das tun Wir haben im letzten Video etwas Ähnliches gemacht. Ich habe mir gerade einen ausgedacht. Ist der hier? Jemand hat ein Ticket gekauft und es erscheint, und los geht's. Ich möchte, dass du dein eigenes machst. Ich möchte wirklich , dass du mit Cust übst, also mach drei oder mehr Frames für deine Animation Es kann einfach sein, es kann fortgeschritten sein. Sie können Häkchen und Animationen überall nach Ihren Wünschen platzieren. Wenn du fertig bist, möchte ich, dass du ein Video mit deiner Animation teilst und die Länge der Kursprojekte hochlädst . Wenn Sie die Videos einfach umbringen, können Sie auch einfach einen Screenshot im Prototypmodus machen , damit ich all Ihre Kabel sehen kann. Aber ich würde das Video gerne sehen. Teile es in den sozialen Medien, wenn du das Video auch machst. Markiere mich. Ich liebe es zu sehen, wie die ersten Erfolgsanimationen aller aussehen. Sie können sehr ernst sein. Sie müssen es aber nicht sein. Viel Spaß mit dem Klassenprojekt. Stellen Sie sicher, dass Sie mit der benutzerdefinierten Lockerung herumspielen. Oft kannst du es schlimmer aussehen lassen, aber das ist okay. Wir spielen mit dieser Einstellung herum. Danach sehe ich dich im nächsten Video. 40. Kopieren und Einfügen von Interaktionen in Figma: Hallo zusammen. In diesem Video werden wir uns das Kopieren und Einfügen von Interaktionen ansehen Du verbringst viel Zeit damit, sie zu machen. Die Abkürzung besteht darin, einfach auf die Nadel zu klicken, sie zu kopieren und einzufügen. Es gibt ein paar kleine Dinge, die wir reparieren müssen , also werden wir sie gemeinsam durcharbeiten. Aber du bist nur deswegen hergekommen, das ist alles, was du tust. Wählen Sie sie aus, kopieren Sie sie und fügen Sie sie ein. Aber lassen Sie uns ein bisschen näher darauf eingehen. Okay, das funktioniert also mit jeder Animation oder Interaktion Was ich habe, ist, lass es mich in der Vorschau ansehen. Es ist nur so, dass wir zum nächsten übergehen. Was ich getan habe, ist, dass ich viel Zeit damit verbracht habe , mit Dingen wie dem Aussehen meiner eigenen benutzerdefinierten Beschleunigung bereits mit der benutzerdefinierten Beschleunigung ein und aus zu arbeiten Aussehen meiner eigenen benutzerdefinierten Beschleunigung bereits mit der benutzerdefinierten Beschleunigung . Ich bin von der Animation abgewichen Statt Instant oder Dissolve oder Smart Animate ich es rein und verschiebe ich es rein und wir scrollen da ganz nach unten Wenn Sie mit der Maus darüber fahren, können Sie sehen, dass es nur ein Bild vom nächsten nach unten verschiebt Bei dir kommt es von oben, also habe ich eine Menge Arbeit geleistet Was ich tun möchte, ist, das nicht für jeden einzelnen tun zu müssen . Okay, was ich tun kann, ist, ich habe es getan. Es gibt zwei Möglichkeiten. Ich kann auf diesen Draht hier klicken oder auf Noodle und einfach Command oder Control C drücken, nur eine normale alte Kopie, und dann kann ich sagen, einfügen funktioniert Ich mache es rückgängig, du kannst es mit all diesen machen. Und du. Bum, du hast alles. Es hat alles gemacht, bis auf eine Sache falsch. Was wir gemacht haben, ist, wenn ich alles rückgängig mache und dieser hier das Zusammenspiel hat , dass er das alles macht, aber er sagt, navigiere zu Animation fünf. Ich weiß nicht, wie ich es auf die nächste Seite statt auf die Nummer fünf bringen soll , denn wenn ich es hier einfüge, kehrt dieser Typ zu sich selbst zurück, weil er fünf ist. Ich muss sagen, eigentlich nicht bis fünf. Geh zu dem. Aber alles andere kommt hinzu, all das Anpassen, der Umzug, all das Timing, das du gemacht hast Das Gleiche gilt für die Paste Man muss ein bisschen machen. Manchmal werden aus diesen Nudeln Kreuznudeln. Ich will nie Nudeln kreuzen Klicken Sie hier oben auf die Überschrift , um im Prototypmodus zu sein Denken Sie daran, Option acht, Altate. Nein, es sind neun. Es war ein Test. Ich kann sogar sagen, anstatt zu fünf zu gehen, lass uns zu zwei gehen. Was ist der nächste? Sieben. Da hast du's. Jetzt sollte es funktionieren. Lass uns gehen. Hoppla. A, das Tempo. Heute Abend ist die Nacht. Es ist ein bisschen langsam. Irgendwas ist sowieso komisch. Aber das ist der Tipp. Du kannst es auch anders machen. Ich habe es früher so gemacht. Ich will dir nur zeigen, sagen wir, ich will alles daraus kopieren. Ich möchte dir diese zwei Möglichkeiten zeigen, nur weil manche Dinge seltsam sind. Du klickst nicht darauf , weil es es öffnet. Alles, was Sie tun möchten, ist auf diesen kleinen seltsamen Bereich hier zu klicken , der ausgewählt ist. Ich kann einfach meine normale Kopie benutzen, dann kann ich sagen, einfügen, aber da hin. Es ist nicht wirklich wichtig. Das ist nett und einfach. Interaktionen in Figma kopieren und einfügen . Das ist es. Das nächste Video. 41. Animation innerhalb von Varianten in Figma: Eins. In diesem Video werden wir uns das Hinzufügen von Animationen ansehen. Anstatt die Frame-by-Frame-Methode zu verwenden, die wir zuvor verwendet haben und die viele Leute verwenden, werden wir es so machen. Sie können tatsächlich zwischen Varianten animieren und dasselbe Ergebnis erzielen Diese Animation ersetzt also all das. Wir können es nur als kleine Einheiten benutzen. Sehen wir uns den kleinen Kerl hier an, sehen wir ihn uns an. Es passiert alles in diesem Kerl. Cool e. Oh, sogar ein Knopf. Wir machen einen Knopf, der sich sogar hineinbewegt. Du kannst dasselbe sehen. Es ist nur eine Komponente, in der zwei Varianten enthalten sind. Die obere können Sie nicht sehen, die untere können Sie sehen und lassen Sie von der sehr durchschnittlichen Animation beeindrucken. Sowohl der Knopf als auch der Knopf. In Ordnung, könnte besser sein. Aber es ist cool und sehr praktisch, unsere Animationen aufzuräumen Nicht mehr tausend Frames , um einfache Dinge zu animieren. Ordnung. Lass uns reinspringen. Okay, ich bin also im Prototypmodus, Option oder Alt 9. Sie können sehen, dass ich das schon früher gemacht habe, wo wir diese Art von schrittweiser Einzelbildanimation Bild für Bild gemacht haben. Viele Leute machen das, du kannst es tun, aber offensichtlich ist es chaotisch, oder? Lassen Sie uns eine kurze Vorschau darauf werfen, um zu sehen, was wir gemacht haben. Macht das. Wir werden etwas anderes machen. Wir werden dafür sorgen, dass der Text einfach erscheint. Aber anstatt zwischen Frames springen zu müssen, machen wir das alles in Varianten. Fangen wir mit W an, sollten wir es hier machen. Ich gehe zurück zum Design. Option oder Alt acht. Ich werde hier rüber gehen. Und wir werden daraus eine Komponente machen, Option K oder Strg Alt K. Es ist eine Komponente. Ich möchte Varianten. Also werde ich eins, zwei, drei, vier machen. Das hat nicht funktioniert. Du kannst es nur einmal anklicken. Dann werde ich gehen. Was habe ich angeklickt, um all die Knöpfe zu zerschlagen Ordnung. Lass uns zurückgehen, rückgängig machen, rückgängig machen und machen. Hauptvarianten, klicken Sie auf nichts anderes. Ich werde das duplizieren, habe es angeklickt. Ich habe vier Wörter. Heute Abend ist die Nacht. Ich werde nur den Text und die Farben ändern. Du wartest dort, wir gehen in den Geschwindigkeitsmodus. Das ist alles, was ich getan habe. Als Nächstes möchte ich den Prototyp tatsächlich verwenden, so wie wir es hier getan haben. Denken Sie daran, wir haben darauf geklickt, Prototypmodus gesagt, optional LT 9, und wir haben Noodle zwischen den beiden gezogen Sie können es tatsächlich zwischen Varianten innerhalb dieses Komponentensatzes tun innerhalb dieses Komponentensatzes Sie können sagen, stellen Sie sicher, dass Sie sich im Prototypmodus befinden, um ein wenig zu zoomen. Du kannst tatsächlich eine Nudel von hier zu diesem Typen schleppen. Ich möchte das nicht tun, ich möchte nach einer Verzögerung von einigen Sekunden sagen Ich wollte zu dieser anderen Variante wechseln, die Variante zwei heißt. Wir werden es zur Ruhe bringen. Ich mache mir keine allzu großen Sorgen, wie lange wird es dauern? Ich weiß es nicht. Aus irgendeinem Grund kann ich jetzt nicht in meinen klicken. Es ist ein Bug. Wenn ich das Hirngespinst lösche, wird es wieder lebendig Aber wie dem auch sei, nur damit du es weißt, manchmal ist Figma ein bisschen komisch. Ich möchte es wirklich eintippen Aber wie dem auch sei, das haben wir. Also ich denke, das wird funktionieren. Wechseln Sie nach einer Zeitverzögerung zu diesem intelligenten Anime. Wir könnten das tatsächlich auflösen, wenn wir wollten. Das ist kein Problem. In Ordnung, lass uns den mitnehmen Spüren Sie diesen auf. Ich habe mich nicht an alles erinnert. Es hat sich an einiges davon erinnert, will es aber jetzt auf einmal erledigen. Ich werde nach einer Verzögerung etwas hier unten sagen und wir wollen es wirklich eintippen. Alles andere ist perfekt. Das gibt mir eine gute Ausrede, um das Kopieren und Einfügen zu verwenden. Ich klicke auf die Nudel, kopiere sie, gehe zu dieser und füge sie ein Es wird versuchen, zu sich selbst zurückzukehren, aber nach der Verzögerung wird es dorthin zurückkehren, das sollte alles gut sein Teilweise da. Es ist einfach so, als würde man zwischen Frames animieren Wir machen es nur hier innerhalb dieses Komponentensatzes zwischen Varianten Viele Wörter? Ich werde dafür einen neuen Rahmen erstellen. Eigentlich werde ich es iPhone 6 machen. Zehn. Du kannst rüber kommen, wie chaotisch unser Uppud Lass uns eine Hintergrundfarbe wählen. Option acht, Alt acht, zurück zum Design, und ich werde tatsächlich eine davon auswählen und ich möchte eine der dunklen Farben. 900 davon wirklich. Nehmen wir ein Exemplar davon und ziehen es raus. Ich bleibe bei der Option CaCl PC oder du kannst sie kopieren und einfügen Nun, das Coole daran ist, dass die Animation eingebaut Das kann auf meiner Komponentenseite stehen. Ich brauche den Müll nicht. Lass uns zuerst beweisen, dass es funktioniert Gehen wir zu dir und sagen wir Shift Space Bar für die Vorschau. Heute ist die Nacht. Es muss schneller gehen, aber du verstehst, was ich meine. Das wirklich Coole daran ist, dass wir tatsächlich mehr tun können , als uns das anzusehen. Worauf wir uns beschränkt haben, besonders in diesem Fall hier, ist das Timing zwischen den Seiten immer das Gleiche. Wenn ich möchte, dass etwas erscheint, sagen wir, dann machen wir es in diesem Fall, um Ihnen ein Beispiel zu geben. Ich werde einfach einen leeren Rahmen mit einer Farbe in deiner Farbe verwenden . Solange es eine Variante von ist, hast du es verstanden. Ich habe das. Ich brauche es als Kopie, ich will, dass es auf all diesen Bildern zu sehen ist. Aber ich möchte, dass der Zeitpunkt anders ist. Nehmen wir an, ich möchte, dass es von dieser Seite kommt, zur Mitte geht und dann nach unten geht und wieder nach oben kommt. Ich muss das Timing einhalten, das ich für das Ticket gemacht habe. Ich werde in den Prototypmodus wechseln . Was auch immer ich dafür entschieden habe, es wird sich auf jede einzelne Sache auf dieser Seite auswirken. Lassen Sie uns eine Vorschau darauf werfen. Klicken Sie, sobald das eingezogen ist. Kannst du sehen, dass sie genau gleich sind? Warum ist der letzte nirgendwohin gegangen? Dieser hier, er heißt Frame 22. Was ist das für ein Anruf? Bild 22? Das liegt daran, dass der Übergang zwischen hier ein Verblassen ist. Es ergibt alles Sinn. Aber Sie haben die Idee, das Timing ist immer gleich. Da wird das praktisch. Machen wir das rückgängig. Lassen Sie mich zum Beispiel mehr tun. Ich habe dieses Setup unten. Ich habe KI-Hintergrund mit Computerkram aus den 80ern gemacht. Mach dir keine Sorgen um den Text. Schauen wir uns den Button an. Wenn ich das machen würde, würde ich es in der Vorschau ansehen, Shift Spacebar Kannst du sehen, dass die Schaltfläche erscheint und wieder auftaucht? So baut man es, oder? Sie haben zwei separate Frames und animieren zwischen ihnen. Angenommen, Sie möchten, dass der Text angezeigt wird, aber zu einem anderen Zeitpunkt, nicht möglich, weil der Text genau das Gleiche tun muss wie die Schaltfläche Der Weg, das zu umgehen, besteht also darin, genau so zu bauen, wie wir es zuvor gemacht haben, alles in eine eigene kleine Animation einzubauen. Ich möchte noch einen machen, nur um irgendwie, ich weiß nicht, klarzustellen. Ich werde das nämlich löschen und dann mein Vermögen reinbringen Ich habe eine Quellenangabe in dieser Datei unter Komponenten. M hat ihm aber keinen Namen gegeben, oder? Wie heißt es? Ich kann mich nicht erinnern. Was machen wir? Wo ist es? Hier ist es hier. Lass uns das kopieren. Wechseln Sie zurück in den Entwurfsmodus. Oh, es ist nicht auf der Komponentenseite. Deshalb konnte ich es nicht finden. Da ist es. Da draußen rumhängen. Das ist es sowieso. Also ich habe das hier drauf, Shift Spacef für eine Vorschau Es macht seine eigene kleine Animation, und das Coole daran ist, dass ich sagen kann , dass du dein eigenes Ding machen Lass uns sein eigenes Ding bauen. Ein paar Dinge, die ich in diesem Fall tun möchte, sind, dass ich nicht möchte, dass es Auto out ist, weil ich möchte, dass der Text in der möchte, dass der Text in der Mitte als Autolout hängen bleibt Ich werde es uns ansehen, bevor wir sagten, alle Autolouts entfernen. Ich habe einen Button mit ein paar Texten drauf. Nichts ist ein Auto. Was ich tun möchte, ist beide auszuwählen. Machen wir daraus eine Komponente, Command Shift, Command Shift, K, Control Shift K. Nein, das öffnet die Befehlsoption K oder Control Alt K. Jetzt ist es Komponente. Hervorragend. Fügen wir eine Variable hinzu. In dieser untersten Variablen werde ich mir die Komponenten schnappen und sie einfach ein bisschen vergrößern. Ich habe etwas Platz. Ich möchte, dass sich der Text hier ein bisschen nach unten bewegt. Denk dran, nicht raus. Ich halte einfach die Leertaste gedrückt , damit es sich nach unten bewegt, weil ich will, oh, ich will andersherum. Also möchte ich damit anfangen, dass es ausgeschaltet ist. Ich werde sagen, dass du herkommst. Du kannst einfach deine Raketen benutzen, wenn du willst. Also zuerst wird er unten anfangen , dann wird er erscheinen Lassen Sie uns das versuchen und in den Prototypmodus wechseln, Option neun, Alt, neun. hast du satt. Lass uns das rüberziehen. Wir wollen sofort sagen, nein, gleich nach einer gewissen Verzögerung oder ohne Verzögerung, wechseln Sie zu diesem. Lassen Sie uns es intelligent animieren. Perfekt. Wir sorgen dafür, dass es sich entspannt. Das sollte funktionieren. Okay. Das sollte auf unserer Komponentenseite erscheinen. Ich werde es einfach da drüben hinstellen, lass uns eine Version davon holen. Okay. Das Coole daran ist, dass sie verschiedene Dinge tun. Das macht was? Verblassen. Dieser bewegt sich zu verschiedenen Zeiten. Los geht's, Shift, Leertaste. Sie beginnen alle gleichzeitig Aber du siehst, das läuft immer noch. Dieser hier ist fertig. Was ich auch tun könnte, ist dieser hier, ich könnte nach einer größeren Verzögerung sagen, Verzögerung. Lassen Sie uns eine Verzögerung vornehmen. Wie lange dauert das? Wir könnten es fast schaffen, wenn das Ding fertig ist. Sie können jetzt all diese benutzerdefinierten Animationen erstellen. Sie müssen nur die Animationen zu einer Variante zusammenfügen. Mach sie hier drüben und staple sie dann auf einer Seite. Du kannst sehen, wie viel schöner es ist. Nur eine Seite und deine Animationen sind getrennt. Lassen Sie uns eine Vorschau darauf werfen. Immer noch zu lang, aber du verstehst, was ich meine. Du kannst anfangen, diese Dinge aufzubauen und los geht's. Lass uns jetzt viel zu lange gehen. Und dann warte Oh. Ich hoffe, es hat bewiesen, weil es nicht sehr aufregend ist. Aber ich hoffe, du verstehst die Idee. Es ist knifflig, ich habe mich einfach daran gewöhnt, es so zu machen. Aber Sie können sich vorstellen, dass, um diese ganze Sache zu machen, dies und das danach beginnen müssten . In diesem Fall haben wir nur das Ganze, meine ganze Animation, das ist das. Du kommst runter. Geh, geh, geh. Das ist also alles, was sie brauchen, statt ein paar Frames. Wenn du zu verrückt bist, mache ich 1.000 Frames, mache 1.000 Frames . Das ist okay. Nochmal, ich schätze, es ist der Fortgeschrittenenkurs, wir wollen uns mit fortgeschrittenen Dingen befassen. Du wirst Sachen in der Community finden, zum Teufel ist das gemacht? Jetzt können Sie hier Animationen haben. Sie müssen in den Prototypmodus wechseln . Sonst wirst du sie nie sehen. Als Letztes kehren Sie in den Entwurfsmodus zurück. Option acht, alte acht. Lass uns die Größe ändern , damit es ein bisschen aufgeräumter ist Das ist es. Ich sehe dich im nächsten Video. 42. Klassenprojekt 11 - Animationsvarianten: Erstens, es ist Zeit für dich, es auszuprobieren. Es ist Klassenprojekt Nummer 11. Es ist Variantenanimation, ich möchte, dass du einen Button baust. Du kannst genauso sein wie ich es gerade getan habe. Wir haben es gerade zusammen gemacht, oder du kannst dein eigenes bauen. Hier passiert etwas mit dem Knopf. Da ist es. Meine Erfindung wurde geladen. Deine kannst du machen lassen, was du willst. Aber ich möchte sichergehen, dass du nur übst, die Animation innerhalb einer Variante zu verwenden. Denken Sie daran, dass der Komponentensatz Varianten enthält. Ich möchte, dass du die Animation zwischen diesen beiden machst. Denken Sie daran, wenn Sie das tun, den Prototypmodus zu wechseln. Ich würde gerne eine Animation oder ein Video von dir sehen. Wenn du den Typ auch machen willst, das liegt ganz bei dir. Ich wünsche mir von dem Tutorial wirklich, dass du deine eigene Animationsvariante Schauen Sie sich also die Anforderungen an. Sie wurden also gebeten, eine animierte Schaltfläche zu erstellen Sie müssen nur die Varianten innerhalb Ihrer Komponente verwenden , die für die Animation gesendet wurden. Teile ein Video, lade es in die Klassenprojekte hoch, und wenn du keine Videos machen kannst, mach dir keine Sorgen, mach einen Screenshot , auf dem du deine Kabel zeigst. Ich kann es nicht wirklich überprüfen, aber ich würde es gerne sehen. Wenn du die Videoversion machst, teile sie in den sozialen Medien und stelle sicher, dass du mich markierst. Ich würde gerne sehen, was du machst. Und falls jemand fragt, du machst diesen super tollen Kurs mit Dan, bring deinen eigenen Laptop mit. Du solltest es dir ansehen. So etwas in der Art. In Ordnung, viel Spaß mit dem Klassenprojekt. Wir sehen uns im nächsten Video. 43. Houdini Text: Wie erstelle ich eine Textmaske Animation Figma?: Hallo, alle zusammen. In diesem Video werden wir das machen. Houdini-Text. Schau dir das an, das kommt aus dem Nichts Wir werden die Animation machen. Es wird sich im Wesentlichen auf zwei Dinge verlassen. Wir werden Animationen innerhalb einer Variante machen , was wir gerade gemacht haben, und wir werden ihr eine Maske hinzufügen weil wir großartig sind und sie fortgeschritten ist. Wenn du das knifflig findest, dann ist das in der Art, Oh mein Gott, das ist wirklich knifflig. Ich verstehe das vollkommen. Wir kombinieren ein paar Dinge. Einige von Ihnen werden es bekommen, einige von Ihnen werden es nehmen. Ihr werdet es schaffen. In Ordnung, lass uns reinspringen. Okay. Fangen Sie einfach an. Wir haben zwei Textteile. Es ist nur einfacher alter Text. Sie befinden sich in separaten Boxen, weil ich sie separat animieren möchte Sie können aber jede Art von Text oder Schrift sein. Und als Nächstes muss ich sie maskieren. Also müssen wir uns etwas schnappen, womit wir sie maskieren können. Ich werde ein Rechteckwerkzeug verwenden. Du könntest einen Rahmen verwenden. Sie können alle möglichen Formen verwenden. Ich werde das Rechteckwerkzeug verwenden. Ich vertusche es. Sie müssen sicherstellen, dass es den Text abdeckt . Und wir werden zwei davon brauchen. Also werde ich das duplizieren und es verwenden, um es zu verdecken. Und hier ist der Befehl oder die Steuerung Y praktisch. Vielleicht ist das die Gliederungsansicht. Okay? Wir können nachschauen , ob es vollständig ist. Was großartig ist. Als Nächstes muss der Text oben stehen. Ich werde mir das und das schnappen. Ich halte die Umschalttaste gedrückt, um beide zu verbinden, und ich werde meine eckige Klammer benutzen, um sie einfach nach hinten zu schieben. Sie können sie auch in das Ebenenfenster ziehen. Sie müssen nur sicherstellen, dass sich Ihr Text über Ihrem Rechteck befindet. Okay, also ich brauche diese beiden jetzt. Ich werde eine Kiste um sie beide ziehen . Ich möchte, dass beide ausgewählt sind. Verwandeln wir sie in eine Maske. Es gab eine Befehlsoption für Kurzbefehle. Nein, Befehlssteuerung. Nein, ich benutze es nie. Ich weiß nicht, wie das in meinem Gehirn ist. Es ist einfacher, einfach beim Design zu sein und los zu gehen, es gibt eine Option hier oben, benutze die Maske oder du kannst mit der rechten Maustaste darauf klicken. Es ist auf einem PC, das ist eine gute Frage. Du musst dort nach oben gehen und es überprüfen. Es tut mir leid. Oder geh einfach hierher und klicke mit der rechten Maustaste darauf und es heißt, benutze eine Maske und du wirst dort auf einem PC sehen , was die Abkürzung ist. Ich kann mich nicht erinnern. In Ordnung, also die Maske. Was jetzt passiert ist, ist nichts wirklich, außer als Maskengruppe. Kannst du sehen? Es gibt eine Maskengruppe. Darin befindet sich Text, und da ist das Rechteck, das die Maske gibt. So sind sie eingerichtet. So wie du dir Viva la schnappen kannst. Sie können natürlich alles eingeben, was Sie wollen, und Sie können den Text nach unten verschieben Sie können sehen, dass es eine Maske ist. Okay. Was im Unterricht oft passiert, ist, dass manche Leute versehentlich die ganze Gruppe schnappen, nicht den Text für sich und versuchen, ihn nach unten zu verschieben. Es funktioniert nicht. Stellen Sie einfach sicher, dass Sie auf Fieber klicken, was auch immer der Text ist, und verschieben Sie den Text nach unten. Die andere Sache ist , dass es herausspringen kann. Es kann aus der Maske herausspringen , wenn Sie es zu weit ziehen. Wer erinnert sich, was du gedrückt hältst? Sie erinnern sich, haben Sie den Text ausgewählt, beginnen Sie zu ziehen und halten Sie ihn dann gedrückt, sagen wir weit Dann können Sie ihn nach unten bewegen und er bleibt in der Maske, ist aber ausgeblendet Erinnerst du dich, Commodo Control, warum? Du kannst es in dieser Ansicht nicht sehen. Gute Arbeit. Es spielt keine Rolle. Machen wir es trotzdem rückgängig. Wir haben unsere Masken am Laufen, Maskengruppe eins, Maskengruppe zwei. Der Text ist drin. Jetzt schnappen wir uns einfach beide und fangen hier von vorne an. Es ist einfacher. Weil ich drei Stufen habe. Es muss komplett verschwunden sein. Dann muss Viva erscheinen und dann Techno. Es gibt drei Stufen Du könntest es einfach mit einem Houdini-Text machen. Ich weiß nicht, warum ich mich in diesem Kurs für zwei B entschieden habe, es ist der Fortgeschrittenenkurs Wir machen es für Fortgeschrittene. Machen wir es also zu einer Komponente. Okay, Command Shift K, Control Shift K, das öffnet die Bildeingabe. Kombiniere Option K. Ich mache das den ganzen Tag lang. Ja, Kombiniere Option K auf einem Mac. Steuere k auf einem PC. Wir klicken einfach auf den Button da oben. Es ist eine Komponente. Geben wir ihm einen bitteren Namen. Okay, nennen wir das hier . Titelanimation. Eins, und wir werden es ein paar Mal duplizieren. Wir brauchen Varianten. Wir sagen eine Variante und dann U, Duplikat, was Command oder Control D mit drei Varianten ist. Dieser hier muss komplett verschwunden sein. Hier doppelklicken wir , um reinzugehen, oder gehen in Ihre Maskengruppe und klicken auf Viva Du willst also auf dieses Level kommen, wie wir es zuvor getan haben , und es dann nach unten ziehen, nach unten ziehen Du kannst deine Harken benutzen. Halte die Schicht in den Harken gedrückt. Das funktioniert auch. Oder doppelklicken Sie, um das Wort Techno zu nehmen und es bei gedrückter Leertaste nach unten zu ziehen Ich werde auch wechseln, also geh geradeaus. Okay, also diese, die erste Variante kann nicht gesehen werden, und dann die nächste, ich möchte, dass nur Viva la erscheint Techno muss verschwinden. Also klicke ich weiter, doppelklicke weiter, bis ich meinen Text finde , und ziehe ihn nach unten Ich finde die Harken viel einfacher. Okay, kann nicht gesehen werden Jetzt kann ich diese erste Zeile sehen. Ich kann sie beide sehen. Lassen wir sie zusammen animieren. Wir gehen zu Option neun über oder gehen einfach zu Ihrem Prototyp hier oben. Ich werde eine Kiste mit dir dorthin schleppen. Ich möchte, dass du das tust , ist vom Fass. Nein, ich möchte, dass du nach einer kleinen Verzögerung sagst , wie lange, eine Millisekunde, ich möchte, dass du es auf Variante umstellst. Cool. Lassen Sie uns Smart Animate verwenden, falls es nicht schon darauf eingestellt Ich werde es nur vereinfachen , weil es am Anfang nicht sichtbar Es wird lockerer werden und ein bisschen funktionieren. Ungefähr dann, ich weiß es nicht. Lass es uns testen. Tun Sie dasselbe dafür. Ich werde sagen, du hast dieselbe Animation. Es bringt einiges davon rüber. Hat Zuk nach einer Verzögerung noch einen der anderen gemacht? Es hat sich an all das Zeug erinnert. Das ist alles gut. Lass es uns ausprobieren. In Ordnung Wir werden die eigentlichen Komponenten noch nicht testen. Wir werden uns eine Instanz unserer Komponente schnappen. Das Problem dabei ist , dass es leer ist. Mir meine erste Instanz zu zeigen, was ein bisschen nervig ist. Aber wie dem auch sei, wir haben die Idee. Ich habe es irgendwo hier. Geben wir dem Rahmen eine Auswahl. Gehen wir zur Schiff Space Bar, um eine kleine Vorschau zu machen . Oh, sieh uns an. Bei einer Wiederholung. Wir animieren Genies Fantastisch. Ich liebe es. Okay? Also, wenn Sie Texte wie diesen schreiben wollen , ist das Wichtigste, denken Sie daran, sicherzustellen, dass Sie den Text herausziehen, nicht die Maskierungsgruppe, die den Leuten Probleme bereitet Die andere Sache ist, wenn du dir das wirklich ansiehst, lass uns das hier behandeln Also, wenn ich diese Animation will, lass uns diese Varianten nehmen, und nach einer Verzögerung wird es sich ändern. Es benutzt Ease hin und her. Wenn ich zu meinem eigenen benutzerdefinierten Bezier gehe, siehst du, so sieht Ease Out aus Es wird sich auf diese Weise entspannen und dann dorthin gehen, wo es hingehört, und dann zurückkommen Wenn du das wirklich ausschöpfen willst, wird es funktionieren. Lassen Sie uns eine Vorschau darauf werfen. Ich zeige dir, was passiert. Drücken Sie die Leertaste und drücken Sie die Leertaste. Siehst du, dass es gestiegen ist? Lass es uns wiederholen. Schauen wir uns das Wort Techno an. Es ist hochgegangen und hat sich verirrt. Es liegt nur daran, dass unsere Maske nicht groß genug ist. Wenn ich darauf eingehe und wir zur Kommandozentrale gehen, warum? Was passiert ist, dass es hochgeht und da ist meine Maske. Du siehst es dort, wo ist meine Maske, das Rechteck. Es geht dorthin und es geht hoch und darüber hinaus. Sie werden nur sicherstellen, dass das tatsächlich viel größer ist , als es sein muss. Ich hab nur Platz für den Techno. Etwas verwirrend. Gib ihm eine Vorschau. Wenn du von diesem schon überwältigt bist, ist das okay. Das ist eine knifflige Frage. Masken plus benutzerdefinierte Lockerung. Wir machen Animationen innerhalb Varianten. Du machst Hardcore-Sachen. Wenn dein Verstand etwas verwirrt ist, ist das okay. Aber kannst du dir vorstellen, dass der Techno jetzt Platz für diese Maske hatte für diese Maske Die Maske klingt hier irgendwie ab, und wenn du noch weiter gehen willst, musst du die Maske immer höher und höher machen und und wenn du noch weiter gehen willst, musst du die Maske immer höher und höher machen und. Du verstehst die Idee. Ordnung, Kumpels. Wir haben's geschafft Wem hast du geschrieben? In Ordnung, das ist es. Wir sehen uns im nächsten Video. 44. Frühlingsanimation und -überlagerungen in Figma: Hallo, alle zusammen. In diesem Video werden wir das machen. Bereit, bereite Bio vor. Okay, wir werden ein paar Dinge lernen. Wir werden aus dem Grundlagen-Kurs eine Erinnerung daran machen, was ein Overlay ist, was eine gute Erinnerung ist. Aber auch wirklich? Junge. Okay, wir werden dafür sorgen, dass die kleine Navigationsleiste ganz federnd wird Das nennt man Spring Easing, und das machen wir jetzt innerhalb von Figma Nun, ich will wieder Lärm machen . Noch ein Mal. Buh. Ordnung, machen wir es. In Ordnung, um damit zu beginnen Sie können mit einer neuen Seite beginnen und müssen Ihr Nickerchen nicht benutzen. Alles kann federnd oder federnd sein. Okay, ich werde hier einfach zum Anfang zurückkehren und es hier draufsetzen Ich werde mein Navi benutzen , das ich vorhin gemacht habe. Also gehe ich zu meinem Assets-Bedienfeld und suche nach den Komponenten, und da ist mein Okay, also werde ich das verwenden. Es wird vom Bildschirm aus starten , weil wir ein Overlay machen werden Was ich sagen werde, ist diese Seite hier, ich bin im Prototyp Ich werde sagen, geh auf diese Seite. Ich möchte mich nach einer Verzögerung von wie viel Zeit vergewissern? Ich weiß nicht, aber ich möchte eine kleine Verzögerung. 0,3 Sekunden, ich würde gerne dorthin gehen, aber ich möchte nicht, dass es nicht dorthin navigiert. Ich möchte, dass es ein offenes Overlay ist. Es wird ein Overlay geöffnet. Was wird es öffnen? Es wird das Unterteil meines Navs öffnen . Wir haben uns zentriert? Nein, ich möchte ganz unten in der Mitte sein. Ich möchte, dass es nicht sofort passiert. Ich möchte von unten einziehen. Okay, und hier sind die Quellen. Also das sind die, die wir bisher benutzt haben. Der Frühling ist hier unten. Sie können auch eine benutzerdefinierte erstellen. Schauen wir es uns an. Siehst du, es ist einfach ein wirklich anders aussehender Bogen als was wir mit einigen dieser maßgefertigten Beziers hatten, okay? Der Frühling ist nicht da, wo er sein muss, und kommt gewissermaßen rückwärts, bis er irgendwann aufhört Du kannst es dir ansehen. Bouncy ist am offensichtlichsten, okay? Du kannst es hier unten sehen. Es ist sehr cool. Du kannst mit den anderen herumspielen, sehr ähnlich, subtiler. Ordnung, lass es funktionieren, Dan. Funktioniert es wirklich? Lass uns auf diesen Typen klicken, ihm eine Vorschau geben, Leertaste drücken und Ich liebe es. Arthur zurückgesetzt oder erneut abspielen Ah. Hey, deine eigenen Soundeffekte, ich mag sie. Schauen wir uns schnell nur die Einstellung an. Ich werde mir den Prototyp ansehen. Option neun, 09. Ich werde darauf klicken und es nach oben ziehen. Bouncy ist am offensichtlichsten. Das sind alles nur weniger davon. Sie sind nicht anders. Sie sind einfach, das ist wirklich extrem. Die sind nur ein bisschen subtil. Was wir machen können, ist eine benutzerdefinierte Feder und wie wir es bei den anderen benutzerdefinierten Easings gemacht haben, werden Sie feststellen, dass Sie diese Dinge herumziehen können Manchmal ist es jedoch einfacher, einfach mit der Steifigkeit, der Dämpfung und der Masse herumzuspielen mit der Steifigkeit, der Dämpfung und Masse ist, wie schwer sich dieses Ding anfühlt. Es ändert das Timing. Wenn ich sage, dass die Masse erhöht werden soll, klicke ich auf Halten und ziehe es in die gewünschte Richtung. Damit kann ich meine Wahltaste nicht ziehen und gedrückt halten oder falls doch. Siehst du, ich ziehe es raus Jetzt sind es 6 Sekunden oder 8 Sekunden, du kannst sehen, wie viel schwerer sich das Ding anfühlt Weil es schwerer ist. Bei einem niedrigen Wert ist es zu leicht. Lass es uns auf eins setzen. Okay. Und das ist irgendwie nett. Also spiel einfach damit herum, wisse, dass du das am Ende kaputt machen könntest. Wenn ich es auf vier hochdrehe, okay? Es ist ziemlich schwer. Schauen wir uns Dämpfung an Dämpfung heißt, wenn ich keine Dämpfung habe, lass uns gehen. Es wird einfach wirklich richtig abprallen . Was ist das? Spring, spring, Junk Hun. Es hört vielleicht nie auf, schau, es läuft ungefähr eine Minute, 4 Es wird nie aufhören zu hüpfen. Okay? Also das wird funktionieren. Gehen wir dazu über, aber es wird interessant, nicht sehr nützlich sein . Telefon-Animation. Du wirst es kaputt machen. Und wenn du das tust, musst du hier reingehen und sagen, dass du tatsächlich wieder auf 1 Sekunde sinken wirst. 1 Sekunde. Was war das eigentlich? Niemand. Ich kann mich nicht erinnern , was die Standardeinstellung war. Eigentlich gehen wir einfach zurück zu Bouncy und dann zurück zu Custom Spring und wir haben es zurückgesetzt. Steifheit Lass uns noch einen machen. Ich schaue mir die Steifheit an und lasse die Dämpfung außen vor. Also, wie steif die Feder ist. Lass es uns steifer machen. Lass uns auf 3.000 gehen, okay? Es ist schwer, aber es hat eine sehr steife Feder. In Ordnung, du verstehst die Idee. Das ist ein Overlay und ein Overlay, auf das diese Frühjahrs-Lockerung angewendet wurde Spielen Sie mit den anderen herum , sanft, schnell, federnd, arbeiten Sie an Ihren Soundeffekten, Bo, wir sehen uns im Tschüss. 45. Klassenprojekt 12 - Houdini Textanimation: Ordnung. Ich möchte, dass du deine eigene Houdini-Text-Animation machst deine eigene Houdini-Text-Animation Muss nicht genau wie meins sein. Ich möchte nur Houdini eingeben und Masken verwenden, wie wir es in den vorherigen Tutorials getan haben Ich möchte, dass du die Frühlingsanimation verwendest. Also übe damit und teile ein Video, wenn du kannst. Wenn nicht, teile einen Screenshot und lade ihn in die Klassenprojekte hoch. Ich würde es gerne in den sozialen Medien sehen, nur zur Erinnerung, ich kann nicht auf alle Projekte zugreifen. Das funktioniert nur, wenn du deine Projekte in die Klasse hochlädst, indem du dir zwei andere ansiehst und einen Kommentar hinterlässt. Es muss nicht okay sein. Aber oft ist das, was wirklich gut funktioniert, ein Kompliment, etwas, das sie vielleicht als Nächstes ausprobieren möchten , gefolgt von einem Kompliment Nenn es das ****-Sandwich, aber es gibt wahrscheinlich noch mehr. Nenn es tatsächlich, mir fällt kein anderes Es ist ein toller Name dafür. Okay? Also fange mit etwas an, das du daran magst, etwas, das sie vielleicht ausprobieren könnten. Und Sie werden feststellen, dass Sie ein verbitterter Designer werden, wenn Sie in der Lage sind, sich durch Text auszudrücken, und es kommt auf die Praxis an. Ich möchte also, dass du rausgegehst und wenn du einen hochlädst, zwei anderen Leuten kommentierst. Auf diese Weise bekommen wir viele Kommentare . Du darfst üben. Die Leute üben sich darin, deine Arbeit zu kritisieren, sei respektvoll Mach das Sandwich. In Ordnung. Viel Spaß beim Erstellen des Houdini-Textes . Es ist knifflig Lassen Sie mich in den Kommentaren wissen, wenn Sie auf Probleme stoßen, wenn Sie auf Probleme stoßen, hoffentlich hat es jemand in den Kommentaren gelöst. Ordnung. Wir sehen uns im nächsten Video, sobald Sie den Houdini-Text geschrieben haben. In Ordnung. Tschüss. 46. Warum ist die Interaktion beim Tippen auf Klicken in Figma grau oder fehlt?: Ein Hallo, alle zusammen. In diesem Video werden wir uns ansehen, warum manchmal beim Tippen Benotung oder beim Klicken Benotung ist. Außerdem werden wir wiederholen, warum manchmal Tippen und manchmal beim Klicken angezeigt wird Ich sage nur beim Tippen auf Klick, das Gleiche. Schauen wir uns das etwas genauer an. Fangen wir mit Tippen auf Klick an. Ich nehme mir eine meiner Schaltflächen aus meiner Bibliothek und wechsle in den Prototypmodus, Alt oder Option neun, ich sage, du gehst hier. Ich scrolle nach oben und sage beim Tippen. O tippe, gehe zu dieser Seite. Hervorragend. Ich nehme mein Rahmenwerkzeug und gehe hier runter und sage, ich will einen schönen großen Rahmen namens MacBook Ear, okay. Immer noch mit dem Namen iPhone 16. Ignoriere das. Es wiederholt nur, was es hier oben war Geben wir Scrab den gleichen Knopf, den ich genommen habe , und jetzt zurück in den Prototypmodus Ich würde sagen, geh dorthin, als du geklickt hast. Lass uns einen Blick darauf werfen. Es heißt immer noch vom Fass. Du sagst, das ist kein Telefon. Das ist eine Website, sollte mit einem Klick erreichbar sein. Was passiert ist, wenn ich auf den Rahmen klicke und hierher gehe und die Prototyp-Einstellungen sage, wird das erste Dokument verwendet, nämlich das iPhone 16. Ich kann sagen, das ist jetzt tatsächlich das ScquScroll MacBook Air, ein Laptop , Ein Klick auf die Schaltfläche ist genau dasselbe, aber es Dieser hier drüben ist jetzt auch auf Klick. Wir haben den Prototyp für diese Datei so geändert , dass sie jetzt ein Laptop ist. Lassen Sie uns eine Vorschau der Datei sehen und sehen, dass sie mit einem Laptop, dem MacBook hier, in der Vorschau angezeigt und mit einem Laptop, dem MacBook hier, in der Sie machen genau das Gleiche . Es spielt keine Rolle. Wenn du dem Tutor von jemandem folgst und er sagt, jetzt benutze ich den Wasserhahn und du sagst, ich habe ihn nicht. Ich habe OnClick Gleiche gilt, außer unter den Prototyp-Einstellungen, diesen Prototyp-Einstellungen ist es entweder auf „wahrscheinlich manchmal“ eingestellt, ist es entweder auf „wahrscheinlich manchmal“ eingestellt kann es hier auf „ Nichts“ oder auf „Benutzerdefiniert“ gesetzt werden Ich werde auf die eine oder andere Weise zum iPhone zurückkehren , nur damit ich wieder auf die Schnelle bin. Den anderen wollte ich dir beim Tippen zeigen, manchmal hast du ihn nicht. Die ist klasse. Ich werde hier auf diese Nudel klicken. Manchmal kommst du an die Spitze und denkst, du kannst es dir überhaupt nicht aussuchen, es ist klasse Das ist der Fall, wenn Sie mehr als einen Antrag gestellt haben. Ich mache das die ganze Zeit und flippe dann aus, flippe aus, aber durchsuche mein Gehirn, um herauszufinden , warum ich sage, dass ich das habe Ich sage, ich will, dass du hergehst . Ich hab das Top hier. Ich hab gesagt, ich wollte am Fass sein, es ist toll draußen. Es ist toll, weil du schon etwas angewendet hast. Ich werde es auf Drag anwenden. Das ist cool. Ich habe zwei Dinge darauf angewendet. Man kann nicht zwei auf dem Wasserhahn haben , weil es nicht weiß, wohin es gehen soll Wenn ich diesen auf der Hand haben muss, muss ich mir diesen schnappen und einfach auf Löschen klicken Jetzt kann ich zu diesem zurückkehren und ganz oben auf der Karte ist wieder alles. Da hast du's. Das ist es. On-Click ist für die Vorschau auf einem Laptop oder Desktop vorgesehen, das sich in den Prototyp-Einstellungen befindet oder wenn Sie im Prototypmodus nichts ausgewählt haben, wenn Sie im Prototypmodus nichts ausgewählt haben, oder ein On-Tap bedeutet, dass Sie sich auf Mobilgerät oder iPad befinden. Da haben wir's. Sie sind alle gleich. Wir sehen uns im nächsten Video. 47. Ai Automatisch Interaktionen in Figma hinzufügen: Erstens werden wir in diesem Video die Roboter alle Interaktionen und das Prototyping durchführen lassen die Roboter alle Interaktionen und das Prototyping durchführen Wir klicken auf eine Schaltfläche und es wird von hier nach bam gehen, das , da ist noch mehr Es gibt überall Nudeln, und ich habe nichts davon gemacht. Es sagte: A, die Herztaste geht zu den Favoriten und diese Schaltfläche „Inzwischen“ sollte zum Einkaufswagen gehen, alles automatisch mit Hilfe der Roboter. In Ordnung, lass uns reinspringen. Okay, also ich habe eine neue Seite erstellt, während wir daran gearbeitet haben. Bleib chaotisch. Habe eine neue Seite erstellt, okay, plus drück, habe eine Seite namens Anfahrt Ich habe nur Teile kopiert und daraus ein kleines Sammelsurium gemacht Okay, ich habe mir gerade die Genre-Seite geschnappt und mein Navi wieder eingegeben Die Watsa-Seite ist genau das, was auf dem anderen Dokument steht, und es ist genau so, wie es auf dem anderen Dokument war Ich habe diesen neuen Ordner mit dem Namen Favoriten erstellt , ihm einen Titel gegeben und das Gleiche gilt für den Einkaufswagen habe ihn aus dem anderen Dock übernommen Sie haben alle dieselbe Navigation, die wir zuvor erstellt haben. Wenn Sie mitmachen, sollten Sie im Prototypmodus nachschauen, ob es derzeit Interaktionen gibt. Unter Prototyp können Sie sehen, dass ich gerade alles entfernt habe, was ich getan habe. Es ist alles sauber, weil wir wollen, dass die KI den Job macht. Und lass es uns versuchen. Als Erstes gehe ich zu meinen Assets und füge ein paar Buttons hinzu. Die Knöpfe, das ist ziemlich clever. Es wird intelligenter werden. Dieser Knopf , das Wort Knopf, ist offensichtlich nicht gut. Ich werde das Wort hinzufügen. Was läuft? Ich werde diesen Knopf wieder benutzen und vielleicht werde ich einfach einen anderen hier platzieren. Gib mir einen Knopf. Ich muss in den Designmodus wechseln. Sie können im Prototyp ein wenig bearbeiten. Ich gehe da hin, komme raus, schneide und du kannst hier weitermachen. Co.. Dieser Typ wird nicht der sein, der läuft. Lass uns jetzt Tschüss sagen. Tschüss, Kauf. Jedenfalls. Wir werden sehen , dass es für einige Dinge funktioniert und für andere nicht. In Ordnung. Alles, was wir tun, ist alles auszuwählen. Eigentlich müssen Sie sich nicht einmal im Prototypmodus befinden. Du gehst einfach hier rein und sagst, tippe diese Werbeinteraktionen ein. Es ist KI, also wird es eine kostenpflichtige Funktion sein. Klicken Sie darauf, lehnen Sie sich zurück und sehen Sie, was es tut. Was macht Sachen. Nudeln gehen überall hin. Mal sehen, was es gemacht hat. Haben wir es akzeptiert? Ich schaue immer wieder nach. Also, das ist gut. Schau. Was läuft. Ich bin im Prototypmodus. Sie können sehen, dass die Seite „Was ist los“ zur Seite „Was ist los“ gegangen ist. Ich habe nichts getan. Ich glaube, es schaut sich den Text hier an und schaut sich entweder die Überschrift oder den Rahmen an. Ich weiß nicht, es ist Magie. Lass uns einen Blick darauf werfen. Ist der BioNW-Knopf hier reingegangen? By ist zum Einkaufswagen gegangen. Das war cool, weil ich keinen Einkaufswagen geschrieben habe, aber es wusste, dass der Einkaufswagen mit dem Bynw-Button verbunden ist Jetzt gefällt mir besonders, dass ich dieses Herz hier sehe, geht auf die Favoritenseite und es ist auf allen. Schau, das Herz, wenn ich klicke, lass es uns tatsächlich prototypisieren, du wirst sehen, dass es kleiner wird, sodass das Herz zu den Favoriten gehört. Ticketing geht auf die „Inzwischen“ -Seite, das Herz geht dorthin, es ist gut Es weiß nicht, wohin das führt, und das aus gutem Grund. Die Suche. Oh, das funktioniert. Okay? Das sieht aus wie eine Suchseite. Das weiß ich nicht Genres, ich glaube, ich bin ziemlich erstaunt, dass man so irgendwie anfangen kann. Ja, sagen wir, füge ein paar Interaktionen und KI hinzu und verbindet das meiste irgendwie. Wie viel Zeit spart dir das? Ich weiß es nicht. Ist. Hängt davon ab, wie groß Ihr Projekt ist. Ich bin beeindruckt davon, also dachte ich, ich würde es teilen. Es funktioniert nicht so gut, wenn Sie ein unordentliches altes Unterverzeichnis haben , so etwas, weil Sie es schaffen können Aber wow, es wird wahrscheinlich verrückt werden, nur weil wir das ziemlich chaotisch hinterlassen haben Hauptsächlich, weil es ein Tutorial ist. Wir haben viele iPhone 16-Modelle und die Variablen eins, zwei und drei. Aber wie dem auch sei, ich bin beeindruckt. Du wärst beeindruckt. Das ist es. Danke, Roboter. Seid alle nett zu den Robotern, nur für alle Fälle. Alles klar. Nächstes Video. 48. Mehrere Nudeldrähte gleichzeitig erstellen und entfernen in Figma: Hallo. Hast du Probleme mit Nudeln? Du hast zwei Knienudeln Nudeln gehen überall hin, oder Sie müssen eine Sache aktualisieren und Sie müssen alles auf einmal erledigen. Sie müssen diese Taste in großen Mengen an unserem Auswurfsitz anbringen Lassen Sie mich Ihnen zeigen, wie Sie mehrere Dateien gleichzeitig hinzufügen und entfernen können. Lassen Sie uns sie Drahtnudeln nennen klingt lustig. In Ordnung, lass uns gehen Okay, also ich habe gerade allen Seiten eine Schaltfläche hinzugefügt , ganz einfach. Was Sie tun können, ist, zu wechseln, sie alle anzuklicken ist, zu wechseln, sie alle anzuklicken und dann in den Prototyping-Modus zu wechseln, was Option neun ist, Sie wissen das, ich weiß, dass Sie das wissen Schnappen Sie sich einen von ihnen und beobachten Sie, was passiert. Sie kommen alle mit. Das ist eine gute Möglichkeit, sie alle einfach in großen Mengen zu erledigen. Sie können alle Änderungen vornehmen, und das funktioniert für alle. Sie können es auch tun, wenn ich das loswerden werde, all diese entfernen. Wenn das so ist, mache ich es zu einer Komponente und verwende dann Instanzen davon auf allen Seiten. Du gehst da hin, stellst sie nach oben. Ich werde sie kopieren und einfügen, weil sie alle Instanzen dieser Hauptversion sind. Sie können sagen, Sie gehen auf die Auswurf-Seite und Sie werden feststellen, gehen auf die Auswurf-Seite und Sie dass all diese kleinen Kumpels auch alle da Das. Probleme mit dieser Methode treten auf, wenn sie dadurch rückgängig gemacht wird. Mach es rückgängig, bis es weg ist. Verschwunden. Wenn dieser Frame hier zu Recht auf einer Komponentenseite ist. Dieses Ding hier, du kannst nicht sagen, richtig, ich möchte, dass du zu einer Interaktion gehst wenn du auf Navigate 2 klickst. Sie können im Moment zumindest nicht zu einer anderen Seite wechseln. Sie können nur zu Frames wechseln, die sich auf dieser aktuellen Seite befinden , es wird also nicht funktionieren. Ich muss sie alle durchgehen, auswählen und nach unten verschieben. Manchmal sind sie schwer zu bekommen diese in diesem Rahmen gelandet sind. Wenn ich sie also alle auswählen möchte, kann es manchmal schwierig sein, sie mit der Shift-Taste anzuklicken. Was Sie tun können, ist , wenn eine ausgewählt ist, zu Ihren Schnellaktionen oder zu Befehl oder Steuerung zu gehen und auszuwählen und einfach herauszufinden, welche davon die richtige sein könnte. Option „Mit den gleichen Eigenschaften auswählen“ eignet hervorragend für diese Option. Ich bin im Prototyp. Ich sage, jeder dieser Typen geht da runter. Hervorragend. Wird jetzt fehlen, werden wir alle Interaktionen entfernen. Angenommen, Sie haben es von jemand anderem bekommen oder Sie haben Ihr eigenes Chaos angerichtet, es ist eine Community-Datei. Sie haben nichts ausgewählt und stellen dann sicher, dass Sie sich im Prototyp befinden. Klicken Sie mit der rechten Maustaste und sagen Sie Alle Interaktionen entfernen. Sie können dies pro Frame tun. Sie können auf den Rahmen klicken, rechten Maustaste darauf klicken und „Alle entfernen“ sagen. Wenn Sie ihn finden können, warten Sie bitte mit der Bearbeitung. Da ist es ganz unten, entferne alle Aktionen nur für diese eine Seite. Aber ich werde es für die gesamte Seite tun, um sie aufzuräumen. Weil ich Ihnen auch zeigen möchte dass alle Eigenschaften für diese Version funktionieren Ich habe dafür dasselbe gemacht und ich habe Befehl oder Strg K gesagt, lass uns gehen Alle gleichen Eigenschaften auswählen, perfekt. Er hat es. Ich habe entschieden, dass es sich bei all dem um dieselben Immobilien handelt. Es gibt eine Menge. Da kannst du reingehen und einfach etwas anderes ausprobieren. Befehl, Auswahl, und da ist Ehepartner rechts auswählen. Warum gehen wir? Schau mal hier unten nach. Es gibt dieselben passenden Ebenen. Ordnung, das hat funktioniert. Wir haben alle passenden Ebenen ausgewählt. Jetzt können wir das tun. Es ist eine gute Möglichkeit, in diese ziemlich komplizierten Dinge einzutauchen in diese ziemlich komplizierten Dinge einzutauchen und sie alle auf einmal zu aktualisieren. Schau uns an. Wir sind fortgeschritten und haben einen Schleudersitz draus gemacht. Ich habe die KI benutzt und gesagt, gib einen Grafikdesigner ein Ah. Er ist definitiv ein Buchhalter mit einem Grafikdesign-Schild. Es ist aber ziemlich cool Ordnung, das ist es. Das ist Massenbearbeitung und Massenentfernung der Nudeln. Tschüss. 49. So erstellen Sie eine klebrige Scrollposition-Suchleiste in Figma: Hallo, alle zusammen. In diesem Video werden wir uns ansehen, wie man Dinge klebrig macht. Wir werden nach oben scrollen und zusehen, wie die Suchleiste dort hängen bleibt. Alles wird hinter ihm scrollen. Wir werden auch die oberen und unteren UA-Elemente reparieren, aber wir sind wirklich wegen der Klebrigkeit hergekommen, scrollt ein bisschen nach oben und klemmt dann oben Ordnung, lass uns reinspringen. In Ordnung. Das Erste, was du brauchst, ist, dass ich gerade eine einfache Suchseite erstellt habe , dass ich gerade eine einfache Suchseite erstellt gerade einen Kreis mit dem Symbol entworfen. ist also nichts Besonderes. Ich habe eine Liste erstellt. In dieser Liste ist es wichtig, dass sie von der Seite entfernt wird, damit sie nicht scrollt. Es gibt nichts, was man durchblättern könnte. Lassen Sie uns also zunächst eine Vorschau darauf werfen. Lass uns darauf klicken, auf das übergeordnete Bild klicken , die Leertaste drücken und ich wackle mit dem kleinen Finger auf dem alten Scrollrad, im Moment kein Scrollen. Wir müssen das einschalten haben das Elternteil für meinen eigenen Prototyp ausgewählt , das können Sie hier sehen. Was machst du mit dem Überlauf? Ich möchte, dass es vertikal scrollt, bitte. Jetzt kann ich ihm eine Vorschau geben und ich kann scrollen. Ich scrollt nicht genau so, wie wir wollen, dass der Typ klebrig ist. Was wir vielleicht vorher tun könnten, ist, weil ich will, dass auch das oben bleibt Wir haben das schon einmal gemacht. Ich möchte sagen, dass du nicht mit den Eltern scrollst. Ich will nicht, dass du einfach da bleibst, bitte. Ich werde sicherstellen, dass es ganz oben in meinem Ebenenstapel steht, und ich sage wieder Vorschau, diese, jetzt scrolle nach oben, du kannst sehen , dass das Ding oben bleibt. Aber ich möchte, dass sich die Suche hier oben blockiert und nicht verschwindet, weil ich möchte, dass sie immer da Oh, wir werden auf dich klicken und sagen: Hey, ich möchte , dass du das übergeordnete Objekt nicht scrollst, ich möchte, dass du nicht repariert wirst , ich möchte, dass du nicht wie wir es bei der oberen Navigationsleiste machen, wir machen Sticky Er hört am oberen Rand und es wird funktionieren. Lass uns eine Vorschau ansehen, scrolle, scrolle, scrolle. Was passiert ist, dass es klemmt, aber es versteckt sich dahinter, es geht hoch und klemmt sich oben Er ist da direkt darunter. Also müssen wir ein bisschen Polster machen. Damit ist das zufällig ein automatischer Ausgang, also werde ich das Design entwerfen Ich kann zu meiner Polsterung gehen und sie hochdrehen. Das Problem ist, dass es das getan hat. Ich habe einige Zeit damit verbracht, das alles gut aussehen zu lassen. Deine könnte funktionieren, aber ich habe ein paar Dinge mit meinen Bestellschichten gemacht , um alles schön zu machen. Was wir tun müssen, ist dass dieser Typ ihn in einen Rahmen steckt, daraus ein automatisches Layout macht, einen übergeordneten Umschlag drüber legt und malt, damit wir nicht mit all dem Guten herumspielen, das wir gemacht haben Klicken wir mit der rechten Maustaste und wählen Sie den Rahmen aus. Ich werde es in ein Aoout umwandeln. Und alles, was ich getan habe, war meine Suchleiste zu nehmen, sie in einen Rahmen zu setzen, ihr den tollen Namen 22 zu geben und sie dann in Aolout zu konvertieren Ich mache das nur, weil ich etwas Polsterung hinzufügen möchte . Ich werde die Polsterung oben verwenden. Okay? Bei so viel. Ich habe keine Ahnung und schiebe das wieder nach oben. Hoffentlich siehst du irgendwie, was es bewirken wird. Diese obere Kante. Was wird gegen die Spitze stoßen? Wir müssen ein bisschen mehr sein. Okay. Okay, lassen Sie uns eine Vorschau darauf werfen. Klicken Sie auf diesen. Okay, ich werde nach oben scrollen. Hoppla. Arbeitet. Oh, ich weiß warum. Wir sagen, naja, es sollte an der Spitze bleiben. Dan sagte, es bleibe bei den oberen Vierern. Warum ist es jetzt nicht so? Wir haben es damit gemacht. Wir haben die Suchleiste durchsucht. Wir sind zum Prototyp gegangen und haben gesagt: Okay, klebrig oben Aber dann haben wir diesen anderen Rahmen darum herum gemacht, ihn Frame 22 genannt, und hier wurde er nicht angewendet Was auch immer der Boden dieses Stapels sein mag, wir können diesem oder jenem oder jenem keine Klebrigkeit verleihen Es muss das sein, was sich auf dieser Basisebene befindet. Was ich meine? Was die Hierarchie angeht? Ich möchte Frame 22 sagen. Elternteil scrollen? Nein, ich möchte, dass du oben klebrig bist. Lass es uns jetzt versuchen. Es ist Leertaste. Groll dich auf. Komm hoch, scrolle nach oben. Und das tut es nicht, es funktioniert nicht wirklich, oder? Lass uns das machen, Dan, wo ich das etwas nach unten verschiebe. Lass es uns jetzt zum Laufen bringen. Lass uns die Leertaste drücken und auf ihn klicken. Schau dir das an Es wird nach oben scrollen und dann hängen bleiben. Co.. Er geht an die Spitze und bleibt dann hartnäckig. Jedes Problem damit ist die Reihenfolge der Ebenen. Ich werde also sagen, dass Sie oben stehen meine letzte eckige Klammer oder die zweite verwenden. Lass uns dir noch einmal eine Vorschau geben, geh hoch und es wird scrollen, scrollen, scrollen, boopen, stecken bleiben und hintengehen. Cool Okay, du kannst es bekommen, damit es dort haftet, wo auch immer die Polsterung ist Manchmal muss man es einfach in einen Rahmen einwickeln, es herstellen und einölen, alles, was darin ist, etwas Polsterung hinzufügen, ein bisschen Polsterung drauflegen es herstellen und einölen, alles, was darin ist, etwas Polsterung hinzufügen , ein bisschen Polsterung Eine Sache, die wir tun müssen, ist, dass du wahrscheinlich auch einfach repariert werden musst Du siehst hier in deinen Ebenen repariert. Siehst du, repariert wird nach oben gedrängt. Es gibt also Dinge , die scrollen, und es gibt Dinge, die repariert sind Es ist eine einfache Möglichkeit zu sehen, was was macht, und die reparierten Dinge stehen ganz oben. Lass es uns noch einmal versuchen. Zuletzt: Scrollen, Scrollen Scrollen, Sie können es mit mehreren Überschriften Lass uns das machen. Ist eine gute Art von Erinnerung. Okay, nehmen wir an, wir haben hier einen Treffer, wir wollen an die Spitze und müssen uns ihm stellen. Wir müssen sicherstellen, dass es in einer eigenen Box ist. Wir müssen die Polsterung hinzufügen. Also werde ich diesem Ding ein automatisches Layout hinzufügen. Ich werde sagen, du hast oben etwas Polsterung. Wie viel davon? Eigentlich nein, ich brauche es zu groß, oder? Okay, schnappen wir es uns, denn es wird oben auf der Seite aufhören. Geht es darum, dass du siehst, was ich hier mache? Ich schnappe mich nach dir und sage: In Ordnung, du wirst ungefähr dort aufhören Ich brauche also eine kleinere Polsterung, aber vielleicht das. Lass uns das versuchen. Wir müssen nur Prototyp sagen und das Elternteil durchblättern. Nein, einer sollte am oberen Rand klebrig sein. Du machst es noch verwirrender, Dan. Nein. Wir sehen, wie es uns geht. Scrollen und die Suchleiste stoppt, und dann stoppt er zu tief. Weniger Polsterung. Weiß Dan überhaupt, was er tut? Einfach mitnehmen, Vorschau ansehen, Scrollen, Scrollen. Das ist besser. Geh. Sie können eine weitere Überschrift unter dieser Überschrift platzieren und das einfach für die Suchleiste tun. Denn vielleicht kann der Versuch, sie zu stapeln, etwas verwirrend werden. Dinge, an die Sie sich erinnern müssen , sind , dass, wenn Sie eine Polsterung wünschen, es ein automatischer Ausgang sein muss Und oft ist es einfacher, einfach ein eigenes Bild zu setzen, einen Rahmen darum zu legen und daraus einen automatischen Ausgang Die andere Sache, die Sie tun müssen, ist sicherzustellen, dass Dinge von der Seite verschwinden. Ich sehe, dass meine Schüler einfach auch nichts zum Scrollen haben, also ist es nicht wirklich wichtig, was Sie einschalten. Es scrollt nicht, also brauchst du Müll, der von unten kommt. Die andere Sache ist, klicken Sie auf den übergeordneten Frame unter Prototyp Das Scrollverhalten muss vertikal sein, und das, was Sie an der Spitze haben möchten , muss hier ganz unten in der Hierarchie hängen , nicht etwa drei oder vier tief in dieser großen Ebenenstruktur. Option ausgewählt haben, wechseln Sie zu „ Sticky“. Das ist es. Ich bin mir nicht sicher, ob ich das Ding schwerer oder leichter zu erlernen gemacht habe , aber los geht's. Das ist passiert. In Ordnung. Wir sehen uns im nächsten Video. 50. So erstellen Sie einen horizontalen Scroll-Swipe in Figma: Ich Hallo, da. Dieses Video, das werden wir machen. Wir werden etwas horizontales Scrollen machen. Wir werden einige Bewertungen machen und sie dazu bringen auf diese Weise zu scrollen, wie in einem kleinen Karussell Sehr cool. Wird horizontales Scrollen genannt Ich zeige dir, wie man das in Figma macht. Um zu beginnen, habe ich gerade eine Karte erstellt, eine generische Bewertungskarte. Was ich tun möchte, ist weitermachen, es in Gang bringen. Du kannst es mit allem machen, nur mit einem einfachen alten Rahmen. Ich will es einfach ganz einfach machen. Ich mache das, weil es cool aussieht. Was wir tun werden, ist zuallererst, dass das so ist, wir brauchen ein paar davon, damit sie von der Seite verschwinden. Du kannst dich daran erinnern, zu ziehen und die Leertaste gedrückt zu halten, sie rüberzubringen oder mit dem hier ausgewählten Bild zu beginnen , Quer. Er ist rausgekommen. Tun wir einfach so, als würde es herauskommen, weil Sie das aus Versehen tun werden Ich gehe zu DDD. Ich habe ein paar davon. Was ich sagen möchte, ist, bevor ich anfange, ist sie eigentlich nicht in diesem Rahmen sind, um tatsächlich zu scrollen. Ich muss sichergehen, dass du und du. Diese Typen sind nicht auf dem Bild. Dieser erste Typ ist Bild 23. Gute Arbeit, Dan. Eigentlich nein, es heißt B Review Also werde ich es runterziehen, um mit seinen Kumpels zusammen zu sein. Du gehst da hin. Jetzt sind sie alle auf der Seite. Es liegt an Ihnen, auf den übergeordneten Frame zu klicken und Sie können zum Design gehen und entscheiden, ob Sie Inhalte ausschneiden möchten oder nicht. Es spielt keine Rolle. Sieht anders aus. Lass es uns versuchen. Ich sehe mir immer eine Vorschau an, wenn ich gehe. Drücken Sie die Leertaste und Sie können kein Scrollen sehen. Alles was wir tun müssen, ist die Seite mit den Bewertungen zu sagen. Lassen Sie uns zum Prototyp wechseln. Option Neun, du wirst satt haben, dass es da drin ist, oder? Gehen wir zu Overflow. Horizontal. Es ist nicht das, was ich will. Ich denke gerade nach. Ich will nicht, dass die ganze Sache fließt. Ich will das einfach, und das sind all diese Typen. Ich möchte, dass sie in ihrem eigenen Rahmen sind, all diese Kaufrezensionen in ihrem eigenen Rahmen und wir werden das zum Scrollen bringen, nicht das übergeordnete Bild. Das ist die große Sache hier. Wir wollen nicht, dass der ganze Bildschirm fließt. Das werde ich. Es ist startklar. Kurz, horizontal , ich sage „Vorschau“, und das Ganze wird und das Ganze Das Ganze tut es . Das Problem wird sein, dass diese behoben sind, wenn ich hier einen Titel hinzufüge. Wenn ich hier unten etwas Text hinzufüge. Lass uns einen Blick darauf werfen. Lass uns auf die bessere Vorschau klicken auf die bessere Vorschau Da ist ein V. Da läuft furchtbar schief. U, V, geh weg. Klick auf dich, Vorschau. Wenn ich scrolle, scrollt das Ganze. Ich möchte nicht, dass das scrollt und ich möchte nicht, dass die Bewertungen scrollen Ich möchte nicht, dass der ganze Frame scrollt. Das wollte ich erklären. Komm schon, Dan. Was ich will, ist das. All diese Typen müssen in ihrem eigenen Rahmen sein. Es kann ein Autoout sein, es kann ein Frame sein, spielt keine Rolle. Ich mache Shift A für Autout. Sorgen Sie einfach für alle Abstände und stellen Sie sicher, dass sie sich innerhalb des Bewertungsrahmens Jetzt mache ich es damit. Anstatt Frame 24 aufzurufen, nennen wir diesen Review Scroll. Wenn ich das ausgewählt habe, möchte ich nicht in der Lage sein, Scrollen zu können, ich möchte vertikal oder horizontal gehen. Ich kann mich nie erinnern. Ich denke, es ist horizontal, aber ich muss darüber nachdenken. Komm schon, Brain, lass uns das versuchen. Lass uns eine Vorschau von ihm sehen. Kannst du jetzt sehen, was hier vor sich geht? Es funktioniert. In Ordnung, lassen Sie uns herausfinden, was schief gelaufen ist. Das sollte einfach funktionieren. Sollte horizontal scrollen Einfach klicken und ziehen, funktioniert nicht. Alles klar. Lass mich dir zeigen, wie ich die Dinge aufschlage. Zuallererst habe ich etwas darunter gesehen. Ja, was machst du da? Du bist da. Ja, ich werde dich los. Ich brauche dich nicht. Lassen Sie uns noch einmal eine Vorschau darauf werfen. Mitscrollen Okay. Damit horizontal gescrollt wird Sollte Oh sein. Ich weiß was es ist. Das ist das Wichtigste für diesen ganzen Kurs. Auch hier tue ich so, als ob ich es tun wollte , dass dieser Rahmen hier zugeschnitten werden muss Wir haben diesen übergeordneten Rahmen, auf den wir angewendet haben . Die Schriftrolle ist ganz da draußen Was wir tun müssen, ist einen Ort zu haben, an dem es scrollen kann. Wir müssen es hochziehen. Der Rahmen, dieser übergeordnete Rahmen mit all den Typen drin, dieser Rahmen kann sogar kleiner sein. Er kann kleiner sein. Normalerweise behalten wir sie einfach bei derselben Größe. Aber wir können sagen, dass Sie ein kleineres kleines Fenster zur Welt sind, und wir können unter Design den Inhalt des Clips aufrufen, sodass wir ihn nicht sehen können. Das erklärt es ein bisschen besser. Der übergeordnete Frame ist etwas kleiner, also gibt es hier Dinge zum Scrollen . Lass es uns jetzt versuchen. Bitte arbeite. Es funktioniert. Wir können diese Schriftrolle machen. Offensichtlich ist es besser, mit dem Finger auf Ihrem Telefon zu testen . Du gehst. Da sind horizontale Schriftrollen Eine Sache, die ich tun muss, ist, dass das übergeordnete Objekt etwas breiter sein muss , weil die Schlagschatten abgeschnitten sind, und ich werde einfach sagen, lass uns zur Ausrichtung gehen, oben links, los jetzt sollte noch besser sein Ich kann meine Schlagschatten dort sehen, du siehst, ja, es ist perfekt. In Ordnung. wichtigsten Erkenntnisse: Sie müssen sicherstellen, dass alles, was Sie Die wichtigsten Erkenntnisse: Sie müssen sicherstellen, dass alles, was Sie horizontal scrollen möchten, vom Bildschirm verschwindet und dass es sich um einen sichtbaren Rahmen handelt oder ob es sich um ein automatisches Bild handelt, dass das automatische Layout oder der Rahmen auf horizontales Scrollen eingestellt sein muss und der übergeordnete Frame dieselbe Größe wie Ihr Mobilgerät haben muss wie Und das spielt keine Rolle, aber Sie können unter Design angeben, dass Inhalte ausgeschnitten werden sollen, um sie alle zu sehen Das sollte funktionieren. Das nächste, was ich tun möchte, ist, dich zu schnappen und KI-Sachen zu machen. Schreib das um. Wir sind jetzt fertig Ich zeige dir nur ein paar coole Sachen, die ich gerne mit einigen der KI-Dinge mache. Ich werde Bewertungen abgeben und einfach auf Command Enter oder Control Enter drücken. Schau es dir an. Geht das alles durch und ändert es, macht die Bilder gerade nicht, und du kannst KI verwenden, um sie zu machen. Das Problem dabei ist, dass es eine Weile dauert, sie zu erstellen. Ich verwende oft Command oder Control K für meine Shortcuts, ich verwende Content R. oCentral ist ein wirklich cooles Plug-In oder Widget Du könntest dorthin gehen und es finden. Es ist wirklich praktisch für viele Dinge. Nehmen wir an, ich brauche es nur, weil ich will, dass es nicht von KI generiert wird. Es wird auf Werbung gehen und auf Min. klicken. Das Gleiche gilt für kann ich mehrere machen? Ich bin mir ziemlich sicher, dass ich das kann. Ich kann sagen, ihr seid alle, das hat einfach nicht funktioniert. Ich kann auf dich klicken. Ich halte auf einem PC die Befehlstaste auf der Strg-Taste gedrückt und gleichzeitig die Umschalttaste, und du kannst darauf klicken und es geht einfach durch und fügt generische Platzhalterbilder ein. Sie werden nicht von KI generiert, sie sind nur vordefiniert. Sie sehen, sie haben 1.700 davon. Das Gleiche, wenn wir volle Namen hätten. Wenn Sie eine Liste mit vollständigen Namen benötigen, können Sie KI-Sachen verwenden. Wenn Sie keinen Zugriff darauf haben , weil Sie ein kostenloses Konto haben. Sie können lediglich Commander Shift oder Control Shift PC gedrückt halten . Schnapp dir all diese und du kannst sagen, gib mir ein paar vollständige Namen. Dann kannst du es erneut anklicken. Gib mir verschiedene Namen. Es gibt hier eine Menge Zeug , das so ist. Du kannst dich durcharbeiten, und ja, es ist nützlich. Ich mache es rückgängig, weil ich hinter mir stehen will, und das wird reichen. Funktioniert es immer noch? Es macht immer Spaß, wenn man damit herumgespielt hat Es funktioniert immer noch. Schau dir das an. Wir sind Genies. In Ordnung. Das ist es. Ich werde meinen kleinen Clip-Inhalt einschalten, damit er aufgeräumt wird und ich werde dich im nächsten Video sehen Eine letzte Sache ist eigentlich Befehl Y, Steuerung Y ist, dass Sie zur Gliederungsansicht wechseln können , wenn Sie etwas sehen möchten Du sagst, ich muss all diese Dinge sehen. Du sagst, was ist das alles? Was ist das eigentlich alles? Es ist die Schriftrolle von dieser Seite. Scrollt diese Seite überhaupt? Ich wette, das tut es nicht? Tut es. Das Top müssen wir sowieso reparieren, weil wir uns ablenken lassen. Wir haben horizontal gescrollt und wir sind großartig. Ich werde dein fantastisches Ich im nächsten Video sehen. 51. Klassenprojekt 13 - Horizontales Scrollen: Ordnung. Es ist Glückszahl 13. Ich möchte, dass Sie Ihr eigenes horizontales Scrollen erstellen, eine Bewertungskarte erstellen, einfach sein, kann komplex sein, es liegt an Ihnen, und ich möchte nur, dass Sie die Bewertung auf Ihrem Gerät horizontal scrollen lassen . Im Grunde genau das, was wir im letzten Video gemacht haben. Machen Sie Ihre eigene Version, und ich würde gerne ein Video sehen, andernfalls machen Sie einen Screenshot davon, teilweise gescrollt. Ich weiß, dass du es vortäuschen kannst Dafür sind wir nicht hier. Wir sind hier, um besser zu werden und diese Übungen zu machen. Ich wette, wenn du sie machst, fühlst du dich bitterer. Und das ist es. Laden Sie es in den Aufgabenbereich hoch. Ich habe das Teilen in den sozialen Medien entfernt. Wenn es langweilig ist, teile es nicht. Wenn du ein bisschen Arbeit reingesteckt hast, denkst du, cool. Teile es bitte. Ich liebe es, es zu sehen. Dieser Teil hier ist der pauly benannte Take a Screenshot of Your Preview, der teilweise gescrollt Das ist es, was ich meine, ein bisschen übergegangen. Stimmt, aber ich würde gerne ein Video sehen. Lade es in die Klassenprojekte hoch. Dieser ist einfach, aber auch sehr technisch. Du musst alles richtig machen. Möglicherweise müssen Sie sich das Video erneut ansehen, um zu sehen , was Sie falsch gemacht Ich sehe wahrscheinlich meistens, dass Leute Probleme haben , wenn sie vergessen alles andere richtig zu machen, aber der Rahmen, in dem das alles passiert, muss etwas kleiner werden Ordnung. Hab Spaß. Mal sehen , ob du es schaffen kannst. Wir sehen uns im nächsten Video. Ich habe Kaffee getrunken. Kannst du das sagen? In Ordnung, nächstes Video. 52. Automatisches Scrollen nach unten auf der Seite zu einem Anchor Point (Ankerpunkt) in Figma: Hallo. In diesem Video werden wir Schaltflächen erstellen, die auf der Seite , an der wir gerade arbeiten, nach unten scrollen auf der Seite , an der wir gerade arbeiten, auch wenn sie sehr weit unten auf der Seite sind. Du kannst es hier sehen. Es sind keine separaten Frames. Es geht nur darum, innerhalb dieses einen Frames nach unten zu scrollen und wir werden erklären, wie man einen Hyperlink erstellt. Geh auf eine Website Es ist einfach und gleichzeitig ein bisschen skurril. Lass mich dir alle Macken zeigen. Zu Beginn habe ich lediglich eine Event-Seite mit etwas mehr Details erstellt, dem Namen des Gigs. Ich habe hier ein paar Buttons. Es sind nur automatische Layouts mit einigen Texten darin. Du kannst das eigentlich mit allem machen und ich habe ein paar Sachen, die wir scrollen wollen, also ist es ziemlich einfach. Wechseln wir zu dem, was wir tun werden , wechseln wir zum Prototyp. Option neun, Alt-Zeile auf einem PC. Das ist das letzte Mal, dass ich das sage. Du magst wahrscheinlich Stop at 50-Videos. Es ist genug. Was wir machen werden, ist ein Prototyp, wir werden uns verabreden. Wo wirst du hingehen? Du wirst hier runter gehen. So einfach ist das ziemlich. Es wird automatisch intelligent genug sein , um beim Tippen, Scrollen zwei zu sagen. Wenn nicht, kannst du es zum Gehen zwingen. Es wird bis zu dem Ayerchord-Datum gescrollt. Sie können es dort in meinem Ebenenbedienfeld sehen. Jetzt, wo Animation steht, ist Instant die Standardversion , die Sie bekommen werden. Lassen Sie uns eine Vorschau darauf werfen. Shift Space Bar, das ist das letzte Mal, dass ich das Datum eines Tools sage und es springt auf den aktuellen Stand Geh. Ein Date. Was wir jetzt tun werden, ist es ein bisschen schöner zu machen. die Nudel ausgewählt ist, gehen wir runter zu Animieren Wenn die Nudel ausgewählt ist, gehen wir runter zu Animieren und ich benutze Ease in und Out fühlt sich gut an Wie schnell wird es dann gehen? Ich beschleunige es gerne. Es wird länger dauern, also will ich die höhere Zahl. Das wird eine Sekunde dauern, 1,1 Sekunden. Auch hier kann ich irgendwie nicht online klicken. Also lass uns Shift machen und es nicht mehr sagen. Lass uns auf ein Date gehen. Schau, es scrollt ganz nett nach unten Lassen Sie uns den Rest erledigen und ich zeige Ihnen, wo Sie als Nächstes auf das Problem stoßen Veranstaltungsort geht runter zum Veranstaltungsort und testet immer, testet weiter Denken Sie nie, dass Sie 1.000 Dinge tun werden und dann hoffentlich alles in Ordnung ist und Sie sich nicht sicher sind , was Sie falsch gemacht haben. Der Veranstaltungsort funktioniert. Der einzige Unterschied ist, naja, machen wir es mit dem Preis. Der Preis muss ganz runter gehen. Manchmal kann es etwas schwierig sein, da runter zu kommen. Was Sie also tun können, ist einfach darauf zu klicken. Lass uns interagieren. Ich möchte, dass es vom Fass ist. Welche Aktion? Ich möchte, dass es zwei Mal scrollt. Wo möchtest du zwei Scrollen? Da ist eine Menge Zeug drin. Ich will den Preis runterkriegen. Das Gleiche, aber ich möchte, dass es animiert ist. Der Unterschied besteht darin, dass die Standardeinstellung von 300 Millisekunden und 0,3 Sekunden verwendet die Standardeinstellung von 300 Millisekunden Selbst wenn ich diesen benutze, welcher war dieser? Dieser war ungefähr 1 Sekunde lang. Wenn ich das mache, dauert es 1 Sekunde. Es liegt noch viel weiter vor uns. Wenn ich es etwa eine Sekunde schaffe, funktioniert nichts. Ich muss jetzt meine Optionstaste gedrückt halten , damit sie scrollt, Figma Normalerweise gibt es keine Bugs und Figma. Es ist eine ziemlich solide Anwendung. Aber lassen Sie uns eine Vorschau darauf geben. Wenn ich auf Datum klicke, scrollt es gemächlich nach unten, aber wenn ich den Preis mache, muss es viel weiter abdecken, eigentlich ist der Preis nicht so niedrig Okay, lass es uns vortäuschen. Lass uns diesen Superduper lang machen. Hab das vorgetäuscht. Ich werde zurück in den Designmodus wechseln und alles herunterfahren Ich mache das, damit ich ein besseres Beispiel finde. Ich werde dir eine Vorschau anzeigen und ich werde Datum sagen und es muss in 1 Sekunde da sein, damit es schneller wird. Wenn Sie auf einer Seite ziemlich weit nach unten scrollen müssen, können Sie den dafür benötigten Betrag anpassen. Ich könnte das verdoppeln, weil es noch viel weiter gehen muss. Seltsam. Ich kann es hier tippen, aber ich kann es nicht hier tippen. Wie dem auch sei, das Einzige ist, jetzt, wo es wirklich lang ist, lassen Sie uns noch einmal eine Vorschau darauf werfen. Wenn ich auf den neuesten Stand gehe, rückt das Datum an die Spitze. Ihre könnte in Ordnung sein , weil Sie vielleicht keine lange Seite haben. Aber wenn Sie eine lange Seite aufrufen, gibt es viel zu scrollen. Dieses Datum will also wirklich ganz oben stehen, und für mich versteckt es sich hinter allem. Nur ein bisschen komisch. Ich möchte, dass es ungefähr dort landet, sodass die darin enthaltenen Daten und der Zeitpunkt, an dem die Veranstaltungsorte angeklickt wurden, ungefähr hier angezeigt werden, damit Sie den Veranstaltungsort sehen können und der Preis natürlich bis den Veranstaltungsort sehen können und der Preis natürlich unten geht. Also lass uns das machen Nehmen wir ein Date und klicken wir auf die Nudel. Ich doppelklicke auf die Nudel, und dafür ist dieser Offset da und dafür ist dieser Offset X ist links und rechts, Y ist hoch und runter. Ich muss mir selbst sagen, dass und wie viel ich tun möchte, ist, sagen wir, Tono Pixel einzugeben Lassen Sie uns eine Vorschau darauf werfen. Ich klicke auf Datum und es funktioniert nicht, noch weiter in die falsche Richtung. Es ist 200 Pixel hinter der Stelle, an der das Datum steht. Du musst darauf achten , dass du negative Zahlen verwendest, wenn du oben eine Polsterung haben willst Genau das Gleiche. Gehen wir auf minus 200. Lassen Sie uns eine Vorschau geben und sagen wir Datum. Funktioniert immer noch nicht. Warum funktioniert das nicht? Übersehen wir U, negativ. Vielleicht ist es einfach nicht genug. X. Es ist definitiv Y, ich glaube schon. Komm schon, Date. Da hast du's. Das ist nicht genug. Irgendwo in der Mitte dessen, was ich dort getan habe. Ich habe 200, 400 gemacht. Versuchen wir es mit 300. Datum. Oh, fast geschafft, 250. Komm schon, Dan. Davon gibt es eine Menge. Ich mache es nicht genug, um genau zu wissen, was es sein sollte, und um ein Gefühl dafür zu bekommen. Wenn du ein bisschen mehr davon machst, wirst du vielleicht besser darin. Oh, ich wollte ein bisschen mehr sein. 20? Dann kannst du den ganzen Tag damit verbringen, das Ding runterrutschen zu lassen, wo du es auch brauchst. Das Einzige, was ich nicht auf ein eigenes Video einstellen werde, ist, dass Sie sich durch die verschiedenen Offsets arbeiten können , damit sie funktionieren Eine Sache, die ich am Ende als Bonus hinzufügen werde , ist, sagen wir, wir wollen einen Kartenlink Ich werde das auswählen. Eine der Interaktionen, die wir nicht in einem separaten Video behandelt haben hier einfach einschleichen wird , ist, dass wir vor einer Sekunde darüber nachgedacht haben, Scrollen zu gehen Es gibt eine mit der Aufschrift Link öffnen, und dann können Sie die URL eingeben Lass mich einfach etwas von Google Maps holen. Ich habe gerade einen Link von Google Maps abgerufen. Natürlich kann es sich um eine beliebige URL auf jeder Website handeln. Wenn Sie jemals in Irland sind und es nach Limerick schaffen, schreiben Sie mir zunächst eine Nachricht und stellen Sie sicher, dass Sie Daln's Pub besuchen Es ist das coolste. Okay, und wir gehen zu meinem Tintenpatronentempo Es wird in einem anderen Tab geöffnet. Lassen Sie uns eine Vorschau darauf geben. Gehen wir runter zum Veranstaltungsort. Lass uns auf die Karte klicken. Und schau, es öffnet sich. Nett. Das Einzige, was du alleine tun musst, ist, ihm die schreckliche Farbe zu geben Also muss die Karte hier wahrscheinlich das Blau, das vor vielen Monden erfunden wurde, unterstreichen, was Befehl oder Kontrolle bedeutet. Ich bin stolz darauf, dass ich es fett formatieren muss Warum nicht? Unter Kontrolle B. In Ordnung. So rutscht man die Seite runter, okay? Das nennt man Anker, und es fehlt ein bisschen Timing und vor allem den Offset angeht. Aber du wirst es schaffen. Oh, und eine letzte Sache ist: Weil wir herausgefunden haben , dass 220 oder minus 220 dafür funktionieren, ändert man es nicht für alle. Das Timing, ja, aber der tatsächliche Offset bleibt derselbe, wenn Sie möchten, dass er an derselben Stelle erscheint. Gehen wir also zum Preis, wo wir ziemlich weit nach unten gehen müssen. Es sind immer noch minus 220. Wie auch immer du dich entschieden hast, ich werde dafür sorgen, dass es schneller geht, und lass uns dafür sorgen, dass die Eingaben wieder funktionieren Okay, also eineinhalb Minuten, vielleicht eineinhalb Minuten, eine Sekunde, 1,3 Sekunden. Lassen Sie uns eine Vorschau darauf werfen und uns das ansehen. Es wird immer noch den Offset verwenden , der funktionieren wird. Der Grund, warum es nicht ganz nach oben geht , ist, dass unten nicht genug Platz ist. Also lass uns so gehen. Lass uns dich schnappen. Fahr auf einer Tangente ab. Okay, geh zurück zum Design. Lass uns auf den Rahmen klicken. Wo ist er da? Hier sind die Bewertungen. Klicken Sie auf den Rahmen, kratzen Sie ihn ab und ich werde ihn länger machen , damit dieser Typ irgendwo nach oben scrollen kann, wissen Sie, was ich meine? Sonst gibt es keinen Ort, an dem man weiter aufsteigen kann. Was meint er? Das? Jetzt sollte es an die Stelle kommen, wo wir es haben wollten, weil hier unten ein bisschen Platz dafür ist. Füge solche Sachen nicht hinzu, Dan, klicke auf die Buttons und scrolle ein bisschen nach unten und schon bist du weg. Das ist es. Das sind Scrolling-Anker in Figma. 53. Wie man interaktive Komponenten in Figma erstellt: Willkommen. Willkommen, willkommen. Was werden wir tun? Es ist super aufregend. Bist du bereit? Schau, siehst du. Es schwebt Sehr aufregend. Mach dir keine Sorgen. Es wird noch aufregender. Schau, ich gebe die Taste ein. Klicken Sie ein und aus. Da ist nicht mal ein Schlagschatten drauf. Wie dem auch sei, wir werden das machen, sie werden interaktive Komponenten genannt. Wir machen das ziemlich reibungslos. Dan verirrt sich dabei wirklich. Aber ich werde es in den Kurs einbeziehen weil du dich auf die gleiche Weise verirren könntest. Wirklich ganz einfach, obwohl es wie ein langes Video aussieht, liegt es nur daran, dass ich mich ein bisschen verirre. Alles mein Freund, lasst uns einen super aufregenden Hover machen und ein Häkchen setzen Alles klar, also fange ich mit einem einfachen alten Knopf an. Es ist ein Auto Loud. Es ist etwas Text drin. Das ist es. Woran ich Sie erinnern möchte ist, dass wir das tatsächlich getan haben. Ich zeige dir das. Das ist genau das Gleiche. Wir haben es hier verwendet, um ein Komponentensatz zu haben, das ein , zwei, drei verschiedene Dinge enthielt, und wir haben zwischen ihnen allen animiert. Am Ende hatten wir das hier. Wir haben gesagt, du animierst zwischen diesen beiden, Prototyp Wir sagten, wir nutzen einfach eine Zeitverzögerung. Das ist der einzige Unterschied, aber es fühlt sich an wie etwas völlig Fremdes. Lass uns alles rein rein in in rein rein gehen. Das haben wir früher gelernt. Ich habe vergessen, es während des Kurses zu benutzen. Stöbern Sie einfach durch all die neuen Seiten , die wir geöffnet haben Da ist es. Ich habe diese Seite hier. Der Grund, warum ich ein MacBook Pro oder eine Desktop-Version verwende, ist, dass der Hover auf einem Telefon offensichtlich nicht funktioniert Sie können nicht mit dem Finger auf einem Telefon schweben. Aber es ist ein wirklich gutes Beispiel für diese spezielle Technik Also müssen wir dich zu einer Komponente machen. Fam, du bist eine Komponente. Es heißt, eine Variante davon hinzuzufügen. Im Design, Variante Jetzt möchte ich , dass etwas an der zweiten Variante anders ist. Alles, was ich wahrscheinlich tun möchte, ist die Füllfarbe eine meiner dunklen sein wird. Geben wir ihm einen Schlagschatten. Geil. Genau wie beim Viva-Techno müssen wir nur unter Prototyp gehen, in meinen Komponentensatz reingehen Diese Variante gehört zu dieser. Aber anstatt es nach einer gewissen Zeitverzögerung zu tun , sagen wir „auf dem Tap“, was großartig ist, oder auf „Auf Klick“ und wir werden sagen sofort zu Variante zwei wechseln und wir werden es nicht auf einmal tun. Wir werden weitermachen, während wir den Mauszeiger bewegen. Lassen Sie uns ein Beispiel von diesem Typen herausziehen. Er sollte auf meiner Komponentenseite sein, ist er aber nicht. Lassen Sie uns eine Vorschau darauf werfen. Es wird immer noch eine Vorschau auf meinem Handy angezeigt. Du kannst es wechseln. Ich habe die Verknüpfung verwendet, um zur Vorschau zu gelangen. Sie öffnet sie so. Du kannst zu diesem gehen, Gegenwart. Es ist immer noch auf einem Telefon. Habe nichts ausgewählt und sage, kein iPhone 16. Man könnte sagen, kein Gerät. Ich wähle einfach die Seitengröße aus, an der du arbeitest, oder du hättest es auf das Macbook Pro 16 umstellen können. Hey, lass uns eine Vorschau davon sehen und uns das ansehen. Ordnung, wir haben einen Hover-Button. Wir sind schwer Es ist ein bisschen, wir nennen es augenblicklich. Was wir tun werden, ist, dir zu sagen, dass ich das tun möchte, während ich schwebte, nicht sofort Gehen wir zu T animieren, auflösen. Wird bei diesen beiden egal sein, es wird am Ende gleich aussehen. Vorschau, bewege den Mauszeiger darüber. Oh, es ist nur ein bisschen langsam. Der Drop Shot kommt wirklich schnell rein, oder? Versuchen wir es mit dem anderen Nehmen wir an, wenn ich sage, dass es egal ist, versuchen wir es mit Smart Animate Mal sehen, ob das besser funktioniert. Du bist definitiv besser. Okay. Ignoriere, was ich vorhin gesagt habe. Intelligente Animationen sind viel schöner. Es geht ein bisschen langsam. Okay? Also kannst du einfach damit herumspielen. Eine halbe Sekunde, sieh dir das an, geh raus. Das ist besser. Nett H. Lass uns ein anderes Beispiel machen. Ich werde nur schnell eine Checkbox erstellen . Du bist da. Ordnung. Nach all dem habe ich mir ein paar Probleme und ich dachte, ich zeige es dir auch. Ich habe das Plugin benutzt, um ein Häkchen zu finden , weil es irgendwie wirklich schwierig ist, Zecken selbst zu zeichnen. Sie fühlen sich immer falsch. Seltsamerweise, wenn ich ein Android-Nutzer bin, also meine Zecken, die sich wie eine Zecke anfühlen, das tut es nicht Das ist das IOS-Häkchen. Das ist das Android-Häkchen. Sie verwenden etwas, das Material genannt wird, aber sie geben ihrem Designsystem einen Namen. Ich mag Zecken immer als ob sie sich zu standyypi anfühlen , die Zecke ist sowieso nicht lang genug . Deshalb verwende ich den Plug In Ich mag Cons Eight, weil es viele Apple-Sachen hat. Es hat IOS hier drin. Es hat Googles Material, es gibt Windows, all das generische Zeug. Aber ich habe das gemacht, ich habe das Häkchen gefunden und gesagt: Okay, das ist das, was das Häkchen gefunden und gesagt: Okay, das ist das, ich will, und ich habe es mir geschnappt und herausgezogen Ich habe es geschlossen und dann angefangen zu arbeiten. Ich habe auf das Häkchen geklickt und es verkleinert und angefangen zu arbeiten und ich habe es verschoben und ich habe dir das zu Beginn des Kurses gezeigt dir das zu Beginn des Kurses Ich werde jetzt so tun, als hätte ich es noch einmal erwähnt, um Sie daran zu erinnern, aber ich habe es wirklich einfach getan Sie werden sehen, als das aus dem Plug-In Icon 8 herauskam , war da ein Rahmen mit einem Vektorgrafiken drin Ich habe gerade den Vektor durchsucht und da dieses alte Ding rum. Schau dir das an Wenn ich den Vektor hier drin schnappe und versuche, ihn hierher zu verschieben. Schau, es kommt da raus. Jetzt sind sie getrennt, aber ich habe immer noch diesen großen Rahmen. Lösche das und lösche das , weil ich das getan habe. Schau dir das an. Wenn ich irgendwo hier drüben schwebe, wo ist dann meins. Da ist es da. Da ist dieser große Rahmen, von dem ich nicht dachte, dass er da ist, und ich dachte, was zur Hölle ist das Wir können es unter Command oder Control Y für Konturen sehen. Da ist dieses Ding. Was zum Henker machst du hier? Wir wissen es Ich habe das Häkchen darin verkleinert. Dann habe ich diesen kleinen Rahmen um das Häkchen gelegt. Ich muss mir das alles schnappen . Ich habe es Frame 30 genannt. Nennen wir es Checkmark und ich möchte, dass es nicht fertig ist Also kommst du raus, fertig und wirst fertig los . Werde fertig los. Ordnung. Also das ist die lange Art zu sagen: Was machst du, Dan Also wirklich, was ich getan habe, war, brauche ich den zweiten Frame? Ich tue das nicht wirklich? Du kannst rauskommen und im Häkchen sein und das kann verschwinden. Markieren Sie das Kästchen mit einem Vektor darin. Ich hätte so anfangen und einfach das ganze Kästchen verkleinern Aber wie dem auch sei, wir können genau das Gleiche tun. Was zur Hölle haben wir gemacht? Ich weiß es nicht Ich habe mich verirrt. Wir machen das. Das ist genau das Gleiche. Ich kann also sagen, dass die UR-Komponente sagt, dass sie sie nicht in eine Komponente umwandeln kann, das ist eine gute. Warum nicht? Ich kann es in meinem letzten Panel dort sehen. Dieses Häkchen befindet sich irgendwie außerhalb meines MacBook Pro-Rahmens Ich kann es erkennen. Ich kann den Text dort sehen. Ich muss also sichergehen, dass du da drin bist. Jetzt kann ich beide auswählen, die Komponente zuordnen und dann die Variante wählen Ich werde in dieser Variante nur sagen, ich den Augapfel ausschalten werde Okay, und lass uns in den Prototypmodus gehen und sagen, wann dieses Ding angeklickt wird Wenn es auf Klick ist, ändern wir die zweite Variante und lassen uns all das intelligente Animationszeug verwenden Wir brauchen das Smart Animate wahrscheinlich nicht. Lass uns einfach sofort loslegen , weil es ein Häkchen ist. Lass uns ein Exemplar davon nehmen. Komm her und lass uns eine Vorschau davon sehen. Es ist klein. Lass uns hier rüber gehen und etwas eingeben. Ich kann darauf klicken. Schau, geht nicht zurück. Es ging aber an, also wurde es auf Aktualisieren geklickt. Es ist auf eine Seite vor vielen Monden zurückgekehrt. Es ist okay. Lassen Sie uns das Hauptproblem angehen: Wenn das Häkchen leuchtet, geht es nicht zurück. Ich muss nur hier reingehen und sagen, wenn du geklickt hast, geh dorthin zurück Du kannst alle die gleichen Dinge tun. Sehen Sie sich eine Vorschau an. Jetzt, weil ich nichts ausgewählt hatte. Jetzt geht es wieder ganz woanders hin. Ich glaube, dieser hier, Flow One. Was ich tun muss, ist, wenn es immer wieder passiert, hier hingehen, mit der Prototypenentwicklung beginnen Lass uns einen neuen Flow starten. Ich nenne diesen einen Desktop und ich werde von hier aus eine Vorschau anzeigen. Jetzt gehe ich zum Eingabefeld , das ein- und ausgeschaltet wird. Wie lang ist dieses Video? Schau, wir haben Havas, Dill, ich habe erwähnt, dass wir auch Hvas machen, und ein In Ordnung. Aber du verstehst es jetzt Wir haben es schon früh für eine Animation gemacht, aber jetzt haben wir es verwendet, um interaktive Komponenten zu haben , die coole interaktive Dinge tun. Ordnung, das ist es. Wir haben einiges gelernt Wir haben uns verirrt. Warum haben wir uns verirrt. Aber wir haben alle etwas gelernt. Irgendwann wirst du dich genauso verirren, aber du wirst dich daran erinnern, als Dan sich verlaufen hat. Ordnung, das ist es. Auf das nächste Video 54. Klassenprojekt 14 - Interaktive Komponente: Ordnung. Zeit für das Klassenprojekt. Wir werden einige interaktive Komponenten erstellen. Ich möchte, dass du das machst. Die Anmeldeseite mit einem kleinen Häkchen für die Schaltfläche „Remember me and sign in“ hat den Status Ha. Ich weiß, dass du Ha nicht mit einem Schaum auftragen kannst, aber du musst es mir einfach gönnen Das sind nur Rechtecke mit Schlagschatten, es passiert nichts Besonderes Schauen Sie online ein wenig nach einem Beispiel für die Anmelde-Benutzeroberfläche. Bekommen Sie ein Gefühl dafür, wie es aussehen sollte, ish? Aber wirklich, wofür wir hier sind, ist das. Ich möchte, dass die interaktiven Komponenten für beide funktionieren. Wenn Sie fertig sind, machen Sie einen Screenshot von beiden. Platzieren Sie Ihr Komponentensatz direkt daneben, sodass wir beim Hochladen sowohl das sehen können, was Sie erstellt haben , als auch die Komponentensätze, in denen diese interaktiven Komponenten enthalten In den sozialen Medien sehe ich gerne, was Sie machen. Wenn du diesen Kurs magst, ist vielleicht jetzt der Zeitpunkt, an dem du anderen Leuten erzählen kannst , wie toll die Kurse sind, und sie könnten kommen und es machen So mache ich dieses Ding immer weiter. Wenn Ihnen der Kurs gefällt und Ihnen eine Möglichkeit einfällt , ihn zu bewerben, tun Sie das bitte. Das würde mir den Tag versüßen. Aber ja, viel Spaß beim Erstellen des Klassenprojekts. Lassen Sie uns diese interaktiven Komponenten zum Laufen bringen. Super spannende Häkchen. 55. Verwenden von Abschnitten in Figma zum Organisieren von Inhalten: Hallo, alle zusammen. In diesem Video dreht sich alles um Abschnitte. Hände hoch, wer hat es noch nie benutzt oder wusste, dass es existiert. Es ist schon eine Weile da. Schauen wir uns Abschnitte an, wofür sie verwendet werden. Sie sind organisatorisch sehr nützlich, und das ist Code für Schauen wir sie uns an, denn Sie werden darauf stoßen. Um loszulegen, habe ich diese Community-Datei gefunden. Es war von Hansa Ohile. Vielen Dank Ich nehme es als Beispiel dafür, dass es eine iPad-Desktop- und Telefonversion dieser Handels-App gibt. Hier können Abschnitte sehr praktisch sein , da diese relativ gut organisiert sind. Aber was wir tun können, ist den Knopf zu drücken, den Sie noch nie gedrückt haben. Es liegt unter unserem Körper, es gedrückt zu halten , und es ist dieses hier, es verschiebt sich. Es heißt Sektion. Es tut, ist eine Kiste um Sachen zu legen. Du sagst, ich habe Boxen gemacht. Es ist einem Rahmen sehr ähnlich. Es hat nicht viel von dem Frame-Zeug, aber es hat ein paar nette organisatorische Teile. Es hat sozusagen ein neues Symbol. Es ist wie ein kleiner Ordner oder ein Abschnitt. Alles darin ist darunter, was großartig ist. Geben wir ihm einen Namen, Command oder Control R, und nehmen wir an, das wird mein Telefon sein, oder rufen wir einfach ein Handy an. Sie können einige Dinge tun, zum Beispiel werde ich die Hintergrundfarbe ändern und es organisiert einfach Ihre Materialien Du kannst es mit einem Rahmen machen. Die meisten Leute machen es einfach mit einem Rahmen. Sie können Rahmen in Abschnitte umwandeln, Rahmenabschnitte. Der Name ändert sich am oberen Rand, statt einfach nur ein einfacher alter Rahmen zu sein, er ist in einer Pille oder einer Schachtel. Sie können auf die Kanten doppelklicken, und der Bildschirm verläuft wie von selbst am Rand Ihrer Designs. Okay, mach sie fest. Sie können direkt auf einen Abschnitt verlinken. Anstatt zu versuchen, richtig zu sagen, ich möchte, dass du zu diesem Bild gehst. Du kannst sehen, lass uns zu diesem Abschnitt gehen, an dem ich gerade arbeite. Es könnte eine Version sein, es könnte mobil sein. Wenn du zu Teilen gehst, kannst du sagen, ich würde gerne, du kannst hier sehen, dass es im Bereich Mobile teilen heißt . Wenn du nichts ausgewählt hast, nichts ausgewählt hast, dann gehe zu Teilen, es ist anders. Ich werde einfach die gesamte Datei teilen. Sie können die Leute dazu bringen, genau dorthin zu gehen, wo Sie wollen. Sie können mit Ihren Abschnitten und Schichten wirklich neunzig werden und Sie können Abschnitte innerhalb von Abschnitten haben, und Schichten wirklich neunzig werden und Sie können Abschnitte innerhalb von Abschnitten haben um die Dinge weiter aufzulockern Was Sie jedoch nicht tun können, ist, dass sie der Boss sein müssen. Wenn ich einen Rahmen habe und dann versuche, einen Abschnitt darin einzufügen, schau, was über Myers passiert, Bild vier, wenn ich einen Abschnitt hineinlege, werden Sie feststellen, dass mein Abschnitt fünf, er über dem Rahmen ist Er will einfach nicht reingehen. Sektionen sind der Boss und Frames können rein. Du kannst ohne Abschnitte leben, aber du wirst sie in den Akten anderer Leute finden, du wirst fragen, was für eine Fantasie sind sie? Du weißt schon, du hast Abschnitte. Die andere Sache ist, du könntest auf die Akte von jemand anderem stoßen und sagen , Oh, das ist ein Frame Du sagst, warum kann ich nichts mit dem Rahmen machen? Warum kann ich das nicht tun? Lassen Sie uns auf Auto Out Shift E umschalten . Also los geht's Das sind Abschnitte. Wenn Sie ein gut organisierter UX-Designer sind, werden Sie Abschnitte lieben. Wenn du wie ich bist und am Ende in die Ferne Ich mache Abschnitte, wenn ich Dateien für den Entwickler oder andere Leute übergebe , nur um so zu tun , als wäre ich wirklich organisiert, aber los geht's Sektionen, Bring für manche Leute. Manche Leute lieben sie. Lass mich in den Kommentaren wissen, ob du ein Liebhaber bist oder den Zeiger nicht siehst. In Ordnung, meine Freunde, das ist es. Wir sehen uns im nächsten Video. 56. So erstellen Sie eine expandierende Suchleiste in Figma: Hallo, du. Bist du bereit für etwas Lustiges? In Ordnung, bereit? Superzappelspielzeug, superaufdringliche, tintenfischige Suchleiste, ausdehnt. Oh, ich liebe diesen. Das Coole daran ist, dass es wirklich auf allem basiert, was wir zuvor gemacht haben, und es ist eine nette kleine Zusammenfassung unserer großartigen Prototyping-Fähigkeiten. diesem Projekt werden wir gemeinsam auf viele verschiedene Dinge stoßen verschiedene Dinge Cooles Ergebnis, es ist ein wirklich cooles Projekt, alles, was wir gelernt haben , in einem kniffligen Projekt mit einem befriedigenden Ich kann nicht aufhören, auf die kleine Suchleiste zu klicken. Also fangen wir in diesem Fall von vorne an , nur um sicherzugehen , dass wir alle fertig sind und wir großartig in Prototypen sind und aufhören, nach unten zu klicken. Zuerst habe ich eine Seite erstellt. Ich habe eigentlich nur die Seite Familia gestohlen und die Suchleiste gelöscht, die wir hatten, aber oben genug Platz, sodass wir oben eine kleine Suchleiste einrichten können oben eine kleine Suchleiste einrichten Lassen Sie uns unser Symbol verwenden, Command Shift K, Control Shift K. In Ihren Übungsdateien gibt es einen Ordner mit Symbolen Bringen wir das Symbol ein. Ich werde einmal hier drüben klicken. Es ist sehr groß. Ich hole mir das Skalierungswerkzeug und stelle sicher, dass ich die übergeordnete Ebene ausgewählt habe. Rosie da. Nicht der Vektor darin, erinnerst du dich? Ich sage, du bist 24 groß. Zurück zu meinem Verschiebewerkzeug, Auswahlwerkzeug, wähle die Farben aus. Ich werde tatsächlich einen meiner Stile auswählen, 500. Kannst du dir all die coolen Dinge ansehen , die wir gerade zusammennähen Was ich auch brauche, ist das Textwerkzeug, ich werde es eintippen. Suche. Ich werde das kopieren, gehe zu Bearbeiten und ich gehe zu Eigenschaften kopieren, gehe zu Bearbeiten. Wir werden zu den Immobilien gehen. Hoppla. Grafschaft. Ich habe ein Mitglied der Text - und Suchleiste. Du musst versuchen, den Framer von außen zu erwischen, nicht den Vektor im Inneren Da gehst du hin. In Ordnung. Ich will, dass diese Dinger in einem Auto raus sind. Müssen sie es sein? Denkend im Gehirn, wahrscheinlich. Ich wähle beide aus, Shift A. Sie sind automatisch ausgeschaltet. Fügen wir etwas Weiß hinzu. Ich werde einen Schlagschatten hinzufügen. Ich werde diese Zahlen gerne durchblättern. Es wird eins, eins sein und 25 ist immer ein bisschen zu hoch. Vielleicht 20. In Ordnung, fügen wir ein paar abgerundete Ecken hinzu. Denken Sie daran, nur etwas wirklich Hohes, um sie rund zu machen, und wir werden ein bisschen Polsterung benötigen Lass uns für den Moment einfach irgendwas reinwerfen. Lass uns rundum acht gehen. Es ist also acht und acht. Es braucht mehr. Das ist okay. Wir bringen die Mechanik Laufen und dann können wir es aufräumen Also ich würde es gerne irgendwie dahin bringen, wo ich will. Ich werde Shift G drücken, um meine Guides einzuschalten . Okay? Da hast du's. Und dann auf dieser Seite will ich, dass es ganz hier drüben ist. Nett. Erneut die Taste G drücken. In Ordnung, das sollte jetzt funktionieren. Also muss es eine Komponente sein, Command Option K, Control Alt K. Es ist ein neuer Tag. Ich denke, vielleicht ist es tatsächlich eine neue Woche. Ich glaube, letzte Woche habe ich gesagt, ich würde aufhören , die Abkürzungen zu verwenden, zumindest einige davon. Ich habe vergessen, welche, also haben Sie Geduld mit mir. Wir haben es zu einer Komponente gemacht. Es muss oben gescrollt werden, zwei Varianten. Diese Top-Variante, ich möchte, dass sie nett und klein ist, hat so geschüttelt Wow. Fantastisch. Lass es uns mechanisch zum Laufen bringen. Dann können wir alle Fehler beheben. Was wir machen wollen, ist der Prototypmodus, und wir wollen sagen, dass dieser hier hingehört. Was macht er? Klicken Sie auf Zu diesem wechseln. Kein Moment, lass es uns zu Smart Animate bringen. Und was ich tun möchte, ist, dass ich möchte, dass das einfache Ein- und Ausziehen cool aussieht Cool. Und was wir brauchen, ist, dass dies eine Hauptkomponente ist, also sollten wir sie auf unsere Hauptkomponenten-Seite stellen , aber im Moment sind wir das nicht. Okay? Ich will ein Exemplar davon veröffentlichen. Es ist irgendwie nervig, eine Instanz in die Länge zu ziehen. Ich halte die Wahltaste gedrückt. Du kannst auf einem Mac die Alt-Taste gedrückt halten, um eine herauszuziehen. Ein netter kleiner Trick ist, denken Sie daran, dass wir mit Option zwei zu den Assets gelangen, anstatt sie durchzugehen und zu klicken, klicken, klicken, klicken, klicken, klicken, klicken, all das Klicken. Sie können gleich wieder hier sein. B in Dateien, wählen wir Option oder Alt zwei und geben einfach Suchen ein, was nicht funktionieren wird , weil es Frame 32 heißt. In Ordnung. Also nenne ich das eine Suche. Das Ganze würde viel reibungsloser funktionieren , wenn es Suche genannt würde Ich bin hier drüben, ich finde es toll, das Assets-Bedienfeld zu haben, optional die zweite Rolle, und dann fange ich an, Suche einzugeben, und da ist es oben Ich sage, du gehst hier rüber, lass es uns versuchen. Wir ignorieren den rumhängenden Text. Klicken wir auf Sie, sehen wir uns eine Vorschau an und alles wird funktionieren Sh, es hat sich erweitert. Kannst du es sehen? Bin zur Auffrischung da rausgegangen, es funktioniert. Ein paar Dinge, die wir tun müssen. Wir wollen, dass es losgeht wenn du es hier hast, es wird funktionieren. Wenn du es also von dieser Seite haben wolltest, bist du größtenteils fertig. Also ich will Schmerzen haben und ich will, dass meine hier drüben sind. Ich bin versucht, hierher zu gehen und zu sagen: A, ich weiß nicht, was ich tun soll, Design, ich werde sagen, deine Einschränkung nach rechts Vielleicht muss dieser nach rechts eingeschränkt werden. Ich weiß nicht, und du versuchst es und es funktioniert nicht, weil du sagst, du sagst, es ist die eigentliche Instanz hier. Denken Sie daran, dass die Beschränkung nicht auf die eigentliche Komponente angewendet wird. Es muss die Instanz sein. Sie können sehen, dass es von links geht und er das als Referenz benutzt und er geht in diese Richtung. Ich würde sagen, du gehst nach rechts. Geben wir ihm einen G. Duke. Ah. Wir machen es. Es geht nicht zurück, aber wir wissen, wie man das repariert. Okay, lass uns zurückgehen. Also, es läuft, also habe ich einen Prototypmodus, und wir werden sagen. Der ganze Button ist da. Aber wenn du fertig bist, schnapp dir nicht die Seite. Schnapp dir die kleinen Punkte. Manchmal sind sie schwer zu finden, eh, ich gehe dahin zurück und alles sieht gut aus. Klug, ja. Denk an alles, was ich durchgemacht habe. Hoffentlich sollten wir jetzt in der Lage sein, umzuschalten , ja und ja Ich liebe diese Bewegung hin und her. Vielleicht ein bisschen schnell. Wie dem auch sei, wir werden das jetzt ändern. Wir müssen die Suche loswerden. Okay? Sie können es auf zwei Arten tun. Ich habe also Glück. Meine Suche hängt hier irgendwie daneben. Also ich kann hier drüben sagen, du hast es unter Design, du bist abgeschnitten M sind Sie beim Ausschneiden, bitte halten Sie den Inhalt des Clips fest Da ist es. Okay? Und hoffentlich geben wir es jetzt los. Es ist weg. Es sieht ein bisschen komisch aus. Nein, tut es nicht. Rutscht raus. Die andere Sache, dass meine einfach sehr oft funktioniert, wenn ich das mache , die Dinge passen nicht zusammen. Dieser Typ wird in einem seltsamen Kreis herumgeschubst . Er hat nicht ganz recht. Ich gehe davon aus, dass deiner derselbe ist, kaputt. Was Sie tun können, wenn Sie die Lupe vergrößern, ist ein bisschen komisch, oder Sie können die Suche trotzdem sehen, obwohl sie abgeschnitten ist. Ich werde sagen, das übergeordnete Bild hier drüben auf der Komponente Du kannst sagen, ich möchte, dass deine Polsterung ein bisschen anders ist. Also werde ich es in alle vier Teile aufteilen, damit ich alle vier sehen kann und vielleicht brauchst du nur ein bisschen mehr oben, oder vielleicht ein bisschen mehr rechts hier Sie können darauf doppelklicken. Sie befinden sich im Entwurfsmodus, aber Sie können einfach darauf doppelklicken und sagen , ich hätte gerne , dass es neun sind. Nun, Sie können die Pfeiltaste nach oben verwenden. Eintreten? Was habe ich gemacht? Ich habe die Lücke gemacht. Ja, bitteschön. Die Lücke ist der Raum zwischen dir und der Suchleiste. Wenn ich das mache, wirst du anfangen, es zu sehen. Das ist ein weiterer Tipp. Ich war nicht das , was ich versucht habe zu tun. Wenn ich rauf gehe, siehst du, ich kann es einfach so drücken, dass es raus ist aus dem Kreis. Damit sind es neun. Jetzt kann ich raufgehen und es einfach hinbringen, wo du willst. Möglicherweise müssen Sie die Größe Ihrer Lupe ändern. Sie können Ihre gesamte Suchleiste vergrößern. Es gibt viele Möglichkeiten, damit umzugehen. Die Mechaniker sind jetzt da. Lassen Sie uns noch einmal eine Vorschau davon ansehen, und ich weiß, dass ich noch eine weitere Sache machen möchte . Kannst du das hier sehen? Ich habe es einfach zufällig oben rechts platziert. Aber wenn es herausfällt, siehst du es zu weit hierher, nicht weit dorthin. Es ist schwer, es in eine Reihe zu bringen, weil Sie sehen, es ist wirklich klein. Wie machst du das? Sie können viele Tests durchführen. Was Sie tun können, ist ein kleiner Trick: Was mit einer Variante passiert, ist, wenn sie ausgewählt Die Standardeinstellung ist diese oberste. Man kann sagen, ich will nicht, dass es die Standardeinstellung ist. Ich möchte der zweite sein und dann kannst du es anordnen oder Shift G, du kannst es gut anordnen, Shift G nochmal, um es auszuschalten und du kannst sagen, ich habe dich nur für eine kurze Sekunde benutzt, geh zurück zu dem. Jetzt, ok Fantastisch. Nun, du wirst auch feststellen, wenn du da reinblinzelst, kommt es zu einer seltsamen Pixelierung, ich glaube, es ist der Ich weiß nicht, es ist schon ewig da und scheint nicht zu Es ist ein Prototyp. Es ist Ihnen vielleicht erst jetzt aufgefallen, wo ich es bemerkt habe , oder? Du sagst also, okay. Also ich liebe es. Schau es dir an. Es ist cool. Halte durch. Ich glaube, ich habe eine Möglichkeit, es loszuwerden. Du wartest dort. Nein, ich kann es nicht herausfinden. Ignoriere die Pixelisierung. Wenn du es nicht weißt, lass es mich in den Kommentaren wissen, ob du eine Problemumgehung hast Vielleicht ist es einfach repariert, aber das ist jetzt seit ungefähr vier Jahren so , drei Jahren Wenn du es machst, wie in der App, okay oder auf einer Website, kannst du das absolut machen und die Pixelisierung wird dir nicht auffallen Möglicherweise müssen Sie Ihren Unglauben für eine Weile aussetzen Ihren Unglauben für eine Ich kann nicht aufhören, darauf zu klicken. Wir sollten besser weitermachen , weil wir das abnutzen. Ich liebe die Idee einer Suchfunktion, die nur sehr wenig Platz auf dem Bildschirm verwendet . Es ist sehr klar, was es ist. Wenn Sie darauf klicken, wird es zu einem schönen großen Feld erweitert . Oh, das gefällt mir. Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. 57. Klassenprojekt 15 - Erweitern der Suchleiste: Okay, Zeit für das Klassenprojekt, ich möchte, dass du deine eigene erweiterbare Suchleiste mit all den Schwierigkeiten , die sie mit sich bringt, erstellst. Es ist knifflig, es verbindet viele verschiedene Dinge. Probieren Sie es aus. Ich möchte, dass du das machst. In der Vergangenheit habe ich dir gesagt, du sollst die Arbeit von zwei anderen Leuten kommentieren. Ich möchte, dass du zu den Kommentaren gehst und einfach nachschaust , ob jemand Hilfe braucht. Schau, ob du zwei anderen Leuten da unten helfen kannst, dann sind wir alle super hilfreich. Wenn du es falsch verstehst, gehöre zu den Leuten, die da unten kommentieren und sagen: Ich weiß nicht mehr weiter und erkläre, warum. Teilen Sie auch einen Link zu Ihrem Projekt, genau wie wenn wir Projekte teilen, damit andere sie überprüfen können. Sie können Projekte teilen, die sich die Leute ansehen können, sich den Link schnappen und Sie können ihn auch in die Kommentare schreiben, damit die Leute Ihr Projekt tatsächlich entziffern und sich ein wenig ansehen können Ihr Projekt tatsächlich entziffern und sich ein wenig ansehen Wenn du deins zum Laufen gebracht hast, stelle sicher, dass du einigen dieser Leute hilfst Ich komme nicht an jeden ran. Ich erhalte buchstäblich Hunderttausende von Kommentaren jedes Jahr Hunderttausende von Kommentaren, aber ich gebe mein Bestes. Ich würde mich über deine Hilfe freuen. Erstellen Sie also eine expandierende Suchleiste. Ich würde gerne eine Animation davon sehen. Das Video wurde zu den Klassenprojekten hochgeladen. Andernfalls können Sie einen Screenshot Ihres Komponentensatzes machen und wir sagen einfach, dass Sie es geschafft haben. Wenn Sie das Video zum Laufen bringen, würde ich es gerne in den sozialen Medien sehen. Ich weiß nicht, was damit ist. Ich liebe diese kleinen, hüpfenden Suchleisten und sorge dafür, dass Sie jedem mitteilen, wo Sie das tun Dans Kurs. In Ordnung. Viel Spaß beim Erstellen der Suchleiste. Es wird ein bisschen frustrierend sein. Viel Glück 58. Sei vorsichtig, was du in Figma erstellst: Hallo, alle zusammen. Dieses Video ist eine Warnung. Sei vorsichtig, was du erschaffst. Redakteur, kannst du so ein- und auszoomen ? Vorsicht e. Also, wovon spricht er? Ich spreche von Prototypen und Animationen. Also Animationen, Dinge, die einfach durchspielen, okay? Du machst wirklich nichts mit ihnen. Und dann Prototypen, okay, denen wir die letzten paar Videos machen mit denen wir die letzten paar Videos machen, das ist wie Interaktivität Und die Warnung ist nur dass man manchmal Dinge entwerfen kann unmöglich zu bauen sind oder zumindest sehr zeitaufwändig, was bedeutet, dass sie sehr teuer Manchmal liegt es außerhalb der Fähigkeiten Ihres Ingenieurs oder Entwicklers oder Ihrer eigenen Fähigkeiten, wenn Sie es herstellen wollen. Achten Sie also darauf, nicht etwas zu kreieren, es an den Kunden zu verkaufen und dann nicht, Sie wissen schon, und dann wird es entweder gestrichen und es ist etwas, das sie lieben, oder dass es etwas kostet Weißt du, manchmal können einige dieser Interaktionen und, du weißt schon, Spezialfähigkeiten dazu führen, dass sich der Preis für den Job oder die Zeit verdoppelt Also sei dir dessen bewusst. Ein guter Weg. Es gibt Zeiten, in denen du all das Zeug brauchst. Zum Beispiel, wenn man einem Kunden etwas anbietet, braucht man manchmal all die Umleitungen , damit es sich anfühlt und, du weißt schon, das Konzept wirklich verkaufen Es könnte für Ihr Portfolio sein, übertreiben Sie Es könnte nur sein, um den Chef zu beeindrucken, okay? Es gibt Zeiten, in denen du das Level irgendwie erhöhen musst . Aber es gibt viele Zeiten, in denen wir tatsächlich anfangen, etwas zu tun und ständig Sachen hinzuzufügen, und das ist so, und ich habe die Zeit, die ich für das Bauen gebraucht habe, verdoppelt , ohne echten Nettogewinn, wenn es um Benutzertests geht , weil das ist, was wir wirklich tun wollen. Wir wollen schnell etwas erstellen, es den Stakeholdern zugänglich machen, in die Hände unserer Nutzer kommen und Feedback einholen. Und wissen Sie, Figma ist Rapid Prototyping. Ich bin mir nicht sicher, warum ich das getan habe Es ist Rapid Prototyping. , sind nicht schnell Manche Dinge, die wir hier gebaut haben Sei einfach vorsichtig. Schauen Sie sich den Begriff Lean UX an, okay? Es ist einfach so, weißt du, manchmal kann man sich ein bisschen in den Details verlieren. Und manchmal ist alles, was es wirklich braucht, etwas superschnelles, übersichtliches und skizzenhaftes, um dorthin zu gelangen, wo man hin muss, und iterieren zu können . Das ist es also Manchmal braucht man nicht das ganze Level. Manchmal braucht man nur eine schnelle Sache, und manchmal kann man Dinge bauen, deren Erstellung für den Entwickler oder Ingenieur wirklich schwierig sein kann . Es kann möglicherweise nicht gebaut werden. Eine andere Sache ist die Animation, die wir in einem früheren Kapitel behandelt Wir werden ein bisschen mehr machen. Animation Figma, ist sie nicht dafür gemacht, okay? Du kannst ein paar einfache Animationen machen. Wir machen es, weil es Spaß macht und uns hilft, die Tools zu verderben und richtig gut Aber wenn ich Animationen für etwas mache, etwas, das auf der Homepage oder dem Willkommensbild oder dem Heldenbild abgespielt wird, möchte ich, dass eine Animation läuft, ich mache das in einem anderen Programm After Effects hat ein Plugin namens Body Moving, auf das wir bei Lottie-Animationen eingehen Und du hebst es einfach auf und wirfst es in Figma Es ist nicht wirklich ein Animationswerkzeug. Es gibt Plugins , die dir bei Animationen und Timeline-Animationen helfen , okay? Wisse einfach, ja, du kannst es an anderen Orten machen und es einfach wegwerfen Wenn es um Prototyping geht , ist Figma eine Spezialität. Okay. Also war es wirklich gut in interaktiven Prototypen , okay, und das ziemlich schnell. Aber es gibt auch Grenzen, und wenn Sie etwas ganz Besonderes machen wollen, wie, ich weiß, fotorealistisch, bin ich mir nicht sicher, wann Sie diese verwenden sollen Aber etwas, das wie eine echte App aussieht und sich anfühlt, müssen Sie vielleicht mit etwas wie ProtoPie zum nächsten Schritt übergehen , ist Wir werden später darauf eingehen. Aber ja, bitteschön. Entwirf nichts , was nicht gebaut werden kann. Das ist die Warnung, die ich hier rausbringen wollte. Ordnung, das ist es. Wir sehen uns im nächsten Video 59. Ebene Zen in Figma: Hallo, meine Figma. Es ist Layer Zent Ich werde Freude daran bereiten, mit Ebenen zu arbeiten. Große verwirrende Dokumente bereiten Ihnen Kopfschmerzen. Mach dir keine Sorgen. Zenhem. Nun, Fehler Dieses Video wird dir Freude bereiten oder es wird dich langweilen, bis Tess Es macht mir Freude, also begleite mich auf die Reise. Lass uns reinspringen. Ordnung. Die erste ist die Enter-Taste oder die Enter-Taste, wenn Sie auf einem Mac sind Ich benutze es ständig, besonders für Tasten. Sie können auf die Schaltfläche klicken. Anstatt entweder zu doppelklicken, doppelklicken, doppelklicken und den Text abrufen Du kannst. Wählen Sie auf der Schaltfläche. Drücken Sie die Eingabetaste, und es taucht einfach in die Schaltfläche ein und der Text ist nun ausgewählt. Sie können erneut die Eingabetaste drücken, und der Text wird sogar hervorgehoben. Geh. Ist das nützlich? Ich weiß es nicht die ganze Zeit. Gib Enter ein, ändere mich. Flieht, um rauszukommen. Ein paar Mal am Stück alles. Ist das nützlich? Sie können einfach den Befehl ausführen und klicken, und schon tauchen Sie in komplexere Dinge ein. Die Eingabetaste funktioniert dafür nicht , weil es viele Dinge gibt. Gehen wir zu meinen Schichten. Sie können sehen, dass in meinem Navi eine Menge Dinge vor sich gehen, also ist es vielleicht einfacher, einfach die Befehlstaste oder die Strg-Taste gedrückt zu halten und darauf zu klicken. Dann kannst du die Eingabetaste drücken und es ändern. Oh, die Enter-Taste. Warum ist es so gut? Oh, es wird besser. Manchmal versuche ich, komplexe Dinge zu finden, Dinge, die zu anderen Dingen hinzukommen. Lass uns diesen Text lesen. Dieser Text hier befindet sich innerhalb der leicht scrollenden horizontalen Schriftrolle, innerhalb einer Karte, die sich in einem automatischen Layout befindet, das sich in einem anderen blauen Feld befindet. Es ist also eine Menge los. Was ich wirklich mag, ist die Befehls- oder Steuerungstaste, MacOPC gedrückt zu halten und einfach mit der rechten Jeder hat Rechtsklicks, aber sieh dir das an. Sie können die Hierarchie wählen. Schauen Sie, meinten Sie die Bewertung wie im Frame oder meinten Sie die Bewertungsseite? Vielleicht schaust du dir die Kaufrezension an. Vielleicht ist es das Tag, in dem es steht , oder der Text , der empfohlen wird. Ich mag das, weil du das einfach brauchst, es ist manchmal schwer zu gehen, richtig, nicht du, nicht du, nicht du als Backup. Du kannst einfach Befehl oder Ctrl gedrückt halten und Klick-Kram schreiben und sagen, ich will ihre Lippen und ich will den Rahmen, in dem es ist. Du willst das nicht ganz unten haben. Du denkst langweilig, es wird noch langweiliger werden, aber ich liebe es. Es gibt ein bisschen Designer-OCDME und aus irgendeinem Grund gibt es mir das Schau, wie viel hier drin los ist. Was ich wirklich mag, ist die Option. Lass dir das auf deinen Unterarm tätowieren oder Alt Al ändert Mac oder BC nicht. Das Tattoo wird nicht funktionieren Ich liebe es einfach. Schau, ich räume einfach alles auf Alles ist zusammengebrochen und Zen ist wiederhergestellt. Dann kannst du in das Feld gehen, das du willst, und es dir ansehen. Ich werde diesen kombinieren. Sie können auf diese Chevrons klicken und sehen, sagen wir diesen hier. Was ist da drauf Was ist da drin? Was ist drin, dass du ewig damit verbringen kannst, alles durchzugehen und herauszufinden, dass die ganze OCD vorbei ist Ich muss hier alles finden. Ich muss all diese Chevrons erweitern. Was Sie tun können, ist einfach die Befehls- oder Strg-Taste gedrückt zu halten und auf den Chevron zu klicken und er wird einfach angezeigt. Ordnung, vielleicht nicht sich selbst bloßzustellen, aber alle seine inneren Seiten mit anderen teilen Es ist irgendwie mörderisch. In Ordnung . Das macht das. Halten Sie die Befehlstaste gedrückt, halten Sie die Strg-Taste gedrückt und klicken Sie einfach auf den Chevron Eigentlich musst du es zuerst auswählen und dann machen. Nun, gutes Argument. Also du kannst hier sehen, dass es überhaupt nicht ausgewählt wurde, also kann ich alles sehen Auch hier können Sie nichts auswählen lassen. Und denk an das Tattoo, Option hat alles aufgeräumt Nett. Die andere Sache ist, wenn du hier drüben bist, benutzen manche Leute nicht einmal Seiten. Was Sie tun können, ist, dass Sie sehen können, dass die Seiten hier nebeneinander angeordnet werden können. Du benutzt sie genauso wie ich nie. Ich möchte mehr Platz für meine Schichten. Die andere Möglichkeit ist, sagen wir, alles auf Alles auswählen zu erweitern, den Kamankey gedrückt zu halten und auf eines davon zu klicken, und wir werden alles öffnen. Manchmal werden sie jedoch ziemlich lang. Keiner von mir ist sehr. Oh, da sind welche. Kannst du sehen, es wird immer länger und länger und länger, du kannst es einfach größer ziehen, du hast ein bisschen mehr Platz. Du hast vielleicht einen wirklich großen Bildschirm und freust dich, hier ein schönes großes Fenster zu haben . Das Gleiche gilt für die Seiten. Wenn Sie viele Seiten verwenden, können Sie einfach so vorgehen und sagen, ich brauche nur mehr Seiten, weil ich diese riesige Leinwand habe. Sie können darauf doppelklicken und es springt zurück zur kleinsten Version. All das ist es. Das sind Schichten drin. Jetzt bleib. Lass es mich in den Kommentaren wissen. Wenn da einer drin ist, sagst du, das ist es. Es ist der eine. Lassen Sie mich auch wissen, wenn ich diesen Kurs neu mache, Dan, dieser Kurs benötigt keine Videoebenen Ich könnte es rausschneiden. Ich werde es wahrscheinlich nicht tun. Macht mich glücklich. Das ist es. Ich werde dich im nächsten Video sehen. 60. Erweiterte Suche in Figma: Wir führen eine erweiterte Suche durch, nicht so fortgeschritten, aber sehr hilfreich, vor allem, wenn Sie sich ihrer Leistungsfähigkeit nicht bewusst Lassen Sie uns einsteigen und etwas suchen. Okay, also finde einen Ersatz. Du wirst in den Akten sein und nicht viele Leute wissen, dass dort ein kleines Suchsymbol ist. Ich kann etwas eintippen. Nehmen wir an, ich muss. Ich muss einige Textänderungen vornehmen, und ich brauche viele davon. Das Wort, was ich kollektiv habe. Groove Collective ist das ganze Dokument. Das Einzige, was ich noch beachten sollte, ist, Cs es eingefärbt hat, dass das die ganze Zeit gemacht wird. Hat mich ausgeflippt, als ich es das erste Mal gesehen habe. Ich dachte, was ist damit passiert? Welche Stile galten dafür? Es ist keine Uhr bei der Suche aus, es wird wieder normal. Schalten Sie die Suche wieder ein, offensichtlich ist Suchen und Ersetzen wirklich nützlich. Ich gebe Groove Collective ein und wir haben herausgefunden, dass es eigentlich Groove Code Dot heißen soll. Ich finde das nützlich, wenn Sie zur Hälfte „ Anmelden“ oder „Anmelden“ verwenden. Sie müssen konsistent sein, also müssen Sie alle Instanzen in einem großen Dokument suchen und sagen: Ja, ich möchte, dass Sie sie alle ändern und zwar auf einmal. Nett. Jetzt ist es überall Groove Co Replace hat nur ein paar Dinge, die Sie tun können. Suchen Sie jedoch, lassen Sie uns ein Wort „Button“ eingeben. Sie können alles finden , was eine Schaltfläche hat, aber Sie können sehen, dass es viel zu viele gibt. Du sagst, nein, ich will alle Instanzen. Das Coole an Find ist, dass du hier reingehen und sagen kannst, ich will dir nur die Beispiele dieser Typen zeigen. Hier sind alle meine Knöpfe. Wirklich praktisch für ein großes Dokument. Du musst etwas ändern. Du musst nur herausfinden, wo das alles ist. Stellen Sie sicher, dass Sie die Filterung ausschalten und diese mit einem kleinen X ausschalten, wenn Sie mit der Suche nach Inhalten fertig sind. Ganz einfach. Auf das nächste Video. 61. Manuelles Massenumbenennen von Ebenen mit erweiterten Tricks in Figma: Hallo, alle zusammen. Ich werde versuchen, dich mit all meinen Codierungen zu beeindrucken. Aber wirklich, ich habe gerade auf diese Knöpfe geklickt. Es ist eine großartige Möglichkeit, viele Objekte gleichzeitig umzubenennen. Sie müssen nicht wissen, wie man programmiert. Du musst nur wissen, wie man Knöpfe anklickt und schon passiert Magie. Lass uns reinspringen. In Ordnung, also gehe ich zu meiner Interaktionsseite , sie ist etwas kleiner. Wir werden das früher erfahren, aber du kannst mithilfe von KI umbenennen, sagen wir die Warenkorbseite hier. Ich würde sagen, klicken Sie mit der rechten Maustaste und ich möchte, dass Sie diese Funktion zum Umbenennen von Ebenen und KI verwenden diese Funktion zum Umbenennen von Ebenen und und einfach darauf klicken und die Magie beobachten. Wunderschön. Eines der großen Dinge, die mir gefallen haben, war, dass ich den Namen verwendet habe. Okay? Da steht, war es Groove Collective für den Titel hier oben. Aber sobald ich die Umbenennung gemacht habe, hat es Künstlername genannt und du sagst, oh, du bist gut Das wird sich im Laufe der Zeit ändern. Das können Sie hier sehen, Bild 23. Das hat sich nicht geändert. Also, was du tun kannst, ist, diesen Typen umzubenennen, Laos umzubenennen und es könnte einfach sagen, hey, es gibt nichts, was umbenannt werden müsste , mach es trotzdem Und manchmal macht er es einfach richtig. Und du sagst, du gehst her, Jickbton. In Ordnung. Aber jetzt wollen wir etwas manuelleres machen weil es gut ist und dich vielleicht näher an das bringt, wo du hin musst, aber manchmal müssen wir es einfach automatisch machen. Ich habe ein paar Icons. Wenn du danach fragst , sie sind super cool. Sie sind von Icon Eight und sind sie auch. Drei D plus die Sina. Ich konnte sie nie anders als im Unterricht benutzen , aber sie sehen so cool aus. Ich wähle sie alle aus, bewege den Mauszeiger darüber. Lass uns aufräumen Aus irgendeinem Grund möchte Tidyup sie nicht horizontal erledigen. Eigentlich vertikal, nicht wahr? Sie können die optionale Roll-V-Taste gedrückt halten. Das ist praktisch, Option V oder H, horizontal, vertikal. Ich möchte nicht, dass sie horizontal ausgerichtet oder rückgängig gemacht werden. Es ist nur eine Abkürzung für diese beiden. Also, wenn du mit der Maus fährst und du schwebst, benutze ich diese ziemlich oft. Richtig, wir haben unsere Icons, und Sie sehen, sie kommen direkt von Icon 8 namens Trash Share und von Bookmark, was Macht es schwierig, den einen zu finden. Ich nenne sie alle Symbol, und ich kann sie anklicken und einfach eingeben. Aber bei einem Hit Escape will ich das nicht. Aber ich sage euch, wenn ich auf einen von ihnen herumgepeitscht bin und dann kommandiert, ist das eine Kannst du sehen, dass es im LaaS-Menü hervorgehoben ist , damit ich Sie haben mehr als eine ausgewählt und drücken genau die gleiche Taste, den gleichen Befehl oder die gleiche Steuerung, dann geht es zu diesem Ding Das ist wie der Bulk-Renamer. Das Coole daran ist, dass du sagen kannst, ich möchte eigentlich zwei umbenennen, was? Das Wort „Ikone“. Du kannst sehen, was es macht. Es nennt es Icon. Ich möchte ihm eine Zahl geben, aufsteigend, absteigend, also möchte ich Symbol eins, zwei, drei wählen Kannst du sehen, was dort gemacht wurde? Das ist ein Ausdruck aus irgendeinem Grund Dlo-Zeichen N ist eine Zahl, und N ist eine andere Zahl. Es gibt also zwei davon. Sie könnten einen von ihnen loswerden. Vielleicht möchtest du es Symbol eins, zwei, drei nennen . Schau, Computerhacker Ich weiß nicht wirklich, wie diese Flügel funktionieren. Ich verwende sie ein bisschen im Design. Sie haben sogenannte Grep-Stile. Es ist sehr ähnlich. Wenn Sie etwas Kompliziertes haben, können Sie zu einem Entwickler gehen und fragen. Wenn Sie selbst ein Entwickler sind, gibt es einige Dokumentationen zu Figma , wie man es zum Laufen bringt. Wir werden es einfach halten Was ich tun möchte, ist, das Wort Icon hinzuzufügen. Ich möchte eine Zahl hinzufügen, nur eine davon, nicht zwei. Nicht vier oder fünf, nur eins. Dann würde ich gerne ein Leerzeichen, einen Bindestrich und ein Leerzeichen einfügen ein Leerzeichen, einen Bindestrich und ein Leerzeichen Das ist absolut nicht unbedingt nur die Art wie ich Dinge benenne, und ich möchte den aktuellen Namen verwenden Aus irgendeinem Grund ist das Dollarzeichen und der Code für die Verwendung des vorhandenen Namens. Cool. Ich habe sie aus dem Papierkorb umbenannt und dem Symbol mit einem Nummerierungssystem ein Lesezeichen hinzugefügt und dann einfach ihren aktuellen Namen verwendet . Umbenennen, tut es Cool. Falls du dich an die Suche aus dem letzten Video erinnern kannst, war das langweilig. Du kannst es durchgehen und Sachen finden. Okay, finde all deine Instanzen von Buttons, diese , diese, und es gibt nur zwei auf dieser speziellen Seite. Aber stell dir vor, du hättest viel mehr und dann drückst du deinen Befehl oder die Steuerung. Okay, du kannst sagen, ich würde eigentlich gerne den aktuellen Namen verwenden. Ich tue es nicht. Ich will nur, dass diese Leute die Primarvereinigung anrufen. Das könnte reichen oder Sie möchten primär und Sie möchten die Nummerierung verwenden Okay? Und sie wird sie umbenennen. In Ordnung, es gibt eine Massenumbenennung. Sie können die KI-Funktionen verwenden, aber manchmal müssen Sie nur manuelle Funktionen verwenden und haben keine Angst vor dem Code Okay? Im Grunde genommen sind das drei, die du verwenden wirst und schau dir einfach die Vorschau hier an. Was möchtest du machen? Stornieren. In Ordnung. Hoffe das war hilfreich. Wir sind Layermaster. Eigentlich mache ich es noch einmal, nur um langsam zu sein. Du kannst weitermachen. Wenn du den Dreh raus hast. Ich werde rückgängig machen, rückgängig machen, rückgängig machen, bis diese Typen wieder normale Sachen sind. Komm schon, da haben wir's. Nur noch eins. Ich weiß, im Unterricht ist manchmal ein weiterer Durchgang nützlich. Ich habe euch also, mehr als einen ausgewählt. Drücken Sie Command oder Control R, um sie umzubenennen. Und ich würde sagen, ich möchte, dass du sie Symbole mit einer Zahl nennst . Dann setze ich es ohne triftigen Grund in ein Leerzeichen in einem Bindestrich weil mir das Aussehen gefällt, und dann sage ich, verwende ihre aktuellen Namen Klicken Sie auf Umbenennen und alle sind fertig. Da hast du's. Glatt. Möglicherweise haben eine Reihe von Karten mit Funktionen. Was auch immer Sie gleichzeitig umbenennen müssen, wählen Sie mehrere aus, Befehl oder Strg R. Alles klar. Das ist es. Wir sehen uns im nächsten Video. 62. Finden von Komponenten mit KI: Du, wir werden etwas ganz Tolles machen . Ich liebe dieses Video Es heißt Bauteile mit KI finden, was lahm klingt, aber Mann, es ist cool Viele gute Abkürzungen der Haupt-Ven ist so, ich brauche ein Ticket Gib mir solche aus der Community, die so aussehen, und kannst sie einfach herausziehen und benutzen . Bereit zum Losfahren. Lass uns reinspringen. In Ordnung. Wir haben uns unser Vermögen aus dem Asset-Panel geholt. Dieses Asset-Panel macht es nervig , zwischen diesen beiden zu wechseln Auf Mac und BC gibt es eine Tastenkombination Shift I, in diesem kleinen Fenster hier in Ihrem Assets-Bedienfeld suchen Sie in diesem kleinen Fenster hier in Ihrem Assets-Bedienfeld suchen können. Du kannst Sachen eintippen. Nehmen wir an, ich brauche ein Ticket. Ich weiß, dass ich ein Ticketsymbol habe. Es hat es gefunden. Ich kann viel einfacher. Schicht I. Es springt hier zu dieser Option und geht dann zu den Vermögenswerten. Es ist nur eine andere Art, zur selben Sache zu gelangen, aber Schicht I bringt Sie automatisch dorthin. Schicht I. Die andere coole Sache daran ist , sagen wir , dass das Ticket nicht sehr tickig ist. Die Leute sind sich nicht sicher , ob das ein Ticket ist. Also können wir ein Ticket eingeben. Was mir daran wirklich gefällt, ist , dass den Rest meines Dokuments ansehe. Ich habe nur eines gefunden: Sie können in die Community gehen und dort alle Community-Dateien durchsehen und darin Tickets finden. Also diesen hier von Tamsburg kann ich rausziehen. Ich kann einfach anfangen, den zu benutzen Das Einzige, worauf man achten muss, ist, dass es als Hauptbestandteil durchgekommen ist und sofort einsatzbereit ist. Manchmal kamen sie als Beispiele heraus. Überprüfen Sie also einfach, ob es sich um eine Instanz handelt. Sie müssen nur mit der rechten Maustaste darauf klicken und Trennen sagen und dann können Sie es zu Ihrer eigenen Hauptkomponente machen Schicht I. Nehmen wir an, wir machen noch einmal ein Ticket und nehmen wir an, Ihnen gefällt das Ticket Du bist so, nun ja, so. Ich frage mich, ob es wirklich etwas unter Community gibt. Sagen wir, du magst diesen, oder du fragst dich, was der Rest davon ist. Sie können es auswählen, Sie können „offen“ und „Gemeinschaft“ sagen und es wird zu der Datei gehen, aus der es es gestohlen hat, und stehlen ist nicht das richtige Wort Das ist die Datei. Ich kann sie mir ansehen und die Community-Datei öffnen , aus der sie ausgeliehen wurde Schau mal, lass uns unsere Sweet Find-Funktion verwenden. Kreuzen Sie es an. Nichts auf dieser Seite. Es sind alles Seiten. Drücken Sie die zweite Taste, um es zu vergrößern , weil es dort versteckt war, aber jetzt können Sie alle anderen sehen, die Sie verwenden könnten. Aber lassen wir uns nicht verwirren. Du kannst nachschauen, wo es hergekommen ist, aber ich mag es wirklich. Sag, du brauchst, okay, ich muss einen Share-Button machen. Shift I, tippe Share ein. Ich schaue nach, was du aktuell in deinen Bibliotheken hast , was du gemacht hast, aber auch in unserer Community. Du kannst es dir ansehen. Du wirst sagen, was sieht aus wie sie? Der gefällt mir. Ziehe es heraus und fange an, es zu benutzen. Denken Sie daran, wählen Sie es aus. Überprüfe es einfach noch einmal. Was ist das für ein. Sie sehen hier, das ist eine Instanz, nicht die eigentliche Hauptkomponente. Ich könnte mit der rechten Maustaste darauf klicken und zur Hauptkomponente gehen und wir werden die Datei öffnen, aus der ich sie bekommen habe, aber ich möchte sie nur trennen Ich werde es zu einer Hauptkomponente für mich machen . Oh, es wird besser. Das ist eine visuelle Suche. Manchmal sagst du einfach, ich möchte, dass du feststellst, dass das schwierig ist. Sagen wir die Person. Du bist wie, A, diese Person hier. Ich möchte einen Ersatz finden. Mach, was Dan gesagt hat, Schicht D, tippe Leute ein. Nein. Es ist eine Person. Es durchsucht meine Sachen. Ich habe nur einen. Lass uns zur Community gehen, Mensch. So wie ich es wollte. Mann. Man kann ewig damit verbringen, es ist nicht das, was ich wollte. Das ist echt cool. Also werde ich es schließen. Wenn es ausgewählt ist, kann ich das hier sagen. Benutze die KI, um eine visuelle Suche nach dem Objekt durchzuführen, das ich ausgewählt habe. Es hat es geschafft. Wie heißt es eigentlich? Steht nicht wirklich, aber es hat mir viele verschiedene Optionen aufgezeigt. Man kann sagen, dass ich den wirklich mag. Nein, ich mag diesen. Sie können es herausziehen und einfach anfangen, es zu benutzen. Bereit zum Rollen. Okay? Da sind also ein paar Dinge. Verschiebt den großen, öffnet öffnet sich Ihr Assets-Ordner. Du kannst Sachen eintippen. Taste, Shifte, Sachen eintippen Sie nicht ein und schauen Sie sich die Sachen an, die Sie vielleicht nur in Ihrer Bibliothek haben , oder gehen Sie in die Community Mal sehen, welche anderen Knöpfe noch gemacht werden . So viele Knöpfe. Wenn dir das nicht einfällt oder du nur eine visuelle Anleitung dafür brauchst , klickst du einfach darauf und sagst dasselbe, Shifty Führe bitte eine visuelle Suche durch. Schauen Sie sich meine Dokumente an, aber schauen Sie sich auch an, was Sie in der Community haben . Viele verschiedene Herzen. Ordnung. Das ist es. Viel Spaß beim Finden von Komponenten in der süßen neuen Abkürzung Shift I. 63. Instanzaustausch innerhalb einer Komponente: Hallo. In diesem Video werden wir einen Instanztausch durchführen. Das bedeutet, dass ich eine Schaltfläche haben und einfach aus verschiedenen Instanzen auswählen kann , die sich darin befinden. Ich kann schnell gehen, ich brauche das Plus. Erledigt. Dies unterscheidet sich von der Erstellung einer Schaltfläche , auf der alle verschiedenen Symbole aufgelistet sind. Wir können nur eine Hauptkomponente haben und ihr sagen: Hey, dieser kleine Bereich hier, du kannst diese verschiedenen Symbole verwenden , wenn du willst ohne so spezifisch sein zu müssen. Das wird bitterer. Vier ist nicht schlecht für die Varianz. Aber wenn du so etwas bekommst, brauchst du ein Eingabefeld, und es muss so viele verschiedene Variationen haben, einige von ihnen haben eine Bezeichnung, andere nicht, einige von ihnen haben Text-Dropdowns Manche von ihnen haben das Ding mit dem Augapfel. Es gibt so viele verschiedene Varianten, dass Sie am Ende eine Datei wie diese nur für ein einfaches Formular Wir werden also lernen, wie man einen Instanztausch durchführt. Wir können also nur ein Feld oder in diesem Fall eine Schaltfläche haben. Wir beginnen mit einer Schaltfläche, weil es einfacher ist , und sagen einfach: Okay, ich kann dort aus einer beliebigen Anzahl dieser bevorzugten Komponenten auswählen . Ein Knopf, um sie alle zu beherrschen. Alles klar? Lass uns reinspringen. Richtig, für den Anfang habe ich eine Schaltfläche erstellt, nur einen wirklich einfachen Rahmen mit etwas Text darin, und ich habe daraus eine automatische Ausgabe gemacht, sodass sie erweitert wird. Es bringt einige Symbole mit, Command Shift K auf einem Mac, Control Shift K auf einem PC, und es gibt einen Ordner mit einigen speziellen Symbolen oder speziellen Symbolen. Diejenigen, die wir verwenden wollen, heißen Icons zwei, schnappen Sie sich alle vier, öffnen Sie sie, und ich werde einmal, zweimal, dreimal, viermal klicken . Ich habe alle meine Icons. Ich muss sicherstellen, dass dieser Button eine Komponente ist. M, und das Gleiche gilt für diese. Wählen Sie sie alle aus, und ich sage, ich möchte, dass Sie oder mehrere Komponenten sind. In Ordnung, das sind also meine Hauptkomponenten. Ich möchte mir eine Instanz schnappen, sagen wir mal von der Zecke. Also ziehe ich einfach eine Kopie heraus und füge sie in meinen Button ein. Da es sich um ein automatisches Layout handelt, fließt es immer weiter. Jetzt ziehe ich eine Instanz meiner Schaltfläche heraus, die ich Frame zwei genannt habe Nennen wir sie vielleicht etwas anderes. Nennen wir das hier. Aber ein oranger, schrecklicher Name dafür. Denn das Erste, was wir mit der Instanz machen werden, ist einfach die Farbe zu ändern, nur um klarer zu machen, was wir tun. Also die Hauptkomponenten hier oben, Instanz hier unten. Was ich mit der Instanz machen kann und den ganzen Aufwand, den wir lernen werden, überspringen kann, nicht den Aufwand, sondern all die ausgefallenen Dinge ist, dass nicht den Aufwand, sondern all die ausgefallenen ich reingehen könnte, auf das Häkchen klicken und sagen könnte, ich will das eigentlich nicht Ich möchte die Instanz wechseln, mit welcher Instanz ich sie haben möchte? Nicht dieser, der Stift, der Bleistift da. Das funktioniert gut. Wenn ich alleine arbeite, ist das Problem dabei , dass es schwierig ist zu wissen , welche hier drin sein dürfen. dem Stift sagst du, oh, ist es dieser, ist es dieser andere? Es gibt einfach so viele auf meiner Komponenten-Seite. Was wir tun können, um großartig zu sein und es für uns selbst, für größere Designsysteme und für junge Designer einfacher zu machen für größere Designsysteme , können Sie in dieser Hauptkomponente hier sagen, Sie können sagen, sehen Sie sich dieses Häkchen hier klicken Sie auf das Häkchen darin. In diesem Fall können Sie also etwas namens Instant Swap ausführen. Wenn ein Ti ausgewählt ist, ist es die Instanz in meiner Schaltfläche. Ich kann sagen, sehen Sie sich diese Option hier an. Es heißt, Instanz-Swap-Eigenschaft erstellen. Du kannst sagen, Hop, wir werden es Icon nennen , um zu verdeutlichen, was wir tauschen Der Standardwert wird übernommen , das ist in Ordnung. Was ich tun kann, das ist der Teil hier. Da stehen bevorzugte Werte. Ich kann sagen, ich hätte gerne, was möchte ich in der Nähe von ihnen haben, ich hätte gerne getan, um einer von ihnen zu sein, und nicht diesen, welche anderen haben wir noch? Bleistift und Plus. Das Coole daran, wenn ich es schließe und die Immobilie erstelle, heißt das nur, wenn jemand geht, Ar brauche ich einen Button. Ich werde eine Instanz davon herausziehen und sie können sagen: Wir sehen uns hier drüben? Symbol, welches Symbol möchtest du? Dies sind die einzigen, aus denen Sie auswählen können, nicht die riesige Liste von Komponenten in Ihrem gesamten Dokument oder Ihrem Designsystem. Es ist einfach viel klarer. Co.. Ich zeige dir das, damit du großartig sein kannst, aber auch, damit du, wenn du einen Knopf findest und denkst, passiert das? Was ist das für ein Voodoo? Das liegt daran, dass sie sofort getauscht haben Könnten Sie auf Probleme stoßen? Nicht wirklich Probleme, aber diese Icons habe ich speziell ausgewählt, weil Sie das hier sehen, sie haben dieselbe Höhe und Breite, 16 mal 16, dieses, 16 mal 16, dieses, 16 16. Also, wenn sie den Tausch machen, ist das eine nette Überschneidung. Wenn Sie am Ende viele verschiedene Größen hineinlegen , wird es schwieriger Aus diesem Grund werden Sie bei der Suche nach Icon-Sets feststellen, dass diese häufig vorkommen Siehst du, das ist schmaler als der Stift, aber sie platzieren ihn innerhalb des übergeordneten Rahmens und haben eine bestimmte Höhe und Breite, sodass sie alle zusammenpassen. Weil du es mit einer Variante kombinierst, zu 100%, okay? Wenn dir das nicht gefällt, ist es gut, weil die Hauptkomponente genau das ist. Wenn wir dagegen eine Varianz hätten, müssten wir das tun, wir müssten diese haben und dann würden wir diese Variante durch vier ersetzen. Lass es uns löschen Schnappen wir uns eine Version davon. Das ist in Ordnung. Dann müsste ich noch eins haben und noch eins und noch eins, und das ist in Ordnung, wenn es vier sind. Aber wenn man anfängt, zu Versionen von Buttons zu kommen , die unzählige Variationen haben, wird es superknifflig Ja, das ist ein nettes Intro dazu. Ich benutze nur Knöpfe. Es heißt Instanztausch und Sie können eine Taste haben, und sie kann viele verschiedene Aufgaben erledigen. Fantastisch. Wir sehen uns im nächsten Video. 64. Verwenden von Booleschen Komponenteigenschaften in Figma: Ordnung, alle zusammen. In diesem Video werden wir uns die Eigenschaften der Komponenten ansehen. Dieses Ding wird Goldbarren genannt, und was macht es? Das ist sehr cool. Wir können das von uns erstellte Symbol einfach ein- und ausschalten. Das bedeutet, dass wir sagen können, ich habe diese eine Hauptkomponente , die ein paar Dinge kann. Ich kann sagen, A, ich will, dass es erledigt oder abgeschlossen ist. Aber weißt du eigentlich was? Keine. Das heißt, wir bauen eine Immobilie aus Edelmetallen Klingt komisch, kann aber super sein. Lass uns reinspringen. Richtig. Um unseren kleinen Ein- und Ausschalter zu aktivieren, suchen Sie die Hauptkomponente und suchen Sie das Ding, das Sie ausschalten möchten. Ich habe es ausgewählt und gehe zu Hier und Darstellung und da gibt es diese Option hier. Dies ist das Anwenden einer Variablen oder einer Eigenschaft. Wir werden eine Immobilie hinzufügen und wir werden zu Plus wechseln und die Immobilie wird, Sie können sehen, dass sie standardmäßig auf dieses Edelmetall umgestellt ist Sie bezeichnen es nicht einmal mehr als 1 Milliarde. Es ist ein komisches Wort, es hat mir einen guten Namen gegeben . Möchte ich das Fertige zeigen? Ich möchte es eigentlich einfach Icon nennen , weil es viele verschiedene Icons anzeigen wird . Die Standardeinstellung wird sein. Eigentum. Jetzt schnappe ich mir meine Instanz und kann sagen: A was? Das Icon möchte ich zeigen? Vielleicht das Erledigte. Eigentlich will ich keine. Da hast du's. Komm schon. Da es sich um einen automatischen Ausgang handelt, fließt er zurück Frag mich nicht, was das lila Ding ist. Ich habe danach gesucht und ich frage mich, was zur Hölle ist das? Ich weiß es nicht Es scheint keine Vorschau zu geben, und wenn Sie mir sagen können, was es ist, lassen Sie es mich in den Kommentaren wissen. Ich habe die Ansichtsoptionen durchsucht. Es scheint einfach wegzugehen. Kannst du es sehen? ist es weg. Ich denke, es könnte einfach sein, dass du da bist. So schaltet man Dinge ein und aus. Sie können sehen, wenn Sie es mit „Ich möchte es an“ kombinieren, aber ich möchte, dass es ein Bleistift ist, diese eine kleine Hauptkomponente ist nett und klein, kein Stapel von Variationen , mit allen Symbolen und dann wieder aus. Sehr cool. In Ordnung. Nächstes Video. 65. Erstellen eines einfachen Felds mit Komponenteigenschaften: Ordnung, alle zusammen. In diesem Video werden wir das, was wir in den letzten Videos gemacht haben, zu etwas anderem kombinieren . Wir werden es für den Button tun. Wir werden genau das Gleiche tun. Wir werden Dinge ein - und ausschalten und Symbole austauschen. Aber wir werden es für ein Textfeld tun weil es dasselbe Zeug ist, aber es fühlt sich anders an, wenn es anders verwendet wird. Es ist eine gute Zusammenfassung dessen, was wir gelernt haben. Dieser Typ hier kann ein Etikett ein- und ausschalten, das Symbol ein- und ausschalten und das Symbol kann ausgetauscht werden machen wir. Spring rein. Zu Beginn habe ich etwas gezeichnet, das wie ein Feld aussah. Es ist nur ein Rahmen mit einem Strich der Außenseite und runden Ecken. Ich habe einige Texte hineingelegt. Es macht nicht einmal etwas. Es sind einfach keine Autolouts, die einfach rumhängen und ich habe ein hellgraues Bild gemacht wurde auch ein bisschen Text gutgeschrieben, da steht Etikett. Fangen wir mit diesem an. Lassen Sie uns hier nach einem Etikett für unser Fachgebiet suchen, und wir werden uns das alles schnappen daraus eine Komponente machen. Dann gehen wir da rein und holen uns ein bisschen Text. Hier drüben, wo Aussehen steht, wollen wir sagen, ich möchte eins hinzufügen. Wollen wir das Etikett zeigen? Ja, bitte. Wenn wir es jetzt wegziehen und unsere Instanz haben, können wir sagen, das Label anzeigen. Ich möchte das Label nicht zeigen, du kannst den Text hier ändern. Das wird, sagen wir, das Geburtsdatum sein , Dp. Gehen wir und fügen auch den Instanz-Swap hinzu. Ich werde ein paar Icons importieren. Command Shift K, Control Shift K auf einem PC. Es gibt einen anderen Ordner namens Icons Three. Ich habe diese beiden Icons. Ich klicke einmal, klicke zweimal schnappe mir beide. Sie haben die richtigen Größen. Sie sind 18 mal 18 und Sie sind 16 mal 16. Hoppla, du wirst sie ändern müssen. Weil ich wirklich möchte, dass sie die gleiche Größe haben. Ich werde beide auswählen und mehrere Komponenten erstellen. Ich werde mir eine Instanz davon schnappen, nicht das Hauptkomponentenmitglied. Eine Hauptkomponente kann nicht in einer anderen Hauptkomponente leben , also schnappen wir uns Ihre Instanz, gehen hinein, alle UPs da drüben. Was wir jetzt tun werden , ist zu sagen, dass sich dieses Ding bewegt, richtig? Wir benutzen den da unten und dann sieht dieser etwas anders aus. Sie sehen, die Symbole unterscheiden sich nur geringfügig. Wenden Sie die Variableneigenschaft an, und hier handelt es sich um einen Instanztausch. Sehr ähnlich. Klicken Sie darauf und welche möchte ich den Leuten erlauben, sie zu benutzen? Das Häkchen. Das runter. Ich habe meine bevorzugten Werte, Crept Property. Nun, ich hoffe, dieses Ding hier, kann ich sagen, willst du das Etikett Nein. Will ich die Gefahr? Das ist ein Häkchen, aber manchmal wollen wir es ausschalten Zurück zu unserer Hauptkomponente, finde die Komponente heraus. Also unsere Instanz hier drinnen, sagen wir, hier unten, Aussehen. Soll ich, dass du auf dem Grundstück auftauchst, wo Gefahr besteht? Ich nenne es Show Icon. Immobilie erstellen. Hoffentlich zeigt dieser Typ jetzt, ich kann sagen das Etikett an und aus, das Symbol ein und aus. Und wähle ein anderes Symbol. Schau, was wir gemacht haben. Ignoriere das Violett. Vielleicht ist es ein bisschen schnell, du kannst es dir noch einmal ansehen. Es ist genau das Gleiche, was wir im letzten Video gemacht haben, aber wir haben eine Schaltfläche hinzugefügt, was nützlich ist, aber diese Felder können auch sehr nützlich sein Eine Sache, die ich für meine Hauptkomponente tun könnte , ist, dass dies der falsche Weg zu sein scheint. Ich möchte das Symbol beschriften, dann ein- und ausschalten und dann auswählen, welche Instanz davon es ist. In meinem Fall möchte ich es von „Instanz“ abändern. Nennen wir dieses eine Symbol. Nur damit es hier ein bisschen klar ist. Jep-Symbol, Häkchen. Sachen machen Die einzige andere Sache ist, dass ich es nur halb übersprungen habe, ist, dass dieser Teil des Textes zentriert ist muss zu meiner Hauptkomponente zurückkehren und sagen, Sie müssen linksbündig sein und wieder da drüben Dieser hat den Duft beibehalten, was interessant ist. Wenn Sie eine neue Komponente ziehen, bleibt sie linksbündig ausgerichtet Aber ich wusste nicht, dass du das kannst. Oh, das ist es nicht. Warum nicht? Sie sind linksbündig. Sie sollten jetzt alle mitfahren. Lassen Sie uns eine weitere Instanz herausziehen. Dan hat sich verirrt, hat einem einfachen Tutorial ein Tutorial für Dan Getting Lost gemacht. Ja. Ja, ich arbeite und wir kombinieren Sachen und wir sind schick. Es kann viele Fälle geben, in denen Sie Dinge ein - und ausschalten und Instanzen austauschen müssen , nur damit Ihre Hauptkomponente schön klein und einfach zu teilen ist , aber es können viele verschiedene Versionen werden . Ich hoffe, das war klärend. Okay, wir sehen uns im nächsten Video. 66. Klassenprojekt 16 - Du hast Geburtstag: Hallo. Es ist Zeit für Klassenprojekte. Ich möchte, dass du das Gelernte in die Praxis umsetzt. Okay, wir werden dieses Feld hier erstellen und es enthält eine Menge Dinge , die wir verwenden wollen. Sie müssen ein Etikett erstellen , das ein - und ausgeschaltet werden muss. Das Gleiche gilt für das Symbol und das Symbol, wenn es aktiviert ist . Ich kann auch unten verschiedene Symbole und Hilfstext auswählen auch unten verschiedene Symbole und Hilfstext und den Beispieltext, der in der Mitte steht. Vergessen Sie bei Ihrer Hauptkomponente nicht , dass Sie diese Dinge vielleicht neu anordnen möchten Mir ist gerade aufgefallen, dass Dinge, die Instanz genannt werden, wahrscheinlich möchte ich das hier nennen Also benenne sie richtig und sorge für die richtige Reihenfolge , weil ich den Beispieltext wahrscheinlich ganz oben haben möchte . Er scheint einer der wichtigeren zu sein. A, in Ihrer Klassenprojektdatei, also erstellen Sie ein Eingabefeld mithilfe von Komponenteneigenschaften. Das Wichtigste ist, dass wenn Sie Komponenteneigenschaften erstellen, diese manchmal oben und manchmal unten angezeigt werden. Wenn es nicht oben ist, sieht es nach unten aus. Das ist die eine Sache , die ich nicht weiß. Wenn ich sie eine Weile nicht gemacht habe, vergesse ich, auf welche ich klicke. Co.. Also brauchst du ein Feld, das nur die weiße Box ist. Der Beispieltext muss ein- und ausgeschaltet sein, das Etikett ein, Hilfstext ein und das Symbol ein, aber das Symbol muss sofort ausgetauscht werden. Du kannst meine Icons verwenden, du kannst deine eigenen finden. Die Ergebnisse. Ich möchte, dass Sie einen Screenshot Ihrer Hauptkomponente machen, einschließlich der Eigenschaften Ich zeige es dir hier rein. Wo ist meine Hauptkomponente. Lassen Sie es einrichten, wenn ich darauf klicke, ich kann einen Screenshot von all dem auf einmal machen. Ich kann meine Hauptkomponente sehen, aber wir können tatsächlich all die verschiedenen Eigenschaften sehen und sehen, ob Sie sie richtig benennen oder nicht. Eigentlich ist es mir egal, wie Sie sie nennen , um zu sehen, ob Sie es zum Laufen bringen können. Es ist schwierig zu machen, aber es kann sehr nützlich und noch nützlicher sein, wenn man das Ding von jemand anderem aushändigt und sagt, los geht's und man denkt: Wow, es macht alle möglichen tollen Sachen. Du weißt, wie es gemacht wird. Dein eigenes. Ordnung. Viel Spaß mit dem Klassenprojekt. Wir sehen uns im nächsten Video. 67. Kurven von Text mit Schriftart auf einem Pfad in Figma: Hallo, alle zusammen. In diesem Video zeige ich Ihnen, wie Sie Text in einen Pfad innerhalb von Figma einfügen . Lass uns reinspringen In Ordnung, du musst also mit der Form beginnen. Ich werde den Kreis benutzen. Also verwende ich die Tastenkombination O auf meiner Tastatur, halte die Umschalttaste gedrückt, um einen perfekten Kreis zu erhalten, wechsle dann zum Textwerkzeug und klicke einfach auf den Rand. Sie werden sehen, wie das Symbol von den Kreuzstrichen zu diesem wechselt , und klicken Sie einfach auf die Stelle, an der es beginnen soll Auch wenn du es nicht an der richtigen Stelle findest, wähle alles aus Ich werde meine Optionstaste auf dem PC gedrückt halten und sie einfach größer ziehen. Was Sie tun können, ist zum Auswahlwerkzeug zurückzukehren und Sie werden feststellen, dass ich es ausgewählt habe. Kannst du diesen kleinen Punkt sehen? Da fängt es an. Meins ist linksbündig. Ich werde meinen dort in die Mitte bringen und meine normale alte Textausrichtung auf zentriert umstellen meine normale alte Textausrichtung . Jetzt ist es ganz oben. Sie stellen fest, dass die Form unsichtbar ist. Wenn Sie immer noch einen Kreis benötigen, müssen Sie eine zweite Ellipse zeichnen die Sie als Mittelteil verwenden können Weil wir diesen ursprünglichen Kreis als Text auf dem Pfad verwenden als Text auf dem Pfad Jetzt könntest du zum Zeichnen gehen und dir eines dieser Werkzeuge hier holen. Ich werde das Bleistiftwerkzeug benutzen und ich werde eine Form zeichnen und hier ist es dasselbe. Schnappen Sie sich das Textwerkzeug und Sie können einfach darauf klicken und wir können tippen. Die anderen Dinge, die du tun kannst, sind, lass uns das loswerden. Mit den ausgewählten Optionen können Sie mit den Grundlagen herumspielen. Oft müssen Sie mit dem Buchstabenabstand herumspielen , um ihn vielleicht richtig zu machen, weil er aufgefächert ist. Das hängt davon ab, wie scharf Ihr Kreis Die andere Sache ist, dass Sie hier unten einige neue Optionen haben , C hier. Sie können Text über Pfad schreiben, Sie können Text durch die Mitte darunter sagen , je nachdem, was Sie benötigen. Ich werde oft gefragt, wie man das auf beiden Seiten macht. Das tust du nicht wirklich. Du hast nur zwei separate Kreise. Ich werde Limerick machen. Zwei separate Textfelder, und was ich tun werde, ist, oh, es gibt eine Option zum Umdrehen. Ich habe vergessen, das zu erwähnen. Ich drehe das um und ich will, dass es unter der Linie liegt, und Sie können sehen, ich kann diesem Ding das Gefühl geben, dass es sich um eine Ellipse dreht und ich will, dass es unter der Linie liegt, und Sie können sehen, ich kann diesem Ding das Gefühl . Ich werde meine Last darauf legen Dann werde ich ewig damit verbringen, alles schön aussehen zu lassen und mit dem Zeilenabstand herumzuspielen Aber das sind die Grundlagen. Du kannst es um einen Kreis, einen Kringel, ein Quadrat, einen Stern herum machen, was auch immer du willst Das ist Text auf einem Pfad innerhalb von Figma. 68. Klassenprojekt 17 - Gebogener Text: Es ist Zeit für ein Klassenprojekt. Ich möchte, dass du die Kurventextfunktion verwendest und dein Logo neu gestaltest Es kann sehr einfach sein. Du kannst ein bisschen mehr Zeit verbringen. Es ist nicht wirklich der Punkt. Es ist nur ein Herumspielen mit dem Kurventext. Ein neues Logo, stellen Sie sicher, dass Sie ein oder mehrere Kurventextelemente verwenden und laden Sie einen Screenshot hoch. Ich liebe es auch in den sozialen Medien zu sehen. Wenn Sie nach Inspiration suchen, so etwas wie Dribble Ich habe gerade das Badge-Logo eingegeben, manchmal werden sie Emblem-Logos genannt Aber du kannst hier nur eine Kurve sehen. Es liegt an Ihnen, den Kreis zu schließen. Stellen Sie sicher, dass Sie mich in den sozialen Medien markieren. Ich würde gerne sehen, was du machst. Ich bin mir nicht sicher, warum Kurventext so toll ist, aber es ist Viel Spaß und wir sehen uns im nächsten Video. 69. So richten Sie Textfelder mithilfe des vertikalen Trims an den Rand aus: Hallo, alle zusammen. Wir werden uns die vertikale Verkleidung ansehen. Wenn du wie ich bist und du sagst, ich setze meinen Abstand auf acht Pixel und du sagst, es sind nicht mal annähernd acht Pixel Was ist das für eine große Lücke hier drin? Ich werde dir zeigen, wie man es ausschaltet. Eigentlich ist es wirklich einfach, hierher zu gehen und auf diese Schaltfläche zu klicken. Aber es steckt noch ein bisschen mehr dahinter, also lassen Sie uns einsteigen. Aber sieh dir an, wie gut die Linien jetzt sind. Richtig, ich fange mit dem Textwerkzeugtyp an und verwende dann das Wort Button. Ich werde fliehen, um das Textwerkzeug zu verlassen , und Sie werden sehen, dass ich einfach Inter verwende, was die Standardeinstellung für Figma ist, und ich werde es in ein Autolayout umwandeln und ihm eine Farbe geben Und was werden wir tun? Nun, wenn ich hier auf den übergeordneten Frame klicke, wirst du feststellen, dass er standardmäßig einen horizontalen und vertikalen Abstand von acht hat standardmäßig einen horizontalen und vertikalen Abstand von acht Sie werden feststellen, wenn ich den Mauszeiger über dem vertikalen Abstand bewege, können Sie die Acht hier oben sehen lassen Sie mich sie bewegen, damit wir sie vergrößern können Kannst du das sehen? Es ist nicht annähernd der tatsächliche Text. Die Seiten sind näher dran, aber die Ober- und Unterseite sind nicht mal annähernd acht Pixel groß. Ich kann sie zählen. Sie sind so nah dran. Das sind acht, neun, zehn, 11 Pixel. Was passiert, ist, dass der Typograf entschieden hat, dass das Apt , also der Großbuchstabe, so weit unten und so weit von der Grundlinie entfernt ist so weit unten und so weit von der Jede Schrift ist anders. Wenn ich es auf dieses Ultra-Modell umstelle. Es ist nicht dasselbe wie Inter. Eigentlich ist es ziemlich nah dran. Lass mich an einen anderen denken. Ich denke, Leto ist anders. Okay, ich kann sehen, dass Lato ungefähr 3,5 Pixel hat , bevor er sich dort der Spitze nähert Was wir tun können, ich gehe zurück zu Inter, ist mit dem ausgewählten Text, du kannst zur Typografie gehen, zu den Einstellungen hier und du kannst dieses Ding hier einschalten Das nennt man „Vertikaler Schnitt“ oder wie auch immer man das nennt, die Höhe der Oberkante bis zur Grundlinie Es passt einfach zu dem, was der eigentliche Typ ist. Es wird niemals perfekt sein. Du kannst sehen, schau, was ist das da? Warum gibt es dort ein Leerzeichen? Das liegt daran, dass einige der anderen Großbuchstaben höher oder niedriger als dieser sein werden . Sie sind alle gleich. Ich glaube, was ich sagen wollte , ist , dass du es nie perfekt hinkriegst. Aber wenn Sie das vertikale Trimmen verwenden, kommen Sie ganz nah dran. Jetzt sieht es eher so aus, als ob ich auf den Text darin klicke, habe ich das Textfeld, halte deine Optionstaste, die alte Taste auf einem PC und bewege den Mauszeiger einfach herum Kannst du sehen, dass es näher an der Acht ist? Das nennt man vertikales Trimmen Wenn du ewig damit verbringst, Dinge in eine Reihe zu bringen und du denkst, warum passt es nicht zusammen? Perfekt. Experimentieren Sie mit vertikaler Trimmung. Beachten Sie jedoch, dass einige Schriftarten unterschiedlich sind und dass Sie zumindest bei einigen Schriften etwas Eigenartiges haben werden bei einigen Schriften etwas Eigenartiges haben Ordnung, vertikaler Schnitt. Wir sehen uns im nächsten Video. 70. Abschneiden von Text in Figma …: Hallo zusammen. In diesem Video schauen wir uns Kürzungen an, den Punkt Punkt, der erscheint, wenn man das S-Moor hat Es ist wirklich gut, wenn du Karten spielst. Ich wollte das nicht in den Fortgeschrittenenkurs aufnehmen , aber am Ende mache ich es oft, wenn ich viele Texte kopiere und einfüge , um die Felder auszufüllen Sie haben für die kleinen vier oder fünf Zeilen entworfen, und dann müssen Sie alle anderen Auflistungen durchgehen und den Punkt mit dem Punkt quasi vortäuschen Wir können es in der Hauptkomponente einschalten und es automatisch ausführen lassen. Eigentlich ist es nur diese Topographie, Truncation mit ein paar Zeilen Truncation mit ein paar Zeilen . Das ist die einfache Version Lassen Sie mich ein bisschen mehr erklären und bis zum Ende warten. Es gab ein Problem, auf das ich gestoßen bin und das Sie vielleicht auch lösen könnten, wenn Sie den Kurs mitgemacht haben . Lass uns Sachen kürzen. Damit das funktioniert, gibt es kein Autolayout oder ähnliches, ich werde es in eine Komponente umwandeln Ich möchte eine andere Version davon, und die nächste Gruppe ist das Wunderkind, und wir werden all diese verschiedenen Auflistungen ausfüllen , und ich habe es entweder aus einer Datenbank oder durch Kopieren und Einfügen oder aus einem oder durch Kopieren und Einfügen oder Ich denke, oh, oh, wir könnten zum Textfeld gehen. Was ich in der Vergangenheit gemacht habe, ist mit dem ausgewählten Textfeld. Ich gehe einfach durch und lösche all das und lösche ein bisschen mehr und füge dann meinen eigenen Kürzungspunkt und fälsche ihn. Aber es gibt einen einfachen Weg Da all das immer noch da ist, können wir zur Hauptkomponente zurückkehren. Schnappen Sie sich das Feld und unter den Texteigenschaften. Sie haben diese Option , die besagt, Text abschneiden. Sie können dort am unteren Rand des Textfeldes sehen, dass es gekürzt wird und alles und alle Instanzen Der Text ist immer noch da und kann immer noch bearbeitet werden, aber Sie werden feststellen, dass, wenn ich herauskomme, alles verschwindet und die Kürzung hinzugefügt Nett und einfach. In dem Moment, in dem mein Textfeld auf eine feste Größe eingestellt ist. Wenn Sie sich für die automatische Höhe entscheiden, was bedeutet, dass sie sich ausdehnt und zusammenzieht, können Sie zu denselben Topographieeinstellungen zurückkehren und Mx-Linien abrufen Das ist nur mit, also werde ich es auf drei setzen. Sie gehen alle auf drei. Sie müssen jedoch nur überprüfen , ob Sie auf Automatische Höhe eingestellt sind . Erst dann werden die maximalen Zeilen angezeigt. Eines der Dinge , die ich in den letzten Videos gefunden habe , als wir mit Text auf einem Pfad herumgespielt haben. Ich habe das gemacht, während die Standardeinstellung für diese Zeilenmitte eingestellt war für diese Zeilenmitte Ich werde die Kürzung ausschalten. Also haben wir Truncation gemacht, schalten Sie es jetzt aus, weil ich Ihnen das Problem zeigen möchte, das ich hatte Als ich viel Text hinzufügte, begann er von der Mitte nach außen in beide Richtungen zu expandieren Hattest du auch dieses Problem? Das liegt daran, dass wir auf einem Pfad mit der Schrift herumgespielt haben Wir haben es in der Mitte zum Laufen gebracht. Ich musste nur sichergehen, dass ich hier zu meiner Originalverpackung gehe und sie nach oben stelle, was die Standardeinstellung ist, und sie wieder in Position bringen und dann anfangen zu arbeiten. Ich werde meine Kürzung wieder einschalten. Ups. Stellen Sie es auf eine Zeile ein. Gehen Sie zwei, drei oder vier hoch. Fantastisch. Das ist Truncation. Wir geben es einfach in Punkt Punkt Punkt ein und löschen viel Ordnung, das ist es. Wir sehen uns im nächsten Video 71. Bilder mithilfe von KI maskieren Hintergrund entfernen: Hallo, alle zusammen. Wir werden das KI-Maskierungstool in Figma verwenden das KI-Maskierungstool in Figma Ich zeige dir die Dinge , die daran gut sind, einige der skurrilen Dinge , die daran falsch sind Aber insgesamt macht es einen ziemlich tollen Job. Und wenn du bis zum Ende wartest, gehe ich alle 1980er darauf und zeige dir ein cooles Figma-Farbwerkzeug Ordnung, lassen Sie uns einsteigen . In Ordnung. Zuerst, ich habe etwas zu teilen. Dies ist das dritte Mal, dass ich dieses Tutorial aufgenommen habe. Ich habe zweimal hintereinander den falschen Bildschirm aufgenommen. Ich werde dir etwas über Masken beibringen, und ich werde es auf eine Art verrückte, mürrische Art machen So viel wie mürrisch gemacht Oh, okay. Was wir tun müssen, ist ein paar Bilder reinzubringen. Also möchte ich, dass du die Dateien 912 und 13 aus deinen Übungen mitbringst Dateien 912 und 13 aus deinen Übungen Bring es rein Ich habe gerade eine neue Seite namens Bilder erstellt , nur um etwas anderes zu haben. Wir werden mit diesem hier drüben beginnen. Das ist ein von KI generiertes Bild, aber es hat einen Hintergrund. Wir könnten mit KI zusammenarbeiten, um zu sehen, ob sie uns eines ohne Hintergrund geben könnten , als wir es ursprünglich gemacht haben, aber das ist lange her. Also werden wir es auswählen. Wir gehen hier runter zu unseren Aktionen und geben Hintergrund entfernen ein. Es ist eine KI-Funktion. Es ist Teil der kostenpflichtigen Optionen in Figma Ich werde darauf klicken und dann einfach erstaunt sein, wie gut es fertig ist Oh, es ist gut. Dieses Zeug ist schon lange hokey, aber es wird richtig gut Es gibt ein paar Kleinigkeiten. Es ist quasi perfekt, wenn ich es hierher ziehe. Okay? Schau es dir rundum an. Es ist großartig. Es ist irgendwie hier. Es hat einen tollen Job gemacht, aber es gibt ein paar komische Dinge , weil ich mich über alles liebe. Wenn ich also einen Schlagschatten hinzufüge, kannst du sehen, dass er einfach ausflippt Wenn dieses Mädchen dir gehört, wirst du es in der Zukunft sein. Das haben sie vielleicht repariert, aber sie wissen nicht , was sie hier an diesen Rändern tun sollen Es hat eine wirklich harte Schnittmaske , die es für den Schlagschatten verwendet, aber es gibt tatsächlich eine schöne Maske Ich bin mir nicht sicher, wo das Problem liegt, aber weiß nur, dass es einige Probleme gibt A exportiert Lovely als PNG. Ich bin mir nicht sicher, was mit dem Schlagschatten los ist. Und so funktioniert es wirklich gut, wenn es einen hohen Kontrast zwischen Hintergrund und Vordergrund gibt. Lass es uns noch einmal machen, den Hintergrund entfernen. Echte Menschen und komplizierte Dinge dauern ziemlich lange. Dieser war sehr schnell. Ich werde sofort loslegen, wenn dieser fertig ist. In Ordnung. Also das dauert vielleicht vier- oder fünfmal länger, aber trotzdem ein ziemlich erstaunliches Ergebnis. Schau es dir an. Sogar hier gefällt es mir. Ich werde es übertreiben, aber toll. Hat die gleichen Probleme, wenn Sie anfangen, einen Schlagschatten hinzuzufügen. Aber wenn es weniger Kontrast zwischen Hintergrund und Vordergrund gibt, KC, gibt es hier im Hintergrund viele ähnliche Farben . Es ist wirklich schwer, das herauszufinden. Lass es uns versuchen und den Hintergrund entfernen. Ich versuche, etwas Hartes auszuwählen. Ich springe direkt zu, wenn es fertig ist. Eigentlich, während es läuft. Oh, das war ein guter Übergang. Kannst du sehen? Ich wusste nicht, was ich tun sollte. Es hat einen ziemlich tollen Job gemacht. Wenn Sie vor ein oder zwei Jahren schon einmal Photoshop-Maskierung gemacht haben, ist das immer noch ziemlich gut, und wir könnten es reparieren, aber es hat ziemlich gute Arbeit geleistet, um herauszufinden , wo sie endet und der Hintergrund beginnt Wahrscheinlich nicht passabel vor weißem Hintergrund . Aber sieh mal hier runter. Aber nimm den Finger, es ist rausgefunden, wo das Loch zwischen ihrem Arm ist. Wenn Sie es schon einmal gemacht haben, wenn Sie ein Meister der alten Schule sind, wissen Sie, dass die Hälfte des Bols leicht fehlen könnte und definitiv der Finger weg wäre und die Hälfte des Hintergrunds enthalten wäre. Oh Mann, es läuft wirklich gut. Das würde funktionieren, wenn ich einen schwarzen Hintergrund hätte , also die Iki oder eine dunkle Farbe. Ich wollte hier hineinschneiden und es war eine dunkle Farbe. Schieb es zurück. Formbefehl in meiner ersten eckigen Klammer oder Steuerung, KC, ich habe den Hintergrund ausgeblendet Ich habe gerade das Problem mit diesem Teil der Maske umgangen . Es funktioniert super. Aber wenn du sie vor einem weißen Hintergrund brauchst, müsstest du etwas wie Photoshop rausbringen. Photoshop verfügt über alle manuellen Werkzeuge, Figma jedoch nicht Im Moment ist es ein One-Shot. Die andere Sache, die es zu beachten gilt, ist, dass ich das loswerden werde, wenn ich sie auswähle. Das liegt daran, dass ich dieses Video ein paar Mal gemacht habe . Zum Mitnehmen, Dan. Also was passiert ist, wenn man eine Maske macht, man am Ende diese zwei Schichten. Also der Hintergrund, kannst du sehen, dass er immer noch da ist? Also, falls Sie darauf zurückkommen müssen, es hat ein komplett neues Bild generiert , füllen Sie es auf. Also hast du immer noch beide. Okay? Und das wird praktisch sein, wenn wir im nächsten Teil so etwas wie eine Überlaufmaske Aber nein, es gibt nur zwei Füllungen. Den brauchst du nicht, okay? Es ist nicht erforderlich, aber los geht's. Es ist ziemlich beeindruckend. Lassen Sie uns sogar 80 Spektakulärität hinzufügen. Du kannst jetzt gehen, du bist entlassen. Aber wenn du hier rumhängst, gibt es ein cooles kleines Tool, das ich zeigen möchte. Zur Farbauswahl. Also verwende ich das Dreieck bei gedrückter Umschalttaste , um es proportional zu Breite und Höhe zu machen Und wenn ich das mache, suche ich mir eine Farbe aus. Also werde ich mir die Pipette schnappen und Teile von mir wollen sie nur dunkler machen Ok und stecke es vielleicht dahinter. Ich werde meine Befehlstaste oder die Steuerungstaste auf einem PC gedrückt halten und meine eckige Klammer verwenden. Das ist cool. Das möchte ich rückgängig machen. Ich möchte die Kontrastfarbe dazu finden. Ich werde die Farbe hier in meiner Farbfüllung auswählen. Ungefähr zu einer coolen Website namens figma.com Slash Color Was Sie tun können, ist, diese Farbe einfach einzufügen und die Eingabetaste Und es ist standardmäßig kostenlos. Sie können sehen, dass Sie eine tolle Farbe haben, die dazu passt. Das sind diejenigen, die Bt-analog sind, sie sollen es sein. Ich weiß es nicht. Ich benutze diese nie. Sie sind wissenschaftlich nützlich, wie das Dreieck, aber ich weiß nicht, ich verwende nur die kostenlose Variante. Happy Little Copy, wenn Sie einfach darauf klicken. Das liebe ich. Ich werde das einfügen und ich habe einen schönen Farbkontrast. Ich möchte wahrscheinlich, dass es nur ein bisschen dunkler ist und ich es nach hinten verschiebe. Los geht's 1980er Jahre. In Ordnung, wir machen noch eins damit. Also die O-Taste für das Ellipse-Werkzeug und ich werde zwei Tasten gedrückt halten, die Optionstaste und die Shift-Taste auf einem Mac und das ist Alton-Shift auf einem PC und man kann sowohl einen runden Kreis bekommen als auch von der Mitte aus beginnen Das ist cool. In Ordnung. Ich suche mir eine Farbe aus. Ich werde es für meine Palette nach hinten verschieben und einfach die passende Farbe erraten Ich werde tatsächlich meine Pipette benutzen, um mir eines dieser Lilatöne zu schnappen, und dann werde ich einfach hier rüber gehen und versuchen, die andere Seite zu bekommen. Vielleicht, vielleicht ein bisschen dunkler. Ordnung. Wir machen es. In Ordnung. Das ist es. Das heißt Hintergrund entfernen, und ich glaube, wir haben dieses Mal den richtigen Bildschirm aufgenommen, Happy Days. Wir sehen uns im nächsten Video. 72. Erstellen einer Überlaufmaske außerhalb des Rahmens in Figma: Hallo. Ich zeige dir, wie man die Spillover-Maske macht Es ist ziemlich einfach. Es ist ein bisschen verwirrend, aber ich mag den Effekt, wenn das Produkt Das kann man sehen. Das Gleiche gilt für dieses Bild unten. Wir schneiden es mit unserer Maskierung zu, lassen es aber über das Produkt laufen , und ich zeige Ihnen, wie man es im Hintergrund abdunkelt Wirkung. Lass uns reinspringen. Ich zeige dir, wie es geht. Bringen Sie zunächst Bild 14 und 15 ein. Lass uns das zuerst machen. Wir werden das verwenden , was wir zuvor verwendet haben, den Hintergrund entfernen. Gates hat einen ziemlich guten Job gemacht. Vergiss nicht, der Hintergrund ist immer noch da, also das ist der Trick. Wir werden zwei Versionen davon haben. Diese heißt Bild 14. Nennen wir das einfach Top. Lassen Sie uns hier nicht die Füllung, sondern die eigentliche Ebene kopieren und einfügen . Wenn Sie die Ebene ausgewählt haben, wird manchmal einfach die Füllung kopiert. Ich möchte nur die Ebene hierher kopieren, kopieren und einfügen. Ich habe zwei davon, die Oberseite und die Unterseite wird unten heißen Hier wird es etwas verwirrend. Lass uns den Augapfel am oberen ausschalten. Bupp. Nichts hat sich wirklich geändert, also schauen wir uns die unterste an In der unteren Version möchte ich die Maske ausschalten und die Vollversion einschalten . Verwirrt. Es ist ein bisschen verwirrend. Es ist wie der Anfang. Schnappen wir uns das Oh, das Ellipsenwerkzeug. Ich schiebe die Option oder Shift und LT, und ich werde es so einstellen, dass ich ein bisschen vom Hintergrund bekomme und der Deckel oben herausragt Jetzt möchte ich mit Hintergrund maskieren. Wer weiß, was falsch ist, wenn man diese beiden zusammen maskiert? Das ist richtig. Das muss hinten sein. Ich werde das mit meinen eckigen Klammern tatsächlich nach vorne bringen . Jetzt muss ich das und die Ellipse glatt streichen, und ich werde eine Maske machen. Drücke diesen Knopf hier Und wir sind fertig. Sh. Wir müssen nur einschalten. Das ist unser Top. Lass es uns einfach so bewegen, dass es dort aussieht. Eigentlich nein, das ist der Boden und wir werden unseren oberen Teil aufdrehen, um diesen Teil zu füllen. Ah, Inception. Ich weiß. Im Grunde braucht man zwei Ebenen, eine, die komplett maskiert ist, nämlich diese, und dann eine, die nur zu einem Kreis maskiert ist, diese eine Aber wenn man sie übereinander legt, ist das eine Überlaufmaske Du wirst das Gleiche für diesen tun. Mal sehen, wie gut diese Maske eigentlich ist, habe ich nicht überprüft. Ich hatte nur gehofft, den Hintergrund zu verschieben, bitte behalte den Baum nicht. Bitte behalte den Baum nicht. Es hat einen schrecklichen Job gemacht. In Ordnung, ich lasse das hier drin. Es war eine gute Idee. Daumen runter. Da hast du keine gute Arbeit geleistet. Ich will nur diese Handtasche. Lass uns trotzdem herumarbeiten. Lass uns sehen , was Dan tun würde. Lassen Sie uns das rückgängig machen. Oh ja, ich weiß, was wir tun. Wird es funktionieren? Ich weiß es nicht. Also werde ich Bild 15 haben. Ich werde die Ebene kopieren und einfügen . Ich habe zwei davon. Lass uns den unteren ausschalten. Schnappen wir uns den oberen. Nennen wir sie und geben ihnen ein paar Namen. Dieser hier wird unten sein. Das mache ich nur, weil du zuschaust und versuchst, das klarer zu machen. Toller Name. Gut, also was ich tun werde, ich werde darauf doppelklicken. Ich will das Ding zuschneiden und ich will sehen, ob ich es auch bekommen kann. Schneide das zuerst zu. In Ordnung. Lass uns das versuchen. Ja ja ja Schließe es jetzt, willst du den Hintergrund verschieben? Ordnung. Ich bin ein Genie. Jetzt können wir den unteren ein - und den oberen ausschalten, und ich möchte das einfach maskieren. Du kannst das so machen, wie ich es dir gerade gezeigt habe, indem du hier reingehst und es auf Zuschneiden umstellst. Es gibt eine Abkürzung. Sie können die Befehlstaste gedrückt halten, und sie wird oder die Tastenkombination PC drücken und wir springen direkt zum Zuschneiden über Tastenkombination PC drücken und wir springen direkt zum Das will ich. Ich will dich, ich will dich, vielleicht sogar ein bisschen niedriger. So etwas in der Art. Wir werden es tun. Da haben wir es. Das ist es, wonach ich gesucht habe. Was ist es? Es ist eine Heldenbox. Lassen Sie mich etwas Text hinzufügen. Jetzt fehlt mir nur noch etwas, damit du gehen kannst, wenn du willst. Ich nehme mein Rechteckwerkzeug und sollte einen Rahmen verwenden. Ich werde das in die Länge ziehen. Ich versuche, es an den Rändern zu knacken. Das wird es. Gut. Zeig dir, was ich tun möchte , damit der Text wie am Anfang dieses Videos herauskommt. Ich komme zurück und nehme das Intro danach auf. Wird das funktionieren? Ich weiß es nicht. Ich werde es mit einem Farbverlauf füllen . Diese Seite wird schwarz sein. Diese Seite wird schwarz sein, aber eine bessere Transparenz haben, sogar volle Transparenz, dann werde ich das einfach hierher verschieben, so etwas Ähnliches, und die Transparenz auf dieser Seite reduzieren. Ist das lang genug? Fühlt sich an, als wäre es lang genug. Jetzt kann ich Text hinzufügen. Tippen Sie, um ein neues Telefon auszuwählen, ich werde mein Ultra benutzen , es in zwei Teile aufteilen und fertig. Ich werde ein paar Farben auswählen und mit dem Zeilenabstand spielen. Ordnung, es hat Farben. Ich hatte das Gefühl, dass es besser werden würde. Jedenfalls haben wir das. In meinem Kopf schien es cooler zu sein. Aber es war praktisch, einen kleinen Trick zu finden, um unser Maskierungsproblem zu umgehen um unser Maskierungsproblem zu umgehen bei dem nicht alles maskiert Also doch ein Sieg, und das sieht immer cool aus. Bilder, die außerhalb von Kreisen stechen. Das ist es. Ich werde dich im nächsten Video sehen. 73. So maskieren Sie Bilder mit Text in Figma: Hallo zusammen, ich werde euch zeigen, wie man ein Bild innerhalb von Text maskiert Es ist super einfach. Der Text ist immer noch editierbar Es gibt ein paar Möglichkeiten, das zu tun. Lass mich dir zeigen, wie. Lass uns Rowdy holen Buchstabiert man Rowdy so? Das wird reichen. Wir beginnen mit der tollen Abkürzung, denn wenn Sie Text maskieren wollen, muss der Text dick genug sein, um das Bild zu sehen. Du könntest es in Text machen, aber es ist nicht so gut. Wir haben es zu Beginn des Kurses getan, Sie können Command oder Control B drücken, das macht es einfach fett. Aber wussten Sie, dass Sie auf einem PC die Befehlstaste Strg+Alt gedrückt halten auf einem PC die Befehlstaste Strg+Alt und einfach Ihre Tasten größer als und kleiner als verwenden Oh, ich weiß. Es spielt mit einem Gewicht herum. Kannst du hier drüben sehen, ich werde die Abkürzung benutzen, schau zu. Es geht von leicht über normal bis mittelstark bis halbfett. Ich werde ganz nach Schwarz gehen. Du brauchst eine Schrift. Ich verwende Inter, das all diese verschiedenen Optionen hat, aber das ist eine coole Abkürzung. Ordnung. Also was wir tun müssen, ist meiner Meinung nach der beste Weg, dass wir das dort nicht einmal brauchen. Wir müssen es ausgewählt haben und wir können zum Bearbeiten und zum Kopieren von Eigenschaften gehen. Mit diesem können wir Eigenschaften einfügen, was sich im selben Bit befindet, oder Sie halten die Befehlsoption V auf einem Mac und Control Ol V auf einem PC gedrückt . Jetzt ist es da drin, also ist es maskiert. Ich habe dafür ein schreckliches Bild angeklickt , weil es irgendwie mittendrin Was wir tun können, ist, dass ich dir noch einen geben werde. Eigentlich gebe ich dir nur den langen Weg, dann gebe ich dir die Abkürzung. Also das Bild ist da drin. Es ist eine Füllung als Teil dieses Textes. Ich kann nur auf das Bild klicken, und anstatt zu versuchen, den Text auszufüllen, können wir den Text springen, nicht anordnen, sondern zuschneiden. Okay? Also können wir uns dieses Hintergrundbild schnappen und etwas finden, das in Bezug auf den Zuschnitt etwas mehr unseren Vorstellungen Sie können es auch hier drehen. Ich muss es jetzt größer machen. Du verstehst die Idee. Es ist also nur eine süße Abkürzung, um es in eine Füllung umzuwandeln. Gehen wir dahin zurück, wo es kaputt war. Gehen wir da hin. Es ist kein Zuschneidebild, aber wenn ich meine Option KenemaCo auf einem PC gedrückt halte und darauf doppelklicke, ist das irgendwie magisch eine Abkürzung, um es auf Zuschneiden statt auf Füllung umzuschalten Ist das nützlich? Wahrscheinlich nicht. Es ist allerdings der Kurs für Fortgeschrittene. Es gibt seltsame Dinge in meinem Gehirn, die ich teilen möchte. Da haben wir's. Okay, das ist eine Möglichkeit, eine Maske anstelle von Text zu erstellen. Der Vorteil ist, dass wir unruhig werden können und Sie sehen können, wie es wieder fließt Der Text ist vollständig editierbar. Die andere coole Sache ist, kannst du es im Ebenenbedienfeld sehen? Es ist nur dieser Text, der zufällig eine Füllung hat. Die andere Art, es zu tun, ist mit einer Maske. Das hole ich mir. Ich werde die Füllung bei Grau loswerden , wieder da, wo wir waren, als wir angefangen haben Nimm mein Werkzeug, um es zu verkleinern, bring es dahin, wo ich es in die Mitte werfe Du kannst nur eine Maske benutzen. Daran ist nichts wirklich falsch, außer dass der Text dahinter stehen muss. Da haben wir's. Jetzt kann ich beide auswählen und mein Maskenwerkzeug verwenden. Ich denke, es ist Command Option. Nein, das minimiert es. Okay, wir sind zurück. Ich kann mich nicht erinnern Wenn diese beiden ausgewählt sind, gibt es hier oben eine Option, die besagt, dass Maske verwendet wird. Da ist sie. Es ist Command Control M. Andernfalls minimiert es auf einem Mac Stellen Sie sich vor, das ist immer noch Control Alt auf einem PC. Probiere es aus. Ich bin mir nicht sicher, ob der PC die Minimierung hat. Der Unterschied hier ist, kannst du diese hässliche alte Maskierungsgruppe sehen Es ist ein bisschen klarer, okay? Also, weißt du, ich kann meinen Text sehen. Ich kann mein Bild sehen. Es ist in dieser sogenannten Maskengruppe. Daran ist nichts wirklich falsch. Okay? Der Text ist immer noch editierbar Ist er immer noch editierbar? Ja, ist es Es ist allerdings komisch, es wird nicht als Text angezeigt, und wenn ich darauf doppelklicke, gehe ich in die Maske. Aber wenn ich mein Textwerkzeug nehme und hier reingehe und es auswähle, funktioniert es. Ich verstehe die Idee wirklich. Es liegt an dir, wie du es machen willst. Beide funktionieren, und ich zeige Ihnen beide, weil Sie die Akte von jemandem bekommen und jemand wird es so machen lassen und jemand wird es so machen lassen und Sie werden sagen, was zur Hölle Aber jetzt weißt du es. Außerdem lernen wir einige andere süße Abkürzungen. Option oder einem Doppelklick wird direkt ein Zuschnitt daraus. Und aus irgendeinem Grund gefällt mir das Tastenkürzel für die Schriftstärke, die Befehlsoption oder die Strg-Alt-Taste verwende die Tasten „Größer als“ und „ Kleiner als“, um die verschiedenen Schriftstärken abzuarbeiten. Oh, wir werden immer weiter. Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. 74. Verwenden von Farbebenenmischmodi in Figma: Hallo, alle zusammen. Wir werden uns die Farbmischmodi ansehen. Das bedeutet, dass wir mit diesem JPEG, das keine Transparenz hat, einige interessante Dinge diesem JPEG, das keine Transparenz hat, Wir können sagen, in Ordnung, Bam, du bist jetzt durchsichtig und wir können einige kreative Dinge mit Farben und Bildern machen einige kreative Dinge mit Farben und Bildern Wir können das auch mit Text machen, wo es sich auf den Hintergrund auswirkt, das nennt man Ebenenüberblendungsmodi Lass uns reinspringen und es uns ansehen. Bringen Sie zunächst die Logos eins, zwei und drei aus Ihren Übungsdateien mit ein. Das hier ist nur ein JPEG. Aber ich muss es transparent machen und da können Mischmodi praktisch sein Wo es ausgewählt ist, benutze diesen kleinen Tränentropfen hier drüben und du kannst dich durcharbeiten , normal ist das, was es standardmäßig ist Aber du kannst sehen, oh, schau, dich vermehren und abdunkeln Gehen wir multiplizieren. Toll mit einem schwarz-weißen Logo. Sie können sehen, dass es jetzt durchsichtig ist. Sehr cool. Jetzt wird es vom Bild abhängen. Also diese weiße auf schwarze Version. Schau dir das Gleiche noch einmal an, multiplizieren, funktioniert nicht so gut. Es funktioniert. Schau es dir an. Da ist ein Loch drin. Das willst du vielleicht. Ich nicht, Sie können sich durch einige der anderen arbeiten , und lassen Sie uns einen Blick darauf werfen, was bei diesem funktionieren könnte. Eins unten funktioniert. Perfekt. Lightning-Bildschirm. Was Sie finden werden, ist die Linien dort zu sehen. Diese Gruppe macht etwas Ähnliches, nicht genau, aber ähnlich. Das Gleiche gilt für diese. Diese machen alle etwas Ähnliches, aber nicht genau. Diese sind ähnlich, aber nicht genau. So gruppieren sie sie. Zurück zu Lighten. Nun, wenn es gemischte Farben gibt, kann es etwas schwieriger sein Also kann ich mich darauf einlassen und mich verdunkeln. Es funktioniert irgendwie, aber du kannst den Unterschied zwischen normal und multiplizieren sehen zwischen normal und multiplizieren Es hat die Farbe ein wenig abgedunkelt, was für mich als Designer eine Nervensäge ist, und wenn es Dinge verdeckt, kann man sehen, dass es einige besondere Dinge macht Nun, das würde für ein farbiges Logo nicht funktionieren, vielleicht reichen , um über die Runden zu kommen, aber wofür es nützlich ist, sind einige Farbmischungen Toll, wenn Sie nur ein Logo haben, das keine Transparenz auf der Rückseite Sie könnten Ihren entfernten Hintergrund verwenden oder einfach mit den Mischmodi herumspielen Sie müssen einen weiteren Rahmen erstellen und ein Bild einfügen , das Sie sich vorgestellt Ich habe ein Bild namens Layer Blend mitgebracht . Das kannst du auch mitbringen. Was ich tun werde, ist, es in den Hintergrund zu stellen . Wir können es einfach da stehen lassen. Es spielt eigentlich keine Rolle, ob es eine Füllung im Hintergrundrahmen oder nur um ein Bild handelt, das sich ganz unten in meinem Ebenenfenster befindet. Lassen wir es so. Was wir tun können, ist zum Bild zu gehen und wir können hier reingehen und mit den Mischmodi hier herumspielen Aber eigentlich werden wir zuerst mit der Belichtung herumspielen Lassen Sie uns eigentlich mit der Sättigung herumspielen, sie herausnehmen und dann mit Kontrast und Belichtung herumspielen, und dann mit Kontrast und Belichtung herumspielen um das zu bekommen, was wir wollen Was wir wollen ist, ich weiß es nicht. Ich spiele nur damit herum. Einfarbig, damit wir Dinge übertreiben können. Ich nehme einen großen alten Kreis, ok, ganze Schicht, großer alter Ich werde mir hier eine Farbe aussuchen, vielleicht eine meiner Farben. Das Coole daran ist, ich weiß nicht, wo ich es hinstellen soll. Sie können auch mit den Mischmodi spielen Die Farbe hier unten erscheint hier, wie wir es zuvor mit den Logo-Bildern gemacht haben, dieselbe kleine Träne, und wir können damit herumspielen Schau, wie cool das ist. Plus dunkler. Oh, ich mag es. Verbringe Ewigkeiten damit, durch diese zu radeln und den einen zu finden. Ich mag den. Überlagerung. Sie können mehr als einen haben und Sie können sehen, wie sie sich verdoppeln Ich werde tatsächlich eine andere meiner Farben wählen, 500. Lass uns diesen versuchen. Hier gibt es ein interessantes Overlay. Es gibt einige coole Dinge, die du mit Mischmodi machen kannst. Sie können es auch mit Text machen. Ich habe einen weiteren Rahmen erstellt und einfach etwas Text eingefügt und wir können genau das Gleiche tun und mein Ka-Tool verwenden, um es schön groß zu machen , es zu drehen. Es wird ein großes bisschen abstrakter Text sein. Okay, und zurück zu meinem Bewegungstool und meiner Darstellung. Das Gleiche. Arbeiten Sie sich einfach durch, finden Sie etwas, das Ihnen gefällt, oder Olagds ist mein Favorit Das ist ziemlich cool. Oh, Unterschied Okay? Mischmodi können also auf alles angewendet werden, und Sie erhalten nur einen anderen Effekt Manchmal ist es nützlich für Logos, manchmal ist es einfach ein kreativer Effekt Dies kann in CSS neu erstellt werden, oder Sie können es einfach als Bild exportieren , um es in Ihrer App oder Website zu verwenden Richtig, das sind Mischmodi . Wir sehen uns im nächsten Video 75. Klassenprojekt 18 - Werbung in sozialen Medien: Hallo. Es ist Zeit für ein Klassenprojekt. Wir werden viele der Dinge, die wir zuvor getan haben, weiterführen. Okay? Also hier ist es, Class Project 18, du wirst gebeten, eine Social-Media-Anzeige zu schalten , die für deine App wirbt. Ich möchte nur, dass du diese Techniken einbeziehst. Also Textmaske, Spillover-Maske und Ebenenmischmodus Die Spillover-Maske habe ich mir ausgedacht. Es ist einfach dort, wo Dinge wie diese hier rumhängen, das Telefon hängt rum. Außerhalb einer Maske. Wir haben es vorhin gemacht, aber nur damit du es weißt, ich glaube nicht, dass es jemand anderes eine Spillover-Maske nennt Aber da sind meine Textmasken-Sachen drin, und ich habe hier mit den Mischmodi mit dem Hintergrund herumgespielt hier mit den Mischmodi mit dem Hintergrund Es muss kein kreatives Genie wie meins sein. Ich weiß es nicht. Es ist schnell. Es geht mehr darum diese drei Dinge da reinzubringen und mit ihnen zu üben. Ich habe eine neue Seite namens Social Media Add erstellt und die quadratische Instagram-Größe verwendet, die 1080 mal 1080 ist. Mir ist eigentlich egal, welche Art von Social-Media-Anzeige oder Größe. Es geht hauptsächlich um die Maskierungstechniken. Viel Spaß Mach etwas. Nun, wenn du wie ich, Techniken in eine Anzeige zwingst , führt das zu durchschnittlichen Ergebnissen. Üben. Aber wenn du es schaffst, würde ich es gerne sehen, den sozialen Medien teilen und auch deine Aufgabe hochladen Du kannst entweder einen Screenshot machen oder du klickst darauf und vergiss nicht, den Export zu verwenden, ihn in die Klassenprojekte hochzuladen und online zu teilen Markiere mich, wenn du kannst. Das ist nicht das richtige Beispiel. Da hast du's. Behoben. In Ordnung. Viel Spaß. Wir sehen uns im nächsten Video. 76. Wie man Video in Figma hinzufügt: Ordnung, es ist Zeit zu lernen, wie man Videos in Figma-Prototypen verwendet Videos in Figma-Prototypen Wir werden diesen glücklichen kleinen Mops in den Text einschleichen . Sie können es auch einfach in einem normalen alten Videoframe verwenden. Sie können darauf klicken, um es zu stoppen und zu starten. Ja, schauen wir uns Videos und Happy Little Pugs an. Ordnung, eine kurze Sache, bevor wir anfangen , ist, dass, wenn du die kostenlose Version von FIGMA benutzt, glaube ich nicht, dass sie dich Videos machen lassen Es ist also eine Art Zuschauen und lernen, wie man Videos benutzt Aber wenn du die kostenlose Testversion hast oder ein kostenpflichtiges Konto hast, können wir Videomaterial machen. Springen. Ich fange mit einem leeren Frame an, auf dem ein paar einfache Navigationselemente stehen. Jetzt werden Videos nur mit dem normalen Importbild importiert. Command Shift K, Control Shift K auf einem PC. In den Übungsdateien gibt es einen Ordner mit Videos, und ich sollte den reinbringen, weil es mehr, ich weiß nicht, lahme Technik ist, aber ich habe diesen Typen gefunden Ich werde den Mops mitbringen. Ich werde auf Öffnen klicken Wie zuvor bei Bildern können Sie einmal klicken und sie werden in voller Größe angezeigt. Andernfalls können Sie klicken und ziehen. Es kann eine Weile dauern , bis Sie für den Import bereit sind. Aus irgendeinem Grund scheint es zu beschleunigen, wenn Sie mit der Maus herumschütteln scheint es zu beschleunigen, wenn Sie mit der Maus herumschütteln Wenn Sie bereit sind, klicken Sie einfach darauf und ziehen Sie es heraus. Perfekt. Du hast ein Video. Das ist es. Wir werden ein bisschen mehr machen, aber lassen Sie uns eine Vorschau dieses Typen sehen. Das Laden dauert eine Weile, aber da ist es. Da ist ein glücklich aussehender Mops. Schauen wir uns nun etwas mehr Details an. es ausgewählt ist, werden Sie feststellen, dass Sie unter dem Prototyp einige weitere Einstellungen dafür vornehmen können. Ihr könnt hier sehen, wo das Bild ausgewählt Unter Prototyp habe ich Dinge wie Autoplay Standardmäßig wird es automatisch abgespielt. Sie können es in eine Endlosschleife bringen, wenn Sie möchten. Es ist standardmäßig Looping, Sie können den Ton ausschalten, wenn er etwas hat Du willst es nicht. Meins hat keine. Nun, das Coole an Videos ist, dass sie wie eine Füllung sind. Die Füllung dieses Rechtecks ist ein Video, wie wir es mit Bildern machen. Habe ich ein Bild oder ist es ein Bild? Bitte warte. Dieser hier ist nur ein Rahmen mit einer Bildfüllung. Gehen wir zurück zu diesem Typen. Hier wird es chaotisch. Hier sind wir Das Coole daran ist, dass ich es mir schnappen, kopieren und solche Dinge machen kann . Du wartest dort. In Ordnung. ROP zum Mops. Pug Life, wir gehen und es ausgiebig probieren. Eigentlich können wir es einfach einfügen. Wir haben es von hier kopiert, dort eingefügt und es sollte funktionieren. Lass es uns versuchen. Es hat funktioniert. Ich bin mir nicht sicher, warum die Schrift nicht geladen wird. Es funktioniert. Ignoriere die Schrift. Lass es uns nochmal versuchen. Oh, ich frage mich warum. Bist du bei der Ich werde schließen und sie wieder öffnen? Ordnung, ich habe es getan. Einfach aus- und wieder einschalten. Stecken Sie den Text ein Ich liebe es. Der Hund sieht aus, als wäre er permanent gegen Glas gedrückt worden. Es gibt einige Einschränkungen. Ich spiele die meisten Videodateien ab, MOVs, MB Fours , solche Dinge Du kannst da keine gigantischen Dateien reinlegen. Ich glaube, früher waren es 100 Megabyte. Ich bin mir nicht sicher, was es jetzt ist. Versuchen Sie nicht, zwei Gigabyte-Videodateien hineinzulegen. Lassen Sie uns ein paar Interaktionen hinzufügen. Im Moment wird es automatisch abgespielt. Lass uns das ausschalten. Wir können eine Interaktion hinzufügen, die besagt, dass ich das Video abspielen und pausieren möchte. Es gibt diese kleine Interaktion , die nirgendwohin führt. Aber hoffentlich, wenn wir das unten bei Autoplay machen , spielen wir dieses Spiel nur, wenn wir darauf klicken Wir machen es. Das war's für das Hinzufügen von Videos. Ziemlich einfach. Lassen Sie uns im nächsten Video etwas mehr Interaktion hinzufügen . 77. So erstellen Sie einen Button für die Wiedergabepause für Videos in Figma: Hallo. In diesem Video werden wir in Figma eine Abspiel - und eine Pause-Taste für Videos erstellen Figma eine Abspiel - und eine Pause-Taste für Videos Lass uns reinspringen. In Ordnung. Um zu beginnen, habe ich zwei Icons aus meinem Icons Free-Ordner hinzugefügt. Es heißt Video Icon Play and Pause. Ich habe auch ein Video aus der Videodatei übernommen. Dieses ist zufällig Video 02. Was wir tun werden, ist, dass sie wirklich, wirklich gut durchgesetzt haben. Ich werde sicherstellen, dass ich auf den übergeordneten Frame klicke, K drücke und nur sicherstelle, dass sie es sind. Ich werde sie wahrscheinlich auf eine Höhe von 32 erhöhen. Ich werde diese beiden benutzen. Ich werde sie zu Komponenten machen. Ich werde sagen, dass Sie aus mehreren Komponenten bestehen. Ich sollte sie auf meine Komponentenseite verschieben und dann Instanzen davon herausziehen , nur um alles richtig zu machen. Ich werde sie mischen. Du gehst über diese Seite und wir machen einfach eine Pause, du gehst auf diese Seite. Ein bisschen groß. Es ist okay. Was wir tun werden, ist, in einem Prototypmodus Button zu sagen. Wir sagen, du hast eine Interaktion, und wenn du angeklickt wirst, möchte ich, dass du etwas spielst Was? Welches Video? Ich möchte, dass du den einzigen auf diesem Bild spielst. Und möchte ich, dass es umgeschaltet wird? Nein, ich wollte nur spielen. Lass es uns versuchen. Sehen wir uns eine Vorschau dieses Frames an. Laden des Videos dauert eine Weile, und dann funktioniert es. Die Schaltfläche funktioniert, aber sie ist auf Autoplay aktiviert. Wer erinnert sich, wo ich Autoplay ausschalten kann ? Es ist genau da, Dan Du hast recht. Schalten Sie unter Prototyp mit dem ausgewählten Video die Option Autoplay aus Lassen Sie uns jetzt diesen zum Abspielen bringen. Lass uns zu einer zufälligen Seite gehen. Lass uns darauf klicken und eine Vorschau ansehen, und jetzt wird es nicht automatisch abgespielt, aber ich drücke auf die Play-Taste und es wird abgespielt und ich muss Pause drücken Ich werde genau das Gleiche tun wie zuvor. Wenn du klickst, will ich, dass das Video pausiert, und was will ich? Ich möchte zu dem Video gehen, und was möchte ich tun? Nur Pause. In Ordnung, lassen Sie uns das versuchen. Abspielen. Pause, wir sind Genies Schau uns an. Jetzt werden wir nicht alle behandeln. Die anderen Dinge, die du mit Video machen kannst , nur weil ich es nicht weiß. Video in Mockups, vielleicht ein bisschen weit, kann für einige von ihnen praktisch sein, vor allem, wenn Sie eine spezielle App rund um Video machen, dann müssen Sie sich vielleicht etwas mehr Mühe geben Videos in Mockups zum Laufen zu bringen Ich möchte es dir hier zeigen, du kannst es mit einem Klick auf Play pausieren. Es gibt Dinge wie Stummschalten. Man kann zu einer bestimmten Zeit springen, man kann ein paar Sekunden vorspringen. Du kannst hier noch ein paar andere Dinge tun. Sie sind ziemlich selbsterklärend. Sie funktionieren genauso wie Abspielen und Pausieren. Ich lasse dich damit spielen, wenn du musst. In Ordnung. Das ist eine Pause beim Abspielen des Videos in Figma. 78. So erhalten Sie eine Videowiedergabe, wenn Sie in Figma schweben: Ich Hallo, da. Wir lassen ein Video abspielen, wenn Sie mit der Maus darüber fahren . Schau dir das an Ignoriere, dass wir ein Handy haben, auf dem man nicht schweben Ich arbeite gerade zufällig auf Mobilgeräten, aber das wäre für eine Desktop-Website, auf der die Maus darüber fährt und das Video in der Vorschau angezeigt Sehr cool. Lass uns reinspringen. In Ordnung. Ich habe gerade ein Video reingebracht. Lass uns eine Vorschau davon sehen. Es wird einfach automatisch wie gewohnt abgespielt. Und Sie könnten annehmen, was ich zu Beginn angenommen habe , war, dass, wenn ich in den Prototypmodus, Option neun, Alt neun, wechsle , nur eine kleine Erinnerung daran, zum Prototyp zu wechseln , ist, dass Sie wahrscheinlich, richtig, einfach eine Interaktion hinzufügen und auf Ha kann ich das Video abspielen. Es wechselt. Es sagt: Nein, du musst geklickt werden. Du sagst, das funktioniert nicht. Ich werde diese Interaktion loswerden. Stellen Sie sicher, dass Sie es loswerden. Ich gebe auch zu , dass ich ein Handy benutze , auf dem man nicht schweben kann Das ist richtig. Tu so, als wären wir auf einem Gerät wie einem Laptop, wir haben eine Maus und du kannst schweben Was wir tun müssen, ist dir hier drüben zu sagen , dass wir eine Variante machen werden Wir haben das schon einmal gemacht, aber nicht mit einem Video. Zurück zur Entwurfsansicht, wir werden sagen, dass Sie eine Komponente sind. Wir werden zwei Varianten von dir haben. Eine davon wird im Prototypenstadium sein, Video ausgewählt. Oh, das ist ein gutes Argument. Wenn ich das habe und du sagst, wo hat Autoplay gespielt? Was passiert ist, kannst du hier sehen, diese Varianten runden das Video ab diese Varianten runden das Video Wenn ich das Video ausgewählt habe, kann ich es mit Autoplay abspielen Es heißt auch „Je besser“. Das ist der unterste. Das ist eine Variante des Eigenschaftsnamens von Actually, nenne sie hier. Wenn das übergeordnete Objekt ausgewählt ist, wechseln Sie zum Design. Lassen Sie uns das alles schön benennen. Dieser heißt Video Hover, und wir haben diesen ersten , der Standard heißt. Ich werde diesen umbenennen Dieser ist die Pause. Warum nicht? Dieser heißt Play. Denken Sie daran, um das Autoplay zu bekommen, müssen wir uns im Prototypenmodus befinden Bei der ersten Variante doppelklicken wir entweder oder gehen in die Variante und schnappen sie uns und sagen, die erste wird automatisch Das hier, geh rein, schnapp dir das Video, du machst Autoplay Jetzt müssen wir eine Interaktion hinzufügen, die erste nehmen, nicht das Video, sondern die übergeordnete Variante. Ich weiß nur, dass das komisch ist. Was wir sagen werden ist, du gehst dorthin, wenn es angeklickt wird Nein, wenn es schwebt und ich auf Video Hover umstellen dieses Ding hier auf Video Hover umstellen werde, wird das funktionieren Müssen wir das wieder ändern? Weiß nicht. Nehmen wir ein Exemplar davon und ziehen es raus. Das ist eine Variante, wie wir sie schon einmal gemacht haben. Nur ein bisschen komisch, dass wir mit einem Video herumspielen. Lass uns das mal spielen, es funktioniert nicht, funktioniert nicht. Schweben Sie. Hey, geh los und es hört auf Hui. Oh, wir haben ein Handy, auf dem du nicht herumfahren kannst. Aber wir haben es geschafft. In Ordnung. So lässt man ein Video abspielen, wenn man mit der Maus darüber fährt. In Ordnung. Wir sehen uns im nächsten Video. 79. Klassenprojekt 19 - Grafikkarte: Stimmt, es ist Zeit für ein Klassenprojekt. Mach dir keine Sorgen, wenn du das kostenlose Konto hast. Ich habe eine Nebenaufgabe für dich. Aber wenn du die kostenpflichtige Figma der Option hast oder den Trail benutzt, möchte ich, dass du so etwas baust, eine Karte, die die Pause hat Schauen wir uns die Details an. Eine Grafikkarte mit der Play-Pause-Taste und einem Videotitel. Recherchiere ein wenig über die Benutzeroberfläche für Videoplayer. Ich habe Ihnen hier einige Beispiele für Ausflugsziele gegeben. Sie können einfach eine Google-Suche nach der Benutzeroberfläche des Videoplayers durchführen. Ich habe eine wirklich einfache. Vielleicht findest du etwas Interessanteres zum Nachmachen. Dann teile ein Video, in dem du dein Video verwendest, lade den Link zu den Klassenprojekten hoch oder ich lasse dich einen Screenshot deiner Grafikkarte machen. Ich kann nicht wirklich testen, ob es funktioniert. Und das Gleiche gilt für freie Menschen. Sie haben kein kostenpflichtiges Konto. Ich möchte, dass du mit dem Bild, das du hochlädst, kreativ wirst. Ich habe mir einige der anderen angesehen. Ihr seid großartig. Überlegen Sie sich schnell und einfach Ihre eigene Version von etwas , das heißt, ich habe kein kostenpflichtiges Figma-Konto Ich liebe all diese. Alles klar. Egal, ob du bezahlt bist oder das kostenlose Konto nutzt, werde kreativ, erstelle ein Video oder ich bin mir nicht sicher, warum da eine Katze involviert ist, aber lade etwas zu den Klassenprojekten hoch. Hoffentlich hast du die kostenpflichtige Version und kannst sie zum Laufen bringen. Ansonsten heulende Katzen. Ich werde es gleich sehen. 80. Erweiterte Farbtricks in Figma: Hallo, meine Freunde. Wir werden Nerdy mit Farbe bekommen Ich zeige dir einige der Farbtricks und einige der Seltsamkeiten, die in Figma passieren. Lass uns reinspringen. Erstens habe ich hier einen schlichten Rahmen. Pipette ist die Augentaste für den Augapfel, aber in Wirklichkeit ist es das Wissen Sie, was ich meine? Ich kann Farben aus dem Bild nehmen. Siehst du, ich werde es mir schnappen und es gibt mir die IX-Nummer dafür. Das Problem ist, wenn ich das Pipettenwerkzeug benutze und es beispielsweise von diesem hier stehle, das meine Stilfarbe aufgetragen wurde, siehst du, es bringt die X-Nummer rein, nicht den Wenn ich darauf klicke, ist das ein primärer Farbstil. Das hat nur die Hexadezimalzahl gestohlen , sie sind nicht miteinander verbunden. Wenn ich meinen Stil aktualisiere, kommt das nicht mit, was knifflig sein kann. Zurück zum Itol, das Sie tun können, ist, ob Sie dort sehen können , wenn ich die Umschalttaste gedrückt halte und darauf klicke, Sie sehen, dass dort nicht die Hexadezimalzahl steht, sondern die Primärfarbe Jetzt sind diese miteinander verbunden. Gleiche hier drüben. Ich will diese Farbe, aber ich will den tatsächlichen Stil. Halte die Umschalttaste gedrückt, dann wird der Stil der Farbe übernommen, nicht das Hexadezimalzeichen. Das kann dich einholen. Als Nächstes können Sie, wenn Sie beispielsweise auf ein Bild klicken und dessen Deckkraft verringern möchten, die Zahlen oben auf Ihrer Tastatur verwenden Das kennst du wahrscheinlich schon. Wenn du vier triffst, wird es sich zu ändern. Siehst du die Deckkraft auf 40%, tippe acht, für 80, wenn du schnell bist, kannst du 66 machen Es wird nett und schnell gehen. Wenn du zu 100% zurückkehren willst, triffst du die Null, und wenn du komplett durchsichtig sein willst , Null, Null. Du musst sie nur schnell zusammen eingeben. Zehn, 20, 30, Null für vollständig und doppelklicken Sie auf Null, um vollständig transparent zu werden. Ich werde einmal auf Null gehen, um es wieder herzustellen. Es funktioniert für alles , was Sie ausgewählt haben. Färbt Bilder und funktioniert sogar auf dem Video. Erstens, wenn Sie mit Ihrem Film herumspielen und eine alte Farbe wählen, wenn Sie ein Scrollrad haben, schauen Sie sich Ihre Maus an, vielleicht haben Sie ein Scrollrad, vielleicht auch nicht. Das tue ich. Ich benutze hier mein Scrollrad über diesem Farbbereich. Kannst du sehen, dass es einfach mit einem Farbton fehlt. Ich kann mit meinem Scrollrad weiterrutschen. Wenn du auf einem PC die Optionstaste oder die alte Taste gedrückt hältst, spielt es mit der Transparenz nach oben und unten herum, siehst du? Nützlich? Vielleicht nicht. Ich verwende den Farbton, nicht so sehr den Opazitätsmodus. Der nächste ist hier unten. Standardmäßig ist es auf Hicks, was einfach zwischen Programmen kopiert und eingefügt GB, vielleicht haben Sie ein Unternehmenshandbuch, das Sie dort eingeben möchten CSS ist interessant. Wenn Sie CSS verwenden oder Ihrem Entwickler eine Farbe geben müssen, ist dies RGBA, das Rot, Grün und Blau ist, und das ist das Transparenz-Alpha Ich gebe 0,5 ein, es wird zu 50% transparent sein. Ich verwende HSL, Farbton, Sättigung, Helligkeit nicht. Ich verwende häufig HSB, Farbtonsättigung Ähnlich. Ich mag das, weil ich es hasse, es runterziehen zu müssen und ich wackle es runter, weil du sagst, ich will eine dunkle Farbe Was Sie tun können, Farbton, Sättigung und Helligkeit, Sie können gehen, alles klar, Helligkeit Ich kann die Umschalttaste gedrückt halten und einfach nach oben gehen. Kannst du sehen, dass es einfach auf und ab springt? Ich finde das wirklich gut, um eine wirklich dunkle Farbe dieser bestimmten Farbe auszuwählen eine wirklich dunkle Farbe dieser bestimmten Farbe , ohne zu hoffen, dass sie glatt geht Ich klicke einfach da rein und benutze meine Shift-Taste und gehe hoch und runter, lasse die Schicht los, dann geht es in kleineren Schritten Ich benutze sie nicht, du kannst. Die Sättigung geht nach links und rechts. Und Hue ist nur der Farbtonregler. Ich benutze ihn nicht oft, aber ich liebe es, mir diesen zu schnappen und ein bisschen runterzugehen Ich möchte eine etwas dunklere Farbe von diesem. Ich wechsle zu HSB. Wenn du fertig bist, haben sie alle dieselbe Farbe, nur unterschiedliche Darstellungsweisen. Das war's mit der Farbe Nerdiness. Das ist noch eine letzte Sache. Es ist so, als ob ich es nicht weiß. Das ist Teil des Internetrechts, wo man eigentlich einfach rot tippen kann. Okay? Ich kann hier reingehen und sagen, ich will Rosa. Warum ist das cool? Es ist nicht wirklich cool. Es ist interessant, besonders wenn man anfängt, Dinge zu sagen wie, Okay, ich will Grau Was ist, wenn ich es anders buchstabiere? Aus irgendeinem Grund gibt es zwei Schreibweisen von Grau . Es sind genau dieselben Jemand ging herum und benannte jede einzelne Farbe. Nun, nicht jede einzelne Farbe, aber es gibt viele benannte Farben. Sie werden wirklich komisch. So wie das hier. Wenn ich dunkelgrau werde, darfst du keine Leerzeichen dazwischen haben, dunkelgrau, irgendwie heller als grau. Dann die großen Namen, okay? Peach Peach ist ein guter Name. Aber sieh dir das an. PH Puff ist ein großartiger Name. Also, wenn du eine Farbe hast und sie einem Namen nahe kommt, ich weiß es nicht Es ist toll, es eintippen zu können, aber es macht auch ein wirklich gutes Branding zu einem Teil der Operation bei der man nicht FDA B 9 verwendet. Du benutzt Peach Puff, viel cooler. Du weißt schon, du kannst online ein bisschen nachschauen. Hier sind sie hier. Okay? Das ist w3.org Sie können sehen, schauen Sie sich alle genannten Farben an. Es gibt ein paar komische. Finde einen seltsamen für deine Marke. Zitronen-Chifron Oh. Ich mag die Farbe nicht, aber ich mag den Namen. In Ordnung, das war's für fortgeschrittene Farbkram. 81. Ändern von Ersatzfarben in Figma: Ich Hallo, da. In diesem Video zeige ich dir, wie du all deine Farben auf einmal aktualisierst . Einige meiner Sachen verwenden den Farbstil, den richtigen und dieser hier verwendet die Ix-Nummer. Ich zeige dir, wie du sie alle auswählst und aktualisierst, sodass sie alle den Stil verwenden nicht Teile von beidem verwenden. Lass uns reinspringen. In Ordnung. Als ich mit dem Entwerfen anfing, habe ich einfach angefangen, diese Farbe zu verwenden , bevor ich daraus einen Stil mache. Es ist wirklich üblich. Möglicherweise haben Sie versehentlich das Pipetten-Tool verwendet , um die Hix-Nummer anstelle des offiziellen Farbstils zu installieren die Hix-Nummer anstelle des , den ich verwenden wollte Der Weg, sie alle zu ändern um sicherzustellen, dass Sie konsistent sind, Sie verwenden den Stil überall dort, wo diese Farbe ist, nicht in der Ix-Farbe, ist einfach eine Auswahl Sie einfach nichts aus und wählen Sie A aus, was Befehl oder Steuerung alles ist ausgewählt, und kommen hier nach unten, wo Auswahlfarben stehen, es gibt zu viele zum Anzeigen, es heißt: Möchten Sie, dass ich sie Ihnen zeige? Ja, bitte. Ja, du kannst sehen, es zeigt dir die wichtigsten hier oben oder deinen Stil. Aber du kannst hier unten sehen, dass es heißt, zeig mir alle anderen Farben. Die, nach der ich suche, ist, was ist das? F vier, 746b. Ich werde sezieren, geh wieder runter. Ich werde sagen, zeig sie mir alle und ich werde den finden, nicht dich. Da ist es da. Da sage ich, sei keine verdammte Nummer. Ich möchte, dass du dieser Stil bist. Es wird jeden Anwendungsfall davon durchgehen. Ist dir aufgefallen, dass es von hier verschwunden ist? Das liegt daran, dass jetzt all diese Farben alle mit demselben Farbstil verbunden sind. Da ist es. Ich wette, du hast es auch für das Grün, irgendwo. Da hast du's. Es hat nichts mit dem Stil zu tun, Wendy C zwei, selectol, komm her, räume einfach alles auf, damit sie alle die richtige Farbe verwenden Ist es das da? Wenige Ich glaube, ich habe ein paar Versionen dieses Grüns verwendet. Ich werde einfach diesen auf diesen umstellen und sicherstellen , dass alles konsistent ist. Weil du am Anfang oft nur mit Farben herumspielst und dann die Dinge aufräumst. Der Typ zermürbt mich. Ordnung. So aktualisierst du all deine Farben auf einmal. Wenn Sie sie bereits Teil eines Stils haben, können Sie sich natürlich durcharbeiten und sagen , ich werde sie alle anpassen und den Stil an diese neue Farbe anpassen. Ich weiß nicht, was diese neue Farbe ist, aber du kannst dich durcharbeiten und deinen sekundären Stil anpassen und einfach irgendwie durch die verschiedenen Farben arbeiten. Es ist eine einfache Möglichkeit, sie zu aktualisieren. Ich gehe zurück, bevor ich es kaputt gemacht habe. In Ordnung, das ist es. Viele Farben gleichzeitig auswählen und aktualisieren, sie konsistent zu machen. In Ordnung, nächstes Video. 82. So erstellen Sie Farbthemen für Licht und Dunkel in Figma: Hallo, da in diesem Video. Ich möchte dir hier dieses Tool zeigen, das ich verwende. Nur ein kurzes. Ich finde es super nützlich. Sie haben Ihre Primär-, Sekundär- und Akzentfarben ausgewählt und sie eignen sich hervorragend für große blockige Dinge Sie sehen cool aus. Aber dann kommst du zu solchen Dingen. Was werden wir in Bezug auf verschiedene Textfelder tun? Wie sieht es mit einem hellen Schema aus, für das wir oft zuerst entwerfen und dann, wie Sie möchten, ein dunkles Schema benötigen. Lassen Sie mich Ihnen zeigen, wie Sie all Ihre Daten eingeben, um eine Vorstellung davon zu bekommen , was funktionieren wird und was ein guter Kontrast ist. Ordnung, ich habe einen Link dazu in Ihren Übungsdateien oder Ihren Kursprojektdateien hinzugefügt Ihren Übungsdateien oder Ihren Kursprojektdateien Alles Material Theme Builder. Es bewegt sich, sodass Sie es möglicherweise googeln müssen , wenn es verschoben wurde und der Link defekt ist. Aber wofür es sich wirklich gut eignet, ist, dass es sich hervorragend für die Farbauswahl zu Beginn eines Projekts eignet. Du kannst es durchgehen und einfach sagen: Oh, gib mir ein paar Ideen, wie die Benutzeroberfläche funktionieren könnte. Es gibt einen Standardkontrast, mittleren und einen hohen Kontrast. Das Tolle daran ist, dass ich meine Schriften ausgewählt habe, also habe ich Ultra und Roboto als die, die ich verwendet habe, ausgewählt als die, die ich verwendet habe, Aber was Sie tun können, ist hier zu sehen, dass Sie Ihre primäre, sekundäre und tertiäre Farbe hinzufügen können Ich gehe zu Figma und sage: In Ordnung, Primärfarbe, wo bist du? Dort? Ich werde mir das holen. Ich werde mir das hier unten holen. Ich nehme die Hick-Nummer und klicke hier rein, füge sie ein und klicke auf Anwenden und du kannst sehen, dass sie sagt: In Ordnung, das ist deine Grundfarbe Lassen Sie uns sie eigentlich zuerst alle hinzufügen. Wir werden den Geschwindigkeitsmodus benutzen. Ordnung, ich habe diese Farben hinzugefügt und es ist wirklich interessant zu sehen, und es ist wirklich interessant zu sehen was dieses Tool mit meinen Farben macht. Kannst du sehen, ob ich nach unten scrolle? Das ist meine Grundfarbe, und hier steht, dass ich einen guten Kontrast zwischen hellem Text und diesem farbigen Hintergrund haben sollte . Es ist richtig abgedunkelt. Das musst du nicht, aber es ist vernünftig denn manchmal endet man so Du verwendest deine wirklich starken Markenfarben zu viel , um sehr nützliche Dinge zu tun. Nehmen wir an, wir benötigen die Kontoseite, Sie müssen Ihre E-Mail-Einstellungen ändern und dafür wahrscheinlich Ihre vollen, fett gedruckten Primär- und Sekundärfarben verwenden fett gedruckten Primär- und Sekundärfarben Wahrscheinlich ist es so, dass es die Aufmerksamkeit abwertet. Was Sie tun können, ist in so etwas zu kommen und zu sagen, ich verwende das vielleicht besser, um Daten anzuzeigen, oder hier unten, genau wie kleine Panels E-Mail-Einstellungen könnten in diesem Fall hier besser funktionieren. Es ist einfach subtil, es ist nicht groß und mutig. Du könntest entscheiden, dass ich eigentlich möchte, dass es eine Version mit leichtem Kontrast von all diesen ist. Es ist nicht so dunkel. Wenn wir uns mit einigen der nützlichen Teile einer App befassen , entscheiden Sie sich vielleicht für ein schweres Medium, insbesondere wenn Ihnen Markenfarben zugewiesen werden Sie arbeiten für ein Unternehmen, das bereits ein Markenlogo hat Du willst es nicht einfach überall hinwerfen , wie wir es getan haben. Du kannst hier reinkommen und dieses Tool hier verwenden, mach dir keine Gedanken darüber, ob es iOS ist oder du Webkram machst oder für Android. Es ist einfach eine gute Möglichkeit, Ihre Farben auf eine andere Art zu betrachten , das ist ein wirklich guter konsistenter Kontrast, sie sind aus irgendeinem Grund leicht lesbar, viel zu abgerundete Ecken Jedenfalls gefällt mir das. Ich liebe es, meine Farben hineinzuwerfen, vor allem, wenn wir bereits Markenfarben haben , um ein Gefühl dafür zu bekommen, was wir tun könnten, und ich mag es, es auf den Höhenkontrast zu erhöhen. Abendessen. Dann kannst du durchgehen und sagen: In Ordnung, ich möchte die Farbe hier kopieren und du kannst sie in Figma einfügen Sie können auch Ihre Schriften auswählen . Ich benutze Ultra und Roboto, nur um ein Gefühl dafür zu bekommen, wie es aussehen könnte Aber noch einmal, mehr Vorschläge, ich finde es nützlich. Ich dachte, ich würde es mit dir teilen. In Ordnung. Das ist es. Das ist der Material Theme Builder. Ich mag es. Das könntest du auch. 83. So verwenden Sie Teambibliotheken in Figma: Hallo zusammen in diesem Video, wir werden uns Bibliotheken ansehen Bibliotheken sind eine Möglichkeit, wenn wir jetzt eine Reihe von Komponenten und eine Reihe von Farben, Schriftstilen und Effektstilen erstellt haben , Schriftstilen und Effektstilen erstellt jetzt eine Reihe von Komponenten und eine Reihe von Farben . Wir möchten sie in anderen Projekten verwenden und müssen sie nicht ständig kopieren und einfügen, oder wenn wir sie mit jemand anderem in unserem Team teilen wollen , damit sie genau dasselbe verwenden können Wir sind alle konsistent. Wir können eine Bibliothek erstellen, sie veröffentlichen, zu neuen Dokumenten wechseln, auf die nichts zutrifft. Ein neues Dokument und dann einen Rahmen erstellen und ich kann sagen, ich möchte eigentlich die Limerick-Bibliothek laden, sie der Datei hinzufügen, ich erhalte Zugriff auf alle Komponenten In diesem brandneuen Dokument habe ich außerdem Zugriff auf alle Farben aus dieser Bibliothek Ich muss kopieren und einfügen oder von vorne beginnen. Das Beste daran ist, dass ich es sowohl mit anderen Teammitgliedern als auch mit mir selbst teilen anderen Teammitgliedern als auch kann. In Ordnung, lassen Sie uns einsteigen. Erstens sind viele dieser Funktionen für kostenpflichtige Konten vorgesehen. Sie ändern es ständig bei mir, um zu sehen, wie weit Sie mit den kostenlosen Versionen kommen können. Nun, in der Vergangenheit durften Sie die Farben und Schriftstile verwenden , aber nicht die Komponenten. Ich weiß, es geht nur darum, das komplett zu bezahlen, aber sehen Sie, wie weit Sie gehen. In dem Dokument, an dem ich gearbeitet habe, habe ich eine Reihe von Komponenten für eine Reihe von Farbstilen und Textilien, Korrekturen, Varianzen und Variablen erstellt eine Reihe von Farbstilen und Textilien, Korrekturen, Varianzen und Variablen Es gibt eine Menge, die man in einer Bibliothek aufbewahren kann. Erstellen Sie die Bibliothek, wobei um das Dokument handelt, aus dem Sie sie erstellen möchten , und das ist dieses. Sie gehen zu Ihrem Assets-Bedienfeld und dort ist dieses kleine Buchsymbol. Darauf. Wir werden sagen, ich würde das gerne als Bibliothek veröffentlichen , damit andere Leute es benutzen können. Ich werde auf Veröffentlichen klicken. Ich werde sagen: Hey, du kannst es nicht tun, weil es in deinen Entwürfen Möchtest du es verschieben? Ich bleibe bei Okie Haben Sie ein Projekt, in das Sie damit investieren möchten? Ich habe nicht vor, damit aufzuhören. Ich werde zurück nach Hause gehen und zu meinen Projekten gehen. Ich werde ein neues machen. Erstelle ein Projekt. Ich weiß, dass du im kostenlosen Konto nur drei haben kannst, oder? Ich glaube schon. Ich werde einen namens Limeric Techno kreieren einen namens Limeric Techno Werde ich es mit Leuten teilen? Nicht jetzt, ich werde etwas erschaffen. Ich habe ein Projekt , in das ich gehen muss. Jetzt können wir es da reinbringen. Geh zurück, erstelle eine Bibliothek, veröffentliche das. Es heißt, es muss irgendwo in ein Projekt aufgenommen werden. Ich habe einen, in den ich gehen kann. Geh. Das ist der erste Teil. Jetzt können Sie es durchgehen und entscheiden, was Sie darin aufnehmen möchten. Es hat alle meine Farben gemacht. Willst du all deine Komponenten? Nur das eine. Ich möchte sagen , mach sie einfach alle. Schalte das ein, schalte das aus und füge alles hinzu. Möglicherweise müssen Sie zuerst Ihre Datei aufräumen. Vor allem, wenn du es mit anderen Teamkollegen oder deinem zukünftigen Ich teilst anderen Teamkollegen oder deinem Dinge wie Komponente vier zu benennen , ist wahrscheinlich nicht so hilfreich Räumen Sie das alles zuerst auf. Lass uns auf Veröffentlichen klicken Es wird wegtuckern, je nachdem , wie viele Komponenten Sie haben Schau hier unten, Umarmungen weg. Hund, ich werde das schnell durchgehen. Das Tolle daran ist jetzt dass, wenn ich ein neues Dokument erstelle, anstatt zu versuchen, Dinge aus diesem Dokument zu kopieren und einzufügen , alle meine Hauptkomponenten erstelle, was ich tun kann, ist einfach eine brandneue Datei, eine neue Designdatei zu erstellen , ich fange an, App zu erstellen. Ich werde zum iPhone 16 wechseln und jetzt möchte ich Dinge aus meiner Asset-Bibliothek hineinziehen. Im Moment ist hier nichts drin, sagen, du kannst zu dem kleinen Bibliotheksbuch gehen. Du kannst es durchsuchen. Du kannst sagen, eigentlich will ich den Limeric. Da ist er Limerick Techno, ich werde zu dieser Datei etwas hinzufügen , Schau mal, im Panel meiner Bibliothek kann ich zu meinen Komponenten gehen und anfangen, kann ich zu meinen Komponenten gehen und dieses Ding hier zu bauen, Instanzen, Tonnen, Symbole, alles, was hier erstellt wurde , alles, was hier erstellt wurde Oh. Seltsam. Ja, er war ein Hauptbestandteil. Die andere coole Sache ist, wenn ich diesen Rahmen hier kolorieren will, kann ich in meine Füllung gehen und zu meinen Stilen gehen und du kannst sagen, alle Bibliotheken, nein, ich will mir die Limerick-Bibliothek ansehen Sie können hier alle Farben aus dem Originaldokument sehen , sodass wir die Konsistenz beibehalten können . Was wirklich cool daran ist, ist, dass diese Originaldatei, Bibliotheken haben das Gefühl, dass es etwas Separates geben sollte. Wo finde ich meine Bibliotheken? Bibliotheken sind kein eigenständiges Ding. Es ist nur die Verbindung zwischen diesem Originaldokument. Wenn Sie eine Team-Bibliothek erstellen, muss Ihre Datei möglicherweise aufgeräumt werden, damit nicht überall all dieser Müll zu finden ist. Behalten Sie einfach die Komponenten, die Stile, machen Sie diese Datei etwas aufgeräumter, weil es keine Bibliotheksdatei gibt Wenn ich darauf eingehe und sage, geh zurück zur Hauptkomponente. Es wird nicht in ein separates Bibliotheksdokument verschoben, es wird nur die Originaldatei geöffnet, auch wenn ich sie geschlossen habe. Ich sage: Hey, wo ist diese Hauptkomponente , weil ich sie jetzt ändern muss. Es wird die Originaldatei öffnen , wo auch immer sie war, und Ihnen die Hauptkomponente zeigen. Das ist aus meinem Dokument Limerick Techno V One. Nehmen wir an, ich muss das ändern, weil ich es durchmachen möchte Lass es uns eigentlich etwas anders machen. Also hier, ich habe den Knopf geändert, um Tschüss zu sagen. Wir haben ein paar Dinge getan. Wir haben den Text geändert und entschieden, dass dieser Text tatsächlich eine andere Farbe hat. Wir werden den Stil 500 anwenden. Wenn ich jetzt zu meiner Hauptkomponente zurückkehre und sage: Hey, Hauptkomponente, du wirst jetzt verschiedene abgerundete Ecken haben, oder sind es 100, werde ich auf acht runtergehen. Das wird passieren, weil das die Hauptkomponente ist und sie meine Bibliothek steuert. Hier ist dieses kleine Symbol, steht: Hey, es gibt unveröffentlichte Änderungen Hier hat sich noch nichts geändert. Aber hier kann ich sagen, dass ich diese Änderungen tatsächlich gerne veröffentlichen würde. Es gibt eine Änderung. Ich werde auf Veröffentlichen klicken. Möchtest du sie alle oder nur einen von ihnen veröffentlichen? Ich habe nur einen von ihnen. Es gibt ein paar unveränderte, das ist also cool. Klicken Sie auf Veröffentlichen. Das Schöne daran ist, dass dies möglicherweise mit 20 anderen Dateien verbunden und diese nicht automatisch aktualisiert werden, was wirklich gut ist. Ich kann hier reingehen und sagen , klicken Sie auf meinen Button. Sie können hier oben sehen, dass es eine Option gibt, die sagt: Hey, es ist ein Update verfügbar. Du sagst, wer war das? Du klickst darauf und kannst sagen, möchte ich es nur aktualisieren oder kann ich das Update überprüfen? Es ist ziemlich clever. Schau, zeigt dir Seite an Seite, was passieren wird. Sie werden feststellen, dass mein Text und die Farbe, die ich geändert habe, beibehalten werden, aber die abgerundeten Ecken geändert werden. Sie können entweder nebeneinander oder überlagern. Manchmal ist es schwer zu sagen, welche Änderung vorgenommen wurde. Du sagst , was passiert ist. Du überlagerst, du meinst, sie haben mit den abgerundeten Ecken herumgespielt Lass uns auf Instanz aktualisieren klicken. Lassen Sie uns es schließen und es ist aktualisiert. Es ist eine großartige Möglichkeit, viele Dokumente zu kontrollieren. Sie haben eine Hauptkomponente und Stildokument, das mit vielen anderen Dateien verknüpft ist. Das Coole daran ist, dass diese Bibliotheken anderen Personen in Ihrem Team geteilt werden können. Wie erhalten sie Zugriff darauf? Wenn du zu deinem Projekt gehst, findest dort alle meine Projekte. Gehen wir zu Limerick Techno. Was wir tun können, ist, entweder alle Mitglieder Ihres Teams zu teilen . Das ist mein Binger-Laptop Oder gib einfach Leute ein Victoria Borode UX Designerin, ich kann sie anklicken und ihr einfach eine Einladung schicken , damit sie Zugriff auf diese Bibliothek hat Du kannst entscheiden, ob sie es ansehen und nicht ändern kann oder ob sie es auch bearbeiten kann Sie macht das ganze UX hier und bringt jetzt ihren Laptop mit, damit sie es bearbeiten kann. Oft teilt sie Dateien mit mir und ich bitte nur um Ansicht, also leg dich nicht mit Dingen an. Cool. Das Tolle ist, dass es keine Bibliothek gibt , die man suchen muss. Es ist nur eine Datei, die veröffentlicht werden kann. Es muss sich in einem Projekt befinden, und wenn Sie ein neues Dokument erstellen, können Sie diese Bibliothek laden, um sicherzustellen, dass Sie alle konsistenten Schaltflächen, Farben und Stile verwenden . Suchen Sie ganz oben, da ist es da, und ich werde es der Datei hinzufügen. Es ist da. Sie tauchen hier nicht in den Stilen auf. Aber wenn Sie sie herausziehen und zu den Stilen wechseln, befinden sie sich in dem, den Sie verbunden haben. Sie sind alle da. Sie werden feststellen , dass wir Füllstile und Farben haben , aber wir haben auch einige der Effekte , die auch im letzten Dokument enthalten waren. Wir haben den Dropshadow-Effekt gemacht. Wir haben daraus einen Stil gemacht. Cool. Bibliotheken sind großartig. Sie müssen Teil eines Teamprojekts sein . Sie müssen auf dem kostenlosen Konto noch einmal nachschauen, was jetzt eigentlich enthalten ist. Ich weiß, dass man in der Vergangenheit, bis vor Kurzem, nur Farben und Schriftstile und keine Komponenten erlaubt hatte, aber ich weiß, dass sie darüber sprechen, das zu ändern. Das ist der große Vorteil der Verwendung von Teambibliotheken in Figma. Ich werde es im nächsten Video sehen 84. So verbergen Sie Farbschriftarten und Komponenten aus der Teambibliothek in Figma: Hallo, alle zusammen. In diesem Video zeige ich Ihnen, wie Sie diesen versteckten Ordner für Komponenten erstellen diesen versteckten Ordner für . Wir werden auch Farben aus der Hauptbibliothek ausblenden . Es können Komponenten sein, an denen Sie gerade arbeiten , oder einfach nur Komponenten , von denen Sie wissen, dass sie das Team nicht benötigt. Sie können sie ausschalten und sie aus der gemeinsam genutzten Bibliothek ausblenden. Sie können es auch mit Farben machen, und ich werde Ihnen diesen Namen und die Konvention für Unterstriche am Anfang zeigen . In Ordnung, lassen Sie uns einsteigen Gut, um anzufangen. Lasst uns zwei verschiedene Menschen sein. Dan und Doug. Doug arbeitet als Kollege von mir. Erstellt eine Designdatei und er sagt, ich muss die Bibliothek, die wir benutzen, verbinden, und er geht nach Limerick und Limerick-Techniker, keiner, fügt sie hinzu, und dann kann er mit der Arbeit an einem neuen Projekt beginnen, jedoch alle verwendeten Komponenten Zieht einige meiner Knöpfe heraus und fängt an zu arbeiten, hat Zugriff auf die Farben Es gibt einige Dinge , von denen ich nicht möchte, dass Doug sie hat. Sie müssen Teil meiner Datei sein, aber ich möchte nicht, dass sie noch veröffentlicht weil es sich um zukünftige Dateien handelt Vielleicht benutze ich sie, aber niemand sonst sollte es tun. Was wir tun müssen, ist , wieder Dan zu sein. Wir müssen zur ursprünglichen Bibliothek zurückkehren, die die Datei erstellt hat, und das ist ganz einfach. Suchen Sie im Bedienfeld Elemente unter Komponenten, die nicht Teil der Bibliothek sein sollen, und Sie können beim Veröffentlichen einfach „Ausblenden“ sagen. Wenn du wieder Doug wirst, kann es eine Sekunde dauern, aber irgendwann, komm schon, wird es verschwinden. Es verschwindet nicht Ich weiß warum. Wenn ich es also ausschalte, habe ich es versteckt, muss ich meine Bibliothek erneut veröffentlichen Sie können sehen, dass der kleine Punkt dort bedeutet, dass es unveröffentlichte Änderungen gibt Ich muss es jetzt veröffentlichen. Es gibt nur eine Änderung und wir haben die Objektschaltfläche entfernt. Veröffentlichen Sie jetzt, werden Sie wieder Doug. Doug sollte den Zugriff darauf verlieren Ja. Okay. Die Sache ist jedoch, dass alle Verwendungen oder Instanzen dieses Hauptprojekts, die bereits in Projekten veröffentlicht wurden, nicht einfach wieder in die Bibliothek zurückgesaugt werden . Okay, das ist also gut Das wollen wir nicht. Okay? Aber jetzt können sie nicht mehr für neue Projekte, die alten Dateien, die alten Komponenten verwendet werden. Nehmen wir an, ich möchte es wieder einschalten. Okay, ich bin wieder Daniel. Ich bin der Boss. Ich muss es wieder einschalten, um darauf zugreifen zu können. Sie werden feststellen, dass es irgendwie aus meinem Assets-Menü verschwunden ist. Wenn du einen zurück gehst, okay? Gehen kleine Pfeile von den Komponenten zurück, gibt es einen anderen Ordner namens Hidden. Und hier ist mein Button. Okay, und wir können darauf klicken und sagen: Veröffentlichung anzeigen. Ich muss nur sichergehen, dass ich jetzt hierher gehe und sage: Veröffentlichen Sie meine Bibliothek, dann hat Doug wieder Zugriff darauf Ich möchte Ihnen zeigen, dass manche Leute beim Veröffentlichen nicht die rechte Maustaste zum Ausblenden verwenden Sie benennen es einfach um. Ich gehe zurück zu meinen Dateien. Ich werde dieses Asset hier finden und ich werde es doppelklicken und die Leute werden einen Unterstrich davor setzen einen Unterstrich davor und das wird dasselbe bewirken Wenn es dasselbe tut, siehst du, es heißt nur, dass es eine Änderung gibt Welche Änderungen es hat, wurde entfernt. Der Name und die Konvention des Unterstrichs direkt vor dem Namen der Komponente sind eine weitere Möglichkeit, das zu tun , und Sie werden das sehen und fragen Was zur Hölle ist das? Es ist nur eine andere Art, dasselbe zu tun. Es gefällt den Leuten, dass du Farben hier magst. Ich bin in meiner Bibliothek dabei eine Datei zu erstellen und Sie können sehen, dass ich all diese Farben habe. Sagen wir 900, ich will keinen Zugriff. Wir wollen nicht, dass die Leute es benutzen. Ich brauche es in meinem Arbeitsdokument hier, aber ich kann sagen, dasselbe. Ich kann einfach einen Unterstrich einfügen. Es gibt keine Möglichkeit, mit der rechten Maustaste zu klicken und Farbstil ausblenden zu sagen Sie lassen dich also auch einfach einen Unterstrich davor setzen . Das Gleiche Wenn ich es jetzt veröffentliche, veröffentlicht und entfernt es die Farbdatei. Und mit Farbdatei meine ich Farbstil. Wenn Sie Dokumente anderer Leute finden, sind sie überall mit Unterstrichen versehen. Das liegt daran, dass sie sie aus einer gemeinsam genutzten Bibliothek entfernen Ich werde meins wieder einschalten und wir sehen uns im nächsten Video 85. Verschieben von Relink-Refactoring-Komponenten in eine andere Entwurf Datei in Figma: Wir werden uns etwas ansehen, das Refactoring genannt oder besser Wir haben unsere Datei , aus der wir unsere Komponenten erstellt haben , aber sie ist chaotisch Wir haben all das hier, wir haben Social-Media-Anzeigen, Bilder, Dinge, die wir nicht auf unseren Hauptkomponenten oder unseren Stilen haben wollen unseren Hauptkomponenten oder unseren Stilen Wir wollen, dass unsere Styles einfach nett sind und alle nur auf einem einzigen Dokument stehen. Das werden wir tun. Wir werden unsere Komponenten verschieben und wir werden alle unsere Farbstile in das separate Dokument verschieben , und das Coole daran ist, dass Figma sie erneut verknüpft, wenn sie in einer anderen Datei verwendet werden Das Endergebnis ist, dass ich diese schöne, saubere Designdatei habe , die nur meine Komponenten enthält, nur meine Stile enthält, keine funktionierenden, keine mobilen Layouts, sonst nichts, und die viel einfacher mit dem Team zu teilen ist Das nennt man Refactoring. Stellen Sie sich vor, Sie verlinken erneut auf ein anderes Dokument. Lass uns reinspringen Um zu beginnen, bin ich in meiner Datei , in der ich meine Bibliothek erstellt habe. Das ist meine große unordentliche Datei. Ich gehe hierher, da sind all meine Handydesigns. Es hat meine Komponenten, was praktisch ist, aber jetzt muss ich sie herausziehen und in eigene Datei packen, damit die Leute nicht auf diese unordentliche alte Datei zugreifen und Sie sie für immer behalten müssen. Also lass uns eine ordentliche machen Um zu beginnen, habe ich gerade ein brandneues Dokument erstellt. Ich habe die Limerick-Bibliothek verbunden und eine Komponente und eine Farbe im Hintergrund verwendet, sodass sie aus dieser Bibliothek ziehen Das möchte ich ändern . Um das zu ändern, lassen Sie uns eine neue Datei erstellen, und ich werde eine neue Designdatei erstellen. Ich werde das hier nennen. Limerick Techno, ich nenne es einfach Main. Und alles, was wir tun, ist Dinge daraus auszuschneiden und einzufügen. Ich sage, das ist die einzige Sache. Es gibt noch ein paar andere Dinge, aber das ist der Hauptteil davon Wenn ich hierher gehe und diesen Artikel hier sage, möchte ich ihn in meinen Komponenten finden Ich gehe zu Cut, was Command oder Control X ist , einfach dein normaler alter Schnitt. Du schneidest es aus und fügst es hier ein, okay? Ich warne dich und sage: Hey, du hast Sachen aus einer Bibliothek verschoben. Du musst es veröffentlichen. Das kann ich machen, aber das ist die Hauptsache. Sie schneiden Dinge aus und fügen sie in dieses neue Dokument ein. Damit alles funktioniert und damit die Dinge nicht kaputt weil diese Datei , die ich hier erstellt habe, diesen Button enthält. Was macht das? Verlinkt es auf die alte Datei oder auf die neue Datei? Damit alles funktioniert, müssen Sie es veröffentlichen. Ich werde zu meinen Ressourcen gehen, ich werde sagen, dieses Ding veröffentlichen lassen, ich werde veröffentlichen lassen. Es wird ein paar Dinge sagen. Wir wissen, dass man es nicht in Entwürfen haben kann, also kann ich es in mein Projekt übernehmen Ich verschiebe es in meinen Limerick-Techno-Ordner. Verschiebe es einfach als separate Designdatei da rein. Und ich werde dafür sorgen, dass all diese Dinge geändert werden. Es wird dich warnen. Es wird sagen: Hey, die Dinge wurden von hier bis zu diesem Dokument gekürzt, aber andere Dokumente, wie mein neues Design und 1.000 andere Projekte, verwenden das. Sie werden eine Warnung bekommen. Das ist okay. Es ist groß und rot und gruselig, aber so gruselig ist es nicht. Es ist veröffentlicht. Sie werden feststellen, dass meiner neuen Datei hier steht, dass ich einige Updates habe. Was sind diese Updates? Lass uns darauf klicken und es dir ansehen. Es wird nur sagen, dass ich gerade auf Update geklickt habe. Alles, was es getan hat, war den Link zu aktualisieren, von dem es kam. Es geht jetzt nicht von Limeric Techno V , einem , in dem mein ganzer Müll drin war, es kommt aus Lassen Sie uns das noch einmal überprüfen. Okay, lass uns darauf klicken. Das hier, komm zurück. Sie können jetzt sehen, dass ich zwei Bibliotheken damit verbunden habe. Ich habe diese hier, die hat eine Komponente, nämlich diese und all diese anderen Dinge. Jetzt sollte ich alle Komponenten, die ich in meinem Hauptkomponentensatz haben möchte, entfernen alle Komponenten, die ich in meinem Hauptkomponentensatz haben möchte und sie einfach weiter verschieben. Das Coole daran ist, sie für Sie umzugestalten. Sie schneiden sie einfach aus und fügen sie in Ihr neues Dokument ein, stellen sicher, dass es veröffentlicht ist, und jede Datei, die die Auswurftaste verwendet hat, wir haben nur ein Update und nichts ändert sich wirklich, außer wo sie verlinkt ist Eine viel aufgeräumtere Datei. Wir können hart daran arbeiten es schön und sauber halten als unser Original Macht das Sinn? Das Hauptproblem, auf das die Leute stoßen, ist das Veröffentlichen. Die Leute vergessen zu veröffentlichen und sie werden sagen, es funktioniert nicht, es kommt nicht rüber. Stellen Sie also sicher, dass alles veröffentlicht und aktualisiert ist. Damit meine ich, gehen Sie hier rein und stellen Sie sicher, dass es keine herausragenden Verlage gibt. Es hat sich nichts geändert. Das ist in Ordnung. Mein Hauptteil hat keine Änderungen, muss veröffentlicht werden. Okay? Und stellen Sie sicher, dass alle anderen Dateien, die Sie öffnen, die Bibliothek gehen und einfach überprüfen, ob es Updates gibt. Wir machen das Gleiche mit Farben, es ist noch einmal Zeit , es klarzustellen. Farben sind ein bisschen anders Farben, ich habe vergessen, dass nichts ausgewählt wurde hier in meinem Eigenschaften-Panel befindet Nehmen wir an, ich möchte alle meine Primärfarben abrufen. Ich gehe zum Schneiden, genauso wie zuvor. Es geht aus diesem Dokument hervor. Ich gehe zu diesem, ich füge es ein. Da steht, du musst es veröffentlichen, ich kann es veröffentlichen. Es spielt keine Rolle, woher du gehst. Ich klicke hier unten auf Veröffentlichen, oder wenn Sie es von dem kleinen Buch aus tun , klicken Sie auf Veröffentlichen, und wenn ich zu der Datei zurückkehre , in der diese möglicherweise verwendet wurden, müssen Sie vielleicht hier gehen und dann zu Updates gehen und Sie können sehen, dass müssen Sie vielleicht hier gehen und dann zu Updates gehen eines aktualisiert ist. Klicken wir auf Aktualisieren und das war's. Erledigt. Wird gerade umgestaltet und ich werde einfach langsam alles durchgehen Also werde ich mir jetzt tatsächlich alle meine Farben schnappen Ich klicke auf die erste, halte die Umschalttaste gedrückt, schneide sie aus und wähle meine neue aus. Machen wir es noch einmal, lassen Sie uns all diese Dinge einfügen , veröffentlichen, veröffentlichen. Falls du ein Knistern im Hintergrund hörst, habe ich zwei neue Kits und sie greifen Sachen im Büro an Es ist schwer, sie dazu zu bringen, keinen Lärm mehr zu machen. Würdest du damit aufhören? In Ordnung, es ist aktualisiert, schauen wir uns alles an. Sie müssen nur sicherstellen, dass die Stilbibliothek aktualisiert ist. Hier gibt es nichts , was aktualisiert werden muss , nur weil ich nur eine der Farben aus meiner Stilbibliothek verwende . Eine Komponente aus meiner Komponentenbibliothek. Hier gibt es nichts wirklich zu aktualisieren. Du arbeitest dich einfach durch und sagst, das Ding hier muss umgestellt werden. Wir machen es noch einmal. Du kommst her und ich klicke auf Veröffentlichen oder mach es hier oben. Ich werde es veröffentlichen. Veröffentlichen Sie bitte. Meine neue Design-Datei hier. Wenn ich in meiner Bibliothek zu Updates gehe, wird es keine Updates geben, weil ich die primäre Schaltfläche in diesem Dokument nicht verwendet habe. Ich schätze, ich werde darauf zugreifen. Da ist es der Hauptknopf. Es ist ein bisschen langsam und mühsam, aber es ist viel besser, als von dieser Monstrosität aus zu arbeiten , die wir So viele Dateien, so viele verschiedene Seiten. Sie können wirklich aufgeräumt sein, wenn Sie es umgestalten. Denken Sie daran, dass Refactoring nur ein erneutes Verknüpfen ist. Die eine Sache, die Sie auffallen und Studenten die ganze Zeit auffangen wird, ist, dass Dinge nicht Gehen Sie einfach alles durch und veröffentlichen und suchen Sie nach Updates zu allem, und Sie werden wahrscheinlich feststellen , dass das Ihr Problem ist. Manchmal habe ich festgestellt , dass ich Fig schließen und ein Backup öffnen muss. Das passiert immer seltener, wenn es als Produkt reift, aber manchmal ist das auch hilfreich Ich weiß nicht, ich werde nur noch einmal versuchen, etwas mit den Kätzchen zu machen Sie brauchen etwas anderes zu tun, als Dinge in der Nähe meines Mikrofons anzugreifen In Ordnung, das ist Refactoring. Wir sehen uns im nächsten Video. 86. Was sind einige erweiterte Zeichnungstipps und -tricks in figma?: Jeder. In diesem Video werden wir ein Dokument durcheinander bringen. Aber im Laufe der Zeit werden wir all meine Tipps und Tricks zum Zeichnen für Fortgeschrittene lernen . Ordnung, lass uns gehen. In Ordnung, fangen wir mit dem Lasso-Tool Du musst in der Zeichenfunktion oder im Modus von Figma sein und ich habe den Stern , den ich gezeichnet habe Wir müssen hineingehen, um mit der Bearbeitung der Form zu beginnen. Doppelklicken Sie darauf Und ich könnte das Auswahlwerkzeug verwenden und es mit der Maus herumziehen und die benötigten Punkte abrufen, aber das Lasso-Werkzeug eignet sich hervorragend für wirklich komplizierte Vektordateien Du kannst einfach mit der Maus herumziehen und sagen, ich will dich, aber keine der anderen, und du kannst all diese auswählen Jetzt kann ich auf sie klicken, ziehen und verschieben, wenn ich sie löschen möchte. Wenn ich meine Tastatur gelöscht hätte, lösche einfach das Ganze. Also gehe ich zurück zu meiner Auswahl. Ich werde mir diese schnappen. Wenn ich hier nur die wichtigsten löschen möchte, halten Sie die Umschalttaste gedrückt und drücken Sie die Löschtaste oder die Rücktaste Beides funktioniert. Aber wenn du es einfach ohne die Shift-Taste machst, wird das Ganze gelöscht Call tip Wenn ich mein Verschieben-Tool verwende und nur auf eines davon klicke, kann ich meinen Tab auf meiner Tastatur verwenden Schau dir das an, geht durch und schnappt sich den nächsten Ankerpunkt Das könnte wirklich praktisch sein. Vor allem, wenn sie sehr nahe beieinander liegen, können Sie auf eine klicken und dann mit der Tabulatortaste zur nächsten wechseln. Verschiebe den Sprung, werde ihn los . Armer alter Star. Als Nächstes möchte ich dir das gemeinsame Tool zeigen, und ich habe das Video gerade angehalten , weil ich es vermasselt Ich will dir zeigen, wie ich es vermassle, weil ich es die ganze Zeit mache, du machst dasselbe Wenn ich jetzt das Stiftwerkzeug nehme und klicke und ziehe und das alles mache, passiert, dass ich es tatsächlich mit einem Stiftwerkzeug gezeichnet habe , aber ich habe es innerhalb der Sternform gezeichnet. Es ist Teil des Sterns, was nervig ist, weil es sich nicht um zwei separate Formen handelt. Schau zu, ob ich zu meinem MoveTo zurückkehre und auf den Hintergrund klicke. Das ist eine Einheit Und ein bisschen Arbeit, aber das wollte ich nicht. Wann immer du an, sagen wir, dem Stern arbeitest, den ich rückgängig mache, vergewissere dich, dass du zweimal auf den Hintergrund klickst , um wieder herauszukommen, damit du eine separate Form zeichnest, die mich immer wieder auffängt Zeichnen Sie eine Form und kommen Sie kurz davor, sie fertig zu stellen, glauben Sie, es ist Möglicherweise erhalten Sie das Symbol oder die Grafik einer anderen Person aus einer anderen Bibliothek oder Symbolbibliothek Die Lücke könnte auf Ihre Zeichnung zurückzuführen sein. Sie können einfach den Befehl J drücken und es verbindet die beiden Ankerpunkte an den Stellen, an denen sich eine Lücke Sehr praktisch, da ich sonst keine Füllung hinzufügen kann. Command oder Control J, verbinde es. Jetzt kann ich eine Füllung hinzufügen. Eins kannst du nicht tun, und ich weiß nicht, es ist auch cool. Ich nehme mein Verschiebewerkzeug und wähle sie alle aus und du gibst Befehl J, sieh dir das an. Wie. Ich glaube, wir haben einen Kult geschaffen, aber machen wir das rückgängig und Sie können entweder diese beiden auswählen und dann Command oder Control J wählen oder nichts auswählen. Bleib in deiner Form. Wenn ich doppelklicke, um herauszukommen, wird es nicht funktionieren, aber wenn ich hineingehe und Command J drücke, heißt es: Oh, du meinst wahrscheinlich diese beiden. Und füge eine Füllung hinzu. Als Nächstes folgt der Ankerpunkt für die Rotation. Wenn ich auf den zerbrochenen Stern, den ich drehe, aus meinem zufälligen Quadrat herauskommen klicke , dreht er sich um den Mittelpunkt, und das ist vielleicht das, was Sie wollen Aber manchmal willst du nicht, dass das passiert und du fährst einfach hier drüber , als würdest du es drehen Warte, warte, warte. Siehst du der Ankerpunkt in der Mitte ist gerade erschienen? Hallo. Dieses kleine Ziel hier bedeutet, dass du es herumschleppen und sagen kannst, ich will, dass es da ist. Wenn Sie es jetzt drehen, hat sich der Drehpunkt geändert. Du musst nur eine Weile warten. Als Nächstes packen Sie horizontal oder vertikal. Wir sind schon einmal auf dieses Problem gestoßen. Lassen Sie uns einige Icons von vorhin einbauen. Okay, ich arbeite gerade an einem brandneuen Projekt. Ich bin zum Import gegangen. Ich gehe zu den Übungsdateien. Ich gehe zu Icons Two. Wir haben es auf diese überprüft. Ich werde mehr reinbringen. Ich platziere, und es verteilt sie einfach übereinander und du verbringst ewig damit, zu gehen Sie können sehen, wie ich den Rahmen vom Vektor im Inneren getrennt habe und den Hintern bemalt Was Sie tun können, ist sie alle auszuwählen und unsere Aktionen, K, Befehl K, zu verwenden oder auf die Schaltfläche unten hier unten zu klicken Was wir suchen, ist Rudel. Wir können horizontal oder vertikal packen und es werden einfach alle gestapelt Endlich. Und wenn wir genug hineinzoomen, werden Sie anfangen, die normalen Dinge zu sehen , die wir uns schon einmal angesehen haben. Es ist intelligente Auswahl. Wir können sie herumschleppen. Es ist kein Öl raus und wir können mit der Polsterung herumspielen , nur um uns zu erholen. Aber vorher Ein paar einfache Dinge sind, wenn ich den Stiftrahmen hier oben nehme, gibt es die Möglichkeit, ihn vertikal oder horizontal umzudrehen , nur damit du es weißt. Schauen wir uns eine Abkürzung für das Ausrichten von Dingen an. Nehmen wir an, ich habe einen Rahmen, da sind meine Icons drin Ich möchte die Typen hier vielleicht nach rechts ausrichten . Das ist nicht wirklich das, was ich will. Ich möchte es an der Kante des übergeordneten Rahmens ausrichten. Ich könnte sie gruppieren und ausrichten, sieh dir das an. Wenn ich die Shift-Taste gedrückt halte und den Mauszeiger darüber bewege, könnt ihr sehen, wie die Shift-Taste aktiviert ist, wenn ich auf meiner Tastatur darauf tippe Kannst du sehen, dass sie sich ein wenig ändern, wenn ich sie gedrückt halte? Was es bewirken wird, ist, dass es sich auf der rechten Seite des Rahmens ausrichtet. Benutze diesen am häufigsten. Bringen Sie sie einfach vertikal und horizontal in die Mitte des Rahmens. Shift gedrückt halten. Ansonsten gehen sie in die Mitte, aber sie stapeln sich alle. Du könntest sie gruppieren, sie in automatische Ausgabe umwandeln . Shift gedrückt zu halten ist einfach ein netter kleiner Trick. Ein anderer ist, wenn du etwas zeichnest, kommt es mit einem grauen Feld ohne Strich. Es hat eine Füllung, keinen Strich. Sie können diese ganz einfach wechseln. Umschalt-Taste und X gedrückt halten. Ich schalte einfach um. Die Farbe des Strichs wird zur Füllung übertragen. Füllung bewegt sich zur Kontur. Sie wechseln einfach zwischen ihnen hin und her. Das kann praktisch sein Du hast etwas, das einen Strich und eine Füllung hat. Ich werde es schön dick machen, damit es besser zu sehen ist. Ich habe einen Strich und eine Füllung. Du kannst sie umschalten. Denken Sie an Shift X, schaltet sie um . Das ist cool Also willst du den Strich entfernen. Es hat alles mit Ihrem Ford-Slashbutton zu tun. Geben Sie Ihre Tastatur ein und suchen Sie den Schrägstrich. Wenn Sie die Umschalttaste gedrückt halten und den Schrägstrich drücken, wird der Strich gelöscht. Ich werde es rückgängig machen Wenn Sie eine Option hinzufügen und einen Schrägstrich verwenden , wird die Füllung Da hast du's. Nackte Abkürzungen Den kennst du wahrscheinlich schon. Befehl oder Steuerung Y. Wir wechseln zwischen der Gliederungsansicht Es ist einfach einfacher, einige Vektoren zu sehen , wenn Sie sich in dieser Ansicht befinden, und es ändert sie nicht für immer, aber es hilft Ihnen, einige Teile besser zu erkennen und Dinge etwas besser auszurichten Es ist der Befehl oder das Steuerelement Y für Gliederung. Das sind meine fortgeschrittenen Zeichentricks. Wir sehen uns im nächsten Video. 87. Verwenden des Werkzeugs Variable Width & Simply Stroke in Figma: Ordnung, alle zusammen. In diesem Video werden wir uns das vereinfachte Werkzeug und das Breitenwerkzeug ansehen . Das vereinfachte Tool wird aus originellen Zeichnungen schöne , glatte Dinge machen, denen wir dann diese variablen Breiten hinzufügen können dann diese variablen Breiten hinzufügen Tolle, nette Schnörkel oder einfache Linien, die ein bisschen mehr Dynamik haben bisschen mehr Dynamik Es ist kein Wort, dann springen wir ein und zeigen dir, wie man sie macht Ich werde sichergehen, dass ich nicht über irgendwelchen anderen Formen , die wir zeichnen, verstecke. Ich gehe in den Zeichenmodus. Ich gehe zum Bleistiftwerkzeug und suche mir eine schöne Farbe aus. Ich werde eine Form zeichnen. Standardmäßig ist es nicht besonders glatt. Was ich tun kann, ist das Verschiebewerkzeug, das ist das Viki. einmal darauf klickst, siehst du hier die Option „Vektor vereinfachen Es funktioniert für jede Vektorform, aber es ist großartig für diese Kurve. Man sieht einfach, dass es zu viele Ankerpunkte gibt und man versucht, es zu bekämpfen. Sie können es einfach in diese Richtung ziehen. Sie können sehen, wie es anfängt, sie zu entfernen und es glatter und glatter zu machen bis Sie , bis Sie eine ausreichende Auflösung oder genügend Ankerpunkte Ich mache es ganz klein und glatt und klicke jetzt, um das Breitenwerkzeug zu verwenden. Was ich tun muss, ist etwas anders, ich muss in die Form gehen, die ich gezeichnet habe es ausgewählt ist, doppelklicke ich darauf, um hineinzukommen , und Sie werden diese Option hier bemerken, sie wird das variable Breitenwerkzeug genannt. Du kannst es überall hin nehmen, auf Halten und Ziehen klicken und schon hast du diese süße Form. Geh weiter. Hier gibt es einige Standardprofile. Vielleicht möchten Sie damit herumspielen. Sie müssen größer sein. Ich mache es rückgängig und kehre zu dem zurück, den ich gemacht habe. Okay, ich habe meine Breite angepasst. Sie können die Mitte mitziehen , um zu entscheiden, wohin das geht. Und Sie können die Kanten erneut ziehen, um sie anzupassen. Sie können mehrere hinzufügen. Stellen Sie sicher, dass Sie immer noch Ihr Breitenwerkzeug verwenden. Sie können viele verschiedene Breiten haben. Ich verwende dieses Tool häufig in Illustrator. Für solche Dinge, wo es diese schönen kleinen Blasen und Schnörkel gibt, kannst du dasselbe in Figma tun Sie sind im Grunde dasselbe Tool. Lass uns das machen, also gehe ich zu meinem Width-Werkzeug. Was Sie brauchen, damit das funktioniert, löschen wir es und beginnen mit etwas Schönerem Ich gebe mein Stiftwerkzeug. Ich werde gedrückt halten und ziehen, dann auf Halten und Ziehen klicken. Ich habe trotzdem meine Breite darauf angewendet. Klicken Sie auf Halten und Ziehen, und vielleicht noch einen hier, um eine schöne Kurve in Gang zu bringen. Ich werde das Breitenprofil loswerden und zur Normalität zurückkehren. Ich gehe zu meinem Breitenwerkzeug. Um das kleine, wackelige Ding zu machen , das ich dir gerade gezeigt habe, brauchst du zwei Du brauchst diesen. Okay, einer kann kleiner sein und dann einer am Ende, genau am Ende , um ihn größer zu machen. Nun, je nachdem, wann Sie es zuletzt benutzt haben, Sie vielleicht ein flaches oder abgerundetes Ende haben. Ändern Sie das, ich kann mein Auswahlwerkzeug nehmen und einfach auf die Linie klicken und Sie werden sehen dass es hier verschiedene Encaps gibt Standardmäßig ist es zwei gesetzt, keine Kappe, und dann ist da noch diese hier, die ist eine runde Kappe und sie gibt dir diesen schönen kleinen Bommel Ich kann mein Breitenwerkzeug verwenden und einfach etwas finden , das etwas passender Sie können mit dem Strich des Ganzen herumspielen. Obwohl es zwei sagt, wird es nur proportional zu den Breiten, die Sie gemacht haben, vergrößern den Breiten, die Sie gemacht haben, Es muss nicht so exotisch sein. Es könnte einfach etwas Einfaches sein, wie eine Unterstreichung , bei der du etwas Nettes und Einfaches machst Ich werde meine Linienstärke nicht auf Null, sondern auf eins reduzieren , damit es schön dünn ist Schnapp dir mein Breitenwerkzeug. Vielleicht musst du darauf doppelklicken, um hineinzukommen und das Breitenwerkzeug zu finden. Ich habe genau das getan, was ich dir vorher gezeigt habe, dass du es nicht tun solltest. Ich lasse es im Kurs, weil ich es jedes Mal mache , wenn ich neue Formen zeichne. Wenn ich hier drin bin und anfange zu zeichnen, kombiniert es sie. Ich werde dich schnappen. Ich werde dich schneiden , wie du im Hintergrund aussiehst. Habe nichts ausgewählt, füge es ein, er ist ganz auf sich allein gestellt, dann geh in ihn hinein. Dann kann ich zu meinem Breiten-Tool gehen und einfach so etwas Netteres machen Etwas Nettes und Einfaches und vielleicht gehe ich zu dieser Endkappe, die schön spitz ist. Sie werden hier sehen, dass ich am Ende immer noch Recht habe. Du kannst deine Linienstärke auf etwa 0,1 reduzieren, dann wird es an den Enden wirklich dünn sein. Ich werde hier mein Breitenwerkzeug anpassen müssen, um wieder spitz an den Enden zu sein und dort meinen kleinen Flush in der Mitte zu haben Das ist eine variable Breite. Ich kann es umdrehen, das ist das Werkzeug mit variabler Breite. Sie können sie löschen. Du kannst sie löschen und schon ist es wieder eine normale gerade Linie. Das ist es, meine Freunde. Das ist das Werkzeug mit variabler Breite. 88. So überlappen und stapeln Sie Elemente in einem Figma Autolayout: Ordnung, Leute, wir werden dafür sorgen, dass sich die Dinge überschneiden Man könnte sie einfach übereinander ziehen. Aber wir zeigen Ihnen, wie Sie mit Auto Out umgehen können, damit Sie mit dem Abstand herumspielen und ihn perfekt machen können. Sie können mit Ihren Objekten herumspielen und sie herumziehen. Und weil es ein Autoout ist, haben wir einige spezielle Funktionen bei denen wir sagen können: zuerst oben, zuletzt oben, zuerst oben, zuletzt Yo, lass uns reinspringen. A für den Anfang. Ich habe einen Bewertungsrahmen. Ich bin wieder bei meinem Originaldokument. Ich bin in meinem Hi-Fi-Handy und habe eine Bewertungsseite erstellt und dort einfach ein Rechteck für meine Bewertung eingefügt. Ich werde das Oki benutzen, um meine kleinen Kreise zu zeichnen, und ich werde die Umschalttaste gedrückt halten, damit sie perfekt rund sind Ich werde es ein paar Mal duplizieren, Befehl D D D D. Was ich jetzt tun könnte, ist, sie alle auszuwählen Ich halte die Umschalttaste gedrückt , um sie alle und Sie können den Abstand halten. Ich kann den Abstand und das Vergrößern nicht sehen. Nun, es zeigt mir nicht den Abstand. Fehlt mir einer? Hm. Wann mache ich das? Ich kann sie ändern, aber ich kann den Abstand nicht ändern. Oder da ist es da. Da ist mein Abstand. Es ist einfach magisch erschienen. Man kann sie nicht einfach so überschneiden lassen, oder? Aber wir werden sie in einen Audi-Lout verwandeln weil uns das ein paar zusätzliche Funktionen bietet Wir lieben Audiouts. Bevor wir das tun, sollten wir eigentlich ein paar Avatare hinzufügen. Ich verwende gerne das Plugin Content Reel. Sie können jeden von ihnen verwenden. Es gibt viele von ihnen. Ich mag Content Reel , weil es eine Menge verschiedener Dinge enthält, die ich verwenden könnte. Unter Bild wähle ich, sagen wir, Avatare aus, männlich. Sie klicken auf Anwenden Zurück. Mir gefällt das hier sehr gut, weil es realistischere Menschen sind. Es ist ein unangemeldeter Benutzer, ihn hierher verschieben wird Ordnung, lassen Sie uns daraus Atoout machen. Die Vorteile hier sind die gleichen wie zuvor. Ich kann mit den Überlappungen herumspielen Du kannst es hier oder hier in der Lücke machen. Du zahlst es einfach in einen negativen Betrag. Das Schöne an der Verwendung von Atoout dass wir diese Steuerelemente hier haben Kannst du diese kleinen Einstellungen für das automatische Layout sehen? Es gibt die Option „Letzter oben“ oder „Erster oben“ zu sagen oder „Erster und Sie können sehen, dass sich die Reihenfolge der Ebenen ändert. Zuletzt, zuerst. In Ordnung. Im Grunde brauchst du nur einen negativen Gap-Betrag und du kannst dafür sorgen, dass sie sich überschneiden. Einfach, einfach. Das ist es. Wir sehen uns im nächsten Video. 89. So ignorieren Sie Autolayout auf absoluten Raum in Figma: Okay. Um den automatischen Ausgang zu ignorieren, benötigen Sie zunächst einen automatischen Ausgang Im Moment ist das nur ein Rahmen mit ein paar Köpfen drin Ich habe einige Texte, die ich für meine Rezension erstellt habe. Ich nehme den übergeordneten Frame und verwandle Sie in ein Autolout und mache es so, wie ich es möchte, mit den Padding, 24 und 24, und ziehe Es macht Auto-Out-Sachen, was gut ist. Ich will den Kopf in der oberen Ecke haben. Ich nehme einfach Füllung und füge sie ein, und das ist nicht Teil der Bestellung. Ich zeige nur, wie ich es baue. Schau dir das an. Wenn ich das zur Bestellung hinzufüge, ist es wie, ich will Teil des Flusses sein und ich werde meine Kumpels Das ist das Standard-Setup von Atoout. Ich könnte es einfach hier draußen haben und die Leertaste gedrückt halten, damit es nicht in dieses und jenes springt , funktioniert, aber es gehört nicht dazu Ich kann das nicht in eine Komponente verwandeln , weil das zwei verschiedene Dinge sind. Ich kann nur sagen, du, mein Freund, bist da drin, aber du bist auf diesen hier eingestellt. Kannst du eine Position aushalten, in der Ignore Auto Out steht? Es muss innerhalb eines All-Outs sein, dann kann dieser Typ es ignorieren. Unhöflich. Ich kann da hingehen und er kann den Ausgang ignorieren Das Problem ist, dass er abgeschnitten ist, also kann ich mir den übergeordneten Frame schnappen und sagen: Lasst uns ihn nicht ausschneiden, wohingegen das Ausschneiden den Inhalt ausschneiden. Da haben wir's. Nun, wenn Sie es ziehen, werden Sie feststellen, es irgendwann aus dem übergeordneten Frame herausspringt dass es irgendwann aus dem übergeordneten Frame herausspringt und überhaupt nicht mehr Teil davon ist Siehst du, da ist jetzt eine Ellipse, sie hängt einfach von selbst ab Wir werden die Technik verwenden, die wir schon einmal benutzt haben. Es ist hier drin, was gut ist. Fangen Sie an zu ziehen und halten Sie die Leertaste gedrückt und Sie können es so einstellen, dass es den automatischen Ausgang nicht verlässt Das wird jetzt ignoriert, aber es ist alles Teil derselben vereinheitlichten automatischen Ausgabe Ich werde mit dem Abstand herumspielen. Ich wähle diesen Typen aus und halte die Leertaste gedrückt , damit er nicht geht ' Ich werde so etwas machen Schnapp dir diesen übergeordneten Frame. Ich hole mir das Layout auf dieser Seite. Ich mache den Kerl wahrscheinlich ein bisschen kleiner. Ich gehe einfach ein bisschen raus und halte die Leertaste gedrückt und das wird mein Autout sein Kann jetzt in eine Komponente umgewandelt werden, er hängt rum, ignoriert aber den Autoout Das ist einfach. Wir sehen uns im nächsten Video. 90. Wie man Autolayout ignoriert, aber trotzdem reaktionsfreudig in Figma ist: Hallo, alle zusammen. Dieses Video, wir holen uns was, diese Raute da oben Wir werden dafür sorgen, dass es reagiert und das automatische Auslesen ignoriert Das heißt, ich kann das Auto herausziehen und es kommt nach rechts Ansonsten sitzt es einfach da. Es ignoriert es, aber es kommt nicht und es reagiert nicht Ich bin hier, um das zu tun. In Ordnung. Um anzufangen, habe ich eine kleine Pastille gemacht. Es ist automatische Abschaltung Ich möchte, dass es in meinem Auto Out ist. Und wir werden das Gleiche tun wie zuvor , wir werden es hierher verschieben, wir werden es auf absolute Positionierung umstellen. Es heißt jetzt Ignore Auto Out. Der Begriff heißt absolute Positionierung. So wurde es früher genannt. Wenn Sie ein Webdesigner-Entwickler sind, wissen Sie, was das bedeutet. Gleiche. Ignoriere Autoout. Also ignorieren wir es. Wenn wir es hier drüben hinstellen, denken Sie daran, wir wollen es nicht aus dem Rahmen ziehen , wir wollen es im Rahmen behalten, wir werden beim Ziehen die Leertaste gedrückt halten , es kann hier oben sein Ich lasse meins ein bisschen hängen und es funktioniert. Wenigstens sitzt es da. Es passt sich nicht an, es reagiert nicht. Es reagiert. Ich muss es nur auswählen. Siehst du hier die gepunkteten Linien? Es versucht, sich nach oben und nach links zu bewegen. Alles was ich tun muss ist zu sagen: In Ordnung, du bist ganz oben und rechts. Wenn ich jetzt hier mein kleines Auto laut einstelle, schau, kommt es nach rechts. Einfach kinderleicht Schau uns an, wie wir verschiedene Funktionen kombinieren. Da hast du's. So kann sichergestellt werden, dass es absolut positioniert oder ignoriert oder erlaubt ist, aber auch ansprechbar ist. Das ist es 91. Erstellen eines Buttons mit minimaler Breite und Höhe in Figma: Hallo, alle zusammen. Ich werde Ihnen zeigen , wie man eine Schaltfläche mit minimaler und maximaler Größe erstellt. Dieser könnte als Einkaufswagen bezeichnet werden, aber Sie können sehen, dass der Button nicht kleiner wird, aber er kann bis zu einem bestimmten Punkt größer werden und wird nicht breiter als das, worauf ich ihn eingestellt habe. Das ist die Mindest - und Maximalgröße. Antworte auf Auto Outs. Lass mich dir zeigen, wie es geht. Ich habe gerade mit ein bisschen Text angefangen. Der Min Max funktioniert nur , wenn Sie Auto Out aktiviert haben. Also gehe ich auf Shift A oder Autolou. Hey, ich werde es färben, du isst dort. Okay, es ist also ein farbiger Knopf und ich kann ewig tippen, oder? Also, was ich tun muss, ist meinen Text wieder rein zu schreiben. Ich muss es auf ein Minimum und ein Maximum einstellen. Jetzt müssen Sie es mit dem äußeren Rahmen machen, nicht mit dem Text auf der Innenseite. Der übergeordnete Frame muss ein Auto-Out-Frame sein. Funktioniert nicht mit einem Rechteck funktioniert nicht nur mit einem einfachen alten Rahmen. das ausgewählt ist, gehe ich zur Breite und kann einfach sagen, ich möchte mit einem Maximum beginnen , das ich eingeben möchte, ich weiß nicht, 140. Sie können dort sehen, dass es soweit ist. Lass es uns versuchen. In Ordnung, damit du sehen kannst, es geht einfach kaputt. Größer kann ich nicht werden. Aber das Mindeste, im Moment wird es einfach weiter nach unten gehen und sich von außen umhüllen. Ich muss es auf eine Mindestgröße festlegen. Klicken Sie erneut auf das übergeordnete Element und ich sage noch einmal, mit der Breite, aber ich möchte eine Mindestbreite. Und ich möchte, dass die Mindestbreite, sagen wir, 40 beträgt. Sie können die Mindestbreite dort sehen. Wenn ich jetzt das kleinere mache, das kleinere mache, kannst du sehen, dass es nur eine bestimmte Größe erreicht. Was Sie tun könnten, ist, sagen wir, ich möchte es B nennen. Sie möchten, dass es wahrscheinlich mittig in der Box steht, sodass es, wenn es kleiner, kleiner, kleiner wird , in der Mitte bleibt. Es liegt an dir. Ich werde rückgängig machen? Nehmen wir , Sie haben bereits Schaltflächen. Sie möchten nur, dass dieser Button die kleinere Größe hat. Sie können auf das übergeordnete Element klicken. Sie können hier hinein gehen und wenn Sie die Mindestbreite, Mindestbreite, hier unten angeben, wo Mindestbreite steht, können Sie sie so ändern, dass sie auf die aktuelle Breite eingestellt ist, und es wird diese Größe haben. Ich kann nicht kleiner werden als die, die du direkt vor dir hast. Denken Sie nur daran , dass es ein Autolayout sein muss, kann nicht einfach ein einfacher alter Frame sein, weil Sie ihn hier unter Breite nicht finden werden Falls du dich fragst, wie ich den Schlagschatten gemacht habe, er ist einfach mit einem Affix versehen und Sie haben es wahrscheinlich im Geschwindigkeitsmodus gesehen, aber ich habe gerade die Deckkraft auf 100 erhöht und dann die Unschärfe auf Null entfernt, und am Ende haben Sie dieses Feld Ich habe zwei Tabs, zwei gemacht und es dann einfach Da hast du's. Es ist Minimum und Maximum. Ideal für Schaltflächen, aber Sie können es für jedes automatische Layout verwenden. 92. Wie man Auto-Layout-Objekte in Figma umwickelt: Hallo, alle zusammen. Wir werden uns etwas ansehen, das sich Innenverpackung eines Autoausgangs nennt. Es ist wirklich einfach zu machen und sehr praktisch. Wenn Sie viele Elemente haben, die nur den dafür vorgesehenen Platz ausfüllen müssen. Sie können das übergeordnete Objekt automatisch oben und unten bewegen und alles, was sich darin befindet, wird umgebrochen. Verwenden Sie hier Schaltflächen, aber es könnten Bilder sein, es könnte alles sein, was Sie wollen. Lassen Sie uns anfangen, etwas zu verpacken. Zu Beginn habe ich nur ein automatisches Layout erstellt, das etwas Text enthält, genau wie die Schaltflächen, die wir schon oft gemacht haben , und ich habe eine Menge gemacht. Also wähle ich sie alle aus und setze sie ein oder verschiebe sie, und es wird versuchen zu erraten, was Sie wollen. Oft wird es entweder horizontal oder vertikal erraten. Dieser hier hat versucht, sie in ein Raster einzuordnen. Wir haben uns vorhin Gitter angesehen Wir können uns diese Bilder schnappen und los geht's, du gehst da hin, wir haben es mit Bildern gemacht Aber was wir wollen, ist nicht in einem Raster zu sein. Ich möchte also auf den übergeordneten Frame klicken und zum horizontalen Frame wechseln. In diesem Fall wurde standardmäßig das Umschließen verwendet. Manchmal tut es das nicht und macht einfach das. Als ich das vor einer Sekunde vorgeführt habe, es ist also die Option zum Umbrechen, klicken Sie darauf Es muss eine automatische Ausgabe sein, sie muss horizontal und vertikal sein, und dann können Sie auf Umwickeln klicken Das heißt jetzt , wenn Platz dafür ist , wird es passen, und wenn es größer werden muss, wird es das auch tun. Ich werde meins auf eine automatische Höhe umstellen. Sie können einfach auf die Unterseite doppelklicken. Eigentlich kann ich meins nicht dazu bringen , doppelt zu klicken , um das Ende zu erreichen. Ich würde einfach sagen, umarmen Sie den Inhalt, und das bedeutet nur, dass, wenn die Größe geändert werden muss, alles wieder fließt und bereit ist. Vielleicht hast du hier Bilder drin. Vielleicht hast du diese kleinen Pillen wie diese. Ich habe sie schon einmal Pastille genannt. Es ist ein schreckliches Wort für sie. Nennen wir sie Pillen. Ja, das ist das Innere von Autolout in Figma 93. So organisieren Sie Komponenten in Figma in Gruppen: Hallo, alle zusammen. In diesem Video zeige ich Ihnen, wie Sie Ihre Komponenten in Ihrem Assets-Bedienfeld organisieren. Okay. In dem Moment, wo sie alle irgendwie verschmiert sind und genau da, wo du nur ein paar hast, aber wenn du viele hast, ist es toll, sie in diese kleinen Unterordner hier zu legen, damit ich sagen kann: Okay, alle meine Knöpfe verstecken sich in Stimmt. Lass mich dir zwei Möglichkeiten zeigen, das zu tun. Sie haben beide gleichermaßen recht, Sie werden feststellen, dass beide in der Community verwendet werden, also ist es am besten, beide zu kennen. ' springt. Okay, ich habe zwei Dateien geöffnet die Originaldatei, die wir mit all unseren mobilen Designs erstellt haben, und das Dokument, das wir für unsere Hauptbibliothek verwenden, damit all unsere Komponenten in anderen Projekten verwendet werden können. Das ist der, an dem ich arbeiten werde. Im Moment ist in diesem Dokument nicht viel los. Da sind nur ein paar Knöpfe drin. Fangen wir mit dem einfachsten Weg an. Gehen wir zu den Abschnitten hier unten. Wir haben uns also vorhin Abschnitte angesehen, aber wir werden noch eine weitere verborgene Stärke von ihnen aufzeigen. Okay, also gehe ich zum Abschnitts-Tool. Ich werde einen Abschnitt darüber zeichnen , was nicht funktioniert hat. Ich werde einen Abschnitt um diese Knöpfe zeichnen. Ich werde diesen Abschnitt nennen. Verwenden Sie nicht das Abschnittswerkzeug, um darauf zu doppelklicken. Geh zurück zum Verschiebe-Tool, dem Viki. Ruft eine Taste Das Schöne daran ist , dass alles, was jetzt hier drin ist, in dieser Untergruppe namens Buttons ist. Schau mal hier drüben nach Nicht so sehr in der Datei in meinen Ebenen, aber gehe zu Assets und du kannst die Quellenangabe in dieser Datei hier sehen, da sind diese beiden Buttons. Sie sind noch nicht in einer Gruppe. Sie müssen es danach einschalten. Standardmäßig ist es ausgeschaltet. Sie können hier zu den Bibliothekseinstellungen gehen und sagen, können Sie auch die Unterordner anzeigen Es ist praktisch, wenn Sie ein sehr kleines Dokument haben, die Unterordner auszuschalten , weil es keinen wirklichen Sinn macht. Wir haben zwei Knöpfe höher Aber wenn man anfängt, etwas komplexer zu gestalten und es ziemlich schnell zu einem komplexen Design wird, kann man die Ordner anzeigen und man kann sehen, da sind meine Buttons Ich kann hineinklicken. Schau, ich habe die beiden. Shift S ist mein Abschnittswerkzeug. Ich kann es herausziehen. Ich möchte zurück zu meinem Verschiebe-Tool, ich möchte dieses meine Symbole nennen, und ich gehe zu diesem, gehe zu meiner Komponentenseite und ziehe ein paar Symbole daraus. Schnappen wir uns diese Typen. Ihr werdet gekürzt und ihr werdet hierher gehen, ich werde dafür sorgen, dass ich die Bibliothek aktualisiere, die Bibliothek aktualisiere, veröffentliche, ihr könnt das jetzt hier sehen, ich habe eine Button-Option für meine Assets, aber ich habe auch eine Icon-Option. Ich kann sie natürlich wieder ausschalten, um die Unterordner nicht anzuzeigen und sie einfach in einer schönen langen Liste zu sehen Das Gleiche gilt für die Dateien , die es verwenden. Hier gibt es eine Limerick-Techno-Datei. Wenn ich hier einen neuen Rahmen habe, gehen wir Rahmen, Stroh raus Ich muss einen Teil meines Vermögens hinzufügen. Standardmäßig listet es einfach alles auf. Aber auch hier gilt: Wenn du anfängst , kompliziertere Designs zu bekommen kannst du die Unterordner einblenden damit es einfacher ist, zu gehen Ich brauche ein Icon, ich kann zum Cons-Ordner gehen und es herausziehen Das Schöne an diesem Weg ist, dass, wenn ich hier hinten ein Icon habe, das ich nicht haben möchte, und ich die Buttons haben will, schaue es mir an, einfach drüber ziehen Wenn ich das jetzt wieder einschalte, ist es an Okay, das Herz dort ist jetzt im Button-Ordner. Es ist also eine einfache Möglichkeit, Dinge zu verschieben. Lass mich dir den anderen Weg zeigen, nur weil viele Leute es immer noch tun. Ich werde mir das schnappen. Das ist meine Hauptkomponente für meine Felder. Das werde ich kürzen . Ich werde das in meine Hauptbibliothek legen. Anstatt es in einen Abschnitt einzufügen, können Sie es einfach benennen. Geben wir diesem einen besseren Namen für den Anfang. Das wird mein DOB-Feld sein. Was Sie tun müssen, ist, am Anfang des Namens das Feld einzugeben und einfach einen Ford-Slash einzugeben Es kann Leerzeichen haben, es braucht keine Leerzeichen. Ich mag Leerzeichen. Klicke darauf. Nun, ich habe da ein paar Dinge hinzugefügt . Du gehst weg. Sie werden feststellen, dass ich, wenn ich zu meinem Assets-Menü gehe, sehen Sie, dass ich diesen Feldordner hier habe. Du landest am selben Ort. Der einzige Unterschied ist wirklich , dass wir es so machen mussten. Jetzt können Sie es mit Abschnitten machen. Es spielt keine Rolle, auf welche Weise, aber Sie werden auf beide stoßen. Deshalb wollte ich dir zeigen, es keinen richtigen Weg gibt. Ich finde die Abschnitte einfacher weil ich sie offensichtlich nur hineinziehen musste Aber wenn ich viele davon habe, muss ich sie umbenennen. Ich kann massenweise umbenennen, also lassen Sie uns hier nur ein Beispiel machen. Lassen Sie uns mit FK ein paar Yep erstellen. Gib ihm Farbe. Jede Farbe. Lassen Sie uns sie in mehrere Hauptkomponenten umwandeln. Das ist eine wichtige Sache. Das kannst du nicht mit Instanzen machen. Sie müssen die Hauptkomponente finden, und ich kann jetzt meine Massenumbenennung durchführen Ich könnte sie einzeln hinzufügen, aber ich kann meinen Befehl oder die Steuerung R verwenden. Ich kann sagen, ich möchte zwei umbenennen Ich werde einen Ordner namens Squares haben und ich werde einen Ford-Slash eingeben und dann werde ich den aktuellen Namen verwenden Ich benenne all diese Rahmen um, Quadrate, genau wie wir es für das Geburtsdatum getan haben Aber ich hoffe, dass ich jetzt in meinem Assets-Bedienfeld einen Squeze-Ordner habe. Ich zeige Ihnen zum Beispiel zwei Möglichkeiten, etwas zu tun, aber Sie werden auf beide stoßen, und es ist praktisch zu wissen, was zur Hölle vor sich geht Müssen Sie sie in Gruppen einteilen? Nein, aber Sie kommen an einen Punkt, an dem Sie tatsächlich viele dieser verschiedenen Komponenten haben, und Sie müssen sie gruppieren, weil es schwierig wird, herauszufinden, wo sich alles befindet. Okay, so organisieren Sie Ihre Komponenten in Ihrem Asset-Panel in Gruppen Die beiden Dinge, die Ihnen auffallen könnten, sind, dass Sie die Hauptkomponente sind, wenn ich das nehme und gehe Nein, Sie können hier sehen, dass es sich nur um ein Beispiel handelt. Okay? Also, wenn ich mir den schnappe und hierher gehe und ich in eine Gruppe gehe, lassen Sie uns den Befehl umbenennen. Nennen wir ihn Ty, weil mir die Namen ausgehen, Thingi, weil es eine Instanz ist, man kann es dort im Vergleich zur Hauptkomponente sehen Gehe zu meinem Assets-Ordner. Ich habe keinen Ordner Dieser. Die andere Sache, die dich abschreckt, ist, dass du es hier einschalten musst. Sonst wirst du sie nicht sehen. Ich werde mich einfach verteilen. Ich wollte noch etwas hinzufügen und Ihnen zeigen, wenn Sie Abschnitte innerhalb von Abschnitten platzieren , Sie haben diesen Abschnitt hier oben, der Komponenten genannt wird. Komponenten. Sie werden feststellen, dass Sie eine Komponente haben, aber dann haben Sie diese zusätzliche Untergruppe von Symbolen nicht Sie funktionieren einfach nicht so , wenn du sie benennst, also könnte das eine weitere Sache sein, auf die du stoßen Was auch immer das übergeordnete Element ist wird der Name der Gruppe sein, also können Sie hier keine Abschnitte und Seitenabschnitte für diese Gruppe angeben. In Ordnung, das ist es Ich werde das rückgängig machen und wir sehen uns im nächsten Video. 94. Klassenprojekt 20 - Bewertungskarte: Ich weiß, dass du danach gefragt hast . Es ist Zeit für Klassenprojekte. Es ist eine Weile her. Ich möchte, dass du eine Bewertungskarte erstellst, ähnlich dem, was wir erstellt haben. Ich möchte, dass Sie diese Funktionen hier einbeziehen : das Breitenwerkzeug überlappende Sterne, Autolout-Objekt ignorieren, die Xmax-Schaltfläche und die in Ordnern organisierten Komponenten Lass mich dir zeigen, was ich meine, so etwas. Fügen Sie also irgendwo das Width-Werkzeug hinzu. Ich habe es gerade als Teil des Autolouts als Trennlinie bekommen, die Sie vielleicht als Hintergrundgrafik haben Mir ist egal, wie du das machst. Werde kreativ. Könnte etwas Cooles dabei sein oder liegt bei dir. Ich möchte, dass du eine Sternebewertung hast und ich möchte, dass sie sich überschneiden, nur weil meine in eine Komponente verwandle und dann eine Reihe von Instanzen zu einem Autolayout hinzufüge dann eine Reihe von Instanzen zu einem Autolayout hinzufüge, nur damit ich auch hier reingehen und sie ausschalten kann , wenn ich das für unterschiedliche Rankings und verschiedene Lesungen brauche unterschiedliche Rankings und verschiedene Aber ich wollte nur, dass sie sich überschneiden. Ich möchte, dass mindestens einer den automatischen Ausgang ignoriert. Ich habe einen oben und einen hier drüben. Mir ist egal, welchen du tust. Sie könnten mit dem experimentieren, der reagiert, aber das macht mir nichts aus. Solange es eine gibt, die das automatische Layout ignoriert, sie aber trotzdem Teil dieses Frames ist, stellen Sie sicher, dass Sie eine Min Max-Schaltfläche haben Ich habe diesen hier, er hat, einer hat ein Min-Animax und ich muss nur sichergehen, dass meins Und dann schreibt mein Text eine Zeile, sodass er, wenn ich anfange, ihn einzutippen, von dieser Seite nach drüber bewegt wird Cool. Stellen Sie außerdem sicher, dass sich Ihre Ressourcen in Ordnern befinden. mir nichts aus, ob es sich im aktuellen Ordner oder in Ihrem Hauptordner befindet, je nachdem, wie sehr Sie bereit sind , Ihr Projekt aufzuräumen Ich möchte sehen, dass das so weitergeht. Es könnten nur Knöpfe und Symbole sein. Damit bin ich auch einverstanden. Wenn du fertig bist, teile ganz normal einen Screenshot deiner Bewertungskarte. Versuchen Sie, eine Aufnahme zu machen , auf der Sie sowohl die Gruppen als auch die Bewertungskarte haben . Mach etwas Netteres als meins. Laden Sie es in Klassenprojekte hoch und teilen Sie es online Mal sehen, ob wir einige der Dinge, die wir gelernt haben, in die Tat umsetzen können . Wir sehen uns, wenn du dein Klassenprojekt abgeschlossen hast. 95. Hinzufügen von Zusatzbedingungen zu Variablen in Figma: Hallo zusammen. Es ist bedingte variable Zeit. Wir haben früher Variablen erstellt, erinnern Sie sich daran, dass wir die Taste gemacht haben, wenn wir Plus gedrückt haben, ging sie hoch und wenn wir Minus drückten, ging sie runter. Wir machen das noch einmal, um es noch einmal zusammenzufassen, aber wir werden auch sicherstellen, dass es nicht unter Null fällt Es geht hoch hinauf, kann dann aber nicht runter runter runter runter runter runter runter runter runter runter runter runter Das ist die Bedingung. Wenn es weniger als Null ist, mach nicht weiter. Wir fügen auch eine weitere Bedingung hinzu, in der es heißt: Wenn du bis zehn erreichst, geh nicht höher. Schau dir das an. Sie werden bedingte Variablen genannt. Lass uns reinspringen und machen. Richtig. Um zu beginnen, habe ich gerade eine brandneue Designdatei erstellt. Sie heißt Untitled, und ich habe meine Schaltflächen hineingezogen, und hier in der Mitte befindet sich ein bisschen Text für die Zahlen Es gibt nur ein neues Dokument. Lassen Sie uns noch einmal zusammenfassen, wie wir die Variablen früher erstellt haben , denn ich muss noch einmal zusammenfassen, weil es so lange her ist, Sie wahrscheinlich auch Lassen Sie uns zuerst die Variablen erstellen. Lassen wir nichts auswählen. Geh hier rüber. Variablen. Lass uns auf diese kleine Option klicken. Lassen Sie uns eine erstellen, und wir werden eine Zahlenvariable erstellen. Wir nennen das eine Summe und setzen den Wert auf fünf, und setzen den Wert auf fünf nur damit wir wissen, dass wir ihn richtig angewendet haben. Wenden wir diese Variable also auf die Zahl und hier an. Klicken Sie auf das Zahlenfeld und im Design oben sehen Sie die Schaltfläche „ Variable anwenden“. Lass uns darauf klicken. Welche Variable wollen wir anwenden? Gehen wir zur Summe über. Sie sind jetzt verbunden. Also fünf ist nicht das, was ich will. Ich werde es wieder auf Null stellen, aber wir wissen, dass es funktioniert. Lass uns das jetzt schließen. Jetzt benötigen wir diese Schaltflächen, um diese Variable zu ändern. Lass uns das Plus machen. Lass uns auf diesen klicken und gehen wir hier hoch, wo ist er? Es ist ein Prototyp. Option acht und neun schalten zwischen Design und Prototyp um zwischen Design und Prototyp Das ist der eine Sprung , der ein bisschen komisch ist. Stellen Sie sicher, dass Sie im Prototyp sind. Ich werde dieser Schaltfläche Interaktion hinzufügen. Auf Knopfdruck, was ich tun wollte. Ich möchte nicht zu einer Seite gehen. Ich möchte eine Variable setzen. Welche Variable? Insgesamt. Ich habe nur einen. Ist einen Ausdruck schreiben. Wenn auf diese Schaltfläche geklickt wird, möchte ich die Summe nehmen und eine hinzufügen Ich tippe einfach eins auf meiner Tastatur und das sollte funktionieren. Ich klicke einfach im Hintergrund ab, Umschalt-Leertaste, und das sollte funktionieren. Machen wir dasselbe für Minus. Sagen wir unter Prototyp. Lassen Sie uns Interaktion hinzufügen. Beim Tippen möchte ich, dass dieses Ding eine Variable festlegt. Welche Variable? Ich habe schon einen? Ich hätte gern, dass es sich ausdrückt. Das ist das Einzige, was du doppelt tun musst. auf der Suche nach Subtraktion. Du musst sagen, ich möchte eigentlich, dass die Summe subtrahiert wird und ich möchte, dass sie um eins subtrahiert wird Lassen Sie uns im Hintergrund sehen, ob es funktioniert. Leertaste, hoch , hoch, runter, runter, runter, runter. Aber es geht runter runter runter runter, Papa. Hier sind Bedingungen nützlich. Was ich sagen werde, ist dieser hier. Du kannst es hier oben oder hier unten machen. Ich werde sagen, ich möchte keine Variable setzen. Ich werde es in eine Bedingung ändern. Nun, eine Bedingung ist wie ein Flussdiagramm. Sie können dort ein kleines Symbol sehen. Ein Flussdiagramm, ja, nein, und Sie gehen verschiedene Richtungen ein. Für diesen Zustand ist es hier genauso. Es wird heißen , wenn das wahr ist, tu das. Wenn es nicht wahr ist, tu das. Wenn was wahr ist, klicken wir rein wenn ich unsere Bedingung aufschreiben will. Ich werde sagen, ob die Summe kleiner als Null ist, oh, wenn sie größer als Null ist. Wenn es größer als Null ist, möchte ich, dass es minus eins weil wir die ursprüngliche Variable ersetzt haben, die komplett weg ist. Also werden wir sagen, wenn sie größer als Null ist, möchte ich, dass sie variabel gesetzt wird. Ich würde gerne die Summe nehmen, was unser Ziel ist, und ich würde gerne die Summe nehmen und ich würde gerne eins minus eins nehmen. Also das Gleiche, was wir vorher gemacht haben, aber jetzt steht es in dieser Aussage, wo es heißt: Wenn es größer als Null ist, mach dieses Ding. Wenn nicht, tu nichts. Wenn es nicht größer als Null ist, unterschätze es nicht dauernd. Lass es uns versuchen. Funktioniert es? Leertaste verschieben. Okay, hoch hoch, runter runter runter runter runter, da, da, da, da. Hört auf zu arbeiten. Schau uns an. Wir sind Computer-Hacker-Programmierer. Wenn Sie ein Entwickler sind, der sich das anschaut, entwickeln viele Entwickler ihre Figma-Fähigkeiten und wissen, wie Designer arbeiten Sie werden über meine Terminologie und meine Begeisterung lachen , etwas so Einfaches zum Laufen zu Da ich kein besonders guter Entwickler oder Programmierer bin, bin ich sehr begeistert. Du könntest wie ich sein Lass uns noch einen machen und wir besprechen es einfach, weil ich sagen will, es geht nicht unter Null, aber es kann nicht über zehn gehen. Nehmen wir an, die Leute können nicht mehr als zehn Tickets kaufen. Also sagen wir, wir gehen hier rein. Okay? Wir haben das Ding eingerichtet. Wir werden es loswerden. Wir werden sagen, ich will eigentlich keine Variable setzen, ich werde eine Bedingung setzen. Ich möchte, dass die Bedingung insgesamt auf zwei gesetzt wird. Wenn die Summe was ist? Wenn die Summe weniger als zehn ist, möchte ich, dass es funktioniert. Was ich arbeiten möchte. Also, wenn die Summe weniger als zehn ist, möchte ich, dass du das tust. Ich möchte, dass Sie die Variable auf die Summe setzen, was das Ziel ist, und ich möchte dass zur Summe eins hinzugefügt wird. Ich möchte eins hinzufügen. Das ist alles, was wir gemacht haben , als wir das Video zum ersten Mal gestartet haben. Aber jetzt ist es in diesem Zustand. Es wird nur funktionieren, wenn die Zahl weniger als zehn ist. Wenn es mehr als zehn ist, möchte ich, dass du nichts tust, bitte. Ich will nicht, dass du arbeitest. Lass uns das versuchen. Komm schon, und es funktioniert und es bleibt bei zehn. Wenn Sie kein Hardcode-Programmierer sind, spielen Sie ein bisschen herum und versuchen, weniger als, weniger als gleich , größer als herauszufinden weniger als gleich , größer als Aber ich hoffe, es hat Ihnen einen guten Einblick in die Bedingungen gegeben, eine Möglichkeit, Variablen zu erweitern, insbesondere die Minuspunkte Es ist eine großartige Möglichkeit, Variablen zu erweitern, und es gibt 1 Million andere Dinge, die Sie mit Variablen tun können , im Grunde alles Codieren Aber hoffentlich geben sie dir einen guten Einblick in das, was Leute tun, andere Leute vielleicht für dich getan haben oder deine eigenen Variablen mit Bedingungen erstellen. Jetzt bin ich ziemlich visuell. Ich kann das Zeug nicht sehen und dann gehen, ich weiß, dass das passiert. Ich muss los, ich habe eine Variable. Wenn insgesamt, und dann zeige ich darauf, gibt es hier eine Variable, die ich auf Null gepflügt Wenn die Summe kleiner ist als und ich meine Hände mit dem Alligator machen muss, weniger als zehn, mach dieses Ding. Was ist das für ein Ding Ich möchte die Summe finden, dann diese Summe nehmen und plus eins hinzufügen. Wie dem auch sei, ich hoffe, das war hilfreich. Ich hätte dort aufhören sollen, oder? Einigen Leuten wird das leicht fallen. Den Leuten wird es also schwer fallen. Ich bin in der Mitte. Ich fühle mich wie ein Genie, wenn ich es zum Laufen bringe, aber ich schaffe es nicht immer beim ersten Mal. Du wirst irgendwo in diesem Spektrum sein. In Ordnung, das sind bedingte Variablen innerhalb von Figma. 96. Ändern der booleschen Variablen in Figma auf false: Jeder. In diesem Video werden wir uns eine weitere Variable ansehen. Wir werden uns etwas ansehen, als Bullion-Variable bezeichnet wird Es ist ein ausgefallener Name für An oder Aus, Wahr oder Falsch. Was wir tun werden, ist, darauf auf Plus zu klicken und das Kartensymbol, das derzeit auf Falsch gesetzt ist, als leer anzusehen Kartensymbol, das derzeit auf Falsch gesetzt ist . Wenn ich auf Plus klicke. Schau, es zeigt, dass du etwas in deinem Einkaufswagen hast . Schicke Hosen. Lassen Sie uns einsteigen und Ihnen zeigen, wie man ein Edelmetall innerhalb von Bullion variabel macht ein Edelmetall innerhalb von Bullion variabel . Bullion ist ein schwer auszusprechendes Wort, und ein sehr seltsames Wort. Lass uns reinspringen Ordnung. Um loszulegen, habe ich das Symbol eines Einkaufswagens gefunden und es in einen Kreis gelegt. Das ist es. Ich benutze Iconify und habe mir einfach irgendein altes Einkaufswagen-Ding geschnappt und daraus den Vektor mit der Ellipse gemacht Ich habe den Rahmen, in dem es war, losgeworden . Das machen wir jetzt. Wir brauchen eine Komponente. Also wähle ich beide aus, verwandle sie in eine Komponente, Befehlsoption K, Steuerung OK. Geben wir ihm einen Namen. Nennen wir das meinen Einkaufswagen und wir brauchen zwei Varianten. Ein Boolescher Wert wechselt also zwischen nur zwei. Es muss ein- oder ausgeschaltet sein. Wahr oder falsch. Das hier, ich werde dir acht Farben geben. In Ordnung. Nun, es hat länger gedauert als ich erwartet hatte, aber wir haben zwei Varianten, keine Variablen. Wir haben das früher gemacht. Wir haben eine Komponente, es gibt nur zwei Varianten davon. Ich habe eine, die aussieht, als wäre sie leer, und eine, die aussieht, als wäre sie voll. Nennen wir sie. Lass uns hier auf den ersten klicken. Wir müssen sie richtig benennen. Du kannst diesen nicht leer nennen. Du musst das falsch nennen. Wie in Kann ich falsch buchstabieren? Da hast du's. Der Einkaufswagen ist falsch. Er ist nicht leer. Das hier werden wir als wahr bezeichnen. Oh, Rechtschreibung ist wichtig. Boolean ist wahr oder falsch. Lassen Sie uns eine Instanz davon herausziehen, und das ist es , was wir umschalten werden Jetzt müssen wir eine Variable erstellen. Denken Sie daran, dass in der Entwurfsansicht nichts ausgewählt wurde . Gehen Sie zu Variablen. Wir haben schon einen. Ich werde noch einen erstellen. Es wird die Nummer eins sein. Eigentlich wird es nicht die Nummer eins sein. Ich werde einen anderen namens Boolean erstellen. Du kannst es weiterhin Bullion nennen. Du solltest so etwas wie eine Wagenanzeige machen. Du wirst sehen, worum es sich bei Camel Case oft handelt. Der erste ist in Kleinbuchstaben geschrieben und die dazwischen liegenden in Großbuchstaben. Sache mit der Wagenanzeige. Das ist Camel Case Ich benutze nie Camel Case, weil ich einfach Karren machen könnte. Ich mache Dinge wie Ist der Wagen voll. Wenn du besser werden willst, benutzen die Leute Unterstriche. Ich mache nichts davon. Weil du nicht der Boss von mir bist und Figma nicht brauchst Wenn du das richtig codieren würdest, müsstest du Unterstriche, Bindestriche oder Groß-/Kleinschreibung verwenden Bindestriche oder Groß-/Kleinschreibung Wie dem auch sei, wir haben diese Variable erstellt . Sie wird auf nichts angewendet, also wenden wir sie auf etwas an. Du wirst also diese Variable sein. Wo machst du das? Hier drüben? Es ist ein bisschen versteckt , weil es da ist. Die Warenkorb-Instanz. Da ist mein kleiner Schalter, der cool ist. Die haben wir schon einmal gemacht Member, wahr oder falsch, gibt Ihnen diesen kleinen Schalter, und hier können Sie diese Variable anwenden Ich möchte sagen, dass der Einkaufswagen voll ist, wie es hier angegeben ist. Um es zu kontrollieren. Womit schalten wir es um Wir werden diesen Knopf benutzen. Wir werden sagen, wir werden unsere Variablen öffnen, von denen wir uns erinnern, dass sie sich im Prototypmodus befinden. Ich habe schon einen. Ich klicke darauf und gehe ein bisschen nach oben. Ich werde einen zweiten hinzufügen. Es ist eine weitere Bedingung. Denn was ich sagen werde, ist, wenn die Summe größer als Null ist, möchte ich, dass es etwas bewirkt. Was möchte ich tun? Ich möchte diese Aktion durchführen. Diese Aktion hier wird diese Variable setzen, welche Variable, die Variable Warenkorb voll, was dieses Ding hier ist, ich möchte, dass sie auf true gesetzt wird. Vielen Dank. Probiere es einfach aus. Schau, ob es funktioniert. Shift plus. Wenn dies größer als Null ist, sollte dies dazu führen, dass dies wahr ist. Und es ist wahr. Oh, ich bin so glücklich mit mir selbst, okay? Und was ich tun werde, ist, es dort zu lassen, wenn es auf Null sinkt, es funktioniert nicht. Ich werde dich dazu bringen, das zu tun. Ich werde dich als kleines Miniprojekt einrichten. Es wird kein vollwertiges Projekt sein , wie wir es getan haben. Ich will nur, dass du gehst und schaust, ob du es falsch machen kannst , wenn es unter Null fällt, sogar auf Null oder darunter. Geh selbst und sieh, ob du es schaffst. Lass mich in den Kommentaren wissen, ob du es getan hast. Auch wenn du es nicht getan hast, lass es mich wissen wenn es zu schwer ist, ich bin einfach interessiert. Ich werde dir im nächsten Video zeigen, wie ich es gemacht habe , damit du Notizen vergleichen kannst. Wenn du es getan hast, spring herum. Du bist ein Computerhacker Wenn Sie bereits Entwickler sind, können Sie die Augen verdrehen, wenn es darum geht, wie einfach das ist Aber wenn Sie wie ich sind und sich wirklich dafür begeistern, Dinge zu programmieren, springen Sie herum. Lass mich in den Kommentaren wissen, wie du Variablen findest. Probiere es aus und ich sehe dich im nächsten Video. 97. Boolesche Variable - Abgeschlossen: In Ordnung. Im letzten Video mussten wir zeigen, wie der Einkaufswagen voll wurde, aber wir konnten ihn nicht ausschalten Aber in diesem Video werde ich dir zeigen, wie ich es zum Ausschalten gebracht habe. Nur für den Fall, dass Sie das nicht könnten, nur Fall , dass Sie Notizen vergleichen möchten. Falls du es geschafft hast. In Ordnung, lass uns gehen In Ordnung, ich hoffe, es lief gut im letzten Video. Wir werden es zusammen machen, falls Sie es nicht verstanden haben oder einfach nur Notizen austauschen möchten Okay, wir werden es bis zu diesem Minus machen. Wir wollen das ausschalten. Wir wollen wieder leer sein. Wir sagen also, fügen wir eine weitere Bedingung hinzu, indem wir sie hier machen. Okay, wir werden sagen, ich will eine Bedingung, die sagt: Wird unser Zustand sein? Wenn die Summe gleich Null ist , möchte ich, dass du etwas tust. Null, ich möchte, dass du diese Aktion ausführst. Welche Aktion? Ich werde die Variable sagen? Welche Art von Variable möchte ich sehen? Ist der Einkaufswagen voll? Er ist nicht voll. Es ist falsch. Lass es uns versuchen. Hat das funktioniert? Anschließen, hoch, rauf, runter runter runter. Ja, wir haben es geschafft. Ich bin zuversichtlich, dass Sie es auch getan haben. Fühlst du dich gut? Ich fühle mich gut. Wie dem auch sei, das war machbar und du musst dir die Dinge ansehen, die du jetzt machst Du schaust dir das an und denkst, nun, sieh dir an, ich habe es getan. Das habe ich gemacht. Es ist nicht viel, aber diese kleinen Interaktionen können Ihren Prototyp wirklich zum Laufen bringen, können Ihren Prototyp wirklich zum Laufen bringen wenn Sie versuchen, Ideen an Kunden zu verkaufen und dem Entwickler zu zeigen, wie Sie sich vorstellen , dass ein solcher Prototyp wenn Sie versuchen, Ideen an Kunden zu verkaufen und dem Entwickler zu zeigen, wie Sie sich vorstellen, dass ein solcher Prototyp funktioniert, bevor er ihn baut. In Ordnung, ich fühle mich gut. Ich hoffe, Sie sind stolz auf sich selbst, dass Sie einige Variablen mit Bedingungen und Goldbarren gemacht einige Variablen mit Bedingungen und Goldbarren Schau uns an. Wir sehen uns im nächsten Video. 98. Erstellen eines Overlay-Popups im Aktionsfeld Variablen in Figma: Hallo zusammen. Wir schauen uns an, wie wir ein Modell öffnen, wenn wir auf das Plus klicken sagen: Schau, wir haben den Einkaufswagen gelegt und nach einiger Zeit verschwindet es wieder. Es ist nicht wirklich eine Variable, obwohl wir uns im Bereich Variablen befinden, aber ich wollte dir zeigen, wie ich verwirrt wurde, und ich weiß, in diesem Teil des Videos macht es Sinn. Lassen Sie uns loslegen und eine Nicht-Variable in der Variablen-Klasse erstellen . Als Erstes werden wir uns im Prototypmodus befinden, damit das alles funktioniert. Wir haben einige Variablen auf diese Schaltflächen angewendet . Ein Haufen Sachen ist los. Was du tun kannst ist als ich mir das zum ersten Mal angesehen habe, als sie es eingeführt haben, dachte ich, A, wir können eine Variable hinzufügen, die Überlagerungen macht Nicht wirklich. Wir machen nichts Variables. Wir machen das, wir arbeiten mit dem Wasser vom Fass. Diese Variablen, das, was wir hinzufügen, sind es nicht. Wir haben Pop-Ups im Grundlagen-Kurs gemacht. Wir werden sagen, ich möchte, wenn das angezapft wird, all das Zeug vergessen Ich wollte einfach etwas separat machen. Ich möchte eine Aktion machen. Ich möchte keine Variable setzen. Ich möchte nur ein Overlay öffnen. Hier machen wir keine Variablen, obwohl es sich so anfühlt, als würden wir es tun, weil wir uns im selben Fenster befinden, um das nach oben zu verschieben Ich werde sagen, wenn das angetippt wird, möchte ich ein Overlay öffnen, welches Overlay , ich habe nur Ich habe es zum Erfolgsknopf gemacht . Das ist hier drüben, ich habe es gemacht. Ich habe ihm einen Namen gegeben, und was will ich damit machen? Ich möchte, dass es an der richtigen Position erscheint. Ich werde es bekommen, nicht schicken. Ich möchte es manuell irgendwo ablegen. Ich werde sagen, dass es da drüben immer im Weg ist. Ich will, dass es hier unten erscheint, kaufe meine Fußzeile. Es wird in der Nähe angezeigt, wenn Sie nach draußen klicken. Was für eine Animation, ich werde dafür sorgen, dass sie sich nach jeder Entfaltung auflöst Hier ist es zwischen meinen beiden separaten Variablen aufgetaucht. Mach dir darüber keine Sorgen. Du kannst sie ziehen. Du kannst sie nicht ziehen. Früher konntest du sie ziehen und du konntest sie auch schließen, sodass du sie einfach ein bisschen leichter sehen konntest, das ist okay. diese Schaltfläche gelten zwei Variablen, aber unabhängig davon haben wir gerade dieses Öffnen von Overlays, probieren Sie es Wenn auf diese Schaltfläche geklickt wird, probieren wir es aus. Ich sollte beide die Nummer eingeben, es sollte den Warenkorb ändern und diese kleine Erfolgsmetrik hier unten haben , in den Warenkorb gelegt Wenn ich auf den Hintergrund klicke, löst er sich auf. Etwas schicker und lass uns diesen Button auflösen Wir müssen also nicht auf den Hintergrund klicken, der sich nach einiger Zeit auflöst Was wir hier tun können, ist, auf unsere Schaltfläche zu klicken und eine Interaktion hinzuzufügen. Also Prototyp. Fügen wir eine Interaktion hinzu und sagen wir, nach einer Verzögerung von wie lange? Ich weiß nicht, 1,5 Sekunden. Ich möchte, dass das Overlay geschlossen wird. Lass uns das versuchen . Eine Leertaste, füge hinzu und dann warte, warte, warte, warte, warte, warte anderthalb Minuten Es verschwindet von selbst. Üben Sie sich natürlich selbst darin, die Option „ Aus dem Einkaufswagen entfernen“ zu verwenden. Sie benötigen also eine weitere Schaltfläche und schauen, ob Sie diese Logik hier zum Laufen bringen können. Ich werde es im nächsten Video nicht selbst machen. Ich habe das Gefühl, dass du das schaffst. Probiere es aus. Lass es mich in den Kommentaren wissen. Hast du das bekommen? Wenn Sie Probleme haben, hinterlassen Sie sie in den Kommentaren und ich oder einer der Experten werden kommen und Ihnen helfen. Ich glaube, ich möchte das zu diesem Variablenbereich hinzufügen, obwohl wir keine Variable erstellen weil ich, als ich diese Funktion zum ersten Mal sah , dachte ich: Erstellen wir eine Variable? sind wir nicht. Wir fügen gerade eine weitere Aktion zu unserem Wasserhahn hinzu. Das ist keine Variable, aber es ist alles miteinander vermischt. Das habe ich herausgefunden, es hat alles ein bisschen mehr Sinn gemacht. Ordnung, ich hoffe, es hat für dich Sinn gemacht . Ich sehe dich im nächsten Video 99. Ändern des Abstands mit Zahlenvariablen in Figma: I In Ordnung, Leute, wir werden uns eine andere Variable ansehen Im Grunde werden wir Variablen für den Abstand verwenden . Schau dir das an. Ich werde sagen, du fühlst dich nicht wohl, du wirst kompakt sein und macht den ganzen Abstand hier enger , bequem und kompakt Sie können sehen, dass wir auch Variablen für den Abstand verwenden können. Wir haben das früher gemacht , als wir den Dunkelmodus gemacht haben. Sie können diese wirklich überzeugenden, unterschiedlichen Designs mit vielen verschiedenen Änderungen erstellen, die nur mit einem Knopfdruck vorgenommen werden nur mit einem Knopfdruck vorgenommen In diesem Video werde ich mich ein bisschen verirren. Ich werde es in den Kurs aufnehmen weil du dich auch verirren wirst. Worauf ich mich in diesem Video konzentrieren möchte , ist einfach das Spielen mit einem Abstand. Das ist nicht so schwer. Irgendwie mache ich es in diesem Video schwer, indem ich kaputt gehe, verirre, repariere es zusammen und wir werden alle klüger sein Lass uns reinspringen. In Ordnung, um anzufangen. Ich wollte dir nur zeigen, was wir früher im Kurs gemacht haben , als wir den Hellmodus und den Dunkelmodus gemacht haben. Denken Sie daran, wir haben das gemacht und wir konnten von Farbmaterial vom hellen Modus zum dunklen Modus übergehen . Es ist dem sehr ähnlich. Sie müssen den Hellmodus und den Dunkelmodus nicht angewendet haben, aber ich gehe zurück zu der bestimmten Datei , die ich erstellt habe, zurück zu unserem Hauptdokument und mache dort meine Abstände. Zunächst habe ich nur ein paar Textfelder und ein kleines Bild, das herumhängt. Ich möchte daraus ein Autolayout machen. Ich möchte daraus ein Autolayout machen, Shift A, und dann kombiniere ich diese beiden, das Auto Out und dieses Bild zu einem Auto-Out-Schichttag gibt es ein Nest von Auto draußen gibt es ein Nest von Auto, weil ich mit dem Abstand zwischen diesen beiden und dem Abstand zwischen diesen beiden hier herumspielen möchte Abstand zwischen diesen beiden und dem Abstand zwischen diesen beiden und dem Abstand zwischen diesen Es sind die Abstände, auf die ich Variablen anwenden möchte. Lass uns nichts auswählen. Lassen Sie uns auf Variablen eingehen. Wir haben schon einen. Vielleicht nicht, aber ich habe dieses Ding namens Color Stuff. Lass uns einen neuen machen. Ich würde sagen, lassen Sie uns einen Kredit einziehen. Ich werde das nennen, nicht Inkasso. Ich nenne das Spacing. Okay. Und hier werde ich meine erste Variable erstellen. Es wird eine Zahlenvariable sein, und wir haben ein paar Dinge. Wenn wir hier mit Leerzeichen umgehen, verwenden wir oft keine Zahlen, sondern Wörter wie Tissuet-Wörter Wir verwenden kleine, mittlere , solche Dinge. Ich fange mit Medium an. Sie könnten das gesamte Wordmedium schreiben. Das spielt keine Rolle. Im Internet ist es einfach sehr üblich, MD für meine mittlere Größe zu verwenden , ich möchte ungefähr 16 Jahre alt sein. Es ist nicht zu groß, es ist nicht zu klein. Es ist mittelgroß. Was ich tun möchte, ist, dass ich zwei Modi haben möchte. Dieser erste Modus hier wird Compact genannt. Kleine Randnotiz hier. Falls du viel Rascheln und Sachen herumkrachen hörst, ich habe zwei neue Kätzchen und sie greifen alles im Büro an und sie müssen hier sein, weil ich mich um Ignoriere das Rascheln. Stellt sich heraus, dass ich ein Katzenfreak bin Wir haben einen Kompaktmodus und es wäre üblich einen anderen Modus zu haben, der als komfortabel bezeichnet wird. Wir nennen es einfach bequem. Schlecht, es ist kürzer. Man könnte das als Handy und Desktop bezeichnen. Desktop, Sie haben mehr Speicherplatz, sodass Sie Medium nur ein bisschen größer machen können , wenn Sie sich auf dem Desktop befinden. Sie können das umbenennen. Es ist wirklich üblich , kompakt und bequem zu haben , was auch die Abstände angeht. Vielleicht sind Sie auf Ihren Reisen darauf gestoßen. Medium auf einem kleinen Gerät oder ein kompaktes Gerät wird 16 sein, aber wir haben mehr Platz, Medium wird tatsächlich etwas größer sein Lassen Sie uns das ausprobieren und anwenden. Wir werden unsere Variablen gutschreiben. Gehen wir und wenden es an. Wir machen es bis zum Abstand hier drin. Dieser Abstand hier zwischen dieser Überschrift hier und dem Text, ich möchte mittelgroß sein. Sie können dies im Moment nicht verwenden, um die Variable anzuwenden. Du musst genau das gleiche Symbol hier drüben machen. Lücke ist dasselbe wie Lücke da drüben. Aber in diesem Fall, um das Drop-down-Menü abzurufen, können wir sagen , ich möchte eine Variable anwenden, auf die ich meinen mittleren Abstand anwenden möchte. Ich möchte, dass sie vielleicht auch einen mittleren Abstand dazwischen haben. Ich möchte, dass du nicht 18 Jahre alt bist, ich möchte, dass du eine Variable oder ein Medium bist. Beide 16 Pixel voneinander entfernt. Das Coole daran ist, dass ich jetzt keine 16 eingegeben habe. Ich habe Medium eingegeben. Das heißt, ich kann diesem Elternteil hier sagen, es standardmäßig die erste Ihrer Variablen Es ist standardmäßig auf 16 eingestellt, weil es die erste in der Liste ist. Was ich aber sagen kann, ist dieses Ding hier, wir hatten den Hell- und Dunkelmodus, den hast du vielleicht nicht Wir können noch einen hinzufügen, um zu sagen, ich möchte, dass die Abstände kompakt sind, was nichts ändert, weil es die Standardeinstellung ist , weil es die erste ist, sie ist auf Automatisch. Ich werde es zu bequem sagen. Schau dir das an. Es ändert sich alles. Alles ändert sich. Außerdem können wir Lichtmodus in den Kompaktmodus wechseln. Komm schon. Oh, ich liebe es, diese Dinge zu kombinieren. Also lass uns ein bisschen mehr durchgehen. Ich gehe zurück in den Dunkelmodus. Ich gehe zurück zum Kompaktmodus. Das ist gut. Füllen wir einige der anderen Variablen aus. Das ist eher dasselbe. Ich will es dir nur zeigen. Du solltest all deine verschiedenen Farbvariablen durchgehen und erstellen , tut mir leid, all deine Zahlenvariablen. Du solltest ein kleines machen Okay, du solltest es durchgehen und es extra klein machen. Es ist offensichtlich groß, extra groß. Das sind normale Größen, die Sie verwenden. Sie können natürlich alles erstellen, was Sie wollen. Also auf einem kleinen Gerät hätte ich gerne sechs. Entschuldigung, kein kleines Gerät. Bei einem kompakten Gerät möchte ich, dass der kleine Abstand acht und der bequeme 16 beträgt, wodurch der kleine Abstand ein wenig erweitert wird. Extra klein, es sind nur noch vier. Und wann immer ich extra kleine Abstände verwende, okay? Wenn es bequem ist, geht es um acht Uhr raus. Du solltest die anderen ausfüllen. Das werde ich nicht tun. Das Coole daran ist , dass ich überall nur Medium aufgetragen habe und die Lücke dort zu groß ist. Okay? Also, was ich sagen will ist, wenn ich damit zu tun habe, ja, Größe M ist eine gute Größe dafür. Die Größe zwischen diesen beiden, kann ich darauf klicken? Ich kann nicht. Ich werde auf das übergeordnete Feld klicken. Doppelklicken Sie darauf. Da haben wir's. Ich will nicht, dass es 16 sind. Kannst du sehen, was passiert, es ist in einer seltsamen Kiste. Das bedeutet, dass eine Variable ihm quasi sagt, was er tun soll. Es ist nicht 16, es ist tatsächlich mittel, was 16 ist. Oh Mann, ich verwirre alle. Geh und ändere das. Nehmen wir an, ich möchte die Variable nicht auf Medium anwenden, ich möchte, dass sie extra klein ist. In einem Kompaktmodus haben wir entschieden , dass extra klein vier ist, aber im bequemen Modus sind es acht. Ich fange mit vier an, wie ich es mag. Aber wenn ich sage, dass ihr euch jetzt alle wohl fühlt, ist das Kleine nur ein bisschen größer. Verstehst du die Idee? Das heißt, wenn ich diese lösche und zu dieser gehe und meine Variable „ In Ordnung“ anwende, bin ich wieder da. Du hast gesehen, wie ich mich dort verirrt habe. Weil ich dachte: In Ordnung. Weil ich dir nur zeigen wollte , dass wir den Text gelöscht haben, wir werden gehen, in Ordnung, wir gehen hier hoch und wir werden uns bewerben Abstand. Es ist nicht hier drin. Ich meinte, ich habe Dinge gelöscht, ich habe Dinge geändert. Ich habe Fgment sogar neu gestartet und dachte mir, vielleicht ist es das. stellt sich heraus, dass das nicht zutrifft wenn da nichts drin ist der Abstand darauf angewendet wird Also habe ich extra kleines Medium aufgetragen. Also, weil das nicht in diesem Dokument steht, kann ich meine Variablensätze nicht anwenden. Weil es auf guten Farbkram steht. Aber wenn ich dich schnappe, kopiere sie. Ich sage, dieses übergeordnete Element enthält jetzt Leerzeichen, weil es vorher keine Leerzeichen hatte. Das gefällt mir nicht. Aber jetzt weißt du es, wir wissen es beide. Ich füge Abstand hinzu und sage, dass das auf bequem eingestellt ist. Natürlich können wir sagen, dass ich eigentlich auch meinen Hellmodus und meinen Dunkelmodus ausschalten möchte meinen Hellmodus und meinen Dunkelmodus ausschalten dachte, das sei das Problem. Ich kann es aus dem Dunkelmodus umschalten und ich möchte, dass es kompakt ist. Schau uns an, wie wir Variablen für den Abstand verwenden. War das ein gutes Video? Muss ich das erneut aufnehmen? Ich weiß es nicht. Mir gefällt , dass wir uns verirrt haben und es gemeinsam herausgefunden haben. Ich finde das wichtig. Ich möchte Ihnen noch eine letzte Sache zeigen Wir haben hier dieses automatische Layout Lassen Sie uns die Hintergrundfarbe ändern weil ich Ihnen zeigen möchte, wie Füllungen in Bezug auf eine Variable angewendet werden Es ist ein bisschen anders. Geben wir ihm eine Füllfarbe , damit wir sehen können, was vor sich geht. Nicht diese Farbe. Jede Farbe grün. Das wird gut sein. Das ist also mein Auto Out. Ich möchte etwas Polsterung hinzufügen Ich würde sagen, kannst du hier sehen, ich kann 16 eingeben. Ups. Es gibt hier kein Drop-down-Menü wie dieses, in dem es heißt, Variable anwenden Du machst es etwas anders, und das wollte ich dir zeigen. Kannst du das sehen? Es ist nur das gleiche kleine variable Symbol , das wir überall gesehen haben. A, und wir können das Gleiche tun. Tragen Sie Medium auf, das 16 ist. A, dieses hier, Medium, das ist 16, und es wird funktionieren. Nehmen wir an, das hat den Abstand kompakt. Das ist die Standardeinstellung. Machen wir es uns bequem und die Polsterung wird größer Daran stimmen ein paar Dinge nicht . Es hat nichts mit den Variablen zu tun. Das werden wir jetzt reparieren. Aber ich glaube, ich wollte nur zusammenfassen, dass wir Leerzeichen verwenden können Wir haben Variablen für den Abstand erstellt. Wir haben sie benannt und wir hatten zwei verschiedene Modi, zwischen denen wir wechseln können. Was wir zuvor gemacht haben, ist, dass wir es mit Farbe in zwei verschiedenen Modi gemacht haben, dem Hellmodus und dem Dunkelmodus. Wir sind gegangen und haben es dann angewendet. Bei der Farbe war es mit der Füllfarbe. Werd das los. Wir können sagen, fülle die Farbe mit Oh, nein, und hier möchte ich sie mit der Schnittstellenvariablen füllen , die wir erstellt haben. Wenn wir dagegen Abstände verwenden, finden wir die Abstände, mit denen wir herumspielen wollen. Wir werden zumindest das Feld finden, das übergeordnete Element, mit dem wir herumspielen wollen Sie tun es entweder in der Drop-down-Liste für einige von ihnen und einige von ihnen haben dieses kleine Variablensymbol darauf. In Ordnung, das ist es. Ich möchte Sie dabei belassen, denn bei Abständen können Sie entscheiden, welcher Abstand das ist und welche verschiedenen Größen bequem und kompakt sind. Du merkst auch, dass das nicht funktioniert hat. Lass uns das jetzt reparieren. Etwas völlig anderes. Machen wir eine Pause, atmen wir tief durch. Irgendwas stimmt damit nicht. Ich weiß, was es ist. Mein Auto Lout ist auf den oberen Rand eingestellt und auf nichts anderes. Ich denke schon oder links. Was wir tun werden, ist zu sagen, dass die Einschränkungen gehen, lassen Sie uns das Ganze wieder auf den Kompaktmodus umstellen. Lassen wir es uns hinsetzen. Stellen wir das in die Mitte , damit es, wenn es bequem ist, selbst hineinschiebt und nicht einfach nach rechts rüberspringt Oben und links ist nicht das, was wir wollen. Wir wollen hierher gehen und links und rechts und oben und unten sagen . Wir haben das schon einmal gemacht. Die Einschränkungen. Lass es uns versuchen. Es wird wahrscheinlich immer noch nicht funktionieren. Lass uns in den bequemen Modus gehen. Die Box wurde nicht größer, der Abstand hat sich geändert, aber das wird sich an den Seiten etwas verklemmen Was stimmt nicht mit denen? Geh zurück zu Compact. Es ist dieses Textfeld hier. Nun, eigentlich ist der automatische Ausgang, der sich hier auf der rechten Seite befindet , auf eine feste Breite eingestellt. Es hat also eine feste Breite von 230. Wenn wir also mehr Polsterung hinzufügen, weiß es nicht, wohin es gehen soll. Wir sagen, fülle den Behälter, in dem du dich befindest. Fantastisch. Das wird funktionieren. Lass uns hierher gehen. C Sie können sehen, dass es in der Breite funktioniert hat. Füllen Sie den Behälter, in dem er sich befindet, drücken Sie ihn einfach ein wenig nach unten. Rückgängig machen, wiederholen, aber unten hat es nicht funktioniert. Im Grunde ist es dasselbe, es geht hier hin. Finden wir heraus, dass die Höhe davon so eingestellt ist, dass es sich umarmt. Das ist gut. Das ist dieses Textfeld darin Manchmal ist es der vollwertige Elternteil. Manchmal ist es die Order Out , die drinnen oder draußen ist, und manchmal ist es dieses Textfeld Dieses Textfeld hat eine Füllbreite , das ist in Ordnung. Eine Umarmung auf höchstem Niveau. In Ordnung, er ist es also nicht. Schnappen wir uns den Aout, in dem er ist, und er hat einen riesigen Inhalt. Lassen wir ihn den Behälter füllen und probieren wir es Du hast es dir bequem gemacht. Das hat immer noch nicht funktioniert. Was mache ich falsch? Du machst eine Pause und siehst, was ich falsch mache. Oh, es ist etwas. Oh, es ist die Mutter von allem. Es ist dieser Typ, sieh mal, seine Körpergröße ist festgelegt. Ah, die Freuden von Figma, aber wir wissen, wie wir es reparieren können. Wir können uns nicht durcharbeiten. Ist es das? Ist es das? Okay? Nun, ich hoffe, es ist das. Gehen wir zu Hug Contents. Und jetzt lass es uns versuchen. Jep. Wir machen es. Bequem und kompakt. Und alles lässt sich gut skalieren. Schau uns an. Wir haben es geschafft. Ich werde so tun, als hätte ich mich nicht verirrt, aber ich hatte mich total verirrt Wenn wir anfangen, viele verschiedene Dinge miteinander zu kombinieren , Variablen und Sortierlayouts und dann variable Abstände, kann das ein wenig überwältigend werden, keine Sorge Das sind die Katzen. Das sind ziemlich ablenkend. Arbeiten Sie sich durch Ist es das? Ist es das? Vielleicht ist es das nicht. Machen Sie viele Tests und Sie werden es herausfinden und Sie werden besser in Figma Genau wie ich und verirre mich nicht. All das ist es. Wir haben Abstände für Variablen gemacht. Wir sehen uns im nächsten Video. 100. Designs barrierefrei gestalten – Ein Leitfaden zum Plugin für Barrierefreiheit in Figma: Hallo, alle zusammen. In diesem Video wird sich alles um Barrierefreiheit drehen. Im Grunde geht es darum sicherzustellen, dass unsere Designs für Menschen verwendet werden können , die schlecht sehen, vielleicht farbenblind sind. Hier werden wir uns auf einige Schlüsselbereiche konzentrieren. Wir werden uns die Schrift, ihre Größe, ihr Gewicht und ihre Farbe ansehen. Wie groß ist der Kontrast zwischen der Schrift und dem Hintergrund? Wir werden uns auch die Berührungspunkte ansehen. Wie einfach sind Schaltflächen zu klicken? Wie weit sind sie voneinander entfernt? Alles läuft auf etwas hinaus, das Barrierefreiheit genannt wird. Sehr oft sind sie einfach zu implementieren, und wenn Sie ein paar davon gemacht haben, können Sie sie ganz natürlich tun während Sie Entwürfe durchgehen und entwerfen. Wir werden sie uns jetzt ansehen, sowohl die in Figma eingebauten als auch einige Plug-ins Lassen Sie uns ein bisschen schlängeln weil ich mich nicht besonders qualifiziert fühle , um diesen Teil zu unterrichten, aber ich mache es, wir müssen es tun Ich werde Ihnen mein Wissen, das ich bisher habe, weitergeben und Ihnen die Idee geben, weiterzumachen und weiter zu suchen. Lass uns reinspringen. In Ordnung. Es gibt einige Teile , die in Figma eingebaut sind und für manche Teile verwenden wir ein Plug-In Schauen wir uns die in Figman integrierten Teile an, schauen wir uns zunächst die Farbkontraste an Lassen Sie uns einen einfachen auswählen und wählen wir einen unserer Titel aus. Wählen wir diesen hier aus. Also hier, kann es vor dem Hintergrund gelesen werden? Ja, ich würde sagen, wir können das überprüfen, aber wenn es hier ausgewählt ist, können wir zu unserer Farbe wechseln, unserer Vollfarbe für den Text, und wir werden zu Benutzerdefiniert wechseln. Wir werden die Bibliothek nicht kaputt machen, wir werden nur nachschauen. Erfüllt es die Kontrastverhältnisse, das sind diese Optionen hier drin. Sie können sie ein- und ausschalten, indem Sie auf diese Schaltfläche klicken. Im Grunde suchen wir nach einem Verhältnis. Im Grunde geht es um den Unterschied zwischen Vordergrund und Hintergrund. In diesem Fall ist es die Farbe der Schrift mit dem Hintergrund, ich habe ein cremiges Grau. Dieser hier ist vorbei. Wie geht es vorüber? Lassen Sie mich zurück zum Zoll gehen und sicherstellen, dass er aktiviert ist. Ich kann es dort sehen. Es hat ein Häkchen neben der AA. AA ist die Standardbasisstufe. Sie können diesen Wert bis zum Beispiel auf die AA, die höchsten Küken, erhöhen die AA, die höchsten Küken Betrachtet man einen wirklich hohen Kontrast. Es besteht auch diesen, was großartig ist. Ich habe für diesen hier entworfen. Es wird nach einem Basislevel von drei zu eins gesucht. Sie können hier also sehen, dass es sechs zu eins ist, wirklich hoch. Wenn ich eine andere Schriftart wie diese gewählt habe, ist es eins zu eins oder 1,3 zu eins. Oder vielleicht kommst du irgendwo hin, als wäre ich nah dran, aber du scheiterst immer noch daran. Das Coole daran ist allerdings, dass du hier eine Schrift hast und sie die falsche Farbe hat. Du kannst darauf klicken. Kannst du dir vorstellen, dass es hierher springen und diese Band sehen wird? Alles hier unten ist gut. Sie können jede Ihrer Farben auswählen, solange sie sich dort unter der Kurve befindet. Es hängt wirklich vom Hintergrund ab. Nehmen wir den gleichen Titel und verschieben ihn hierher. Es ist im Ödland Es kann nicht dunkel sein, weil der Hintergrund dunkel ist. Auch hier beträgt das Kontrastverhältnis 1,5 zu eins, es muss drei zu eins oder höher sein. Auch hier kann ich darauf klicken. Es bringt es zur Sprache. Ich kann überall in dieser Zone sein, um den Test zu bestehen. Ich finde es toll, wie Figment das umgesetzt hat . Es ist super einfach Das legst du zurück. Schauen wir uns ein paar andere Optionen für Dinge an, über die ich mir Sorgen mache. Ich mache mir Sorgen, dass das nicht funktionieren wird. Ich habe auf meinen Button geklickt. Ich gehe hier runter. Ich werde mir den Schlaganfall ansehen. Schauen Sie sich den Schlaganfall an und Sie können hier sehen, dass er einfach aus ist. Also wird es nicht funktionieren. Ich werde darauf klicken, es fallen lassen und feststellen, dass es eigentlich in Ordnung ist. Was ich auch tun könnte, ist, anstatt die Schrift oder die Farbe anzupassen, ich könnte hier reingehen und tatsächlich auswählen, ich habe ein paar Bibliotheksfarben. Mitglied, wir haben 500 verdient. Nun, 500 funktionieren. Lass uns einen Scheck haben. Benutzerdefiniert. Wenn es nicht angezeigt wird, müssen Sie manchmal auf das Richtige klicken. Ich klicke hier auf meinen Strich und gehe dann zu Benutzerdefiniert. Ich bin dort zu den ausgewählten Farben übergegangen. Diesmal bin ich zum eigentlichen Strich übergegangen und er ist vorüber. Fantastisch. Ich werde einfach die 500 anstelle der zufälligen Farbe verwenden, die ich dort verwendet habe. Das Gleiche gilt für das, es wird nicht durchgehen. Anstatt einfach diese kleine Option hier zu verwenden, werde ich sagen, gehen Sie in zu verwenden, werde ich sagen, meine Bibliotheken und ich werde die 500 nehmen und wir sollten unter Phil sein, stellen Sie sicher, dass das aktiviert ist. Wir bestehen A nicht. Warum besteht es nicht, obwohl es der Schlaganfall war? So sehen wir aus. Gehen wir zum Benutzerdefiniert. Was es tun wird, ist, dass ich hier auf diese kleinen Optionen eingehen werde. Es zeigt mir, dass das nur normaler Text ist. Bei dieser Größe und bei diesem Gewicht geht es nicht vorbei. Normaler Text unterscheidet sich von großen Texten. Wir haben das schon früher gemacht, wir haben dieselbe Farbe gewählt, aber da es sich um einen großen Text handelt, ist er in Ordnung. Wenn es um normalen Text geht, oder um kleinen Text, der 16 ist, weiß es es. Es heißt, das Kontrastverhältnis muss tatsächlich höher sein. Wir schauen. Es heißt, es muss sein, was muss es sein? Solo, es muss 4,5 zu eins sein. Manchmal kann man das umgehen indem man eine stärker gewichtete Schrift verwendet. Das können wir nicht tun, weil wir schon fett sind. Um meine AA-Marke zu erreichen, werde ich sie auf 700 meines Grüns umstellen . Da haben wir's. Hoffentlich jetzt als normaler Text, los geht's. Es ist perfekt. Schauen wir uns ein paar andere Optionen an. Schauen Sie sich einige schlechte an. Ich habe das als Projekt, das ich früher gemacht habe, und was Sie finden werden, ist, sagen wir, dieser Text hier, was ist das? Das ist 18, und das ist 14. Es gibt einige Grundregeln, wenn es um Text geht und woher kommen die Regeln? Es ist diese hässliche Seite. Sie ist von der w3.org-Seite und heißt WCAG Im Moment ist 2.2 die aktuelle Version. Sie sind dabei, den dritten auszuarbeiten. Schau es dir an, wenn du dazu kommst. Was ich mache, wenn ich diese Seite finden muss, weil sie sehr schwer zu finden ist, ist einfach WIAG einzugeben und Kurzreferenz einzugeben und schon wird eine Kurzreferenz einzugeben und schon wird die neueste Dann können Sie etwas detaillierter darauf eingehen. Was ich am Ende mache, wenn ich auf diese Seiten komme, ist , dass ich so überwältigend bin. Wenn ich zum Kontrast gehe und einfach auf der Seite nach unten suche, können Sie hier sehen, dass Sie die vollständige Beschreibung anzeigen können. Du kannst sagen, ein großer Text muss 3.1 sein, und es muss ein Logo sein. Schau dir das an. Brauche keine Colocandra-Anforderungen Logos erhalten eine Ausnahmeregelung, beiläufiger Text. Das wären Dinge wie also ich zeige dir etwas beiläufigen Text Haben wir irgendeinen zufälligen Text? Äh, dieser Text da, zufälliger Text. Es ist nur eine Grafik. Es wird nicht zum Lesen verwendet. Es ist nur eine visuelle Art von, es ist eine Grafik. Es ist zufällig. Irgendein anderer zufälliger Text? Pug Life wäre ein zufälliger Text. Die anderen, die GD wären nebensächlich. Schauen wir uns das an. Das könnte interessant sein. Es hat also einen ziemlich gemischten Hintergrund. Also flippt es aus oder funktioniert es? Es ist wirklich groß. Ich glaube, es funktioniert. Schauen wir uns das an, füllen Sie das benutzerdefinierte aus. Da es einen Bildhintergrund hat, funktioniert es nicht. Sie könnten also eine der Hauptfarben ausprobieren, und was ich mache, ist, dass Sie ein Werkzeug in die Augen fallen lassen, Sie schnappen und es auf diese Weise testen. Dann sollten wir besser nachlesen können ob es erfolgreich ist , völlig in Ordnung. Ich muss dafür mein, ich weiß nicht, Gehirn benutzen und ich glaube, es wird vorübergehen. Perfekt. Schauen Sie sich also diesen Button hier unten an. Rick, und er wird nicht bestehen. Schauen wir uns das mal an. Das vor dem Hintergrund wird nicht funktionieren. Hasst es, 2.8. Das Problem hier ist, dass du es hier sehen kannst, es will es hier unten Ich wollte dunkel sein. Ich meinte, nein, ich wollte leicht sein. Wenn du willst, dass das passiert, musst du dann separat mit einem Hintergrund herumspielen und sagen, dass ich dafür eigentlich meine Farbe 700 verwenden werde. Jetzt werde ich den Text überprüfen und sehen, ob er funktioniert. Ich glaube, wir haben es jetzt bestanden. Oh, sieh dir die kleine Lücke da an. Das ist der winzig kleine Bereich, mit dem man herumspielen kann, und er funktioniert. Wenn Sie es also mit Kontrast zu tun haben, ist es anders, wenn Sie es mit einer Grafik und mit Text zu tun haben . Das Kontrastverhältnis muss höher sein. Schauen wir uns ein Plug-In an, denn das in Figma eingebaute Zeug ist gut Aber schauen wir uns das an. Es gibt also ein paar großartige Plugins. Wenn du zu deinen Aktionen gehst, zu Plugins gehst und Barrierefreiheit eingibst , gibt es so viele. Diejenigen, die ich am häufigsten verwende, sind die beiden Stark und Contrast. Lassen Sie uns diesen verwenden, weil er visuell sehr ansprechend ist. Ich wollte einfach sagen. Auf dieser Seite sage ich „Scannen Sie es und es wird die Auswahl scannen. Es wird sagen, dass viele davon gescheitert sind. Kannst du sehen, diese Zeile hier ist AA und diese ist AA. Das hängt davon ab, ob Sie für AA oder AA entwerfen. Das wird auf AAs hinauslaufen Sehr selten arbeite ich für ein Unternehmen, das zu mir kommt und sagt, sie sagen, sie werden in handgewellten Worten sagen , dass wir wollen, dass es zugänglich ist, aber sie werden keine Regeln haben Mehr Regierungsbehörden , für die ich gearbeitet habe, sagen, dass man den AA-Standard einhalten muss, total cool und niemand überprüft das jemals Es ist eine lustige Gegend, Barrierefreiheit. Sie sollten dies als Teil Ihres Benutzererlebnisdesigns tun. Sie sollten sich dessen bewusst sein. Manchmal musst du es treffen. es etwas kniffliger wird oder Sie es tun müssen, ist es, wenn Sie Websites erstellen, insbesondere mobile Websites. Google-Suchrankings werden Websites nicht nur danach bewertet, ob es sich um eine relevante Website handelt, sondern auch danach, ob sie zugänglich ist, okay? Und es kann durchgehen und nachschauen. Okay, ich werde nach einer AA-Bewertung suchen, und natürlich eine AA-Bewertung besser als eine AA-Bewertung, aber AA ist ziemlich restriktiv, was die Farben angeht, die Sie verwenden können. Du musst dir dein Publikum ansehen, für wen es ist. Hier für meinen Gig-Guide, A wird arbeiten. Schau dir diesen Text hier an. Also dieser Text hier, ist er gescheitert, Beispieltext? Wo ist er? Eigentlich kannst du einfach etwas auswählen und sagen, Auswahl scannen. Keine Schuhe gefunden. Großartig. Lass uns AA gehen. Auswahl scannen. Keine Schuhe gefunden. Es ist in Ordnung. Was Sie finden werden, ist eine der Regeln, die ich verwende und die auf der Website W Three aufgeführt ist , dass normaler Text als diese beiden angesehen wird. Wenn es fett gedruckt ist, ist normaler Text, der alle Barrierefreiheiten erfüllt, 14, aber fett gedruckt. Normal, wenn Sie Text verwenden möchten , der nicht fett gedruckt ist, z. B. normal oder hell, muss der Wert 18 sein. Diese beiden sind in Bezug auf ihre Größe gleich. Diese beiden sind in Bezug auf ihre Zugänglichkeit gleich. Dieser hier ist kleiner, aber fett. Dieser hier ist größer und nicht fett und hat einen wirklich hohen Kontrast. Auf diesem Grau ist es schwarz. Das ist ein bisschen wie ein mäandrierendes Video. Ich möchte, dass du nichts von dem Zeug, das ich dir gegeben habe, als Ich möchte, dass du losgehst und es selbst erkundest. Du wirst auf Dinge stoßen und du wirst Dan sagen, ich bin kein Experte für Barrierefreiheit, aber wenn es um das Design von Benutzererlebnissen geht, musst du über einige Grundkenntnisse verfügen Die Grundlagen sind Farbkontrast und Schriftgrößen. Schauen Sie sich diesen hier an. Lassen Sie uns diese Auswahl scannen. Das ist fehlgeschlagen. Warum scheitert es? Wir sind auf AA. Schauen wir uns A an, scannen wir es. Es ist immer noch gescheitert. Das Lustige ist, wenn ich das durchgehe und sage, dass du tatsächlich 16 Punkte hast, hast du die falsche Hautfarbe. Lassen Sie uns das durchgehen und die 700-Version davon auswählen. Scannen Sie es, es wird passieren. Es gibt einige einfache Dinge, die Sie tun können, um kleine Änderungen vorzunehmen und Dinge zu bestehen Schauen wir uns eine andere App an , die mir gefällt. Sie steckt fest. Sie können sich hier anmelden, ohne sich für diesen anzumelden. Schauen wir uns den Kontrast an. Schauen wir uns das an. Dieser hat die AA nicht bestanden, besteht aber die AA, was perfekt ist. Sie können hier sehen, dass es sich jedoch um einen großen Text handelt. Wir gehen nicht davon aus, dass es das A nicht besteht, aber das ist ein großer Text, alles über 18, und Sie können hier sehen, dass er den A-Test bestanden hat. kommt wirklich darauf an, wie groß der Text ist, wie schwer der Text ist und wie der Farbkontrast mit einem Hintergrund funktioniert. Das, worauf Sie achten müssen, wenn Sie sich mit Barrierefreiheit befassen, sind Berührungspunkte Das ist dieser Button hier. Lass uns eine Vorschau davon sehen. Und das Ding, auf das man klicken kann , muss auf Android sein, es muss 48 Pixel haben und auf Apple muss es, wie bei einem iPhone, 44 Pixel sein. Wenn ich hier drin abklicke, habe ich diesen Button. Sie können sehen, dass der Berührungsbereich ziemlich klein ist. Ich möchte das Herz nicht vergrößern. Was Sie tun können, ist hier drin zu sehen, dass es 32 Pixel sind. Ich habe dir vorhin gesagt , du sollst sie machen. Was wir tun werden, ist , das Original zu finden. Ich werde zu meiner Hauptkomponente zurückkehren. Sie können hier sehen, dass es 32 mal 31 ist. Sie werden auch feststellen , dass ich diesen Vektor habe, das Herz ist, der sich in diesem Elternteil befindet. Was ich tun kann, ist, den übergeordneten Rahmen einfach etwas größer zu machen und das Herz darin zu lassen, das Herz darin zu lassen, je kleiner die Größe, die Größe, die ich haben möchte. dieser übergeordnete Teil ausgewählt , kann ich sagen, ich hätte eigentlich gerne, dass die Maße 48 mal 48 sind. Es ist größer. Ich sage A raus, damit ich es genau in die Mitte des Elternteils stecken kann. Ich habe ein Lou draus gemacht, es ist einfach wieder darum gewickelt. Ich sage, vergewissere dich, dass ich den Außenrahmen ausgewählt habe, ich nehme 48 mal 48. Das kannst du hier sehen. Jetzt habe ich diesen Berührungspunkt, der viel größer ist, aber das Herz hat immer noch die richtige Größe. Wenn du deine Icons früher erstellt hast, achte darauf, dass es, wenn es VOS ist, mindestens 44 mal 44 Pixel und auf Android mal 48 Pixel groß ist. Beachten Sie außerdem, dass die Berührungspunkte sowohl auf dem Mac als auch auf Apple und Android mindestens 16 Punkte voneinander entfernt sein müssen . Die Leute werden es zwar nicht bemerken, insbesondere wenn Sie es beispielsweise mit einer mobilen Website zu tun haben , Google, die Android besitzen, aber sie bewerten Websites nicht nur danach, was der Inhalt ist, sondern auch danach, wie zugänglich sie sind. Wenn Sie wirklich kleine Symbole haben, die sehr nah beieinander liegen und schwer anzuklicken sind, ist es weniger wahrscheinlich, dass sie ein Suchergebnis mit Ihrer Website anzeigen , weil sie weniger zugänglich sind. Um das auch im Hinterkopf zu behalten. Schriften, Kontrast, Berührungspunkte. Das ist nur eine der wichtigsten, wenn es um die Figma-Seite des Designs Es gibt noch viele andere Überlegungen zur Barrierefreiheit, die nicht in den Rahmen von hier fallen, Dinge wie L kreuzen für Bilder, Farbenblindheit, es gibt das Navigieren mit einer Tastatur für sehbehinderte Menschen , Bildschirmlesegeräte , solche Es gibt mehr als das, was wir hier behandelt haben, aber das sind die wichtigsten Teile davon Stellen Sie sicher, dass Ihre Farben einen guten Kontrast haben, stellen Sie sicher, dass Ihre Schriftgrößen groß genug und die richtige Farbe haben, und stellen Sie sicher, dass Ihre Berührungspunkte groß genug und weit genug sind. In Ordnung, das ist meine kleine Miete für Barrierefreiheit. Da steckt noch mehr dahinter. Halte mich an nichts fest. Eine der coolen neuen Funktionen von Figma ist , dass ein Teil der Barrierefreiheit eingebaut ist Wenn Sie es einschalten, denken Sie daran, auf Benutzerdefiniert zu klicken, auch wenn Sie ein Bibliothekselement verwenden, nur um es zu überprüfen Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. 101. Verwenden des DEV-Modus in Figma: Hallo, alle zusammen. Wir werden uns etwas namens DEV-Modus in Figma Auf diese Weise kann Ihr Entwickler mit Ihren Dateien interagieren, Dimensionen und Dateien und Farben und Symbole ganz selbst abrufen , sodass Sie ihnen nicht jedes einzelne Element senden müssen ihnen nicht jedes einzelne Element senden müssen Sie können sich das Dokument ansehen, sich alles besorgen, was sie benötigen, und mit der Erstellung Ihres Dokuments beginnen, nachdem Sie es entworfen haben. Ordnung, lassen Sie uns einsteigen. In Ordnung. Um mit der Arbeit in DevMo zu beginnen, können Sie als Designer im DEV-Modus arbeiten . Der Entwickler kann seine eigenen kostenpflichtigen Konten einrichten. Es ist nur eine Pro-Version, aber der Entwickler kann sich eine günstigere Version besorgen , um mit Ihren Dateien zu arbeiten Also hier ist mein vollwertiger Platz, aber ein DV ist etwas billiger und sie können nicht den ganzen Designkram machen, aber ziemlich viel davon Wenn Sie ein bisschen von beidem sind, ein bisschen Designer und ein bisschen Entwickler, können Sie vielleicht einfach auf dem DV-Sitz leben Das hängt davon ab, worauf Sie Zugriff haben, aber oft können Entwickler viel Designarbeit leisten Oder sagen wir, bringen Sie Ihren Laptop-Entwickler Malcolm mit, er hat nur eine DVD, heißt das? Es bedeutet also ein Designer Nehmen wir an, ich arbeite an der Anmeldedatei Anmeldeseite und bin bereit für den Entwickler. Sie haben es vielleicht schon gesehen. Es gibt diese Option hier. Du, Dan, der Designer. Ich kann sagen, das ist bereit für den Entwickler. Es wird ein paar Dinge sagen. Es heißt: Hey, du hast nicht viele Dateien umbenannt. Ich könnte gehen und das machen. Ich werde das im Moment nicht tun. Nehmen wir an, ich werde es teilen. Ich werde noch einmal darauf klicken und sagen, lasst uns diesen Link kopieren und per E-Mail an sie schicken , ihn ihnen zuschicken Wer auch immer es ist, schick den Link rein. Was am Ende passiert, ist , dass sie in diesem Modus reinkommen. Es sah größtenteils genauso aus, was etwas verwirrend sein kann . Sie kommen in den DEV-Modus. Das Coole daran ist jedoch, dass der DEV-Modus ihnen die Informationen gibt, die sie benötigen. Wenn sie herausgezoomt sind, können sie außerdem die Dinge sehen, an denen sie arbeiten sollten Hier im Ebenen-Panel wird ihnen nur angezeigt, dass sie bereit für die Entwicklung sind Sie können das versiegeln und darauf klicken und daran arbeiten und es sich ansehen. Aber sie können es leicht erkennen, sieh mal, das ist die Sache, an der ich arbeiten wollte. Sie könnten es kopieren und in ein anderes Dokument einfügen, das ist auch völlig in Ordnung, weil das für jemanden etwas überwältigend sein könnte . Ich könnte das tun. Aber die coolen Dinge , die sie bekommen, , sagen wir, sie haben eine Weile daran gearbeitet. Sie haben die Originaldatei gesehen, Sie haben einige Änderungen vorgenommen und sie machen sich daran. Einige der Vorteile von Dvmode sind, dass sie darauf eingehen und sagen können, war vorher nicht so anders oder sie haben es mir gesagt Ich bin jetzt der Entwickler. Dan hat mir eine E-Mail geschickt, in der es heißt, ich habe alle Änderungen vorgenommen und du sagst, ich erinnere mich nicht einmal an dieses Dokument. Sie können mit verschiedenen Versionen verglichen werden. Ich muss zuerst etwas ändern. Nehmen wir an, Dan, der Designer, Ordnung, ich habe einige Dinge geändert , meine Barrierefreiheit verbessert, und jetzt muss es sein, dass ich diese dunkle Farbe wählen werde, und das wird eine andere Schrift sein. Lass uns die Schrift ändern. Ich habe meine Änderungen vorgenommen. Jetzt kommt Malcolm als unser Entwickler hier rein und sagt, okay . Ich habe das eine Weile nicht gesehen Was zur Hölle hat sich geändert? Sie können sagen, mit früheren Versionen vergleichen Kannst du das sehen? Das ist die alte Version. Das ist die neue Version. Sie können beginnen zu sehen, was die Änderungen sind. Sie entscheiden vielleicht Seite an Seite, Overlay kann praktisch sein Sie können sehen, dass ich auch mit einem Layout herumgespielt habe, sodass sie die Änderung leicht erkennen können . ' Also schließ es. Das ist einer der Vorteile. Der andere Vorteil ist, wenn sie sich im Entwicklermodus befinden , wenn sie auf Dinge klicken, bekommen sie die Dinge, die sie Sicht des Designs wissen wir , dass es sich bei einigen der Dinge, die ich gemacht habe um Geräusche innerhalb von Rahmen innerhalb von Hauptkomponenten handelt, denen ist das egal Nehmen wir an, der Entwickler möchte das jetzt durchgehen und einfach die von Ihnen verwendeten Größen und Abstände herausfinden kann einfach darauf klicken und sagen, da ist die Schrift Da ist die Schrift. Es ist Roboto komprimiert und ich nehme mir vielleicht einfach das CSS daraus, oder sie verwenden vielleicht IOS und sie können SifUI verwenden, vielleicht ist es Sie können den Code bekommen, den sie wollen. Sie können auch entscheiden, dass sie, wenn sie CSS verwenden, vielleicht keine Pixel, sondern Felgen verwenden Nur ein anderes Maß Okay, völlig in Ordnung. 1:00 Uhr statt 16 Pixeln. statt 16 Pixeln Gleiche, aber es gibt ihnen ein bisschen Kontrolle darüber wie sie Sachen hier rausholen. Man kann sehen, dass es die Farben gibt. Sie können in einige davon reingehen, also kann ich auf alles Mögliche eingehen, ich habe es für Dev markiert, aber sie können überall hingehen, wo sie wollen. Sie können hier reingehen und sich einfach den Text daraus holen. Das habe ich oft gemacht. Früher musste ich den Text separat durchgehen und per E-Mail versenden weil er sich in einem Designdokument befand das der Entwickler nicht zugreifen wollte. Sie können jetzt reingehen und sich das Zeug schnappen, das sie wollen. Ich mag es wirklich, dieses Ding hier zu sagen. Ich habe das gemacht. Es war ein Auto Layout-Mitglied. Wir haben es zusammen geschafft. Es ist ein automatisches Layout. Es laufen alle möglichen Dinge , die es reaktionsschnell machen. Okay, was mit ihnen passiert , war all die Arbeit, die wir gemacht haben, sie können sehen. Als Entwickler bin ich ein wirklich schlechter Entwickler. Ich kann Sachen kopieren und einfügen. Ich weiß, was ich mit Frontend-Code mache. Wir nennen sie in Figma Autolayout, weil es Aber für einen Entwickler heißt es Flexbox und es gibt mir die Dinge, heißt es Flexbox und es gibt mir die ich brauche, um dieses Ding responsiv zu machen, sodass ich nicht versuchen muss, alles neu zu Sie können hier die ganze Polsterung, alle Ränder, all die verschiedenen Stile Die andere coole Sache sind all die Farben, sieh mal, einige der Vermögenswerte, die hier drin sind, kannst du sehen, dass ich drei Sterne habe Sie können durchgehen und sagen, ich möchte, dass du all diese Symbole herunterlädst, und ich werde sie dort platzieren. Weil ich sie jetzt hier sehe, sie sind auf meinem Computer. Der Entwickler hat diese SVGs, diese skalierbaren Vektorgrafiken, bereit, um in seinen Entwürfen zu arbeiten Macht die Dinge wirklich einfach. Die Variablen, die wir vorhin erstellt haben, können Sie sehen, dass ich nichts ausgewählt habe. Sie können die Variablentabelle öffnen und sehen was wir getan haben, damit unser Hellmodus und unser Dunkelmodus funktionieren. Die andere nette Sache ist, sagen wir, wir haben dieses Dokument hier. Sie können hier raufgehen und Open und VS Code sagen. Das wäre höchstwahrscheinlich das Terminal, das Cody Ding, mit dem sie den Code schreiben, so etwas wie VS-Code Das, was sie tun können , ist, dass Sie möglicherweise lange Zeit damit verbracht haben , verschiedene Varianten zu verwenden, keine Variablen Vielleicht haben wir es für unser Logo gemacht. Wir hatten einen hellen Modus und einen dunklen Modus. Okay, ich weiß, in der Entwurfsansicht habe ich diesen kleinen Kippschalter gemacht Was sie als Entwickler tun können, sie können auf alles Mögliche eingehen und sie können sehen, dass wir hier auf das Logo klicken Kann den Squa-Zugriff auf die Ebenen sehen . Ich kann auf das Logo klicken Ich kann mein Verhalten untersuchen. In diesem Fall nur ein einfaches Ein- und Ausschalten für den hellen Modus und den dunklen Modus. Ein Blick auf ein anderes Projekt, an dem ich gearbeitet habe, finden Sie hier. Ich habe in der Entwurfsansicht diesen Frühaufsteher ein- und ausgeschaltet und ihn horizontal gestaltet, war sehr kompliziert. ewig gebraucht, aber ich möchte, dass der Entwickler damit experimentieren kann , anstatt nur eine statische Website zu sehen, anstatt nur eine statische Benutzeroberfläche zu sehen. Sie können im Div-Modus, wenn ich es mit ihnen teile, das Verhalten durchgehen und untersuchen und dann sehen, was sie hier gemacht haben. Sie können es neu erstellen, anstatt dass du versuchst, drei verschiedene Versionen für alles zu dokumentieren , sie können sie durchgehen und mit ihnen experimentieren. Entwickler hat auch Zugriff auf viele verschiedene Plug-ins, unabhängig von den Design-Plug-ins, auf dieser Registerkarte hier. Sie könnten also etwas Zeit damit verbringen , Ihren Entwickler auf den neuesten Stand zu bringen. Viele Entwickler werden diesen speziellen Kurs nur besuchen , um besser mit Designern zusammenarbeiten zu können, auch wenn sie sich nicht sicher sind können, auch wenn sie sich nicht sicher das Design selbst zu machen. Willkommen zum Kurs. Aber vielleicht schicken Sie ihnen nur kurz ihnen , wie sie mit Ihnen auf der Entwicklerseite zusammenarbeiten können , anstatt ihnen einfach JPEGs zu schicken und zu hoffen, dass sie Dinge neu erstellen können. Es erfordert ein bisschen Arbeit von ihrer Seite, sich auf den neuesten Stand zu bringen, aber sie werden es nützlich genug finden, sich damit zu beschäftigen weil wir so viel Zeit sparen können , anstatt zu versuchen, Bilder zu verschicken. sie können es sich schnappen und laden. Selbst wenn es nur dafür ist, werden sie daran gewöhnen und anfangen zu erkunden. Sie werden herausfinden, dass sie Stretch verwenden, um die Kiste zu füllen. Solche Dinge werden für sie nützlich sein und sie werden Figma ein bisschen genauer erkunden, was deine beiden Jobs und diese Übergabe wirklich einfach macht deine beiden Jobs und diese Übergabe wirklich einfach Anstatt ein separates Dokument zur Übergabe an Entwickler zu erstellen , können Sie die Dateien einfach weitergeben. Das ist DevMode Es wird nur bezahlt. Es ist super nützlich. Es ist diese kleine Option hier. Sie können für Dev vermarkten. Du musst nicht. Sie können die Dateien durchsuchen. Es ist immer noch üblich , vielleicht eine neue Seite mit der Aufschrift Ready for Dev zu erstellen und einfach die Teile, die Sie wollen, dort einzufügen. Offensichtlich kann das ein wenig überwältigend sein. Das ist es DevMde in Figma . Wir sehen uns im nächsten Video 102. Dokumentieren einer Komponente in einem Entwurf System in Figma: Hallo zusammen. In diesem Video werden wir uns eine Designspezifikation ansehen, die sich von einem Designsystem unterscheidet Ich werde erklären, was beide sind. Wir werden unsere eigene Designspezifikation erstellen, in der wir anfangen, Maße hinzuzufügen und die Anatomie einiger der von uns erstellten Elemente aufzuschlüsseln die Anatomie einiger der von uns erstellten Elemente aufzuschlüsseln Hier werden wir einige süße Plugins verwenden, die uns helfen, schnell an diese Position zu gelangen Es ist eher eine visuelle Art , auszudrücken, was Sie gemacht haben und wie es verwendet werden sollte, als einfach zum Dvmode zu wechseln und es anderen Leuten, Kollegen und Entwicklern zu überlassen , es selbst herauszufinden Lass uns reinspringen. Okay, für den Anfang habe ich eine neue Seite erstellt und nenne sie einfach Designspezifikationen. Es gibt zwei Ebenen für die Übergabe Ihrer Dokumente. Sie haben Designspezifikationen und Sie haben ein Designsystem. Eine Designspezifikation ist das, was Sie am Anfang gesehen haben. Ein Designsystem ist nicht Gegenstand dieses Kurses und für sehr große Unternehmen, in denen es Hunderte von Designern und Entwicklern gibt Hunderte von Designern und Entwicklern gibt , die alle von einer zentralen Quelle aus arbeiten müssen und neue Leute sich von einer zentralen Quelle aus arbeiten müssen und einarbeiten und sich selbst etwas beibringen müssen Das ist der Moment, in dem Sie loslegen und ein System erstellen. Nehmen wir an, Shopify hat das. Sie haben das genannt. Es heißt Polaris. Sie arbeiten darin Es hat eine eigene Website und Sie können sich damit abfinden, wie sie über all die verschiedenen Symbole denken, wie sie sie verwenden, was sie tun und was nicht. Sie werden feststellen, dass einige der Benennungen ziemlich einheitlich sind. Siehst du? Komponente. Ich weiß, was Komponenten sind. Welche Art von Komponente benötige ich? Ich möchte mir eine Gruppe ansehen und Sie können herausfinden, wie sie damit umgehen. Es gibt keine festen Regeln , wie es sein sollte. Oft richten sie sich an Entwickler. , wie ihre Website aufgebaut ist, gibt es eine Menge Code Je nachdem, wie ihre Website aufgebaut ist, gibt es eine Menge Code, aber es gibt Vor- und Nachteile, bewährte Methoden Schauen wir uns ein paar davon an. Microsoft verwendet Fluent für ihre Designsysteme, die Sie durchgehen können Oft müssen Sie am Ende die Suchoption verwenden. Nehmen wir an, ich möchte sehen, wie sie mit Karten umgehen , und da ist ihre Karte. Ja, es gibt dir eine Menge Dokumentation darüber. asiatisch. Sie haben ihr eigenes Designsystem mit eigenem Namen, nennen es Lasian Schauen wir uns das von Adobe an. Sie nennen das Spektrum. Wenn ich also eine Karte von ihnen brauche, schauen wir uns das an. Was haben wir? Karte. Sie funktionieren alle etwas anders. Da hast du's. Sie können die Adobe XD-Datei herunterladen , bei der es sich derzeit um eine redundante Software handelt. Manchmal haben sie auch Figma-Dateien , die Sie herunterladen können Base ist das, was Uber verwendet. Okay, also kann ich auf ihre Komponenten eingehen und herausfinden wie sie die verwenden. Was machen wir, Messaging. Ich gebe Ihnen ein Beispiel dafür, die technischen Daten Nicht alle geben Ihnen die tatsächlichen Zahlen. Wir werden das in diesem Video machen, aber einige von ihnen geben dir einfach den Code dafür und du kannst ihn durchgehen , um herauszufinden, was es ist. Einige von ihnen sind klarer gekennzeichnet. Okay, und Google verwendet Material und Apple für IOS. Wenn du Apps machst, nutzen sie diese menschliche Schnittstelle, so der Name ihrer. Du kannst das alles durchgehen und herausfinden, richtig, wie sie das Layout machen und wie sie es angehen? Eine Menge Dokumentation. Es gibt eine sehr schwere Sache. Es ist nicht schwer, aber Sie können das nicht vermasseln, wenn Sie alles lesen. Also werden wir die Art von Light-Version machen, die als Design-Spezifikation bezeichnet wird Nehmen wir an, ich muss diese Karte an meinen Entwickler weitergeben oder sie muss nur dokumentiert werden , damit jeder weiß, was ich getan habe und was wir tun Ich habe eine neue Seite mit dem Namen Design-Spezifikationen erstellt. Ich habe gerade dieses Element kopiert und eingefügt, ok, diese Karte aus unserem Hauptdesign. Als Erstes müssen Sie wahrscheinlich sicherstellen, dass Sie es beschriften. Also werde ich darauf eingehen und KI einfach versuchen zu benennen, weil es viele reine Frames gibt. Nein. Keines davon muss benannt werden. Ich muss das jetzt durchgehen und sagen, dass das mein Aushängeschild für Auftritte ist , und mich durch die Benennung der Dinge arbeiten Sobald Sie das getan haben, gibt es ein paar großartige Plugins Fangen wir mit meinem Favoriten an. Sie haben den Namen geändert. Jedes Mal, wenn ich ein Update für diesen Kurs neu erstelle, wechseln sie zu Design und Widgets Früher nannte man das acht Formen. Jetzt heißt es Specs. Dokument entwerfen. Sie haben es in Spectral umbenannt und dann wieder in Design Doc umbenannt. Schau es dir an. Es spielt keine Rolle, ob Sie diesen speziellen verwenden. Suchen wir nach, sagen wir, Designspezifikationen und gehen sie einfach durch und ich beurteile sie natürlich anhand dessen, was ich zuvor verwendet habe , aber auch danach, wie viele davon heruntergeladen wurden, wie viele Benutzer? Es gibt nur wenige Benutzer und ein paar Likes, es wird vielleicht nicht sehr oft verwendet. Sie möchten einen finden, der von vielen Leuten benutzt wird. Schau, 38.000 Menschen. Nehmen wir Design Doc, meinen Favoriten. Wir verwenden Measure schon früh. Und das ist einfach praktisch. Wenn Sie es ausgewählt haben, können Sie auf Messen klicken und es geht einfach durch und zeigt Ihnen alle Maße an. Es gibt ein paar Dinge wie 15, die nicht da sein sollten. Wenn ich diese Dinge mache, muss ich sie oft durchgehen und anpassen, muss ich sie oft durchgehen und anpassen um sicherzustellen, dass sie auch alle perfekt sind. Ich muss das rückgängig machen, das durchgehen, herausfinden, was das für ein Leerzeichen ist, und es von 15 ändern, weil es 16 sein sollte. Ich bin mir nicht sicher, wie es auf 15 gekommen ist. Das Coole an Design Doc ist dass es auch eine Option namens Spec Das hier, schauen wir uns das an. Sie können sehen, dass ich im Moment den kostenlosen Account dafür habe. Ich gehe zur Design-Spezifikation. Was es machen wird, es wird ein großes Durcheinander anrichten. Man muss dafür sorgen, dass genug Platz vorhanden ist dieses Ding wachsen kann, und dass man anfangen kann zu erkennen, es dasselbe ist, aber mit viel mehr Details. Das kann ein wirklich guter Weg sein, um professionell auszusehen, aber es kann auch sehr übersichtlich sein. Sie können sehen, dass es in all den verschiedenen Optionen kaputt geht. Titelbild ist hier also ein eigener kleiner Balken. Sie können sehen, dass es nicht nur den Abstand anzeigt, sondern auch, ob es gefüllt ist und eine feste Höhe hat? Das kann für den Entwickler sehr praktisch sein , wenn er weiß, ob es sich um ein Dokument handelt. Oft können Sie ihnen jedoch einfach die Figma-Datei geben und sie können den Entwicklungsmodus verwenden, wie wir es zuvor getan haben Diese Art von Dokumentation ist wirklich großartig, wenn Sie beispielsweise als Freelancer arbeiten und beauftragt wurden, etwas zu erstellen, und Sie möchten, dass etwas tatsächlich zurückgegeben wird, anstatt einfach nur eine Datei mit vielen Details hier drin zu haben beauftragt wurden, etwas zu erstellen, und Sie möchten, dass etwas tatsächlich zurückgegeben wird, anstatt einfach nur eine Datei mit vielen Details hier drin zu hier drin , anstatt einfach nur eine Datei mit vielen Details Sie können das alles umbenennen. Was Sie finden werden ist, Sie sehen, es wurde ein riesiges Figma-Dokument erstellt , das im Grunde genommen erstellt wurde Sie können all diese Dateien durchgehen, sie umbenennen und die Farben ändern Auch hier gibt es meiner Meinung nach Möglichkeiten, Dinge herauszufinden und zu ändern, z. B. was die Polsterung ist, was die Was möchtest du enthalten? Brauchen wir die Farben? Müssen wir die Effekte anwenden? Oder wollen wir es einfacher halten? Wirklich praktisch. In diesem Fall haben wir Abstand und Anatomie, was mir Dinge wie Schriften nicht nur den Raum gibt. Alles wunderschön kommentiert. Ich liebe es Das andere namens Specs funktioniert sehr ähnlich, also werde ich dich holen, es duplizieren und zu genau den gleichen Plugins und Widgets gehen . Ich werde nach Spezifikationen suchen. Das funktioniert sehr ähnlich. Warte eine Sekunde. Ich werde hier einen Frame-Zweig mit der gesamten Dokumentation erstellen . Schauen Sie sich an, welcher Sie näher an das bringt , wo Sie sein müssen. Diese ändern sich im Laufe der Zeit, und Sie werden feststellen, dass einige von ihnen einige kostenlose Einstellungen haben, andere nicht, und am Ende werden Sie ein bisschen Zeit damit verbringen, alles aufzuräumen ein bisschen Zeit damit verbringen, alles aufzuräumen Manchmal haben sie nicht die richtigen Namen und du hast die falschen Größen und Dinge verwendet Es gibt zwei Ebenen. Es gibt eine Designspezifikation, die im Grunde nur eine Seite innerhalb von Figma ist Bitte schön. Hier ist das, was ich gemacht habe und es ist dokumentiert. Dann können Sie zu einem Designsystem wechseln. zu sein, habe ich noch nie in einer Firma gearbeitet, in der ich tatsächlich Um ehrlich zu sein, habe ich noch nie in einer Firma gearbeitet, in der ich tatsächlich ein Designsystem herstellen musste. Ich arbeite mit KMUs zusammen, also sind alles kleine Unternehmen und für nichts wurde ein Designsystem benötigt Ich verstehe, wie sie funktionieren, und ich habe von ihnen aus gearbeitet, Sie haben Details aus ihnen gezogen Am Ende verwende ich das Designsystem, um mir ein Bild davon zu machen , wie ich dokumentieren sollte Okay? Was hier drin wäre nützlich für mein Team? Wahrscheinlich eine herunterladbare Figma-Datei. Muss ich das CSS und JavaScript herauskopieren? Wie funktioniert und wie reagiert das? Sie müssen entscheiden, was Sie übergeben müssen. Aber wenn Sie nur einige dieser Plugins verwenden können Sie das schon weit bringen. Sie erhalten zumindest ein Gefühl dafür, was Sie übergeben sollten, wenn Sie es noch nicht getan Denken Sie daran, dass das nichts ist, etwas zu teilen , damit es schick aussieht, sondern dass es nützlich sein soll Wenn du hier Dinge hast, die du kennst, schmeiß die Leute einfach ab. Vertikale Richtung, muss das da drin sein? Ich kann diese Liste durchgehen und anfangen , sie zu bearbeiten und sagen, dass ich das eigentlich nicht brauche. Beschränken wir uns einfach auf die Dinge, die mich wichtig sein sollen. Sonst hilft Müll hier um des Mülls willen niemandem Sieht aber schick aus. Okay, um nochmal zu decken, manchmal übergibt man einfach ein Dokument sagt, richtig, wo ist es? Ist das hier? Gehen wir zu meinen Akten. Sie sagen einfach, vergrößern , für Dev markieren und das ist vielleicht alles, was Sie brauchen, und teilen den Link, der mit dieser Datei verknüpft ist, dort. Sie können sagen, ich möchte den Link zum DEV-Modus kopieren, und das ist es, was ich an meinen Entwickler schicken werde . Es könnte sein, dass Sie eine Designspezifikation verwenden, die eher so aussieht Okay, nur irgendwie aufgelistet. Die Dinge, die Polsterung, die Ränder. Sie könnten hier einige Anmerkungen hinzufügen , dass Sie diese Bilder nicht verwenden Dies dient nur dazu, ganz klar zu machen, was Sie dort erwarten und was nicht. Dann ist die nächste Stufe ein Designsystem Okay? Und dann findest du vielleicht eine Vorlage in der Community, mit der du beginnen kannst. Ich musste mir einige ansehen , die Teil von Figma sind, und hier gab es eine Reihe von Vorlagen für Designsysteme. Sie sind alle unterschiedlich Sie müssen entscheiden, welcher Geschmack zu Ihnen passt. Es gibt keine spezifischen fest codierten Regeln dafür, wie diese Designsysteme funktionieren sollten. Sie sollten nützlich sein. Das sollten sie sein. Richtig. Das ist eine Designspezifikation und ein Designsystem in einer Figma und ein paar süße Plugins In Ordnung. Das ist es. Ich werde dich im nächsten Video sehen. 103. Klassenprojekt 21 - Konstruktionsspezifikation: Hallo, alle zusammen. Es ist Zeit für Klassenprojekte. Ich möchte, dass du deine eigene Designspezifikation für eines der Elemente aus deinem Design erstellst und etwas findest, das ein bisschen interessant Okay? Schreib es auf eine eigene Seite. Ich möchte sichergehen, dass alle Ebenen gut benannt sind. Ich möchte, dass du die Anatomie und die Maße hinzufügst. Okay? Also kannst du das Plugin benutzen. Aber ich möchte, dass du es durchgehst und einfach alles noch einmal überprüfst. Ich möchte, dass du irgendwie erlebst , dass der Abstand zwischen den IT nicht stimmt. Das ergibt keinen Sinn. Das sollte ich vielleicht ändern. Sie nicht einfach auf PlugIn exportieren und schicken Sie es einfach, gehen Sie es durch, stellen Sie sicher, dass alles richtig benannt ist, stellen Sie sicher alles da drin ist, dass es wichtig ist, und finden Sie heraus, wie sie funktionieren. Eine Sache, die Sie möglicherweise tun müssen, ist, dass Sie je nach Stecker einige von ihnen sperren müssen, was ein bisschen knifflig sein kann. Ich habe das im letzten Video nicht erwähnt, aber Sie können hier diesen Behälter sehen alle meine Messungen in verschlossenen Ebenen durchgeführt wurden. Ich müsste all diese auswählen und mir vorstellen, es den Eltern einfach mit der Umschalttaste mitzuteilen? Bedeutet, es zu entsperren. Ich möchte, dass ihr alle freigeschaltet seid, wenn ich Änderungen vornehmen muss. Gehen Sie das Entsperren der Ebenen durch, nehmen Sie bei Bedarf Änderungen vor, stellen Sie sicher, dass alles gut beschriftet ist, und gehen Sie die Abstände und die Anatomie durch und stellen Sie sicher, dass ich die Beschreibung benötige, um Texte darin zu schreiben? die Beschreibung benötige, um Texte darin zu schreiben Wahrscheinlich nicht. Binden Sie es einfach zusammen, bevor Sie einen Screenshot machen, und laden Sie ihn dann in den Aufgabenbereich hoch. Teile es auch in den sozialen Medien. Es sieht immer schick aus, wenn Sie eine Designspezifikation erstellt haben. Für dich tut es vielleicht, für mich, ich bin ein UX-Designer, sieh mich mit meinen Designspezifikationen an Also mach das und ich werde dich im nächsten Video sehen. 104. Anzeigen und Wiederherstellen des Versionsverlaufs in Figma: Eins. In diesem Video werden wir uns den Versionsverlauf ansehen. Im Grunde speichert Figma alles , was Sie getan haben, automatisch Sie können es auch manuell tun. Lassen Sie uns eintauchen und uns den Versionsverlauf in Figma Um deinen Versionsverlauf zu finden, passiert das automatisch, was nett ist Wenn du hier zu dem Namen gehst, erscheint ein Drop-down-Menü. Sie können den Versionsverlauf anzeigen. Sie können auch zu F und dann zu Datei gehen und dann den Versionsverlauf anzeigen lassen. Und es gibt viele Möglichkeiten, dorthin zu gelangen. Was letztendlich passiert, ist sich das hier auf der rechten Seite öffnet. Zeigt Ihnen alle Versionen des Dokuments. Wenn Sie ein kostenloses Abo haben, werden sie nach 30 Tagen gelöscht. Wenn du ein kostenpflichtiges Abo hast, stelle sicher, dass es sich nicht um Entwürfe handelt, sondern um ein echtes Projekt. Es wird für immer aufgezeichnet Ich mache das automatisch, was cool ist. Du kannst zurückgehen und sagen, oder dir einen der älteren schnappen. Siehst du, diejenigen, die ein Datum haben, werden automatisch gespeichert. Es macht das jede halbe Stunde. Im Grunde macht es das jedes Mal, wenn du Pause machst, weiß es, dass du eine Menge Arbeit gemacht hast und du eine Weile nicht daran gearbeitet hast. Es speichert es für dich. Sie können es auf diesen zurücksetzen. Sie sehen, dass Sie mit der rechten Maustaste darauf klicken und „Diese Version wiederherstellen“ sagen. Die coole Sache ist, dass du den Link dazu kopieren kannst. Nehmen wir an, wir haben etwas wiedergutgemacht und die Kunden kommen zurück Wir haben die Änderungen vorgenommen und niemand ist sich sicher, welche Änderungen vorgenommen wurden, oder sie sagen: War es so, wie es vorher war Sie können tatsächlich dazu gehen und sagen, kopieren Sie diesen Link und sie erhalten einen Link zu dieser Version, wie bei einer früheren Version dieses Dokuments. Es speichert es für immer. Es ist unglaublich. Ich verwende es oft, sagen wir, dass ich Änderungen vornehme oder dass ich viel für diesen Kurs mache. Wenn ich gerade dabei bin, ein Video zu starten speichere ich eine Version davon, sodass ich zum Versionsverlauf wechseln kann. Ich kann es speichern. Ich mache das Startvideo. Uh, eins zu eins, also wenn ich meine Aufnahme während der Aufnahme durcheinander bringe, muss ich nicht auf Rückgängig, Rückgängig, Rückgängig, Rückgängig drücken. Ich kann diese Version einfach wiederherstellen . Ich bin mir nicht sicher , was ich da tippe. Tippe es da ein. Ich kann es speichern, und jetzt ist es in meinem Versionsverlauf. Wenn ich das jetzt durchmache, bringe ich das alles durcheinander . Oh, das große Ding. Ich werde so tun, als hätte ich das mit Absicht gemacht, mit dem Versionsverlauf , ich werde das löschen Ich kann nichts löschen oder irgendetwas tun. Kannst du sehen, dass die Symbolleisten begrenzt sind? Das liegt daran, dass ich meinen Versionsverlauf nicht geschlossen habe. Ich möchte wirklich, dass du das schließt indem du dieses kleine Kreuz anklickst, dann erwacht alles wieder zum Leben, und ich bin in Ordnung, ich habe dich versehentlich losgeworden und du und das wurde verschoben, und jetzt kann ich zu meinem Versionsverlauf gehen Ich kann sagen, Sie zeigen den Versionsverlauf an, und ich kann ihn bis hierher zurückrollen Ich kann sagen, stelle diese Version wieder her. Du musst nur daran denken, das zu schließen, wenn es fertig ist. In Ordnung. Wenn Sie es wiederherstellen, wird es automatisch geschlossen. Aber ich bleibe in der Versionsgeschichte stecken kann nicht ständig etwas tun. Ich benutze es ziemlich oft, wenn ein Kunde mit einem Herren zurückkommt. Ich werde einen Versionsverlauf speichern, bevor ich die Änderungen vornehme, nur für den Fall, dass ich ein Rollback benötige. Zum Beispiel beim Speichern , wenn Sie andere Dateien, Dokumente und Software verwenden . Eine weitere nützliche Sache ist, dass, wenn Sie einen speziellen Plan haben, ich den Professional-Tarif verwende. Möglicherweise verwenden Sie das kostenlose Konto. Sie müssen entweder im Organisations- oder im Enterprise-Tarif angemeldet sein. Sie zahlen mehr dafür und erhalten zusätzliche Funktionen wie diese, Sie erhalten das Änderungsprotokoll, sodass Sie als Administrator nachschauen können, wer an der Datei gearbeitet hat, was wann geändert wurde, und alles nachverfolgen können. Es ist ein bisschen brüderlich, aber Sie können die Dateien im Auge behalten, um zu erfahren, wer das ruiniert hat oder wer das getan hat . Wann wurde das gemacht? Sie können das Protokoll nach Ihren verschiedenen Dateien durchsuchen und sehen, wer etwas getan hat, aber Sie müssen diese speziellen Organisations - oder Unternehmenspläne haben. Das ist es. Das heißt, Sie speichern Ihren Verlauf und laden ihn aus Ihrem Verlauf neu Denken Sie daran, das kleine Kreuz zu treffen, wenn Sie fertig sind. Sonst bleibt es in der Schwebe stecken. Das ist es. Ich werde dich im nächsten Video sehen. 105. Verwenden des Schneidewerkzeugs in Figma: Ordnung, Leute, und wir werden uns das Slice-Tool ansehen Sie können Dinge um sie herum zeichnen und bestimmte Grenzen exportieren , anstatt bestimmte Frames. Es ist ein Slice-Tool. Zeig es hier, weil es eine wirklich wichtige Abkürzung darstellt. Ich bin mir nicht sicher warum, aber es tut es. Lassen Sie uns herausfinden, was es tut und für wen es nützlich sein wird. In Ordnung. Lass uns anfangen. Es hat eine supereinfache Tastenkombination, die S-Taste. Ich denke, das ist für das Slice-Tool verschwendet . Sie zeichnen Boxen um Dinge herum , die Sie exportieren möchten. Es ist gut für, sagen wir, diese lange Seite hier. Wenn ich den gesamten Frame exportieren möchte, kann ich hier runterkommen und sagen, dass ich das Ganze exportieren möchte. Aber ich werde den ganzen Teil bekommen. Ich möchte mir das Slice K schnappen und es einfach drüber ziehen. Das Coole daran ist, dass Sie entscheiden können, wie groß es ist, und dann können Sie hier rübergehen und sagen, ich möchte ein PNG für dieses exportieren, und ich exportiere nur dieses. Lass es uns da hinstellen. Lassen Sie uns einen kurzen Blick darauf werfen. Sie können dort sehen, dass es das Slice ist und es exportiert auch den Hintergrund im Verhältnis zu anderen Dingen. Deshalb ist es sehr nützlich. Vielleicht möchtest du dir das schnappen. Ich bin wieder auf meinem Slice-Tool. Ich schnappe mir den Rand. Du musst in Bewegung sein, Tool. Sie sind Viki, schnapp dir den Rand. Sie sind schwer zu erwischen Wenn man eine Kiste um sie herum zieht, sind sie ein bisschen schwer zu greifen. Siehst du, ich kann nicht darauf klicken, aber wenn ich ein Feld darum ziehe, kann ich es nehmen und den ganzen Block exportieren Beides oben, einschließlich des Hintergrunds. Beachten Sie , dass sie hier im Ebenenbedienfeld ein spezielles Symbol haben , und wenn Sie ihnen einen Namen geben, wird dies mein Signaleingang sein. Jetzt kann ich es in meinem Laos-Panel auswählen und ich kann nur diesen Teil hier exportieren und er wird den richtigen Namen verwenden und ihn an der richtigen Stelle platzieren Es ist nur eine Alternative für die Verwendung Ihres Screenshots auf einem Mac Es ist Command Chef Four. Ich glaube, es ist ein gedruckter Bildschirm auf einem PC. Ja, das reicht für das Slice-Tool. Es ist nützlich. Du wirst es sehen, eine wirklich gute Abkürzung verwenden , verschwendet, meiner Meinung nach gibt es wahrscheinlich ein paar von euch da draußen, vielleicht zwei von euch auf YouTube, drei von euch, die das super nützlich finden werden. Es ist das Slice-Tool. Ich werde es löschen. Das ist das Slice-Tool. Erledigt. Zum nächsten Video. 106. Klassenprojekt 22 - Fertigstellung des Entwurfs: Richtig, es ist das letzte Klassenprojekt. Wir werden Sie dazu bringen , Ihr Design fertigzustellen. Je nachdem, wie viel Sie im Laufe des Kurses getan haben, dies relativ einfach oder kann eine Weile dauern. Lass uns einen Blick darauf werfen. Ich zeige dir zuerst, was wir machen werden. Wenn Sie in Ihre Übungsdateien gehen, ist hier ganz unten etwas, das Z final class project genannt wird, Z nur so, dass es unten ist und Sie werden hier ein PNG sehen, und das ist der Y-Rahmen, den ich möchte, dass Sie in hoher Auflösung erstellen. Oh, Sie benötigen einen Willkommensbildschirm, eine Homepage, Sie benötigen Suchergebnisse, Veranstaltungsdetails, Einkaufswagen und eine Bestätigung. Wir haben diese während des gesamten Kurses erstellt. Lass es mich dir zeigen. Es wird im Grunde alles aufräumen. Schauen Sie sich die Willkommensanimation an, wir haben verschiedene gemacht. Wir haben den Houdini-Text und verschiedene Animationen gemacht, bei denen der gesamte Text erscheint Abhängig von Ihrem Design möchten Sie vielleicht zurückgehen und eine neue Seite beginnen und einfach die Teile herauskopieren, die Sie benötigen, anstatt etwas von dem Chaos, das wir in diesem Kurs verursacht haben Zuerst die Animation, der nächste Teil ist die Homepage. Das haben wir hier gemacht. Es wird nach der Animation auf deine Homepage geladen und es wird auf die Seite „Was ist auf der Seite“ oder auf die bevorstehenden Trend-Gigs geladen die bevorstehenden Trend-Gigs . Im Grunde nur diese Karte Die Homepage hat jedoch zwei Optionen. Ich beginne auf der Trainingsseite, aber ich möchte auch, dass die Leute zu den Genres oder einer anderen Kategorie gelangen können , um deine Website zu durchsuchen. Lass es mich dir im Iframe zeigen. Es wird beginnen. Ihre Homepage wird im Trend sein und Ihre Veranstaltungskarte haben Aber ich möchte, dass es hier oben eine Unternavigation gibt, damit die Leute hier rübergehen und zu dieser Kategorie gehen können hier rübergehen und zu dieser Kategorie gehen Ich habe einen generischen Namen gegeben Deine könnten Genres sein. Wenn du darauf klickst, bekommst du all diese verschiedenen Genres, die auf deinen verschiedenen Arten von Techno basieren , falls es sich bei deinem um Techno handelt Deine könnten nach Standort sortiert sein. dieser Kategorie könnte es sich eine Standortschaltfläche handeln , die zu den verschiedenen Orten führt und die Leute können in den verschiedenen Bereichen klicken, vielleicht in deiner Nachbarschaft oder in deiner Stadt. Ich habe dir ein paar Optionen gegeben, also könnte es neu sein. Dieses Wochenende könnte eine weitere Option sein. Es könnte eine Unterkategorie der eigentlichen Genres sein. Es könnte der Standort sein, zwei Arten, auf diese Homepage zu gelangen. Für mich habe ich diese Version bereits hier gemacht, also würde ich wahrscheinlich nur Genres verwenden. Aber ich werde ein bisschen navigieren müssen, um zwischen diesen und jenen zu gelangen , entlang der Schaltflächen, es kann alles sein, was Sie wollen. Das nächste sind die Suchergebnisse. Sie haben hier unten eine Suchleiste. Ich möchte, dass darauf geklickt werden kann und dass Sie zu Ihrer Suchergebnisseite gelangen haben wir irgendwo gemacht. Wir haben diese Version gemacht. Ich möchte, dass es eine Seite mit den Details zu den Lüftungsöffnungen gibt. Ist der hier , der einfach explodiert? Wenn du auf eine der Homepages klickst, klickst du auf diese hier, Groove C, geht es etwas genauer und zeigt dir die Termine und Veranstaltungsorte und wie das geht Es gibt also eine Detailseite. Sobald das erledigt ist, klicken sie auf In den Warenkorb legen. Ich möchte, dass du deine CRT-Seite erstellst Sie können die Seite verwenden, die wir zuvor mit Variablen erstellt haben zuvor mit Variablen Da ist sie da. Meins ist sehr einfach. Das hängt davon ab, wie viel Zeit Sie haben. Füllen Sie es aus, vor allem, wenn Sie es für Ihr Portfolio verwenden wollen . Haben Sie hier ein bisschen mehr Details. Schauen Sie sich andere bestehende Einkaufswagen an und was dort passieren könnte, was nützlich sein könnte Ich möchte auch eine Bestätigungsseite. Wenn Sie auf die Schaltfläche Jetzt kaufen klicken, Sie eine Bestätigung, dass Sie die Tickets gekauft haben. Je nachdem, wie viel Zeit Sie haben, können hier eine dazwischen legen, bei der Sie Ihre Kreditkartendaten eingeben , Sie könnten ein Formular erstellen. Aber das sind die Anforderungen, alles andere im Klassenprojekt. Es könnte einfach sein. Du solltest all diese Dinge haben. Lass es uns aufräumen. Auf der Startseite müssen standardmäßig die Trendereignisse angezeigt werden, und es gibt eine untere Navigation und oben eine Unternavigation, über die wir gesprochen haben , wo ist sie Diese beiden hier oben, diese kleine Unternavigation. Es gibt eine Suchergebnisseite, es gibt eine Event-Seite, es gibt einen Ticketfluss. Wir haben nur einen Einkaufswagen und eine Bestätigung. Sie könnten die Kreditkarte auch dort hineinlegen. Optionale, wenn Sie dies für Ihr Portfolio tun, füllen Sie auf jeden Fall ein paar andere Seiten , um dies etwas vollständiger zu machen. Dinge wie das Künstlerprofil mit Wunschlisten, das überlasse ich dir. Diese sind optional. Aber Sie können hier die untere Navigation sehen. Wir haben eine, die eine niedrigere Navigation hat. Da ist es hier, wir könnten zu unserem Einkaufswagen springen. Wir können zu unseren Profilsuchergebnissen gehen. Dort verbindest du dich mit dem, und vielleicht hast du auch eine Seite mit deiner Wunschliste Du hast es geschafft, ich würde gerne ein Video von dir machen , wie du damit interagierst Denk daran , es entweder auf Vimeo oder YouTube hochzuladen und diesen Link in den Klassenprojekten zu teilen Wenn du die Dinge mit dem Video nicht machen kannst, hattest du einfach Probleme damit Vielleicht ist es an der Zeit, das zu erledigen, denn dann haben Sie ein interaktives Video, das wir alle sehen können. Ansonsten mach einfach einen Screenshot von all deinen letzten Seiten und lade diesen in die Klassenprojekte hoch. Bitte teile dies auch in den sozialen Medien. musst du nicht, aber das ist vielleicht der Zeitpunkt an dem du okay bist, ich habe etwas gemacht. Teile es in sozialen Netzwerken, markiere mich darin und wenn du es in die Klassenprojekte hochlädst, schau dir zwei andere Projekte an und gib Feedback Wenn du es für zwei Personen machst, kümmern wir uns um alle. Ich kann nicht zu allen gehen, mir die Projekte der anderen ansehen und ein oder zwei Kommentare hinterlassen, was Ihnen gefallen hat, was Ihrer Meinung nach geändert werden könnte, woran Sie arbeiten könnten. Das sind die optionalen Super-Duper-Karma-Punkte. Bereite das für dein Portfolio vor. Die nächsten Schritte von hier aus würden darin bestehen, das Briefing, die Persona, auf die Sie hinarbeiten, die Y-Frames, die Sie erstellt haben , Ihre fertigen Designs einzubeziehen das Briefing, die Persona, auf die Sie hinarbeiten, die Y-Frames, die Sie erstellt haben , Ihre fertigen Designs und sicherzustellen, dass Sie Ihr Portfolio als Fallstudie beschreiben, wenn Sie es verwenden Sie es Es ist sehr üblich, es so zu nennen. Wir tun nicht so, als wäre es ein echtes Produkt, das wir für einen Kunden hergestellt haben Das ist die eine Sache. Manchmal wollen die Leute es nicht mögen, das ist falsch Auf diese Weise erhalten UX-Designer Projekte und beginnen anhand von Fallstudien Wir müssen uns gegenüber zukünftigen Arbeitgebern darüber im Klaren sein , dass es sich um eine Fallstudie handelt. Beschreibe es als. Stimmt, das ist es. Die Klassenprojekte sind vorbei. Stellen Sie Ihre endgültigen Entwürfe zusammen, räumen Sie sie auf, bringen Sie sie auf eine neue Seite, sorgen Sie dafür, dass alle Interaktionen funktionieren Ich würde gerne sehen, wie sie zusammenkommen. Ich schaue mir gerne die Projekte der Leute an, besonders am Ende dieses Fortgeschrittenenkurses, weil wir gerade anfangen, uns einige Fähigkeiten anzueignen , und es macht mir Spaß, sie zu sehen. Ordnung, also mach es, teile es und ich sehe dich im nächsten Video. Das ist lang. Nehmen Sie sich Zeit, erledigen Sie das. Dann sehe ich dich im nächsten Video. 107. Was kommt nach Figma Advanced?: In Ordnung, es ist das Ende des Kurses. Aber ich muss mich verabschieden, aber es. Du musst dich bewegen. Beweg dich. Bewegen. Warum bewegst du dich nicht? Ordnung, das ist besser. Ähm, herzlichen Glückwunsch Du hast es bis zum Ende des Kurses geschafft. Wir sind am Ende von Figma Advanced. Was, ein großer Kurs. Jede Menge Videos, und ich möchte dir und mir nur gratulieren, wir haben es bis zum Ende geschafft. Ich habe alles aufgenommen und du hast alles gesehen. Andere Leute schauen Netflix. Du verbesserst dich selbst. Ja. Ja, es ist auch traurig. Wir müssen hier fertig werden. Aber wenn du mit anderen Kursen weitermachen möchtest, könntest du ab jetzt die nächsten Schritte machen, so wie Webflow wäre ein guter nächster Kurs dafür, okay, wo Webflow deine Figma-Designs nimmt und macht deine Figma-Designs nimmt und Figma Sites ist eine Art neue bittere Software , die Lass mich wissen, dass es hier einen Link geben wird, okay? Falls du dich dafür vorab registrieren kannst. Und wenn ich genug Interesse habe, mache ich auch ein Video mit einer Figma-Site Andere Kurse, wir haben Photoshop und After Effects und In Design und Illustrator und was wir sonst noch haben, Cava und DaVinci und Procreate Es gibt viele andere Kurse bei Bring Our Laptop. Wo auch immer Sie diesen Kurs gefunden haben , schauen Sie sich vielleicht einige dieser anderen Kurse an, und Sie können mich oder eines der Bring Your Laptop-Teams treffen. Du kannst mir auch auf Figma folgen, okay? Gehe zu diesem Link hier, figma.com Schrägstrich Und du kannst mir dort folgen. Und was für Sie jetzt wirklich interessant sein könnte, ist FGMA. Es heißt CFI und passiert einmal Das ist die große Art von Show, die sie machen. Okay? Es ist persönlich und sie machen es online. Also versuche persönlich dorthin zu kommen. Es ist super cool. Aber du kannst es auch online machen. Und es ist einfach so, dass es einen Live-Stream gibt und sie alle neuen Produkte veröffentlichen. Es ist also eine großartige Möglichkeit, es einmal im Jahr in Ihren Kalender aufzunehmen, um sich auf dem Laufenden zu halten. Ich werde den Kurs weiter aktualisieren, okay? Und wir können. Es ist ablenkend, oder? Und er trägt seine Brille nicht. Ich kann sie jetzt nicht bekommen, weil die Katze da ist. Aber ja, die Konfiguration ist großartig. Ich möchte mich auch bei der Redaktion bedanken. Das ist quasi eine Menge Arbeit für mich, aber genauso viel Riesenarbeit für Taylor und Jason, die Redakteure dieses Kurses. Also vielen Dank. Auch für Sepan Inappropriate Bitte warte. Katzen sind gleichzeitig süß, aber auch irgendwie eklig. Du bist eklig. Die andere Sache, die ich gerne fragen würde, ist, ob wir wieder dabei sind. Die andere Sache, die ich gerne fragen würde, ist, dass wir jetzt Freunde sind, ist, ob du jemanden kennst oder eine Art des Teilens findest, zum Beispiel, hey, ich habe diesen Kurs gemacht. Das solltest du dir unter Bring your own laptop ansehen. Das wäre auch toll. Diese Art von Empfehlungen ist der beste Weg, dass die Leute meine Inhalte finden , und sie ermöglichen es uns, hier bei Bring Your Laptop weiter Sachen zu machen Wenn du also einen Weg finden könntest, einen Link, einen sozialen Beitrag, wäre das auch toll Jetzt, da du Teil von Bring Your Own Laptop bist, bekommst du einige besondere zusätzliche Dinge. Also gibt es offensichtlich Zertifikate. Also, wenn du sie nicht gemacht hast, solltest du sie machen. Es gibt einen Pass, einen Verdienst und eine Auszeichnung. Wir haben diese Dinge im Kurs behandelt, aber das sind Dinge, die Sie in Ihren Lebenslauf aufnehmen können, und das ist hauptsächlich das, was zum Üben gut ist , weil Sie das Klassenprojekt machen müssen Schauen Sie sich diese also unbedingt an. Sie arbeiten in einer großen Organisation oder an einer Schule, wir machen Gruppenbuchungen unter Bring Your Laptop. Sie erhalten einen Rabatt, wenn Sie, ja, mehr als fünf buchen. Okay, schauen Sie sich das auch für Gruppenbuchungen bei Bing, unserem Laptop an, wenn Sie Ihr Team oder Ihre Schüler auf den neuesten Stand bringen möchten . Ja, schauen Sie sich Gruppenbuchungen bei Bing an, unserem Laptop. Die andere Sache, die Sie sich ansehen sollten, sind unsere Designherausforderungen, okay? Bringen Sie also unseren Laptop mit und schauen Sie sich an, dass es, Sie wissen schon, eine regelmäßige Herausforderung gibt, die dazugehört. Manchmal das Grafikdesign, manchmal das UX, ein Video, um diese zu überprüfen und sie einzubeziehen. Du suchst quasi nach einer Möglichkeit zu üben. Stell sicher, dass du dich darauf einlässt. Nochmals herzlichen Glückwunsch, dass Sie es bis zum Ende geschafft haben. High Five. Bitteschön. Ja. Ja, das ist eine Menge Arbeit. Ich hoffe, du hast viel gelernt und es hat mir Spaß gemacht, rumzuhängen. Es macht Spaß, oder? Ich mache diese Dinge gerne Ähm, das ist das Ende. Wie beenden wir es? Kann nicht peinlicher sein, als die Katze selbst auszuschauen, schätze ich. Wir werden es dort beenden Süße Katzen, sag auf Wiedersehen. Hier gibt es nichts zu sehen. Okay, ich hoffe aber, wir sehen uns zu einem anderen Kurs. Tschüss Fett bis Schwarz. Fate Black.